/* FP&A Copilot — main variance dashboard (real API data) */ const { useState: useStateDash, useEffect: useEffectDash, useRef: useRefDash } = React; /* ── ClassificationDrawer ─────────────────────────────────────────────────── Review + correct how each revenue account is mapped to an NHS income stream. Overrides are per-account and persist server-side, so benchmarks and the income breakdown respect the correction on every subsequent load. */ function ClassificationDrawer({ sessionId, onClose, onSaved }) { const { Icon } = window; const [payload, setPayload] = useStateDash(null); const [status, setStatus] = useStateDash("loading"); // loading | ready | error const [savingAcct, setSavingAcct] = useStateDash(null); const [tab, setTab] = useStateDash("income"); // income | workforce const fmt = v => window.fmtCurrency(v, { compact: true }); const load = React.useCallback(() => { fetch(apiUrl(`/api/session/${sessionId}/classifications`)) .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }) .then(d => { setPayload(d); setStatus("ready"); }) .catch(() => setStatus("error")); }, [sessionId]); useEffectDash(() => { load(); }, [load]); useEffectDash(() => { const h = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, [onClose]); // Save either an income-stream override (kind="income") or a workforce-role // override (kind="workforce"); both refresh the drawer + dashboard. async function saveOverride(kind, accountName, value) { setSavingAcct(accountName); try { const path = kind === "workforce" ? `/api/session/${sessionId}/workforce-classifications` : `/api/session/${sessionId}/classifications`; const body = kind === "workforce" ? { account_name: accountName, role: value } : { account_name: accountName, stream_key: value }; const r = await fetch(apiUrl(path), { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), }); if (r.ok) { setPayload(await r.json()); onSaved && onSaved(); } } finally { setSavingAcct(null); } } const SOURCE = { override: { label: "Manual", color: "var(--primary-text)" }, keyword: { label: "Auto", color: "var(--fg-3)" }, unclassified: { label: "Unmatched",color: "var(--adverse-text, #b91c1c)" }, }; const wf = payload?.workforce || {}; const isWf = tab === "workforce"; const rows = isWf ? (wf.rows || []) : (payload?.rows || []); const options = isWf ? (wf.roles || []) : (payload?.streams || []); const valueKey = isWf ? "role" : "stream_key"; const unmatched = isWf ? (wf.unclassified_count || 0) : (payload?.unclassified_count || 0); const TabBtn = ({ id, label, badge }) => ( ); return (
e.stopPropagation()} style={{ background: "var(--surface)", width: "100%", maxWidth: 560, height: "100%", boxShadow: "var(--shadow-hover)", overflow: "auto", padding: "24px 24px 40px", }}>

Review classifications

{isWf ? "Each staff account is matched to a workforce role by keyword. Correct any that are wrong — the change flows into the workforce breakdown." : "Each revenue account is matched to an income stream by keyword. Correct any that are wrong — the change flows into the benchmarks."} {unmatched > 0 && ( {unmatched} unmatched. )}

