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
La sidebar ahora detecta el tamaño de pantalla al inicializar:
- En móvil (< 1024px): cerrada por defecto
- En desktop (>= 1024px): abierta por defecto
Esto mejora la experiencia en dispositivos móviles evitando que
la sidebar tape el contenido al cargar la página.
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.
Cambios en TotalesIngresoCompra:
- Mover botón toggle del header principal al header de sección 'Uva'
- Mejor posicionamiento: solo afecta la sección donde se aplica
Cambios en TotalesMonetarios:
- Agregar toggle de unidades en 'Precios Promedio Ponderados' para Uva
- 3 estados: LB, QQ, Ambos (muestra ambos precios en un contenedor)
- Unificar visualización de 'Uva por LB' y 'Uva por QQ' en un solo contenedor
- Grid cambia de 5 a 4 columnas para mejor layout
Ambos toggles funcionan independientemente y mantienen el mismo patrón
de diseño con iconos dinámicos.
- Agregar botón toggle de 3 estados: LB, QQ Seco, Ambos
- Por defecto muestra valores en LB
- Al cambiar a QQ Seco muestra: QQ Seco Ingresado, Pagado, en Depósito
- Al cambiar a Ambos muestra ambas unidades en el mismo contenedor
- Calcular QQ Seco en Depósito para Uva (ingresado - pagado)
- Iconos dinámicos según el modo seleccionado
Cambios principales:
- Cambiar tipo de parámetros de fecha de 'date/single' a 'text'
- Cambiar tipo de parámetro booleano de 'category' a 'boolean'
- Cambiar tipo de parámetros de categoría de 'category' a 'text'
Las queries SQL nativas en Metabase usan template-tags con tipos específicos
que deben coincidir exactamente con el tipo definido en el template-tag,
no con los tipos de UI de Metabase.
Archivos modificados:
- server/api/metabase/panorama.post.ts
- server/api/metabase/informe.post.ts
Resuelve el problema donde todas las queries retornaban error 500 y
respuestas vacías debido a tipos de parámetros incompatibles.
- Agregar logs para verificar que las cards se encuentren correctamente
- Agregar logs detallados de los parámetros enviados a cada query
- Agregar logs de la estructura de respuesta de Metabase
- Agregar logs de la transformación de datos (single row y multiple rows)
- Esto ayudará a diagnosticar por qué las respuestas están vacías
- Modificar panorama.post.ts e informe.post.ts para convertir fecha_desde y fecha_hasta null a strings vacíos
- Las queries de Metabase usan NULLIF(?, '') para detectar parámetros vacíos
- Esto permite que las queries usen sus defaults (fecha actual) correctamente
- Cambiar tipo de parámetros boolean de 'category' a 'boolean' para que funcione el UToggle
- Detectar campos de fecha por nombre aunque sean tipo text en Metabase
- Renderizar inputs de fecha con date picker para campos que contienen 'fecha'
- Mejorar inicialización de parámetros text que representan fechas
Resuelve el problema donde incluir_anulados no aparecía y fecha_desde/fecha_hasta
se mostraban como text inputs en lugar de date pickers
El contenedor estaba intentando conectarse a la URL pública de Metabase
(https://metabase.nucleoriofrio.com) en lugar de usar la red interna
de Docker (http://metabase:3000), causando errores 401 Unauthorized.
Esto permite que el contenedor de Nuxt se comunique directamente con
el contenedor de Metabase a través de la red Docker sin pasar por
Traefik/Authentik.
Cambios principales:
- Refactorizar todos los componentes de panorama para recibir datos directos de Metabase
* TotalesMonetarios.vue: cambiar de props.metrics a props.data
* TotalesIngresoCompra.vue: cambiar de props.metrics a props.data
* TotalesVerde.vue: cambiar de props.metrics a props.data
* SecosVendidos.vue: cambiar de props.metrics a props.data
- Eliminar fechas hardcodeadas en panorama.post.ts
* Pasar valores null directamente a Metabase para usar sus defaults
- Marcar composables obsoletos para Panorama Facturador
* useIngresosMetrics.ts: agregar advertencia de no uso en Panorama
* useRechazosMetrics.ts: agregar advertencia de no uso en Panorama
Resultado: Todos los cálculos (agregaciones, promedios ponderados) se hacen en Metabase mediante SQL. Los componentes Vue solo renderizan valores ya calculados.
- Agregar icono de la app perfil al botón Inicio
- Implementar sistema de fallback para iconos (local → remoto → favicon)
- Aplicar gradientes y estilos inspirados en la app perfil
- Agregar transiciones suaves y efectos hover mejorados
Cambios en AppSidebar.vue:
- Cambiar link de /profile a https://inicio.nucleoriofrio.com
- Actualizar texto de 'Mi Perfil' a 'Inicio'
- Cambiar icono de user a home
- Actualizar colores de azul a verde
El botón ahora navega a la PWA de inicio usando scope extensions.
- Agregar id único (/?app=analitica), launch_handler, handle_links y url_handlers
- Unificar workflow de 2 jobs (build + deploy) a 1 solo job
- Workaround para bug de Gitea que solo ejecuta el primer job
- Agregar capture_links en manifest para mejorar experiencia PWA
- Crear archivo .well-known para asociación con inicio.nucleoriofrio.com
- Actualizar Traefik para servir recursos PWA y .well-known sin autenticación
- Remover badge de mantenimiento del sidebar
- Eliminar endpoints de debug temporales
- Panorama funcionando con todas las secciones:
* Totales Financieros
* Café Seco - Inventario y Proyecciones
* Totales de Ingreso y Compra
* Totales Monetarios
* Café Verde
* Rechazos y Subproductos
- Todas las 9 queries de Metabase ejecutándose correctamente
- Datos reales mostrados en tiempo real
Las queries de Metabase tienen fecha_desde y fecha_hasta como parametros
requeridos con valores por defecto. Cuando se envia null, Metabase rechaza
la query. Ahora usamos los defaults cuando no se especifican fechas.
- Crear endpoint /api/metabase/panorama.post.ts que ejecuta las 9 queries en paralelo
- Restaurar y adaptar panorama.vue para usar el nuevo endpoint
- Crear componentes auxiliares: SecosVendidos, TotalesIngresoCompra, TotalesMonetarios, TotalesVerde, MetricBox, RechazosRechazoCard
- Adaptar RechazosSubproductos para recibir data directamente de Metabase
- Toda la transformación de datos ocurre en las queries SQL de Metabase
- Sin uso de stores ni composables de métricas
- Agregar documentación de queries en archivos MD
- Mover foco al sidebar cuando se abre en móvil
- Mover foco al panel principal cuando sidebar se cierra
- Evita warning de accesibilidad: aria-hidden con elemento enfocado
- Cambiar estructura de columnas de {key, label} a {accessorKey, header, id}
- Cambiar prop :rows a :data en componente UTable
- Actualizar referencias en selector de columnas
- Exponer solo /_nuxt/* sin autenticación (necesario para funcionamiento)
- Mantener autenticación Authentik en todas las demás rutas
- Priorizar seguridad: /api/*, manifest y favicon protegidos
- Agregar selector de límite de registros (10 a 10,000)
- Implementar paginación client-side con UPagination
- Mostrar información detallada de registros cargados y filtrados
- Usar límite seleccionado en lugar de hardcoded 1000
- Resetear página al cambiar búsqueda o cargar datos
- Indicar cuando hay más datos disponibles (limitado)
- Mejorar UX con paginación de 50 filas por página por defecto
- Agregar sección expandible para configurar parámetros antes de ejecutar
- Inputs dinámicos según tipo: toggle para boolean, date picker para fechas, text para otros
- Inicialización automática con valores por defecto de template-tags
- Botón para restablecer parámetros a valores originales
- Usar valores del formulario al ejecutar queries
- Mejorar UX con labels legibles y estilos consistentes
- Extraer valores por defecto de template-tags de la card
- Construir parámetros dinámicamente basados en la configuración
- Soportar tipos: date, boolean, text
- Resolver error de parámetros faltantes en queries con fechas
- Agregar tabla estructurada para mostrar resultados de queries
- Agregar botón de copiar JSON profesional con feedback visual
- Agregar formato automático de números y fechas según tipo de columna
- Mantener vista JSON colapsable para ver datos completos
- Mejorar UX con tabla responsive y estilos consistentes
Soluciona dos problemas en la ejecución de queries de Metabase:
1. Error de parámetros faltantes:
- Las queries requieren parámetros (incluir_anulados, fecha_desde, fecha_hasta)
- Agregado valores por defecto a todas las llamadas POST:
* incluir_anulados: false
* fecha_desde: null (sin filtro)
* fecha_hasta: null (sin filtro)
2. Estado vacío poco amigable:
- Cuando rows y cols están vacíos mostraba solo JSON
- Agregado EmptyState visual con:
* Icono de tabla vacía
* Mensaje "No hay datos"
* Descripción explicativa
Cambios en:
- MetabaseCardDisplay.vue: executeQuery() con parámetros y EmptyState
- MetabaseCardsTable.vue: executeCard() con parámetros y EmptyState en modal
