// Benefits · Módulo de Beneficios Corporativos // ────────────────────────────────────────────────────────────────────── // Vista admin (RRHH) con 7 tabs: Catálogo, Marketplace, Solicitudes, // Matriz, Campañas, Reconocimientos, Analítica. // Vista colaborador (toggle) con 6 secciones: Inicio, Mi catálogo, // Marketplace, Mis solicitudes, Reconocimientos, Historial. // Cliente piloto: Atica · sede Cali. // Stack: React 18 UMD + Babel standalone. Cuelga en window.Benefits. // ────────────────────────────────────────────────────────────────────── const _bn_useState = React.useState; const _bn_useMemo = React.useMemo; const _bn_useEffect = React.useEffect; // Hoy de referencia · alineado con CLAUDE.md currentDate (2026-05-06). const _BN_HOY = new Date(2026, 4, 6); // Formatos const fmtCOP = (n) => { if (n == null || n === '') return '—'; return '$ ' + n.toLocaleString('es-CO'); }; const fmtPuntos = (n) => (n || 0).toLocaleString('es-CO') + ' pts'; // Colaborador "logueado" para la vista colaborador (mock). // Lina Tobón · Operaria de Clasificación · Cali · joven con 3.5 años de antigüedad const _BN_ME_ID = 'E0312'; // ─── Marketplace · productos canjeables por puntos ────────────────── const MARKETPLACE = [ { id: 'MKT-001', nombre: 'Voucher Olímpica $30.000', emoji: '🛒', puntos: 200, stock: 24, categoria: 'cat-alimento', descripcion: 'Bono para mercado · vence 60 días después del canje.' }, { id: 'MKT-002', nombre: 'Vale CinéColombia familiar', emoji: '🎬', puntos: 350, stock: 12, categoria: 'cat-tiempo', descripcion: '4 entradas + crispetas grandes en cualquier sede de Cali.' }, { id: 'MKT-003', nombre: 'Paquete bienestar Smartfit', emoji: '💪', puntos: 800, stock: 8, categoria: 'cat-bienestar', descripcion: '1 mes de gimnasio en Smartfit Cali o Barranquilla.' }, { id: 'MKT-004', nombre: 'Mercado adicional $60K', emoji: '🛍️', puntos: 600, stock: 18, categoria: 'cat-alimento', descripcion: 'Bono extra de mercado fuera del beneficio mensual.' }, { id: 'MKT-005', nombre: 'Día simbólico extra', emoji: '🌴', puntos: 400, stock: 30, categoria: 'cat-tiempo', descripcion: 'Día libre extra al año (además del simbólico anual).' }, { id: 'MKT-006', nombre: 'Termo Atica edición limitada',emoji: '🥤', puntos: 120, stock: 60, categoria: 'cat-reconoce', descripcion: 'Termo grabado con tu nombre · capacidad 750ml.' }, { id: 'MKT-007', nombre: 'Material procesado fresco · 2 kg', emoji: '♻️', puntos: 90, stock: 80, categoria: 'cat-alimento', descripcion: 'Bolsa de 2kg directo de planta · trituración a tu gusto.' }, { id: 'MKT-008', nombre: 'Donación · Banco Arquidiocesano',emoji: '💝',puntos: 80, stock: 999,categoria: 'cat-reconoce', descripcion: 'Donamos $30.000 a tu nombre al banco de alimentos.' }, { id: 'MKT-009', nombre: 'Voucher EAFIT ed. continua', emoji: '🎓', puntos: 1000, stock: 5, categoria: 'cat-educacion', descripcion: '20% descuento en cualquier diplomado · sumable al beneficio anual.' }, { id: 'MKT-010', nombre: 'Pase doble cine + cena', emoji: '🍿', puntos: 550, stock: 10, categoria: 'cat-tiempo', descripcion: '2 entradas de cine + cena en restaurante aliado del Centro.' }, { id: 'MKT-011', nombre: 'Auxilio gimnasio anual', emoji: '🏋️', puntos: 1200, stock: 6, categoria: 'cat-bienestar', descripcion: '12 mensualidades pagadas + matrícula gratis en Smartfit.' }, { id: 'MKT-012', nombre: 'Camiseta Atica bordada', emoji: '👕', puntos: 250, stock: 40, categoria: 'cat-reconoce', descripcion: 'Camiseta con tu nombre y años de antigüedad bordados.' }, ]; // ─── Top component ───────────────────────────────────────────────── const Benefits = () => { const [persona, setPersona] = _bn_useState('admin'); const [tab, setTab] = _bn_useState('catalogo'); const [meSection, setMeSection] = _bn_useState('inicio'); const [openBeneficio, setOpenBeneficio] = _bn_useState(null); const [openMkt, setOpenMkt] = _bn_useState(null); const [openRecog, setOpenRecog] = _bn_useState(false); const [openSolicitud, setOpenSolicitud] = _bn_useState(null); const [openEditor, setOpenEditor] = _bn_useState(null); // null | 'new' | beneficio para editar const [openMktEditor, setOpenMktEditor] = _bn_useState(null); // null | 'new' | producto para editar const [openCampEditor, setOpenCampEditor] = _bn_useState(null); // null | 'new' | campaña para editar // Estado mutable de catálogo de beneficios (creación / edición) const [beneficiosState, setBeneficiosState] = _bn_useState(() => [...(window.BENEFICIOS_CATALOG || [])]); // Estado mutable de productos del marketplace const [marketplaceState, setMarketplaceState] = _bn_useState(() => [...MARKETPLACE]); // Estado mutable de campañas de bienestar const [campanasState, setCampanasState] = _bn_useState(() => [...(window.CAMPANAS_BIENESTAR || [])]); // Estado mutable de solicitudes y wallet (para flujos demo) const [solicitudes, setSolicitudes] = _bn_useState(() => [...(window.BENEFICIOS_SOLICITUDES || [])]); const [wallet, setWallet] = _bn_useState(() => JSON.parse(JSON.stringify(window.WALLET_PUNTOS || {}))); const [reconocimientosBN, setReconocimientosBN] = _bn_useState(() => [ { id: 'RC-001', deId: 'E0023', paraId: 'E0205', valorId: 'val-pasion', mensaje: 'Su lote 12 marcó un cup score de 87 puntos · récord interno.', cuando: '18/04/2026', puntos: 150 }, { id: 'RC-002', deId: 'E0023', paraId: 'E0246', valorId: 'val-calidad', mensaje: 'Reportó un desajuste de aprovechamiento que evitó devolución del cliente.', cuando: '02/05/2026', puntos: 100 }, { id: 'RC-003', deId: 'E0023', paraId: 'E0128', valorId: 'val-compromiso', mensaje: 'Cubrió el turno de Barranquilla sin previo aviso · entrega a tiempo.', cuando: '02/05/2026', puntos: 190 }, { id: 'RC-004', deId: 'E0067', paraId: 'E0205', valorId: 'val-pasion', mensaje: 'Mentor del nuevo Gestor ambiental · paciente y técnico.', cuando: '12/04/2026', puntos: 100 }, { id: 'RC-005', deId: 'E0023', paraId: 'E0312', valorId: 'val-calidad', mensaje: 'Detectó un defecto de clasificación por color · evitó 30kg perdidos.', cuando: '20/04/2026', puntos: 60 }, ]); // Datos const empleados = window.BENEFICIOS_EMPLEADOS_DEMO || []; const beneficios = beneficiosState; const categorias = window.BENEFICIOS_CATEGORIAS || []; const matriz = window.MATRIZ_BENEFICIOS_CARGO || []; const cargos = window.CARGOS || []; const valores = window.VALORES_AGUILA || []; const convenios = window.CONVENIOS || []; const campanas = campanasState; const marketplace = marketplaceState; const me = empleados.find(e => e.id === _BN_ME_ID); const meCargo = me ? (window.getCargo && window.getCargo(me.cargoId)) : null; const meWallet = wallet[_BN_ME_ID] || { balance: 0, total: 0, transacciones: [] }; // KPIs admin const kpis = _bn_useMemo(() => { const beneficiosActivos = beneficios.length; const totalEmpleados = empleados.length; const conBeneficio = empleados.filter(e => beneficios.some(b => window.esElegibleBeneficio && window.esElegibleBeneficio(e, b))).length; const adopcion = totalEmpleados ? Math.round(conBeneficio / totalEmpleados * 100) : 0; // Gasto YTD = costoEmpresa de obligatorios y solicitudes aprobadas const obligatorios = matriz.filter(m => m.regla === 'obligatorio').length; const gasto = obligatorios * 65000 + solicitudes.filter(s => s.estado !== 'rechazada' && s.estado !== 'pendiente').reduce((acc, s) => { const b = beneficios.find(x => x.id === s.beneficioId); return acc + (b ? b.costoEmpresa : 0); }, 0); return { beneficiosActivos, adopcion, conBeneficio, totalEmpleados, gasto, nps: 71 }; }, [solicitudes, beneficios, matriz, empleados]); // Eventos del calendario (próximos 60 días) const eventos = _bn_useMemo(() => (window.calcularEventosCalendario ? window.calcularEventosCalendario(60, _BN_HOY) : []), []); // ─── Handlers comunes ───────────────────────────────────── const guardarBeneficio = (datos, idEdicion) => { if (idEdicion) { // Edición de beneficio existente setBeneficiosState(prev => prev.map(b => b.id === idEdicion ? { ...b, ...datos, id: idEdicion } : b)); } else { // Creación · genera ID secuencial sobre el último BEN-NNN const maxNum = beneficiosState.reduce((m, b) => { const n = parseInt((b.id || '').replace(/^BEN-0*/, ''), 10); return isNaN(n) ? m : Math.max(m, n); }, 0); const nuevoId = 'BEN-' + String(maxNum + 1).padStart(3, '0'); setBeneficiosState(prev => [...prev, { ...datos, id: nuevoId }]); } }; const guardarProducto = (datos, idEdicion) => { if (idEdicion) { setMarketplaceState(prev => prev.map(p => p.id === idEdicion ? { ...p, ...datos, id: idEdicion } : p)); } else { const maxNum = marketplaceState.reduce((m, p) => { const n = parseInt((p.id || '').replace(/^MKT-0*/, ''), 10); return isNaN(n) ? m : Math.max(m, n); }, 0); const nuevoId = 'MKT-' + String(maxNum + 1).padStart(3, '0'); setMarketplaceState(prev => [...prev, { ...datos, id: nuevoId }]); } }; const guardarCampana = (datos, idEdicion) => { if (idEdicion) { setCampanasState(prev => prev.map(c => c.id === idEdicion ? { ...c, ...datos, id: idEdicion } : c)); } else { const maxNum = campanasState.reduce((m, c) => { const n = parseInt((c.id || '').replace(/^CAM-0*/, ''), 10); return isNaN(n) ? m : Math.max(m, n); }, 0); const nuevoId = 'CAM-' + String(maxNum + 1).padStart(3, '0'); const completo = { ...datos, id: nuevoId, kpis: datos.kpis || { participacion: 0, meta: datos.meta || 100, satisfaccion: null }, }; setCampanasState(prev => [...prev, completo]); } }; const aprobarSolicitud = (id, aprobador = 'Carolina Restrepo S.') => { setSolicitudes(prev => prev.map(s => s.id === id ? { ...s, estado: 'aprobada', fechaResolucion: '06/05/2026 09:00', aprobador } : s)); }; const rechazarSolicitud = (id, comentario = 'No cumple criterios.', aprobador = 'Carolina Restrepo S.') => { setSolicitudes(prev => prev.map(s => s.id === id ? { ...s, estado: 'rechazada', fechaResolucion: '06/05/2026 09:00', aprobador, comentario: comentario || s.comentario } : s)); }; const crearSolicitud = (empleadoId, beneficioId, comentario = '') => { const id = 'SOL-' + String(solicitudes.length + 1).padStart(3, '0'); setSolicitudes(prev => [...prev, { id, empleadoId, beneficioId, estado: 'pendiente', fechaSolicitud: '06/05/2026 09:00', fechaResolucion: null, aprobador: null, comentario, vencimientoSLA: '08/05/2026 09:00', }]); }; const canjearMarketplace = (empleadoId, mkt) => { const w = wallet[empleadoId] || { balance: 0, total: 0, transacciones: [] }; if (w.balance < mkt.puntos) return false; setWallet(prev => ({ ...prev, [empleadoId]: { balance: w.balance - mkt.puntos, total: w.total, transacciones: [ { fecha: '06/05/2026', tipo: 'debito', monto: mkt.puntos, motivo: 'Canje · ' + mkt.nombre }, ...w.transacciones, ], } })); return true; }; const enviarReconocimiento = (deId, paraId, valorId, mensaje, puntos = 100) => { const id = 'RC-' + String(reconocimientosBN.length + 1).padStart(3, '0'); setReconocimientosBN(prev => [ { id, deId, paraId, valorId, mensaje, cuando: '06/05/2026', puntos }, ...prev, ]); // Suma puntos al receptor setWallet(prev => { const w = prev[paraId] || { balance: 0, total: 0, transacciones: [] }; return { ...prev, [paraId]: { balance: w.balance + puntos, total: (w.total || 0) + puntos, transacciones: [ { fecha: '06/05/2026', tipo: 'credito', monto: puntos, motivo: 'Reconocimiento · ' + ((window.getValor && window.getValor(valorId))?.nombre || 'Atica') }, ...w.transacciones, ], } }; }); }; // ─── Configuración de tabs admin ─────────────────────────── const TABS = [ { id: 'catalogo', label: 'Catálogo', icon: 'IconGift', pill: beneficios.length }, { id: 'marketplace', label: 'Marketplace', icon: 'IconStar', pill: marketplace.length }, { id: 'solicitudes', label: 'Solicitudes', icon: 'IconCheck', pill: solicitudes.filter(s => s.estado === 'pendiente').length, pillTone: 'rose' }, { id: 'matriz', label: 'Matriz', icon: 'IconShield', pill: cargos.length }, { id: 'campanas', label: 'Campañas', icon: 'IconMegaphone', pill: campanas.filter(c => c.estado === 'activa').length }, { id: 'reconocimientos', label: 'Reconocimientos', icon: 'IconStar', pill: reconocimientosBN.length }, { id: 'analitica', label: 'Analítica', icon: 'IconBarChart' }, ]; // ─── Render ───────────────────────────────────────────────── return (

