josedario87
aa76fea286
- Reemplazar colores hardcoded del tema café con variables --brand-* - #c08040 → var(--brand-primary-strong) - #d99a56 → var(--brand-primary) - #f0c07c → var(--brand-accent) - #1c140c → var(--brand-surface) - #3a2a16 → var(--brand-border) - #1b1209, #14100b → var(--brand-bg) - Reemplazar colores de tipos de café con variables --coffee-* - #a855f7 → var(--coffee-uva) - #f97316 → var(--coffee-oreado) - #06b6d4 → var(--coffee-mojado) - #22c55e → var(--coffee-verde) - Reemplazar clases gray-scale de Tailwind con variables de tema - text-gray-400, text-gray-500 → text-[var(--brand-text-muted)] - bg-gray-700/30 → bg-[var(--brand-surface)] - Todos los componentes ahora responden dinámicamente a cambios de tema Archivos adaptados: - Páginas: error, informe-ingresos, panorama, explorer, metabase-debug, profile, notifications, settings - Componentes de ingresos: GraficaSerieIngresos, GraficaSerieInversion, GraficaDinamicaPagadoDeposito, GraficaAcumuladoresUva, TotalesIngresoCompra, TotalesMonetarios, TotalesVerde, SecosVendidos, TopClientes, VistaTablaIngresos, VistaTablaIngresosConClientes, FiltrosActivos - Componentes de comparativa: CosechasHeatmap, CosechasPorTipo, CosechasEvolucion, CosechasTotales - Componentes de UI: ClienteSelector, DateRangeSelector, MetadatosCard, MaintenanceMode - Componentes de auth: UserAvatar, UserMetadata - Componentes de clientes: ClienteCard, VistaTablaClientes - Componentes de rechazos: RechazoCard, RechazosRechazoCard, RechazosSubproductos - Componentes de metabase: MetabaseCardDisplay, MetabaseCardsTable
92 lines
4.0 KiB
Vue
92 lines
4.0 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)] border-green-700/40 text-green-300">
|
|
<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)] border-green-600/40 text-green-400">
|
|
<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)] border-green-500/40 text-green-500">
|
|
<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)] border-emerald-600/40 text-emerald-400">
|
|
<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)] border-lime-600/40 text-lime-400">
|
|
<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)] border-teal-600/40 text-teal-400">
|
|
<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> |