/* Portal O-Lab — app de la Empresa. Expone window.EmpresaApp. */ (function () { const { useState, useEffect } = React; const { C, FONT, Icon, Avatar, Bar, Pill, Btn, Card, useIsMobile } = window.PORTAL_UI; const B = () => window.PORTAL_BACKEND; const SEED = () => window.PORTAL_SEED; const STAGE_META = { nuevo: { label: "Nuevo", bg: C.sand, border: C.line2, color: C.mut3, colBg: C.sand, colBd: C.line2, colColor: C.mut3 }, contactado: { label: "Contactado", bg: C.violetSoft, border: "#D9CDFF", color: C.violetDk, colBg: C.violetSoft, colBd: "#D9CDFF", colColor: C.violetDk }, entrevista: { label: "Entrevistado", bg: C.orangeSoft, border: "#FFC79A", color: C.orangeDk, colBg: C.orangeSoft, colBd: "#FFC79A", colColor: C.orangeDk }, contratado: { label: "Contratado", bg: C.greenBg, border: C.greenBd, color: C.green, colBg: C.greenBg, colBd: C.greenBd, colColor: C.green }, descartado: { label: "Descartado", bg: "#FDECEA", border: "#F5C6C0", color: "#C0392B", colBg: "#FDECEA", colBd: "#F5C6C0", colColor: "#C0392B" }, }; function EmpresaApp({ profile, onLogout, onSwitchRole, isAdmin }) { const mob = useIsMobile(); const company = Object.assign({}, SEED().company, profile || {}); const [tab, setTab] = useState("candidatos"); const [adminOpen, setAdminOpen] = useState(false); const AdminPanel = window.PORTAL_AdminModal; const [cands, setCands] = useState(() => SEED().candidates.map((c) => ({ ...c }))); const [contacts, setContacts] = useState(() => SEED().contacts.map((c) => ({ ...c }))); const [open, setOpen] = useState(null); // candidate id const [postOpen, setPostOpen] = useState(false); const [toast, setToast] = useState(""); // filtros const [f, setF] = useState({ lab: "Todas", prof: "Todas", city: "Todas", gender: "Todos", exp: "Todas", labs: "0", mode: "Todas", seek: "Todas" }); const [labCatalog, setLabCatalog] = useState([]); // catálogo real de laboratorios publicados // Catálogo de laboratorios publicados desde Project OS (talentPortal/labs/items). useEffect(() => { if (!B().subscribeLabs) return; return B().subscribeLabs((items) => setLabCatalog(Array.isArray(items) ? items : [])); }, []); useEffect(() => { B().candidateDirectory().then((r) => { if (r.source === "live" && r.candidates.length) { const avatars = ["linear-gradient(135deg,#FF6600,#FF3D7F)", "linear-gradient(135deg,#12C2E9,#6C4CF1)", "linear-gradient(135deg,#C6F24E,#0E8F5B)", "linear-gradient(135deg,#FF3D7F,#6C4CF1)"]; setCands(r.candidates.map((c, i) => ({ stage: "nuevo", avatarBg: avatars[i % 4], avatarColor: "#fff", matchColor: "#8B8194", skills: [], labList: [], ...c, }))); } }); }, []); function setStage(id, stage) { setCands((cs) => cs.map((c) => (c.id === id ? { ...c, stage } : c))); const c = cands.find((x) => x.id === id); if (c) B().logContact({ candidate: c, channel: "Sistema", note: "Cambio de etapa a " + STAGE_META[stage].label, stage: STAGE_META[stage].label }); } function logContact(cand, channel) { const now = new Date(); const stamp = String(now.getDate()).padStart(2, "0") + " ago · " + String(now.getHours()).padStart(2, "0") + ":" + String(now.getMinutes()).padStart(2, "0"); setContacts((cx) => [{ id: "k" + now.getTime(), name: cand.name, channel, date: stamp, note: "Contacto desde el perfil · vacante Operario de bodega", stage: STAGE_META[cand.stage === "nuevo" ? "contactado" : cand.stage].label }, ...cx]); if (cand.stage === "nuevo") setStage(cand.id, "contactado"); B().logContact({ candidate: cand, channel, stage: STAGE_META[cand.stage].label }); flash(channel + " registrado con " + cand.name); } function flash(msg) { setToast(msg); setTimeout(() => setToast(""), 2600); } // Nombre "base" de un lab: "Auditoría de bodega · 6/6" → "Auditoría de bodega". const labBase = (s) => String(s || "").split("·")[0].trim(); // Opciones del filtro: primero el catálogo real publicado; si no hay, la unión // de los laboratorios que traen los candidatos cargados. const catalogNames = labCatalog.map((l) => (l && (l.name || l.title || l.label)) || "").map(labBase).filter(Boolean); const candLabNames = new Set(); cands.forEach((c) => (c.labList || []).forEach((l) => { const n = labBase(l); if (n) candLabNames.add(n); })); const labOptions = [...new Set([...(catalogNames.length ? catalogNames : []), ...candLabNames])].sort((a, b) => a.localeCompare(b, "es")); // Nombres de lab de un candidato (labList + competencias validadas por lab). const candLabsOf = (x) => new Set([...(x.labList || []).map(labBase), ...((x.skills || []).map((s) => labBase(s && s.name)))]); const filtered = cands.filter((x) => { if (f.lab !== "Todas" && !candLabsOf(x).has(f.lab)) return false; if (f.prof !== "Todas" && x.profession !== f.prof) return false; if (f.city !== "Todas" && x.city !== f.city) return false; if (f.gender !== "Todos" && x.gender !== f.gender) return false; if (f.exp !== "Todas" && x.expKey !== f.exp) return false; if ((x.labs || 0) < parseInt(f.labs, 10)) return false; if (f.mode !== "Todas" && x.modality !== f.mode) return false; if (f.seek !== "Todas" && (x.desiredRoles || []).indexOf(f.seek) < 0) return false; return true; }); const openCand = cands.find((c) => c.id === open) || null; const tabs = [["feed", "Feed", "chat"], ["candidatos", "Candidatos", "user"], ["pipeline", "Pipeline", "briefcase"], ["registro", "Registro", "mail"], ["stats", "Estadísticas", "test"], ["vacantes", "Mis vacantes", "flask"]]; return (
o-lab
{!mob && EMPRESA · {(company.name || "").toUpperCase()}} {isAdmin && AdminPanel && } {onSwitchRole && }
{(company.name || "AL").slice(0, 2).toUpperCase()}
{tabs.map(([k, label, icon]) => { const on = tab === k; return ( ); })}
{tab === "feed" && } {tab === "candidatos" && logContact(c, "WhatsApp")} />} {tab === "pipeline" && } {tab === "registro" && } {tab === "stats" && } {tab === "vacantes" && setPostOpen(true)} onGoCand={() => setTab("candidatos")} />}
{openCand && setOpen(null)} setStage={setStage} onContact={(ch) => logContact(openCand, ch)} />} {postOpen && setPostOpen(false)} onSaved={(msg) => { setPostOpen(false); flash(msg); }} />} {toast &&
{toast}
} {adminOpen && AdminPanel && setAdminOpen(false)} />}
); } /* ----------------------------- CANDIDATOS ----------------------------- */ function Candidatos({ list, total, f, setF, onOpen, onContact }) { const set = (k) => (e) => setF({ ...f, [k]: e.target.value }); const clear = () => setF({ lab: "Todas", prof: "Todas", city: "Todas", gender: "Todos", exp: "Todas", labs: "0", mode: "Todas", seek: "Todas" }); const sel = { fontFamily: FONT, fontSize: 13, fontWeight: 700, color: "#3D3548", background: C.sand, border: `1px solid ${C.line2}`, borderRadius: 12, padding: "10px 11px", cursor: "pointer" }; const lab = { display: "flex", flexDirection: "column", gap: 5 }; const cap = { fontSize: 10, fontWeight: 800, letterSpacing: "0.08em", color: C.mut4 }; return (
Candidatos con competencias validadas
Match calculado con tests y Labs completados en O-Lab, no con auto-reporte.
Filtrar candidatos {list.length} de {total} Limpiar
MODALIDAD {["Todas", "Presencial", "Remoto"].map((m) => ( ))}
{list.length === 0 ? (
Ningún candidato con esos filtros
Prueba bajando los Labs mínimos o quitando el laboratorio.
Limpiar filtros
) : (
{list.map((cd) => { const sm = STAGE_META[cd.stage] || STAGE_META.nuevo; return (
{cd.name}
{cd.role} · {cd.city}
{cd.origin === "postulacion" ? POSTULANTE : NV. {cd.level} STREAK {cd.streak} } {sm.label}
{cd.match}
MATCH
{(cd.skills || []).map((sk) => (
{sk.name} {sk.pct}
))}
{[cd.profession, cd.modality, cd.exp].filter(Boolean).map((t) => {t})}
{(cd.desiredRoles && cd.desiredRoles.length > 0) && (
BUSCA {cd.desiredRoles.slice(0, 3).map((r) => {r})}
)}
{cd.labs} Labs {cd.tests} tests {cd.badges} insignias
onOpen(cd.id)} style={{ flex: 1, padding: 11 }}>Ver perfil onContact(cd)} style={{ padding: "11px 14px" }}>Contactar
); })}
)}
); } /* ----------------------------- PIPELINE ----------------------------- */ function Pipeline({ cands, onOpen }) { const cols = ["nuevo", "contactado", "entrevista", "contratado", "descartado"]; return (
Proceso de selección
Vacante: Operario de bodega · 3 cupos. Cambia la etapa desde el perfil del candidato.
{cols.map((k) => { const sm = STAGE_META[k]; const items = cands.filter((c) => c.stage === k); return (
{sm.label.toUpperCase()} {items.length}
{items.map((c) => ( ))} {items.length === 0 &&
Sin candidatos
}
); })}
); } /* ----------------------------- REGISTRO ----------------------------- */ function Registro({ contacts }) { return (
Registro de contactos
Cada contacto queda registrado con canal, fecha y etapa del proceso.
{contacts.map((ct) => (
{ct.name}
{ct.note}
{ct.channel} {ct.stage} {ct.date}
))}
); } /* ----------------------------- MIS VACANTES ----------------------------- */ function Vacantes({ contacts, cands, onPost, onGoCand }) { const contratados = cands.filter((c) => c.stage === "contratado").length; return (
Mis vacantes
Publicadas a través de O-Lab.
Publicar vacante
ACTIVA Cierra 30 ago
Operario de bodega
3 cupos · Medellín · $1.6M – $1.9M
{[["MATCH >80%", 18, C.orange], ["CONTACTOS", contacts.length, C.violet], ["CONTRATADOS", contratados, C.green]].map(([l, v, col]) => (
{v}
{l}
))}
Ver candidatos
BORRADOR Sin publicar
Auxiliar de inventarios
2 cupos · Bello · turno diurno
Define las competencias requeridas para calcular el match de los candidatos.
Continuar borrador
); } /* ----------------------------- ESTADÍSTICAS EMPRESA ----------------------------- */ function EmpresaStats({ cands, contacts }) { const total = cands.length; const stageCount = (k) => cands.filter((c) => c.stage === k).length; const funnel = [ { k: "nuevo", label: "Nuevos", n: stageCount("nuevo"), color: C.mut3 }, { k: "contactado", label: "Contactados", n: stageCount("contactado"), color: C.violet }, { k: "entrevista", label: "Entrevistados", n: stageCount("entrevista"), color: C.orange }, { k: "contratado", label: "Contratados", n: stageCount("contratado"), color: C.green }, { k: "descartado", label: "Descartados", n: stageCount("descartado"), color: "#C0392B" }, ]; const contratados = stageCount("contratado"); const conv = total ? Math.round((contratados / total) * 100) : 0; const matches = cands.map((c) => parseInt(c.match, 10)).filter((n) => !isNaN(n)); const avgMatch = matches.length ? Math.round(matches.reduce((a, b) => a + b, 0) / matches.length) : 0; const chan = {}; contacts.forEach((c) => { const k = c.channel || "Otro"; chan[k] = (chan[k] || 0) + 1; }); const channels = Object.keys(chan).map((k) => ({ label: k, count: chan[k] })).sort((a, b) => b.count - a.count); const maxF = Math.max(1, ...funnel.map((f) => f.n)); const maxC = Math.max(1, ...channels.map((c) => c.count)); const tile = (label, value, color) => (
{value}
{label}
 ); return (
Estadísticas del proceso
Cómo va tu reclutamiento con los candidatos que has estado gestionando.
{tile("EN PROCESO", total, C.ink)} {tile("CONTACTADOS", stageCount("contactado") + stageCount("entrevista") + contratados, C.violet)} {tile("ENTREVISTAS", stageCount("entrevista"), C.orange)} {tile("CONTRATADOS", contratados, C.green)} {tile("CONVERSIÓN", conv + "%", C.pink)} {tile("MATCH PROM.", avgMatch + "%", C.cyan)}
Embudo de selección
{funnel.map((f) => (
{f.label}{f.n}
))}
Contactos por canal
{channels.length === 0 ?
Aún no has registrado contactos.
: (
{channels.map((c, i) => (
{c.label}{c.count}
))}
)}
{contacts.length} contactos registrados en total
); } /* ----------------------------- MODAL CANDIDATO ----------------------------- */ function CandidateModal({ cand, onClose, setStage, onContact }) { const [cvOpen, setCvOpen] = useState(false); const [evidences, setEvidences] = useState([]); const sm = STAGE_META[cand.stage] || STAGE_META.nuevo; const email = cand.email || (cand.name.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/ /g, ".") + "@correo.com"); const phone = cand.phone || ("+57 300 000 00" + (cand.id || "0").replace(/\D/g, "")); const waDigits = phone.replace(/\D/g, ""); const waLink = "https://wa.me/" + waDigits + "?text=" + encodeURIComponent("Hola " + cand.name + ", vimos tu perfil en O-Lab y nos interesa para una vacante. ¿Podemos conversar?"); const mailLink = "mailto:" + email + "?subject=" + encodeURIComponent("Oportunidad laboral · O-Lab") + "&body=" + encodeURIComponent("Hola " + cand.name + ",\n\nVimos tu perfil en O-Lab y nos gustaría contactarte para una vacante."); const testsDone = Object.values(cand.testResults || {}); function downloadHV() { if (cand.cvUrl) window.open(cand.cvUrl, "_blank"); else setCvOpen(true); onContact && onContact("Descargó HV"); } function addEvidence(e) { const files = Array.from(e.target.files || []).map((file) => ({ name: file.name, size: (file.size / 1024 / 1024).toFixed(1) + " MB", kind: /\.pdf$/i.test(file.name) ? "PDF" : "IMG" })); e.target.value = ""; setEvidences((ev) => ev.concat(files)); } return (
e.stopPropagation()} style={{ width: "100%", maxWidth: 760, background: C.cream, borderRadius: 26, overflow: "hidden", animation: "olabRise .25s ease both", marginBottom: 40 }}>
{cand.photoUrl ? foto : }
{cand.name}
{cand.role} · {cand.city}
NV. {cand.level} · {cand.xp} STREAK {cand.streak} MATCH {cand.match}
ETAPA DEL PROCESO
{[["contactado", "Contactado"], ["entrevista", "Entrevistado"], ["contratado", "Contratado"], ["descartado", "Descartado"]].map(([k, label]) => { const on = cand.stage === k; const m = STAGE_META[k]; return ; })}
Etapa actual: {sm.label} · el cambio queda en el registro
CONTACTO DIRECTO
{email}
{phone}
onContact && onContact("WhatsApp")} style={{ display: "flex", alignItems: "center", gap: 7, textDecoration: "none", background: "#25D366", color: "#fff", fontFamily: FONT, fontSize: 13, fontWeight: 800, padding: "11px 15px", borderRadius: 14 }}>Escribir por WhatsApp onContact && onContact("Correo")} style={{ display: "flex", alignItems: "center", gap: 7, textDecoration: "none", background: C.violetSoft, color: C.violetDk, border: `1px solid ${C.violetSoftBd}`, fontFamily: FONT, fontSize: 13, fontWeight: 800, padding: "11px 15px", borderRadius: 14 }}>Enviar correo
Competencias validadas
{(cand.skills || []).map((ks) => (
{ks.name} {ks.pct}
))}
{[["LABS", cand.labs, C.orange], ["TESTS", cand.tests, C.violet], ["INSIGNIAS", cand.badges, C.green]].map(([l, v, col]) => (
{v}
{l}
))}
Labs completados
{(cand.labList || []).map((l, i) => (
{l}
))}
{testsDone.length > 0 && (
Tests realizados
{testsDone.map((t, i) => {t.label}{t.pct != null ? " · " + t.pct + "/100" : ""})}
)}
setCvOpen(true)} style={{ flex: 1, padding: 11 }}>Ver CV onContact("WhatsApp")} style={{ padding: "11px 13px" }}>Contactar
{evidences.length > 0 && (
{evidences.map((f, i) => (
{f.kind} {f.name} {f.size}
))}
)}
{cvOpen && (
setCvOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 70, background: "rgba(23,19,31,0.7)", display: "flex", alignItems: "flex-start", justifyContent: "center", padding: 24, overflowY: "auto" }}>
e.stopPropagation()} style={{ width: "100%", maxWidth: 640, background: "#fff", borderRadius: 24, padding: "36px 40px", marginBottom: 40 }}>
{cand.name}
{cand.role} · {cand.city}
{email} · +57 300 000 00{cand.id.replace("c", "")}
COMPETENCIAS VALIDADAS EN O-LAB
{(cand.skills || []).map((ks) => (
{ks.name}{ks.pct}
))}
LABS Y EXPERIENCIA
{(cand.labList || []).map((l, i) =>
{l}
)}
window.print()} style={{ flex: 1, padding: 12 }}>Descargar / imprimir { onContact("Correo"); setCvOpen(false); }} style={{ flex: 1, padding: 12 }}>Contactar candidato
)}
); } /* ----------------------------- MODAL PUBLICAR VACANTE ----------------------------- */ function PostVacancyModal({ onClose, onSaved }) { const today = new Date().toISOString().slice(0, 10); const [v, setV] = useState({ cargo: "", cupos: "1", fechaPublicacion: today, fechaCierre: "", salario: "", ubicacion: "", ciudad: "", modalidad: "Presencial", tipoContrato: "Indefinido", descripcion: "", requisitos: "", link: "", recibirCV: true }); const set = (k) => (e) => setV({ ...v, [k]: e.target.value }); const inp = { fontFamily: FONT, fontSize: 13, fontWeight: 600, color: C.ink, background: C.sand, border: `1px solid ${C.line2}`, borderRadius: 12, padding: "11px 12px", width: "100%", boxSizing: "border-box" }; const cap = { fontSize: 10, fontWeight: 800, letterSpacing: "0.08em", color: C.mut4, marginBottom: 5, display: "block" }; async function save() { if (!v.cargo) return; const codigo = "EMP-" + v.cargo.slice(0, 3).toUpperCase().replace(/\s/g, "") + "-" + String(Date.now()).slice(-4); const r = await B().postVacancy({ ...v, codigo_vacante: codigo }); onSaved(r.demo ? "Vacante lista (modo demo, inicia sesión para publicar)" : "Vacante publicada · aparecerá en la red O-Lab"); } return (
e.stopPropagation()} style={{ width: "100%", maxWidth: 580, background: "#fff", borderRadius: 24, padding: 24, marginBottom: 40, animation: "olabRise .25s ease both" }}>
Publicar vacante
Se publica en la red O-Lab y alimenta el tablero de Vacantes de Projects.