[CONSEJO — Doc 06] Contrarian: El frontend de PayMind tiene tres usuarios con necesidades radicalmente distintas: el gerente RRHH (quiere velocidad y compliance), el dueño (quiere el número final y el forecast), y el empleado (quiere ver su recibo y sus vacaciones). Si se diseña un solo UI para los tres, se diseña mal para todos. Tres interfaces separadas con acceso por rol. Executor: La pantalla más importante del frontend de PayMind no es el dashboard del dueño — es la pantalla de procesamiento de planilla del gerente RRHH. Tiene que ser el workflow de 5 minutos más satisfactorio que un gerente RRHH haya experimentado. Esa pantalla es el demo de venta, el hito de activación, y el motivo de retención. First Principles: Un recibo de pago digital es un documento legal en algunos países (CR requiere el desglose de deducciones). El componente de recibo no puede ser un simple div con CSS — debe generar un PDF firmado que cumpla con los requisitos legales de cada país.

1. Stack frontend

Idéntico al stack MindStack Suite (ver StockMind Doc 06 §1):

2. Arquitectura de pantallas

/login                              ← Magic link auth (por rol)
/dashboard                          ← Vista según rol (workforce / nómina / self-service)

[RRHH / Admin]
/planilla                           ← Centro de planilla
  /planilla/procesar                ← Wizard de procesamiento quincenal
  /planilla/historial               ← Planillas procesadas anteriores
  /planilla/calculo-borrador        ← Vista previa antes de confirmar
/empleados                          ← Gestión de empleados
  /empleados/lista                  ← Directorio de empleados activos
  /empleados/[id]                   ← Expediente completo del empleado
  /empleados/nuevo                  ← Onboarding de nuevo empleado
  /empleados/[id]/contrato          ← Gestión de contrato laboral
/vacaciones                         ← Gestión de vacaciones y ausencias
  /vacaciones/solicitudes           ← Cola de aprobación
  /vacaciones/calendario            ← Vista calendario del equipo
  /vacaciones/acumuladas            ← Días acumulados por empleado
/incapacidades                      ← Incapacidades CCSS/IMSS/DIAN
/cesantias                          ← Cálculo y gestión de cesantías
/reportes                           ← Reportes laborales
  /reportes/ccss                    ← Planilla CCSS (archivo mensual)
  /reportes/imss                    ← SUA (Sistema Único de Autodeterminación MX)
  /reportes/retenciones             ← ISR laboral declarado

[Dueño / Gerente General]
/workforce                          ← Motor predictivo (Pro+/Enterprise)
  /workforce/forecast               ← Necesidades de contratación 90 días
  /workforce/costos                 ← Proyección de costo de planilla 90 días
  /workforce/escenarios             ← Simulador manual de contratación
/configuracion
  /configuracion/empresa            ← Datos fiscales laborales por país
  /configuracion/cargos             ← Estructura de cargos y salarios
  /configuracion/integraciones      ← BookMind GL + StockMind + SalesMind

[Empleado self-service]
/mi-cuenta                          ← Vista personal del empleado
  /mi-cuenta/recibos                ← Historial de recibos de pago
  /mi-cuenta/vacaciones             ← Mis días acumulados y solicitudes
  /mi-cuenta/datos                  ← Mis datos personales (actualizable)
  /mi-cuenta/contrato               ← Mi contrato vigente (solo lectura)

3. Pantallas críticas — wireframes

3.1 Wizard de procesamiento de planilla

┌─────────────────────────────────────────────────────────────────┐
│ PayMind      PROCESAMIENTO PLANILLA — Quincena 1-15 Ago 2032    │
│ Paso 3 de 4: Revisar cálculos                    🇨🇷 Costa Rica │
├─────────────────────────────────────────────────────────────────┤
│  ✅ Paso 1: Período y parámetros                                │
│  ✅ Paso 2: Novedades (ausencias, extras, deducciones)          │
│  ▶ Paso 3: Revisar cálculos ← ESTÁS AQUÍ                       │
│     Paso 4: Confirmar y enviar archivo banco                    │
├─────────────────────────────────────────────────────────────────┤
│  RESUMEN QUINCENA                                               │
│  Empleados procesados: 23 (2 ausentes con incapacidad)         │
│  Total salarios brutos: ₡8,234,500                             │
│  Total deducciones empleados: ₡879,082 (10.68%)               │
│  Total cargas patronales: ₡2,195,490 (26.67%)                  │
│  Total a pagar a empleados: ₡7,355,418                         │
│  ⚠️ 1 empleado con novedad: Juan Pérez — hora extra ₡45,000    │
│                                                                  │
│  [Expandir detalle por empleado ▼]                              │
│                                                                  │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ Empleado        Bruto    -CCSS emp  -ISR   Neto         │   │
│  │ Ana Ramírez     ₡850k    ₡90,745   ₡32k   ₡727k  [ver] │   │
│  │ Juan Pérez      ₡895k    ₡95,532   ₡38k   ₡761k  [ver] │   │
│  │ María López     ₡620k    ₡66,204   ₡18k   ₡536k  [ver] │   │
│  │ ... (20 más)                                            │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                  │
│  [← Volver a novedades]    [Confirmar y generar archivo banco →]│
└─────────────────────────────────────────────────────────────────┘

3.2 Recibo de pago digital

