// ui_kits/mobile/HomeTab.jsx // Swipeable home with 5 sub-pages: Home (greeting + hero + stack), // Activity, Bills, Budgets, Goals. // Header is shared: GreetingHeader crossfades to TopNavHeader on swipe. const { useState: useStateHT, useRef: useRefHT, useEffect: useEffectHT } = React; // ───────────────────────────────────────────────────────────── // GreetingHeader — avatar + "Hi, Asha" + date · bell on right // ───────────────────────────────────────────────────────────── function GreetingHeader({ onOpenProfile, onOpenSettings, hidden, onToggleHidden }) { return (
); } // ───────────────────────────────────────────────────────────── // TopNavHeader — minimal: back arrow · title · spacer // ───────────────────────────────────────────────────────────── function TopNavHeader({ title, onBack, hidden, onToggleHidden }) { return (
{title}
); } // ───────────────────────────────────────────────────────────── // PageDots — iOS-style indicator. Active dot expands to a pill. // ───────────────────────────────────────────────────────────── function PageDots({ total, active, onJump }) { return (
{Array.from({ length: total }).map((_, i) => ( ))}
); } // ───────────────────────────────────────────────────────────── // HomeLanding — page 0. Hero + quick actions + stacked cards. // ───────────────────────────────────────────────────────────── function HomeLanding({ onOpenInsights, onShowInfo }) { return (
{}} /> ); } // ───────────────────────────────────────────────────────────── // WeeklyNarrative — Fraunces-led story of the week. Money values // inline, gold-accent, masked by eye toggle. // ───────────────────────────────────────────────────────────── function WeeklyNarrative({ sent, spent, saved }) { const hidden = useAmountMask(); const fmt = (v) => hidden ? '$•••' : `$${v.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`; const total = sent + spent + saved || 1; const moments = [ { key: 'sent', label: 'Sent home', amount: sent, color: '#9B7BD6' }, { key: 'spent', label: 'Spent', amount: spent, color: '#E0876A' }, { key: 'saved', label: 'Saved', amount: saved, color: 'var(--goji-accent)' }, ]; const cols = moments.map(m => `${(m.amount / total) * 100}fr`).join(' '); return ( <> This week
{/* Single proportional ribbon — the three flows shown as one breath */}
{moments.map((m, i) => (
))}
{/* Three columns aligned to the segments above */}
{moments.map(m => (
{m.label}
))}
); } // ───────────────────────────────────────────────────────────── // FamilyTransfers — horizontal scroll of people. Send-again entry first. // ───────────────────────────────────────────────────────────── function FamilyTransfers({ people }) { const hidden = useAmountMask(); const fmt = (v) => hidden ? '$•••' : `$${v}`; return ( <> {}}>Family
{people.map(p => ( ))}
); } // ───────────────────────────────────────────────────────────── // ActivityScreen — grouped transaction history // ───────────────────────────────────────────────────────────── function ActivityScreen() { return (
All Food Family Bills Income
Today
Yesterday
Mon
); } // ───────────────────────────────────────────────────────────── // BillsScreen — upcoming bills, grouped by urgency // ───────────────────────────────────────────────────────────── function BillsScreen() { return (
Due this month
Across 3 bills · 1 overdue
Overdue
This week
Later this month
); } function BillRow({ tone, name, meta, amount, cta }) { const t = CARD_TONES[tone] || CARD_TONES.account; return (
{name}
{meta}
{cta && ( )}
); } // ───────────────────────────────────────────────────────────── // BudgetsScreen — category budgets with progress bars // ───────────────────────────────────────────────────────────── function BudgetsScreen() { const budgets = [ { name: 'Groceries', spent: 324, cap: 500, color: '#E0876A' }, { name: 'Coffee & dining', spent: 48, cap: 80, color: '#D4AA45' }, { name: 'Transport', spent: 112, cap: 200, color: '#7DBEB7' }, { name: 'Subscriptions', spent: 56, cap: 60, color: '#9B7BD6' }, { name: 'Family transfers', spent: 340, cap: 400, color: '#C17A74' }, ]; return (
This month
left across all budgets
Categories
{budgets.map(b => { const pct = Math.min(100, (b.spent / b.cap) * 100); const overWarn = pct >= 85; return (
{b.name}
${b.spent} of ${b.cap}
); })}
); } // ───────────────────────────────────────────────────────────── // GoalsScreen — saving goals with ring progress // ───────────────────────────────────────────────────────────── function GoalsScreen() { const goals = [ { name: 'Emergency fund', saved: 3200, target: 5000, eta: 'Sep 2026', icon: 'target' }, { name: 'Trip home', saved: 890, target: 2500, eta: 'Mar 2027', icon: 'family' }, { name: 'New laptop', saved: 1200, target: 1800, eta: 'Aug 2026', icon: 'sparkle' }, ]; return (
{goals.map(g => { const pct = Math.round((g.saved / g.target) * 100); return (
{pct}% complete
{g.name}
of · {g.eta}
); })}
); } function ProgressRing({ pct, size = 56 }) { const stroke = 5; const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const offset = c * (1 - pct / 100); return ( ); } // ───────────────────────────────────────────────────────────── // HomeTabContainer — pages between the 5 home screens. // Header crossfades between Greeting (page 0) and TopNav (pages 1-4). // ───────────────────────────────────────────────────────────── const HOME_PAGES = [ { id: 'home', title: '' }, // greeting header { id: 'activity', title: 'Activity' }, { id: 'bills', title: 'Bills' }, { id: 'budgets', title: 'Budgets' }, { id: 'goals', title: 'Goals' }, ]; function HomeTabContainer({ onOpenInsights, onOpenProfile, onOpenSettings, onShowInfo, hidden, onToggleHidden }) { const [page, setPage] = useStateHT(0); const isHome = page === 0; const currentTitle = HOME_PAGES[page].title; return (
{/* Shared header — crossfades between greeting and top-nav */}
setPage(0)} hidden={hidden} onToggleHidden={onToggleHidden} />
); } Object.assign(window, { HomeTabContainer, GreetingHeader, TopNavHeader, PageDots, ProgressRing, BillRow, HomeLanding, ActivityScreen, BillsScreen, BudgetsScreen, GoalsScreen, });