analiticaNucleo/nuxt4-app/app/components/empleados/TotalesEmpleados.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 Generales</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">
      <!-- Métricas Principales -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-4">
          <div class="flex items-center gap-3 mb-2">
            <div class="p-2 rounded-lg bg-blue-500/20">
              <div class="i-lucide-clock text-blue-400 text-xl"></div>
            </div>
            <div>
              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Total Horas</div>
              <div class="text-2xl font-bold text-blue-400">
                {{ formatNumber(data.total_horas_trabajadas || 0) }}
              </div>
            </div>
          </div>
          <div class="text-xs text-[var(--brand-text-muted)] mt-2">
            {{ formatNumber((data.total_horas_trabajadas || 0) / 8) }} días equiv.
          </div>
        </div>

        <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-4">
          <div class="flex items-center gap-3 mb-2">
            <div class="p-2 rounded-lg bg-green-500/20">
              <div class="i-lucide-calendar-check text-green-400 text-xl"></div>
            </div>
            <div>
              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Días Asistencia</div>
              <div class="text-2xl font-bold text-green-400">
                {{ formatNumber(data.total_dias_asistencia || 0, 0) }}
              </div>
            </div>
          </div>
          <div class="text-xs text-[var(--brand-text-muted)] mt-2">
            {{ contadores?.empleados_filtrados || 0}} empleados
          </div>
        </div>

        <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-4">
          <div class="flex items-center gap-3 mb-2">
            <div class="p-2 rounded-lg bg-purple-500/20">
              <div class="i-lucide-clipboard-check text-purple-400 text-xl"></div>
            </div>
            <div>
              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Tareas Realizadas</div>
              <div class="text-2xl font-bold text-purple-400">
                {{ formatNumber(data.total_tareas || 0, 0) }}
              </div>
            </div>
          </div>
          <div class="text-xs text-[var(--brand-text-muted)] mt-2">
            tareas completadas
          </div>
        </div>

        <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-4">
          <div class="flex items-center gap-3 mb-2">
            <div class="p-2 rounded-lg bg-orange-500/20">
              <div class="i-lucide-users text-orange-400 text-xl"></div>
            </div>
            <div>
              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Empleados</div>
              <div class="text-2xl font-bold text-orange-400">
                {{ contadores?.empleados_filtrados || 0 }}
              </div>
            </div>
          </div>
          <div class="text-xs text-[var(--brand-text-muted)] mt-2">
            de {{ contadores?.total_empleados || 0 }} totales
          </div>
        </div>
      </div>

      <!-- Promedio por Empleado -->
      <div v-if="(contadores?.empleados_filtrados || 0) > 0">
        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Promedio por Empleado</h3>
        <div 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">Horas / Empleado</div>
            <div class="text-lg font-bold text-blue-400">
              {{ formatNumber(promedioHorasPorEmpleado) }} hrs
            </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">Días / Empleado</div>
            <div class="text-lg font-bold text-green-400">
              {{ formatNumber(promedioDiasPorEmpleado, 1) }} días
            </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">Tareas / Empleado</div>
            <div class="text-lg font-bold text-purple-400">
              {{ formatNumber(promedioTareasPorEmpleado, 1) }} tareas
            </div>
          </div>
        </div>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const props = defineProps<{
  data: {
    total_horas_trabajadas: number
    total_dias_asistencia: number
    total_tareas: number
  }
  contadores?: {
    total_empleados?: number
    empleados_filtrados?: number
  }
  rangoLegible: string
  lastUpdated: string
}>()

// Computed
const promedioHorasPorEmpleado = computed(() => {
  const empleados = props.contadores?.empleados_filtrados || 0
  if (empleados === 0) return 0
  return (props.data.total_horas_trabajadas || 0) / empleados
})

const promedioDiasPorEmpleado = computed(() => {
  const empleados = props.contadores?.empleados_filtrados || 0
  if (empleados === 0) return 0
  return (props.data.total_dias_asistencia || 0) / empleados
})

const promedioTareasPorEmpleado = computed(() => {
  const empleados = props.contadores?.empleados_filtrados || 0
  if (empleados === 0) return 0
  return (props.data.total_tareas || 0) / empleados
})

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

async function copiarTexto() {
  const footer = `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 RESUMEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📅 Rango: ${props.rangoLegible}
👥 Empleados: ${props.contadores?.empleados_filtrados || 0} de ${props.contadores?.total_empleados || 0} registros
🕐 Generado: ${props.lastUpdated}`

  const texto = `👷 TOTALES GENERALES DE EMPLEADOS

📊 MÉTRICAS PRINCIPALES:
   Total Horas Trabajadas: ${formatNumber(props.data.total_horas_trabajadas || 0)} hrs
   Días Equivalentes: ${formatNumber((props.data.total_horas_trabajadas || 0) / 8)} días
   Total Días de Asistencia: ${formatNumber(props.data.total_dias_asistencia || 0, 0)} días
   Total Tareas Realizadas: ${formatNumber(props.data.total_tareas || 0, 0)} tareas
   Empleados Activos: ${props.contadores?.empleados_filtrados || 0}

📈 PROMEDIO POR EMPLEADO:
   Horas por Empleado: ${formatNumber(promedioHorasPorEmpleado.value)} hrs
   Días por Empleado: ${formatNumber(promedioDiasPorEmpleado.value, 1)} días
   Tareas por Empleado: ${formatNumber(promedioTareasPorEmpleado.value, 1)} tareas${footer}`

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