┌─────────────────────────────────────────────────────────────────┐
│  DISTRIBUIDORA XYZ S.A.                   RUC: 3-101-XXXXXX    │
│  RECIBO DE PAGO DE SALARIO                                      │
│  Período: 1 al 15 de agosto de 2032                            │
├─────────────────────────────────────────────────────────────────┤
│  Empleado: Ana Ramírez Soto                                     │
│  Cédula: X-XXXX-XXXX    Cargo: Asistente Administrativa        │
│  Tipo contrato: Indefinido    Inicio: 15/03/2029               │
├─────────────────────────────────────────────────────────────────┤
│  INGRESOS                              DEDUCCIONES              │
│  Salario base 15 días  ₡850,000   |  CCSS (SEM+INV) ₡90,745  │
│  Horas extra 0 horas         ₡0   |  ISR según tabla  ₡32,000 │
│  ─────────────────────────────    |  ─────────────────────── │
│  TOTAL BRUTO          ₡850,000   |  TOTAL DEDUC.   ₡122,745  │
│  ────────────────────────────────────────────────────────────  │
│  SALARIO NETO A DEPOSITAR:              ₡727,255              │
│  Banco: BAC San José    IBAN: CR00-0010-0001-XXXXXXXXXX        │
├─────────────────────────────────────────────────────────────────┤
│  CARGAS PATRONALES (información para la empresa)               │
│  CCSS patronal (EM+IV+CP+IMAS+INA)      ₡226,950              │
│  BANCO POPULAR / Asignaciones Fam.       ₡17,000              │
│  TOTAL CARGAS PATRONALES                ₡243,950              │
├─────────────────────────────────────────────────────────────────┤
│  AGUINALDO ACUMULADO (1 ene - 15 ago 2032): ₡480,000         │
│  VACACIONES DISPONIBLES: 12 días                               │
├─────────────────────────────────────────────────────────────────┤
│  Generado por PayMind el 15/08/2032 · Firma digital QR: [###] │
│           [Descargar PDF]  [Enviar por email]                   │
└─────────────────────────────────────────────────────────────────┘

3.3 Dashboard workforce planning (Enterprise)

┌─────────────────────────────────────────────────────────────────┐
│ WORKFORCE PLANNING — Agosto 2032                    [Enterprise]│
├──────────────────────┬──────────────────────────────────────────┤
│  EQUIPO HOY          │  SEÑALES DE CRECIMIENTO                  │
│  23 empleados activos│                                          │
│  6 vacantes abiertas │  SalesMind: pipeline Q4 +35% vs Q3     │
│  2 incapacidades     │  StockMind: OC aprobadas +28% this month│
│                      │  BookMind: saldo P50 puede absorber      │
│                      │           +$4,200/mes en 60 días        │
├──────────────────────┴──────────────────────────────────────────┤
│  RECOMENDACIÓN PAYМIND                                          │
│                                                                  │
│  📊 En 45 días necesitarás 2 personas adicionales:              │
│     • 1 Operador de bodega (StockMind signal)                   │
│     • 1 Ejecutivo de ventas (SalesMind signal)                  │
│                                                                  │
│  💰 Costo mensual proyectado: $4,200                            │
│     BookMind P50 en 45 días: $18,400 (puede absorberlo ✅)     │
│                                                                  │
│  [Ver simulación completa]  [Iniciar proceso de contratación]   │
├─────────────────────────────────────────────────────────────────┤
│  COSTO DE PLANILLA — PRÓXIMOS 90 DÍAS                          │
│  $18k ┤ ──────────────────── Sin cambios                        │
│  $20k ┤                   ╌╌╌╌╌╌╌ +2 contratos (P50)          │
│  $22k ┤                          ╌╌╌╌╌╌ +4 contratos (P90)    │
│       Hoy    +30d   +45d   +60d   +75d   +90d                  │
└─────────────────────────────────────────────────────────────────┘

4. Componentes de UI especializados

4.1 PayrollStatusBadge

type PlanillaEstado = 'borrador' | 'revisando' | 'confirmada' | 'enviada_banco' | 'error';
const colores = {
  borrador:      'bg-gray-100 text-gray-600',
  revisando:     'bg-yellow-100 text-yellow-800',
  confirmada:    'bg-blue-100 text-blue-800',
  enviada_banco: 'bg-green-100 text-green-800',
  error:         'bg-red-100 text-red-800',
};

4.2 VacationCalendar

Calendario visual del equipo con colores por estado: - Verde: vacaciones aprobadas - Amarillo: solicitud pendiente - Rojo: ausencia por incapacidad - Gris: empleado no disponible

4.3 PayrollCalculationBreakdown

Componente "mostrar el trabajo" — expande cada línea de la planilla mostrando la fórmula:

Salario bruto: ₡850,000
CCSS empleado: ₡850,000 × 10.67% = ₡90,695
ISR (tabla 2032): Ingreso ₡850,000 → Tramo 3 → ₡X base + (₡850,000 - ₡X) × Y% = ₡32,000
Salario neto: ₡850,000 - ₡90,695 - ₡32,000 = ₡727,305

5. Portal self-service del empleado

El empleado accede desde su email (link mágico) a una vista simplificada: - Ver historial de recibos de pago (PDF descargable) - Solicitar vacaciones (con los días disponibles visibles) - Actualizar datos de contacto y cuenta bancaria (con aprobación del RRHH) - Ver su contrato vigente (solo lectura)

Importante: el portal del empleado no tiene acceso a datos de otros empleados ni a ninguna información financiera de la empresa.

6. Performance y accesibilidad

7. Fuera de alcance — V1.0

• ATS (módulo de reclutamiento)
• Performance management / evaluaciones 360
• Engagement surveys
• Integración con LinkedIn o plataformas de empleo
• Payroll Card o medios de pago propios
• Inteligencia artificial de selección de candidatos

Ver también: Doc 07 (SRD Backend — APIs y motor de planilla) · Doc 08 (Modelo de Datos — schema pm_) · Doc 09 (Motor Core — motor determinístico de planilla) · Doc 11 (Branding — colores violet PayMind)*