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
This commit is contained in:
78
nuxt4-app/app/components/TotalesIngresoCompra.vue
Normal file
78
nuxt4-app/app/components/TotalesIngresoCompra.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<UCard class="brand-card border border-transparent">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold brand-section-title">Totales de Ingreso y Compra</h2>
|
||||
</template>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Uva -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Uva</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||
<MetricBox label="LB Uva Ingresada" :value="formatNumber(data.total_lb_uva_ingresada) + ' lb'" />
|
||||
<MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_uva_ingresado) + ' QQ'" />
|
||||
<MetricBox label="LB Uva Pagada" :value="formatNumber(data.total_lb_uva_pagada) + ' lb'" color="green" />
|
||||
<MetricBox label="LB Uva en Depósito" :value="formatNumber(data.total_lb_uva_deposito) + ' lb'" color="yellow" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mojado -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Mojado</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_mojado_ingresado) + ' QQ'" />
|
||||
<MetricBox label="QQ Seco Pagado" :value="formatNumber(data.total_qq_seco_mojado_pagado) + ' QQ'" color="green" />
|
||||
<MetricBox label="QQ en Depósito" :value="formatNumber(data.total_qq_mojado_deposito) + ' QQ'" color="yellow" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Oreado -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Oreado</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_oreado_ingresado) + ' QQ'" />
|
||||
<MetricBox label="QQ Seco Pagado" :value="formatNumber(data.total_qq_seco_oreado_pagado) + ' QQ'" color="green" />
|
||||
<MetricBox label="QQ en Depósito" :value="formatNumber(data.total_qq_oreado_deposito) + ' QQ'" color="yellow" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Totales Generales -->
|
||||
<div class="pt-4 border-t border-[#3a2a16]">
|
||||
<h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Totales Generales</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_ingresado) + ' QQ'" />
|
||||
<MetricBox label="QQ Seco Comprado" :value="formatNumber(data.total_qq_seco_comprado) + ' QQ'" color="green" />
|
||||
<MetricBox label="QQ Seco en Depósito" :value="formatNumber(data.total_qq_seco_deposito) + ' QQ'" color="yellow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
data: {
|
||||
total_lb_uva_ingresada: number
|
||||
total_qq_seco_uva_ingresado: number
|
||||
total_qq_seco_mojado_ingresado: number
|
||||
total_qq_seco_oreado_ingresado: number
|
||||
total_qq_seco_ingresado: number
|
||||
total_lb_uva_pagada: number
|
||||
total_qq_seco_uva_pagado: number
|
||||
total_qq_seco_mojado_pagado: number
|
||||
total_qq_seco_oreado_pagado: number
|
||||
total_qq_seco_comprado: number
|
||||
total_lb_uva_deposito: number
|
||||
total_qq_mojado_deposito: number
|
||||
total_qq_oreado_deposito: number
|
||||
total_qq_seco_deposito: number
|
||||
}
|
||||
}>()
|
||||
|
||||
const formatNumber = (value: number) => {
|
||||
return new Intl.NumberFormat('es-HN', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
}).format(value)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user