{status === "loading" &&
Loading…
} {status === "error" &&
Could not load classifications.
} {status === "ready" && rows.length === 0 && (
No accounts to review here.
)} {status === "ready" && rows.map((r) => { const src = SOURCE[r.source] || SOURCE.keyword; return (
{r.name}
{src.label}{r.matched_keyword ? ` · “${r.matched_keyword}”` : ""} · {fmt(r.value)}
); })}
); } /* ── AnomalyPanel ───────────────────────────────────────────────────────── */ function AnomalyPanel({ sessionId, selectedPeriod, periodMode }) { const { Icon } = window; const [result, setResult] = React.useState(null); const [loading, setLoading] = React.useState(true); const [sigma, setSigma] = React.useState(1.5); const [expanded, setExpanded] = React.useState(false); React.useEffect(() => { if (!sessionId) return; setLoading(true); const params = new URLSearchParams({ period: selectedPeriod || "", mode: periodMode || "monthly", sigma, }); fetch(apiUrl(`/api/anomalies/${sessionId}?${params}`)) .then((r) => r.json()) .then(setResult) .catch(() => setResult(null)) .finally(() => setLoading(false)); }, [sessionId, selectedPeriod, periodMode, sigma]); const fmtGBP = (v) => window.fmtCurrency(v, { compact: true }); const anomalies = result?.anomalies || []; const note = result?.note; if (result === null && !loading) return null; if (note) return (
Statistical anomalies — {note}
); const visible = expanded ? anomalies : anomalies.slice(0, 3); const sigmaColor = (z) => z >= 3 ? "var(--adverse-text)" : z >= 2 ? "var(--caution-text)" : "var(--fg-2)"; const sigmaLabel = (z) => z >= 3 ? "High" : z >= 2 ? "Moderate" : "Low"; return (
{/* Header */}
Statistical anomalies {loading ? "Scanning…" : anomalies.length ? `${anomalies.length} account${anomalies.length > 1 ? "s" : ""} deviate from historical pattern · ${result?.period}` : `No unusual movements detected · ${result?.period}`}
{/* Sensitivity selector */}
Sensitivity {[[1.5, "High"], [2.0, "Med"], [2.5, "Low"]].map(([s, lbl]) => ( ))}
{/* Empty state — no anomalies at this sensitivity */} {!loading && anomalies.length === 0 && (
No unusual movements detected at this sensitivity level.
)} {/* Anomaly cards */} {!loading && anomalies.length > 0 && (
{visible.map((a, i) => (
{/* Sigma badge */}
{a.z_score.toFixed(1)}σ
{sigmaLabel(a.z_score)}
{/* Account info */}
{a.account}
{a.category} ·{" "} {a.change_pct != null ? `${a.change_pct > 0 ? "+" : ""}${a.change_pct.toFixed(1)}% vs avg` : "unusual value"} {" "}· avg {fmtGBP(a.historical_mean)}
{/* Current vs mean */}
{fmtGBP(a.current_value)}
{a.is_fav ? "Favourable" : "Adverse"}
))} {anomalies.length > 3 && ( )}
)}
); } /* ── ForecastPanel ──────────────────────────────────────────────────────── */ function ForecastPanel({ sessionId, periodMode }) { const { Icon, Card, Chip, TrendChart } = window; const [fcData, setFcData] = React.useState(null); const [lookback, setLookback] = React.useState(3); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); React.useEffect(() => { if (!sessionId || periodMode === "ytd") return; setLoading(true); setError(null); fetch(apiUrl(`/api/forecast/${sessionId}?lookback=${lookback}&mode=${periodMode}`)) .then((r) => { if (!r.ok) { const code = r.status; if (code === 401 || code === 403) throw new Error("Authentication failed — check your API key."); if (code === 404) throw new Error("Session expired — please re-upload your file."); if (code === 429) throw new Error("Rate limited — wait a moment and try again."); if (code >= 500) throw new Error("Server error — try again shortly."); throw new Error(`Request failed (HTTP ${code}).`); } return r.json(); }) .then(setFcData) .catch((e) => setError(e.message)) .finally(() => setLoading(false)); }, [sessionId, lookback, periodMode]); const fmtGBP = (v) => window.fmtCurrency(v); const combined = fcData?.combined || []; const forecastFrom = fcData ? (fcData.actuals || []).length : 0; const hasProjection = (fcData?.forecast || []).length > 0; return ( Forecast} > {/* Lookback selector */}
Trailing average: {[3, 6, 12].map((n) => ( ))} {loading ? "Loading…" : error ? "Error — is the session still active?" : ""}
{/* Chart */} {!loading && combined.length > 1 && ( )} {/* Projection summary table */} {!loading && hasProjection && (
Projected periods (trailing {lookback}m avg)
{(fcData.forecast || []).map((r, i) => ( ))}
Period Revenue Costs Profit
{r.full} {fmtGBP(r.revenue)} {fmtGBP(r.costs)} = 0 ? "var(--favourable-text)" : "var(--adverse-text)" }}> {fmtGBP(r.profit)}
* Projections use a simple trailing average — not a statistical model. Review assumptions before using in management packs.
)} {!loading && !hasProjection && combined.length > 0 && (
All months in the current year already have actuals — no forecast periods needed.
)} ); } const CHART_COLORS = ["var(--c-1)","var(--c-2)","var(--c-3)","var(--c-4)","var(--c-5)","var(--c-6)","var(--c-7)","var(--c-8)"]; /* ── SmartInsights — auto-computed data highlights (no API call) ───────────── */ function SmartInsights({ movements, kpis, isBvA }) { const { Icon } = window; const all = movements || []; const favM = all.filter(m => m.is_fav && m.variance !== 0); const advM = all.filter(m => !m.is_fav && m.variance !== 0); const revM = all.filter(m => m.category === "Revenue"); const fmt = (v) => window.fmtCurrency(v, { compact: true }); const fmtS = (v) => window.fmtCurrency(v, { compact: true, signed: true }); const items = []; const profKpi = (kpis || []).find(k => k.icon === "wallet"); if (profKpi?.variance != null) { items.push({ icon: profKpi.is_fav ? "trending-up" : "trending-down", tone: profKpi.is_fav ? "fav" : "adv", // use the account's own name so NHS sessions say "Net surplus", not "Operating profit" label: profKpi.label || "Operating profit", text: `${fmtS(profKpi.variance)} vs ${isBvA ? "budget" : "prior"}`, }); } if (favM.length + advM.length > 0) { const more = favM.length >= advM.length; items.push({ icon: more ? "check-circle" : "alert-circle", tone: more ? "fav" : "adv", label: "Movement split", text: `${favM.length} favourable · ${advM.length} adverse`, }); } if (all.length > 0) { const top = all.reduce((a, b) => Math.abs(a.variance||0) > Math.abs(b.variance||0) ? a : b); if (Math.abs(top.variance||0) > 0) { // Strip a leading Xero-style account code ("200 Digital Services Revenue") // before truncating, so the chip keeps the meaningful words. const clean = top.account.replace(/^\d{2,4}\s*[-–·]?\s*/, ""); const nm = clean.length > 26 ? clean.slice(0, 24) + "…" : clean; items.push({ icon: "zap", tone: top.is_fav ? "fav" : "adv", label: "Biggest movement", text: `${nm}: ${fmtS(top.variance)}`, }); } } const catAdv = {}; advM.filter(m => m.category !== "Revenue").forEach(m => { catAdv[m.category] = (catAdv[m.category] || 0) + Math.abs(m.variance || 0); }); const [topCat, topAmt] = Object.entries(catAdv).sort((a, b) => b[1] - a[1])[0] || []; if (topCat) { items.push({ icon: "alert-triangle", tone: "adv", label: "Most pressure", text: `${topCat}: ${fmt(topAmt)} adverse`, }); } if (!isBvA && revM.length >= 3) { const total = revM.reduce((s, m) => s + Math.abs(m.value || 0), 0); if (total > 0) { const top3pct = Math.round( [...revM].sort((a, b) => Math.abs(b.value) - Math.abs(a.value)).slice(0, 3) .reduce((s, m) => s + Math.abs(m.value || 0), 0) / total * 100 ); items.push({ icon: "pie-chart", tone: "info", label: "Revenue concentration", text: `Top 3 accounts: ${top3pct}% of total`, }); } } if (items.length === 0) return null; const toneCol = (t) => t === "fav" ? "var(--favourable-text)" : t === "adv" ? "var(--adverse-text)" : "var(--primary)"; const toneBg = (t) => t === "fav" ? "var(--favourable-soft)" : t === "adv" ? "var(--adverse-soft)" : "var(--primary-soft)"; return (
{items.map((item, i) => (
{item.label}
{item.text}
))}
); } /* ── SpotlightModal ─────────────────────────────────────────────────────── */ function SpotlightModal({ spotlight, onClose }) { const { Icon, Delta } = window; const { period, loading, data, error } = spotlight; React.useEffect(() => { const handler = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", handler); return () => document.removeEventListener("keydown", handler); }, []); const fmt = (v) => window.fmtCurrency(v, { compact: true }); const fmtS = (v) => window.fmtCurrency(v, { signed: true }); const fmtPct = (v) => (v == null || isNaN(v)) ? "—" : (v > 0 ? "+" : v < 0 ? "-" : "") + Math.abs(v).toFixed(1) + "%"; const movements = data?.movements || []; const kpis = (data?.kpis || []).filter(k => !k.pct_only); const favRows = movements.filter(m => m.is_fav && m.variance !== 0) .sort((a, b) => Math.abs(b.variance) - Math.abs(a.variance)).slice(0, 5); const advRows = movements.filter(m => !m.is_fav && m.variance !== 0) .sort((a, b) => Math.abs(b.variance) - Math.abs(a.variance)).slice(0, 5); const movCol = (rows, tone) => { const fav = tone === "fav"; return (
{fav ? "Top favourable" : "Top adverse"}
{rows.length === 0 && (
None
)} {rows.map((m, i) => (
{m.account}
{m.category}
{fmtS(m.variance)}
))}
); }; return (
e.stopPropagation()}>

{period}

Period spotlight · movements vs prior period
{loading && (
Loading {period}…
)} {error && (
{error}
)} {data && !loading && ( <> {/* KPI row */}
{kpis.map(k => (
{k.label}
{fmt(k.value)}
Prior: {fmt(k.prior)} = 0}> {fmtS(k.variance)} · {fmtPct(k.pct)}
))}
{/* Top movements */}
{movCol(favRows, "fav")} {movCol(advRows, "adv")}
)}
); } /* ── Cash & Runway ─────────────────────────────────────────────────────────── The headline SMB metric. Burn is estimated from the operating-result trend; true runway needs an actual cash balance, which the user enters (persisted) or — when connected — is prefilled from Xero's balance sheet. We label the basis honestly rather than presenting a P&L approximation as real cash. */ function CashRunway({ trend, periodMode, sessionId, isBvA, xeroCash }) { const { Icon, Card } = window; const KEY = `monthendiq_cash_${sessionId || "x"}`; const [cash, setCash] = React.useState(() => { try { const v = localStorage.getItem(KEY); return v != null && v !== "" ? Number(v) : null; } catch { return null; } }); const [editing, setEditing] = React.useState(false); const [draft, setDraft] = React.useState(""); // Prefill from Xero balance sheet if we have it and the user hasn't set one React.useEffect(() => { if (xeroCash != null && cash == null) { setCash(xeroCash); try { localStorage.setItem(KEY, String(xeroCash)); } catch {} } }, [xeroCash]); const results = (trend || []) .map(t => isBvA ? (t.actual_profit != null ? t.actual_profit : t.profit) : t.profit) .filter(v => typeof v === "number" && !isNaN(v)); if (results.length < 2 || periodMode === "ytd") return null; const avgPeriod = results.reduce((a, b) => a + b, 0) / results.length; const perMonth = periodMode === "quarterly" ? avgPeriod / 3 : avgPeriod; const burning = perMonth < 0; const monthlyBurn = Math.abs(perMonth); const nPeriods = results.length; const fmtMoney = (v) => window.fmtCurrency(v, { compact: true }); const saveCash = () => { const n = Number(String(draft).replace(/[^0-9.\-]/g, "")); if (!isNaN(n) && draft.trim() !== "") { setCash(n); try { localStorage.setItem(KEY, String(n)); } catch {} } else if (draft.trim() === "") { setCash(null); try { localStorage.removeItem(KEY); } catch {} } setEditing(false); }; const runwayMonths = (burning && cash != null && cash > 0) ? cash / monthlyBurn : null; const runoutDate = runwayMonths != null ? (() => { const d = new Date(); d.setMonth(d.getMonth() + Math.floor(runwayMonths)); return d.toLocaleDateString("en-GB", { month: "short", year: "numeric" }); })() : null; const runwayTone = runwayMonths == null ? "neutral" : runwayMonths < 6 ? "adv" : runwayMonths < 12 ? "caution" : "fav"; const toneColor = { adv: "var(--adverse-text)", caution: "var(--caution-text, #b45309)", fav: "var(--favourable-text)", neutral: "var(--fg-2)" }[runwayTone]; const startEdit = () => { setDraft(cash != null ? String(cash) : ""); setEditing(true); }; const tile = { padding: "14px 16px", background: "var(--surface-2)", borderRadius: "var(--radius-sm)", border: "1px solid var(--border)" }; const tileLbl = { font: "var(--text-label)", fontSize: 10.5, textTransform: "uppercase", letterSpacing: ".05em", color: "var(--fg-3)", marginBottom: 6 }; return ( {burning ? "Burning" : "Generative"}}>
{/* Cash on hand — editable */}
Cash on hand
{editing ? (
setDraft(e.target.value)} onKeyDown={e => { if (e.key === "Enter") saveCash(); if (e.key === "Escape") setEditing(false); }} placeholder="e.g. 250000" style={{ width: "100%", padding: "5px 8px", font: "var(--text-data)", fontSize: 15, color: "var(--ink)", background: "var(--surface)", border: "1px solid var(--primary)", borderRadius: "var(--radius-xs)", outline: "none" }} />
) : (
{cash != null ? fmtMoney(cash) : "Add →"}
)} {cash != null && xeroCash != null && Math.round(cash) === Math.round(xeroCash) && (
From Xero balance sheet
)}
{/* Avg monthly result */}
Avg monthly {burning ? "burn" : "surplus"}
{burning ? "-" : "+"}{fmtMoney(monthlyBurn)}
{/* Runway */}
Cash runway
{!burning ? (
Cash generative
) : runwayMonths == null ? (
Add cash to see runway →
) : (
{runwayMonths < 1 ? "<1" : Math.floor(runwayMonths)} mo
depleted ~{runoutDate}
)}
{burning ? "Burn" : "Surplus"} estimated from the operating result over the last {nPeriods} {periodMode === "quarterly" ? "quarters" : "months"} — excludes capex, financing and working-capital movements. Enter your actual cash balance for an accurate runway.
); } function Dashboard({ sessionId, initialData, periodMode, controlledPeriod, onDataChange, onModeChange, analysisType }) { const { Icon, Card, Button, Delta, Chip, TrendChart, Donut, WaterfallChart, RagBadge } = window; const [data, setData] = useStateDash(initialData); const [loading, setLoading] = useStateDash(false); const [activeTab, setActiveTab] = useStateDash("movements"); const [spotlight, setSpotlight] = useStateDash(null); const [commentaryCopied, setCommentaryCopied] = useStateDash(false); const [, setRagRev] = useStateDash(0); const [localComm, setLocalComm] = useStateDash(null); const [commSaveState, setCommSaveState] = useStateDash("idle"); // "idle"|"saving"|"saved"|"error" const commTimer = useRefDash(null); const [nhsSettingsOpen, setNhsSettingsOpen] = useStateDash(false); const [nhsSettingsDraft, setNhsSettingsDraft] = useStateDash(null); const [nhsSettingsSaving, setNhsSettingsSaving] = useStateDash(false); const [classifyOpen, setClassifyOpen] = useStateDash(false); // Track what we last fetched so we don't re-fetch on initial mount const lastFetched = useRefDash({ period: initialData?.selected_period, mode: periodMode }); /* ── formatters ── */ const fmtGBP = (v) => window.fmtCurrency(v); const fmtSignedGBP = (v) => window.fmtCurrency(v, { signed: true }); const fmtPct = (v) => { if (v === null || v === undefined || isNaN(v)) return "—"; return (v > 0 ? "+" : v < 0 ? "-" : "") + Math.abs(v).toFixed(1) + "%"; }; /* ── data fetching ── */ const fetchPeriod = async (period, mode) => { setLoading(true); try { const params = new URLSearchParams({ period, mode }); const res = await fetch(apiUrl(`/api/data/${sessionId}?${params}`)); if (res.ok) { const newData = await res.json(); setData(newData); onDataChange && onDataChange(newData); lastFetched.current = { period: newData.selected_period, mode }; } } finally { setLoading(false); } }; /* ── ARRS declared WTE (reconciliation) ── */ const saveArrsDeclared = async (roleKey, raw) => { const wte = raw === "" || raw == null ? 0 : parseFloat(raw); try { const r = await fetch(apiUrl(`/api/session/${sessionId}/arrs-declared`), { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ role_key: roleKey, wte: isFinite(wte) ? wte : 0 }), }); if (r.ok) fetchPeriod(data.selected_period, periodMode); } catch (e) { /* non-fatal — leave the field as typed */ } }; /* ── trend spotlight ── */ const openSpotlight = async (trendPoint) => { const period = trendPoint.full; setSpotlight({ period, loading: true, data: null, error: null }); try { const params = new URLSearchParams({ period, mode: periodMode || "monthly" }); const res = await fetch(apiUrl(`/api/data/${sessionId}?${params}`)); if (!res.ok) throw new Error(`HTTP ${res.status}`); const d = await res.json(); setSpotlight({ period, loading: false, data: d, error: null }); } catch (e) { setSpotlight(prev => ({ ...prev, loading: false, error: e.message })); } }; // Re-render when user updates KPI thresholds in Settings useEffectDash(() => { const h = () => setRagRev(v => v + 1); window.addEventListener("meiq:thresholds-updated", h); return () => window.removeEventListener("meiq:thresholds-updated", h); }, []); // React to TopBar period change (controlledPeriod prop) useEffectDash(() => { if (!controlledPeriod) return; if (controlledPeriod === lastFetched.current.period && periodMode === lastFetched.current.mode) return; fetchPeriod(controlledPeriod, periodMode); }, [controlledPeriod, periodMode]); /* ── Commentary editor ──────────────────────────────────────────────── */ // Re-initialise local bullets whenever the fetched period data changes useEffectDash(() => { if (!data?.commentary) return; const stripHtml = (h) => (h || "") .replace(/<[^>]+>/g, "") .replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">") .replace(/"/g, '"').replace(/'/g, "'").trim(); setLocalComm( data.commentary.map(c => ({ text: stripHtml(c.html), icon: c.icon || "circle", fav: c.fav !== false, source: c.source || null, edited: !!c.edited, })) ); setCommSaveState("idle"); }, [data?.selected_period, sessionId, periodMode]); const _saveComm = (bullets) => { clearTimeout(commTimer.current); setCommSaveState("saving"); commTimer.current = setTimeout(() => { const texts = bullets.filter(b => b.text.trim()).map(b => b.text.trim()); fetch(apiUrl(`/api/sessions/${sessionId}/commentary`), { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ commentary: texts, period: data?.selected_period || "" }), }).then(r => { if (r.ok) { setCommSaveState("saved"); setTimeout(() => setCommSaveState("idle"), 1500); } else setCommSaveState("error"); }).catch(() => setCommSaveState("error")); }, 700); }; const _updateBullet = (i, text) => { const next = (localComm || []).map((b, idx) => idx === i ? { ...b, text, edited: true } : b); setLocalComm(next); _saveComm(next); }; const _deleteBullet = (i) => { const next = (localComm || []).filter((_, idx) => idx !== i); setLocalComm(next); _saveComm(next); }; const _addBullet = () => { setLocalComm(prev => [...(prev || []), { text: "", icon: "edit-3", fav: true, source: null, edited: true }]); }; const _resetComm = () => { fetch(apiUrl(`/api/sessions/${sessionId}/commentary`), { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ commentary: [], period: data?.selected_period || "", clear: true }), }).then(() => fetchPeriod(data?.selected_period, periodMode)); }; if (!data) return
Loading…
; const isBvA = (analysisType || data.analysis_type) === "budget_vs_actual"; const { kpis, trend, revenue_split, expense_split, movements, commentary, waterfall, period, selected_period } = data; // Effective commentary: local edits take precedence over server data const stripHtml = (h) => (h || "").replace(/<[^>]+>/g, "") .replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">") .replace(/"/g, '"').replace(/'/g, "'").trim(); const commItems = localComm ?? (commentary || []).map(c => ({ text: stripHtml(c.html), icon: c.icon || "circle", fav: c.fav !== false, source: c.source || null, edited: !!c.edited, })); const hasEdits = commItems.some(b => b.edited); // Short month labels for waterfall x-axis e.g. "August 2025" → "Aug" const shortLabel = (lbl) => lbl ? lbl.split(" ")[0].slice(0, 3) : ""; React.useEffect(() => { if (waterfall && !waterfall.reconciles) { console.warn("[MonthEndIQ] Waterfall does not reconcile — check account categorisation"); } }, [waterfall]); // Donut colours const revSplit = (revenue_split || []).map((d, i) => ({ ...d, c: CHART_COLORS[i % 8] })); const expSplit = (expense_split || []).map((d, i) => ({ ...d, c: CHART_COLORS[i % 8] })); const revTotal = revSplit.reduce((a, b) => a + b.value, 0); const expTotal = expSplit.reduce((a, b) => a + b.value, 0); const tabs = ["movements", "revenue", "costs", "commentary"]; const ragThresholds = window.loadRagThresholds ? window.loadRagThresholds() : {}; // ── BvA KPI helpers ──────────────────────────────────────────────── const bvaRevKpi = isBvA ? (kpis || []).find(k => !k.pct_only && k.icon === "trending-up") : null; const bvaProfKpi = isBvA ? (kpis || []).find(k => !k.pct_only && k.icon === "wallet") : null; // ── BvA account-level profit waterfall bars ───────────────────── // Profit impact: Revenue variance improves profit; cost overspend reduces it. let bvaWaterfallBars = null; let bvaWaterfallReady = false; if (isBvA && bvaProfKpi && bvaProfKpi.prior != null && bvaProfKpi.value != null) { const budgetProfit = bvaProfKpi.prior; const actualProfit = bvaProfKpi.value; const netVariance = actualProfit - budgetProfit; const rawBars = (movements || []) .filter(m => m.variance != null && m.variance !== 0) .map(m => ({ label: m.account, impact: m.category === "Revenue" ? Number(m.variance) : -Number(m.variance), fav: m.is_fav, })) .sort((a, b) => Math.abs(b.impact) - Math.abs(a.impact)) .slice(0, 8); // Residual: keep waterfall balanced const explained = rawBars.reduce((s, b) => s + b.impact, 0); const residual = Math.round(netVariance - explained); if (Math.abs(residual) > 1) { rawBars.push({ label: "Other", impact: residual, fav: residual > 0 }); } bvaWaterfallBars = rawBars; bvaWaterfallReady = true; } return (
{/* ── BvA editorial headline (matches MoM style) ────────────── */} {isBvA && (() => { const profKpi = (kpis || []).find(k => k.icon === "wallet"); if (!profKpi || profKpi.variance == null) return null; const bvaPeriodLabel = (() => { const sp = data.selected_bva_period; if (!sp || sp === "full_year") return "Full Year"; try { return new Date(sp + "T00:00:00").toLocaleDateString("en-GB", { month: "long", year: "numeric" }); } catch (_) { return sp; } })(); return (
Budget vs Actual {bvaPeriodLabel}

Operating profit{" "} {fmtGBP(Math.abs(profKpi.variance))} {" "}{profKpi.variance >= 0 ? "above" : "below"} budget.

); })()} {/* Editorial headline — MoM view only */} {!isBvA && (() => { const profKpi = (kpis || []).find(k => k.icon === "wallet"); if (!profKpi || profKpi.variance == null) return null; return (
Variance report {period?.label || selected_period} {/xero/i.test(data?.file_name || "") && ( Synced from Xero )}

{profKpi.value != null && profKpi.value < 0 ? ( // Loss-making period: never celebrate "profit up" over a loss — // frame the movement honestly as the loss narrowing or widening. {/net surplus/i.test(profKpi.label) ? "Net deficit" : "Operating loss"}{" "} {profKpi.variance >= 0 ? "narrowed" : "widened"} by{" "} {fmtGBP(Math.abs(profKpi.variance))} {" "}to {fmtGBP(profKpi.value)} this period. ) : ( {profKpi.label || "Operating profit"} {profKpi.is_fav ? "up" : "down"}{" "} {fmtSignedGBP(profKpi.variance)} {" "}this period. )}

); })()} {/* KPI row */}
{(kpis || []).map((k) => { // Map KPI label → trend series key for sparkline const lc = k.label.toLowerCase(); const trendKey = !isBvA && trend && trend.length > 2 ? (lc.includes("revenue") || lc.includes("turnover") || lc.includes("sales") ? "revenue" : lc.includes("profit") || lc.includes("ebitda") || lc.includes("operating") ? "profit" : lc.includes("cost") || lc.includes("expense") ? "costs" : null) : null; const ragKey = k.icon === "trending-up" ? "revenue_var_pct" : k.icon === "wallet" ? "profit_var_pct" : k.icon === "percent" ? "op_margin" : k.icon === "users" ? "payroll_pct" : null; const ragSt = ragKey && window.ragStatus ? window.ragStatus(k.pct, ragThresholds[ragKey]) : null; return (
{k.label}
{k.pct_only ? fmtPct(k.pct) : fmtGBP(k.value)}
{!k.pct_only && k.variance !== null && ( = 0}> {fmtSignedGBP(k.variance)}{k.pct != null ? ` · ${fmtPct(k.pct)}` : ""} )} {k.pct_only && k.variance != null && ( = 0}> {`${k.variance >= 0 ? "+" : ""}${k.variance.toFixed(1)} pts vs ${period?.prior || "prior"}`} )} {/* TrendSparkline, not Sparkline — Movements.jsx overwrites window.Sparkline with an unrelated component of the same name */} {trendKey && window.TrendSparkline && (
)} {ragSt && (
)}
); })}
{/* NHS GP per-patient KPI row */} {data.sector === "nhs_gp" && (data.nhs_kpi_cards || []).length > 0 && (
NHS GP metrics
{nhsSettingsOpen && (() => { const draft = nhsSettingsDraft || {}; const setField = (k, v) => setNhsSettingsDraft(d => ({ ...d, [k]: v })); const save = async () => { setNhsSettingsSaving(true); try { const body = {}; if (draft.list_size !== "" && draft.list_size !== undefined) body.list_size = parseInt(draft.list_size) || 0; if (draft.wte_partners !== "" && draft.wte_partners !== undefined) body.wte_partners = parseFloat(draft.wte_partners) || null; if (draft.arrs_allocation !== "" && draft.arrs_allocation !== undefined) body.arrs_allocation = parseFloat(draft.arrs_allocation) || null; if (draft.qof_entitlement !== "" && draft.qof_entitlement !== undefined) body.qof_entitlement = parseFloat(draft.qof_entitlement) || null; if (draft.partner_drawings !== "" && draft.partner_drawings !== undefined) body.partner_drawings = parseFloat(draft.partner_drawings) || null; const res = await fetch(apiUrl(`/api/session/${sessionId}/settings`), { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), }); if (res.ok) { setNhsSettingsOpen(false); // Refresh period data to recompute NHS KPIs if (data.selected_period) fetchPeriod(data.selected_period, periodMode); } } finally { setNhsSettingsSaving(false); } }; const fieldStyle = { font: "var(--text-body)", fontSize: 12.5, padding: "5px 8px", borderRadius: "var(--radius-xs)", border: "1.5px solid var(--border)", background: "var(--surface)", color: "var(--ink)", width: "100%", boxSizing: "border-box" }; const labelStyle = { font: "var(--text-label)", fontSize: 10.5, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: ".05em", display: "block", marginBottom: 4 }; return (
setField("list_size", e.target.value)} />
setField("wte_partners", e.target.value)} />
setField("arrs_allocation", e.target.value)} />
setField("qof_entitlement", e.target.value)} /> {(() => { const q = data?.nhs_utilisation?.qof; if (!q) return null; if (q.estimated) return (
Leaving blank estimates ≈ £{Math.round(q.entitlement).toLocaleString()} from list size.
); return (
Update whenever the practice's QOF aspiration changes in-year.
); })()}
); })()}
{(data.nhs_kpi_cards || []).map(k => (
{k.label}
{k.fmt === "pct" ? `${k.value?.toFixed(1)}%` : k.fmt === "number" ? k.value?.toLocaleString() : fmtGBP(k.value)}
{k.hint && (
{k.hint}
)}
))}
)} {/* NHS income stream breakdown */} {(data.sector === "nhs_gp" || data.sector === "nhs_pcn") && (data.nhs_income_breakdown || []).length > 0 && (() => { const streams = data.nhs_income_breakdown; // Token palette, so the mix re-steps for the dark surface instead of // sitting at light-mode saturation on navy. const STREAM_COLORS = { core_contract: "var(--c-1)", qof: "var(--c-3)", enhanced_services: "var(--c-5)", pcn_des: "var(--c-2)", premises: "var(--c-4)", private: "var(--c-8)", other_nhs: "var(--c-6)", unclassified: "var(--adverse)", }; const STREAM_FALLBACK = "var(--c-8)"; const fmtCompact = v => window.fmtCurrency(v, { compact: true }); const unclassifiedCount = (streams.find(s => s.key === "unclassified")?.accounts || []).length; return (
Income streams {unclassifiedCount > 0 && ( {unclassifiedCount} to review )} 0 ? "auto" : 0, font: "var(--text-caption)", fontSize: 11, color: "var(--fg-3)" }}> {period?.label || selected_period || ""}
{/* Stacked proportional bar */}
{streams.map(s => (
0 ? 3 : 0 }} /> ))}
{/* Stream rows — compact table style */} {streams.map(s => (
{s.label} {s.accounts && s.accounts.length > 1 && ( {s.accounts.length} lines )} {fmtCompact(s.value)} {s.pct}%
{s.accounts && s.accounts.length > 1 && (
{s.accounts.map((a, i) => { const delta = a.prior_value != null ? a.value - a.prior_value : null; const fav = delta != null && delta >= 0; return (
{a.name} {fmtCompact(a.value)} {delta != null && ( {fav ? "+" : ""}{fmtCompact(delta)} )}
); })}
)} ))}
); })()} {/* NHS GP workforce breakdown */} {data.sector === "nhs_gp" && data.workforce_breakdown && (() => { const wb = data.workforce_breakdown; const roles = [ { key: "clinical", label: "Clinical", icon: "stethoscope", color: "var(--favourable-text)" }, { key: "locum", label: "Locum", icon: "user-x", color: "var(--caution-text, #b45309)" }, { key: "management", label: "Management", icon: "briefcase", color: "var(--primary-text)" }, { key: "admin", label: "Admin", icon: "clipboard", color: "var(--fg-2)" }, ].filter(r => wb[r.key] && wb[r.key].total !== 0); if (!roles.length) return null; const total = roles.reduce((s, r) => s + Math.abs(wb[r.key].total), 0); return (
Workforce cost breakdown
{roles.map(r => { const amt = Math.abs(wb[r.key].total); const pct = total ? (amt / total * 100) : 0; return (
{r.label} {fmtGBP(amt)} ({pct.toFixed(0)}%)
); })}
); })()} {/* ARRS headcount tracker */} {(data.sector === "nhs_gp" || data.sector === "nhs_pcn") && (data.arrs_headcount?.roles || []).length > 0 && (() => { const hc = data.arrs_headcount; const alloc = hc.arrs_allocation || 0; const totalYtd = hc.total_ytd_spend || 0; const utilPct = alloc > 0 ? Math.min(100, totalYtd / alloc * 100) : null; const statusColor = pct => pct == null ? "var(--fg-3)" : pct >= 80 ? "var(--favourable-text, #15803d)" : pct >= 50 ? "var(--caution-text, #b45309)" : "var(--adverse-text, #b91c1c)"; return (
ARRS headcount tracker YTD • {hc.months_elapsed}m
{utilPct != null && ( {utilPct.toFixed(0)}% of allocation )}
{alloc > 0 && (
)}
Role WTE (est.) Declared Monthly avg % cap {hc.roles.map(r => { const pct = r.pct_of_cap; const col = statusColor(pct); // One full-width divider per row (spanning all columns) instead of // per-cell borders, which were ragged under auto-sized columns. const cellTop = { paddingTop: 6 }; return [
, {r.role} {r.divergent && ( ⚠ {r.wte_variance > 0 ? "+" : ""}{r.wte_variance.toFixed(1)} )} , {r.wte_est != null ? r.wte_est.toFixed(2) : "—"} , {r.wte_est != null ? ( saveArrsDeclared(r.key, e.target.value)} onKeyDown={e => { if (e.key === "Enter") e.target.blur(); }} style={{ width: 52, font: "600 12px var(--font-mono)", textAlign: "right", padding: "2px 5px", borderRadius: "var(--radius-xs)", border: "1px solid var(--border)", background: "var(--surface)", color: r.divergent ? "var(--adverse-text, #b91c1c)" : "var(--fg-1)" }} /> ) : —} , {window.fmtCurrency ? window.fmtCurrency(r.monthly_avg, { compact: true }) : `£${(r.monthly_avg||0).toLocaleString()}`} , {pct != null ? `${pct.toFixed(0)}%` : "—"} , ]; })}
WTE is estimated from spend ÷ NHSE reimbursement cap — an indicator, not audit-grade. Enter declared WTE from your HR record to reconcile; a ⚠ flags a gap over 0.5 WTE.
{alloc > 0 && (
Spent YTD: £{totalYtd.toLocaleString()} Allocation: £{alloc.toLocaleString()}
)}
); })()} {/* Year-end funding position — projected ARRS/QOF claim vs ceiling */} {(data.sector === "nhs_gp" || data.sector === "nhs_pcn") && data.nhs_forecast && (data.nhs_forecast.arrs || data.nhs_forecast.qof) && (() => { const fc = data.nhs_forecast; const STATUS = { good: { color: "var(--favourable-text)", bg: "var(--favourable-soft)", border: "var(--favourable-border)", label: "On track" }, watch: { color: "var(--caution-text)", bg: "var(--caution-soft)", border: "var(--caution-border)", label: "Watch" }, concern: { color: "var(--adverse-text)", bg: "var(--adverse-soft)", border: "var(--adverse-border)", label: "At risk" }, // QOF can't be read as "unclaimed" from a ledger — see _qof_position timing: { color: "var(--fg-2)", bg: "var(--surface-2)", border: "var(--border)", label: "Timing" }, review: { color: "var(--caution-text)", bg: "var(--caution-soft)", border: "var(--caution-border)", label: "Review" }, }; const fmtC = v => `£${Math.round(v || 0).toLocaleString()}`; const Row = ({ name, b }) => { const st = STATUS[b.status] || STATUS.good; const pct = Math.min((b.projected / (b.ceiling || 1)) * 100, 100); return (
{name} {st.label} {b.estimated_entitlement && ( entitlement estimated from list size )}
{b.headline}
{/* projection bar: YTD solid, projected remainder hatched-ish (lower opacity), vs ceiling track */}
{!b.final && ( )}
YTD {fmtC(b.ytd)} {b.opportunity && !b.final && · projected {fmtC(b.projected)}} {b.opportunity === false && b.shortfall > 0 && · {fmtC(b.shortfall)} below entitlement to date} {b.required_monthly != null && b.months_remaining > 0 && b.projected_unclaimed > 0 && ( needs {fmtC(b.required_monthly)}/mo for {b.months_remaining} remaining mo · )} ceiling {fmtC(b.ceiling)}
); }; return (
Year-end funding position {fc.arrs?.final || fc.qof?.final ? "contract year complete" : "straight-line projection from YTD pace"}
{fc.arrs && } {fc.qof && }
ARRS is a reimbursement ceiling, so allocation not spent is genuinely unclaimed — projected at the YTD monthly pace against the allocation you entered. QOF is not a ceiling: achievement is clinical and the balance settles after year-end, so its position is shown for review, never as "unclaimed".
); })()} {/* NHS Practice Benchmarks */} {(data.sector === "nhs_gp" || data.sector === "nhs_pcn") && (data.nhs_benchmarks?.items || []).length > 0 && (() => { const items = data.nhs_benchmarks.items; const STATUS = { good: { bg: "var(--favourable-soft, #dcfce7)", color: "var(--favourable-text, #15803d)", label: "Good" }, watch: { bg: "var(--caution-soft, #fef3c7)", color: "var(--caution-text, #b45309)", label: "Watch" }, concern: { bg: "var(--adverse-soft, #fee2e2)", color: "var(--adverse-text, #b91c1c)", label: "Concern" }, }; return (
Practice benchmarks Annualised · {data.nhs_benchmarks.months_elapsed}m YTD
Metric Your figure Benchmark {items.map(b => { const s = STATUS[b.status] || STATUS.watch; return [
, {b.label} , {b.value_str} , {s.label} , ]; })}
Sources: AISMA 2024/25, NHS England GP contract data. Hover metric for detail.
); })()} {/* Year-end tax reserve panel */} {data.sector === "nhs_gp" && data.nhs_benchmarks && data.wte_partners > 0 && (() => { const me = data.nhs_benchmarks.months_elapsed || 12; const annProfit = data.nhs_benchmarks.ann_profit || 0; const ytdDraw = data.ytd_drawings || 0; const annDraw = Math.round(ytdDraw / me * 12); const wte = data.wte_partners; const profPerPartner = wte ? Math.round(annProfit / wte) : null; const drawPerPartner = wte ? Math.round(annDraw / wte) : null; const taxReserve = profPerPartner != null ? Math.round(profPerPartner * 0.20) : null; const pensionRate = 0.1438; // NHS employer pension rate (14.38%) const netAfterTax = profPerPartner != null && taxReserve != null ? profPerPartner - taxReserve : null; if (profPerPartner == null) return null; const fmtK = v => v != null ? `${v < 0 ? "-" : ""}£${Math.abs(v).toLocaleString()}` : "—"; const Row = ({ label, value, bold, color, borderTop }) => (
{label} {value}
); return (
Year-end tax reserve Per WTE partner · annualised
{drawPerPartner != null && } {taxReserve != null && ( )} {netAfterTax != null && ( = 0 ? "var(--favourable-text, #15803d)" : "var(--adverse-text, #b91c1c)"} borderTop /> )}
Tax reserve estimate only — based on 20% effective rate. Actual liability depends on individual partner drawings, pension contributions, and other income. Always confirm with your tax adviser.
); })()} {/* Partner drawings tracker */} {data.sector === "nhs_gp" && (() => { const drawTrend = (data.trend || []).filter(t => t.drawings > 0); if (!drawTrend.length) return null; const maxProfit = Math.max(...drawTrend.map(t => Math.abs(t.profit || 0)), 1); const maxDraw = Math.max(...drawTrend.map(t => t.drawings), 1); const scale = Math.max(maxProfit, maxDraw); const ytdDraw = drawTrend.reduce((s, t) => s + t.drawings, 0); const overdraw = drawTrend.filter(t => t.drawings > (t.profit || 0)); return (
Partner drawings
YTD: {window.fmtCurrency ? window.fmtCurrency(ytdDraw, { compact: true }) : `£${ytdDraw.toLocaleString()}`}
{overdraw.length > 0 && (
Drawings exceeded surplus in {overdraw.length} period{overdraw.length > 1 ? "s" : ""}: {overdraw.map(t => t.m).join(", ")}
)}
{drawTrend.map(t => { const drawH = Math.round((t.drawings / scale) * 54); const profH = Math.round((Math.abs(t.profit || 0) / scale) * 54); const over = t.drawings > (t.profit || 0); return (
{t.m}
); })}
Surplus Drawings
); })()} {/* Smart highlights */} {/* Trend + AI commentary */}
{isBvA && trend && trend.length > 1 && ( Trend}>
Revenue — Actual vs Budget
Profit — Actual vs Budget
)} {!isBvA && ( Trend}> {trend && trend.length > 1 ? ( ) : (
Not enough periods for a trend chart
)} )} {hasEdits && ( )} {commSaveState === "saving" && ( Saving… )} {commSaveState === "saved" && ( ✓ Saved )} {hasEdits && commSaveState === "idle" && ( Edited )} {commItems.length > 0 && commSaveState === "idle" && ( )} AI
}>
    {commItems.map((b, i) => (