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

<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="space-y-6">
      <!-- Inversión Hasta la Fecha -->
      <div>
        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Inversión Hasta la Fecha</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
          <MetricBox label="Inversión Uva" :value="formatCurrency(data.inversion_uva)" />
          <MetricBox label="Inversión Mojado" :value="formatCurrency(data.inversion_mojado)" />
          <MetricBox label="Inversión Oreado" :value="formatCurrency(data.inversion_oreado)" />
          <MetricBox label="Total Invertido" :value="formatCurrency(data.total_invertido)" color="green" />
        </div>
      </div>

      <!-- Precios Promedio Ponderados -->
      <div>
        <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" />
        </div>
      </div>

      <!-- Inversión Restante Esperada -->
      <div>
        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Inversión Restante Esperada</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
          <MetricBox label="Restante Uva" :value="formatCurrency(data.inversion_restante_uva)" color="yellow" />
          <MetricBox label="Restante Mojado" :value="formatCurrency(data.inversion_restante_mojado)" color="yellow" />
          <MetricBox label="Restante Oreado" :value="formatCurrency(data.inversion_restante_oreado)" color="yellow" />
          <MetricBox label="Total Restante" :value="formatCurrency(data.inversion_restante_esperada)" color="red" />
        </div>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const props = defineProps<{
  data: {
    inversion_uva: number
    inversion_mojado: number
    inversion_oreado: number
    total_invertido: number
    precio_promedio_uva_por_lb: number
    precio_promedio_uva_por_qq: number
    precio_promedio_mojado_por_qq: number
    precio_promedio_oreado_por_qq: number
    precio_promedio_qq_seco: number
    inversion_restante_uva: number
    inversion_restante_mojado: number
    inversion_restante_oreado: number
    inversion_restante_esperada: number
  }
}>()

// 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', {
    style: 'currency',
    currency: 'HNL',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value).replace('HNL', 'L')
}
</script>