- Actualizada query de contadores con total_pagado_planillas y total_precios_tareas
- Agregados dos nuevos cards en TotalesEmpleados para mostrar totales monetarios
- Incluida diferencia entre pagos de planillas y precios de tareas
- Agregada función formatCurrency para formateo monetario
- Actualizada función copiarTexto con sección de totales monetarios
- Agregada altura máxima (max-h-96) a tabla de planillas con scroll vertical
- Cambiado grid de 4 a 3 columnas en lg para mejor distribución
- Agregado max-h-96 y overflow-y-auto a DetalleTareas.vue
- Agregado max-h-96 y overflow-y-auto a DetalleAsistencias.vue
- Las tablas ahora tienen scroll vertical cuando hay muchos registros
- Agregar entrada en navigationPrimary para acceder al informe de empleados
- Icono: i-lucide-users
- Ubicación: entre Informe Comercios y Comparativa Cosechas
- Crear 5 queries SQL en Metabase para datos de empleados:
* Contadores generales (horas, días, tareas)
* Lista de empleados con totales agregados
* Detalle de tareas realizadas
* Detalle de asistencias con cálculo de horas
* Opciones de filtros disponibles
- Implementar backend API endpoint /api/metabase/informe-empleados
* Soporte para filtros por fecha, empleados, títulos de tareas y planillas
* Ejecución paralela de queries con manejo de errores
* Transformación de datos de Metabase a formato consumible
- Crear componente TotalesEmpleados.vue
* Visualización de métricas principales (horas, días, tareas)
* Cálculo de promedios por empleado
* Funcionalidad de copiar texto/JSON
- Implementar página informe-empleados.vue
* Layout tipo informe con selector de fechas
* Filtros avanzados por empleado, títulos de tareas y planillas
* Tabla integrada de empleados con métricas clave
* Estados de carga, error y bienvenida
* Detección de cambios pendientes
- Actualizar configuración de queries en metabase-queries.ts
Estructura trabajada:
- clientes (empleado = true)
- asistencias (con cálculo de horas trabajadas)
- tareas_realizadas (con títulos y planillas)
- planillas (con totales y rangos de fechas)
- Actualizar query Metabase Card 63 para extraer total_transferencia y total_abono
- Agregar campos total_transferencia y total_abono a props del componente
- Actualizar computed totalDistribucion para incluir los 5 tipos de pago
- Cambiar grid de distribución de 4 a 6 columnas (5 tipos + verificación)
- Agregar metric boxes para transferencia (cyan) y abono (orange)
- Agregar barras de visualización para transferencia y abono
- Actualizar función copiarTexto con los 5 tipos de pago
- Ahora la verificación de totales cuadra correctamente
- Agregar nueva sección "Café Verde (Inmaduro)" mostrando libras (lb_verde) como métrica principal
- Separar visualización: café seco (uva, mojado, oreado) vs café verde
- Actualizar gráfico de distribución para mostrar solo tipos de café seco
- Actualizar función copiarTexto() con nueva estructura y nota explicativa
- Agregar campo lb_verde a props del componente
- Incluir nota: "Café inmaduro - No produce peso seco"
- Mover TotalesMonetariosComercio a components/comercios/
- Mover TotalesPesoComercio a components/comercios/
- Mover TablaComerciosResumen a components/comercios/
- Actualizar referencias en informe-comercios.vue con prefijos de carpeta
- Crear página principal /informe-comercios con todos los estados (loading, error, initial, main)
- Implementar componente TotalesMonetariosComercio con distribución de pagos y gráficas
- Implementar componente TotalesPesoComercio con totales por tipo de café
- Implementar componente TablaComerciosResumen con paginación y exportación
- Agregar navegación en sidebar para Informe de Comercios con icono receipt
- Integrar filtros avanzados (fechas, clientes, ubicaciones, tipos)
- Incluir sistema de alertas para cambios pendientes y comercios anulados
- Agregar funciones de copiar a texto/JSON en todos los componentes
- Crear 8 queries en Metabase para análisis de comercios:
* Lista de comercios con datos de cliente (ID: 62)
* Totales monetarios y distribución de pagos (ID: 63)
* Totales de peso por tipo de café (ID: 64)
* Top 10 comercios por inversión (ID: 65)
* Serie temporal con acumulados (ID: 66)
* Opciones de filtros disponibles (ID: 67)
* Contadores para estadísticas (ID: 68)
* Detalle de ingresos por comercio (ID: 69)
- Crear endpoint POST /api/metabase/informe-comercios
* Ejecuta 8 queries en paralelo
* Soporta filtros: fechas, clientes, tipos, comercio_ids, granularidad
* Manejo robusto de errores por query individual
* Transformación de resultados a objetos JavaScript
- Actualizar configuración de queries en metabase-queries.ts
* Agregar sección informe_comercios con 8 queries
* Agregar type helper InformeComerciosQueryKey
- Documentar progreso completo en INFORME_COMERCIOS_PROGRESO.md
* Backend 100% completado
* Frontend pendiente (componentes Vue y página principal)
* Guía detallada de queries y estructura de datos
* Próximos pasos y opciones de implementación
Progreso: 70% (Backend completo, Frontend pendiente)
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
Query 59 (metadata_cosechas) no necesita parámetros porque devuelve
todas las cosechas disponibles, no solo las seleccionadas. Pasarle
parámetros causa que devuelva datos vacíos.
- Reemplazados colores RGB hardcodeados en .brand-card con color-mix()
- Actualizado .brand-shell para usar var(--brand-accent) y var(--brand-primary-strong)
- Actualizado .brand-divider para usar var(--brand-primary)
- Actualizado .brand-chip para usar var(--brand-accent)
- Actualizado .brand-pill para usar var(--brand-primary)
- Actualizado .brand-table para usar var(--brand-surface) y var(--brand-bg)
- Actualizado background de html/body para usar var(--brand-bg)
Ahora todas las cards y contenedores grandes responden a cambios de tema
- El contenido debe estar dentro de <template #body> para renderizarse correctamente
- Según Modal.vue, el body solo se renderiza si existe el slot #body
- Quitar padding del div interno ya que el modal ya tiene padding en el body
- Ahora el contenido aparecerá dentro del modal 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.
Mapear --ui-color-success-* a --brand-success para que color="success"
en componentes de Nuxt UI use los colores del tema personalizado.
Antes:
- text-success buscaba --ui-color-success-* (no definidas)
- El color no se conectaba con --brand-success del tema
Después:
- Paleta completa de success (50-950) generada con color-mix
- success-500 apunta directamente a --brand-success
- Variaciones más claras/oscuras con mezclas de white/black
- NavigationMenu con color="success" ahora usa el color del tema
Flujo de colores:
color="success" → text-success (Tailwind) → --color-success-500
→ --ui-color-success-500 → --brand-success (tema personalizado)
Esto completa la integración del sistema de temas con los colores
semánticos de Nuxt UI v4.
- Cambiar v-model a v-model:open según @nuxt/ui v4.0.0
- Eliminar UCard interno que causaba renderizado permanente
- Usar slots nativos del Modal (#header) en lugar de Card
- Simplificar estilos usando clases de Tailwind estándar
- El modal ahora se mostrará solo cuando showResults sea true
Cambiar de configuración :ui incorrecta a props nativos del componente.
Antes (INCORRECTO):
- Usaba :ui="{ item: { base, active, inactive } }"
- La propiedad 'item' NO existe en NavigationMenu v4
Después (CORRECTO):
- Usar color="success" para aplicar colores del tema
- Usar variant="pill" para activar estilos de estado activo
- Eliminar objeto :ui que no era parte de la API del componente
Según el código fuente de Nuxt UI v4, NavigationMenu solo aplica
colores al estado activo con variant="pill" + color específico.
Las compound variants del tema mapean text-success a las variables
CSS del sistema de temas (--brand-success).
Ref: node_modules/@nuxt/ui/.nuxt/ui/navigation-menu.ts líneas 289-296
Movido text-[var(--brand-text-muted)] de item.base a item.inactive
para evitar conflictos de especificidad CSS con el color del estado activo.
Antes:
- item.base aplicaba text-muted a TODOS los items
- Conflicto con text-[var(--brand-success)] del estado active
Después:
- item.base solo tiene estilos de hover (aplicados a todos)
- item.inactive tiene el color muted explícitamente
- item.active mantiene su color success sin conflictos
Esto asegura que el color del texto activo se aplique correctamente
según el tema seleccionado.
- Cambiar UDropdown por UDropdownMenu (componente correcto)
- Corregir evento @select para recibir ambos parámetros (row, event)
- Los botones de exportación ahora funcionarán correctamente
- El modal de resultados debería abrirse al ejecutar queries
- 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
- MetricCard: Actualizar variantes danger/warning/info para usar variables --coffee-*
* danger ahora usa var(--coffee-uva) para métricas de café Uva
* info ahora usa var(--coffee-mojado) para métricas de café Mojado
* warning ahora usa var(--coffee-oreado) para métricas de café Oreado
* Usar color-mix para crear transparencias en bordes (30%)
- TotalesIngresoCompra: Cards personalizadas de Uva usan var(--coffee-uva)
* Total Uva Ingresada, Pagada y en Depósito con color dinámico
* Bordes con 30% de opacidad usando color-mix
- TotalesMonetarios: Card de Precio Promedio Ponderado Uva usa var(--coffee-uva)
- TotalesVerde: Todas las métricas usan var(--coffee-verde) con variaciones
* 6 cards con diferentes tonalidades de verde usando color-mix
* Mezclas con white para crear variaciones más claras
* Una mezcla con cyan (#20d5ff) para variación distintiva
Los valores numéricos de cada tipo de café ahora reflejan dinámicamente
los colores del tema seleccionado, mejorando la identidad visual.
- Cambiar de slots personalizados a definición correcta de columnas con TanStack Table
- Usar accessorKey en lugar de key
- Implementar funciones header y cell con h() para renderizar componentes
- Eliminar slots #column-data y migrar a patrón estándar de nuxt-ui
- Seguir mismo patrón que VistaTablaIngresos.vue y VistaTablaClientes.vue
Esto corrige el problema donde los datos no se mostraban en la tabla de la página metabase-debug
- 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
- Explicación de arquitectura y componentes
- Guía de uso para desarrolladores
- Ejemplos de código y casos de uso
- Detalles de separación por usuario
- Configuración de limpieza automática
- Sincronización entre pestañas
- FAQ y mejoras futuras
- 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 sección de Variables de Tipos de Café (--coffee-*)
- Agregar sección de Variables de Estados (--status-*)
- Agregar Ejemplo 7: Usar Colores de Tipos de Café
- Agregar Ejemplo 8: Usar Colores de Estados
- Actualizar Ejemplo 6 con todas las propiedades del tema
- Actualizar Resumen de Comandos Rápidos con nuevas variables
- Documentación completa para las 15 variables CSS del sistema
La documentación ahora refleja el sistema extendido de temas.
Cambios:
- app.vue: Reemplazar #fef9f0 con var(--brand-text)
- layouts/dashboard.vue: Usar var(--brand-text)
- layouts/informe.vue: Usar var(--brand-text)
Todos los componentes base ahora responden al sistema de temas.
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.
Remueve el badge de "Mantenimiento" del enlace de Informe Ingresos
en el sidebar, ya que la página está completamente funcional con:
- Todos los totales funcionando correctamente
- Lista de Ingresos con tabla completa
- Top 10 Clientes ranking
- Serie Temporal Acumulada
- Botones de copia (Texto y JSON) en todos los componentes
- Footer con resumen en todos los exports
- Filtros avanzados funcionando
- Sistema de actualizacion con cambios pendientes
La página está lista para producción.
- Crear THEME_SYSTEM.md como documento único y completo
- Eliminar DEVELOPER_GUIDE.md y THEME_CUSTOMIZATION.md (desactualizados)
- Actualizar README.md con referencia al nuevo documento
- Incluye arquitectura, variables, reglas, ejemplos y troubleshooting
- Documentación clara para usuarios y desarrolladores
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.
El problema era que Nuxt UI usa la escala neutral de forma invertida:
- neutral-50 se usa para texto claro
- neutral-900/950 se usa para fondos oscuros
Esto causaba que los labels tuvieran el mismo color que el fondo de las cards.
Cambios:
- Invertir el mapeo de --ui-color-neutral-*
- neutral-50/100 ahora mapean a --brand-text/--brand-text-muted
- neutral-900/950 ahora mapean a --brand-bg
PROBLEMA: Los componentes de Nuxt UI (UCard, UButton, etc.) usaban
colores fijos de --color-coffee-* que no respondían a cambios de tema.
SOLUCIÓN: Mapear --ui-color-neutral-* a variables --brand-* dinámicas:
- neutral-50/100 → --brand-bg (fondos más oscuros)
- neutral-200 → --brand-surface (fondos elevados)
- neutral-300/400 → --brand-border (bordes)
- neutral-500/600/700 → --brand-primary/primary-strong (interactivos)
- neutral-800/900/950 → --brand-text/text-muted (textos)
RESULTADO: Ahora los UCard y otros componentes de Nuxt UI cambian
correctamente cuando se selecciona un tema predefinido.
Archivos modificados:
- app/assets/css/main.css: Remapeo de variables --ui-color-neutral-*
- 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 botones "Copiar Texto" y "Copiar JSON" en los tres
componentes de totales del informe de ingresos:
- TotalesIngresoCompra: Exporta datos de Uva, Mojado, Oreado y totales
- TotalesMonetarios: Exporta inversiones, precios promedio y restantes
- TotalesVerde: Exporta métricas de café verde
Cada componente incluye:
- Formato de texto con emojis para compartir en WhatsApp
- Formato JSON para integración con sistemas
- Alertas de confirmación al copiar
Todos los componentes de datos del informe ahora tienen
funcionalidad de exportación 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
