- 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
Problema:
- Al enviar parámetros con valores vacíos (""), Metabase los expandía
- Filtros opcionales [[AND ...]] se convertían en filtros obligatorios
- Resultado: queries retornaban 0 registros en lugar de aplicar filtros opcionales
Solución:
- Solo enviar parámetros si son requeridos O tienen valor no vacío
- Verificar que el valor no sea null, "", undefined o array vacío
- Los parámetros opcionales sin valor no se incluyen en el request
Afecta: MetabaseCardDisplay.vue executeQuery() líneas 345-360
Problema:
- Metabase rechazaba queries cuando se enviaba null para parámetros text/date
- Error: "faltan los parámetros necesarios: fecha_desde, fecha_hasta"
- Los parámetros usados fuera de [[...]] son considerados requeridos
Solución:
- Cambiar || null a || '' para parámetros de tipo text y date
- Ahora envía string vacío que es compatible con NULLIF() en la query SQL
Afecta: MetabaseCardDisplay.vue líneas 333 y 342
Problema:
- Las queries de Metabase fallaban con error 500 al ejecutarse desde metabase-debug
- Metabase rechazaba los parámetros porque usaban tipos simples en lugar de tipos con operadores
Solución:
- Actualizar mapeo de tipos de parámetros en MetabaseCardDisplay.vue
- boolean → boolean/=
- date → date/single
- number → number/=
- text → string/=
Esto corrige el error "Tipo de parámetro no válido :text para el parámetro 'cliente_ids'"
- 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
- 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
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.
- 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
