El icono del toggle mostraba "X" (cerrar) en lugar del icono hamburguesa
al cargar la página, aunque se corregía tras la primera interacción.
Causa raíz:
- UDashboardGroup inicializa sidebarOpen en false
- Nuestro composable inicializaba open en true por defecto
- El toggle lee el estado del contexto de DashboardGroup
- Desincronización causaba que el icono mostrara el estado incorrecto
Solución:
- Cambiar el default de open a false en el composable
- En desktop, open=false es correcto (no hay overlay, sidebar siempre visible)
- En mobile, open=false significa overlay cerrado (comportamiento esperado)
- Alineación total con el comportamiento de Nuxt UI
Archivos modificados:
- app/composables/useSidebarState.ts:43-46 (default open: false)
- app/composables/useSidebarState.ts:57 (fallback a false)
Referencias:
- app/composables/useSidebarState.ts:46
- app/composables/useSidebarState.ts:57
Soluciona todos los problemas identificados en la arquitectura anterior:
Cambios principales:
- Nuevo composable useSidebarState() que centraliza todo el estado
- Elimina múltiples fuentes de verdad que causaban desincronización
- Remueve watchers en cascada y hooks indirectos
- Elimina workarounds manuales de DOM y aria-hidden
- Implementa persistencia consistente en cookies
- Manejo responsive automático (mobile vs desktop)
Archivos modificados:
- app/composables/useSidebarState.ts (nuevo): Composable singleton
- app/components/app/AppSidebar.vue: Usa el nuevo composable
- app/layouts/dashboard.vue: Simplificado, sin refs locales ni workarounds
- docs/SIDEBAR_ARCHITECTURE.md (nuevo): Documentación completa
Beneficios:
✓ Estado consistente en toda la aplicación
✓ No más flickering o comportamientos anómalos
✓ Código más simple y mantenible
✓ Mejor performance (menos re-renders)
✓ Auto-close en mobile al navegar
Referencias:
- app/composables/useSidebarState.ts:1
- app/components/app/AppSidebar.vue:232
- app/layouts/dashboard.vue:40
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.
Add complete integration with Metabase API to fetch data from
'facturador supabase' database.
Features:
- Server-side Metabase authentication using session tokens
- Utility functions for Metabase API requests with auto-retry
- API endpoints to proxy Metabase requests
- GET /api/metabase/databases - List all databases
- GET /api/metabase/tables/:databaseId - Get tables and metadata
- POST /api/metabase/query - Execute queries against tables
- useMetabase() composable for frontend consumption
- getDatabases() - Fetch available databases
- getDatabaseMetadata() - Get tables and fields info
- queryTable() - Execute queries with filters and limits
- resultToObjects() - Helper to convert results to objects
Session tokens are cached and auto-refreshed when expired.
This enables the application to display real data from the
facturador database without using embeds or iframes.
- Migrar de useAuth() a useAuthentik() para autenticación SSR
- Actualizar componentes UserMenu, AppSidebar y profile.vue
- Configurar docker-compose.yml con variables dinámicas
- Agregar Gitea Actions workflow para build y deploy automático
- Implementar hook de monitoreo de Gitea Actions
- Configurar secrets y variables para deploy seguro
- Actualizar configuración de Traefik con Authentik Forward Auth
