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>