Actualizar Metabase Debug: usar config centralizado y agregar tab de Informe Ingresos

nuxt4-app/app/pages/metabase-debug.vue

@@ -23,7 +23,7 @@
       </div>
 
       <!-- Stats -->
-      <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
+      <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4">
         <UCard>
           <div class="text-center">
             <div class="text-2xl sm:text-3xl font-bold text-primary">{{ cards.length }}</div>
@@ -47,10 +47,17 @@
 
         <UCard>
           <div class="text-center">
-            <div class="text-2xl sm:text-3xl font-bold text-gray-600">{{ panoramaQueries.length }}/9</div>
+            <div class="text-2xl sm:text-3xl font-bold" :class="panoramaQueries.length === 9 ? 'text-green-600' : 'text-orange-600'">{{ panoramaQueries.length }}/9</div>
             <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Queries Panorama</div>
           </div>
         </UCard>
+
+        <UCard>
+          <div class="text-center">
+            <div class="text-2xl sm:text-3xl font-bold" :class="informeQueries.length === 8 ? 'text-green-600' : 'text-orange-600'">{{ informeQueries.length }}/8</div>
+            <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Queries Informe</div>
+          </div>
+        </UCard>
       </div>
 
       <!-- Error Display -->
@@ -96,7 +103,7 @@
               color="info"
               variant="soft"
               title="Queries del Panorama Facturador"
-              description="Estas son las 9 queries documentadas en METABASE_QUERIES_PANORAMA.md"
+              description="Estas son las 9 queries documentadas en METABASE_QUERIES_PANORAMA.md y definidas en server/config/metabase-queries.ts"
             />
 
             <div class="grid grid-cols-1 gap-4">
@@ -112,7 +119,35 @@
               color="warning"
               variant="soft"
               :title="`Faltan ${9 - panoramaQueries.length} queries por encontrar`"
-              description="Busca en la tabla las queries que contengan 'panorama' en su nombre"
+              :description="`Queries faltantes: ${missingPanoramaQueries.join(', ')}`"
+            />
+          </div>
+        </template>
+
+        <!-- Informe Queries -->
+        <template #informe>
+          <div class="py-4 space-y-4">
+            <UAlert
+              color="info"
+              variant="soft"
+              title="Queries del Informe de Ingresos"
+              description="Estas son las 8 queries documentadas en METABASE_QUERIES_INFORME_INGRESOS.md y definidas en server/config/metabase-queries.ts"
+            />
+
+            <div class="grid grid-cols-1 gap-4">
+              <MetabaseCardDisplay
+                v-for="card in informeQueries"
+                :key="card.id"
+                :card="card"
+              />
+            </div>
+
+            <UAlert
+              v-if="informeQueries.length < 8"
+              color="warning"
+              variant="soft"
+              :title="`Faltan ${8 - informeQueries.length} queries por encontrar`"
+              :description="`Queries faltantes: ${missingInformeQueries.join(', ')}`"
             />
           </div>
         </template>
@@ -140,6 +175,21 @@ const cards = ref<any[]>([])
 const selectedCard = ref<any>(null)
 const selectedTab = ref(0)
 
+// Get expected query names from centralized config (via API)
+const expectedPanoramaNames = ref<string[]>([])
+const expectedInformeNames = ref<string[]>([])
+
+// Fetch query config on mount
+async function fetchQueryConfig() {
+  try {
+    const config = await $fetch('/api/metabase/query-config')
+    expectedPanoramaNames.value = config.panorama
+    expectedInformeNames.value = config.informe
+  } catch (e: any) {
+    console.error('Error fetching query config:', e)
+  }
+}
+
 const tabs = [
   {
     key: 'table',
@@ -159,6 +209,12 @@ const tabs = [
     icon: 'i-heroicons-chart-bar',
     slot: 'panorama'
   },
+  {
+    key: 'informe',
+    label: 'Queries Informe',
+    icon: 'i-heroicons-document-chart-bar',
+    slot: 'informe'
+  },
   {
     key: 'detail',
     label: 'Detalle',
@@ -182,12 +238,31 @@ const queryBuilderQueries = computed(() => {
   }).length
 })
 
+// Find panorama queries using centralized config
 const panoramaQueries = computed(() => {
   return cards.value.filter(card =>
-    card.name?.toLowerCase().includes('panorama')
+    expectedPanoramaNames.value.includes(card.name)
   )
 })
 
+// Find informe queries using centralized config
+const informeQueries = computed(() => {
+  return cards.value.filter(card =>
+    expectedInformeNames.value.includes(card.name)
+  )
+})
+
+// Calculate missing queries
+const missingPanoramaQueries = computed(() => {
+  const foundNames = panoramaQueries.value.map(q => q.name)
+  return expectedPanoramaNames.value.filter(name => !foundNames.includes(name))
+})
+
+const missingInformeQueries = computed(() => {
+  const foundNames = informeQueries.value.map(q => q.name)
+  return expectedInformeNames.value.filter(name => !foundNames.includes(name))
+})
+
 async function fetchCards() {
   loading.value = true
   error.value = null
@@ -209,11 +284,12 @@ function refreshCards() {
 
 function selectCard(card: any) {
   selectedCard.value = card
-  selectedTab.value = 3 // Switch to detail tab
+  selectedTab.value = 4 // Switch to detail tab (now index 4 instead of 3)
 }
 
-// Load cards on mount
-onMounted(() => {
-  fetchCards()
+// Load data on mount
+onMounted(async () => {
+  await fetchQueryConfig()
+  await fetchCards()
 })
 </script>

nuxt4-app/server/api/metabase/query-config.get.ts

@@ -0,0 +1,12 @@
+import { METABASE_QUERIES } from '../../config/metabase-queries'
+
+/**
+ * Expose query configuration to the frontend
+ * Returns the expected query names for panorama and informe
+ */
+export default defineEventHandler(() => {
+  return {
+    panorama: Object.values(METABASE_QUERIES.panorama),
+    informe: Object.values(METABASE_QUERIES.informe)
+  }
+})