/* screens-dashboard.jsx โ€” Dashboard, Spending Overview, Budget Logger */ const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; const WEEKLY_DATA = [22, 14, 30, 38, 6, 0, 0]; const MONTHLY_DATA = [40, 75, 60, 30]; // weeks of month const YEARLY_DATA = [120, 90, 140, 110, 180, 160, 200, 175, 90, 130, 150, 80]; // months const sum = arr => arr.reduce((a, b) => a + b, 0); const SAVINGS_GOALS = [ { name: "iPhone", emoji: "๐Ÿ“ฑ", bg: "rgb(235,235,235)", pctWeek: 70, pctMonth: 65, pctYear: 92, color: "var(--teal-700)", target: 1200 }, { name: "Bali trip", emoji: "๐ŸŒด", bg: "rgb(246,249,216)", pctWeek: 18, pctMonth: 32, pctYear: 55, color: "var(--teal-300)", target: 1800 }, { name: "Boots", emoji: "๐Ÿ‘ข", bg: "rgb(254,234,246)", pctWeek: 40, pctMonth: 60, pctYear: 80, color: "var(--teal-600)", target: 400 }, { name: "Cosmetic", emoji: "๐Ÿ’„", bg: "var(--teal-50)", pctWeek: 100, pctMonth: 100, pctYear: 100, color: "var(--teal-900)", target: 80 }, ]; /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Dashboard โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ const PERIODS = [ { value: "week", label: "Weekly Summary", date: "May 18 โ€“ May 24, 2026", budgetAmt: 280, budgetLabel: "weekly budget", spent: sum(WEEKLY_DATA), trackStatus: "on", trackText: "On track" }, { value: "month", label: "Monthly Summary", date: "May 2026", budgetAmt: 1200, budgetLabel: "monthly budget", spent: sum(MONTHLY_DATA), trackStatus: "review", trackText: "Needs review" }, { value: "year", label: "Yearly Summary", date: "2026", budgetAmt: 15000, budgetLabel: "yearly budget", spent: sum(YEARLY_DATA), trackStatus: "on", trackText: "On track" }, ]; /* Voice + scan-receipt actions for the add-spending TopRow */ const AddSpendingActions = () => { const btn = { width: 40, height: 40, borderRadius: "50%", background: "#fff", border: 0, cursor: "pointer", display: "grid", placeItems: "center", boxShadow: "0 2px 8px rgba(0,0,0,.08)", fontFamily: "inherit", }; return (
); }; const TrackBadge = ({ status, text }) => { const on = status === "on"; return (
{on ? : } {text}
); }; const DashboardScreen = ({ go, active, onChangeTab }) => { const [period, setPeriod] = useState("week"); const [savingsOpen, setSavingsOpen] = useState(false); const currentPeriod = PERIODS.find(p => p.value === period); // Swipe handlers const touchStart = useRef(0); const onTouchStart = (e) => { touchStart.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { const dx = e.changedTouches[0].clientX - touchStart.current; if (Math.abs(dx) < 40) return; const i = PERIODS.findIndex(p => p.value === period); if (dx < 0) setPeriod(PERIODS[(i + 1) % PERIODS.length].value); else setPeriod(PERIODS[(i - 1 + PERIODS.length) % PERIODS.length].value); }; return (
{/* Header */}
Hi, Emily

{currentPeriod.label.split(" ")[0]}
Summary

{currentPeriod.date}
{PERIODS.map(p => { const active = period === p.value; const short = p.value === "week" ? "W" : p.value === "month" ? "M" : "Y"; return ( ); })}
{/* Body card area */}
{/* Spending Card (tappable -> spending overview) */}
go("spending")} className="tap-card" style={{ background: "#fff", borderRadius: 24, padding: 18, boxShadow: "0 2px 6px rgba(0,0,0,.08)", cursor: "pointer", animation: "float-up .4s ease both", }}>
Spending
${currentPeriod.spent} / ${currentPeriod.budgetAmt.toLocaleString()} {currentPeriod.budgetLabel}
{/* Chart */}
{period === "year" ? : }
View spending
{/* Saving goals */}
Saving goals
{SAVINGS_GOALS.map((g, i) => { const pct = period === "week" ? g.pctWeek : period === "month" ? g.pctMonth : g.pctYear; return ; })}
setSavingsOpen(false)}>
How we calculated this

