// financial/src/kids.jsx — the Kids section.
//
// Kid profiles, 529/UTMA account assignment, the deterministic college
// trajectory math + CollegeTrajectoryCard, the household posture checklist,
// and the AI plan (generateKidsPlan) rendered through MarkdownView.
//
// Slices run in their own Babel scope; src/shared.jsx runs first and
// publishes window.FinanceShared.
const { useState, useEffect, useContext, useMemo, useRef, useCallback } = React;
const { ResponsiveContainer, LineChart, Line, BarChart, Bar, AreaChart, Area,
ComposedChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine } = window.Recharts;
const { DataContext, useToast, callFn, fmtCur, calcAge, MarkdownView } = window.FinanceShared;
// ── College trajectory math (deterministic, used by CollegeTrajectoryCard) ─
// Sticker-price all-in COA for 2025-26, projected forward at 5%/yr.
// Returns are in real terms (6%) so we can compare to inflated COA cleanly.
const COLLEGE_SCENARIOS_2025 = [
{ key: 'udelInState', label: 'UDel (in-state)', annualCOA: 34000 },
{ key: 'outOfStatePublicAvg', label: 'Out-of-state public avg', annualCOA: 46500 },
{ key: 'udelOutOfState', label: 'UDel (out-of-state)', annualCOA: 58000 },
{ key: 'privateAvg', label: 'Private 4-year avg', annualCOA: 62000 },
];
const REAL_RETURN_PCT = 6;
const REAL_RETURN_LOW = 4; // conservative scenario
const REAL_RETURN_HIGH = 8; // optimistic scenario
const EDU_INFLATION_PCT = 5;
// FV at month n given a real-return rate (% per year, monthly compounding).
function fvAtMonth(currentBalance, monthlyContrib, monthsElapsed, ratePct) {
const r = ratePct / 100 / 12;
const n = Math.max(0, monthsElapsed);
if (n === 0) return currentBalance;
if (r === 0) return currentBalance + monthlyContrib * n;
return currentBalance * Math.pow(1 + r, n) + monthlyContrib * (Math.pow(1 + r, n) - 1) / r;
}
// FV of a balance + monthly contributions, monthly compounding, at base rate.
function projectSavings(currentBalance, monthlyContrib, years) {
return fvAtMonth(currentBalance, monthlyContrib, Math.round(years * 12), REAL_RETURN_PCT);
}
// Year-by-year balance path (from t=0 to t=yearsToCollege), one entry per year,
// at low/mean/high rates. Used to render the fan chart.
function projectionPath(currentBalance, monthlyContrib, yearsToCollege, currentYear) {
const yrs = Math.max(0, Math.round(yearsToCollege));
const out = [];
for (let y = 0; y <= yrs; y++) {
const months = y * 12;
const low = Math.round(fvAtMonth(currentBalance, monthlyContrib, months, REAL_RETURN_LOW));
const mean = Math.round(fvAtMonth(currentBalance, monthlyContrib, months, REAL_RETURN_PCT));
const high = Math.round(fvAtMonth(currentBalance, monthlyContrib, months, REAL_RETURN_HIGH));
out.push({
year: currentYear + y,
yearsOut: y,
low, mean, high,
range: [low, high], // Recharts area-range tuple
});
}
return out;
}
// Sum of inflated COA across all 4 college years, starting at year-of-matriculation.
function inflated4YearCOA(annualCOA2025, yearsToCollege) {
const e = EDU_INFLATION_PCT / 100;
let total = 0;
for (let i = 0; i < 4; i++) {
total += annualCOA2025 * Math.pow(1 + e, yearsToCollege + i);
}
return total;
}
// Solve for monthly contribution that makes FV equal target.
function requiredMonthly(currentBalance, target, years) {
const r = REAL_RETURN_PCT / 100 / 12;
const n = Math.max(0, Math.round(years * 12));
if (n === 0) return Math.max(0, target - currentBalance);
const fvLump = currentBalance * Math.pow(1 + r, n);
const annFactor = (Math.pow(1 + r, n) - 1) / r;
const pmt = (target - fvLump) / annFactor;
return Math.max(0, pmt);
}
const fmtMoney = (n) => {
if (!isFinite(n)) return '—';
if (Math.abs(n) >= 1000) return '$' + Math.round(n / 1000).toLocaleString() + 'k';
return '$' + Math.round(n).toLocaleString();
};
const fmtMoneyExact = (n) => '$' + Math.round(n).toLocaleString();
function CollegeTrajectoryCard({ kids, kidAccounts, assignments, monthlyByAccount, currentYear }) {
const calc = (() => {
return kids.filter(k => k.name && k.dob).map(k => {
const dob = new Date(k.dob);
const ageMs = Date.now() - dob.getTime();
const age = ageMs / (365.25 * 24 * 3600 * 1000);
const collegeStart = k.collegeStartYear ? Number(k.collegeStartYear) : (dob.getFullYear() + 18);
const yearsToCollege = Math.max(0, collegeStart - currentYear);
const accts = kidAccounts.filter(a => assignments[a.id] === k.id);
const balance = accts.reduce((s, a) => s + (a.currentBalance || 0), 0);
const monthly = accts.reduce((s, a) => s + (Number(monthlyByAccount[a.id]) || 0), 0);
const projected = projectSavings(balance, monthly, yearsToCollege);
const scenarios = COLLEGE_SCENARIOS_2025.map(s => {
const cost = inflated4YearCOA(s.annualCOA, yearsToCollege);
const gap = cost - projected;
const monthlyNeeded = requiredMonthly(balance, cost, yearsToCollege);
return { ...s, cost, gap, monthlyNeeded };
});
const path = projectionPath(balance, monthly, yearsToCollege, currentYear);
// Endpoint values (low/mean/high) at college start, plus cost markers
const endpoint = path[path.length - 1] || { low: balance, mean: balance, high: balance };
const udelCOA = scenarios.find(s => s.key === 'udelInState')?.cost || 0;
const oosCOA = scenarios.find(s => s.key === 'outOfStatePublicAvg')?.cost || 0;
return { id: k.id, name: k.name, age: Math.floor(age), yearsToCollege, collegeStart, balance, monthly, projected, scenarios, path, endpoint, udelCOA, oosCOA };
});
})();
if (calc.length === 0) return null;
const yAxisFmt = (v) => v >= 1000 ? '$' + Math.round(v/1000) + 'k' : '$' + v;
return (
College Trajectory
Shaded band = 4%–8% real return range; line = 6% real (S&P-style ETFs). Cost lines = 4-yr sticker COA at matriculation, inflated at {EDU_INFLATION_PCT}%/yr.
{calc.map(k => (
{k.name}
age {k.age} · college {k.collegeStart} ({k.yearsToCollege} yrs)
now {fmtMoneyExact(k.balance)}
+{fmtMoneyExact(k.monthly)}/mo
at start: {fmtMoney(k.endpoint.low)} – {fmtMoney(k.endpoint.mean)} – {fmtMoney(k.endpoint.high)}
Superfund room, school + college paid from the plan (K-12 draws capped at the statutory {fmtMoneyExact(Plan529.k12CapForYear(currentYear))}/yr — the cap never inflates, tuition does),
and the leftover's three exits. Assumes each kid's first child at age setCfg(c=>({...c, ageAtFirstChild: Number(e.target.value)||30}))}
style={{width:44,fontSize:11,padding:'1px 4px',margin:'0 2px'}}/> with the same school + college pattern. Save with the Save button above.
Load it now: room for {fmtMoneyExact(plan.loading.perBeneficiary)} per
kid today (2 donors × 5 × {fmtMoneyExact(excl)}, the 5-year election).
{plan.frontLoad && plan.loading.withinCapacity && <> Your {fmtMoneyExact(plan.loading.plannedLump)} fits, and beats dripping it over 5 years by {fmtMoney(plan.frontLoad.advantage)} by {currentYear + plan.frontLoad.horizonYears}.}
{plan.frontLoad && !plan.loading.withinCapacity && {fmtMoneyExact(plan.loading.excess)} of it exceeds the election — that slice files against the lifetime exemption.}
)}
{firstSchoolRow && (
School ({schoolFirst}–{schoolLast}): this year the 529 pays {fmtMoneyExact(firstSchoolRow.k12Draw)} of
the {fmtMoneyExact(firstSchoolRow.k12Billed)} bill{firstSchoolRow.k12FromCashflow > 0.5 && <>; {fmtMoneyExact(firstSchoolRow.k12FromCashflow)} stays on cashflow}.
All school years: {fmtMoney(t.k12Draw)} from the plan, {fmtMoney(t.k12FromCashflow)} from cashflow.
)}
{tuition > 0 && !firstSchoolRow &&
School years already behind {k.name} — tuition input ignored.
}
College ({collegeStart}–{collegeStart+3}, {scenario.label}):{' '}
{t.collegeShortfall < 1
? <>fully covered — {fmtMoney(t.collegeDraw)} paid from the plan.
: <>{fmtMoney(t.collegeDraw)} of {fmtMoney(t.collegeBilled)} covered — {fmtMoney(t.collegeShortfall)} short.}
{plan.leftover > 0.5 ? (
Leftover after college: {fmtMoney(plan.leftover)} in {plan.leftoverYear} — three exits:
{plan.grandchild && (
Rename to a grandchild
Covers {Math.round(plan.grandchild.coveragePct)}% of their school + college
(b. ~{plan.grandchild.grandkidBirthYear}, school {plan.grandchild.schoolFirstYear}, college {plan.grandchild.collegeStartYear}).
{plan.grandchild.leftoverAfter > 0.5 && <> Still {fmtMoney(plan.grandchild.leftoverAfter)} left after — generation three.}
Skips a generation → GST question for the lawyer first.
)}
{plan.roth && !plan.roth.unknown && (
529 → Roth IRA
{fmtMoneyExact(plan.roth.totalRolled)} over {plan.roth.yearsToExhaustCap} yrs
from {plan.roth.firstYear} ({fmtMoneyExact(plan.roth.lifetimeCap)} lifetime cap, IRA-limit pace).
{plan.roth.balanceAfter > 0.5 && <> Leaves {fmtMoney(plan.roth.balanceAfter)} needing another exit.}
Needs earned income; uses their own IRA room.
)}
{plan.nonQualified && (
Cash out (non-qualified)
Nets {fmtMoney(plan.nonQualified.net)} of {fmtMoney(plan.nonQualified.amount)} —
tax + 10% penalty on earnings only ({Math.round(plan.nonQualified.effectiveCostPct)}% haircut at 24% + 6.6% DE).
)}
) : (
Nothing left over — the plan spends out{t.collegeShortfall >= 1 && <> and still comes up {fmtMoney(t.collegeShortfall)} short of college}. Front-loading is what changes this number.
)}
);
})}
{/* ── One pot or one per kid ── */}
One pot, or one account per kid?
Three lines of the statute are per beneficiary, so the structure changes what the same dollars can do.
Ownership doesn't: you control every account either way.