feat: restaurar panorama facturador con nueva arquitectura basada en Metabase

- 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

nuxt4-app/app/components/rechazos/RechazosRechazoCard.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] p-4">
+    <div class="flex items-center justify-between mb-3">
+      <h3 class="text-lg font-semibold text-[var(--brand-text)]">{{ title }}</h3>
+      <div :class="colorClasses" class="w-3 h-3 rounded-full"></div>
+    </div>
+
+    <div class="space-y-2">
+      <div class="flex justify-between items-center">
+        <span class="text-xs text-[var(--brand-text-muted)]">Cantidad</span>
+        <span class="text-sm font-medium text-[var(--brand-text)]">
+          {{ formatNumber(data.total_cantidad) }} {{ unidad }}
+        </span>
+      </div>
+
+      <div class="flex justify-between items-center">
+        <span class="text-xs text-[var(--brand-text-muted)]">Total Cobrado</span>
+        <span class="text-sm font-bold text-green-400">
+          {{ formatCurrency(data.total_cobrado) }}
+        </span>
+      </div>
+
+      <div class="flex justify-between items-center">
+        <span class="text-xs text-[var(--brand-text-muted)]">Precio Promedio</span>
+        <span class="text-sm font-medium text-[var(--brand-text)]">
+          {{ formatCurrency(data.precio_promedio) }}
+        </span>
+      </div>
+
+      <div class="flex justify-between items-center pt-2 border-t border-[#3a2a16]">
+        <span class="text-xs text-[var(--brand-text-muted)]">Registros</span>
+        <span class="text-xs font-medium text-[var(--brand-text)]">
+          {{ data.num_registros }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  data: {
+    tipo: string
+    num_registros: number
+    total_cantidad: number
+    total_cobrado: number
+    precio_promedio: number
+  }
+  unidad: string
+  color: string
+}>()
+
+const colorClasses = computed(() => {
+  const colors: Record<string, string> = {
+    blue: 'bg-blue-500',
+    green: 'bg-green-500',
+    yellow: 'bg-yellow-500',
+    red: 'bg-red-500',
+    purple: 'bg-purple-500',
+    pink: 'bg-pink-500'
+  }
+  return colors[props.color] || 'bg-gray-500'
+})
+
+const formatNumber = (value: number) => {
+  return new Intl.NumberFormat('es-HN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value)
+}
+
+const formatCurrency = (value: number) => {
+  if (!value) return 'L 0.00'
+  return new Intl.NumberFormat('es-HN', {
+    style: 'currency',
+    currency: 'HNL',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value).replace('HNL', 'L')
+}
+</script>

nuxt4-app/app/components/rechazos/RechazosSubproductos.vue

@@ -5,62 +5,71 @@
         <h2 class="text-xl font-bold brand-section-title">Rechazos y Subproductos</h2>
         <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-2">
           <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Rechazos</div>
-          <div class="text-2xl font-bold text-[var(--brand-text)]">{{ formatCurrency(totalRechazos.value) }}</div>
+          <div class="text-2xl font-bold text-[var(--brand-text)]">{{ formatCurrency(totalRechazos) }}</div>
         </div>
       </div>
     </template>
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       <RechazosRechazoCard
-        title="Chibolita"
-        :metrics="metrics.chibolita"
-        unidad="libras"
-        color="blue"
-      />
-      <RechazosRechazoCard
-        title="Perico"
-        :metrics="metrics.perico"
-        unidad="libras"
-        color="green"
-      />
-      <RechazosRechazoCard
-        title="Vano"
-        :metrics="metrics.vano"
-        unidad="galones"
-        color="yellow"
-      />
-      <RechazosRechazoCard
-        title="Picadillo"
-        :metrics="metrics.picadillo"
-        unidad="galones"
-        color="red"
-      />
-      <RechazosRechazoCard
-        title="Magalla"
-        :metrics="metrics.magalla"
-        unidad="galones"
-        color="purple"
-      />
-      <RechazosRechazoCard
-        title="Pinta"
-        :metrics="metrics.pinta"
-        unidad="libras"
-        color="pink"
+        v-for="rechazo in rechazosFormateados"
+        :key="rechazo.tipo"
+        :title="rechazo.title"
+        :data="rechazo.data"
+        :unidad="rechazo.unidad"
+        :color="rechazo.color"
       />
     </div>
   </UCard>
 </template>
 
 <script setup lang="ts">
-import type { RechazosMetrics } from '~/composables/useRechazosMetrics'
-
 const props = defineProps<{
-  metrics: RechazosMetrics
+  data: Array<{
+    tipo: string
+    num_registros: number
+    total_cantidad: number
+    total_cobrado: number
+    precio_promedio: number
+  }>
 }>()
 
-const totalRechazos = computed(() => props.metrics.totalRechazos)
+// Calcular total de rechazos
+const totalRechazos = computed(() => {
+  return props.data.reduce((sum, r) => sum + (r.total_cobrado || 0), 0)
+})
+
+// Formatear rechazos para los cards
+const rechazosFormateados = computed(() => {
+  const config = {
+    chibolita: { title: 'Chibolita', unidad: 'libras', color: 'blue' },
+    perico: { title: 'Perico', unidad: 'libras', color: 'green' },
+    vano: { title: 'Vano', unidad: 'galones', color: 'yellow' },
+    picadillo: { title: 'Picadillo', unidad: 'galones', color: 'red' },
+    magalla: { title: 'Magalla', unidad: 'galones', color: 'purple' },
+    pinta: { title: 'Pinta', unidad: 'libras', color: 'pink' }
+  }
+
+  return Object.entries(config).map(([tipo, cfg]) => {
+    const rechazo = props.data.find(r => r.tipo === tipo)
+    return {
+      tipo,
+      title: cfg.title,
+      unidad: cfg.unidad,
+      color: cfg.color,
+      data: rechazo || {
+        tipo,
+        num_registros: 0,
+        total_cantidad: 0,
+        total_cobrado: 0,
+        precio_promedio: 0
+      }
+    }
+  })
+})
 
 const formatCurrency = (value: number) => {
+  if (!value) return 'L 0.00'
   return new Intl.NumberFormat('es-HN', {
     style: 'currency',
     currency: 'HNL',
@@ -68,4 +77,4 @@ const formatCurrency = (value: number) => {
     maximumFractionDigits: 2
   }).format(value).replace('HNL', 'L')
 }
-</script>
+</script>