// Portal del Colaborador — mobile-first device showcase // Renders the same 5 screens inside a phone (375px) and desktop (1280px) frame const { useState: _po_useState } = React; // ─── Master data — Andrés Mejía (new hire) ─────────────── const ME = { initials: 'AM', name: 'Andrés Felipe Mejía', firstName: 'Andrés', role: 'Operario de Clasificación', area: 'Operaciones', site: 'Cali', hire: '02/05/2026', email: 'andres.mejia@atica.co', phone: '+57 311 456 7821', doc: 'CC 1.087.456.231', leader: 'Luis Miguel Marín', onboardingPct: 62, daysIn: 4, vacBalance: { causados: 0, tomados: 0, disponibles: 0 }, }; // ─── Carnet digital ──────────────────────────────────────── // Tarjeta de identificación corporativa con QR de verificación pública. // El código se valida en el verificador público (cert-verify) compartiendo // el mismo formato de hash que los certificados laborales. const CARNET = { employeeId: 'AT-2026-0247', contractType: 'Término indefinido', shift: 'Turno A · 06:00–14:00', bloodType: 'O+', validFrom: '02/05/2026', validUntil: '02/05/2027', emergency: { name: 'María Mejía Restrepo', relation: 'Madre', phone: '+57 314 887 5421', }, affiliations: { eps: 'Sura', arl: 'Sura · Clase III', afp: 'Protección', }, verifyCode: 'CARN-2026-AT-0247', verifyHash: 'b7e2a91c5d83f614', issuedAt: '02/05/2026 08:14', }; // Catálogo de campos compartibles · controla qué muestra el enlace público. // Cada uno mapea a un grupo de datos del CARNET / ME. const CARNET_FIELDS = [ { id: 'name', label: 'Nombre completo', desc: 'Cómo apareces en el carnet', group: 'identidad', defaultOn: true, locked: true }, { id: 'photo', label: 'Foto / iniciales', desc: 'Avatar visible en la tarjeta', group: 'identidad', defaultOn: true, locked: false }, { id: 'role', label: 'Cargo', desc: 'Operario de Clasificación', group: 'laboral', defaultOn: true, locked: false }, { id: 'area', label: 'Área', desc: 'Operaciones', group: 'laboral', defaultOn: true, locked: false }, { id: 'site', label: 'Sede', desc: 'Cali', group: 'laboral', defaultOn: true, locked: false }, { id: 'hire', label: 'Fecha de ingreso', desc: 'Antigüedad en la empresa', group: 'laboral', defaultOn: false, locked: false }, { id: 'validity', label: 'Vigencia del carnet', desc: 'Periodo en que el carnet está activo', group: 'laboral', defaultOn: true, locked: false }, { id: 'doc', label: 'Documento de identidad', desc: 'Cédula completa · dato sensible', group: 'sensible', defaultOn: false, locked: false }, { id: 'employeeId', label: 'Código interno', desc: CARNET.employeeId, group: 'laboral', defaultOn: false, locked: false }, { id: 'bloodType', label: 'Tipo de sangre · RH', desc: 'Útil en emergencias médicas', group: 'salud', defaultOn: false, locked: false }, { id: 'affil', label: 'EPS · ARL · AFP', desc: 'Afiliaciones de seguridad social', group: 'salud', defaultOn: false, locked: false }, { id: 'emergName', label: 'Contacto de emergencia', desc: 'Nombre y parentesco', group: 'sensible', defaultOn: false, locked: false }, { id: 'emergPhone', label: 'Teléfono de emergencia', desc: 'Número del contacto', group: 'sensible', defaultOn: false, locked: false }, ]; const CARNET_PRESETS = { minimo: { label: 'Mínimo', desc: 'Solo identidad y vigencia · ideal para verificación rápida', ids: ['name', 'photo', 'role', 'validity'] }, estandar: { label: 'Estándar', desc: 'Datos laborales públicos · sin documento ni datos sensibles', ids: ['name', 'photo', 'role', 'area', 'site', 'hire', 'validity', 'employeeId'] }, medico: { label: 'Médico', desc: 'Datos para emergencias médicas · tipo de sangre y EPS', ids: ['name', 'photo', 'role', 'site', 'validity', 'bloodType', 'affil', 'emergName', 'emergPhone'] }, completo: { label: 'Completo', desc: 'Toda la información del carnet · usar con cuidado', ids: CARNET_FIELDS.map(f => f.id) }, }; const CARNET_TTL = [ { id: '1h', label: '1 hora', minutes: 60 }, { id: '24h', label: '24 horas', minutes: 60 * 24 }, { id: '7d', label: '7 días', minutes: 60 * 24 * 7 }, { id: 'perm', label: 'Permanente · mientras siga vigente', minutes: null }, ]; // Disponible para el viewer público (HCM Atica Carnet Publico.html) window.CARNET_DATA = CARNET; window.CARNET_FIELDS = CARNET_FIELDS; window.CARNET_OWNER = ME; // Helper · formato moneda COP const _po_fmt = (n) => '$' + Math.round(n).toLocaleString('es-CO'); // ─── Mi nómina ───────────────────────────────────────────── const ME_PAYROLL = { lastPayslip: { period: 'Abril 2026', daysWorked: 30, devengado: 1539584, deducciones: 108333, net: 1431251, salaryBase: 1450000, auxTransporte: 200000, horasExtra: 0, bonificaciones: 0, aportesSalud: 58000, aportesPension: 58000, retencionFuente: 0, otrasDeduc: 0, paymentDate: '30/04/2026', paymentAccount: 'Davivienda · Ahorros · ··· 4587', id: 'CMP-P-2026-04-E0247', hash: 'a7f3e2c1d9b4', }, ytd: { devengado: 6158336, // ene-abr 2026 deducciones: 433332, neto: 5725004, aportesEmployer: 1250000, months: 4, }, history: [ { period: 'Abril 2026', net: 1431251, devengado: 1539584, deducciones: 108333, daysWorked: 30, paid: '30/04/2026', id: 'CMP-2026-04', state: 'pagado' }, { period: 'Marzo 2026', net: 1431251, devengado: 1539584, deducciones: 108333, daysWorked: 30, paid: '31/03/2026', id: 'CMP-2026-03', state: 'pagado' }, { period: 'Febrero 2026', net: 1431251, devengado: 1539584, deducciones: 108333, daysWorked: 28, paid: '27/02/2026', id: 'CMP-2026-02', state: 'pagado' }, { period: 'Enero 2026', net: 1431251, devengado: 1539584, deducciones: 108333, daysWorked: 30, paid: '30/01/2026', id: 'CMP-2026-01', state: 'pagado' }, { period: 'Diciembre 2025', net: 2431251, devengado: 2604584, deducciones: 173333, daysWorked: 30, paid: '18/12/2025', id: 'CMP-2025-12', state: 'pagado', note: 'Incluye prima de servicios · 2do semestre' }, { period: 'Noviembre 2025', net: 1398400, devengado: 1503100, deducciones: 104700, daysWorked: 30, paid: '28/11/2025', id: 'CMP-2025-11', state: 'pagado' }, ], prestaciones: { cesantias: 128299, // proporcional a 28 días intCes: 1283, prima: 128299, vacacionesDays: 1.17, vacacionesValue: 60000, consignacionAt: '14/02/2027', }, loans: [], embargos: [], certifications: [ { id: 'cert-lab', name: 'Certificación laboral', desc: 'Acredita cargo, antigüedad y salario actual', updated: '02/05/2026' }, { id: 'cert-cir', name: 'Certificación de ingresos y retenciones', desc: 'Año fiscal 2025 · disponible cuando cierre el primer año', updated: 'Disponible 15/02/2027' , disabled: true }, { id: 'cert-afi', name: 'Constancia de afiliaciones', desc: 'EPS Sura · AFP Protección · Caja Comfamiliar · ARL Sura', updated: '02/05/2026' }, { id: 'cert-dis', name: 'Carta de descuentos voluntarios', desc: 'Para tu sindicato, fondo de empleados o club deportivo', updated: 'Solicitable' }, ], affiliations: { eps: { name: 'EPS Sura', id: '901001234' }, afp: { name: 'AFP Protección', id: 'PRTC-2026-A' }, arl: { name: 'ARL Sura', clase: 'III · 2.436%' }, caja: { name: 'Comfamiliar Valle del Cauca' }, cesantiasFund: { name: 'Porvenir' }, }, }; // ─── Reconocimientos recibidos ───────────────────────────── const ME_RECOG_RECEIVED = [ { from: 'Luis Miguel Marín', initials: 'LM', value: 'Compromiso', valueTone: 'rose', message: 'Tu apoyo cubriendo el turno de la noche cuando se presentó la incidencia con la trituradora 2 fue clave para no parar la línea. Eso es Atica.', when: 'hace 3 días', applauds: 12 }, { from: 'Carlos A. Vélez', initials: 'CV', value: 'Trabajo en equipo', valueTone: 'blue', message: 'Andrés es el tipo de compañero que uno quiere tener al lado en cada turno · pregunta, escucha, propone.', when: 'hace 1 semana', applauds: 8 }, ]; // ─── Mis solicitudes ─────────────────────────────────────── const ME_REQUESTS_RECENT = [ { id: 'TO-2026-0142', type: 'Vacaciones', from: '12/05/2026', to: '23/05/2026', days: 10, state: 'pendiente_jefe', stateLabel: 'Pendiente jefe', tone: 'amber' }, ]; // ─── Mi SST ──────────────────────────────────────────────── const ME_SST_DATA = { nextExam: { type: 'Examen médico de ingreso', dueDate: '07/05/2026', daysLeft: 2, urgent: true, ips: 'IPS Megacentro · Cali' }, exams: [ { type: 'Examen ingreso', state: 'pendiente', date: 'Por programar', note: 'Plazo 5 días desde ingreso' }, { type: 'Audiometría', state: 'pendiente', date: 'Por programar', note: 'Riesgo ruido · trimestre 1' }, ], restrictions: [], riskFactors: [ { factor: 'Físico · ruido + calor', level: 'alto', mitigations: ['Protector auditivo 25 dB obligatorio', 'Pausas en zona ventilada'] }, { factor: 'Físico · quemadura térmica', level: 'alto', mitigations: ['Guantes Kevlar 350°C', 'Procedimiento LOTO antes de intervenir'] }, ], brigadista: false, copasstMember: false, }; const ME_BENEFITS = [ { name: 'Convenio EPS Sura', desc: '25% descuento odontología', tone: 'green' }, { name: 'Comfamiliar Valle del Cauca', desc: 'Subsidio educativo · cuota monetaria', tone: 'navy' }, { name: 'Plan de retiro voluntario', desc: 'AFP Protección · APV con beneficio fiscal', tone: 'blue' }, { name: 'Fondo de empleados', desc: 'Crédito de libre inversión preferencial', tone: 'amber' }, ]; // ─── Cumpleaños y aniversarios del equipo ────────────────── // Hoy de referencia · jueves 7 de mayo de 2026. // Ordenados de hoy hacia adelante; los pasados quedan atrás. const TEAM_BIRTHDAYS = [ { id: 'b1', name: 'Carolina Restrepo', initials: 'CR', area: 'Clasificación', role: 'Operaria de clasificación', date: '07/05', dateLabel: 'Hoy', days: 0, age: 32, tone: 'rose' }, { id: 'b2', name: 'Jhon Fredy Ramírez', initials: 'JR', area: 'Aprovechamiento', role: 'Auxiliar de aprovechamiento', date: '09/05', dateLabel: 'En 2 días', days: 2, age: 28, tone: 'amber' }, { id: 'b3', name: 'Sandra Milena Ocampo', initials: 'SO', area: 'Calidad', role: 'Catadora QA', date: '14/05', dateLabel: 'En 7 días', days: 7, age: 41, tone: 'blue' }, { id: 'b4', name: 'Diego Alejandro Loaiza', initials: 'DL', area: 'Comercial', role: 'Ejecutivo Cali', date: '22/05', dateLabel: 'En 15 días', days: 15, age: 35, tone: 'navy' }, { id: 'b5', name: 'Liliana Patricia Salazar',initials: 'LS', area: 'Talento Humano', role: 'Generalista RRHH', date: '28/05', dateLabel: 'En 21 días', days: 21, age: 47, tone: 'green' }, ]; const TEAM_ANNIVERSARIES = [ { id: 'a1', name: 'Luis Miguel Marín', initials: 'LM', area: 'Operaciones', role: 'Líder de planta', date: '03/05', dateLabel: 'hace 4 días', days: -4, years: 10, milestone: true, tone: 'navy' }, { id: 'a2', name: 'Beatriz Elena Cano', initials: 'BC', area: 'Aprovechamiento', role: 'Coordinadora aprovechamiento', date: '11/05', dateLabel: 'En 4 días', days: 4, years: 5, milestone: true, tone: 'rose' }, { id: 'a3', name: 'Mauricio Trejos', initials: 'MT', area: 'Clasificación', role: 'Operario senior', date: '20/05', dateLabel: 'En 13 días', days: 13, years: 3, milestone: false, tone: 'amber' }, { id: 'a4', name: 'Paula Andrea Henao', initials: 'PH', area: 'Mantenimiento', role: 'Técnica electromecánica', date: '24/05', dateLabel: 'En 17 días', days: 17, years: 1, milestone: false, tone: 'blue' }, ]; const URGENT = [ { id: 'u1', kind: 'docs', label: 'Tienes 2 documentos pendientes de firma', due: 'Vence hoy', action: 'Firmar', tone: 'rose' }, { id: 'u2', kind: 'sst', label: 'Tu examen médico de ingreso vence en 15 días', due: 'En 15 días', action: 'Programar', tone: 'amber' }, { id: 'u3', kind: 'training', label: 'Capacitación obligatoria BPM sin completar', due: 'Vence en 9d', action: 'Iniciar', tone: 'amber' }, ]; const MY_DOCS = [ { id: 'd-127', type: 'contrato', name: 'Contrato laboral término indefinido', state: 'pendiente', date: '01/05/2026' }, { id: 'd-126', type: 'reglamento', name: 'Reglamento interno de trabajo', state: 'pendiente', date: '01/05/2026' }, { id: 'd-128', type: 'autorizacion', name: 'Autorización tratamiento de datos', state: 'firmado', date: '02/05/2026' }, { id: 'd-129', type: 'acuerdo', name: 'Acuerdo de confidencialidad', state: 'firmado', date: '02/05/2026' }, { id: 'd-130', type: 'cert', name: 'Certificación laboral · al ingreso', state: 'descargable', date: '02/05/2026' }, ]; const DOC_LABEL = { contrato: 'Contrato laboral', reglamento: 'Reglamento interno', autorizacion: 'Autorización', acuerdo: 'Acuerdo confidencialidad', cert: 'Certificación', }; const DOC_STATE_META = { pendiente: { label: 'Pendiente firma', pill: 'amber-soft', dot: '#854D0E' }, firmado: { label: 'Firmado', pill: 'green', dot: 'var(--green-600)' }, descargable: { label: 'Disponible', pill: 'navy', dot: 'var(--navy-800)' }, }; const MY_COURSES_INITIAL = [ { id: 'c-01', name: 'Manejo seguro de maquinaria de clasificación', cat: 'sst', progress: 0, duration: '8 h', due: '14/05/2026', state: 'pendiente' }, { id: 'c-02', name: 'Buenas Prácticas de Manufactura (BPM)', cat: 'normativo', progress: 65, duration: '4 h', due: '14/05/2026', state: 'curso' }, { id: 'c-05', name: 'Reglamento Interno · Reforma 2025', cat: 'normativo', progress: 100, duration: '2 h', due: '—', state: 'completo', score: 88 }, { id: 'c-07', name: 'Manipulación de alimentos', cat: 'sst', progress: 0, duration: '3 h', due: '20/05/2026', state: 'pendiente' }, { id: 'c-08', name: 'Inducción Atica', cat: 'normativo', progress: 100, duration: '4 h', due: '—', state: 'completo', score: 95 }, // Demo · curso e-learning de tercero (sin evaluación interna · autocertificable) { id: 'c-ext-01', name: 'Manejo defensivo y seguridad vial', cat: 'sst', progress: 30, duration: '6 h', due: '28/05/2026', state: 'curso', externo: true, plataformaLabel: 'SENA · SOFIA Plus', urlAcceso: 'https://oferta.senasofiaplus.edu.co' }, ]; const MY_GEAR = [ { code: 'UNI-001', name: 'Uniforme operario clasificación', qty: 2, size: 'L', received: '02/05/2026' }, { code: 'UNI-004', name: 'Pantalón industrial drill', qty: 2, size: '32', received: '02/05/2026' }, { code: 'EPP-001', name: 'Guantes térmicos Kevlar 350°C', qty: 1, size: 'L', received: '03/05/2026', pending: true }, { code: 'EPP-002', name: 'Botas dieléctricas con puntera', qty: 1, size: '41', received: '03/05/2026' }, { code: 'EPP-003', name: 'Casco industrial clase E', qty: 1, size: 'Única',received: '03/05/2026' }, { code: 'EPP-004', name: 'Protector auditivo copa 25 dB', qty: 1, size: 'Única',received: '03/05/2026' }, ]; const MY_HISTORY = [ { id: 'TO-2026-X1', type: 'Permiso', from: 'Por solicitar', to: '—', state: 'borrador' }, ]; // ─── Root ──────────────────────────────────────────────── const Portal = () => { const [screen, setScreen] = _po_useState('home'); const [signFlow, setSignFlow] = _po_useState(null); // {step, doc} const [vacFlow, setVacFlow] = _po_useState(null); // {step, type, from, to, days} const [carnetOpen, setCarnetOpen] = _po_useState(false); const [device, setDevice] = _po_useState('both'); // both | mobile | desktop const goScreen = (s) => { setScreen(s); setSignFlow(null); setVacFlow(null); setCarnetOpen(false); }; return (

