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

<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <h2 class="text-xl font-bold brand-section-title">Totales qq Seco de Ingreso y Compra</h2>
    </template>

    <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-[var(--brand-surface)] border-red-600/40 text-red-400">
            <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(data.total_lb_uva_ingresada, data.total_qq_seco_uva_ingresado) }}</span>
              <span class="text-sm font-bold opacity-70 ml-2">{{ formatUvaValueUnit() }}</span>
            </div>
          </div>
          <MetricCard
            label="Total qq Seco Mojado"
            :value="formatNumber(data.total_qq_seco_mojado_ingresado)"
            unit="qq"
            variant="info"
          />
          <MetricCard
            label="Total qq Seco Oreado"
            :value="formatNumber(data.total_qq_seco_oreado_ingresado)"
            unit="qq"
            variant="warning"
          />
          <MetricCard
            label="Total qq Seco Ingresado"
            :value="formatNumber(data.total_qq_seco_ingresado)"
            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-[var(--brand-surface)] border-red-600/40 text-red-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(data.total_lb_uva_pagada, data.total_qq_seco_uva_pagado) }}</span>
              <span class="text-sm font-bold opacity-70 ml-2">{{ formatUvaValueUnit() }}</span>
            </div>
          </div>
          <MetricCard
            label="Total qq Seco Mojado Pagado"
            :value="formatNumber(data.total_qq_seco_mojado_pagado)"
            unit="qq"
            variant="info"
          />
          <MetricCard
            label="Total qq Seco Oreado Pagado"
            :value="formatNumber(data.total_qq_seco_oreado_pagado)"
            unit="qq"
            variant="warning"
          />
          <MetricCard
            label="Total qq Seco Comprado"
            :value="formatNumber(data.total_qq_seco_comprado)"
            unit="qq"
            variant="primary"
          />
        </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-[var(--brand-surface)] border-red-600/40 text-red-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(data.total_lb_uva_deposito, 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(data.total_qq_mojado_deposito)"
            unit="qq"
            variant="info"
          />
          <MetricCard
            label="Total qq Seco Oreado en Depósito"
            :value="formatNumber(data.total_qq_oreado_deposito)"
            unit="qq"
            variant="warning"
          />
          <MetricCard
            label="Total qq Seco en Depósito"
            :value="formatNumber(data.total_qq_seco_deposito)"
            unit="qq"
            variant="primary"
          />
        </div>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// Props reciben datos directos de Metabase - SIN composables
const props = defineProps<{
  data: {
    total_lb_uva_ingresada: number
    total_qq_seco_uva_ingresado: number
    total_qq_seco_mojado_ingresado: number
    total_qq_seco_oreado_ingresado: number
    total_qq_seco_ingresado: number
    total_lb_uva_pagada: number
    total_qq_seco_uva_pagado: number
    total_qq_seco_mojado_pagado: number
    total_qq_seco_oreado_pagado: number
    total_qq_seco_comprado: number
    total_lb_uva_deposito: number
    total_qq_mojado_deposito: number
    total_qq_oreado_deposito: number
    total_qq_seco_deposito: number
  }
}>()

type UnitDisplay = 'lb' | 'qq' | 'both'

const unitDisplay = ref<UnitDisplay>('lb')

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>