Los componentes en subcarpetas deben usar el prefijo de carpeta en Nuxt 4:
- CosechasHeatmap → ComparativaCosechasHeatmap
- CosechasEvolucion → ComparativaCosechasEvolucion
- CosechasTotales → ComparativaCosechasTotales
Este era el problema por el cual los componentes no se renderizaban.
- Actualizado THEME_SYSTEM.md con nuevas variables --brand-cosecha-2/3/4
- Documentadas implementaciones CSS con color-mix() en todas las clases
- Agregada sección 'Mejoras Recientes (v2.1)' en THEME_SYSTEM.md
- Actualizada descripción de Surface en settings.vue (cards grandes, tooltips)
- Mejorada sección 'Alcance del Sistema de Temas' con ejemplos de clases CSS
- Agregado tip sobre cards grandes usando color-mix()
- Versión actualizada a 2.1 | Fecha: 2025-10-31
Todos los componentes ahora responden completamente a cambios de tema
- El array tabs era constante, por lo que disabled se evaluaba solo una vez
- Cuando selectedCard.value era null, la tab detail quedaba permanentemente deshabilitada
- Al convertir a computed, disabled se reevalúa reactivamente
- Ahora al hacer click en una card, la tab detail se habilita correctamente
- Agregadas nuevas variables CSS --brand-cosecha-2, --brand-cosecha-3, --brand-cosecha-4 para gráficas
- Reemplazado --brand-bg-secondary (no existía) por --brand-surface en todos los componentes
- Actualizados arrays de colores en componentes de comparativa de cosechas
- Eliminados colores RGB/hex hardcodeados en tooltips y badges
- Todos los componentes ahora respetan el sistema de temas dinámico
- Actualizar comparativa-cosechas.vue:
* Eliminar mapeo de columnas inexistentes (total_lempiras_mojado, total_lempiras_oreado)
* Usar solo total_lempiras_mojado_oreado que viene de la query
- Actualizar CosechasHeatmap.vue:
* Actualizar interface ResumenIngresoRecord con columna combinada
* Cambiar cálculo para usar directamente total_lempiras_mojado_oreado
Los componentes ahora renderizan correctamente los datos de vista_resumen_ingresos.
- Actualizar Queries 56-59 en Metabase via API:
* Eliminar filtro de 'incluir_anulados' (columnas no existen en vista_resumen_ingresos)
* Usar 'total_lempiras_mojado_oreado' en lugar de columnas separadas
* Mantener cast ::text[] para parámetro cosechas_ids
- Actualizar backend (comparativa-cosechas.post.ts):
* Eliminar parámetro incluir_anulados del body
* Mantener conversión de array JS a formato PostgreSQL {elem1,elem2}
- Actualizar frontend (comparativa-cosechas.vue):
* Eliminar envío de parámetro incluir_anulados en fetch
Queries funcionando correctamente con vista_resumen_ingresos.
- Agregar contador de Queries Comparativa (4/4) en estadísticas
- Agregar nueva tab "Queries Comparativa" en metabase-debug
- Actualizar endpoint query-config para incluir queries comparativa
- Agregar computeds comparativaQueries y missingComparativaQueries
- Mostrar las 4 queries de comparativa con sus detalles
- Reorganizar grid de estadísticas para 6 columnas
La nueva tab permite visualizar y debuggear las queries:
- comparativa_datos_diarios_completos
- comparativa_totales_por_cosecha
- comparativa_datos_acumulados_por_dia
- comparativa_metadata_cosechas
- Agregar configuración de queries comparativa en metabase-queries.ts
- Crear endpoint /api/metabase/comparativa-cosechas.post.ts
- Crear 4 queries en Metabase:
* comparativa_datos_diarios_completos (ID: 56)
* comparativa_totales_por_cosecha (ID: 57)
* comparativa_datos_acumulados_por_dia (ID: 58)
* comparativa_metadata_cosechas (ID: 59)
- Restaurar página comparativa-cosechas.vue con nueva arquitectura
- Remover badge de mantenimiento del sidebar
- Integrar con componentes CosechasHeatmap, CosechasEvolucion y CosechasTotales
- Usar vista_resumen_ingresos como fuente de datos
La página permite comparar métricas entre diferentes cosechas de café
con visualizaciones interactivas y filtros configurables.
- Cambiar botones de confirmación (Guardar/Importar) en settings para usar --brand-success
- Actualizar color de tab activa en sidebar de --brand-primary a --brand-success
- Reemplazar colores hardcoded por variables CSS en badges de tipos de café:
* VistaTablaIngresos: Usar var(--coffee-uva/verde/mojado/oreado)
* informe-ingresos: Aplicar variables --coffee-* y --status-*
- Cambiar text-green-400 por text-[var(--brand-success)] en panorama
- Quitar badge de mantenimiento de Comparativa Cosechas
Todos los cambios siguen las reglas de THEME_SYSTEM.md para garantizar
que los colores respondan correctamente a los cambios de tema del usuario.
Cambios realizados:
- Agregada variable success (#00dc82 Nuxt green) para botones de confirmación y elementos de éxito
- Agregados inputs de color para todas las variables de café (Uva, Oreado, Mojado, Verde)
- Agregados inputs de color para todas las variables de estados (Pendiente, Pagado, Anulado)
- Actualizada interfaz ThemeColors con nueva propiedad success
- Actualizados todos los temas preestablecidos (café, azul, verde, carbón) con variable success
- Actualizada validación de importación de temas con nueva propiedad
- Agregado CSS --brand-success en main.css
Los usuarios ahora pueden personalizar completamente todos los colores del sistema:
- 9 colores base (incluye success)
- 4 colores de tipos de café
- 3 colores de estados de pago
Total: 16 variables personalizables
La variable success se aplica a:
- Botones de confirmación
- Página seleccionada en sidebar
- Indicadores de éxito
- Crear composable useNotifications con gestión por localStorage
- Almacenamiento separado por usuario usando UID de Authentik
- Auto-limpieza de notificaciones mayores a 30 días
- Sincronización automática entre pestañas
- Filtrado por tipo, búsqueda y gestión completa
- Crear wrapper useToast para guardar toasts automáticamente
- Intercepta todos los toasts de la aplicación
- Guarda historial sin afectar funcionalidad existente
- Implementar endpoints de API para notificaciones del backend
- POST /api/notifications/send para enviar notificaciones
- GET /api/notifications/list para obtener pendientes
- Actualizar página de notificaciones con funcionalidad real
- Búsqueda y filtros por tipo (info, warning, success, error)
- Eliminar individual o todas las notificaciones
- Marcar como leídas individual o todas
- Badges de origen (toast, backend, manual)
- Estados vacíos con mensajes informativos
- Actualizar badge del sidebar con contador dinámico
- Muestra número real de notificaciones no leídas
- Se oculta cuando no hay notificaciones
- Inicializar sistema en app.vue
- Auto-inicialización al montar la app
- Limpieza automática de notificaciones antiguas
Cambios:
- Agregar documentación completa del sistema de temas en /settings
- Extender ThemeColors con 7 nuevas variables:
* coffeeUva, coffeeOreado, coffeeMojado, coffeeVerde
* statusPendiente, statusPagado, statusAnulado
- Actualizar useTheme.ts para aplicar nuevas variables CSS
- Actualizar main.css con definiciones de nuevas variables
- Actualizar temas predefinidos (azul, verde, carbón)
- Mantener colores de café y estados consistentes en todos los temas
Las nuevas variables permiten personalizar:
- Colores de identificación de tipos de café en gráficas
- Colores de estados de pago en tablas y badges
Remueve las páginas en modo mantenimiento que no se van a utilizar:
Páginas eliminadas:
- /metadatos - Visualización de estructura de tablas
- /rawExplorer - Exploración de datos en formato raw
Cambios en sidebar:
- Removidos enlaces de "Metadatos" y "Explorador de datos raw"
- Sidebar ahora solo muestra páginas activas y funcionales
Páginas que permanecen:
- Panorama Facturador (funcional)
- Informe Ingresos (funcional)
- Explorador de datos (funcional)
- Comparativa Cosechas (en mantenimiento, se restaurará próximamente)
- Metabase Debug (herramienta de desarrollo)
Simplifica la navegación mostrando solo funcionalidades relevantes.
Implementa botones "Copiar Texto" y "Copiar JSON" en todos los
componentes de datos del Panorama Facturador:
Componentes actualizados:
- SecosVendidos: Exporta inventario y proyecciones de café seco
- RechazosSubproductos: Exporta tabla de rechazos con totales
- Totales Financieros: Exporta vista general financiera (directo en página)
Además:
- Los componentes de Totales (IngresoCompra, Monetarios, Verde)
ahora reciben contadores y metadata para incluir footer
- Todos los textos incluyen footer con:
- Rango de fechas
- Ingresos y rechazos filtrados vs totales
- Fecha de generación
Nota: Panorama no tiene datos de clientes, solo ingresos y rechazos.
- Configurar prop :ui en todos los UCard para usar variables CSS del tema
- Reemplazar colores hardcoded (amber, green) por variables de tema
- Los UCard ahora responden correctamente a cambios de tema
- Corrige problema donde los cards no cambiaban de color al seleccionar presets
Archivos modificados:
- app/pages/settings.vue: Agregar :ui prop con bg-[var(--brand-surface)] y border
Implementa un footer consistente en todas las funciones de copiar texto
que incluye información de contexto del informe:
Footer incluye:
- 📅 Rango de fechas aplicado
- 📦 Cantidad de ingresos filtrados vs total
- 👥 Cantidad de clientes con ingresos vs total
- 🕐 Fecha y hora de generación
Cambios en archivos:
- informe-ingresos.vue: Footer en Lista, Top 10 y Serie Temporal
- TotalesIngresoCompra.vue: Recibe contadores y metadata
- TotalesMonetarios.vue: Recibe contadores y metadata
- TotalesVerde.vue: Recibe contadores y metadata
El footer usa datos de la query "Informe Ingresos - Contadores de Filtros"
que proporciona totales con y sin filtros aplicados.
Cambia todos los botones de copia en informe-ingresos.vue para
usar el mismo estilo que los componentes de Totales:
- color: "gray" (antes "neutral")
- variant: "soft" (antes "outline")
- icon JSON: "i-lucide-braces" (antes "i-lucide-code")
Ahora todos los botones de copia en la página tienen apariencia
consistente.
Implementa funcionalidad de copia en tres secciones del Informe:
📋 Funcionalidades agregadas:
1. Lista de Ingresos
- Copiar Texto: Formato WhatsApp con emojis y legible
- Copiar JSON: Formato estructurado para sistemas
2. Top 10 Clientes
- Copiar Texto: Ranking formateado con métricas
- Copiar JSON: Array de objetos con datos completos
3. Serie Temporal Acumulada
- Copiar Texto: Evolución temporal con emojis
- Copiar JSON: Datos completos para análisis
✨ Características:
- Botones con iconos (i-lucide-copy y i-lucide-code)
- Disabled cuando no hay datos disponibles
- Alertas de confirmación al copiar
- Formato texto optimizado para WhatsApp
- Incluye metadata: rango de fechas y timestamp
Uso:
- Copiar Texto → Compartir en WhatsApp/Telegram
- Copiar JSON → Integración con otros sistemas
- Altura máxima de 600px con scroll vertical
- Header sticky que se mantiene visible al hacer scroll
- Mejora la usabilidad cuando hay muchos registros
Agrega tres secciones principales con datos reales de Metabase:
1. Lista de Ingresos (Query ID 50)
- Tabla completa con detalles de cada ingreso
- Campos: ID, fecha, cliente, tipo, peso, precio, total, estado
- Badges de colores para tipos y estados
- Soporte para 1000 registros
2. Top 10 Clientes (Query ID 51)
- Ranking por monto total pagado
- Muestra: nombre, cédula, ubicación
- Métricas: total pagado, número de ingresos, quintales
- Diseño en cards con numeración
3. Serie Temporal Acumulada (Query ID 52)
- Datos desglosados por fecha, tipo y estado
- Columnas del período: ingresos, peso seco, inversión
- Columnas acumuladas: qq acumulados, inversión acumulada
- Tabla scrollable con sticky header
Correcciones técnicas:
- Usar campos correctos de las queries de Metabase
- created_at en lugar de fecha
- cliente_nombre en lugar de nombre_cliente
- cliente_id, cliente_cedula, cliente_ubicacion
- fecha_grupo, peso_seco_periodo, inversion_acumulada
- Crear formulario completo de configuración de colores
- Agregar 8 campos editables: bg, surface, border, primary, primaryStrong, accent, text, textMuted
- Implementar color pickers + inputs de texto hexadecimal
- Agregar vista previa en tiempo real (toggle opcional)
- Guardar configuración en localStorage
- Aplicar cambios dinámicamente con CSS variables
- Incluir botón para restaurar colores por defecto
- Colores default: tema café actual de la aplicación
Nuevo componente creado:
- SimpleMultiSelector.vue: Componente genérico reutilizable
- Normaliza strings a objetos {label, value}
- Capitaliza primera letra automáticamente
- Props configurables: icon, placeholder, labels singular/plural
- Mismo estilo espectacular que otros selectores
Cambios en informe-ingresos.vue:
1. Layout mejorado:
- Grid de 3 columnas (antes 2 columnas + 1 separado)
- Tipos, Estados y Calidades en mismo nivel
- Distribución más equilibrada y consistente
2. Reemplazar UCheckboxGroup por SimpleMultiSelector:
- Tipos de Café: icon coffee, "tipo/tipos"
- Estados: icon check-circle, "estado/estados"
- Calidades: icon star, "calidad/calidades"
3. Labels consistentes:
- Todas las secciones usan mismo formato
- text-sm font-medium mb-2
Beneficios:
- Interfaz más limpia y moderna
- Búsqueda integrada en cada filtro
- Tags visuales de selección
- Consistencia total en todos los filtros
- Mismo tema café/dorado en toda la app
- Mejor uso del espacio (3 columnas iguales)
Nuevo componente creado:
- UbicacionMultiSelector.vue: InputMenu con tema personalizado
- Mismo estilo y funcionalidad que ClienteMultiSelector
- Búsqueda en tiempo real de ubicaciones
- Tags visuales para selección múltiple
- Contador y botón "Limpiar todo"
Cambios en informe-ingresos.vue:
- Reemplazar UCheckboxGroup de ubicaciones por UbicacionMultiSelector
- Mover selector de ubicaciones a su propia sección (fuera del grid)
- Grid ahora tiene 2 columnas (Tipos y Estados) en lugar de 3
- Mantener layout consistente con selector de clientes
Estilos aplicados (igual que ClienteMultiSelector):
- Fondo: --brand-surface
- Bordes: --brand-border con focus dorado
- Item highlighted: tono dorado suave
- Tags: color --brand-primary
Ahora ubicaciones tiene la misma UX moderna que clientes.
- Añadir hover con fondo color brand (#c08040) al 5% de opacidad
- Transición suave de 200ms en cambio de colores
- Bordes redondeados para mejor estética
- Sin cambios de tamaño ni desplazamiento
- Aplicado a todos los filtros: ubicaciones, tipos, estados y calidades
- Reemplazar checkboxes individuales por UCheckboxGroup en filtros de:
* Ubicaciones (con scroll vertical para listas largas)
* Tipos de Café (Uva, Mojado, Oreado, Verde)
* Estados (Pagado, Pendiente)
* Calidades (orientación horizontal)
- Simplificar modelo de datos:
* Eliminar filterTipos y filterEstados (objetos con booleanos)
* Usar directamente selectedTipos y selectedEstados (arrays)
* Eliminar computed tiposArray y estadosArray (innecesarios)
- Beneficios:
* Código más limpio y mantenible
* Mejor consistencia con Nuxt UI
* UI más compacta y profesional
* Menos lógica de conversión de datos
Cambiado de 'icon' a 'leadingIcon' (propiedad correcta de Nuxt UI)
y agregados estados de color explícitos:
- Tab activa: text-[#1b1209] (negro oscuro)
- Tab inactiva: text-[var(--brand-text-muted)] (gris apagado)
- Transición suave de colores con transition-colors duration-200
Esto asegura que el icono sea visible y cambie de color
correctamente al seleccionar diferentes tabs.
Agregado @ts-expect-error para suprimir la advertencia sobre
la propiedad 'icon' que no está en los tipos formales pero es
una customización válida en Nuxt UI.
Agregado z-20 al icono para que herede correctamente el color
del trigger activo. Ahora el icono cambia a negro (#1b1209)
cuando la tab está seleccionada, igual que el label.
Cambios realizados:
- Tabs inactivos ahora tienen fondo transparente en lugar de #1c140c
- Indicador tiene z-10 para estar por encima del fondo
- Labels tienen z-20 para estar por encima del indicador
- Hover de tabs inactivos usa bg semi-transparente (#2a1f14/50)
- Agregada transición suave de colores (transition-colors duration-200)
Esto soluciona el problema donde el badge color cobre se ocultaba
durante la animación de deslizamiento entre tabs.
BREAKING: Violación de arquitectura corregida
- Eliminar endpoint /api/postgres/query (acceso directo a DB prohibido)
- Cambiar /api/clientes para usar query de Metabase en lugar de SQL directo
- Crear endpoint /api/metabase/opciones-filtros para obtener opciones
- Cambiar loadOpcionesFiltros para usar API en lugar de MCP directo
- Usar "Informe Ingresos - Lista de Clientes con Totales" para clientes
- Usar "Informe Ingresos - Opciones de Filtros" para opciones
- Respetar filosofía: Metabase calcula TODO, Vue solo renderiza
- La app NUNCA habla directamente con bases de datos
- Crear endpoint /api/clientes para obtener clientes desde Supabase
- Crear endpoint /api/postgres/query para ejecutar queries SQL
- Crear componente ClienteMultiSelector con búsqueda y filtro por ubicación
- Agregar filtros de clientes, ubicaciones y calidades en informe-ingresos.vue
- Cargar opciones de filtros desde Metabase (query ID 53)
- Actualizar detección de cambios pendientes con nuevos filtros
- Enviar cliente_ids, ubicaciones y calidades al endpoint de Metabase
- Componente con formato de cédula y ordenamiento por nombre
- Búsqueda por nombre, cédula o ubicación
- Contador de selección y botón limpiar todo
- Botones rápidos para seleccionar por ubicación
- Personalizar UTabs con prop :ui usando colores de marca
- Tab seleccionada: bg-[#c08040] con texto oscuro
- Tabs inactivas: text-[var(--brand-text-muted)] con hover
- Borde inferior: border-[var(--brand-border)]
- Input de búsqueda con bg, text y border del tema
- Focus ring en color café #c08040
- Reescribir informe-ingresos.vue siguiendo patrón de panorama.vue
- Implementar filosofía "Metabase calcula TODO, Vue solo renderiza"
- Agregar filtros avanzados: tipos de café, estados
- Integrar con endpoint /api/metabase/informe existente
- Usar componentes reutilizables: TotalesIngresoCompra, TotalesMonetarios, TotalesVerde
- Implementar detección de cambios pendientes con alertas visuales
- Agregar confirmación para incluir registros anulados
- Eliminar documentación redundante de queries (ya está en Metabase Debug)
- Layout informe con control de visibilidad de secciones
- Placeholders para tablas y gráficas futuras
- Envolver tabs en UCard con clase brand-card
- Aplicar estilos de variables CSS al input de búsqueda
- Configurar focus ring con color de marca #c08040
- Usar colores de texto y fondo del tema en input
- Aplicar clase brand-card a todas las cards principales
- Usar colores de variables CSS (--brand-text, --brand-text-muted, --brand-primary)
- Estilizar cards de estadísticas con border-[#3a2a16] y bg-[#1c140c]
- Actualizar estilos de tablas, modales y formularios
- Aplicar estilo consistente a botones principales con color de marca #c08040
Cambios realizados:
- Eliminar cards innecesarias que envolvían componentes de métricas
(TotalesMonetarios, TotalesIngresoCompra, TotalesVerde ya son cards)
- Actualizar estilo del contenedor de filtros al estilo de panorama facturador:
* Usar clase 'brand-card' y bordes transparentes
* Header con título y subtítulo estilizados
* Checkbox 'Incluir anulados' en header
* Inputs con variables CSS de brand
* Footer con botón 'Actualizar' estilizado
* Layout consistente con gap-8
Resultado: diseño más limpio, sin duplicación de cards y
estilo consistente entre páginas.
Cambios realizados:
- Alerta más compacta con variant 'soft' en lugar de 'solid'
- Eliminado botón 'Actualizar ahora' redundante de la alerta
- Eliminado emoji de advertencia del botón 'Actualizar'
- Simplificado borde del card (solo borde amarillo sutil)
- Eliminadas sombras y rings del card
- Eliminada animación pulse del botón
- Mantenido punto amarillo pulsante en la alerta
El indicador ahora es más discreto pero sigue siendo evidente.
Implementación de sistema de tracking para detectar cuando los filtros
han cambiado pero no se han aplicado a los datos mostrados.
Indicadores visuales implementados:
- Alerta amarilla prominente con animación pulse y ping
- Borde y sombra amarilla en el card de filtros
- Botón 'Actualizar' cambia a amarillo con emoji de advertencia
- Botón rápido 'Actualizar ahora' dentro de la alerta
- Animaciones llamativas para captar la atención
El sistema compara los filtros actuales con los últimos aplicados
y muestra indicadores visuales evidentes cuando hay diferencias.
Cambios implementados:
- Eliminada la llamada automática a loadData() en onMounted
- Añadido estado inicial con mensaje de bienvenida
- El usuario debe hacer clic explícito en 'Actualizar' para cargar datos
- Mejora la experiencia evitando queries automáticas pesadas a Metabase
Ahora la página muestra:
- Estado inicial: filtros + mensaje invitando a actualizar
- Estado con datos: filtros + todas las secciones de datos
Cambios realizados:
- Mover botón "Actualizar" al footer del card de Filtros
- Implementar guard para prevenir peticiones simultáneas
- Eliminar watcher automático de fechas
- Deshabilitar recarga automática al cambiar "incluir anulados"
- Usuario debe hacer clic explícito en "Actualizar" para cargar datos
Esto garantiza que solo una petición a Metabase esté activa a la vez
y da control total al usuario sobre cuándo recargar los datos.