Portal del Colaborador

Vista del empleado — la misma experiencia desde móvil (375px) y escritorio (1280px). Cambia de pantalla con la barra inferior.
{[ ['home', 'Inicio'], ['payroll', 'Mi nómina'], ['docs', 'Documentos'], ['courses', 'Capacitaciones'], ['desempeno','Mi desempeño'], ['profile', 'Mi perfil'], ].map(([id, l]) => ( ))}
{device !== 'desktop' && (
iPhone 15 · 375 × 812
)} {device !== 'mobile' && (
portal.atica.co · 1280 × 800
)}
); }; // ─── Phone frame ───────────────────────────────────────── const PhoneFrame = ({ screen, setScreen, signFlow, setSignFlow, vacFlow, setVacFlow, carnetOpen, setCarnetOpen }) => { return (
9:41
{carnetOpen ? setCarnetOpen(false)} /> : signFlow ? : vacFlow ? : ( <> {screen === 'home' && } {screen === 'payroll' && } {screen === 'docs' && } {screen === 'vacation' && } {screen === 'courses' && } {screen === 'desempeno'&& window.PerformanceScreen && } {screen === 'profile' && } )}
{[ ['home', 'Inicio', 'IconHome'], ['payroll', 'Nómina', 'IconBarChart'], ['docs', 'Docs', 'IconDoc'], ['desempeno','Desemp.', 'IconStar'], ['profile', 'Perfil', 'IconUsers'], ].map(([id, l, icon]) => { const I = window[icon]; return ( ); })}
); }; // ─── Desktop frame ─────────────────────────────────────── const DesktopFrame = ({ screen, setScreen, signFlow, setSignFlow, vacFlow, setVacFlow, carnetOpen, setCarnetOpen }) => { return (
portal.atica.co/colaborador
{carnetOpen ? setCarnetOpen(false)} /> : signFlow ? : vacFlow ? : ( <> {screen === 'home' && } {screen === 'payroll' && } {screen === 'docs' && } {screen === 'vacation' && } {screen === 'courses' && } {screen === 'desempeno'&& window.PerformanceScreen && } {screen === 'profile' && } )}
); }; // ─── Screen: Home ──────────────────────────────────────── const HomeScreen = ({ variant, goScreen, setSignFlow, setVacFlow, setCarnetOpen }) => { const m = variant === 'mobile'; const [greeted, setGreeted] = _po_useState({}); // { [personId]: true } const [openComm, setOpenComm] = _po_useState(null); const greet = (id) => setGreeted({ ...greeted, [id]: true }); // El cumpleañero del día queda destacado aparte de la lista. const todayBirthday = TEAM_BIRTHDAYS.find(b => b.days === 0); const upcomingBirthdays = TEAM_BIRTHDAYS.filter(b => b.days > 0); const upcomingAnnivs = TEAM_ANNIVERSARIES.filter(a => a.days >= 0).sort((a, b) => a.days - b.days); // Comunicaciones publicadas · llegan desde el módulo de comms del admin. const allComms = (typeof window !== 'undefined' && window.COMUNICADOS) || []; const publishedComms = allComms.filter(c => c.state === 'publicado'); return (
Martes 5 de mayo · 9:41 am

