Escenario · Aplicación web interna · Recursos humanos

Los recursos humanos,
fuera de las hojas de cálculo.

Una empresa en crecimiento que gestiona asistencia, vacaciones y evaluaciones entre archivos Excel, emails y mensajes. Una aplicación web interna que lo reúne todo, con aprobaciones claras e informes listos cuando hacen falta.

Tipo de proyectoAplicación web interna
SectorRecursos humanos
Plazos habituales10–14 semanas
●Escenario
aplicación web · gestión de RR. HH.
Panel de RR. HH.
Resumen · julio 2025
EN VIVO
PRESENTES
187
de 214 en total
VACACIONES HOY
12
aprobadas
EVALUACIONES
34
por vencer
HORAS ADMIN
↓
vs año anterior
ASISTENCIA · ÚLTIMOS 6 MESES
Feb
Mar
Apr
May
Jun
Jul
SOLICITUDES DE VACACIONES
L
Empleado A
✓ ok
M
Empleado B
⏳ pend.
A
Empleado C
✓ ok

Escenario web app — gestión de RR. HH. a medida

150 personas gestionadas
con tres herramientas que no se hablan.

El escenario: una empresa en pleno crecimiento que supera los 150 empleados, cuando el equipo de RR. HH. levanta la mano: el sistema ya no aguanta. La asistencia se apunta en una hoja de Google compartida, las vacaciones se piden por email, las evaluaciones son un Excel por departamento y los informes mensuales para la dirección requieren un par de días de trabajo manual juntando fuentes distintas.

Con las próximas contrataciones el caos sería inmanejable. RR. HH. pasa la mayor parte del tiempo en tareas administrativas repetitivas en lugar de dedicarse a la selección, el bienestar y el desarrollo de las personas.

No hace falta un software de RR. HH. genérico que se configura de mil maneras: hace falta una herramienta pensada para los procesos reales de la empresa, conectada a los sistemas existentes y tan sencilla que todos la usen sin formación.

«Cada lunes por la mañana paso dos horas comprobando quién está de vacaciones, quién teletrabaja y quién tiene horas extra por recuperar. Dos horas con datos que deberían verse en un segundo.»

— Lo que oigo a menudo a los responsables de RR. HH.
Escenario Web app interna de RR. HH.: asistencia, vacaciones, evaluaciones, informes (ejemplo)
Stack React + TypeScript · Laravel · MySQL · Redis
Accesos Admin RR. HH. · Manager · Empleado (RBAC)
Integraciones Slack · Google Calendar · Exportación PDF/CSV
Duración típica 10–12 semanas
Etiquetas
React TypeScript Laravel RBAC visualización de datos exportación PDF Slack API

Requisitos de la plataforma de RR. HH. corporativa

Una única fuente de verdad.
Tres niveles de acceso.

Gestión de asistencia y fichajes en tiempo real

Cada empleado tiene que poder registrar entrada, salida y modalidad (oficina / teletrabajo / viaje) desde cualquier dispositivo. RR. HH. ve el estado de todo el equipo actualizado al minuto, con alertas automáticas por ausencias no justificadas.

Flujo de vacaciones y permisos con aprobación multinivel

El empleado pide vacaciones desde su área. La solicitud va a su manager directo (primer nivel) y después a RR. HH. (segundo nivel). Aviso automático por Slack en cada cambio de estado. Calendario compartido para ver las ausencias del equipo antes de aprobar.

Evaluaciones de desempeño estructuradas con ciclos configurables

RR. HH. configura los ciclos de evaluación (semestral / anual), los objetivos por puesto y las plantillas de valoración. Manager y empleado rellenan sus secciones de forma asíncrona. Los resultados agregados alimentan el panel de la dirección.

Informes automáticos con exportación PDF y CSV

Los informes mensuales (asistencia, horas extra, vacaciones pendientes, plantilla por departamento) tienen que generarse en un clic, no en dos días. Exportación en PDF con la marca de la empresa para la dirección y CSV para nóminas. Programación automática con envío por email el día uno de cada mes.

