// app-shell.jsx — sidebar + topbar + notifications drawer + toast.
// Wraps every screen. Mode toggle in the topbar.
const PCAS_t = window.PCT;
const PCAS_d = window.PCA;
function Shell({ active, breadcrumb, headerRight, children }) {
const store = useStore();
const mode = store.state.mode;
return (
{children}
);
}
function ShellSidebar({ mode, active }) {
const integratedNav = [
{ group: 'Workspace' },
{ id: 'home', label:'Dashboard', icon:'home', to:'#/' },
{ id: 'frontdesk',label:'Front desk', icon:'inbox', to:'#/frontdesk/admit/CLM-2026-0142' },
{ id: 'patients', label:'Patients', icon:'users', to:'#/', disabled:true },
{ id: 'ipd', label:'IPD board', icon:'bed', to:'#/', disabled:true },
{ group: 'Revenue' },
{ id: 'invoices', label:'Invoices', icon:'money', to:'#/', disabled:true },
{ id: 'claims', label:'Claims', icon:'claims', to:'#/claims', badge: 'active' },
{ id: 'cfo', label:'CFO insights', icon:'chart', to:'#/cfo' },
{ group: 'Setup' },
{ id: 'settings', label:'RCM settings', icon:'gear', to:'#/settings/insurers' },
];
const standaloneNav = [
{ group: 'Daily work' },
{ id: 'home', label:'My worklist', icon:'list', to:'#/', badge:'active' },
{ id: 'claims', label:'All claims', icon:'claims', to:'#/claims' },
{ id: 'cfo', label:'CFO insights', icon:'chart', to:'#/cfo' },
{ group: 'Setup' },
{ id: 'settings', label:'Payers & tariffs', icon:'gear', to:'#/settings/insurers' },
];
const nav = mode === 'standalone' ? standaloneNav : integratedNav;
const store = useStore();
const activeCount = store.state.claims.filter(c =>
!['SETTLED','CLOSED','DENIED'].includes(c.status)
).length;
return (
);
}
function useStoreReset() {
// Imperative reset — read fresh store from React tree
// Since this is called inside an onClick we go through window
const s = window.__pcStore;
if (s) s.reset();
else { localStorage.removeItem('pcclaims.v1'); location.reload(); }
}
function BrandMark({ mode }) {
if (mode === 'standalone') {
return (
P
);
}
return (
);
}
function NavItem({ item, active, activeCount }) {
return (
{ if (item.disabled) { e.preventDefault(); window.demoNote && window.demoNote({ title: item.label.replace(/&/g,'&') + ' — full module' }); } }} style={{
display:'flex', alignItems:'center', gap:11,
padding:'8px 10px', borderRadius:7,
background: active ? PCAS_t.c.navBgHover : 'transparent',
color: active ? PCAS_t.c.navText : PCAS_t.c.navMuted,
cursor: item.disabled ? 'not-allowed' : 'pointer',
opacity: item.disabled ? .4 : 1,
position:'relative', textDecoration:'none',
}}>
{active && }
{item.label}
{item.badge === 'active' && activeCount > 0 && (
{activeCount}
)}
);
}
// ── Top bar ───────────────────────────────────────────────
function ShellTopBar({ mode, breadcrumb, right }) {
const store = useStore();
const unreadNotifs = store.state.notifications.length;
return (
);
}
function ModeToggle({ mode }) {
const store = useStore();
return (
{[
{ id:'integrated', label:'Inside HMS', dot: PCAS_t.c.accent },
{ id:'standalone', label:'Standalone', dot: PCAS_t.c.brand },
].map(o => (
))}
);
}
// ── Notifications drawer ─────────────────────────────────
function NotificationsDrawer() {
const store = useStore();
const { notifDrawerOpen, notifications } = store.state;
if (!notifDrawerOpen) return null;
return ReactDOM.createPortal(
store.closeNotifDrawer()} style={{
position:'absolute', inset:0, background:'rgba(24,20,16,.3)',
}}/>
Patient notifications
WhatsApp / SMS messages sent · most recent first
{notifications.length === 0 ? (
) : notifications.map(n => (
))}
,
document.body,
);
}
function NotifRow({ n }) {
const insurer = PCAS_d.findInsurer((window.__pcStore || {}).state?.claims?.find(c => c.id === n.claimId)?.insurer);
const age = ageOf(n.sentAt);
return (
);
}
function ageOf(ts) {
const m = Math.floor((Date.now() - ts) / 60000);
if (m < 1) return 'just now';
if (m < 60) return m + 'm';
if (m < 60 * 24) return Math.floor(m/60) + 'h';
return Math.floor(m / 60 / 24) + 'd';
}
// ── Toast host ───────────────────────────────────────────
function ToastHost() {
const store = useStore();
const t = store.state.toast;
if (!t) return null;
return ReactDOM.createPortal(
{t.icon === 'whatsapp' && (
)}
{t.title}
{t.body &&
{t.body}
}
,
document.body,
);
}
Object.assign(window, { Shell, ShellTopBar, ShellSidebar, NotificationsDrawer, ToastHost });