{Array.from({ length: rows }).map((_, i) =>

)}

); } function ModalError({ error, onRetry }) { return (

Kon gegevens niet laden

{String(error && error.message || error)}

{onRetry && }

); } /* small transaction row reused by accounts + budget */ function TxnRow({ name, sub, amount, color }) { const up = amount >= 0; return (

{name}

{sub &&

{sub}

}

{fmtSigned(amount)}

); } /* ============================================================ VERMOGEN — net-worth detail ============================================================ */ function NetWorthDetailModal({ onClose }) { const [range, setRange] = useState("1J"); const { loading, data, error } = useAsync(() => fetchNetWorth(range), [range]); return ( {["1M", "6M", "1J"].map(r => )}

}> {error ? : (!data) ? : (() => { const up = data.delta >= 0; const maxB = Math.max(...data.breakdown.map(b => b.value), 1); return (

{/* hero + chart */}

Totaal netto vermogen

{fmtEur(data.total)}

{up ? "+" : ""}{fmtEur(data.delta)} {up ? "+" : ""}{data.pct.toFixed(1)}% in deze periode

{/* breakdown */}

Opbouw

{data.breakdown.map((b, i) => (

{b.label} {fmtEur(b.value)} {Math.round(b.value / data.total * 100)}%

))}

{/* monthly history */}

Maandelijks verloop

{data.history.slice(0, 8).map((h, i) => { const pos = h.delta >= 0; return (

{h.month}
{fmtEur(h.value)} {i === data.history.length - 1 ? "—" : (pos ? "+" : "−") + fmtEur(Math.abs(h.delta))}
); })}

); })()} ); } /* ============================================================ REKENINGEN — accounts detail with transactions ============================================================ */ function AccountsDetailModal({ onClose }) { const { data, error } = useAsync(() => fetchAccounts(), []); const [openId, setOpenId] = useState(null); const total = data ? data.reduce((s, a) => s + a.balance, 0) : 0; return ( {error ? : !data ? : (
{data.map(a => { const open = openId === a.id; return (
{open && (
{a.transactions.length === 0 &&
Geen recente transacties
} {a.transactions.map(t => )}
)}
); })}
)} ); } /* ============================================================ MAANDBUDGET — budget detail with per-category transactions ============================================================ */ function BudgetDetailModal({ onClose }) { const { data, error } = useAsync(() => fetchBudget(0), []); const [openCat, setOpenCat] = useState(null); return ( {error ? : !data ? : (() => { const left = data.totalBudget - data.totalSpent; const saved = data.income - data.totalSpent; return (

Inkomen
{fmtEur(data.income)}

Uitgegeven
{fmtEur(data.totalSpent)}

Nog te besteden
{fmtEur(left)}

Bespaard
{fmtEur(saved)}

Categorieën

{data.categories.map((b, i) => { const p = b.spent / b.budget, over = b.spent > b.budget, open = openCat === i; return (

{open && (
{b.transactions.length === 0 &&
Geen transacties deze maand
} {b.transactions.map(t => )}
)}
); })}

); })()} ); } /* ============================================================ AGENDA EVENT — detail popover ============================================================ */ function EventDetailModal({ event, onClose }) { if (!event) return null; const s = new Date(event.start), e = new Date(event.end); const fmtT = d => `${d.getHours()}:${String(d.getMinutes()).padStart(2, "0")}`; const dur = Math.round((e - s) / 60000); const durLabel = dur >= 60 ? `${Math.floor(dur / 60)}u${dur % 60 ? " " + (dur % 60) + "m" : ""}` : dur + " min"; return (

{event.calendarName}

{fmtT(s)} – {fmtT(e)}
{durLabel}
{event.location &&
{event.location}
} {event.attendees && event.attendees.length > 0 && (
{event.attendees.length} deelnemer{event.attendees.length > 1 ? "s" : ""}
{event.attendees.join(", ")}
)} {event.meetingUrl && ( Deelnemen via Google Meet )}
); } Object.assign(window, { ModalShell, ModalLoading, ModalError, TxnRow, fmtTxnDate, fmtSigned, NetWorthDetailModal, AccountsDetailModal, BudgetDetailModal, EventDetailModal, });