Income

Expenses

Saved · {d.savingsRate}%

)} {/* WEEK — diaspora-specific Here vs There flow */} {range === 'week' && } {/* MONTH / YEAR — bar chart */} {range !== 'week' && ( <> Income vs expenses

{d.buckets.map(b => (

0 ? 3 : 0, opacity: b.income > 0 ? 1 : 0, }} />

0 ? 3 : 0, opacity: b.expense > 0 ? 1 : 0.2, }} />

))}

{/* Labels */}

{d.buckets.map(b => (

{b.label}

))}

{/* Legend */}

Income

Expenses

{/* Top categories */} )} Top categories

{d.categories.map((c, i, arr) => { const open = expandedCat === c.name; const txns = txnsFor(c.name); return (

{/* Expanded transactions */}

{txns.length === 0 ? (

No transactions in this range.

) : ( txns.map((t, ti) => ( )) )}

); })}

); } // ───────────────────────────────────────────────────────────── // AccountsScreen — connected accounts + recent activity across all // ───────────────────────────────────────────────────────────── function AccountsScreen() { const [filter, setFilter] = useStateMT('all'); return (

Recent activity

setFilter('all')}>All accounts setFilter('wf')}>Wells Fargo setFilter('nb')}>Nabil setFilter('ally')}>Ally

); } // ───────────────────────────────────────────────────────────── // FXRatesScreen — featured corridor + corridor list + alerts // ───────────────────────────────────────────────────────────── function FXRatesScreen() { const pairs = [ { from: 'USD', to: 'EUR', rate: 0.92, delta: -0.3, points: [10,12,14,13,15,12,11,9] }, { from: 'USD', to: 'INR', rate: 84.10, delta: 0.2, points: [40,42,41,43,44,45,46,45] }, { from: 'USD', to: 'GBP', rate: 0.78, delta: 0.1, points: [22,20,22,24,23,22,24,25] }, { from: 'NPR', to: 'USD', rate: 0.0075, delta: -1.4, points: [30,32,31,28,26,25,24,22] }, ]; return ( {/* Featured pair: USD → NPR */}

Your corridor +1.4% / 7d

132.99

USD → NPR

1 USD buys रू 132.99

{/* Sparkline */} {/* Insight + CTA */}

Good moment to top up.

Other corridors

{pairs.map((p, i) => ( ))}

Rate alerts

USD → NPR at 134.00

Notify when reached

0.8% away

); } function FXPairRow({ pair, divider }) { const positive = pair.delta >= 0; const w = 80, h = 28; const max = Math.max(...pair.points), min = Math.min(...pair.points); const range = max - min || 1; const path = pair.points.map((p, i) => { const x = (i / (pair.points.length - 1)) * w; const y = h - ((p - min) / range) * h; return `${i === 0 ? 'M' : 'L'} ${x} ${y}`; }).join(' '); return (

{pair.from} → {pair.to}

{positive ? '+' : ''}{pair.delta.toFixed(1)}% · 7d

{pair.rate.toFixed(pair.rate < 1 ? 4 : 2)}

); } // ───────────────────────────────────────────────────────────── // HouseholdScreen — diaspora household-back-home overview // ───────────────────────────────────────────────────────────── function HouseholdScreen() { const members = [ { id: 'mom', name: 'Mom', role: 'Rent + groceries', tone: '#9B7BD6', initial: 'M', monthly: 200, last: '2d', status: 'sent' }, { id: 'dad', name: 'Dad', role: 'Medical', tone: '#7BD6C9', initial: 'D', monthly: 80, last: '5d', status: 'sent' }, { id: 'bahini', name: 'Bahini', role: 'College tuition', tone: '#E0876A', initial: 'B', monthly: 150, last: '12d', status: 'sent' }, { id: 'daai', name: 'Daai', role: 'Family bills', tone: '#D4AA45', initial: 'D', monthly: 50, last: 'due', status: 'due' }, ]; const total = members.reduce((s, m) => s + m.monthly, 0); return ( {/* Monthly support card */}

Household · this month

Supporting {members.length} people · annual

Members

{members.map(m => (

{m.initial}

{m.name} {m.status === 'due' && ( DUE )}

{m.role} · last {m.last === 'due' ? 'pending' : m.last}

/ month

))}

Recurring schedule

{[ { label: 'Rent for parents', meta: 'Monthly · 1st', amount: 200 }, { label: "Sister's tuition", meta: 'Quarterly · Jan/Apr/Jul/Oct', amount: 150 }, { label: 'Family WiFi', meta: 'Monthly · 15th', amount: 30 }, ].map((r, i, arr) => (

{r.label}

{r.meta}

))}

); } // ───────────────────────────────────────────────────────────── // DiasporaFlow — weekly "Here vs There" visualization. The story // of where the money actually went this week, across borders. // ───────────────────────────────────────────────────────────── function DiasporaFlow({ here, there, rate }) { const total = here + there || 1; const therePct = Math.round((there / total) * 100); const herePct = 100 - therePct; const nprAmount = Math.round(there * rate); return ( <> This week's flow

{/* Atmospheric glow on the "there" side */}

{/* Country labels */}

USD · HERE

{herePct}%

SENT HOME · NPR

{therePct}%

{/* The flow ribbon — a horizontal split with a gradient bridge in the middle */}

{/* FX bridge — context line */}

1 transfer to Mom · रू {nprAmount.toLocaleString('en-IN')}

Rate {rate.toFixed(2)} · Tue 14

{/* Bottom insight */}

~16% of this week's outflow crossed a border. You'd typically send {' '}per week this year.

); } Object.assign(window, { MoneyTabContainer, MoneySummary, AccountsScreen, FXRatesScreen, FXPairRow, HouseholdScreen, DiasporaFlow, });