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
75 lines
2.7 KiB
Vue
75 lines
2.7 KiB
Vue
<template>
|
|
<UCard class="brand-card border border-transparent">
|
|
<template #header>
|
|
<h2 class="text-xl font-bold brand-section-title">Café Seco - Inventario y Proyecciones</h2>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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">QQ Seco por Vender</div>
|
|
<div class="text-2xl font-bold text-[var(--brand-text)]">
|
|
{{ formatNumber(data.total_qq_seco_por_vender) }} QQ
|
|
</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 Venta Promedio/QQ</div>
|
|
<div class="text-2xl font-bold text-green-400">
|
|
{{ formatCurrency(data.precio_venta_promedio_por_qq) }}
|
|
</div>
|
|
<div v-if="data.precio_venta_promedio_por_qq === 0" class="text-xs text-[var(--brand-text-muted)] mt-1">
|
|
Sin ventas registradas
|
|
</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 Compra Promedio/QQ</div>
|
|
<div class="text-2xl font-bold text-[var(--brand-text)]">
|
|
{{ formatCurrency(data.precio_compra_promedio_por_qq) }}
|
|
</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">Margen de Ganancia/QQ</div>
|
|
<div class="text-2xl font-bold" :class="margenColor">
|
|
{{ formatCurrency(data.margen_ganancia_por_qq) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
data: {
|
|
total_qq_seco_por_vender: number
|
|
precio_venta_promedio_por_qq: number
|
|
precio_compra_promedio_por_qq: number
|
|
margen_ganancia_por_qq: number
|
|
}
|
|
}>()
|
|
|
|
const margenColor = computed(() => {
|
|
if (props.data.margen_ganancia_por_qq > 0) return 'text-green-400'
|
|
if (props.data.margen_ganancia_por_qq < 0) return 'text-red-400'
|
|
return 'text-[var(--brand-text)]'
|
|
})
|
|
|
|
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>
|