);
}
function Sidebar({ active='dashboard', items=NAV }) {
const computeOpen = () => {
const o = {};
items.forEach(it => { if (it.children && it.children.some(c=>c.id===active)) o[it.id] = true; });
return o;
};
const [open, setOpen] = React.useState(computeOpen);
const [order, setOrder] = React.useState(() => orderedNav(items));
const [rearrange, setRearrange] = React.useState(false);
const [light, setLight] = React.useState(() => { try { return localStorage.getItem(SIDEBAR_THEME_KEY)==='light'; } catch(e){ return false; } });
const drag = React.useRef(null);
React.useEffect(()=>{ setOpen(prev => ({ ...prev, ...computeOpen() })); }, [active]);
React.useEffect(()=>{ try { localStorage.setItem(SIDEBAR_THEME_KEY, light?'light':'dark'); } catch(e){} }, [light]);
const toggle = id => setOpen(prev => ({ ...prev, [id]: !prev[id] }));
const persistOrder = arr => { try { localStorage.setItem(NAV_ORDER_KEY, JSON.stringify(arr.map(i=>i.id))); } catch(e){} };
const onDrop = (toIdx) => {
const from = drag.current; drag.current = null;
if (from==null || from===toIdx) return;
setOrder(prev => { const a=[...prev]; const [m]=a.splice(from,1); a.splice(toIdx,0,m); persistOrder(a); return a; });
};
/* live “bills due soon” for the AI card */
let billNote = 'Your finances are on track.';
try {
const CM = window.CM;
const up = (CM && CM.upcomingBills) ? CM.upcomingBills() : [];
if (up && up.length) {
const total = up.reduce((s,b)=>s+(+b.amount||0),0);
const names = up.slice(0,2).map(b=>b.desc||b.name||'Bill').join(', ');
billNote = `${up.length} bill${up.length>1?'s':''} due soon: ${names}${up.length>2?'…':''} ($${Math.round(total).toLocaleString('en-CA')})`;
}
} catch(e){}
/* current user for the footer */
let userName='', userRole='Member';
try { const cu=window.CM&&window.CM.S&&window.CM.S.currentUser; if(cu){ userName=cu.name||userName; userRole=(cu.role==='admin'||cu.role==='Admin')?'Admin':(cu.role||'Member'); } } catch(e){}
const inits = (userName||'?').split(' ').map(n=>n[0]).join('').slice(0,2).toUpperCase()||'U';
const signOut = () => { window.location.href = 'Login.html'; };
const [planV, setPlanV] = React.useState(0);
React.useEffect(()=>{ const h=()=>setPlanV(v=>v+1); window.addEventListener('cm-plan-change',h); return ()=>window.removeEventListener('cm-plan-change',h); },[]);
const NavRow = (it, idx) => {
const Glyph = Ic[it.icon] || Ic.Dashboard;
const dragProps = rearrange ? {
draggable:true,
onDragStart:()=>{ drag.current=idx; },
onDragOver:(e)=>{ e.preventDefault(); },
onDrop:()=>onDrop(idx),
} : {};
if (it.children) {
const childActive = it.children.some(c=>c.id===active);
const isOpen = !!open[it.id];
return (
{subtitle}
}| {c.header} | )}
|---|
| {c.cell(row)} | ))}