Isaac Aracena
77 lines
3.2 KiB
Markdown
77 lines
3.2 KiB
Markdown
# Portal de Requisición de Vacantes · GLM
|
|
|
|
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+.
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Comandos de validación:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```ts
|
|
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:
|
|
|
|
1. Implementar `PortalGateway` con Supabase.
|
|
2. Reemplazar las operaciones de `PortalContext` por llamadas al gateway.
|
|
3. Resolver el rol desde la sesión de Google/Supabase y aplicar las políticas RLS equivalentes.
|
|
4. Disparar webhooks de n8n después de enviar, aprobar, rechazar, activar, reasignar o cerrar.
|
|
5. 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
|
|
|
|
```text
|
|
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`.
|