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/TotalesMonetarios.vue

@@ -0,0 +1,73 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <template #header>
+      <h2 class="text-xl font-bold brand-section-title">Totales Monetarios</h2>
+    </template>
+
+    <div class="space-y-6">
+      <!-- Inversión Hasta la Fecha -->
+      <div>
+        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Inversión Hasta la Fecha</h3>
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <MetricBox label="Inversión Uva" :value="formatCurrency(data.inversion_uva)" />
+          <MetricBox label="Inversión Mojado" :value="formatCurrency(data.inversion_mojado)" />
+          <MetricBox label="Inversión Oreado" :value="formatCurrency(data.inversion_oreado)" />
+          <MetricBox label="Total Invertido" :value="formatCurrency(data.total_invertido)" color="green" />
+        </div>
+      </div>
+
+      <!-- Precios Promedio Ponderados -->
+      <div>
+        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Precios Promedio Ponderados</h3>
+        <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
+          <MetricBox label="Uva por LB" :value="formatCurrency(data.precio_promedio_uva_por_lb)" />
+          <MetricBox label="Uva por QQ" :value="formatCurrency(data.precio_promedio_uva_por_qq)" />
+          <MetricBox label="Mojado por QQ" :value="formatCurrency(data.precio_promedio_mojado_por_qq)" />
+          <MetricBox label="Oreado por QQ" :value="formatCurrency(data.precio_promedio_oreado_por_qq)" />
+          <MetricBox label="Global QQ Seco" :value="formatCurrency(data.precio_promedio_qq_seco)" color="blue" />
+        </div>
+      </div>
+
+      <!-- Inversión Restante Esperada -->
+      <div>
+        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Inversión Restante Esperada</h3>
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <MetricBox label="Restante Uva" :value="formatCurrency(data.inversion_restante_uva)" color="yellow" />
+          <MetricBox label="Restante Mojado" :value="formatCurrency(data.inversion_restante_mojado)" color="yellow" />
+          <MetricBox label="Restante Oreado" :value="formatCurrency(data.inversion_restante_oreado)" color="yellow" />
+          <MetricBox label="Total Restante" :value="formatCurrency(data.inversion_restante_esperada)" color="red" />
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  data: {
+    inversion_uva: number
+    inversion_mojado: number
+    inversion_oreado: number
+    total_invertido: number
+    precio_promedio_uva_por_lb: number
+    precio_promedio_uva_por_qq: number
+    precio_promedio_mojado_por_qq: number
+    precio_promedio_oreado_por_qq: number
+    precio_promedio_qq_seco: number
+    inversion_restante_uva: number
+    inversion_restante_mojado: number
+    inversion_restante_oreado: number
+    inversion_restante_esperada: number
+  }
+}>()
+
+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>