josedario87
d13d804b77
Some checks failed
build-and-deploy / build-and-deploy (push) Has been cancelled
- MetricCard: Actualizar variantes danger/warning/info para usar variables --coffee-* * danger ahora usa var(--coffee-uva) para métricas de café Uva * info ahora usa var(--coffee-mojado) para métricas de café Mojado * warning ahora usa var(--coffee-oreado) para métricas de café Oreado * Usar color-mix para crear transparencias en bordes (30%) - TotalesIngresoCompra: Cards personalizadas de Uva usan var(--coffee-uva) * Total Uva Ingresada, Pagada y en Depósito con color dinámico * Bordes con 30% de opacidad usando color-mix - TotalesMonetarios: Card de Precio Promedio Ponderado Uva usa var(--coffee-uva) - TotalesVerde: Todas las métricas usan var(--coffee-verde) con variaciones * 6 cards con diferentes tonalidades de verde usando color-mix * Mezclas con white para crear variaciones más claras * Una mezcla con cyan (#20d5ff) para variación distintiva Los valores numéricos de cada tipo de café ahora reflejan dinámicamente los colores del tema seleccionado, mejorando la identidad visual.
128 lines
4.9 KiB
Vue
128 lines
4.9 KiB
Vue
<template>
|
|
<UCard class="brand-card border border-transparent">
|
|
<template #header>
|
|
<h2 class="text-xl font-bold brand-section-title">Totales Netos de Verde</h2>
|
|
</template>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div
|
|
class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
|
|
:style="{
|
|
borderColor: 'color-mix(in srgb, var(--coffee-verde) 40%, transparent)',
|
|
color: 'color-mix(in srgb, var(--coffee-verde) 90%, white)'
|
|
}"
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto de Verde</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ formatNumber(data.total_lb_neto_verde) }}</span>
|
|
<span class="text-sm font-bold opacity-70">lb</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
|
|
:style="{
|
|
borderColor: 'color-mix(in srgb, var(--coffee-verde) 35%, transparent)',
|
|
color: 'var(--coffee-verde)'
|
|
}"
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Precio Promedio Ponderado Pagado</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ formatNumber(data.precio_promedio_verde_pagado) }}</span>
|
|
<span class="text-sm font-bold opacity-70">L./lb</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
|
|
:style="{
|
|
borderColor: 'color-mix(in srgb, var(--coffee-verde) 30%, transparent)',
|
|
color: 'color-mix(in srgb, var(--coffee-verde) 110%, white)'
|
|
}"
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto de Verde en Depósito</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ formatNumber(data.total_lb_neto_verde_deposito) }}</span>
|
|
<span class="text-sm font-bold opacity-70">lb</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
|
|
:style="{
|
|
borderColor: 'color-mix(in srgb, var(--coffee-verde) 35%, transparent)',
|
|
color: 'color-mix(in srgb, var(--coffee-verde) 95%, white)'
|
|
}"
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Inversión en Verde Hasta la Fecha</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ formatCurrency(data.inversion_verde_hasta_fecha) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
|
|
:style="{
|
|
borderColor: 'color-mix(in srgb, var(--coffee-verde) 38%, transparent)',
|
|
color: 'color-mix(in srgb, var(--coffee-verde) 105%, white)'
|
|
}"
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Inversión Restante a Realizar en Verde</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ formatCurrency(data.inversion_restante_verde) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
|
|
:style="{
|
|
borderColor: 'color-mix(in srgb, var(--coffee-verde) 32%, transparent)',
|
|
color: 'color-mix(in srgb, var(--coffee-verde) 100%, #20d5ff)'
|
|
}"
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto Comprado de Verde</span>
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="text-2xl font-bold">{{ formatNumber(data.total_lb_neto_comprado_verde) }}</span>
|
|
<span class="text-sm font-bold opacity-70">lb</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Props reciben datos directos de Metabase - SIN composables
|
|
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 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> |