Beneficios corporativos

{kpis.beneficiosActivos} beneficios activos · {kpis.adopcion}% adopción · {kpis.conBeneficio}/{kpis.totalEmpleados} colaboradores con plan · {fmtCOP(kpis.gasto)} en YTD
{persona === 'admin' ? ( setOpenRecog(true)} onOpenMkt={setOpenMkt} marketplace={marketplace} onNewBeneficio={() => setOpenEditor('new')} onEditBeneficio={(b) => setOpenEditor(b)} onNewProducto={() => setOpenMktEditor('new')} onEditProducto={(p) => setOpenMktEditor(p)} onNewCampana={() => setOpenCampEditor('new')} onEditCampana={(c) => setOpenCampEditor(c)} /> ) : ( e.empleadoId === _BN_ME_ID)} campanas={campanas} marketplace={marketplace} solicitudes={solicitudes.filter(s => s.empleadoId === _BN_ME_ID)} reconocimientosRecibidos={reconocimientosBN.filter(r => r.paraId === _BN_ME_ID)} reconocimientosDados={reconocimientosBN.filter(r => r.deId === _BN_ME_ID)} valores={valores} onOpenBen={setOpenBeneficio} onOpenMkt={setOpenMkt} onOpenRecog={() => setOpenRecog(true)} onSolicitar={(beneficioId) => { crearSolicitud(_BN_ME_ID, beneficioId); }} onCanjear={(mkt) => canjearMarketplace(_BN_ME_ID, mkt)} /> )} {openBeneficio && ( setOpenBeneficio(null)} onSolicitar={(comentario) => { crearSolicitud(_BN_ME_ID, openBeneficio.id, comentario); setOpenBeneficio(null); }} /> )} {openMkt && ( setOpenMkt(null)} onConfirm={() => { const ok = canjearMarketplace(_BN_ME_ID, openMkt); if (ok) setOpenMkt(null); }} /> )} {openRecog && ( setOpenRecog(false)} onSend={(paraId, valorId, mensaje, puntos) => { enviarReconocimiento(persona === 'colaborador' ? _BN_ME_ID : 'E0023', paraId, valorId, mensaje, puntos); setOpenRecog(false); }} isAdmin={persona === 'admin'} /> )} {openSolicitud && ( setOpenSolicitud(null)} onAprobar={() => { aprobarSolicitud(openSolicitud.id); setOpenSolicitud(null); }} onRechazar={(motivo) => { rechazarSolicitud(openSolicitud.id, motivo); setOpenSolicitud(null); }} /> )} {openEditor && ( setOpenEditor(null)} onSave={(datos) => { guardarBeneficio(datos, openEditor === 'new' ? null : openEditor.id); setOpenEditor(null); }} /> )} {openMktEditor && ( setOpenMktEditor(null)} onSave={(datos) => { guardarProducto(datos, openMktEditor === 'new' ? null : openMktEditor.id); setOpenMktEditor(null); }} /> )} {openCampEditor && ( setOpenCampEditor(null)} onSave={(datos) => { guardarCampana(datos, openCampEditor === 'new' ? null : openCampEditor.id); setOpenCampEditor(null); }} /> )}
); }; // ══════════════════════════════════════════════════════════════════════ // ─── ADMIN VIEW ───────────────────────────────────────────────────── // ══════════════════════════════════════════════════════════════════════ const AdminView = (props) => { const { tab, setTab, TABS, kpis, eventos, beneficios, categorias, matriz, cargos, empleados, solicitudes, campanas, convenios, reconocimientosBN, valores, wallet, marketplace, onOpenBen, onOpenSolicitud, aprobarSolicitud, rechazarSolicitud, onOpenRecog, onOpenMkt, onNewBeneficio, onEditBeneficio, onNewProducto, onEditProducto, onNewCampana, onEditCampana } = props; return ( {/* ─── KPIs (todos los tabs) ─── */}
{kpis.beneficiosActivos}
Beneficios activos
{categorias.length} categorías · {convenios.length} convenios
{kpis.adopcion}%
Adopción
{kpis.conBeneficio} de {kpis.totalEmpleados} colaboradores
{fmtCOP(kpis.gasto)}
Gasto YTD
obligatorios + solicitudes aprobadas
{kpis.nps}NPS
Satisfacción
pulso interno · abr/2026
{/* ─── Tabs ─── */}
{TABS.map(t => { const I = window[t.icon]; return ( ); })}
{/* ─── Tab content ─── */} {tab === 'catalogo' && } {tab === 'marketplace' && } {tab === 'solicitudes' && } {tab === 'matriz' && } {tab === 'campanas' && } {tab === 'reconocimientos' && } {tab === 'analitica' && } ); }; // ══════════════════════════════════════════════════════════════════════ // ─── CATALOGO TAB ─────────────────────────────────────────────────── // ══════════════════════════════════════════════════════════════════════ const CatalogoTab = ({ beneficios, categorias, matriz, cargos, onOpen, onCreate, onEdit }) => { const [q, setQ] = _bn_useState(''); const [catFilter, setCatFilter] = _bn_useState('todos'); const [trigFilter, setTrigFilter] = _bn_useState('todos'); const filtrados = beneficios.filter(b => { if (catFilter !== 'todos' && b.categoriaId !== catFilter) return false; if (trigFilter === 'auto' && !b.esAutomatico) return false; if (trigFilter === 'solicitud' && b.esAutomatico) return false; if (q && !(b.nombre + ' ' + b.descripcion + ' ' + b.proveedor).toLowerCase().includes(q.toLowerCase())) return false; return true; }); return (