Last week you spent $140 on Outside Food + Coffee. This week you're at $110. The $30 difference is moved into your savings progress.

Last week (food + coffee) $140
This week (so far) $110
Saved +$30
); }; const SavingCard = ({ goal, pct }) => (
{goal.emoji}
{goal.name} {pct}%
of ${goal.target.toLocaleString()} goal
); /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Charts โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ const BarChart = ({ data, labels, highlightIdx }) => { const max = Math.max(...data, 1); const niceMax = Math.ceil(max / 10) * 10 || 10; const mid = niceMax / 2; const [tipIdx, setTipIdx] = useState(highlightIdx); return (
e.stopPropagation()}> {/* Y-axis labels */}
${niceMax} ${mid} $0
{/* Plot area */}
{/* Gridlines */}
{[0, .5, 1].map(t => (
))}
{data.map((v, i) => { const h = (v / niceMax) * 100; const isHigh = i === tipIdx; return ( ); })}
); }; const LineChart = ({ data, labels, highlightIdx }) => { const W = 320, H = 110, pad = 6, leftPad = 28; const max = Math.max(...data); const min = Math.min(...data); const niceMax = Math.ceil(max / 10) * 10; const niceMin = Math.floor(min / 10) * 10; const mid = Math.round((niceMax + niceMin) / 2); const pts = data.map((v, i) => [ leftPad + (i * (W - leftPad - pad)) / (data.length - 1), H - pad - ((v - min) / (max - min || 1)) * (H - pad * 2), ]); const path = pts.reduce((acc, [x, y], i, arr) => { if (i === 0) return `M ${x} ${y}`; const [px, py] = arr[i - 1]; const cx1 = px + (x - px) / 2; const cy1 = py; const cx2 = px + (x - px) / 2; const cy2 = y; return `${acc} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x} ${y}`; }, ""); const lastPath = pts.map(([x, y], i) => [x, y + 18 + (i % 3) * 2]); const lastSmooth = lastPath.reduce((acc, [x, y], i, arr) => { if (i === 0) return `M ${x} ${y}`; const [px, py] = arr[i - 1]; return `${acc} C ${px + (x-px)/2} ${py}, ${px + (x-px)/2} ${y}, ${x} ${y}`; }, ""); const [hx, hy] = pts[highlightIdx] || pts[0]; // Gridline Y positions for niceMax, mid, niceMin const yFor = v => H - pad - ((v - min) / (max - min || 1)) * (H - pad * 2); return ( {[niceMax, mid, niceMin].map((v, i) => ( ${v} ))} ${data[highlightIdx]} {labels.map((l, i) => ( {l} ))} ); }; /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Spending Overview โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ const CATEGORIES = [ { id: "groceries", name: "Groceries", budget: 100, spent: 92, icon: IconGroceries, color: "var(--teal-900)" }, { id: "outsideFood", name: "Outside food", budget: 30, spent: 19, icon: IconPizza, color: "var(--teal-900)" }, { id: "coffee", name: "Coffee", budget: 45, spent: 42, icon: IconCoffee, color: "var(--teal-900)" }, { id: "transport", name: "Transport", budget: 45, spent: 22, icon: IconTransport, color: "var(--teal-900)" }, { id: "fun", name: "Fun", budget: 60, spent: 28, icon: IconSmile, color: "var(--teal-900)" }, ]; const SpendingOverviewScreen = ({ go, onChangeTab, openCategory, openHistory }) => { const [tab, setTab] = useState("week"); const budgetLabel = tab === "week" ? "Weekly Budget" : tab === "month" ? "Monthly Budget" : "Yearly Budget"; const budgetAmt = tab === "week" ? 280 : tab === "month" ? 1200 : 15000; const spentAmt = tab === "week" ? 203 : tab === "month" ? 820 : 8200; const dateRange = tab === "week" ? "May 18 โ€“ May 24, 2026" : tab === "month" ? "May 2026" : "2026"; const progress = spentAmt / budgetAmt; const ringLabel = `$${spentAmt.toLocaleString()}`; const ringSub = `of $${budgetAmt.toLocaleString()}`; return (
go("dashboard")}/>

Spending Overview

{dateRange}

Don't let finances hold you back, let us personalize your finances! The Finance Bug{" "} e.preventDefault()} style={{ color: "var(--teal-500)", textDecoration: "none" }}>

