// ui_kits/mobile/Screens.jsx
// Goji mobile screens. Composes atoms from Components.jsx.
const { useState: useStateScreens } = React;
// ─────────────────────────────────────────────────────────────
// Page chrome — scrollable content area with safe-area padding.
// ─────────────────────────────────────────────────────────────
function Page({ children, extraBottom = 0 }) {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
let lastY = 0;
let ticking = false;
const fire = (detail) => window.dispatchEvent(new CustomEvent('goji-nav-compact', { detail }));
const onScroll = () => {
if (ticking) return;
ticking = true;
requestAnimationFrame(() => {
const y = el.scrollTop;
if (y <= 12) fire(false);
else if (y > lastY + 6) fire(true);
else if (y < lastY - 6) fire(false);
lastY = y;
ticking = false;
});
};
el.addEventListener('scroll', onScroll, { passive: true });
// Reset to expanded whenever a Page mounts (e.g. after tab switch).
fire(false);
return () => el.removeEventListener('scroll', onScroll);
}, []);
return (
{children}
);
}
// ─────────────────────────────────────────────────────────────
// HomeScreen — hero + this week + a couple insights
// ─────────────────────────────────────────────────────────────
function HomeScreen({ theme, onToggleTheme, onOpenInsights }) {
return (
For you
{}}
/>
);
}
function QuickAction({ icon, label }) {
return (
{label}
);
}
// ─────────────────────────────────────────────────────────────
// MoneyScreen — multi-currency accounts + sparkline + transactions
// ─────────────────────────────────────────────────────────────
function MoneyScreen({ hidden, onToggleHidden }) {
const [filter, setFilter] = useStateScreens('all');
return (
{/* This week summary */}
{/* Eyebrow + delta pill */}
This week
{/* Hero number — Fraunces, primary color (not gradient — that's reserved for STS) */}
Net across 3 accounts
{/* Sparkline */}
{/* Divider */}
{/* 3 metrics — spent / sent / saved */}
Accounts
Activity
setFilter('all')}>All
setFilter('week')}>This week
setFilter('bills')}>Bills
setFilter('food')}>Food
setFilter('family')}>Family
);
}
// ─────────────────────────────────────────────────────────────
// InsightsScreen — AI observations as a feed of cards
// ─────────────────────────────────────────────────────────────
function InsightsScreen({ theme, onToggleTheme }) {
return (
Your grocery spend has crept up 18% since October. Mostly at Whole Foods.}
/>
Transfers to family have averaged $340/mo this year. Same as 2024.}
tone="good"
/>
You're paying for two music services — Spotify ($10.99) and Apple Music ($10.99). Consider keeping one.}
tone="warn"
/>
NPR is up 1.4% against USD this week. Good moment to top up Nabil.}
/>
You spend ~$42 more on weekends. Friday evenings are your priciest stretch.}
/>
);
}
// ─────────────────────────────────────────────────────────────
// ProfileScreen — user, settings rows, sign out
// ─────────────────────────────────────────────────────────────
function ProfileScreen({ theme, onToggleTheme }) {
const rows = [
{ icon: 'user', label: 'Personal details', meta: 'Asha · ash@goji.app' },
{ icon: 'wallet', label: 'Linked accounts', meta: '3 banks · 2 currencies' },
{ icon: 'target', label: 'Goals', meta: '2 active' },
{ icon: 'refresh', label: 'Currencies & FX', meta: 'USD · NPR · EUR' },
{ icon: 'bell', label: 'Notifications', meta: 'Bills · weekly digest' },
{ icon: 'settings', label: 'Preferences', meta: 'Theme · biometrics' },
];
return (
{/* Identity card */}
A
Asha Pradhan
Member since 2024 · Tier 2
Account
{rows.map((r, i) => (
))}
Sign out
);
}
// ─────────────────────────────────────────────────────────────
// SendSheet — modal sliding from bottom. Backdrop dismiss.
// ─────────────────────────────────────────────────────────────
function SendSheet({ open, onClose }) {
const [amount, setAmount] = useStateScreens('340');
const [recipient, setRecipient] = useStateScreens('Mom');
return (
<>
{/* Backdrop */}
{/* Sheet */}
{/* Grabber */}
Send money
{/* Big amount entry */}
You send
${amount}
≈ रू 45,220 · rate 132.99
Cancel
Send ${amount}
{rows.map((r, i) => (
))}
);
}
// ─────────────────────────────────────────────────────────────
// ProfileOverlay — full-screen fade-in panel. Fully opaque from t≈0
// so the home stack doesn't bleed through during the transition.
// ─────────────────────────────────────────────────────────────
function ProfileOverlay({ open, onClose, theme, onToggleTheme, onOpenSettings }) {
return (
{/* Identity card */}
A
Asha Pradhan
Member since 2024 · Tier 2
Account
{[
{ icon: 'user', label: 'Personal details', meta: 'ash@goji.app' },
{ icon: 'wallet', label: 'Linked accounts', meta: '3 banks · 2 currencies' },
{ icon: 'target', label: 'Goals', meta: '3 active' },
{ icon: 'refresh', label: 'Currencies & FX', meta: 'USD · NPR · EUR' },
{ icon: 'bell', label: 'Notifications', meta: 'Bills · weekly' },
{ icon: 'gear', label: 'Settings', meta: 'Open', onClick: onOpenSettings },
].map((r, i, arr) => (
))}
);
}
// ─────────────────────────────────────────────────────────────
// SegmentedControl — top-of-screen tab switcher for sub-screens
// ─────────────────────────────────────────────────────────────
function SegmentedControl({ items, active, onChange }) {
const ref = React.useRef(null);
const [pos, setPos] = React.useState({ x: 0, w: 0 });
React.useLayoutEffect(() => {
if (!ref.current) return;
const btns = ref.current.querySelectorAll('[data-seg]');
const idx = items.findIndex(i => i.key === active);
const btn = btns[idx];
if (!btn) return;
const containerRect = ref.current.getBoundingClientRect();
const r = btn.getBoundingClientRect();
setPos({ x: r.left - containerRect.left, w: r.width });
}, [active, items]);
return (
{items.map(item => (
onChange(item.key)}
style={{
position: 'relative', zIndex: 2,
background: 'transparent', border: 'none', cursor: 'pointer',
fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
color: active === item.key ? 'var(--goji-accent)' : 'var(--color-text-body)',
transition: 'color 280ms var(--ease-smooth)',
display: 'grid', placeItems: 'center',
}}>
{item.label}
))}
);
}
// ─────────────────────────────────────────────────────────────
// InsightsAIScreen — hub with 3 sub-screens: Overview, Spending, AI Coach
// ─────────────────────────────────────────────────────────────
const AI_SUB_PAGES = [
{ key: 'overview', label: 'Overview' },
{ key: 'spending', label: 'Spending' },
{ key: 'coach', label: 'AI Coach' },
];
function InsightsAIScreen({ hidden, onToggleHidden, onOpenSettings }) {
const [sub, setSub] = React.useState(0);
const activeKey = AI_SUB_PAGES[sub].key;
return (
setSub(AI_SUB_PAGES.findIndex(p => p.key === k))}
/>
);
}
// ─── Sub-screen: Overview ─────────────────────────────────────
function AIOverview() {
return (
Today's brief
Salary lands Friday — you're $214 ahead of last week. Three bills total $1,740 this month. Want me to set aside Rent on payday?
Observations
You spend ~$42 more on weekends — Friday evenings are your priciest stretch.} />
Transfers to family averaged $340/mo this year. Same as 2024.} tone="good" />
You're paying for Spotify and Apple Music. Consider keeping one — saves $132/yr .} tone="warn" />
NPR is up 1.4% against USD this week. Good moment to top up Nabil.} />
);
}
// ─── Sub-screen: Spending ─────────────────────────────────────
function AISpending() {
const cats = [
{ name: 'Groceries', amount: 324, color: '#E0876A', pct: 28 },
{ name: 'Family transfers', amount: 340, color: '#C17A74', pct: 29 },
{ name: 'Transport', amount: 112, color: '#7DBEB7', pct: 10 },
{ name: 'Coffee & dining', amount: 96, color: '#D4AA45', pct: 8 },
{ name: 'Subscriptions', amount: 56, color: '#9B7BD6', pct: 5 },
{ name: 'Other', amount: 232, color: '#888888', pct: 20 },
];
const total = cats.reduce((s, c) => s + c.amount, 0);
return (
This month so far
18 days ·
{/* Stacked bar */}
By category
{cats.map((c, i) => (
))}
);
}
// ─── Sub-screen: AI Coach ─────────────────────────────────────
function AICoach() {
return (
Suggested
{[
'How much did I spend on groceries this month?',
"What's a safe amount to save toward my trip?",
'Show me my biggest expenses this year.',
'How can I reduce my subscription spend?',
].map(q => (
{q}
))}
Recent
You asked
"Can I afford to send $400 home this month?"
Goji
Yes — after Rent and Comcast, you'll have $1,128 left. $400 home keeps $728 for the rest of the month.
);
}
// ─────────────────────────────────────────────────────────────
// LearnScreen — educational content for diaspora finance
// ─────────────────────────────────────────────────────────────
function LearnScreen({ hidden, onToggleHidden, onOpenSettings }) {
const articles = [
{ eyebrow: 'Diaspora · 4 min', title: 'Sending money home without losing 8% to fees', body: 'A look at corridor rates between major remittance providers — and when bank wires actually win.' },
{ eyebrow: 'Basics · 3 min', title: 'What "safe to spend" actually means', body: 'How Goji computes the one number, and what it deliberately ignores.' },
{ eyebrow: 'Investing · 6 min',title: 'Your first emergency fund — calmly', body: 'Why 3 months feels safer than 6, and other unhelpful aphorisms reconsidered.' },
{ eyebrow: 'FX · 5 min', title: 'Dollar-cost averaging into NPR', body: 'A non-rigorous, very human approach to multi-currency saving.' },
{ eyebrow: 'Goals · 4 min', title: 'Why your savings goal keeps stalling', body: 'The boring research on what actually makes goals stick.' },
];
return (
{/* Featured */}
Featured
The calm money mindset for diaspora life
How to think about two currencies, two households, and one life without the spreadsheet anxiety.
Read · 7 min
{/* Category chips */}
{['Diaspora', 'FX', 'Investing', 'Basics', 'Goals'].map((c, i) => (
{c}
))}
All articles
{articles.map((a, i) => (
{a.eyebrow}
{a.title}
{a.body}
))}
);
}
// ─────────────────────────────────────────────────────────────
// HowCalculatedSheet — explains the safe-to-spend math
// ─────────────────────────────────────────────────────────────
function HowCalculatedSheet({ open, onClose }) {
const rows = [
{ label: 'Total balance', value: 4506, sign: false },
{ label: 'Upcoming bills · next 30 days', value: -1740, sign: true },
{ label: 'Daily essentials buffer', value: -200, sign: true, muted: true },
{ label: 'Available', value: 2566, emphasis: true },
];
return (
<>
How it works
Your safe-to-spend, calmly
Goji takes everything you have, removes what's already promised — bills, the daily buffer you've set — and spreads what remains evenly across the days until your next paycheck.
{/* Breakdown card */}
{rows.map((r, i) => (
{r.label}
))}
{/* Division step */}
Available ÷ 4 days to payday
$84/day
Safe to send uses the same math over a 30-day horizon — the most you can comfortably transfer without dipping into your buffer.
);
}
// ─────────────────────────────────────────────────────────────
// VoiceSheet — FAB voice command center.
// States: idle (auto-skipped) → recording → processing → confirm
// Intent cycles between bill / transaction / goal / budget.
// ─────────────────────────────────────────────────────────────
function VoiceSheet({ open, onClose }) {
const [state, setState] = React.useState('recording');
const [intentIdx, setIntentIdx] = React.useState(0);
const INTENTS = [
{
type: 'bill', label: 'BILL', tone: '#7E6896',
transcript: 'Add a Spotify Family bill, $10.99 monthly starting January 22.',
fields: [
{ label: 'Name', value: 'Spotify Family' },
{ label: 'Amount', value: '−$10.99', money: true },
{ label: 'Frequency', value: 'Monthly' },
{ label: 'Next charge', value: 'Jan 22' },
{ label: 'Category', value: 'Subscriptions' },
],
cta: 'Add bill',
},
{
type: 'transaction', label: 'TRANSACTION', tone: '#E0876A',
transcript: 'I spent fourteen dollars on coffee at Blue Bottle today.',
fields: [
{ label: 'Merchant', value: 'Blue Bottle Coffee' },
{ label: 'Amount', value: '−$14.00', money: true },
{ label: 'Category', value: 'Coffee & dining' },
{ label: 'Date', value: 'Today · 9:41 AM' },
],
cta: 'Log transaction',
},
{
type: 'goal', label: 'GOAL', tone: '#9B7BD6',
transcript: 'Save $2,500 for my trip home by next March.',
fields: [
{ label: 'Name', value: 'Trip home' },
{ label: 'Target', value: '$2,500', money: true },
{ label: 'Target date', value: 'Mar 2027' },
{ label: 'Auto-save', value: '$190 / month' },
],
cta: 'Set goal',
},
{
type: 'budget', label: 'BUDGET', tone: '#D4AA45',
transcript: 'Cap my coffee budget at eighty dollars a month.',
fields: [
{ label: 'Category', value: 'Coffee & dining' },
{ label: 'Cap', value: '$80 / month', money: true },
{ label: 'Resets', value: 'First of the month' },
],
cta: 'Set budget',
},
];
const intent = INTENTS[intentIdx % INTENTS.length];
const stop = () => {
setState('processing');
setTimeout(() => setState('confirm'), 900);
};
const confirm = () => {
onClose();
setTimeout(() => { setIntentIdx(i => i + 1); setState('recording'); }, 500);
};
const cancel = () => {
onClose();
setTimeout(() => setState('recording'), 500);
};
// Reset to recording each time it opens fresh
React.useEffect(() => {
if (open) setState('recording');
}, [open]);
return (
<>
{state === 'recording' &&
}
{state === 'processing' &&
}
{state === 'confirm' && (
)}
);
}
function VoiceWaveform({ bars = 9 }) {
const refs = React.useRef([]);
React.useEffect(() => {
let raf;
const tick = (t) => {
refs.current.forEach((el, i) => {
if (!el) return;
const phase = i * 0.55;
const scale = 0.25 + 0.75 * Math.abs(Math.sin(t / 220 + phase));
el.style.transform = `scaleY(${scale})`;
});
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
return (
{Array.from({ length: bars }).map((_, i) => (
refs.current[i] = el} style={{
width: 4, height: 64, borderRadius: 4,
background: 'var(--goji-gradient)',
transformOrigin: 'center',
willChange: 'transform',
}} />
))}
);
}
function VoiceRecording({ onStop, onCancel }) {
return (
<>
● Listening
I'm listening.
Tell me about a bill, a transaction, a goal, or a budget.
);
}
function VoiceProcessing({ transcript }) {
return (
);
}
function VoiceConfirm({ intent, onCancel, onConfirm }) {
return (
<>
Does this look right?
You said
"{intent.transcript}"
{intent.fields.map((f, i) => (
{f.label}
{f.value}
))}
Cancel
{intent.cta}
);
}
Object.assign(window, {
SettingsSheet, ProfileOverlay,
InsightsAIScreen, AIOverview, AISpending, AICoach,
LearnScreen, SegmentedControl,
});