Catálogo de beneficios

{beneficios.length} beneficios configurados · click en una tarjeta para ver el detalle, o en Editar para modificar.
{onCreate && ( )}
setQ(e.target.value)} />
{categorias.map(c => ( ))} Disparador:
{filtrados.map(b => { const cat = categorias.find(c => c.id === b.categoriaId) || {}; const cargosObligatorios = matriz.filter(m => m.beneficioId === b.id && m.regla === 'obligatorio').length; return (
onOpen(b)}>
{b.esAutomatico && } {b.destacado && } {onEdit && ( )}
{b.emoji}
{b.nombre}
{cat.emoji} {cat.nombre} · {b.proveedor}
{b.descripcion}
{b.costoEmpresa > 0 ? {fmtCOP(b.costoEmpresa)} : Sin costo directo} · {cargosObligatorios > 0 ? `${cargosObligatorios} cargos` : 'opcional'} {b.puntos > 0 && {b.puntos}}
); })} {filtrados.length === 0 && (
No hay beneficios que coincidan con tu búsqueda.
)}
); }; // ══════════════════════════════════════════════════════════════════════ // ─── MARKETPLACE TAB (admin · vista catálogo de productos) ────────── // ══════════════════════════════════════════════════════════════════════ const MarketplaceTab = ({ marketplace, onOpen, onCreate, onEdit }) => { const [q, setQ] = _bn_useState(''); const filtrados = marketplace.filter(m => !q || (m.nombre + ' ' + m.descripcion).toLowerCase().includes(q.toLowerCase())); return (

