ui/ux panorama facturador 2

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

@@ -0,0 +1,176 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <template #header>
+      <h2 class="text-xl font-bold brand-section-title">Totales Monetarios</h2>
+    </template>
+
+    <div class="flex flex-col gap-6">
+      <!-- Sección: Inversión Hasta la Fecha -->
+      <div>
+        <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide mb-3">
+          Inversión Hasta la Fecha
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <MetricCard
+            label="Inversión en Uva"
+            :value="formatCurrency(metrics.inversionUva.value)"
+            variant="success"
+          />
+          <MetricCard
+            label="Inversión en Oreado"
+            :value="formatCurrency(metrics.inversionOreado.value)"
+            variant="success"
+          />
+          <MetricCard
+            label="Inversión en Mojado"
+            :value="formatCurrency(metrics.inversionMojado.value)"
+            variant="success"
+          />
+          <MetricCard
+            label="Total Invertido"
+            :value="formatCurrency(metrics.totalInvertido.value)"
+            variant="primary"
+          />
+        </div>
+      </div>
+
+      <!-- Sección: Precios Promedio Ponderados -->
+      <div>
+        <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide mb-3">
+          Precios Promedio Ponderados
+        </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-[#3a2a16] text-[var(--brand-text)]">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-xs uppercase tracking-wide opacity-80">Precio Promedio Ponderado Uva</span>
+              <UButton
+                :label="unitDisplayLabel"
+                size="xs"
+                color="neutral"
+                variant="ghost"
+                @click="cycleUnitDisplay"
+              />
+            </div>
+            <div>
+              <span class="text-2xl font-bold">{{ formatPrecioUvaNumber() }}</span>
+              <span class="text-sm font-bold opacity-70 ml-2">{{ formatPrecioUvaUnit() }}</span>
+            </div>
+          </div>
+          <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"
+          />
+          <MetricCard
+            label="Precio Promedio Ponderado qq Seco"
+            :value="formatNumber(metrics.precioPromedioQqSeco.value)"
+            unit="L./qq"
+          />
+        </div>
+      </div>
+
+      <!-- Sección: Inversión Restante a Realizar -->
+      <div>
+        <h3 class="text-sm font-semibold text-[var(--brand-text-muted)] uppercase tracking-wide mb-3">
+          Inversión Restante a Realizar
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <MetricCard
+            label="Inversión Restante Oreado"
+            :value="formatCurrency(metrics.inversionRestanteOreado.value)"
+            variant="warning"
+          />
+          <MetricCard
+            label="Inversión Restante Mojado"
+            :value="formatCurrency(metrics.inversionRestanteMojado.value)"
+            variant="warning"
+          />
+          <MetricCard
+            label="Inversión Restante Uva"
+            :value="formatCurrency(metrics.inversionRestanteUva.value)"
+            variant="warning"
+          />
+          <MetricCard
+            label="Inversión Restante Esperada"
+            :value="formatCurrency(metrics.inversionRestanteEsperada.value)"
+            variant="danger"
+          />
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { IngresosMetrics } from '~/composables/useIngresosMetrics'
+
+const props = 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'
+  }
+}
+
+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',
+    currency: 'HNL',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value).replace('HNL', 'L')
+}
+
+function formatPrecioUvaNumber(): string {
+  switch (unitDisplay.value) {
+    case 'lb':
+      return formatNumber(props.metrics.precioPromedioUvaPorQqLb.value)
+    case 'qq':
+      return formatNumber(props.metrics.precioPromedioUvaPorQq.value)
+    case 'both':
+      return `${formatNumber(props.metrics.precioPromedioUvaPorQqLb.value)} / ${formatNumber(props.metrics.precioPromedioUvaPorQq.value)}`
+  }
+}
+
+function formatPrecioUvaUnit(): string {
+  switch (unitDisplay.value) {
+    case 'lb':
+      return 'L./lb'
+    case 'qq':
+      return 'L./qq'
+    case 'both':
+      return 'L./lb / L./qq'
+  }
+}
+</script>

nuxt4-app/app/composables/useIngresosMetrics.ts

@@ -24,8 +24,10 @@ export interface IngresosMetrics {
   totalQqSecoOreadoPagado: ComputedRef<number>
   totalQqSecoMojadoOreadoPagado: ComputedRef<number>
   precioPromedioUvaPorQqLb: ComputedRef<number>
+  precioPromedioUvaPorQq: ComputedRef<number>
   precioPromedioOreadoPorQq: ComputedRef<number>
   precioPromedioMojadoPorQq: ComputedRef<number>
+  precioPromedioQqSeco: ComputedRef<number>
 
   // Inversión
   inversionUva: ComputedRef<number>
@@ -168,6 +170,11 @@ export function useIngresosMetrics(ingresos: ComputedRef<IngresoRecord[]>) {
     return sumaProducto / sumaPesoNeto
   })
 
+  // Precio promedio uva por qq seco (500 lb uva = 1 qq seco)
+  const precioPromedioUvaPorQq = computed(() => {
+    return precioPromedioUvaPorQqLb.value * 500
+  })
+
   const precioPromedioOreadoPorQq = computed(() => {
     const oreadosPagados = ingresos.value.filter(i => i.tipo === 'oreado' && i.estado === 'pagado')
     const sumaPesoSeco = oreadosPagados.reduce((sum, i) => sum + (i.peso_seco || 0), 0)
@@ -194,6 +201,18 @@ export function useIngresosMetrics(ingresos: ComputedRef<IngresoRecord[]>) {
     return (sumaProducto / sumaPesoSeco) / 2
   })
 
+  // Precio promedio ponderado de qq seco (combinando todos los tipos)
+  const precioPromedioQqSeco = computed(() => {
+    const todosPagados = ingresos.value.filter(i => i.estado === 'pagado')
+    const sumaPesoSeco = todosPagados.reduce((sum, i) => sum + (i.peso_seco || 0), 0)
+
+    if (sumaPesoSeco === 0) return 0
+
+    const sumaTotal = todosPagados.reduce((sum, i) => sum + calcularTotalAPagar(i), 0)
+
+    return sumaTotal / sumaPesoSeco
+  })
+
   // INVERSIÓN
   const inversionUva = computed(() => {
     return ingresos.value
@@ -333,8 +352,10 @@ export function useIngresosMetrics(ingresos: ComputedRef<IngresoRecord[]>) {
     totalQqSecoOreadoPagado,
     totalQqSecoMojadoOreadoPagado,
     precioPromedioUvaPorQqLb,
+    precioPromedioUvaPorQq,
     precioPromedioOreadoPorQq,
     precioPromedioMojadoPorQq,
+    precioPromedioQqSeco,
 
     // Inversión
     inversionUva,

nuxt4-app/app/pages/panorama.vue

@@ -166,11 +166,9 @@
       </UCard>
 
       <!-- Ingresos Sections -->
-      <IngresosPreciosPromedio :metrics="ingresosMetrics" />
-      <IngresosTotalesIngresoCompra :metrics="ingresosMetrics" />
-      <IngresosInversionTotal :metrics="ingresosMetrics" />
       <IngresosSecosVendidos :metrics="ingresosMetrics" />
-      <IngresosInversionRestante :metrics="ingresosMetrics" />
+      <IngresosTotalesIngresoCompra :metrics="ingresosMetrics" />
+      <IngresosTotalesMonetarios :metrics="ingresosMetrics" />
       <IngresosTotalesVerde :metrics="ingresosMetrics" />
 
       <!-- Rechazos Section -->