// financial/src/retirementScreens.jsx — the Retirement tab's screens.
//
// The planner used to be a flat wall of ~50 inputs with the answer somewhere
// in the middle. It is now four screens plus the deep-dive: ANSWER (the
// funded ratio, one sentence, the three assumptions it hangs on, one fix),
// DRIVERS (sensitivity, presets, tax buckets, the spending bridge, levers),
// TIMELINE (one chart 2026→2060 with the life events on it, and the
// year-by-year ledger every number came from) and INPUTS (the full form,
// grouped, with anything at its default collapsed). Everything here is a
// presentational component fed by retirement.jsx, which owns the engine
// runs; nothing here computes a planning number.
//
// Loaded BEFORE retirement.jsx (document order) and published on
// window.RetirementScreens. Slices run in their own Babel scope, so the
// shared helpers come from window.FinanceShared and the libs from window.
const { useState, useMemo } = React;
const { ResponsiveContainer, ComposedChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
ReferenceLine, ReferenceArea, BarChart, Bar, Cell, LabelList } = window.Recharts;
const { fmtCur, fmtDate, timeAgo } = window.FinanceShared;
const SCREENS = [
{ key: 'answer', label: 'Answer' },
{ key: 'drivers', label: 'Drivers' },
{ key: 'timeline', label: 'Timeline' },
{ key: 'inputs', label: 'Inputs' },
{ key: 'analysis', label: 'Deep dive' },
];
const TIP = { background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 11, color: '#e2e8f0' };
const iso = (v) => { try { return v && v.toDate ? v.toDate().toISOString() : v ? new Date(v).toISOString() : null; } catch (e) { return null; } };
const daysAgo = (v) => { const s = iso(v); if (!s) return null; return Math.floor((Date.now() - new Date(s).getTime()) / 86400000); };
// A small "where did this number come from" tag every card carries.
function Source({ children, kind }) {
const color = kind === 'engine' ? '#10b981' : kind === 'heuristic' ? '#f59e0b' : '#64748b';
return {kind === 'engine' ? 'ENGINE' : kind === 'heuristic' ? 'ESTIMATE' : 'DATA'} · {children};
}
function ScreenNav({ screen, setScreen, badges }) {
return (
{SCREENS.map(s => (
))}
);
}
// ── WI1: the stale-inputs banner ───────────────────────────────────────────
function StaleInputsBanner({ recon, onSync, syncing }) {
if (!recon || !recon.anyDrift) return null;
const rows = recon.drifted;
return (
Inputs are stale — {rows.length} balance{rows.length === 1 ? '' : 's'} drifted more than {recon.thresholdPct}% from the synced accounts
Accounts synced {recon.accountsSyncedAt ? timeAgo(recon.accountsSyncedAt) : 'never'} · inputs last synced {recon.lastSyncedAt ? timeAgo(recon.lastSyncedAt) : 'never'} · total drift {fmtCur(recon.totalDriftAbs)}. Nothing is overwritten until you say so.
{k401.needsReview
? <>Confirm the 401(k) split. The migration defaulted {fmtCur(k401.balance)} to 100% pre-tax. If part of it is Roth 401(k), the conversion schedule and the RMD projection are wrong by that amount until you correct it — enter the statement's money sources below, or type the split here.
: <>Split not yet confirmed. {fmtCur(k401.pretax)} pre-tax / {fmtCur(k401.roth)} Roth, basis {k401.basis}{k401.seeded ? ' (seeded statement rows)' : ''}. In use by the engine; confirm once you have checked it against the statement.}
{onConfirm && k401.basis !== 'none' && }
)}
{k401 && k401.confirmed && k401.confirmedAt &&
Split confirmed {fmtDate(k401.confirmedAt)} on the {k401.basis} basis.
{c.firstYear ? `first contribution ${c.firstYear} → eligible ${c.eligibleDate}` : `set "${c.label} — first contribution year" on the Inputs screen`}
{c.note}
))}
{taxCfgGaps && taxCfgGaps.empty && (
Tax config is empty. {taxCfgGaps.missing.length} assumptions the tax model needs are unset: {taxCfgGaps.missing.map(m => m.label).join(', ')}.
{onGotoTax && }
)}
);
}
// ── WI3: the spending bridge (waterfall) ───────────────────────────────────
function SpendingBridgeCard({ bridge, rollup, basis, ratioNow, ratioOnLedger, ratioOnDerived, onConfirm, onGotoTaxonomy, confirmedAt, solveAt, engineBasisAnnual }) {
const [showExcluded, setShowExcluded] = useState(false);
// The drag: a retirement spend in today's dollars, re-solved by the
// engine after a short pause so the slider stays fluid.
const [drag, setDrag] = useState(null);
const [dragRatio, setDragRatio] = useState(null);
React.useEffect(() => {
if (drag == null || !solveAt) return undefined;
const t = setTimeout(() => { try { setDragRatio(solveAt(drag)); } catch (e) { setDragRatio(null); } }, 180);
return () => clearTimeout(t);
}, [drag, solveAt]);
if (!rollup) return (
Projected retirement spending — from the ledger
No transactions synced yet, so the ledger cannot produce a spending figure. The funded ratio is on the {basis} basis.
);
const steps = bridge ? bridge.steps : [];
// Running totals for the waterfall bars.
let run = 0;
const bars = steps.map(s => {
if (s.type === 'start') { run = s.amount; return { name: s.label, base: 0, value: s.amount, fill: '#e2e8f0', s }; }
if (s.type === 'end') return { name: s.label, base: 0, value: s.amount, fill: '#10b981', s };
const before = run; run += s.amount;
return { name: s.label, base: Math.min(before, run), value: Math.abs(s.amount), fill: s.amount < 0 ? '#f59e0b' : '#3b82f6', s };
});
const onLedger = basis === 'ledger';
return (
Projected retirement spending — the bridge from the ledger
Last 12 complete months ({rollup.window.from} → {rollup.window.to}), non-spending excluded, categories merged, each tagged with what happens to it at retirement. transactions
Derived from the ledger: {fmtCur(derived)}{engineBasisAnnual != null ? ` · the engine's current basis: ${fmtCur(engineBasisAnnual)}` : ''}. Each position is the engine's own solve on the ledger basis; nothing is saved by dragging. retirementNeeds.solveFundedRatio
);
})()}
Feed it into the funded ratio
{onLedger
?
In use — the ratio is on the ledger basis{confirmedAt ? ` (confirmed ${fmtDate(confirmedAt)})` : ''}: {ratioNow == null ? '—' : `${ratioNow.toFixed(2)}×`}{ratioOnDerived != null && · on the derived basis it would read {ratioOnDerived.toFixed(2)}×}
A suggestion you confirm — nothing changes until you click. The engine then takes the continuing spend from the ledger and still adds the age-ranged health and travel lines itself.
Base {tornado.base.toFixed(2)}× on the headline preset · {tornado.runs} engine runs · widest bar first.
)}
);
}
// ── The Answer screen ──────────────────────────────────────────────────────
function AnswerCard({ funded, gradeInfo, modelCfg, needAtRetirement, needToday, headlinePreset, presets, drivers, fix, planRun, onScreen, provisional }) {
const ratio = funded.ratio;
const cur = presets ? presets.find(p => p.key === 'current') : null;
const sentence = ratio == null ? 'No spending plan has been entered yet, so there is nothing to grade.'
: funded.capped ? `On the ${headlinePreset} assumptions the plan is funded far beyond its spending to age ${modelCfg.planToAge || 95}.`
: ratio >= 1 ? `On the ${headlinePreset} assumptions (${modelCfg.expectedReturn}% return, ${modelCfg.salaryGrowth}% salary growth) the money covers ${Math.round(ratio * 100)}% of projected spending to age ${modelCfg.planToAge || 95} — ${Math.round((ratio - 1) * 100)}% of headroom.`
: `On the ${headlinePreset} assumptions (${modelCfg.expectedReturn}% return, ${modelCfg.salaryGrowth}% salary growth) the money covers ${Math.round(ratio * 100)}% of projected spending${planRun && planRun.depletionAge ? `, running out at ${planRun.depletionAge}` : ''}.`;
return (
{ratio != null && ratio >= 1 ? 'Nothing needs fixing' : 'What would fix it'}
{fix ? (
{fix.label}
{fix.detail &&
{fix.detail}
}
+{fix.delta.toFixed(2)} → {fix.reaches.toFixed(2)}×{fix.reaches >= 1 ? ' — funded' : ' — still short; combine with the next lever'}
{fix.kind === 'lever' ? 'a real move, priced by re-running the engine' : 'an assumption, not a decision — shown because no lever alone closes the gap'}
) :
{ratio != null && ratio >= 1 ? `The plan is funded on the ${headlinePreset} preset; the Drivers screen shows how much room each assumption has.` : 'Computing…'}