From 8821a59086b322344b33debc733dd0e2c9f62e8e Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 13 Nov 2025 18:50:38 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Agregar=20totales=20monetarios=20y=20al?=
 =?UTF-8?q?tura=20m=C3=A1xima=20a=20informe=20empleados?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Actualizada query de contadores con total_pagado_planillas y total_precios_tareas
- Agregados dos nuevos cards en TotalesEmpleados para mostrar totales monetarios
- Incluida diferencia entre pagos de planillas y precios de tareas
- Agregada función formatCurrency para formateo monetario
- Actualizada función copiarTexto con sección de totales monetarios
- Agregada altura máxima (max-h-96) a tabla de planillas con scroll vertical
- Cambiado grid de 4 a 3 columnas en lg para mejor distribución
---
 .../components/empleados/DetallePlanillas.vue |  2 +-
 .../components/empleados/TotalesEmpleados.vue | 52 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/nuxt4-app/app/components/empleados/DetallePlanillas.vue b/nuxt4-app/app/components/empleados/DetallePlanillas.vue
index 7e7fc88..e432711 100644
--- a/nuxt4-app/app/components/empleados/DetallePlanillas.vue
+++ b/nuxt4-app/app/components/empleados/DetallePlanillas.vue
@@ -29,7 +29,7 @@
       </div>
     </template>
 
-    <div class="overflow-x-auto">
+    <div class="overflow-x-auto max-h-96 overflow-y-auto">
       <table class="w-full text-sm">
         <thead>
           <tr class="border-b border-[var(--brand-border)]">
diff --git a/nuxt4-app/app/components/empleados/TotalesEmpleados.vue b/nuxt4-app/app/components/empleados/TotalesEmpleados.vue
index 094e529..164b91d 100644
--- a/nuxt4-app/app/components/empleados/TotalesEmpleados.vue
+++ b/nuxt4-app/app/components/empleados/TotalesEmpleados.vue
@@ -28,7 +28,7 @@
 
     <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="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-4">
           <div class="flex items-center gap-3 mb-2">
             <div class="p-2 rounded-lg bg-blue-500/20">
@@ -96,6 +96,40 @@
             de {{ contadores?.total_empleados || 0 }} totales
           </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-emerald-500/20">
+              <div class="i-lucide-wallet text-emerald-400 text-xl"></div>
+            </div>
+            <div>
+              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Total Pagado Planillas</div>
+              <div class="text-2xl font-bold text-emerald-400">
+                {{ formatCurrency(data.total_pagado_planillas || 0) }}
+              </div>
+            </div>
+          </div>
+          <div class="text-xs text-[var(--brand-text-muted)] mt-2">
+            en planillas de pago
+          </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-cyan-500/20">
+              <div class="i-lucide-coins text-cyan-400 text-xl"></div>
+            </div>
+            <div>
+              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Total Precios Tareas</div>
+              <div class="text-2xl font-bold text-cyan-400">
+                {{ formatCurrency(data.total_precios_tareas || 0) }}
+              </div>
+            </div>
+          </div>
+          <div class="text-xs text-[var(--brand-text-muted)] mt-2">
+            suma de precios asignados
+          </div>
+        </div>
       </div>
 
       <!-- Promedio por Empleado -->
@@ -132,6 +166,8 @@ const props = defineProps<{
     total_horas_trabajadas: number
     total_dias_asistencia: number
     total_tareas: number
+    total_pagado_planillas: number
+    total_precios_tareas: number
   }
   contadores?: {
     total_empleados?: number
@@ -168,6 +204,15 @@ const formatNumber = (value: number, decimals: number = 2) => {
   }).format(value)
 }
 
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat('es-HN', {
+    style: 'currency',
+    currency: 'HNL',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value)
+}
+
 async function copiarTexto() {
   const footer = `
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@@ -186,6 +231,11 @@ async function copiarTexto() {
    Total Tareas Realizadas: ${formatNumber(props.data.total_tareas || 0, 0)} tareas
    Empleados Activos: ${props.contadores?.empleados_filtrados || 0}
 
+💰 TOTALES MONETARIOS:
+   Total Pagado en Planillas: ${formatCurrency(props.data.total_pagado_planillas || 0)}
+   Total Precios de Tareas: ${formatCurrency(props.data.total_precios_tareas || 0)}
+   Diferencia: ${formatCurrency((props.data.total_pagado_planillas || 0) - (props.data.total_precios_tareas || 0))}
+
 📈 PROMEDIO POR EMPLEADO:
    Horas por Empleado: ${formatNumber(promedioHorasPorEmpleado.value)} hrs
    Días por Empleado: ${formatNumber(promedioDiasPorEmpleado.value, 1)} días