ui/ux panorama facturador

nuxt4-app/app/components/MetricCard.vue

@@ -7,7 +7,7 @@
       <span class="text-xs uppercase tracking-wide opacity-80 mb-1">{{ label }}</span>
       <div class="flex items-baseline gap-2">
         <span class="text-2xl font-bold">{{ value }}</span>
-        <span v-if="unit" class="text-sm opacity-70">{{ unit }}</span>
+        <span v-if="unit" class="text-sm font-bold opacity-70">{{ unit }}</span>
       </div>
       <slot></slot>
     </div>

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

@@ -0,0 +1,40 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <template #header>
+      <h2 class="text-xl font-bold brand-section-title">Precios Promedio Ponderados</h2>
+    </template>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <MetricCard
+        label="Precio Promedio Ponderado Uva"
+        :value="formatNumber(metrics.precioPromedioUvaPorQqLb.value)"
+        unit="L./lb"
+      />
+      <MetricCard
+        label="Precio Promedio Ponderado Oreado"
+        :value="formatNumber(metrics.precioPromedioOreadoPorQq.value)"
+        unit="L./qq"
+      />
+      <MetricCard
+        label="Precio Promedio Ponderado Mojado"
+        :value="formatNumber(metrics.precioPromedioMojadoPorQq.value)"
+        unit="L./qq"
+      />
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import type { IngresosMetrics } from '~/composables/useIngresosMetrics'
+
+defineProps<{
+  metrics: IngresosMetrics
+}>()
+
+const formatNumber = (value: number) => {
+  return value.toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })
+}
+</script>

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

@@ -6,21 +6,21 @@
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
       <MetricCard
-        label="Total QQ Secos por Vender"
-        :value="metrics.totalQqSecoPorVender.value.toFixed(2)"
-        unit="QQ"
+        label="Total qq Secos por Vender"
+        :value="formatNumber(metrics.totalQqSecoPorVender.value)"
+        unit="qq"
         variant="info"
       />
       <MetricCard
-        label="Precio de Venta Promedio por QQ"
+        label="Precio de Venta Promedio por qq"
         :value="formatCurrency(metrics.precioVentaPromedioPorQq.value)"
       />
       <MetricCard
-        label="Precio de Compra Promedio por QQ"
+        label="Precio de Compra Promedio por qq"
         :value="formatCurrency(metrics.precioCompraPromedioPorQq.value)"
       />
       <MetricCard
-        label="Margen de Ganancia por QQ"
+        label="Margen de Ganancia por qq"
         :value="formatCurrency(metrics.margenGananciaPorQq.value)"
         :variant="metrics.margenGananciaPorQq.value > 0 ? 'success' : 'danger'"
       />
@@ -35,6 +35,13 @@ defineProps<{
   metrics: IngresosMetrics
 }>()
 
+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',

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>

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

@@ -7,17 +7,17 @@
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       <MetricCard
         label="Total Lb Neto de Verde"
-        :value="metrics.totalLbNetoVerde.value.toFixed(2)"
+        :value="formatNumber(metrics.totalLbNetoVerde.value)"
         unit="lb"
       />
       <MetricCard
         label="Precio Promedio Ponderado Pagado"
-        :value="metrics.precioPromedioVerdePagado.value.toFixed(2)"
+        :value="formatNumber(metrics.precioPromedioVerdePagado.value)"
         unit="L./lb"
       />
       <MetricCard
         label="Total Lb Neto de Verde en Depósito"
-        :value="metrics.totalLbNetoVerdeDeposito.value.toFixed(2)"
+        :value="formatNumber(metrics.totalLbNetoVerdeDeposito.value)"
         unit="lb"
         variant="info"
       />
@@ -33,7 +33,7 @@
       />
       <MetricCard
         label="Total Lb Neto Comprado de Verde"
-        :value="metrics.totalLbNetoCompradoVerde.value.toFixed(2)"
+        :value="formatNumber(metrics.totalLbNetoCompradoVerde.value)"
         unit="lb"
       />
     </div>
@@ -47,6 +47,13 @@ defineProps<{
   metrics: IngresosMetrics
 }>()
 
+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',

nuxt4-app/app/components/rechazos/RechazoCard.vue

@@ -4,7 +4,7 @@
     <div class="space-y-2">
       <div class="flex justify-between items-center">
         <span class="text-[var(--brand-text-muted)] text-sm">Total {{ unidad }}:</span>
-        <span class="font-medium text-[var(--brand-text)]">{{ metrics.value.totalCantidad.toFixed(2) }} {{ unidad }}</span>
+        <span class="font-medium text-[var(--brand-text)]"><span class="font-bold">{{ formatNumber(metrics.value.totalCantidad) }}</span> <span class="font-bold">{{ unidad }}</span></span>
       </div>
       <div class="flex justify-between items-center">
         <span class="text-[var(--brand-text-muted)] text-sm">Precio promedio:</span>
@@ -44,6 +44,13 @@ const borderColor = computed(() => {
   return colors[props.color]
 })
 
+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',