Frontend responsive en Vite + React + TypeScript para gestionar requisiciones, aprobaciones, reclutamiento, SLA y capacidad del equipo de RRHH de GomezLee Marketing.

Ejecutar

Requiere Node.js 20.19+ o 22.12+.

npm install
npm run dev

Comandos de validación:

npm run lint
npm run check
npm run build
npm run preview

La aplicación se publica bajo /requisicion-vacantes/, configurado en vite.config.ts mediante:

base: '/requisicion-vacantes/'

Experiencias disponibles

Dirección de RRHH: tablero global, aprobaciones, detalle y audit trail, activación de reclutamiento, reportes con filtros y planeación de capacidad con reasignación.
Administración: cola financiera, detalle de salario y presupuesto, aprobación o rechazo final.
Coordinación / Reclutamiento: nueva requisición, borradores y estados, pipeline e historial de cada solicitud.
Acceso: pantalla de Google simulada. El botón permite entrar al prototipo; no realiza autenticación real.

El selector de rol del encabezado permite recorrer las tres experiencias mientras se valida el frontend.

Lógica representada

Flujo secuencial: Solicitante → RRHH → Administración → activación por Dirección de RRHH → reclutamiento.
El SLA inicia al enviar la requisición y separa tiempo de aprobación de tiempo de reclutamiento.
Solicitudes con varias vacantes generan IDs individuales dentro de un ID de grupo.
Solicitudes con fecha futura distante se evalúan como cumple / no cumple.
Semáforo SLA verde, amarillo y rojo.
Etapas: Búsqueda, 1.ª entrevista, 2.ª entrevista, Referencias, Exámenes médicos y Seleccionado.
Datos financieros ocultos para Coordinación.
Audit trail por requisición y notificaciones accionables.

Preparación para Supabase y n8n

El prototipo utiliza datos demostrativos compactos y sessionStorage para que todos los flujos sean navegables sin backend. El estado está centralizado en src/state/PortalContext.tsx; el contrato de sustitución se encuentra en src/services/portal-gateway.ts.

Al integrar el backend:

Implementar PortalGateway con Supabase.
Reemplazar las operaciones de PortalContext por llamadas al gateway.
Resolver el rol desde la sesión de Google/Supabase y aplicar las políticas RLS equivalentes.
Disparar webhooks de n8n después de enviar, aprobar, rechazar, activar, reasignar o cerrar.
Sustituir los catálogos locales por tablas de países, ciudades, clientes, posiciones, feriados y SLA.

Variables sugeridas están documentadas en .env.example. Ninguna credencial debe incluirse en el repositorio.

Estructura

src/
  components/   Componentes de navegación, estados, modales y tableros
  data/         Catálogos y dataset demostrativo mínimo
  pages/        Vistas por función y rol
  services/     Contrato para la futura integración
  state/        Estado y acciones del prototipo
  types.ts      Modelo de dominio compartido
  utils.ts      Etiquetas, SLA, fechas y formato

El diseño usa Arial y la paleta oficial GLM: azul #4F758B, verde #6CC24A, acero #6B8FA3, naranja #FF6A13 y dorado #F0C75E.