// screens-2.jsx — Analysis, Coverage Insights screens const { useState: u2S, useEffect: u2E, useMemo: u2M, useRef: u2R } = React; // ════════════════════════════════════════════════════════════════ // SCREEN 4: AI ANALYSIS COMPLETE — policy table with AI insights // ════════════════════════════════════════════════════════════════ const PURPOSE_OPTIONS = [ "Income replacement", "Mortgage payoff", "College tuition", "Childcare support", "Car payoff", "Funeral expenses"]; const PolicyRow = ({ policy, idx, expanded, onToggle, purposes, togglePurpose, density }) => { const verified = policy.verified; const pad = density === "compact" ? "14px 20px" : "20px 24px"; return (
{policy.coverage}
Policy #{policy.policyNumber} · {policy.coverageType}
{verified ?
Verified
:
! Needs review
}
{expanded &&
{/* AI summary */}
Helm's analysis {policy.summary == null && · generating… }

{policy.summary || }

{/* Key facts grid */}
{[ ["Face amount", policy.faceAmount], ["Premium", policy.premium], ["Term", policy.term], ["Beneficiaries", policy.beneficiaries]]. map(([k, v]) =>
{k}
{v}
)}
{/* Purposes */}
What is this policy for? Tap to confirm.
{PURPOSE_OPTIONS.map((p) => togglePurpose(idx, p)}> {p} )}
{/* Flag if any */} {policy.flag &&
⚐
Worth knowing
{policy.flag}
}
}
); }; const AnalysisScreen = ({ policies, setPolicies, onAdvance, onAddAnother, density, onStepClick }) => { const [expanded, setExpanded] = u2S(0); // first row expanded const togglePurpose = (idx, p) => { setPolicies((prev) => prev.map((pol, i) => { if (i !== idx) return pol; const has = pol.purposes.includes(p); return { ...pol, purposes: has ? pol.purposes.filter((x) => x !== p) : [...pol.purposes, p] }; })); }; const allDone = policies.every((p) => p.purposes.length > 0); const pad = density === "compact" ? "32px 56px" : "48px 64px"; return (

Your policies, in plain English.

Helm read each document and pulled out the parts that matter. Confirm what each one's really for — that's how we'll build your coverage map.

{policies.map((p, i) => setExpanded(expanded === i ? -1 : i)} purposes={p.purposes} togglePurpose={togglePurpose} density={density} /> )}
); }; // ════════════════════════════════════════════════════════════════ // SANKEY — 4-column flow: Policy → Beneficiary → Purpose → Account // rows: [{ source, beneficiary, purpose, account, amount }] // ════════════════════════════════════════════════════════════════ const Sankey = ({ rows }) => { if (!rows || rows.length === 0) { return (
Add a policy to see your coverage map.
); } // Aggregate by each column const aggregate = (key) => { const m = new Map(); rows.forEach(r => m.set(r[key], (m.get(r[key]) || 0) + r.amount)); return [...m.entries()]; }; const sources = aggregate("source"); const benes = aggregate("beneficiary"); const accounts = aggregate("account"); // Layout — 4 columns const W = 1040, GAP = 8; const colX = { srcStart: 0, srcEnd: 160, beneStart: 320, beneEnd: 460, purStart: 620, purEnd: 760, accStart: 920, accEnd: 1040, }; const total = sources.reduce((a, [, v]) => a + v, 0) || 1; const totalH = 460; const scale = (v) => (v / total) * (totalH - GAP * Math.max(sources.length, benes.length, rows.length, accounts.length)); // Bright destination palette per beneficiary (drives the row tint) const benePalette = [ { light: "#FFE4CB", base: "#FFB876", deep: "#D38D54" }, // peach/orange { light: "#CFEDF1", base: "#A1DCE2", deep: "#70B6BA" }, // sky blue { light: "#E5F0AE", base: "#C0C983", deep: "#8D9933" }, // soft chartreuse { light: "#E2D7F4", base: "#C6B3EB", deep: "#9888BF" }, // soft purple ]; const beneOrder = benes.map(([k]) => k); const colorForBene = (b) => benePalette[beneOrder.indexOf(b) % benePalette.length]; // Position columns stacked const stackPositions = (entries) => { const m = new Map(); let y = 0; entries.forEach(([k, v]) => { const h = scale(v); m.set(k, { y, h, v }); y += h + GAP; }); return m; }; const srcPos = stackPositions(sources); const benePos = stackPositions(benes); const accPos = stackPositions(accounts); // Order rows by beneficiary, then policy — so same-color ribbons stack const ordered = [...rows].sort((a, b) => { const ba = beneOrder.indexOf(a.beneficiary); const bb = beneOrder.indexOf(b.beneficiary); if (ba !== bb) return ba - bb; return a.source.localeCompare(b.source); }); // Track running offsets per node, plus mid-column "purpose row" y for each row const srcOff = new Map(); const beneInOff = new Map(); const beneOutOff = new Map(); const accOff = new Map(); let midY = 0; const segments = []; // each row → 3 segments + purpose label ordered.forEach((r, idx) => { const h = scale(r.amount); const sp = srcPos.get(r.source); const bp = benePos.get(r.beneficiary); const ap = accPos.get(r.account); const sO = srcOff.get(r.source) || 0; const biO = beneInOff.get(r.beneficiary) || 0; const boO = beneOutOff.get(r.beneficiary) || 0; const aO = accOff.get(r.account) || 0; const ySrcA = sp.y + sO, ySrcB = ySrcA + h; const yBnIA = bp.y + biO, yBnIB = yBnIA + h; const yBnOA = bp.y + boO, yBnOB = yBnOA + h; const yMidA = midY, yMidB = midY + h; const yAccA = ap.y + aO, yAccB = yAccA + h; const c = colorForBene(r.beneficiary); // Seg 1: src right edge → bene left const cx1 = (colX.srcEnd + colX.beneStart) / 2; const seg1 = `M${colX.srcEnd},${ySrcA} C${cx1},${ySrcA} ${cx1},${yBnIA} ${colX.beneStart},${yBnIA} L${colX.beneStart},${yBnIB} C${cx1},${yBnIB} ${cx1},${ySrcB} ${colX.srcEnd},${ySrcB} Z`; // Seg 2: bene right → mid (purpose row) const cx2 = (colX.beneEnd + colX.purStart) / 2; const seg2 = `M${colX.beneEnd},${yBnOA} C${cx2},${yBnOA} ${cx2},${yMidA} ${colX.purStart},${yMidA} L${colX.purStart},${yMidB} C${cx2},${yMidB} ${cx2},${yBnOB} ${colX.beneEnd},${yBnOB} Z`; // Seg 3 (mid band, where purpose label sits): straight rectangle const seg3 = `M${colX.purStart},${yMidA} L${colX.purEnd},${yMidA} L${colX.purEnd},${yMidB} L${colX.purStart},${yMidB} Z`; // Seg 4: mid → account (extends fully across the account column) const cx3 = (colX.purEnd + colX.accStart) / 2; const seg4 = `M${colX.purEnd},${yMidA} C${cx3},${yMidA} ${cx3},${yAccA} ${colX.accStart},${yAccA} L${colX.accEnd},${yAccA} L${colX.accEnd},${yAccB} L${colX.accStart},${yAccB} C${cx3},${yAccB} ${cx3},${yMidB} ${colX.purEnd},${yMidB} Z`; segments.push({ key: `s-${idx}`, seg1, seg2, seg3, seg4, colorBase: c.base, colorDeep: c.deep, colorLight: c.light, midY: yMidA, midH: h, purpose: r.purpose, amount: r.amount, g1: `g1-${idx}`, g2: `g2-${idx}`, g4: `g4-${idx}`, }); srcOff.set(r.source, sO + h); beneInOff.set(r.beneficiary, biO + h); beneOutOff.set(r.beneficiary, boO + h); accOff.set(r.account, aO + h); midY += h + GAP; }); const fmtAmt = (v) => `$${Math.round(v / 1000).toLocaleString()}K`; const labelStyle = { fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, fill: "var(--helm-dark-green)" }; const amtStyle = { fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600, fill: "var(--helm-dark-green)" }; const headerStyle = { fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, fill: "var(--helm-dark-grey)", textTransform: "uppercase", letterSpacing: "0.08em" }; // Per-bene full-row tint band (across beneficiary column) const beneBandPad = 0; return (
{segments.map(s => ( {/* policy → bene: ecru → bright base */} {/* bene → purpose: light → base */} {/* purpose → account: base → deep */} ))} {/* Column headers */} Policies Beneficiaries Purposes Accounts {/* Source rectangles — pale ecru */} {sources.map(([k, v]) => { const p = srcPos.get(k); const carrier = k.split(" · ")[0]; return ( {carrier} {fmtAmt(v)} ); })} {/* Ribbon segment 1: src → bene */} {segments.map(s => )} {/* Beneficiary "node" tint bands — full-color block per beneficiary */} {benes.map(([k, v]) => { const p = benePos.get(k); const c = colorForBene(k); return ( {k} {fmtAmt(v)} ); })} {/* Ribbon segment 2: bene → purpose row */} {segments.map(s => )} {/* Mid band (purpose strip) — solid base color so labels read on it */} {segments.map(s => )} {/* Purpose labels on the mid band */} {segments.map(s => ( {s.purpose} {fmtAmt(s.amount)} ))} {/* Ribbon segment 4: mid → account */} {segments.map(s => )} {/* Account labels (right side, on the ribbon end) */} {accounts.map(([k, v]) => { const p = accPos.get(k); return ( {k} {fmtAmt(v)} ); })}
); }; const InsightsScreen = ({ policies, onAdvance, density, onStepClick }) => { // Map purposes → financial account they flow into const accountFor = (purpose) => { const cash = ["Mortgage payoff", "Childcare support", "Funeral expenses", "Car payoff"]; return cash.includes(purpose) ? "Bank account" : "Helm Cash"; }; // Build sankey rows: policy → beneficiary → purpose → account const rows = u2M(() => { const out = []; policies.forEach((p) => { const beneList = p.beneficiariesDetail || [{ name: "Estate", pct: 100 }]; const purposes = p.purposes.length > 0 ? p.purposes : ["Income replacement"]; const perPurpose = (p.faceAmountNum || 100000) / purposes.length; purposes.forEach((purpose) => { beneList.forEach((b) => { out.push({ source: `${p.carrier} · $${(p.faceAmountNum / 1000).toFixed(0)}K`, beneficiary: b.name, purpose, account: accountFor(purpose), amount: perPurpose * (b.pct / 100) }); }); }); }); return out; }, [policies]); const total = policies.reduce((a, p) => a + (p.faceAmountNum || 0), 0); const pad = density === "compact" ? "32px 56px" : "48px 64px"; return (
Your coverage map

Where your protection flows.

Total coverage
${(total / 1000).toLocaleString()}K
{/* Stat tiles */}
{[ ["Policies on file", policies.length], ["Purposes assigned", new Set(rows.map((r) => r.purpose)).size], ["People protected", new Set(rows.map((r) => r.beneficiary)).size]]. map(([k, v]) =>
{k}
{v}
)}
); }; window.AnalysisScreen = AnalysisScreen; window.InsightsScreen = InsightsScreen; window.Sankey = Sankey; window.PURPOSE_OPTIONS = PURPOSE_OPTIONS;