Marketplace de canjes

{marketplace.length} productos · stock total: {marketplace.reduce((a, m) => a + m.stock, 0)} unidades.
{onCreate && ( )}
setQ(e.target.value)} />
{filtrados.length} de {marketplace.length}
{filtrados.map(m => (
onOpen(m)} style={{ cursor: 'pointer', position: 'relative' }}> {onEdit && ( )}
{m.emoji}
{m.nombre}
Stock: {m.stock}
{m.descripcion}
{fmtPuntos(m.puntos)} {m.id}
))}
); }; // ══════════════════════════════════════════════════════════════════════ // ─── SOLICITUDES TAB ──────────────────────────────────────────────── // ══════════════════════════════════════════════════════════════════════ const SolicitudesTab = ({ solicitudes, beneficios, empleados, onOpen, aprobar, rechazar }) => { const [filtro, setFiltro] = _bn_useState('pendiente'); const filtradas = solicitudes.filter(s => filtro === 'todas' || s.estado === filtro); const conteos = { pendiente: solicitudes.filter(s => s.estado === 'pendiente').length, aprobada: solicitudes.filter(s => s.estado === 'aprobada').length, rechazada: solicitudes.filter(s => s.estado === 'rechazada').length, entregada: solicitudes.filter(s => s.estado === 'entregada').length, }; const slaInfo = (sol) => { // Calcula avance del SLA en porcentaje (mock) const horasSLA = sol.beneficioId === 'BEN-008' ? 168 : 48; const diff = sol.estado === 'pendiente' ? 36 : 12; const pct = Math.min(100, Math.round(diff / horasSLA * 100)); let tone = 'green'; if (pct > 60) tone = 'amber'; if (pct > 90) tone = 'rose'; return { pct, tone, restante: Math.max(0, horasSLA - diff) }; }; return (
{filtradas.map(s => { const e = empleados.find(x => x.id === s.empleadoId); const b = beneficios.find(x => x.id === s.beneficioId); const cat = window.getCategoria && window.getCategoria(b?.categoriaId); const sla = slaInfo(s); return ( onOpen(s)} style={{ cursor: 'pointer' }}> ); })} {filtradas.length === 0 && ( )}
Colaborador Beneficio Solicitado SLA Estado
{e?.iniciales || '–'}
{e?.nombre || s.empleadoId}
{e?.area} · {e?.sede}
{b?.emoji}
{b?.nombre || s.beneficioId}
{cat?.nombre}
 {s.fechaSolicitud} {s.estado === 'pendiente' ? (
{sla.restante}h
) : —} 		{s.estado === 'pendiente' ? (
) : ( )}
No hay solicitudes en este estado.
); }; const EstadoPill = ({ estado }) => { const map = { pendiente: { tone: 'amber-soft', label: 'Pendiente' }, aprobada: { tone: 'green', label: 'Aprobada' }, rechazada: { tone: 'rose', label: 'Rechazada' }, entregada: { tone: 'navy', label: 'Entregada' }, vencida: { tone: 'rose', label: 'Vencida' }, }; const m = map[estado] || { tone: '', label: estado }; return {m.label}; }; // ══════════════════════════════════════════════════════════════════════ // ─── MATRIZ TAB ───────────────────────────────────────────────────── // ══════════════════════════════════════════════════════════════════════ const MatrizBeneficiosTab = ({ beneficios, cargos, matriz: matrizInicial, categorias }) => { const [matriz, setMatriz] = _bn_useState(matrizInicial); const [catFilter, setCatFilter] = _bn_useState('todos'); const beneficiosFiltrados = beneficios.filter(b => catFilter === 'todos' || b.categoriaId === catFilter); const REGLAS = ['obligatorio', 'opcional', 'no_aplica']; const SHORT = { obligatorio: 'O', opcional: '·', no_aplica: '—' }; const cellRegla = (cargoId, beneficioId) => { const r = matriz.find(m => m.cargoId === cargoId && m.beneficioId === beneficioId); return r ? r.regla : 'no_aplica'; }; const toggleCell = (cargoId, beneficioId) => { const idx = matriz.findIndex(m => m.cargoId === cargoId && m.beneficioId === beneficioId); const actual = idx >= 0 ? matriz[idx].regla : 'no_aplica'; const next = REGLAS[(REGLAS.indexOf(actual) + 1) % REGLAS.length]; if (idx >= 0) { const copy = [...matriz]; copy[idx] = { ...copy[idx], regla: next }; setMatriz(copy); } else { setMatriz(prev => [...prev, { cargoId, beneficioId, regla: next }]); } }; return (
Categoría: {categorias.map(c => ( ))} Click en cada celda para alternar entre obligatorio, opcional y no aplica.
{cargos.map(c => ( ))} {beneficiosFiltrados.map(b => { const cat = categorias.find(c => c.id === b.categoriaId) || {}; return ( {cargos.map(c => { const regla = cellRegla(c.id, b.id); return ( ); })} ); })}
Beneficio · Cargo →
{c.nombre} ({c.headcount})
{b.emoji}
{b.nombre}
{cat.nombre}
Obligatorio · se asigna automáticamente al ingreso Opcional · aparece en catálogo del colaborador No aplica · no se muestra
); }; // ══════════════════════════════════════════════════════════════════════ // ─── CAMPAÑAS TAB ─────────────────────────────────────────────────── // ══════════════════════════════════════════════════════════════════════ const CampanasTab = ({ campanas, eventos, empleados, beneficios, onCreate, onEdit }) => { const activas = campanas.filter(c => c.estado === 'activa'); const planificadas = campanas.filter(c => c.estado === 'planificada'); const finalizadas = campanas.filter(c => c.estado === 'finalizada'); return (

