// Hospital Dashboard — Root App const { useState, useEffect, useMemo } = React; const HOSP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "dark": false, "density": "comfy", "sidebar": "full", "live": true, "cardStyle": "elevated", "accent": "#4F46E5" }/*EDITMODE-END*/; function App() { const [t, setTweak] = window.useTweaks(HOSP_TWEAK_DEFAULTS); const [current, setCurrent] = useState('ward'); const [selectedBed, setSelectedBed] = useState(null); const [search, setSearch] = useState(''); const [alerts, setAlerts] = useState(window.HOSP_ALERTS); const toast = window.useToast(); // Apply theme to useEffect(() => { document.documentElement.classList.toggle('dark', t.dark); }, [t.dark]); // Apply accent useEffect(() => { document.documentElement.style.setProperty('--h-primary', t.accent); }, [t.accent]); // Spontaneously emit alerts when live useEffect(() => { if (!t.live) return; const id = setInterval(() => { if (Math.random() < 0.4) { const events = [ { sev: 'success', title: 'Bed 05 stabilized', body: 'SpO₂ recovered to 97%' }, { sev: 'alert', title: 'New alert — Bed 04', body: 'HR sustained > 120 bpm' }, { sev: 'info', title: 'Patient checked in', body: 'P. Sharma → Bed 17' }, ]; const e = events[Math.floor(Math.random() * events.length)]; toast.push(e); } }, 18000); return () => clearInterval(id); }, [t.live, toast]); const onSelectBed = (bed) => { setSelectedBed(bed); setCurrent('vitals'); }; const onNav = (id) => { setCurrent(id); if (id === 'ward') setSelectedBed(null); }; const breadcrumb = useMemo(() => { const map = { ward: ['Apollo General', 'Ward Grid'], vitals: ['Apollo General', 'Ward Grid', selectedBed?.name || 'Live Vitals'], hospitals: ['Network', 'Hospitals'], patients: ['Apollo General', 'Patients'], devices: ['Apollo General', 'Devices'], alerts: ['Apollo General', 'Alerts'], map: ['Apollo General', 'Floor Plan'], }; return map[current]; }, [current, selectedBed]); const titles = { ward: { title: 'Ward Grid', subtitle: '12 active beds · 4 wards · live monitoring' }, vitals: { title: selectedBed?.patient || 'Live Vitals', subtitle: `${selectedBed?.name || ''} · ${selectedBed?.device || ''}` }, hospitals: { title: 'Hospital Network', subtitle: '4 facilities · 94 active beds' }, patients: { title: 'Patient Management', subtitle: `${window.HOSP_PATIENTS.length} active admissions` }, devices: { title: 'Devices', subtitle: `${window.HOSP_DEVICES.length} edge monitors · 11 online` }, alerts: { title: 'Alert History', subtitle: `${alerts.filter(a => !a.ack).length} unacknowledged · ${alerts.length} total` }, map: { title: 'Floor Plan', subtitle: 'Apollo General · Floor 3 · live positions' }, }; const alertCount = alerts.filter(a => !a.ack).length; const handleAck = (id) => { setAlerts(prev => prev.map(a => a.id === id ? { ...a, ack: true } : a)); toast.push({ sev: 'success', title: 'Alert acknowledged' }); }; return (

setTweak('dark', !t.dark)} accent={t.accent} search={search} onSearch={setSearch} live={t.live} onToggleLive={() => setTweak('live', !t.live)} />

{current === 'ward' && } {current === 'vitals' && onNav('ward')} live={t.live} cardStyle={t.cardStyle} accent={t.accent}/>} {current === 'hospitals' && onNav('ward')} cardStyle={t.cardStyle} accent={t.accent}/>} {current === 'patients' && } {current === 'devices' && } {current === 'alerts' && } {current === 'map' && }

setTweak('dark', v)} /> setTweak('accent', v)} /> setTweak('density', v)} /> setTweak('sidebar', v)} /> setTweak('cardStyle', v)} /> setTweak('live', v)} />

); } // Mount with toast provider const root = ReactDOM.createRoot(document.getElementById('root')); root.render( );