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>
|
||||||
447
nuxt4-app/app/pages/informe-empleados.vue
Normal file
447
nuxt4-app/app/pages/informe-empleados.vue
Normal file
@@ -0,0 +1,447 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex flex-col gap-8">
|
||||||
|
<!-- Loading State -->
|
||||||
|
<UCard v-if="loading && !data" class="brand-card border border-transparent">
|
||||||
|
<div class="flex flex-col items-center justify-center gap-4 py-10 text-[var(--brand-text-muted)]">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="inline-flex h-8 w-8 animate-spin rounded-full border-2 border-[var(--brand-primary-strong)] border-t-transparent align-middle" aria-hidden="true" />
|
||||||
|
<span class="text-sm uppercase tracking-[0.3em]">Cargando datos...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
<!-- Error State -->
|
||||||
|
<div v-else-if="error" class="rounded-lg border border-red-500/40 bg-red-500/18 p-4 text-sm text-red-200">
|
||||||
|
<p>Error al cargar datos: {{ error }}</p>
|
||||||
|
<UButton class="mt-4" :loading="loading" :disabled="loading" @click="loadData" color="primary">
|
||||||
|
Reintentar
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Initial State - No data loaded yet -->
|
||||||
|
<template v-else-if="!data && !loading">
|
||||||
|
<!-- Card de Filtros -->
|
||||||
|
<UCard class="brand-card border border-transparent">
|
||||||
|
<template #header>
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xl font-bold brand-section-title">Filtros y Configuraciones</h2>
|
||||||
|
<p class="text-xs text-[var(--brand-text-muted)] mt-1">
|
||||||
|
Aplicados a asistencias, tareas y planillas de empleados
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<DateRangeSelector
|
||||||
|
:selected-preset="selectedPreset"
|
||||||
|
:fecha-desde="fechaDesde"
|
||||||
|
:fecha-hasta="fechaHasta"
|
||||||
|
@update:selected-preset="onUpdatePreset"
|
||||||
|
@update:fecha-desde="onUpdateFechaDesde"
|
||||||
|
@update:fecha-hasta="onUpdateFechaHasta"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Filtros Avanzados -->
|
||||||
|
<div class="mt-6 space-y-4">
|
||||||
|
<h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>
|
||||||
|
|
||||||
|
<!-- Selector de Empleados -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Empleados</label>
|
||||||
|
<ClienteMultiSelector
|
||||||
|
:selected-ids="selectedEmpleadoIds"
|
||||||
|
:empleados-only="true"
|
||||||
|
@update:selected-ids="selectedEmpleadoIds = $event"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Selector de Títulos de Tareas -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Títulos de Tareas</label>
|
||||||
|
<SimpleMultiSelector
|
||||||
|
:selected-items="selectedTitulosTareas"
|
||||||
|
:items="opcionesFiltros.titulos_tareas"
|
||||||
|
icon="i-lucide-clipboard-check"
|
||||||
|
placeholder="Todos los títulos de tareas"
|
||||||
|
item-label="título de tarea"
|
||||||
|
items-label="títulos de tareas"
|
||||||
|
@update:selected-items="selectedTitulosTareas = $event"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Selector de Títulos de Planillas -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Títulos de Planillas</label>
|
||||||
|
<SimpleMultiSelector
|
||||||
|
:selected-items="selectedTitulosPlanillas"
|
||||||
|
:items="opcionesFiltros.titulos_planillas"
|
||||||
|
icon="i-lucide-file-text"
|
||||||
|
placeholder="Todos los títulos de planillas"
|
||||||
|
item-label="título de planilla"
|
||||||
|
items-label="títulos de planillas"
|
||||||
|
@update:selected-items="selectedTitulosPlanillas = $event"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||||
|
<div class="text-xs text-[var(--brand-text-muted)]">
|
||||||
|
Rango activo: {{ rangoLegible }}
|
||||||
|
</div>
|
||||||
|
<UButton
|
||||||
|
:loading="loading"
|
||||||
|
:disabled="loading"
|
||||||
|
:ui="{ base: 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)] border border-[var(--brand-primary)] hover:bg-[var(--brand-primary)] hover:border-[var(--brand-accent)] disabled:opacity-50 disabled:cursor-not-allowed' }"
|
||||||
|
size="sm"
|
||||||
|
@click="loadData"
|
||||||
|
>
|
||||||
|
<template #leading>
|
||||||
|
<UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
|
||||||
|
</template>
|
||||||
|
Actualizar
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
<!-- Mensaje de bienvenida -->
|
||||||
|
<UCard class="brand-card border border-transparent">
|
||||||
|
<div class="flex flex-col items-center justify-center gap-4 py-16 text-center">
|
||||||
|
<div class="rounded-full bg-[var(--brand-primary-strong)]/10 p-6">
|
||||||
|
<UIcon name="i-lucide-users" class="w-12 h-12 text-[var(--brand-primary-strong)]" />
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<h3 class="text-lg font-semibold text-[var(--brand-text)]">
|
||||||
|
Informe de Empleados
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-[var(--brand-text-muted)] max-w-md">
|
||||||
|
Configura los filtros y haz clic en el botón "Actualizar" para cargar el informe detallado de empleados
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<template v-else-if="data">
|
||||||
|
<!-- Card de Filtros -->
|
||||||
|
<UCard
|
||||||
|
:class="[
|
||||||
|
'brand-card border transition-all duration-300',
|
||||||
|
hasPendingChanges
|
||||||
|
? 'border-yellow-500/60'
|
||||||
|
: 'border-transparent'
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xl font-bold brand-section-title">Filtros y Configuraciones</h2>
|
||||||
|
<p class="text-xs text-[var(--brand-text-muted)] mt-1">
|
||||||
|
Aplicados a asistencias, tareas y planillas de empleados
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Alerta amarilla cuando hay cambios pendientes -->
|
||||||
|
<UAlert
|
||||||
|
v-if="hasPendingChanges"
|
||||||
|
color="warning"
|
||||||
|
variant="solid"
|
||||||
|
icon="i-lucide-info"
|
||||||
|
title="Cambios pendientes"
|
||||||
|
description="Has modificado los filtros. Haz clic en 'Actualizar' para aplicar los cambios."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<DateRangeSelector
|
||||||
|
:selected-preset="selectedPreset"
|
||||||
|
:fecha-desde="fechaDesde"
|
||||||
|
:fecha-hasta="fechaHasta"
|
||||||
|
@update:selected-preset="onUpdatePreset"
|
||||||
|
@update:fecha-desde="onUpdateFechaDesde"
|
||||||
|
@update:fecha-hasta="onUpdateFechaHasta"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Filtros Avanzados -->
|
||||||
|
<div class="mt-6 space-y-4">
|
||||||
|
<h3 class="text-sm font-semibold text-[var(--brand-text)]">Filtros Avanzados</h3>
|
||||||
|
|
||||||
|
<!-- Selector de Empleados -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Empleados</label>
|
||||||
|
<ClienteMultiSelector
|
||||||
|
:selected-ids="selectedEmpleadoIds"
|
||||||
|
:empleados-only="true"
|
||||||
|
@update:selected-ids="selectedEmpleadoIds = $event"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Selector de Títulos de Tareas -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Títulos de Tareas</label>
|
||||||
|
<SimpleMultiSelector
|
||||||
|
:selected-items="selectedTitulosTareas"
|
||||||
|
:items="opcionesFiltros.titulos_tareas"
|
||||||
|
icon="i-lucide-clipboard-check"
|
||||||
|
placeholder="Todos los títulos de tareas"
|
||||||
|
item-label="título de tarea"
|
||||||
|
items-label="títulos de tareas"
|
||||||
|
@update:selected-items="selectedTitulosTareas = $event"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Selector de Títulos de Planillas -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium mb-2 text-[var(--brand-text)]">Títulos de Planillas</label>
|
||||||
|
<SimpleMultiSelector
|
||||||
|
:selected-items="selectedTitulosPlanillas"
|
||||||
|
:items="opcionesFiltros.titulos_planillas"
|
||||||
|
icon="i-lucide-file-text"
|
||||||
|
placeholder="Todos los títulos de planillas"
|
||||||
|
item-label="título de planilla"
|
||||||
|
items-label="títulos de planillas"
|
||||||
|
@update:selected-items="selectedTitulosPlanillas = $event"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||||
|
<div class="text-xs text-[var(--brand-text-muted)]">
|
||||||
|
Rango activo: {{ rangoLegible }}
|
||||||
|
</div>
|
||||||
|
<UButton
|
||||||
|
:loading="loading"
|
||||||
|
:disabled="loading"
|
||||||
|
:ui="{ base: hasPendingChanges ? 'bg-yellow-600 text-white border border-yellow-500 hover:bg-yellow-700 disabled:opacity-50' : 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)] border border-[var(--brand-primary)] hover:bg-[var(--brand-primary)] hover:border-[var(--brand-accent)] disabled:opacity-50' }"
|
||||||
|
size="sm"
|
||||||
|
@click="loadData"
|
||||||
|
>
|
||||||
|
<template #leading>
|
||||||
|
<UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
|
||||||
|
</template>
|
||||||
|
Actualizar
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
<!-- Secciones de Totales -->
|
||||||
|
<EmpleadosTotalesEmpleados
|
||||||
|
v-if="data.contadores"
|
||||||
|
:data="data.contadores"
|
||||||
|
:contadores="data.contadores"
|
||||||
|
:rango-legible="rangoLegible"
|
||||||
|
:last-updated="lastUpdated"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Lista de Empleados -->
|
||||||
|
<UCard v-if="data.listaEmpleados && data.listaEmpleados.length > 0" class="brand-card border border-transparent">
|
||||||
|
<template #header>
|
||||||
|
<h2 class="text-xl font-bold brand-section-title">Lista de Empleados</h2>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full text-sm">
|
||||||
|
<thead class="border-b border-[var(--brand-border)]">
|
||||||
|
<tr class="text-[var(--brand-text-muted)]">
|
||||||
|
<th class="text-left py-3 px-2">Empleado</th>
|
||||||
|
<th class="text-left py-3 px-2">Cédula</th>
|
||||||
|
<th class="text-right py-3 px-2">Horas</th>
|
||||||
|
<th class="text-right py-3 px-2">Días</th>
|
||||||
|
<th class="text-right py-3 px-2">Tareas</th>
|
||||||
|
<th class="text-right py-3 px-2">Ubicación</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="empleado in data.listaEmpleados"
|
||||||
|
:key="empleado.empleado_id"
|
||||||
|
class="border-b border-[var(--brand-border)] hover:bg-[var(--brand-surface)] transition-colors"
|
||||||
|
>
|
||||||
|
<td class="py-3 px-2 font-medium text-[var(--brand-text)]">{{ empleado.empleado_nombre }}</td>
|
||||||
|
<td class="py-3 px-2 text-[var(--brand-text-muted)]">{{ empleado.empleado_cedula || '—' }}</td>
|
||||||
|
<td class="py-3 px-2 text-right text-blue-400 font-mono">{{ formatNumber(empleado.total_horas || 0) }}</td>
|
||||||
|
<td class="py-3 px-2 text-right text-green-400 font-mono">{{ formatNumber(empleado.dias_asistencia || 0, 0) }}</td>
|
||||||
|
<td class="py-3 px-2 text-right text-purple-400 font-mono">{{ formatNumber(empleado.tareas_realizadas || 0, 0) }}</td>
|
||||||
|
<td class="py-3 px-2 text-right text-[var(--brand-text-muted)] text-xs">{{ empleado.empleado_ubicacion || '—' }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useInformeLayout } from '~/composables/useInformeLayout'
|
||||||
|
|
||||||
|
// Define page metadata
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'informe',
|
||||||
|
title: 'Informe Empleados'
|
||||||
|
})
|
||||||
|
|
||||||
|
// Get page sections from layout
|
||||||
|
const { pageSections } = useInformeLayout()
|
||||||
|
|
||||||
|
// Reactive state
|
||||||
|
const data = ref<any>(null)
|
||||||
|
const loading = ref(false)
|
||||||
|
const error = ref<string | null>(null)
|
||||||
|
const lastUpdated = ref<string>('')
|
||||||
|
|
||||||
|
// Filtros básicos
|
||||||
|
type PresetValue =
|
||||||
|
| '' | 'custom' | 'hoy' | 'semana' | 'mes' | 'ytd'
|
||||||
|
| 'cosecha-20-21' | 'cosecha-21-22' | 'cosecha-22-23'
|
||||||
|
| 'cosecha-23-24' | 'cosecha-24-25' | 'cosecha-25-26'
|
||||||
|
|
||||||
|
const selectedPreset = ref<PresetValue>('hoy')
|
||||||
|
const fechaDesde = ref<string | null>(null)
|
||||||
|
const fechaHasta = ref<string | null>(null)
|
||||||
|
|
||||||
|
// Filtros avanzados
|
||||||
|
const selectedEmpleadoIds = ref<number[]>([])
|
||||||
|
const selectedTitulosTareas = ref<string[]>([])
|
||||||
|
const selectedTitulosPlanillas = ref<string[]>([])
|
||||||
|
|
||||||
|
// Opciones de filtros disponibles (desde Metabase)
|
||||||
|
const opcionesFiltros = ref({
|
||||||
|
titulos_tareas: [] as string[],
|
||||||
|
titulos_planillas: [] as string[]
|
||||||
|
})
|
||||||
|
|
||||||
|
// Filtros aplicados (los que se usaron en la última carga de datos)
|
||||||
|
const appliedFilters = ref<{
|
||||||
|
fechaDesde: string | null
|
||||||
|
fechaHasta: string | null
|
||||||
|
empleadoIds: number[]
|
||||||
|
titulosTareas: string[]
|
||||||
|
titulosPlanillas: string[]
|
||||||
|
} | null>(null)
|
||||||
|
|
||||||
|
// Computed
|
||||||
|
const rangoLegible = computed(() => {
|
||||||
|
if (!fechaDesde.value && !fechaHasta.value) return 'Sin filtro de fecha'
|
||||||
|
const f = fechaDesde.value ?? '—'
|
||||||
|
const t = fechaHasta.value ?? '—'
|
||||||
|
return `${f} → ${t}`
|
||||||
|
})
|
||||||
|
|
||||||
|
// Detectar si hay cambios pendientes sin aplicar
|
||||||
|
const hasPendingChanges = computed(() => {
|
||||||
|
// Si no hay datos cargados, no hay cambios pendientes
|
||||||
|
if (!appliedFilters.value) return false
|
||||||
|
|
||||||
|
// Comparar filtros actuales con los aplicados
|
||||||
|
return (
|
||||||
|
fechaDesde.value !== appliedFilters.value.fechaDesde ||
|
||||||
|
fechaHasta.value !== appliedFilters.value.fechaHasta ||
|
||||||
|
JSON.stringify(selectedEmpleadoIds.value) !== JSON.stringify(appliedFilters.value.empleadoIds) ||
|
||||||
|
JSON.stringify(selectedTitulosTareas.value) !== JSON.stringify(appliedFilters.value.titulosTareas) ||
|
||||||
|
JSON.stringify(selectedTitulosPlanillas.value) !== JSON.stringify(appliedFilters.value.titulosPlanillas)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
async function loadData() {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
const response = await $fetch('/api/metabase/informe-empleados', {
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
fecha_desde: fechaDesde.value,
|
||||||
|
fecha_hasta: fechaHasta.value,
|
||||||
|
empleado_ids: selectedEmpleadoIds.value,
|
||||||
|
titulos_tareas: selectedTitulosTareas.value,
|
||||||
|
titulos_planillas: selectedTitulosPlanillas.value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
data.value = response
|
||||||
|
lastUpdated.value = new Date().toLocaleString('es-HN')
|
||||||
|
|
||||||
|
// Update opciones de filtros if available
|
||||||
|
if (response.opcionesFiltros) {
|
||||||
|
opcionesFiltros.value = response.opcionesFiltros
|
||||||
|
}
|
||||||
|
|
||||||
|
// Guardar los filtros aplicados
|
||||||
|
appliedFilters.value = {
|
||||||
|
fechaDesde: fechaDesde.value,
|
||||||
|
fechaHasta: fechaHasta.value,
|
||||||
|
empleadoIds: [...selectedEmpleadoIds.value],
|
||||||
|
titulosTareas: [...selectedTitulosTareas.value],
|
||||||
|
titulosPlanillas: [...selectedTitulosPlanillas.value]
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e.message || 'Error desconocido'
|
||||||
|
console.error('Error loading data:', e)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadOpcionesFiltros() {
|
||||||
|
try {
|
||||||
|
const response = await $fetch('/api/metabase/informe-empleados', {
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
fecha_desde: null,
|
||||||
|
fecha_hasta: null,
|
||||||
|
empleado_ids: [],
|
||||||
|
titulos_tareas: [],
|
||||||
|
titulos_planillas: []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.opcionesFiltros) {
|
||||||
|
opcionesFiltros.value = response.opcionesFiltros
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error('Error loading opciones de filtros:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onUpdatePreset(preset: PresetValue) {
|
||||||
|
selectedPreset.value = preset
|
||||||
|
}
|
||||||
|
|
||||||
|
function onUpdateFechaDesde(fecha: string | null) {
|
||||||
|
fechaDesde.value = fecha
|
||||||
|
}
|
||||||
|
|
||||||
|
function onUpdateFechaHasta(fecha: string | null) {
|
||||||
|
fechaHasta.value = fecha
|
||||||
|
}
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lifecycle
|
||||||
|
onMounted(async () => {
|
||||||
|
// Set default preset to today
|
||||||
|
selectedPreset.value = 'hoy'
|
||||||
|
|
||||||
|
// Load opciones de filtros
|
||||||
|
await loadOpcionesFiltros()
|
||||||
|
|
||||||
|
// Do not load data automatically
|
||||||
|
})
|
||||||
|
</script>
|
||||||
183
nuxt4-app/server/api/metabase/informe-empleados.post.ts
Normal file
183
nuxt4-app/server/api/metabase/informe-empleados.post.ts
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
import { METABASE_QUERIES } from '../../config/metabase-queries'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Execute all informe empleados queries in parallel
|
||||||
|
* Returns data for the Informe de Empleados page
|
||||||
|
*/
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
const body = await readBody(event)
|
||||||
|
|
||||||
|
const {
|
||||||
|
fecha_desde = null,
|
||||||
|
fecha_hasta = null,
|
||||||
|
empleado_ids = [],
|
||||||
|
titulos_tareas = [],
|
||||||
|
titulos_planillas = []
|
||||||
|
} = body
|
||||||
|
|
||||||
|
try {
|
||||||
|
// First, get all cards to find our informe empleados queries
|
||||||
|
const allCards = await getMetabaseCards('all')
|
||||||
|
|
||||||
|
// Find our informe empleados queries by name using centralized config
|
||||||
|
const queryNames = METABASE_QUERIES.informe_empleados
|
||||||
|
|
||||||
|
const cards: Record<string, any> = {}
|
||||||
|
|
||||||
|
for (const [key, name] of Object.entries(queryNames)) {
|
||||||
|
const card = allCards.find((c: any) => c.name === name)
|
||||||
|
if (!card) {
|
||||||
|
console.warn(`[Informe Empleados] Query not found: ${name}`)
|
||||||
|
} else {
|
||||||
|
cards[key] = card
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build parameters array for Metabase queries
|
||||||
|
const buildParameters = () => {
|
||||||
|
const params = [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
target: ['variable', ['template-tag', 'fecha_desde']],
|
||||||
|
value: fecha_desde || ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
target: ['variable', ['template-tag', 'fecha_hasta']],
|
||||||
|
value: fecha_hasta || ''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// Solo agregar filtros opcionales si tienen valores (no vacíos)
|
||||||
|
if (empleado_ids && Array.isArray(empleado_ids) && empleado_ids.length > 0) {
|
||||||
|
params.push({
|
||||||
|
type: 'number',
|
||||||
|
target: ['variable', ['template-tag', 'empleado_ids']],
|
||||||
|
value: empleado_ids
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (titulos_tareas && Array.isArray(titulos_tareas) && titulos_tareas.length > 0) {
|
||||||
|
params.push({
|
||||||
|
type: 'text',
|
||||||
|
target: ['variable', ['template-tag', 'titulos_tareas']],
|
||||||
|
value: titulos_tareas
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (titulos_planillas && Array.isArray(titulos_planillas) && titulos_planillas.length > 0) {
|
||||||
|
params.push({
|
||||||
|
type: 'text',
|
||||||
|
target: ['variable', ['template-tag', 'titulos_planillas']],
|
||||||
|
value: titulos_planillas
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return params
|
||||||
|
}
|
||||||
|
|
||||||
|
const standardParams = buildParameters()
|
||||||
|
const emptyParams: any[] = [] // Para opciones_filtros que no requiere parámetros
|
||||||
|
|
||||||
|
// Execute all queries in parallel with error handling
|
||||||
|
const executeWithErrorHandling = async (name: string, cardId: number | undefined, parameters: any[], defaultValue: any) => {
|
||||||
|
if (!cardId) {
|
||||||
|
console.warn(`[Informe Empleados] No card ID for ${name}`)
|
||||||
|
return defaultValue
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log(`[Informe Empleados] Executing query: ${name} (ID: ${cardId})`)
|
||||||
|
const result = await executeCardQuery(cardId, parameters)
|
||||||
|
console.log(`[Informe Empleados] Query ${name} returned ${result.data?.rows?.length || 0} rows`)
|
||||||
|
return result
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error(`[Informe Empleados] Error executing ${name}:`, error.message)
|
||||||
|
return defaultValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const [
|
||||||
|
contadores,
|
||||||
|
listaEmpleados,
|
||||||
|
detalleTareas,
|
||||||
|
detalleAsistencias,
|
||||||
|
opcionesFiltros
|
||||||
|
] = await Promise.all([
|
||||||
|
executeWithErrorHandling('contadores', cards.contadores?.id, standardParams, { data: { rows: [[]], cols: [] } }),
|
||||||
|
executeWithErrorHandling('lista_empleados', cards.lista_empleados?.id, standardParams, { data: { rows: [], cols: [] } }),
|
||||||
|
executeWithErrorHandling('detalle_tareas', cards.detalle_tareas?.id, standardParams, { data: { rows: [], cols: [] } }),
|
||||||
|
executeWithErrorHandling('detalle_asistencias', cards.detalle_asistencias?.id, standardParams, { data: { rows: [], cols: [] } }),
|
||||||
|
executeWithErrorHandling('opciones_filtros', cards.opciones_filtros?.id, emptyParams, { data: { rows: [], cols: [] } })
|
||||||
|
])
|
||||||
|
|
||||||
|
// Transform Metabase responses to objects for easier frontend consumption
|
||||||
|
const transformSingleRow = (result: any) => {
|
||||||
|
if (!result.data?.rows?.[0] || !result.data?.cols) return {}
|
||||||
|
|
||||||
|
const row = result.data.rows[0]
|
||||||
|
const cols = result.data.cols
|
||||||
|
const obj: any = {}
|
||||||
|
|
||||||
|
cols.forEach((col: any, index: number) => {
|
||||||
|
obj[col.name] = row[index]
|
||||||
|
})
|
||||||
|
|
||||||
|
return obj
|
||||||
|
}
|
||||||
|
|
||||||
|
const transformMultipleRows = (result: any) => {
|
||||||
|
if (!result.data?.rows || !result.data?.cols) return []
|
||||||
|
|
||||||
|
const cols = result.data.cols
|
||||||
|
return result.data.rows.map((row: any[]) => {
|
||||||
|
const obj: any = {}
|
||||||
|
cols.forEach((col: any, index: number) => {
|
||||||
|
obj[col.name] = row[index]
|
||||||
|
})
|
||||||
|
return obj
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Transform opciones_filtros to a more usable format
|
||||||
|
const transformOpcionesFiltros = (result: any) => {
|
||||||
|
if (!result.data?.rows || !result.data?.cols) {
|
||||||
|
return {
|
||||||
|
titulos_tareas: [],
|
||||||
|
titulos_planillas: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = transformMultipleRows(result)
|
||||||
|
const opciones: any = {
|
||||||
|
titulos_tareas: [],
|
||||||
|
titulos_planillas: []
|
||||||
|
}
|
||||||
|
|
||||||
|
rows.forEach((row: any) => {
|
||||||
|
if (row.tipo_opcion === 'titulos_tareas') {
|
||||||
|
opciones.titulos_tareas.push(row.valor)
|
||||||
|
} else if (row.tipo_opcion === 'titulos_planillas') {
|
||||||
|
opciones.titulos_planillas.push(row.valor)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return opciones
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return all data in a structured format
|
||||||
|
return {
|
||||||
|
contadores: transformSingleRow(contadores),
|
||||||
|
listaEmpleados: transformMultipleRows(listaEmpleados),
|
||||||
|
detalleTareas: transformMultipleRows(detalleTareas),
|
||||||
|
detalleAsistencias: transformMultipleRows(detalleAsistencias),
|
||||||
|
opcionesFiltros: transformOpcionesFiltros(opcionesFiltros)
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('[API] Failed to execute informe empleados queries:', error)
|
||||||
|
throw createError({
|
||||||
|
statusCode: error.statusCode || 500,
|
||||||
|
statusMessage: error.statusMessage || 'Failed to execute informe empleados queries'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -57,6 +57,17 @@ export const METABASE_QUERIES = {
|
|||||||
opciones_filtros: 'Informe Comercios - Opciones de Filtros',
|
opciones_filtros: 'Informe Comercios - Opciones de Filtros',
|
||||||
contadores: 'Informe Comercios - Contadores de Filtros',
|
contadores: 'Informe Comercios - Contadores de Filtros',
|
||||||
detalle_ingresos: 'Informe Comercios - Detalle de Ingresos por Comercio'
|
detalle_ingresos: 'Informe Comercios - Detalle de Ingresos por Comercio'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Queries para Informe de Empleados
|
||||||
|
*/
|
||||||
|
informe_empleados: {
|
||||||
|
contadores: 'Informe Empleados - Contadores',
|
||||||
|
lista_empleados: 'Informe Empleados - Lista con Totales',
|
||||||
|
detalle_tareas: 'Informe Empleados - Detalle Tareas',
|
||||||
|
detalle_asistencias: 'Informe Empleados - Detalle Asistencias',
|
||||||
|
opciones_filtros: 'Informe Empleados - Opciones Filtros'
|
||||||
}
|
}
|
||||||
} as const
|
} as const
|
||||||
|
|
||||||
@@ -68,3 +79,4 @@ export type PanoramaQueryKey = keyof typeof METABASE_QUERIES.panorama
|
|||||||
export type InformeQueryKey = keyof typeof METABASE_QUERIES.informe
|
export type InformeQueryKey = keyof typeof METABASE_QUERIES.informe
|
||||||
export type ComparativaQueryKey = keyof typeof METABASE_QUERIES.comparativa
|
export type ComparativaQueryKey = keyof typeof METABASE_QUERIES.comparativa
|
||||||
export type InformeComerciosQueryKey = keyof typeof METABASE_QUERIES.informe_comercios
|
export type InformeComerciosQueryKey = keyof typeof METABASE_QUERIES.informe_comercios
|
||||||
|
export type InformeEmpleadosQueryKey = keyof typeof METABASE_QUERIES.informe_empleados
|
||||||
|
|||||||
Reference in New Issue
Block a user