From 33e03192722bc6f98cb9de685e34ebefbfa3e38d Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 29 Oct 2025 13:25:43 -0600
Subject: [PATCH] Refactor: mover toggle de unidades y aplicar en Precios
 Promedio Ponderados
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../app/components/TotalesIngresoCompra.vue   | 36 +++++-----
 .../app/components/TotalesMonetarios.vue      | 68 +++++++++++++++++--
 2 files changed, 82 insertions(+), 22 deletions(-)

diff --git a/nuxt4-app/app/components/TotalesIngresoCompra.vue b/nuxt4-app/app/components/TotalesIngresoCompra.vue
index e7cd2df..3192bea 100644
--- a/nuxt4-app/app/components/TotalesIngresoCompra.vue
+++ b/nuxt4-app/app/components/TotalesIngresoCompra.vue
@@ -1,29 +1,29 @@
 <template>
   <UCard class="brand-card border border-transparent">
     <template #header>
-      <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>
+      <h2 class="text-xl font-bold brand-section-title">Totales de Ingreso y Compra</h2>
     </template>
 
     <div class="space-y-6">
       <!-- Uva -->
       <div>
-        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Uva</h3>
+        <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">
diff --git a/nuxt4-app/app/components/TotalesMonetarios.vue b/nuxt4-app/app/components/TotalesMonetarios.vue
index 103448b..3c53b24 100644
--- a/nuxt4-app/app/components/TotalesMonetarios.vue
+++ b/nuxt4-app/app/components/TotalesMonetarios.vue
@@ -18,10 +18,42 @@
 
       <!-- Precios Promedio Ponderados -->
       <div>
-        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Precios Promedio Ponderados</h3>
-        <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
-          <MetricBox label="Uva por LB" :value="formatCurrency(data.precio_promedio_uva_por_lb)" />
-          <MetricBox label="Uva por QQ" :value="formatCurrency(data.precio_promedio_uva_por_qq)" />
+        <div class="flex justify-between items-center mb-3">
+          <h3 class="text-lg font-semibold text-[var(--brand-primary)]">Precios Promedio Ponderados</h3>
+
+          <!-- Toggle de Unidades para Uva -->
+          <div class="flex items-center gap-2">
+            <span class="text-xs text-[var(--brand-text-muted)]">Uva:</span>
+            <UButton
+              @click="cyclePriceUnitMode"
+              size="xs"
+              color="gray"
+              variant="soft"
+              :icon="priceUnitModeIcon"
+            >
+              {{ priceUnitModeLabel }}
+            </UButton>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+          <!-- Uva: Solo LB -->
+          <MetricBox v-if="priceUnitMode === 'lb'" label="Uva por LB" :value="formatCurrency(data.precio_promedio_uva_por_lb)" />
+
+          <!-- Uva: Solo QQ -->
+          <MetricBox v-else-if="priceUnitMode === 'qq'" label="Uva por QQ" :value="formatCurrency(data.precio_promedio_uva_por_qq)" />
+
+          <!-- Uva: Ambos -->
+          <div v-else 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</div>
+            <div class="text-lg font-bold text-[var(--brand-text)]">
+              {{ formatCurrency(data.precio_promedio_uva_por_lb) }}/lb
+            </div>
+            <div class="text-sm text-[var(--brand-text-muted)] mt-1">
+              {{ formatCurrency(data.precio_promedio_uva_por_qq) }}/QQ
+            </div>
+          </div>
+
           <MetricBox label="Mojado por QQ" :value="formatCurrency(data.precio_promedio_mojado_por_qq)" />
           <MetricBox label="Oreado por QQ" :value="formatCurrency(data.precio_promedio_oreado_por_qq)" />
           <MetricBox label="Global QQ Seco" :value="formatCurrency(data.precio_promedio_qq_seco)" color="blue" />
@@ -61,6 +93,34 @@ const props = defineProps<{
   }
 }>()
 
+// Toggle de unidades para precios de Uva: 'lb' | 'qq' | 'both'
+type PriceUnitMode = 'lb' | 'qq' | 'both'
+const priceUnitMode = ref<PriceUnitMode>('lb')
+
+const cyclePriceUnitMode = () => {
+  const modes: PriceUnitMode[] = ['lb', 'qq', 'both']
+  const currentIndex = modes.indexOf(priceUnitMode.value)
+  priceUnitMode.value = modes[(currentIndex + 1) % modes.length]
+}
+
+const priceUnitModeLabel = computed(() => {
+  const labels = {
+    lb: 'LB',
+    qq: 'QQ',
+    both: 'Ambos'
+  }
+  return labels[priceUnitMode.value]
+})
+
+const priceUnitModeIcon = computed(() => {
+  const icons = {
+    lb: 'i-heroicons-scale',
+    qq: 'i-heroicons-cube',
+    both: 'i-heroicons-arrows-right-left'
+  }
+  return icons[priceUnitMode.value]
+})
+
 const formatCurrency = (value: number) => {
   if (!value) return 'L 0.00'
   return new Intl.NumberFormat('es-HN', {