josedario87
f8c53da6fc
- 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
74 lines
3.1 KiB
Vue
74 lines
3.1 KiB
Vue
<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>
|