Feat: Implementar página de Informe de Empleados completa
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m0s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m0s
- Crear 5 queries SQL en Metabase para datos de empleados: * Contadores generales (horas, días, tareas) * Lista de empleados con totales agregados * Detalle de tareas realizadas * Detalle de asistencias con cálculo de horas * Opciones de filtros disponibles - Implementar backend API endpoint /api/metabase/informe-empleados * Soporte para filtros por fecha, empleados, títulos de tareas y planillas * Ejecución paralela de queries con manejo de errores * Transformación de datos de Metabase a formato consumible - Crear componente TotalesEmpleados.vue * Visualización de métricas principales (horas, días, tareas) * Cálculo de promedios por empleado * Funcionalidad de copiar texto/JSON - Implementar página informe-empleados.vue * Layout tipo informe con selector de fechas * Filtros avanzados por empleado, títulos de tareas y planillas * Tabla integrada de empleados con métricas clave * Estados de carga, error y bienvenida * Detección de cambios pendientes - Actualizar configuración de queries en metabase-queries.ts Estructura trabajada: - clientes (empleado = true) - asistencias (con cálculo de horas trabajadas) - tareas_realizadas (con títulos y planillas) - planillas (con totales y rangos de fechas)
This commit is contained in:
203
nuxt4-app/app/components/empleados/TotalesEmpleados.vue
Normal file
203
nuxt4-app/app/components/empleados/TotalesEmpleados.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user