// Screen 2 (Allocation) and Screen 3 (Goals) function AllocationScreen({ T, t, accent, theme, alloc, setAlloc, onNext }) { const items = [ { key: "bank", label: t.bank, c: accent.chart[0] }, { key: "realEstate", label: t.realEstate, c: accent.chart[1] }, { key: "stocks", label: t.stocks, c: accent.chart[2] }, { key: "bonds", label: t.bonds, c: accent.chart[3] }, { key: "gold", label: t.gold, c: accent.chart[4] }, { key: "crypto", label: t.crypto, c: accent.chart[5] }, ]; const total = items.reduce((s, i) => s + (alloc[i.key] || 0), 0); const left = 100 - total; const balanced = total === 100; // Adjust slider, then redistribute the delta proportionally across the others const onChange = (key, raw) => { const v = Math.max(0, Math.min(100, Math.round(raw))); const others = items.filter(i => i.key !== key); const otherTotal = others.reduce((s, i) => s + (alloc[i.key] || 0), 0); const remaining = 100 - v; const next = { ...alloc, [key]: v }; if (otherTotal === 0) { // distribute equally others.forEach(o => next[o.key] = Math.round(remaining / others.length)); } else { others.forEach(o => { next[o.key] = Math.max(0, Math.round((alloc[o.key] / otherTotal) * remaining)); }); } // fix rounding to make sum = 100 const newTotal = items.reduce((s, i) => s + next[i.key], 0); const diff = 100 - newTotal; if (diff !== 0) { const target = others.find(o => next[o.key] + diff >= 0) || others[0]; next[target.key] = Math.max(0, next[target.key] + diff); } setAlloc(next); }; return (
{t.allocKicker}
{t.allocTitle}
{t.allocSub}
{/* Stacked horizontal bar visualisation of the allocation */}
{items.map(i => alloc[i.key] > 0 && (
))}
{t.allocTotal}
{total}% {balanced ? `· ${t.allocBalanced}` : `· ${t.allocLeft} ${left > 0 ? "+" : ""}${left}%`}
{/* Slider rows */}
{items.map(i => ( onChange(i.key, v)} /> ))}
{t.next}
); } function AllocRow({ label, color, value, onChange, T, accent }) { return (
{label}
{value}%
onChange(parseInt(e.target.value))} style={{ position: "absolute", inset: -12, width: "100%", height: 30, opacity: 0, cursor: "grab", }} />
); } function GoalsScreen({ T, t, accent, theme, goals, setGoals, onNext }) { const cards = [ { key: "growth", title: t.goal1Title, body: t.goal1Body, img: "uploads/high_growth_icon_1778013442682.png" }, { key: "preserve", title: t.goal2Title, body: t.goal2Body, img: "uploads/preservation_icon_1778013461383.png" }, { key: "income", title: t.goal3Title, body: t.goal3Body, img: "uploads/passive_income_icon_1778013476266.png" }, { key: "retire", title: t.goal4Title, body: t.goal4Body, img: "uploads/retirement_icon_1778013493933.png" }, { key: "children", title: t.goal5Title, body: t.goal5Body, img: "uploads/children_icon_1778013507207.png" }, { key: "freedom", title: t.goal6Title, body: t.goal6Body, img: "uploads/financial_freedom_icon_1778013524803.png" }, ]; const toggle = (k) => { if (goals.includes(k)) setGoals(goals.filter(g => g !== k)); else if (goals.length < 3) setGoals([...goals, k]); }; return (
{t.goalsKicker}
{t.goalsTitle}
{t.goalsSub}
{goals.length} / 3 {t.selected.toLowerCase()}
{cards.map((c, idx) => { const sel = goals.includes(c.key); const order = goals.indexOf(c.key); return ( ); })}
{t.analyze}
); } Object.assign(window, { AllocationScreen, GoalsScreen });