Campañas de bienestar

{activas.length} activas · {planificadas.length} planificadas · {finalizadas.length} finalizadas.
{onCreate && ( )}

Próximos eventos automáticos · 60 días

{/* Eventos automáticos · cumpleaños y aniversarios */}
{eventos.slice(0, 6).map((ev, i) => { const e = empleados.find(x => x.id === ev.empleadoId); const b = beneficios.find(x => x.id === ev.beneficioId); const tipo = ev.tipo === 'cumple' ? 'Cumpleaños' : `Aniversario ${ev.anios} año${ev.anios > 1 ? 's' : ''}`; return (
{ev.tipo === 'cumple' ? '🎂' : '🏅'}
{tipo} · {e?.nombre}
{ev.dias === 0 ? 'Hoy' : `En ${ev.dias} día${ev.dias > 1 ? 's' : ''}`} · {b?.nombre}
Disparador automático del motor · sin intervención manual.
); })}
{/* Campañas activas */} {activas.length > 0 && } {planificadas.length > 0 && } {finalizadas.length > 0 && }
); }; const SeccionCampanas = ({ titulo, campanas, beneficios, onEdit }) => (

{titulo} · {campanas.length}

{campanas.map(c => (
{onEdit && ( )}
{c.emoji}
{c.nombre}
{c.fechaInicio} → {c.fechaFin} · {c.audiencia}
{c.descripcion}
Presupuesto: {fmtCOP(c.presupuesto)} Beneficios: {(c.beneficiosAsociados || []).map(bid => { const b = beneficios.find(x => x.id === bid); return b ? {b.emoji} : null; })}
{c.kpis.participacion}
Participación
{c.kpis.meta}
Meta
{c.kpis.satisfaccion != null ? c.kpis.satisfaccion + '%' : '—'}
Satisfacción
))}
); // ══════════════════════════════════════════════════════════════════════ // ─── RECONOCIMIENTOS TAB ──────────────────────────────────────────── // ══════════════════════════════════════════════════════════════════════ const ReconocimientosTab = ({ reconocimientos, empleados, valores, onCreate }) => { const ranking = _bn_useMemo(() => { const counts = {}; reconocimientos.forEach(r => { counts[r.paraId] = (counts[r.paraId] || 0) + 1; }); return Object.entries(counts) .map(([id, n]) => ({ empleado: empleados.find(e => e.id === id), reconocimientos: n })) .filter(x => x.empleado) .sort((a, b) => b.reconocimientos - a.reconocimientos) .slice(0, 5); }, [reconocimientos, empleados]); return (

