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

<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <div class="flex items-center justify-between">
        <h2 class="text-xl font-bold brand-section-title">Totales de Ingreso y Compra</h2>
        <div class="flex items-center gap-2">
          <UButton
            size="xs"
            color="gray"
            variant="soft"
            icon="i-lucide-copy"
            @click="copiarTexto"
          >
            Copiar Texto
          </UButton>
          <UButton
            size="xs"
            color="gray"
            variant="soft"
            icon="i-lucide-braces"
            @click="copiarJSON"
          >
            Copiar JSON
          </UButton>
        </div>
      </div>
    </template>

    <div class="space-y-6">
      <!-- Uva -->
      <div>
        <div class="flex justify-between items-center mb-3">
          <h3 class="text-lg font-semibold text-[var(--brand-primary)]">Uva</h3>

          <!-- Toggle de Unidades -->
          <div class="flex items-center gap-2">
            <span class="text-xs text-[var(--brand-text-muted)]">Unidad:</span>
            <UButton
              @click="cycleUnitMode"
              size="xs"
              color="gray"
              variant="soft"
              :icon="unitModeIcon"
            >
              {{ unitModeLabel }}
            </UButton>
          </div>
        </div>

        <!-- Solo LB -->
        <div v-if="unitMode === 'lb'" class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <MetricBox label="LB Uva Ingresada" :value="formatNumber(data.total_lb_uva_ingresada) + ' lb'" />
          <MetricBox label="LB Uva Pagada" :value="formatNumber(data.total_lb_uva_pagada) + ' lb'" color="green" />
          <MetricBox label="LB Uva en Depósito" :value="formatNumber(data.total_lb_uva_deposito) + ' lb'" color="yellow" />
        </div>

        <!-- Solo QQ Seco -->
        <div v-else-if="unitMode === 'qq'" class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_uva_ingresado) + ' QQ'" />
          <MetricBox label="QQ Seco Pagado" :value="formatNumber(data.total_qq_seco_uva_pagado) + ' QQ'" color="green" />
          <MetricBox label="QQ Seco en Depósito" :value="formatNumber(qqSecoUvaDeposito) + ' QQ'" color="yellow" />
        </div>

        <!-- Ambos -->
        <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Uva Ingresada</div>
            <div class="text-lg font-bold text-[var(--brand-text)]">
              {{ formatNumber(data.total_lb_uva_ingresada) }} lb
            </div>
            <div class="text-sm text-[var(--brand-text-muted)] mt-1">
              {{ formatNumber(data.total_qq_seco_uva_ingresado) }} QQ
            </div>
          </div>

          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Uva Pagada</div>
            <div class="text-lg font-bold text-green-400">
              {{ formatNumber(data.total_lb_uva_pagada) }} lb
            </div>
            <div class="text-sm text-[var(--brand-text-muted)] mt-1">
              {{ formatNumber(data.total_qq_seco_uva_pagado) }} QQ
            </div>
          </div>

          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Uva en Depósito</div>
            <div class="text-lg font-bold text-yellow-400">
              {{ formatNumber(data.total_lb_uva_deposito) }} lb
            </div>
            <div class="text-sm text-[var(--brand-text-muted)] mt-1">
              {{ formatNumber(qqSecoUvaDeposito) }} QQ
            </div>
          </div>
        </div>
      </div>

      <!-- Mojado -->
      <div>
        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Mojado</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_mojado_ingresado) + ' QQ'" />
          <MetricBox label="QQ Seco Pagado" :value="formatNumber(data.total_qq_seco_mojado_pagado) + ' QQ'" color="green" />
          <MetricBox label="QQ en Depósito" :value="formatNumber(data.total_qq_mojado_deposito) + ' QQ'" color="yellow" />
        </div>
      </div>

      <!-- Oreado -->
      <div>
        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Oreado</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_oreado_ingresado) + ' QQ'" />
          <MetricBox label="QQ Seco Pagado" :value="formatNumber(data.total_qq_seco_oreado_pagado) + ' QQ'" color="green" />
          <MetricBox label="QQ en Depósito" :value="formatNumber(data.total_qq_oreado_deposito) + ' QQ'" color="yellow" />
        </div>
      </div>

      <!-- Totales Generales -->
      <div class="pt-4 border-t border-[var(--brand-border)]">
        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Totales Generales</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <MetricBox label="QQ Seco Ingresado" :value="formatNumber(data.total_qq_seco_ingresado) + ' QQ'" />
          <MetricBox label="QQ Seco Comprado" :value="formatNumber(data.total_qq_seco_comprado) + ' QQ'" color="green" />
          <MetricBox label="QQ Seco en Depósito" :value="formatNumber(data.total_qq_seco_deposito) + ' QQ'" color="yellow" />
        </div>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
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
  }
  contadores?: {
    total_ingresos?: number
    ingresos_filtrados?: number
    total_clientes?: number
    clientes_con_ingresos_filtrados?: number
  }
  rangoLegible: string
  lastUpdated: string
}>()