Buenos días, {ME.firstName}

{ME.role} · {ME.site}
{!m &&
3
} {m &&
3
}
{/* Quick actions 2x2 */}
{/* Carnet digital · acceso rápido tipo wallet */} {/* Onboarding progress card */}
Tu onboarding
Día {ME.daysIn} de tu inducción
{ME.onboardingPct}%
Siguiente paso: Examen médico de ingreso
{/* Urgentes */}

Pendientes urgentes

{URGENT.length} ítems
{URGENT.map(u => (
{u.kind === 'docs' ? : u.kind === 'sst' ? : }
{u.label}
{u.due}
))}
{/* Comunicaciones · feed publicado por RRHH */} {publishedComms.length > 0 && (

Comunicaciones

{publishedComms.length} publicadas
{publishedComms.slice(0, m ? 2 : 3).map(c => ( ))}
)} {/* Celebraciones · cumpleaños y aniversarios del equipo */}

Celebraciones del equipo

Mayo 2026
{todayBirthday && (
Hoy cumple años
{todayBirthday.name}
{todayBirthday.role} · {todayBirthday.area} · cumple {todayBirthday.age}
)}
Cumpleaños
{upcomingBirthdays.length} próximos
{upcomingBirthdays.slice(0, m ? 3 : 4).map(b => (
{b.initials}
{b.name}
{b.area} · cumple {b.age}
{b.date}
{b.dateLabel}
))}
Aniversarios laborales
{upcomingAnnivs.length} este mes
{upcomingAnnivs.slice(0, m ? 3 : 4).map(a => (
{a.initials} {a.milestone && }
{a.name}
{a.role}
{a.years}{a.years === 1 ? 'año' : 'años'}
{a.dateLabel}
))}
{/* Reconocimientos recibidos */}

