analiticaNucleo/nuxt4-app/app/components/TotalesMonetarios.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 Monetarios</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">
      <!-- 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-[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</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
  }
  contadores?: {
    total_ingresos?: number
    ingresos_filtrados?: number
    total_clientes?: number
    clientes_con_ingresos_filtrados?: number
  }
  rangoLegible: string
  lastUpdated: string
}>()

// 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')
}

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 MONETARIOS

💵 INVERSIÓN HASTA LA FECHA:
   Inversión Uva: ${formatCurrency(props.data.inversion_uva)}
   Inversión Mojado: ${formatCurrency(props.data.inversion_mojado)}
   Inversión Oreado: ${formatCurrency(props.data.inversion_oreado)}
   Total Invertido: ${formatCurrency(props.data.total_invertido)}

📊 PRECIOS PROMEDIO PONDERADOS:
   Uva: ${formatCurrency(props.data.precio_promedio_uva_por_lb)}/lb (${formatCurrency(props.data.precio_promedio_uva_por_qq)}/QQ)
   Mojado: ${formatCurrency(props.data.precio_promedio_mojado_por_qq)}/QQ
   Oreado: ${formatCurrency(props.data.precio_promedio_oreado_por_qq)}/QQ
   Global QQ Seco: ${formatCurrency(props.data.precio_promedio_qq_seco)}/QQ

⏳ INVERSIÓN RESTANTE ESPERADA:
   Restante Uva: ${formatCurrency(props.data.inversion_restante_uva)}
   Restante Mojado: ${formatCurrency(props.data.inversion_restante_mojado)}
   Restante Oreado: ${formatCurrency(props.data.inversion_restante_oreado)}
   Total Restante: ${formatCurrency(props.data.inversion_restante_esperada)}${footer}`

  await navigator.clipboard.writeText(texto)
  alert('✅ Totales Monetarios 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>