// Toggle de unidades: 'lb' | 'qq' | 'both'
type UnitMode = 'lb' | 'qq' | 'both'
const unitMode = ref<UnitMode>('lb')

// Calcular QQ Seco en Depósito para Uva (ingresado - pagado)
const qqSecoUvaDeposito = computed(() => {
  return props.data.total_qq_seco_uva_ingresado - props.data.total_qq_seco_uva_pagado
})

const cycleUnitMode = () => {
  const modes: UnitMode[] = ['lb', 'qq', 'both']
  const currentIndex = modes.indexOf(unitMode.value)
  unitMode.value = modes[(currentIndex + 1) % modes.length]
}

const unitModeLabel = computed(() => {
  const labels = {
    lb: 'LB',
    qq: 'QQ',
    both: 'Ambos'
  }
  return labels[unitMode.value]
})

const unitModeIcon = computed(() => {
  const icons = {
    lb: 'i-heroicons-scale',
    qq: 'i-heroicons-cube',
    both: 'i-heroicons-arrows-right-left'
  }
  return icons[unitMode.value]
})

const formatNumber = (value: number) => {
  return new Intl.NumberFormat('es-HN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value)
}

async function copiarTexto() {
  const footer = `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 RESUMEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📅 Rango: ${props.rangoLegible}
📦 Ingresos: ${props.contadores?.ingresos_filtrados || 0} de ${props.contadores?.total_ingresos || 0} registros
👥 Clientes: ${props.contadores?.clientes_con_ingresos_filtrados || 0} de ${props.contadores?.total_clientes || 0} clientes
🕐 Generado: ${props.lastUpdated}`

  const texto = `☕ TOTALES DE INGRESO Y COMPRA

🍇 UVA:
   Ingresada: ${formatNumber(props.data.total_lb_uva_ingresada)} lb (${formatNumber(props.data.total_qq_seco_uva_ingresado)} QQ seco)
   Pagada: ${formatNumber(props.data.total_lb_uva_pagada)} lb (${formatNumber(props.data.total_qq_seco_uva_pagado)} QQ seco)
   En Depósito: ${formatNumber(props.data.total_lb_uva_deposito)} lb (${formatNumber(qqSecoUvaDeposito.value)} QQ seco)

💧 MOJADO:
   Ingresado: ${formatNumber(props.data.total_qq_seco_mojado_ingresado)} QQ seco
   Pagado: ${formatNumber(props.data.total_qq_seco_mojado_pagado)} QQ seco
   En Depósito: ${formatNumber(props.data.total_qq_mojado_deposito)} QQ

🌬️ OREADO:
   Ingresado: ${formatNumber(props.data.total_qq_seco_oreado_ingresado)} QQ seco
   Pagado: ${formatNumber(props.data.total_qq_seco_oreado_pagado)} QQ seco
   En Depósito: ${formatNumber(props.data.total_qq_oreado_deposito)} QQ

📊 TOTALES GENERALES:
   QQ Seco Ingresado: ${formatNumber(props.data.total_qq_seco_ingresado)} QQ
   QQ Seco Comprado: ${formatNumber(props.data.total_qq_seco_comprado)} QQ
   QQ Seco en Depósito: ${formatNumber(props.data.total_qq_seco_deposito)} QQ${footer}`

  await navigator.clipboard.writeText(texto)
  alert('✅ Totales de Ingreso y Compra copiados al portapapeles')
}

async function copiarJSON() {
  const json = JSON.stringify(props.data, null, 2)
  await navigator.clipboard.writeText(json)
  alert('✅ JSON copiado al portapapeles')
}
</script>