RBAC granular: Admin RR. HH., Manager, Empleado

Tres roles distintos con permisos configurables. El Admin de RR. HH. lo ve todo y puede modificar cualquier registro. El Manager ve y aprueba solo a su equipo. El Empleado accede solo a sus propios datos. Los permisos se comprueban tanto en el frontend como en la API: ninguna confianza implícita en el cliente.

Retos técnicos de un sistema de gestión de recursos humanos

Datos sensibles, lógica compleja,
cero margen de error.

Una plataforma de RR. HH. maneja datos personales, nóminas y evaluaciones confidenciales. Cada fallo no es una molestia: es un problema legal o de confianza. Los retos son de arquitectura antes que de código.

01

RBAC: permisos coherentes entre API e interfaz

El riesgo clásico es una interfaz que oculta botones mientras la API sigue respondiendo a peticiones no autorizadas. La solución son las policies de Laravel (Gate + Policy), que usa el backend y que también se exponen como endpoint /me/permissions: el frontend en React construye la interfaz en consecuencia sin duplicar la lógica de permisos.

02

Concurrencia en las solicitudes de vacaciones

Dos managers aprueban la misma solicitud a la vez, o un empleado envía dos solicitudes que se solapan en el mismo periodo. Solución: transacciones MySQL con bloqueo SELECT ... FOR UPDATE sobre la tabla de saldos de vacaciones, más una validación en la API que comprueba los días disponibles dentro de la misma transacción atómica.

03

Informes PDF con datos agregados en tiempo real

Generar un PDF con cientos de empleados, asistencia mensual y horas agregadas puede tardar decenas de segundos, demasiado para una respuesta inmediata. Solución: un job en cola con Laravel Horizon (Redis), aviso por Slack o email cuando el informe está listo y un archivo temporal en un almacenamiento compatible con S3 con enlace firmado válido 24 horas.

04

Sincronización bidireccional con Google Calendar

Las vacaciones aprobadas tienen que aparecer en el calendario de Google de la empresa sin duplicados ni conflictos si se modifican por cualquiera de los dos lados. Un webhook de Google Calendar actualiza la base de datos y un job de conciliación cada 15 minutos resuelve los conflictos, con la plataforma de RR. HH. como fuente de verdad.

05

RGPD: separación de los datos sensibles de desempeño

Las evaluaciones son datos sensibles que no deben verse en todo el equipo de RR. HH., solo el responsable directo, el empleado y el administrador, con accesos registrados. Se usan una tabla separada y cifrado a nivel de campo (AES-256) para los comentarios, con una clave ligada al usuario autorizado.

Proceso de desarrollo de la web app de RR. HH.

10–12 semanas,
del Excel a la puesta en marcha.

Semanas 1–2
Discovery: mapear los procesos reales, no los teóricos

Entrevistas por separado con el personal de RR. HH., algunos responsables de departamento y una muestra de empleados. El objetivo: entender cómo se gestionan de verdad la asistencia y las vacaciones, no cómo deberían gestionarse. Siempre salen muchos pequeños procesos informales (mensajes de WhatsApp, recordatorios personales, emails con todos en copia) que ningún requisito escrito recogería. Se convierten en los casos límite que el sistema tiene que contemplar.

→ Entrega: mapa de procesos actuales · casos límite documentados · wireframe de navegación
Semanas 3–5
Backend: API Laravel, RBAC y modelo de datos

Backend en Laravel con autenticación Sanctum, RBAC con policies detalladas y las tres entidades principales: asistencia, solicitudes de vacaciones y ciclos de evaluación. Cada endpoint devuelve los permisos del usuario actual, así el frontend en React no necesita llamadas aparte para saber qué mostrar. Base de datos MySQL con índices pensados para los informes agregados.

→ API REST · migraciones · pruebas PHPUnit · Sanctum + RBAC
Semanas 6–8
Frontend React: panel, flujos y visualización de datos

