analiticaNucleo/nuxt4-app/app/components/TotalesVerde.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">Café Verde</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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <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">LB Neto Verde Total</div>
        <div class="text-2xl font-bold text-[var(--brand-text)]">
          {{ formatNumber(data.total_lb_neto_verde) }} lb
        </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">LB Neto Comprado</div>
        <div class="text-2xl font-bold text-green-400">
          {{ formatNumber(data.total_lb_neto_comprado_verde) }} lb
        </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">LB Neto en Depósito</div>
        <div class="text-2xl font-bold text-yellow-400">
          {{ formatNumber(data.total_lb_neto_verde_deposito) }} lb
        </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">Precio Promedio Pagado</div>
        <div class="text-2xl font-bold text-[var(--brand-text)]">
          {{ formatCurrency(data.precio_promedio_verde_pagado) }}/lb
        </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">Inversión Hasta la Fecha</div>
        <div class="text-2xl font-bold text-green-400">
          {{ formatCurrency(data.inversion_verde_hasta_fecha) }}
        </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">Inversión Restante</div>
        <div class="text-2xl font-bold text-yellow-400">
          {{ formatCurrency(data.inversion_restante_verde) }}
        </div>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const props = defineProps<{
  data: {
    total_lb_neto_verde: number
    precio_promedio_verde_pagado: number
    total_lb_neto_verde_deposito: number
    inversion_verde_hasta_fecha: number
    inversion_restante_verde: number
    total_lb_neto_comprado_verde: number
  }
  contadores?: {
    total_ingresos?: number
    ingresos_filtrados?: number
    total_clientes?: number
    clientes_con_ingresos_filtrados?: number
  }
  rangoLegible: string
  lastUpdated: string
}>()

const formatNumber = (value: number) => {
  return new Intl.NumberFormat('es-HN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(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 = `🌱 CAFÉ VERDE

📊 TOTALES:
   LB Neto Verde Total: ${formatNumber(props.data.total_lb_neto_verde)} lb
   LB Neto Comprado: ${formatNumber(props.data.total_lb_neto_comprado_verde)} lb
   LB Neto en Depósito: ${formatNumber(props.data.total_lb_neto_verde_deposito)} lb

💵 FINANCIERO:
   Precio Promedio Pagado: ${formatCurrency(props.data.precio_promedio_verde_pagado)}/lb
   Inversión Hasta la Fecha: ${formatCurrency(props.data.inversion_verde_hasta_fecha)}
   Inversión Restante: ${formatCurrency(props.data.inversion_restante_verde)}${footer}`

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