josedario87
33e0319272
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 48s
Cambios en TotalesIngresoCompra: - Mover botón toggle del header principal al header de sección 'Uva' - Mejor posicionamiento: solo afecta la sección donde se aplica Cambios en TotalesMonetarios: - Agregar toggle de unidades en 'Precios Promedio Ponderados' para Uva - 3 estados: LB, QQ, Ambos (muestra ambos precios en un contenedor) - Unificar visualización de 'Uva por LB' y 'Uva por QQ' en un solo contenedor - Grid cambia de 5 a 4 columnas para mejor layout Ambos toggles funcionan independientemente y mantienen el mismo patrón de diseño con iconos dinámicos.
169 lines
6.7 KiB
Vue
169 lines
6.7 KiB
Vue
<template>
|
|
<UCard class="brand-card border border-transparent">
|
|
<template #header>
|
|
<h2 class="text-xl font-bold brand-section-title">Totales de Ingreso y Compra</h2>
|
|
</template>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Uva -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h3 class="text-lg font-semibold text-[var(--brand-primary)]">Uva</h3>
|
|
|
|
<!-- Toggle de Unidades -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-[var(--brand-text-muted)]">Unidad:</span>
|
|
<UButton
|
|
@click="cycleUnitMode"
|
|
size="xs"
|
|
color="gray"
|
|
variant="soft"
|
|
:icon="unitModeIcon"
|
|
>
|
|
{{ unitModeLabel }}
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Solo LB -->
|
|
<div v-if="unitMode === 'lb'" class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<MetricBox label="LB Uva Ingresada" :value="formatNumber(data.total_lb_uva_ingresada) + ' lb'" />
|
|
<MetricBox label="LB Uva Pagada" :value="formatNumber(data.total_lb_uva_pagada) + ' lb'" color="green" />
|
|
<MetricBox label="LB Uva en Depósito" :value="formatNumber(data.total_lb_uva_deposito) + ' lb'" color="yellow" />
|
|
</div>
|
|
|
|
<!-- Solo QQ Seco -->
|
|
<div v-else-if="unitMode === 'qq'" class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_uva_ingresado) + ' QQ'" />
|
|
<MetricBox label="QQ Seco Pagado" :value="formatNumber(data.total_qq_seco_uva_pagado) + ' QQ'" color="green" />
|
|
<MetricBox label="QQ Seco en Depósito" :value="formatNumber(qqSecoUvaDeposito) + ' QQ'" color="yellow" />
|
|
</div>
|
|
|
|
<!-- Ambos -->
|
|
<div v-else class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<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">Uva Ingresada</div>
|
|
<div class="text-lg font-bold text-[var(--brand-text)]">
|
|
{{ formatNumber(data.total_lb_uva_ingresada) }} lb
|
|
</div>
|
|
<div class="text-sm text-[var(--brand-text-muted)] mt-1">
|
|
{{ formatNumber(data.total_qq_seco_uva_ingresado) }} 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">Uva Pagada</div>
|
|
<div class="text-lg font-bold text-green-400">
|
|
{{ formatNumber(data.total_lb_uva_pagada) }} lb
|
|
</div>
|
|
<div class="text-sm text-[var(--brand-text-muted)] mt-1">
|
|
{{ formatNumber(data.total_qq_seco_uva_pagado) }} 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">Uva en Depósito</div>
|
|
<div class="text-lg font-bold text-yellow-400">
|
|
{{ formatNumber(data.total_lb_uva_deposito) }} lb
|
|
</div>
|
|
<div class="text-sm text-[var(--brand-text-muted)] mt-1">
|
|
{{ formatNumber(qqSecoUvaDeposito) }} QQ
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mojado -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Mojado</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_mojado_ingresado) + ' QQ'" />
|
|
<MetricBox label="QQ Seco Pagado" :value="formatNumber(data.total_qq_seco_mojado_pagado) + ' QQ'" color="green" />
|
|
<MetricBox label="QQ en Depósito" :value="formatNumber(data.total_qq_mojado_deposito) + ' QQ'" color="yellow" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Oreado -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Oreado</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_oreado_ingresado) + ' QQ'" />
|
|
<MetricBox label="QQ Seco Pagado" :value="formatNumber(data.total_qq_seco_oreado_pagado) + ' QQ'" color="green" />
|
|
<MetricBox label="QQ en Depósito" :value="formatNumber(data.total_qq_oreado_deposito) + ' QQ'" color="yellow" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Totales Generales -->
|
|
<div class="pt-4 border-t border-[#3a2a16]">
|
|
<h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Totales Generales</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_ingresado) + ' QQ'" />
|
|
<MetricBox label="QQ Seco Comprado" :value="formatNumber(data.total_qq_seco_comprado) + ' QQ'" color="green" />
|
|
<MetricBox label="QQ Seco en Depósito" :value="formatNumber(data.total_qq_seco_deposito) + ' QQ'" color="yellow" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
data: {
|
|
total_lb_uva_ingresada: number
|
|
total_qq_seco_uva_ingresado: number
|
|
total_qq_seco_mojado_ingresado: number
|
|
total_qq_seco_oreado_ingresado: number
|
|
total_qq_seco_ingresado: number
|
|
total_lb_uva_pagada: number
|
|
total_qq_seco_uva_pagado: number
|
|
total_qq_seco_mojado_pagado: number
|
|
total_qq_seco_oreado_pagado: number
|
|
total_qq_seco_comprado: number
|
|
total_lb_uva_deposito: number
|
|
total_qq_mojado_deposito: number
|
|
total_qq_oreado_deposito: number
|
|
total_qq_seco_deposito: number
|
|
}
|
|
}>()
|
|
|
|
// Toggle de unidades: 'lb' | 'qq' | 'both'
|
|
type UnitMode = 'lb' | 'qq' | 'both'
|
|
const unitMode = ref<UnitMode>('lb')
|
|
|
|
// Calcular QQ Seco en Depósito para Uva (ingresado - pagado)
|
|
const qqSecoUvaDeposito = computed(() => {
|
|
return props.data.total_qq_seco_uva_ingresado - props.data.total_qq_seco_uva_pagado
|
|
})
|
|
|
|
const cycleUnitMode = () => {
|
|
const modes: UnitMode[] = ['lb', 'qq', 'both']
|
|
const currentIndex = modes.indexOf(unitMode.value)
|
|
unitMode.value = modes[(currentIndex + 1) % modes.length]
|
|
}
|
|
|
|
const unitModeLabel = computed(() => {
|
|
const labels = {
|
|
lb: 'LB',
|
|
qq: 'QQ',
|
|
both: 'Ambos'
|
|
}
|
|
return labels[unitMode.value]
|
|
})
|
|
|
|
const unitModeIcon = computed(() => {
|
|
const icons = {
|
|
lb: 'i-heroicons-scale',
|
|
qq: 'i-heroicons-cube',
|
|
both: 'i-heroicons-arrows-right-left'
|
|
}
|
|
return icons[unitMode.value]
|
|
})
|
|
|
|
const formatNumber = (value: number) => {
|
|
return new Intl.NumberFormat('es-HN', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
}).format(value)
|
|
}
|
|
</script>
|