From 465d68ec170a5ad9c801f554fb88195e63146a7e Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 29 Oct 2025 13:19:35 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20agregar=20toggle=20de=20unidades=20en?=
 =?UTF-8?q?=20secci=C3=B3n=20Uva=20de=20Totales=20de=20Ingreso=20y=20Compr?=
 =?UTF-8?q?a?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregar botón toggle de 3 estados: LB, QQ Seco, Ambos
- Por defecto muestra valores en LB
- Al cambiar a QQ Seco muestra: QQ Seco Ingresado, Pagado, en Depósito
- Al cambiar a Ambos muestra ambas unidades en el mismo contenedor
- Calcular QQ Seco en Depósito para Uva (ingresado - pagado)
- Iconos dinámicos según el modo seleccionado
---
 .../app/components/TotalesIngresoCompra.vue   | 96 ++++++++++++++++++-
 1 file changed, 93 insertions(+), 3 deletions(-)

diff --git a/nuxt4-app/app/components/TotalesIngresoCompra.vue b/nuxt4-app/app/components/TotalesIngresoCompra.vue
index 5100f64..e7cd2df 100644
--- a/nuxt4-app/app/components/TotalesIngresoCompra.vue
+++ b/nuxt4-app/app/components/TotalesIngresoCompra.vue
@@ -1,19 +1,76 @@
 <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>
+      <div class="flex justify-between items-center">
+        <h2 class="text-xl font-bold brand-section-title">Totales de Ingreso y Compra</h2>
+
+        <!-- Toggle de Unidades (solo para sección Uva) -->
+        <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>
     </template>
 
     <div class="space-y-6">
       <!-- Uva -->
       <div>
         <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Uva</h3>
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+
+        <!-- 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="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_uva_ingresado) + ' QQ'" />
           <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 -->
@@ -69,6 +126,39 @@ const props = defineProps<{
   }
 }>()
 
+// 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,