Reconocimientos para ti

{ME_RECOG_RECEIVED.length} esta semana
{ME_RECOG_RECEIVED.slice(0, m ? 1 : 2).map((r, i) => (
{r.initials}
{r.value}
"{r.message}"
de {r.from} · {r.when} 👏 {r.applauds}
))}
{/* Tu mes en Atica · desktop only */} {!m && (

Tu mes en Atica

Mayo 2026
{_po_fmt(ME_PAYROLL.lastPayslip.net)}
Tu último pago
pagado el {ME_PAYROLL.lastPayslip.paymentDate}
62%
Plan formativo
2 cursos · uno en curso
2
Reconocimientos recibidos
20 aplausos en total
0
Incidencias SST
todas las semanas seguras
)} {/* Tu día (desktop only) */} {!m && (

Hoy en tu jornada

martes 5 de mayo
06:00
Tu turno comienza
2 / 5
Cursos completados
5
Documentos en tu ficha
100%
Dotación recibida
)} {openComm && setOpenComm(null)} />}
); }; // ─── Modal: Lector de comunicado ───────────────────────── const ComunicadoReader = ({ comm, onClose }) => { React.useEffect(() => { document.body.style.overflow = 'hidden'; const onEsc = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onEsc); return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onEsc); }; }, []); return (
{ if (e.target === e.currentTarget) onClose(); }}>
{comm.id} · publicado {comm.publishedAt}
{comm.title}
De {comm.author} · {comm.authorRole}
{comm.audience} · {comm.seen}/{comm.total} confirmaron lectura
{comm.body || comm.summary}
Lectura registrada en bitácora
); }; // ─── Screen: Docs ──────────────────────────────────────── const DocsScreen = ({ variant, setSignFlow }) => { const m = variant === 'mobile'; const pendingCount = MY_DOCS.filter(d => d.state === 'pendiente').length; return (