Reconocimientos peer-to-peer

{reconocimientos.length} reconocimientos · suman {reconocimientos.reduce((a, r) => a + r.puntos, 0)} pts a los wallets de los receptores.
{/* Ranking */}
Top 5 personas reconocidas este mes
{ranking.map((r, i) => (
{['🥇','🥈','🥉','🏅','🏅'][i]}
{r.empleado.iniciales}
{r.empleado.nombre}
{r.reconocimientos} reconocimiento{r.reconocimientos > 1 ? 's' : ''}
))}
{/* Feed */}
{reconocimientos.map(r => { const de = empleados.find(e => e.id === r.deId); const para = empleados.find(e => e.id === r.paraId); const v = valores.find(x => x.id === r.valorId) || {}; return (
{de?.iniciales}
{de?.nombre.split(' ')[0]} →
{para?.iniciales}
{para?.nombre.split(' ')[0]}
"{r.mensaje}"
{v.emoji} {v.nombre} +{r.puntos} pts · {r.cuando}
); })}
); }; // ══════════════════════════════════════════════════════════════════════ // ─── ANALITICA TAB ────────────────────────────────────────────────── // ══════════════════════════════════════════════════════════════════════ const AnaliticaTab = ({ beneficios, categorias, solicitudes, matriz, cargos, empleados, kpis, wallet }) => { // Top 10 beneficios por uso (mock: cuántos cargos lo tienen como obligatorio + suma headcount) const topUso = _bn_useMemo(() => { return beneficios.map(b => { const obligatorios = matriz.filter(m => m.beneficioId === b.id && m.regla === 'obligatorio'); const headcount = obligatorios.reduce((acc, m) => acc + (cargos.find(c => c.id === m.cargoId)?.headcount || 0), 0); return { b, headcount }; }).sort((a, b) => b.headcount - a.headcount).slice(0, 10); }, [beneficios, matriz, cargos]); // Adopción por categoría const adopcionCat = _bn_useMemo(() => { return categorias.map(c => { const benefitsC = beneficios.filter(b => b.categoriaId === c.id); const total = benefitsC.length; const obligatorios = benefitsC.filter(b => matriz.some(m => m.beneficioId === b.id && m.regla === 'obligatorio')).length; return { c, total, obligatorios, ratio: total ? Math.round(obligatorios / total * 100) : 0 }; }); }, [categorias, beneficios, matriz]); // Heatmap: adopción por área x sede (mock con headcount) const areas = ['Operaciones', 'Aprovechamiento', 'Mantenimiento', 'Calidad', 'RRHH', 'Compras', 'Logística']; const sedes = ['Cali', 'Barranquilla']; const heat = _bn_useMemo(() => { return areas.map(a => sedes.map(s => { const emps = empleados.filter(e => e.area === a && e.sede === s); if (!emps.length) return null; // mock adopción: 70-95% según área const adopcion = 70 + (a.length * 3) % 26; return { area: a, sede: s, adopcion, n: emps.length }; })); }, [empleados]); const heatColor = (v) => { if (v == null) return '#F1F1F4'; if (v >= 90) return '#0E8A57'; if (v >= 80) return '#14B871'; if (v >= 70) return '#F4B400'; return '#EF435C'; }; // Saldos wallet · top 5 const topWallet = _bn_useMemo(() => { return Object.entries(wallet || {}) .map(([id, w]) => ({ empleado: empleados.find(e => e.id === id), balance: w.balance })) .filter(x => x.empleado) .sort((a, b) => b.balance - a.balance) .slice(0, 5); }, [wallet, empleados]); return (
{/* Fila 1 · Top 10 + Adopción categoría */}

