53 lines
1.5 KiB
Vue
53 lines
1.5 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">
|
|
<MetricCard
|
|
label="Total qq Secos por Vender"
|
|
:value="formatNumber(metrics.totalQqSecoPorVender.value)"
|
|
unit="qq"
|
|
variant="info"
|
|
/>
|
|
<MetricCard
|
|
label="Precio de Venta Promedio por qq"
|
|
:value="formatCurrency(metrics.precioVentaPromedioPorQq.value)"
|
|
/>
|
|
<MetricCard
|
|
label="Precio de Compra Promedio por qq"
|
|
:value="formatCurrency(metrics.precioCompraPromedioPorQq.value)"
|
|
/>
|
|
<MetricCard
|
|
label="Margen de Ganancia por qq"
|
|
:value="formatCurrency(metrics.margenGananciaPorQq.value)"
|
|
:variant="metrics.margenGananciaPorQq.value > 0 ? 'success' : 'danger'"
|
|
/>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { IngresosMetrics } from '~/composables/useIngresosMetrics'
|
|
|
|
defineProps<{
|
|
metrics: IngresosMetrics
|
|
}>()
|
|
|
|
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> |