Interfaz en React con TypeScript, React Query para el estado del servidor y Recharts para los gráficos. Tres layouts para los tres roles —Admin de RR. HH., Manager, Empleado— que se adaptan a los permisos recibidos de la API. El flujo de vacaciones es el módulo más complejo: varios estados (borrador → enviada → aprobación del manager → aprobación de RR. HH. → aprobada/rechazada) con aviso en Slack en cada paso.

→ React 18 · TypeScript · React Query · Recharts · Slack Webhook API
Semana 9
Motor de informes: PDF asíncrono y programación

Generador de informes con Laravel Horizon (Redis) para las colas. Cada informe mensual es un job en segundo plano: agrega los datos, compone el PDF con DomPDF (plantilla con el logo y los colores de la empresa), lo guarda en MinIO (S3 propio), crea un enlace firmado válido 24 horas y avisa por email y Slack. El job se lanza solo el día 1 de cada mes a las 7:00.

→ Laravel Horizon · Redis · DomPDF · MinIO · job programado
Semanas 10–11
UAT, migración de datos históricos y go-live gradual

Dos semanas de pruebas de aceptación con un grupo de usuarios de cada rol. Migración de los datos históricos desde los Excel con un script PHP de limpieza. Puesta en marcha por departamentos: primero un equipo, luego los demás y por último todos. Dos semanas en paralelo, con las herramientas antiguas disponibles solo en lectura.

→ pruebas con usuarios reales · datos históricos migrados · lanzamiento en 3 fases · sin cortes

Solución técnica: RBAC y panel en React

Tres módulos, una única plataforma.
Cero silos.

La plataforma se construye en torno a tres módulos independientes pero integrados, cada uno diseñado a partir de cómo trabaja de verdad la gente, no de un modelo abstracto.

Módulo 01 / 03

Fichajes y asistencia: panel en tiempo real

Cada empleado entra desde el navegador o el móvil y selecciona la modalidad del día (oficina, teletrabajo, viaje, baja). El sistema registra la hora y actualiza el panel de RR. HH. en tiempo real mediante polling cada 60 segundos con React Query. Los managers ven solo a su equipo; el Admin de RR. HH. lo ve todo con filtros por departamento, sede y modalidad. Las anomalías (ausencia no justificada a las 10:00) generan una alerta automática por Slack al manager responsable.

// Hook React para asistencia en tiempo real con React Query function useTeamPresenze( teamId: string ) { return useQuery({ queryKey: ['presenze', teamId], queryFn: () => api.get(`/teams/${teamId}/presenze/oggi`), refetchInterval: 60_000, // polling cada 60 s staleTime: 30_000, // permisos ya en el payload: ninguna llamada extra select: (data) => data.filter( (p) => hasPermission(p, 'view') ), }); }
Módulo 02 / 03

Flujo de vacaciones: de 3 emails a 1 clic

La solicitud de vacaciones pasa por 5 estados con pasos explícitos y avisos automáticos. Antes de enviarla, el empleado ve el calendario de su equipo para evitar solapamientos. El manager recibe un aviso en Slack con el enlace directo para aprobar, sin tener que buscar la solicitud. Si no responde en 48 horas, RR. HH. recibe un recordatorio. Objetivo: casi todas las solicitudes resueltas en 24 horas, en lugar de los días que tarda un proceso por email.

Estado de la solicitud
Solicitud enviada
Aprobada por el manager
Pendiente de RR. HH. ← ahora
Aprobación final
Módulo 03 / 03

Evaluaciones de desempeño: estructuradas, asíncronas, confidenciales

RR. HH. configura el ciclo de evaluación: periodo, plantillas por rol (de Junior a Lead), objetivos de la empresa y plazos. Manager y empleado rellenan sus secciones por separado: ninguno ve la evaluación del otro hasta que ambas se cierran. Los comentarios se cifran a nivel de campo (AES-256), así ni un acceso directo a la base de datos los expone. Los datos agregados —medias por departamento, distribución de las evaluaciones, tendencia frente al ciclo anterior— alimentan el panel de la dirección con gráficos interactivos.

