josedario87
694ee4e3bb
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 5m41s
Cambios principales: - Refactorizar todos los componentes de panorama para recibir datos directos de Metabase * TotalesMonetarios.vue: cambiar de props.metrics a props.data * TotalesIngresoCompra.vue: cambiar de props.metrics a props.data * TotalesVerde.vue: cambiar de props.metrics a props.data * SecosVendidos.vue: cambiar de props.metrics a props.data - Eliminar fechas hardcodeadas en panorama.post.ts * Pasar valores null directamente a Metabase para usar sus defaults - Marcar composables obsoletos para Panorama Facturador * useIngresosMetrics.ts: agregar advertencia de no uso en Panorama * useRechazosMetrics.ts: agregar advertencia de no uso en Panorama Resultado: Todos los cálculos (agregaciones, promedios ponderados) se hacen en Metabase mediante SQL. Los componentes Vue solo renderizan valores ya calculados.
71 lines
2.8 KiB
Vue
71 lines
2.8 KiB
Vue
<template>
|
|
<UCard class="brand-card border border-transparent">
|
|
<template #header>
|
|
<h2 class="text-xl font-bold brand-section-title">Secos Vendidos y Pérdidas</h2>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div class="p-4 rounded-lg border transition-all bg-[#1c140c] border-purple-900/40 text-purple-300">
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total qq Secos por Vender</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ formatNumber(data.total_qq_seco_por_vender) }}</span>
|
|
<span class="text-sm font-bold opacity-70">qq</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 rounded-lg border transition-all bg-[#1c140c] border-purple-800/40 text-purple-400">
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Precio de Venta Promedio por qq</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ formatCurrency(data.precio_venta_promedio_por_qq) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 rounded-lg border transition-all bg-[#1c140c] border-purple-700/40 text-purple-500">
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Precio de Compra Promedio por qq</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ formatCurrency(data.precio_compra_promedio_por_qq) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 rounded-lg border transition-all bg-[#1c140c] text-purple-600" :class="data.margen_ganancia_por_qq > 0 ? 'border-purple-600/40' : 'border-red-600/40'">
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Margen de Ganancia por qq</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ formatCurrency(data.margen_ganancia_por_qq) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Props reciben datos directos de Metabase - SIN composables
|
|
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 formatNumber = (value: number) => {
|
|
return value.toLocaleString('en-US', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
})
|
|
}
|
|
|
|
const formatCurrency = (value: number) => {
|
|
return new Intl.NumberFormat('es-HN', {
|
|
style: 'currency',
|
|
currency: 'HNL',
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
}).format(value).replace('HNL', 'L')
|
|
}
|
|
</script> |