Mis documentos

{MY_DOCS.length} documentos en tu ficha
{/* Mini stats */}
{pendingCount}
Pendientes de firma
{MY_DOCS.filter(d => d.state === 'firmado').length}
Firmados
{MY_DOCS.filter(d => d.state === 'descargable').length}
Disponibles
{MY_DOCS.map(d => { const s = DOC_STATE_META[d.state]; return ( ); })}
); }; // ─── Sub-flow: Sign ────────────────────────────────────── const SignFlow = ({ flow, setFlow, variant }) => { const m = variant === 'mobile'; const { step, doc } = flow; const [scrollPct, setScrollPct] = _po_useState(0); const [accepted, setAccepted] = _po_useState(false); const back = () => setFlow(null); const onScroll = (e) => { const el = e.currentTarget; const max = el.scrollHeight - el.clientHeight; const p = max <= 0 ? 100 : Math.min(100, Math.round((el.scrollTop / max) * 100)); setScrollPct(p); }; return (
{[1, 2, 3, 4].map(i => (
{i}
))}
{step === 1 && ( <>
{doc.name}
{doc.id} · {doc.date}
Lectura {scrollPct}%

Contrato individual de trabajo

Entre los suscritos, ATICA S.A.S., sociedad legalmente constituida con NIT 900.123.456-7, en adelante EL EMPLEADOR, y {ME.name}, identificado(a) con cédula de ciudadanía No. {ME.doc.replace('CC ', '')}, en adelante EL TRABAJADOR, hemos convenido celebrar el presente contrato individual de trabajo a término indefinido…

PRIMERA. — Objeto

EL TRABAJADOR se obliga a prestar sus servicios personales en el cargo de {ME.role}, en la sede de {ME.site}, así como a desempeñar todas las funciones inherentes al mismo y a cumplir el reglamento interno de trabajo.

SEGUNDA. — Salario

El salario mensual será de UN MILLÓN CUATROCIENTOS CINCUENTA MIL PESOS M/CTE ($1.450.000), pagadero quincenalmente.

TERCERA. — Duración

El presente contrato tiene una duración indefinida y comenzará a regir desde el {ME.hire}.

CUARTA. — Período de prueba

Las partes pactan un período de prueba de dos (2) meses contados a partir de la fecha de iniciación del contrato.

QUINTA. — Jornada laboral

La jornada ordinaria será de cuarenta y ocho (48) horas semanales, distribuidas según necesidades de la operación de clasificación.

SEXTA. — Confidencialidad

EL TRABAJADOR se obliga a guardar absoluta reserva sobre la información a la que tenga acceso por razón de su cargo, incluidas las recetas de clasificación, listas de proveedores y datos de clientes.

En constancia de lo anterior, las partes firman electrónicamente el presente documento.

)} {step === 2 && (

Confirma tu lectura

Al aceptar, tu firma electrónica quedará vinculada al documento conforme a la Ley 527 de 1999.

)} {step === 3 && (

Confirma con tu huella

Apoya tu dedo en el sensor para firmar el documento de manera segura.

)} {step === 4 && (

¡Documento firmado!

El {doc.name} quedó firmado y archivado en tu ficha. Recibirás una copia con la evidencia de firma en tu correo personal.

Firmado el05/05/2026 09:42:18
Documento{doc.id}
Hasha4f2c1…d4b6a9f1
)}
); }; // ─── Screen: Vacation start (entry list) ───────────────── const VacationStart = ({ variant, setVacFlow }) => { const m = variant === 'mobile'; return (