Nota RGPD: los datos de evaluación requieren medidas de seguridad reforzadas según el art. 25 del RGPD (privacidad desde el diseño). El cifrado a nivel de campo es una medida técnica que hay que documentar en el registro de actividades de tratamiento de la empresa.

Stack tecnológico React TypeScript Laravel

Decisiones deliberadas,
no casuales.

React + TypeScript
Laravel
MySQL
Redis + Horizon
React Query
Recharts
Slack Webhook API
Google Calendar API
DomPDF
MinIO (S3)
PHPUnit + Pest
Vite + ESBuild

¿Por qué Laravel y no Node.js?

Laravel tiene un sistema de policies y gates maduro para el RBAC, un ORM (Eloquent) que gestiona bien las relaciones entre equipos, roles y permisos, y Laravel Horizon para las colas, todo ya integrado y probado. En Node.js el mismo sistema obligaría a juntar librerías separadas con menos garantías de coherencia. Para una web app interna con datos sensibles, la madurez del ecosistema cuenta.

¿Por qué React Query y no Redux?

El estado de la aplicación es casi por completo estado del servidor: datos que viven en el backend y deben estar sincronizados. React Query gestiona caché, refetch, UI optimista e invalidación de forma declarativa, sin el boilerplate de Redux. El resultado es una interfaz que parece en tiempo real con la sencillez de una llamada a la API.

Objetivos de ejemplo — web app de RR. HH.

RR. HH. deja
de hacer administración.

Cifras de ejemplo, no resultados de un cliente: objetivos realistas para un escenario como este, a medir unos meses después de la puesta en marcha completa frente al mismo periodo anterior.

−50%
Horas admin de RR. HH.
objetivo de tiempo administrativo ahorrado
−80%
Errores de asistencia
objetivo de menos correcciones manuales
90%+
Vacaciones tramitadas <24 h
objetivo, frente a los días de antes
5 min
Generación del informe mensual
en lugar de días de trabajo manual
95%+
Tasa de adopción
objetivo de adopción tras el primer mes
4.5/5
Satisfacción de los usuarios
objetivo en la encuesta interna

«El primer informe mensual llega solo, el día 1 a las 7:01, con un aviso en Slack.» Es el momento que da sentido a todo el proyecto.

— El objetivo concreto del módulo de informes

Aprendizajes del desarrollo de la web app de RR. HH.

Lo que aplico
en cada proyecto así.

→

Entrevistar a los usuarios antes de escribir código no es un gasto: es un ahorro. Los procesos informales que salen en las entrevistas son errores que se evitan en producción. Cada hora de análisis ahorra varias de desarrollo y pruebas.

→

El RBAC tiene que vivir en el backend, no en la interfaz. Ocultar un botón en el frontend no es seguridad: es cosmética. El sistema de Policies de Laravel que expone los permisos como datos permitió tener una interfaz que se adapta dinámicamente sin duplicar la lógica de autorización en el código React.

→

La puesta en marcha gradual por departamentos siempre compensa la complejidad extra. Empezar con un solo equipo saca a la luz los problemas de usabilidad, no de código, antes de que afecten a toda la empresa.

→

Los jobs en segundo plano cambian la experiencia de forma desproporcionada. Pasar de un PDF que se genera mientras el usuario espera decenas de segundos a un aviso cuando está listo mejora mucho la satisfacción, con el mismo resultado.

→

El periodo en paralelo es clave para la confianza. Dejar los Excel antiguos en solo lectura un par de semanas tras el lanzamiento derriba la resistencia al cambio: la gente puede "comprobar" que los datos están bien, y luego deja de hacerlo.

¿Tienes un proceso interno que merece una herramienta a medida?

Excel y el email funcionan hasta que creces. Luego hacen falta herramientas que crezcan contigo.

¿Tienes en mente un proyecto parecido?

Cuéntamelo: partimos de objetivos y prioridades, y la primera llamada es gratuita.