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
82 lines
3.0 KiB
Vue
82 lines
3.0 KiB
Vue
<template>
|
|
<UCard class="brand-card border border-transparent">
|
|
<template #header>
|
|
<h2 class="text-xl font-bold brand-section-title">Café Verde</h2>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
|
|
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">LB Neto Verde Total</div>
|
|
<div class="text-2xl font-bold text-[var(--brand-text)]">
|
|
{{ formatNumber(data.total_lb_neto_verde) }} lb
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
|
|
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">LB Neto Comprado</div>
|
|
<div class="text-2xl font-bold text-green-400">
|
|
{{ formatNumber(data.total_lb_neto_comprado_verde) }} lb
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
|
|
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">LB Neto en Depósito</div>
|
|
<div class="text-2xl font-bold text-yellow-400">
|
|
{{ formatNumber(data.total_lb_neto_verde_deposito) }} lb
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
|
|
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Precio Promedio Pagado</div>
|
|
<div class="text-2xl font-bold text-[var(--brand-text)]">
|
|
{{ formatCurrency(data.precio_promedio_verde_pagado) }}/lb
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
|
|
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Inversión Hasta la Fecha</div>
|
|
<div class="text-2xl font-bold text-green-400">
|
|
{{ formatCurrency(data.inversion_verde_hasta_fecha) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
|
|
<div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Inversión Restante</div>
|
|
<div class="text-2xl font-bold text-yellow-400">
|
|
{{ formatCurrency(data.inversion_restante_verde) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
data: {
|
|
total_lb_neto_verde: number
|
|
precio_promedio_verde_pagado: number
|
|
total_lb_neto_verde_deposito: number
|
|
inversion_verde_hasta_fecha: number
|
|
inversion_restante_verde: number
|
|
total_lb_neto_comprado_verde: number
|
|
}
|
|
}>()
|
|
|
|
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>
|