Top 10 beneficios por cobertura

{topUso.map(({ b, headcount }) => { const max = topUso[0]?.headcount || 1; return (
{b.emoji}{b.nombre}
{headcount}
); })}

Adopción por categoría

{adopcionCat.map(({ c, total, obligatorios, ratio }) => (
{c.emoji}{c.nombre}
{obligatorios}/{total}
))}
{/* Fila 2 · Heatmap + Top wallet */}

Adopción por área × sede

{sedes.map(s =>
{s}
)} {areas.map((a, ai) => (
{a}
{sedes.map((s, si) => { const cell = heat[ai][si]; return (
{cell ? `${cell.adopcion}%` : '–'}
); })} ))}
≥90% ≥80% ≥70% {'<70%'}

Top wallets · saldos actuales

{topWallet.map(({ empleado, balance }) => { const max = topWallet[0]?.balance || 1; return (
{empleado.iniciales}
{empleado.nombre.split(' ')[0]} {empleado.nombre.split(' ')[1]}
{balance}
); })}
ROI estimado del módulo
(ahorro_rotación + productividad) / gasto_total
3.4×
Reducción 12% en rotación · uplift 8% en NPS interno · gasto YTD {fmtCOP(kpis.gasto)}
); }; // ══════════════════════════════════════════════════════════════════════ // ─── COLABORADOR VIEW ─────────────────────────────────────────────── // ══════════════════════════════════════════════════════════════════════ const ColaboradorView = (props) => { const { me, meCargo, meWallet, section, setSection, beneficios, categorias, eventos, campanas, marketplace, solicitudes, reconocimientosRecibidos, reconocimientosDados, valores, onOpenBen, onOpenMkt, onOpenRecog, onSolicitar, onCanjear } = props; if (!me) return
No hay un colaborador asociado.
; // Beneficios elegibles para mí const misBeneficios = beneficios.filter(b => window.esElegibleBeneficio && window.esElegibleBeneficio(me, b)); const obligatorios = misBeneficios.filter(b => { const r = (window.MATRIZ_BENEFICIOS_CARGO || []).find(m => m.cargoId === me.cargoId && m.beneficioId === b.id); return r && r.regla === 'obligatorio'; }); const opcionales = misBeneficios.filter(b => !obligatorios.includes(b)); const destacados = misBeneficios.filter(b => b.destacado); const badgesUser = (window.badgesDeEmpleado && window.badgesDeEmpleado(me.id)) || []; const SECCIONES = [ { id: 'inicio', label: 'Inicio', icon: 'IconHome', count: null }, { id: 'mi-catalogo', label: 'Mi catálogo', icon: 'IconGift', count: misBeneficios.length }, { id: 'marketplace', label: 'Marketplace', icon: 'IconStar', count: marketplace.length }, { id: 'mis-solicitudes',label: 'Mis solicitudes', icon: 'IconCheck', count: solicitudes.length }, { id: 'reconocimientos',label: 'Mis reconocimientos', icon: 'IconStar', count: reconocimientosRecibidos.length }, { id: 'historial', label: 'Historial', icon: 'IconClock', count: meWallet.transacciones.length }, ]; return (
{section === 'inicio' && (

Hola, {me.nombre.split(' ')[0]} 👋

Tu plan de beneficios Atica · {meCargo?.nombre} · Sede {me.sede}
{fmtPuntos(meWallet.balance)}
en tu wallet · canjéalos en marketplace
{eventos.length === 0 &&
No tienes eventos automáticos próximos.
} {eventos.slice(0, 3).map((ev, i) => { const tipo = ev.tipo === 'cumple' ? 'Tu cumpleaños' : `Aniversario ${ev.anios} año${ev.anios > 1 ? 's' : ''}`; const cuando = ev.dias === 0 ? 'Hoy' : `En ${ev.dias} día${ev.dias > 1 ? 's' : ''}`; return (
{ev.tipo === 'cumple' ? '🎂' : '🏅'}
{tipo}
Día libre + {ev.tipo === 'cumple' ? 100 : 250} pts al wallet
{cuando}
); })}
{destacados.length > 0 && (

Destacados para ti ⭐

{destacados.map(b => c.id === b.categoriaId)} onClick={() => onOpenBen(b)} />)}
)}

