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
El contenido de los tabs no se mostraba porque faltaba la propiedad
'slot' en cada item del array tabs. Nuxt UI UTabs requiere esta
propiedad para vincular los slots nombrados con sus respectivos tabs.
Cambios:
- Agregar propiedad 'slot' a cada item en el array tabs
- Ahora los slots nombrados (#table, #cards, #panorama, #detail) se
vinculan correctamente con sus tabs correspondientes
Corrección del bug visual donde todos los tabs se mostraban simultáneamente.
El problema era el uso incorrecto del slot #default en UTabs que causaba
que todos los contenidos se renderizaran a la vez, creando elementos duplicados.
Cambios:
- Cambiar de #default a slots nombrados específicos (#table, #cards, #panorama, #detail)
- Ahora solo se muestra el contenido del tab activo
- Elimina la duplicación de elementos
- Mejora la legibilidad y organización visual
Ajustes realizados:
Components:
- MetabaseCardDisplay: grid responsive, queries con wrap, botones apilables
- MetabaseCardsTable: filtros verticales en móvil, acciones con wrap
Page:
- Header responsive con elementos apilados
- Stats en grid 2x2 para móvil, 4 columnas en desktop
- Tamaños de fuente adaptados con breakpoints
Todas las queries SQL y JSON ahora usan whitespace-pre-wrap y break-words
para aprovechar el espacio vertical en lugar de scroll horizontal.
- Agregar variables de entorno de Metabase en docker-compose.yml
- Agregar variables de Metabase en workflow de Gitea Actions
- Configurar METABASE_URL, METABASE_API_KEY, METABASE_EMAIL y METABASE_PASSWORD
- Crear componente MetabaseCardDisplay para mostrar detalles de queries
- Crear componente MetabaseCardsTable para listar todas las queries
- Crear página /metabase-debug con vistas de tabla, cards y queries Panorama
- Agregar API routes para cards de Metabase (GET, POST, export)
- Actualizar metabase.ts para soportar API Key authentication
- Agregar configuración de Metabase API Key en nuxt.config.ts
- Documentar todos los endpoints disponibles en METABASE_API_ENDPOINTS.md
- Add support for 'db' and 'table' query parameters
- Automatically preselect database and table from URL
- Auto-load data when both params are provided
- Update URL when user changes selection manually
- Example: /explorer?db=facturador+supabase&table=Ingresos
- Change from object binding to string-based selection
- Add computed properties to transform data to string arrays
- Add reverse lookup to get IDs from selected strings
- Improves compatibility with USelectMenu component
- Fixes dropdown not showing options correctly
- Change from ID-based selection to full object binding
- Add custom label templates to display proper text
- Simplify computed properties and watchers
- Improve user experience with proper label display
- Change from USelect to USelectMenu for database and table selection
- Add value-attribute and option-attribute props for proper rendering
- Improves dropdown functionality and user experience