{/* Tabs */}
{[{v:"week",l:"Week"},{v:"month",l:"Month"},{v:"year",l:"Year"}].map(t => ( ))}
{/* Hero card */}
{budgetLabel}
You are doing great! Keep it up โœจ
${budgetAmt.toLocaleString()}
{/* Category list */}
{CATEGORIES.map(c => { const pct = Math.min(c.spent / c.budget, 1); return (
openHistory(c.id)} style={{ cursor: "pointer", }}>
{c.name} ${c.spent} of ${c.budget}
); })}
{/* Floating + button โ€” opens category picker first */}
); }; const ProgressRing = ({ progress, label, sub, size = 116 }) => { const r = 50, c = 2 * Math.PI * r; return (
{label}
{sub || "Almost there!"}
); }; /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Budget Logger โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ const BudgetLoggerScreen = ({ go, onChangeTab, categoryId }) => { const cat = CATEGORIES.find(c => c.id === categoryId) || CATEGORIES[0]; const [entries, setEntries] = useState(() => { return { Mon: 18, Tue: 12, Wed: 22, Thu: 16, Fri: 24, Sat: 0, Sun: 0, }; }); const [day, setDay] = useState("Fri"); const [amount, setAmount] = useState(""); const [pulse, setPulse] = useState(false); const [toast, setToast] = useState(null); const total = Object.values(entries).reduce((a, b) => a + b, 0); const save = () => { const n = parseFloat(amount); if (!n) return; setEntries(e => ({ ...e, [day]: (e[day] || 0) + n })); setAmount(""); setPulse(true); setTimeout(() => setPulse(false), 600); setToast(`๐ŸŽ‰ +5 points ยท Entry logged!`); setTimeout(() => setToast(null), 2200); }; return (
go("spending")} right={}/>
{cat.name}

Add {cat.name}

Weekly budget ${cat.budget} ยท You've logged{" "} ${total}

This week
{DAYS.map(d => { const v = entries[d] || 0; const isSel = day === d; return ( ); })}
Amount for {day}
$ setAmount(e.target.value)} placeholder="0.00" style={{ border: 0, outline: 0, background: "transparent", fontSize: 22, fontWeight: 600, flex: 1, minWidth: 0, color: "#111", fontFamily: "inherit", }}/>
{[5, 10, 15, 20, 30].map(q => ( ))}
Remaining this week
${Math.max(cat.budget - total, 0)}
{Math.round(total/cat.budget * 100)}%
Save Entry
{toast && (
{toast}
)}
); }; /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Category Picker โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ const CategoryPickerScreen = ({ go, onChangeTab, openCategory }) => (
go("spending")} right={}/>

Add a spend

Which category is this for?

{CATEGORIES.map(c => ( ))}
); /* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Spending History โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ const MOCK_HISTORY = { groceries: [{ d: "Fri", desc: "Trader Joe's", a: 38 }, { d: "Wed", desc: "Whole Foods", a: 22 }, { d: "Mon", desc: "Local market", a: 32 }], outsideFood: [{ d: "Thu", desc: "Lunch with team", a: 14 }, { d: "Tue", desc: "Dinner takeout", a: 5 }], coffee: [{ d: "Fri", desc: "Blue Bottle", a: 6 }, { d: "Thu", desc: "Starbucks", a: 7 }, { d: "Wed", desc: "Local cafe", a: 5 }, { d: "Tue", desc: "Blue Bottle", a: 6 }], transport: [{ d: "Fri", desc: "Subway", a: 4 }, { d: "Wed", desc: "Uber", a: 18 }], fun: [{ d: "Sat", desc: "Movie tickets", a: 28 }], }; const SpendingHistoryScreen = ({ go, onChangeTab, openCategory, categoryId }) => { const cat = CATEGORIES.find(c => c.id === categoryId) || CATEGORIES[0]; const items = MOCK_HISTORY[cat.id] || []; return (
go("spending")}/>
{cat.name}

{cat.name} history

${cat.spent} of ${cat.budget} this week

{items.length === 0 ? (
No entries yet this week.
) : items.map((e, i) => (
{e.desc}
{e.d}
${e.a}
))}
{/* Floating + button โ€” opens the logger for this category */}
); }; Object.assign(window, { DashboardScreen, SpendingOverviewScreen, BudgetLoggerScreen, CategoryPickerScreen, SpendingHistoryScreen, CATEGORIES });