Campañas activas en mayo

{campanas.filter(c => c.estado === 'activa').slice(0, 3).map(c => (
{c.emoji}
{c.nombre}
{c.fechaInicio} → {c.fechaFin}
{c.descripcion}
))}
)} {section === 'mi-catalogo' && (

Mis beneficios obligatorios {obligatorios.length}

{obligatorios.map(b => c.id === b.categoriaId)} onClick={() => onOpenBen(b)} forcedFlag="ya tienes" />)}

Beneficios opcionales para ti {opcionales.length}

{opcionales.map(b => c.id === b.categoriaId)} onClick={() => onOpenBen(b)} />)}
)} {section === 'marketplace' && (

Marketplace de canjes

Tienes {fmtPuntos(meWallet.balance)} disponibles
{marketplace.map(m => { const puede = meWallet.balance >= m.puntos; return (
{m.emoji}
{m.nombre}
Stock: {m.stock}
{m.descripcion}
{fmtPuntos(m.puntos)}
); })}
)} {section === 'mis-solicitudes' && (

Mis solicitudes {solicitudes.length}

{solicitudes.length === 0 ? (
Aún no has hecho ninguna solicitud.
) : (
{solicitudes.map(s => { const b = beneficios.find(x => x.id === s.beneficioId); return (
{b?.emoji}
{s.fechaSolicitud.split(' ')[0]}
{b?.nombre}
"{s.comentario}"
); })}
)}
)} {section === 'reconocimientos' && (

Mis reconocimientos

Recibidos · {reconocimientosRecibidos.length}

{reconocimientosRecibidos.length === 0 &&
Aún no has recibido reconocimientos. ¡Sigue así!
} {reconocimientosRecibidos.map(r => { const v = valores.find(x => x.id === r.valorId) || {}; return (
"{r.mensaje}"
{v.emoji} {v.nombre} +{r.puntos} pts · {r.cuando}
); })}

Dados · {reconocimientosDados.length}

{reconocimientosDados.length === 0 &&
No has dado reconocimientos. ¡Anima a un colega!
} {reconocimientosDados.map(r => { const v = valores.find(x => x.id === r.valorId) || {}; return (
"{r.mensaje}"
{v.emoji} {v.nombre} {r.cuando}
); })}
)} {section === 'historial' && (

Movimientos del wallet

{meWallet.transacciones.map((t, i) => (
{t.fecha}
{t.motivo}
{t.tipo === 'credito' ? 'Crédito' : 'Débito'} en wallet
{t.tipo === 'credito' ? '+' : '−'}{t.monto} pts
))}
)}
); }; // Tarjeta reutilizable de beneficio const BeneficioCard = ({ b, cat, onClick, forcedFlag }) => (
{forcedFlag && {forcedFlag}} {!forcedFlag && b.esAutomatico && } {b.destacado && }
{b.emoji}
{b.nombre}
{cat?.emoji} {cat?.nombre} · {b.proveedor}
{b.descripcion}
{b.modalidad === 'unico' ? 'Único' : b.modalidad === 'mensual' ? 'Mensual' : b.modalidad === 'anual' ? 'Anual' : 'Por evento'} {b.puntos > 0 && {b.puntos}}
); // ══════════════════════════════════════════════════════════════════════ // ─── MODALES ─────────────────────────────────────────────────────── // ══════════════════════════════════════════════════════════════════════ const BeneficioModal = ({ beneficio, categorias, empleado, puedeSolicitar, onClose, onSolicitar }) => { const [comentario, setComentario] = _bn_useState(''); const cat = categorias.find(c => c.id === beneficio.categoriaId) || {}; _bn_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 (
e.stopPropagation()} style={{ maxWidth: 720 }}>
{beneficio.emoji}

{beneficio.nombre}

{cat.emoji} {cat.nombre} · {beneficio.proveedor}

{beneficio.descripcion}

¿Cómo funciona?

{beneficio.faq}

{beneficio.elegMin && Object.keys(beneficio.elegMin).length > 0 && (

Requisitos

    {beneficio.elegMin.antiguedadMeses != null &&
  • Antigüedad mínima: {beneficio.elegMin.antiguedadMeses} meses
    • } {beneficio.elegMin.niveles &&
  • Nivel: {beneficio.elegMin.niveles.join(', ')}
    • } {beneficio.elegMin.areas &&
  • Áreas: {beneficio.elegMin.areas.join(', ')}
    • } {beneficio.elegMin.sedes &&
  • Sedes: {beneficio.elegMin.sedes.join(', ')}
    • }
)}
Costo empresa{fmtCOP(beneficio.costoEmpresa)}
Costo empleado{beneficio.costoEmpleado === 0 ? 'Gratis' : fmtCOP(beneficio.costoEmpleado)}
{beneficio.puntos > 0 &&
Puntos+{beneficio.puntos} pts
}
Modalidad{beneficio.modalidad}
Vigencia{beneficio.vigencia}
SLA aprobación{beneficio.sla > 0 ? `${beneficio.sla}h` : 'Inmediato'}
Disparador{beneficio.esAutomatico ? '⚡ Automático' : '✋ Por solicitud'}
{puedeSolicitar && !beneficio.esAutomatico && (

Solicitar este beneficio