Solicitudes

Saldo: 0 días · aún no causas vacaciones

Tu historial

Aún no has hecho ninguna solicitud
Cuando solicites un día libre o un permiso aparecerá aquí.
); }; // ─── Sub-flow: Vacation request ────────────────────────── const VacationFlow = ({ flow, setFlow, variant }) => { const m = variant === 'mobile'; const { step } = flow; const [type, setType] = _po_useState(flow.type || 'permiso'); const [from, setFrom] = _po_useState(flow.from || null); const [to, setTo] = _po_useState(flow.to || null); const [motive, setMotive] = _po_useState(''); const back = () => setFlow(null); const stepBack = () => setFlow({ ...flow, step: Math.max(1, step - 1) }); const stepNext = () => setFlow({ ...flow, step: step + 1, type, from, to }); const days = (from && to) ? computeBizDays(from, to) : 0; return (
{[1, 2, 3, 4].map(i => (
{i}
))}
{step === 1 && ( <>

¿Qué quieres solicitar?

{[ ['vacaciones', 'Vacaciones', 'Días causados que ya tengas disponibles', 'IconStar'], ['permiso', 'Permiso', 'Diligencia, cita médica, motivo personal', 'IconClock'], ['licencia', 'Licencia', 'No remunerada · estudios · luto · maternidad', 'IconRocket'], ['incapacidad', 'Incapacidad', 'Reportada por IPS o médico tratante', 'IconAlert'], ].map(([k, l, h, ic]) => { const I = window[ic]; return ( ); })}
)} {step === 2 && ( <>

Selecciona las fechas

Toca el día de inicio y luego el día final. Los festivos y fines de semana no se descuentan.

{ if (!from || (from && to)) { setFrom(d); setTo(null); } else if (d < from) { setFrom(d); } else { setTo(d); } }} />
{from && to ? <>{computeBizDays(from, to)} días hábiles · {from}/05 → {to}/05 : from ? Selecciona el día final : Selecciona el primer día }
)} {step === 3 && ( <>

Resumen de tu solicitud

Tipo {type}
Período {from}/05/2026 → {to}/05/2026
Días hábiles a descontar {days}
Saldo actual {ME.vacBalance.disponibles} días
Saldo después {type === 'vacaciones' ? `${ME.vacBalance.disponibles - days} días` : 'sin cambio'}
Aprueba {ME.leader} · jefe directo