ui/ux panorama facturador

nuxt4-app/app/components/ingresos/TotalesIngresoCompra.vue

@@ -1,45 +1,198 @@
 <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>
+      <h2 class="text-xl font-bold brand-section-title">Totales qq Seco de Ingreso y Compra</h2>
     </template>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <MetricCard
-        label="Total qq Seco Ingresado"
-        :value="metrics.totalQqSecoIngresado.value.toFixed(2)"
-        unit="qq"
-        variant="primary"
-      />
-      <MetricCard
-        label="Total qq Seco Comprado"
-        :value="metrics.totalQqSecoComprado.value.toFixed(2)"
-        unit="qq"
-        variant="success"
-      />
-      <MetricCard
-        label="Precio Promedio Ponderado Uva"
-        :value="metrics.precioPromedioUvaPorQqLb.value.toFixed(2)"
-        unit="L./lb"
-      />
-      <MetricCard
-        label="Precio Promedio Ponderado Oreado"
-        :value="metrics.precioPromedioOreadoPorQq.value.toFixed(2)"
-        unit="L./qq"
-      />
-      <MetricCard
-        label="Precio Promedio Ponderado Mojado"
-        :value="metrics.precioPromedioMojadoPorQq.value.toFixed(2)"
-        unit="L./qq"
-      />
+    <div class="flex flex-col gap-6">
+      <!-- Sección: Totales Generales (Pagado + Pendiente) -->
+      <div>
+        <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide mb-3">
+          Totales Generales (Pagado + Pendiente)
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div class="p-4 rounded-lg border transition-all bg-[#1c140c] border-[#c08040] text-[var(--brand-primary)]">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-xs uppercase tracking-wide opacity-80">Total Uva Ingresada</span>
+              <UButton
+                :label="unitDisplayLabel"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                @click="cycleUnitDisplay"
+              />
+            </div>
+            <div>
+              <span class="text-2xl font-bold">{{ formatUvaValueNumber(metrics.totalLbUvaIngresada.value, metrics.totalQqSecoUvaIngresado.value) }}</span>
+              <span class="text-sm font-bold opacity-70 ml-2">{{ formatUvaValueUnit() }}</span>
+            </div>
+          </div>
+          <MetricCard
+            label="Total qq Seco Mojado"
+            :value="formatNumber(metrics.totalQqSecoMojadoIngresado.value)"
+            unit="qq"
+            variant="primary"
+          />
+          <MetricCard
+            label="Total qq Seco Oreado"
+            :value="formatNumber(metrics.totalQqSecoOreadoIngresado.value)"
+            unit="qq"
+            variant="primary"
+          />
+          <MetricCard
+            label="Total qq Seco Ingresado"
+            :value="formatNumber(metrics.totalQqSecoIngresado.value)"
+            unit="qq"
+            variant="primary"
+          />
+        </div>
+      </div>
+
+      <!-- Sección: Solo Pagados -->
+      <div>
+        <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide mb-3">
+          Solo Pagados
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div class="p-4 rounded-lg border transition-all bg-[#1c140c] border-green-600/30 text-green-400">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-xs uppercase tracking-wide opacity-80">Total Uva Pagada</span>
+              <UButton
+                :label="unitDisplayLabel"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                @click="cycleUnitDisplay"
+              />
+            </div>
+            <div>
+              <span class="text-2xl font-bold">{{ formatUvaValueNumber(metrics.totalLbUvaPagada.value, metrics.totalQqSecoUvaPagado.value) }}</span>
+              <span class="text-sm font-bold opacity-70 ml-2">{{ formatUvaValueUnit() }}</span>
+            </div>
+          </div>
+          <MetricCard
+            label="Total qq Seco Mojado Pagado"
+            :value="formatNumber(metrics.totalQqSecoMojadoPagado.value)"
+            unit="qq"
+            variant="success"
+          />
+          <MetricCard
+            label="Total qq Seco Oreado Pagado"
+            :value="formatNumber(metrics.totalQqSecoOreadoPagado.value)"
+            unit="qq"
+            variant="success"
+          />
+          <MetricCard
+            label="Total qq Seco Comprado"
+            :value="formatNumber(metrics.totalQqSecoComprado.value)"
+            unit="qq"
+            variant="success"
+          />
+        </div>
+      </div>
+
+      <!-- Sección: Inventario en Depósito -->
+      <div>
+        <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide mb-3">
+          Inventario en Depósito
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div class="p-4 rounded-lg border transition-all bg-[#1c140c] border-yellow-600/30 text-yellow-400">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-xs uppercase tracking-wide opacity-80">Total Uva en Depósito</span>
+              <UButton
+                :label="unitDisplayLabel"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                @click="cycleUnitDisplay"
+              />
+            </div>
+            <div>
+              <span class="text-2xl font-bold">{{ formatUvaValueNumber(metrics.totalLbUvaDeposito.value, 0) }}</span>
+              <span class="text-sm font-bold opacity-70 ml-2">{{ formatUvaValueUnit() }}</span>
+            </div>
+          </div>
+          <MetricCard
+            label="Total qq Seco Mojado en Depósito"
+            :value="formatNumber(metrics.totalQqMojadoDeposito.value)"
+            unit="qq"
+            variant="warning"
+          />
+          <MetricCard
+            label="Total qq Seco Oreado en Depósito"
+            :value="formatNumber(metrics.totalQqOreadoDeposito.value)"
+            unit="qq"
+            variant="warning"
+          />
+          <MetricCard
+            label="Total qq Seco en Depósito"
+            :value="formatNumber(metrics.totalQqSecoDeposito.value)"
+            unit="qq"
+            variant="warning"
+          />
+        </div>
+      </div>
     </div>
   </UCard>
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 import type { IngresosMetrics } from '~/composables/useIngresosMetrics'
 
 defineProps<{
   metrics: IngresosMetrics
 }>()
+
+type UnitDisplay = 'lb' | 'qq' | 'both'
+
+const unitDisplay = ref<UnitDisplay>('both')
+
+const unitDisplayLabel = computed(() => {
+  switch (unitDisplay.value) {
+    case 'lb': return 'lb'
+    case 'qq': return 'qq'
+    case 'both': return 'lb + qq'
+  }
+})
+
+function cycleUnitDisplay() {
+  if (unitDisplay.value === 'both') {
+    unitDisplay.value = 'lb'
+  } else if (unitDisplay.value === 'lb') {
+    unitDisplay.value = 'qq'
+  } else {
+    unitDisplay.value = 'both'
+  }
+}
+
+function formatNumber(value: number): string {
+  return value.toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })
+}
+
+function formatUvaValueNumber(lb: number, qq: number): string {
+  switch (unitDisplay.value) {
+    case 'lb':
+      return Math.round(lb).toLocaleString('en-US')
+    case 'qq':
+      return formatNumber(qq)
+    case 'both':
+      return `${Math.round(lb).toLocaleString('en-US')} / ${formatNumber(qq)}`
+  }
+}
+
+function formatUvaValueUnit(): string {
+  switch (unitDisplay.value) {
+    case 'lb':
+      return 'lb'
+    case 'qq':
+      return 'qq'
+    case 'both':
+      return 'lb / qq'
+  }
+}
 </script>