Feat: Implementar página de Informe de Empleados completa

- 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)

nuxt4-app/app/components/empleados/TotalesEmpleados.vue

@@ -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>

nuxt4-app/app/pages/informe-empleados.vue

@@ -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>