From 02d17b816b9f48ab12155acf0986953cf9cabe3c Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 14 Oct 2025 03:10:53 -0600
Subject: [PATCH] =?UTF-8?q?fix:=20agregar=20par=C3=A1metros=20por=20defect?=
 =?UTF-8?q?o=20y=20estado=20vac=C3=ADo=20amigable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../metabase/MetabaseCardDisplay.vue          | 23 +++++++++++++++++--
 .../metabase/MetabaseCardsTable.vue           | 23 +++++++++++++++++--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue b/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
index 6e8cb05..90cdc04 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
@@ -87,7 +87,19 @@
           </UBadge>
         </div>
 
-        <div class="overflow-x-auto">
+        <!-- Empty State -->
+        <div v-if="!queryResult.data?.rows || queryResult.data.rows.length === 0" class="p-8 text-center bg-gray-50 dark:bg-gray-900 rounded">
+          <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-800 rounded-full">
+            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
+            </svg>
+          </div>
+          <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">No hay datos</h3>
+          <p class="text-xs text-gray-500 dark:text-gray-400">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
+        </div>
+
+        <!-- Data Display -->
+        <div v-else class="overflow-x-auto">
           <pre class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(queryResult.data, null, 2) }}</pre>
         </div>
       </div>
@@ -155,7 +167,14 @@ async function executeQuery() {
 
   try {
     const result = await $fetch(`/api/metabase/cards/${props.card.id}/query`, {
-      method: 'POST'
+      method: 'POST',
+      body: {
+        parameters: [
+          { type: 'category', target: ['variable', ['template-tag', 'incluir_anulados']], value: [false] },
+          { type: 'date/single', target: ['variable', ['template-tag', 'fecha_desde']], value: null },
+          { type: 'date/single', target: ['variable', ['template-tag', 'fecha_hasta']], value: null }
+        ]
+      }
     })
     queryResult.value = result
   } catch (e: any) {
diff --git a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
index 0a8bd78..9b4311e 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
@@ -113,7 +113,19 @@
             </div>
           </div>
 
-          <div class="overflow-x-auto max-h-96">
+          <!-- Empty State -->
+          <div v-if="!currentResult.data?.rows || currentResult.data.rows.length === 0" class="p-8 text-center bg-gray-50 dark:bg-gray-900 rounded">
+            <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-800 rounded-full">
+              <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
+              </svg>
+            </div>
+            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">No hay datos</h3>
+            <p class="text-xs text-gray-500 dark:text-gray-400">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
+          </div>
+
+          <!-- Data Display -->
+          <div v-else class="overflow-x-auto max-h-96">
             <pre class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(currentResult.data, null, 2) }}</pre>
           </div>
         </div>
@@ -210,7 +222,14 @@ async function executeCard(card: any) {
 
   try {
     const result = await $fetch(`/api/metabase/cards/${card.id}/query`, {
-      method: 'POST'
+      method: 'POST',
+      body: {
+        parameters: [
+          { type: 'category', target: ['variable', ['template-tag', 'incluir_anulados']], value: [false] },
+          { type: 'date/single', target: ['variable', ['template-tag', 'fecha_desde']], value: null },
+          { type: 'date/single', target: ['variable', ['template-tag', 'fecha_hasta']], value: null }
+        ]
+      }
     })
     currentResult.value = result
     showResults.value = true