WebApp RRHH HQC — Mockups del frontend

Fase 0 · 40 pantallas estáticas de referencia, derivadas de docs/VISION.md. Sin backend: los datos son ficticios y cuentan la misma historia en todas las páginas.

San José
09:42
Manila
23:42
Austin
10:42

Escenario común: viernes 3 de julio de 2026 · tipo de cambio BCCR ₡512,35 por US$ · ~200 empleados (100 Costa Rica, 80 Filipinas, 20 EE. UU.), empresa cien por ciento remota.

Acceso

Puerta de entrada al portal

1 pantalla
  • Iniciar sesión Pantalla de acceso con correo corporativo, contraseña y selector de idioma ES | EN.

Empleado

María Fernández Solís · Soporte Norte · Costa Rica

9 pantallas
  • Mi día — marcaje Jornada en vivo: entrada 07:58, un break de 15 min y tiempo neto 01:29.
  • Mis horas Detalle diario y quincenal de horas trabajadas, con tarifa de ₡4.200/h.
  • Mis solicitudes Vacaciones, permisos y justificaciones de tardía con su estado de aprobación.
  • Calendario Festivos de Costa Rica, vacaciones aprobadas y ausencias del equipo.
  • Mis comprobantes Comprobantes quincenales con desglose de CCSS (10,67 %) y renta.
  • Mis bonos Puntualidad de ₡15.000 aplicado y desempeño de ₡40.000 programado para la quincena 1–15 jul.
  • Mi expediente Datos personales, documentos del expediente y contactos de emergencia.
  • Mi onboarding Checklist de incorporación: tareas completadas y documentos por entregar.
  • Soporte técnico Equipo TI asignado (Dell Latitude 5440) y tickets: TCK-2026-041 abierto.

Team lead

Diego Ramírez Mora · Soporte Norte

6 pantallas
  • Mi equipo Soporte Norte en vivo: 8 personas en 3 países y husos horarios.
  • Realtime del equipo Estado de conexión en vivo de cada miembro: conectado, en pausa o desconectado con motivo.
  • Aprobaciones 3 pendientes: vacaciones de Ana, permiso médico de Carlos y tardía de John.
  • Calendario del equipo Vacaciones, incapacidades y festivos por país de cada miembro.
  • Horarios del equipo Horarios vigentes y cambio propuesto para Emily Carter (07:00–16:00) pendiente de RRHH.
  • Bonos del equipo Asignación de bonos de hasta ₡50.000; montos mayores requieren visto bueno de RRHH.

RRHH

Laura Brenes Rojas · Recursos Humanos

10 pantallas
  • Panel Indicadores del día: asistencia, incapacidades activas y aprobaciones atascadas.
  • Realtime Conexión en vivo de toda la empresa, con filtros por país, equipo y estado.
  • Empleados Directorio de ~200 empleados con filtros por país, equipo y estado.
  • Alta de empleado Formulario de alta: datos personales, puesto, código MTSS y cuenta bancaria.
  • Ficha de empleado Expediente completo de una persona: datos laborales, historial y documentos.
  • Onboardings Incorporaciones en curso con avance de checklist por empleado.
  • Asistencia Tardías y ausencias recientes en toda la empresa, con sus justificaciones.
  • Aprobaciones Pendientes de RRHH: cambio de horario de Emily Carter y horas extra de John Reyes.
  • Salud y bajas Incapacidades activas (Sofía Castro, CCSS, 29 jun – 8 jul) e historial.
  • Amonestaciones Registro de amonestaciones con nivel, motivo y descargos.

Payroll

Andrés Salas Vega · Nómina

7 pantallas
  • Panel Ciclos en curso: quincena CR 1–15 jul y semana Upwork 29 jun – 5 jul.
  • Ciclo de nómina CR Quincena en curso: bruto, CCSS 10,67 %, renta por tramos y neto.
  • Ciclo Upwork Nómina semanal internacional en US$, con tipo de cambio ₡512,35.
  • Aguinaldo y liquidaciones Provisión de aguinaldo por empleado y cálculos de liquidación.
  • Bonos y deducciones Bonos y deducciones aplicados al ciclo, por empleado y concepto.
  • Ajustes salariales Propuesta pendiente: Carlos Vargas de ₡4.000/h a ₡4.300/h, e histórico de ajustes.
  • Histórico Ciclos cerrados, totales pagados y comprobantes enviados por correo.

Admin

Enrique Araya · Administración del sistema

7 pantallas
  • Países y reglas Reglas por país: jornada, moneda, ciclo de pago y deducciones.
  • Festivos Calendarios de festivos 2026 de Costa Rica, Filipinas y EE. UU.
  • Tablas legales Tramos de impuesto de renta y tasas de CCSS con sus vigencias.
  • Catálogo de bonos Tipos de bono disponibles y sus reglas de cálculo y aprobación.
  • Tipos de solicitud Catálogo de tipos de solicitud del portal, con campos y flujo de aprobación por rol.
  • Equipos Estructura de equipos, miembros y team leads asignados.
  • Usuarios y roles Cuentas del portal, roles y permisos por módulo.