// app.jsx — Shell principal, navegación, routing por estado const { useState: useStateApp, useEffect: useEffectApp } = React; // Helper de fetch autenticado — agrega Bearer token automáticamente async function apiFetch(path, options = {}) { const token = localStorage.getItem("ciecav_token"); const headers = { "Content-Type": "application/json", ...(options.headers || {}) }; if (token) headers["Authorization"] = `Bearer ${token}`; const res = await fetch(`${window.API_BASE}${path}`, { ...options, headers }); const json = await res.json().catch(() => ({})); if (!res.ok) throw new Error(json.error || `HTTP ${res.status}`); return json.data; } window.apiFetch = apiFetch; // Mapea el usuario del API al formato interno de la UI function mapApiUser(apiUser, token) { const ROLE_MAP = { superadmin: { kind: "superadmin", label: "Superadministrador", color: "#4f46e5" }, admin: { kind: "admin", label: "Administrador del sistema", color: "#334155" }, doctor: { kind: "clinico", label: "Médico tratante", color: "#2563eb" }, surgeon: { kind: "clinico", label: "Cirujano", color: "#be123c" }, anesthesiologist: { kind: "clinico", label: "Anestesiólogo", color: "#7c3aed" }, reception: { kind: "clinico", label: "Recepción / Admisión", color: "#b45309" }, nurse: { kind: "clinico", label: "Enfermería", color: "#0891b2" }, lab: { kind: "clinico", label: "Laboratorio clínico", color: "#15803d" }, }; const rm = ROLE_MAP[apiUser.role] || { kind: "clinico", label: apiUser.role, color: "#2563eb" }; const partes = (apiUser.name || "").trim().split(/\s+/).filter((p) => !/^(dr\.?a?\.?|dra\.?|lcdo?\.?|blgo?\.?)$/i.test(p)); const iniciales = ((partes[0]?.[0] || "") + (partes[1]?.[0] || "")).toUpperCase() || "??"; const corto = partes.length >= 2 ? `${partes[0][0]}. ${partes[partes.length - 1]}` : (apiUser.name || "Usuario"); return { id: apiUser.id, kind: rm.kind, apiRole: apiUser.role || 'doctor', label: rm.label, token, user: { nombre: apiUser.name || "Usuario", corto, especialidad: apiUser.specialty || rm.label, registro: apiUser.license_number || "—", iniciales, color: rm.color, }, }; } window.mapApiUser = mapApiUser; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#a86a43", "density": "regular", "dark": false, "font": "IBM Plex Sans", "showAI": true }/*EDITMODE-END*/; const ACCENTS = { "#a86a43": { soft: "#f4ebe1", ink: "#7c4f2d" }, "#2563eb": { soft: "#e8f0fe", ink: "#1d4ed8" }, "#0d9488": { soft: "#d7f3ef", ink: "#0f766e" }, "#4f46e5": { soft: "#e9e7fd", ink: "#4338ca" }, "#0369a1": { soft: "#dcecf8", ink: "#075985" }, }; const NAV = [ { id: "dashboard", label: "Inicio", icon: "dashboard" }, { id: "pacientes", label: "Pacientes", icon: "patients" }, { id: "agenda", label: "Agenda", icon: "agenda" }, { id: "documentos", label: "Documentos", icon: "folder" }, { id: "auditoria", label: "Auditoría", icon: "shield" }, ]; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [view, setView] = useStateApp({ screen: "dashboard" }); const [auth, setAuth] = useStateApp(null); const [authLoading, setAuthLoading] = useStateApp(true); const [copilot, setCopilot] = useStateApp(false); const [copilotPac, setCopilotPac] = useStateApp(null); const [newAt, setNewAt] = useStateApp(null); const [exped, setExped] = useStateApp(null); const [injected, setInjected] = useStateApp(null); useEffectApp(() => { const token = localStorage.getItem("ciecav_token"); if (!token) { setAuthLoading(false); return; } fetch(`${window.API_BASE}/api/auth/me`, { headers: { "Authorization": `Bearer ${token}` }, }) .then((r) => r.ok ? r.json() : Promise.reject()) .then((json) => { setAuth(mapApiUser(json.data, token)); }) .catch(() => { localStorage.removeItem("ciecav_token"); }) .finally(() => setAuthLoading(false)); }, []); useEffectApp(() => { const a = ACCENTS[t.accent] || ACCENTS["#2563eb"]; const r = document.documentElement; r.style.setProperty("--accent", t.accent); r.style.setProperty("--accent-soft", a.soft); r.style.setProperty("--accent-ink", a.ink); r.dataset.theme = t.dark ? "dark" : "light"; r.dataset.density = t.density; r.style.setProperty("--font", `'${t.font}', system-ui, sans-serif`); }, [t.accent, t.dark, t.density, t.font]); if (authLoading) return (
Verificando sesión…
); const doLogin = (r) => { setAuth(r); setView({ screen: (r.kind === "admin" || r.kind === "superadmin") ? "admin" : "dashboard" }); window.scrollTo(0, 0); }; const logout = () => { const token = auth?.token; if (token) fetch(`${window.API_BASE}/api/auth/logout`, { method: "POST", headers: { "Authorization": `Bearer ${token}` } }).catch(() => {}); localStorage.removeItem("ciecav_token"); setAuth(null); setView({ screen: "dashboard" }); setCopilot(false); }; if (!auth) return ; const role = auth; const user = role.user; const isAdmin = role.kind === "admin" || role.kind === "superadmin"; window.CURRENT_USER = user; const go = (screen, extra = {}) => { setView({ screen, ...extra }); window.scrollTo(0, 0); }; const openPatient = (p) => go("paciente", { paciente: p }); const openCopilot = (p) => { setCopilotPac(p || copilotPac || view.paciente); setCopilot(true); }; const openExpediente = (p) => setExped(p); const FORM_SCREEN_MAP = { emergencia_08: "form008", evoluciones: "form005", epicrisis: "form005", pre_1: "anestesia", pre_2: "anestesia", trans_018a_anv: "anestesia", trans_018a_rev: "anestesia", "019_post_anv": "anestesia", "019_post_rev": "anestesia", }; const openForm = (formType, paciente) => { setNewAt(null); const map = { "008": "form008", "005": "form005", "018": "anestesia", "018A": "anestesia", "024": "consent", "006": "form005" }; go(map[formType.id] || "form008", { paciente, formType }); }; const editForm = (formType, record) => { const screen = FORM_SCREEN_MAP[formType] || "form-generic"; go(screen, { paciente: view.paciente, record, formType }); }; return (
{/* Sidebar */} {/* Main */}
{!isAdmin ? ( ) : (
{role.kind === "superadmin" ? "Superadministración del sistema" : "Administración del sistema"}
)}
{user.corto}
{role.label}
{view.screen === "dashboard" && } {view.screen === "pacientes" && go("nuevo-paciente")} />} {view.screen === "nuevo-paciente" && go("pacientes")} onCreated={(p) => go("paciente", { paciente: p })} />} {view.screen === "agenda" && } {view.screen === "documentos" && } {view.screen === "auditoria" && } {view.screen === "paciente" && go("pacientes")} onOpenCopilot={() => openCopilot(view.paciente)} onNewAtencion={(p) => setNewAt(p)} onOpenExpediente={openExpediente} onOpenAtencion={(a) => go("atencion", { atencion: a, paciente: view.paciente })} />} {view.screen === "atencion" && go("paciente", { paciente: view.paciente })} onOpenExpediente={() => openExpediente(view.paciente)} onEditForm={editForm} />} {view.screen === "form008" && view.record ? go("atencion", { atencion: view.record, paciente: view.paciente }) : go("paciente", { paciente: view.paciente })} />} {view.screen === "form005" && view.record ? go("atencion", { atencion: view.record, paciente: view.paciente }) : go("paciente", { paciente: view.paciente })} onOpenCopilot={() => openCopilot(view.paciente)} injectedText={injected} onConsumeInjected={() => setInjected(null)} />} {view.screen === "form-generic" && view.record ? go("atencion", { atencion: view.record, paciente: view.paciente }) : go("paciente", { paciente: view.paciente })} />} {view.screen === "anestesia" && go("paciente", { paciente: view.paciente })} faseInicial={view.formType && view.formType.id === "018A" ? "trans" : "pre"} />} {view.screen === "consent" && go("paciente", { paciente: view.paciente })} />} {view.screen === "admin" && } {view.screen === "usuarios" && } {view.screen === "roles" && } {view.screen === "establecimiento" && }
{t.showAI && setCopilot(false)} onInsertText={(txt) => { setInjected(txt); setCopilot(false); if (view.screen !== "form005") go("form005", { paciente: copilotPac }); }} />} setNewAt(null)} paciente={newAt} onSelect={(record) => { setNewAt(null); go("atencion", { atencion: record, paciente: newAt }); }} /> setExped(null)} paciente={exped} /> setTweak("accent", v)} /> setTweak("dark", v)} /> setTweak("density", v)} /> setTweak("font", v)} /> setTweak("showAI", v)} />
); } // ---- Pantalla Documentos — carga desde API ---- function DocsScreen() { const [records, setRecords] = React.useState([]); const [loading, setLoading] = React.useState(true); React.useEffect(() => { window.apiFetch("/api/records?limit=50") .then((data) => setRecords(Array.isArray(data) ? data : [])) .catch(() => setRecords([])) .finally(() => setLoading(false)); }, []); return (

Gestión documental

Formularios y expedientes clínicos del sistema

{loading ? (
) : records.length === 0 ? (
No hay documentos registrados aún.
Los formularios firmados aparecerán aquí una vez que se creen atenciones.
 ) : (
{["Expediente", "Paciente", "Tipo", "Fecha", "Estado"].map((c) => )} {records.map((r) => ( ))}
{c}
{r.record_number}
 {r.apellidos} {r.nombres} {r.tipo_atencion} {r.fecha_ingreso?.slice(0, 10)} {r.estado}
)}
); } // ---- Auditoría ---- function AuditScreen() { return (

Auditoría y trazabilidad

Registro inmutable de accesos y acciones sobre la HCE

Los registros de auditoría se mostrarán aquí.
Cada acción sobre pacientes, formularios y sesiones queda registrada en la base de datos.
); } ReactDOM.createRoot(document.getElementById("root")).render();