// Views: Overview, Transactions, Miles, Accounts, Insights // ============ MONTH PICKER ============ function MonthPicker({ monthsAvailable, monthFilter, setMonthFilter, allTransactions }) { // Group available months by year, oldest year first const byYear = React.useMemo(() => { const m = {}; monthsAvailable.forEach(ym => { const [y, mo] = ym.split("-"); (m[y] = m[y] || []).push(parseInt(mo)); }); Object.keys(m).forEach(y => m[y].sort((a, b) => a - b)); return m; }, [monthsAvailable]); const years = Object.keys(byYear).sort(); const monthAbbr = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; const scrollRef = React.useRef(null); const activeRef = React.useRef(null); // Auto-scroll active chip into view on mount / change React.useEffect(() => { if (activeRef.current && scrollRef.current) { const el = activeRef.current; const container = scrollRef.current; const elLeft = el.offsetLeft; const elRight = elLeft + el.offsetWidth; const cLeft = container.scrollLeft; const cRight = cLeft + container.clientWidth; if (elLeft < cLeft || elRight > cRight) { container.scrollTo({ left: elLeft - 80, behavior: "smooth" }); } } }, [monthFilter]); // Count helper const monthCount = (ym) => allTransactions.filter(t => t.date.startsWith(ym)).length; return (
{/* All-time pill (sticky left) */} {/* Scrollable year-grouped strip */}
{years.map((yr, yIdx) => (
{/* Year label */}
{yr}
{/* Month cells */} {byYear[yr].map(mo => { const ym = `${yr}-${String(mo).padStart(2, "0")}`; const isActive = monthFilter === ym; const count = monthCount(ym); return ( ); })}
))}
); } // ============ OVERVIEW ============ function OverviewView({ onNav, layout = "balanced" }) { const { CARDS, ACCOUNTS, CATEGORIES, TRANSACTIONS, MONTHLY_HISTORY } = window.FIN_DATA; const creditCards = CARDS.filter(c => c.type === "credit"); const totalSpent = sumExpensesThisMonth(); const totalIncome = sumIncomeThisMonth(); const netWorth = ACCOUNTS.reduce((s, a) => s + a.balance, 0); const lastMonth = MONTHLY_HISTORY[MONTHLY_HISTORY.length - 2]; const spentDelta = ((totalSpent - lastMonth.expenses) / lastMonth.expenses) * 100; const byCat = sumByCategory(); const catData = CATEGORIES .map(c => ({ ...c, value: byCat[c.id] || 0 })) .filter(c => c.value > 0) .sort((a, b) => b.value - a.value); const byCard = sumByCard(); const cardSpending = creditCards .map(c => ({ ...c, total: byCard[c.id] || 0 })) .filter(c => c.total > 0) .sort((a, b) => b.total - a.total); const maxCardSpend = Math.max(...cardSpending.map(c => c.total), 1); const recent = TRANSACTIONS.slice(0, layout === "list" ? 10 : 6); // Cards with bonus that need attention (credit only) — include uncapped (PRVI/KrisFlyer) too const milesAttention = creditCards .filter(c => c.bonus) .map(c => { const cap = c.bonus.capSgd; const pct = cap ? (c.spent / cap) * 100 : 50; // sort uncapped to middle return { ...c, pct }; }) .sort((a, b) => b.pct - a.pct); return (
{/* Greeting */}
Wednesday, 29 April 2026

Good afternoon

{/* Top stats */}
0 ? "+" : ""}${spentDelta.toFixed(0)}% vs Mar`, negative: spentDelta > 10, positive: spentDelta < 0 }}/> s + (c.bonus ? computeMiles(c).miles : 0), 0))} icon="plane" delta={{ label: "On track for 12.4k" }}/>
{/* HERO: Miles tracker */}

Miles bonus tracker

April
How close you are to maxing each card's bonus tier this month
{milesAttention.map(card => (
{card.name}
•••• {card.last4}
))}
{layout === "chart" ? : layout === "list" ? : } {/* Account balances strip */}
onNav("accounts")}>Manage }/> onNav("accounts")}/>
); } // Layout variant: Balanced (default) function BalancedOverview({ catData, cardSpending, maxCardSpend, totalSpent, recent, onNav }) { const { MONTHLY_HISTORY } = window.FIN_DATA; return ( <>
Expenses Income
}/>
{cardSpending.map(c => (
{c.name} {fmt.sgd(c.total, { decimals: 0 })}
))}

Recent activity

Latest 6 transactions
{recent.map(tx => )}
); } // Layout variant: Chart-heavy (more visual) function ChartHeavyOverview({ catData, cardSpending, maxCardSpend, totalSpent, recent, onNav }) { const { MONTHLY_HISTORY } = window.FIN_DATA; return ( <>
{cardSpending.map(c => (
{c.name} {fmt.sgd(c.total, { decimals: 0 })}
))}
); } // Layout variant: List-heavy (transactions front and center) function ListHeavyOverview({ recent, catData, totalSpent, onNav }) { return (

Recent activity

Latest 10 transactions
{recent.map(tx => )}
); } function CategoryDonut({ catData, totalSpent }) { return (
Total
{fmt.sgdShort(totalSpent)}
{catData.slice(0, 7).map(c => (
{c.name} {fmt.sgd(c.value, { decimals: 0 })}
))}
); } function AccountStrip({ onClick }) { const { ACCOUNTS } = window.FIN_DATA; return (
{ACCOUNTS.slice(0, 7).map(a => (
{a.type === "investment" ? "Brokerage" : "Bank"}
{a.name}
{fmt.sgd(a.balance, { decimals: 0 })}
))}
); } // ============ TRANSACTIONS ============ function TransactionsView() { const { TRANSACTIONS } = window.FIN_DATA; const [filter, setFilter] = React.useState("all"); const [search, setSearch] = React.useState(""); // Month filter: "all" = no filter, otherwise "YYYY-MM" const [monthFilter, setMonthFilter] = React.useState("all"); // Group mode: "day" (current day-by-day view) or "month" (collapsed month sections) const [groupMode, setGroupMode] = React.useState("day"); // Track expanded months in month-group mode const [expanded, setExpanded] = React.useState({}); // Compute all months present in the data, newest first const monthsAvailable = React.useMemo(() => { const set = new Set(); TRANSACTIONS.forEach(t => set.add(t.date.slice(0, 7))); return [...set].sort().reverse(); }, [TRANSACTIONS]); // Default-expand the most recent month in month-group view React.useEffect(() => { if (groupMode === "month" && monthsAvailable.length && Object.keys(expanded).length === 0) { setExpanded({ [monthsAvailable[0]]: true }); } }, [groupMode, monthsAvailable]); const filtered = TRANSACTIONS.filter(t => { if (filter !== "all" && t.type !== filter) return false; if (search && !t.merchant.toLowerCase().includes(search.toLowerCase())) return false; if (monthFilter !== "all" && !t.date.startsWith(monthFilter)) return false; return true; }); // Day grouping (existing flat view) const groupedByDay = filtered.reduce((acc, tx) => { (acc[tx.date] = acc[tx.date] || []).push(tx); return acc; }, {}); // Month grouping (new collapsible view) const groupedByMonth = filtered.reduce((acc, tx) => { const m = tx.date.slice(0, 7); (acc[m] = acc[m] || []).push(tx); return acc; }, {}); const filters = [ { id: "all", label: "All", count: TRANSACTIONS.length }, { id: "expense", label: "Expenses", count: TRANSACTIONS.filter(t => t.type === "expense").length }, { id: "income", label: "Income", count: TRANSACTIONS.filter(t => t.type === "income").length }, { id: "transfer", label: "Transfers", count: TRANSACTIONS.filter(t => t.type === "transfer").length }, ]; return (

Transactions

{filtered.length} {filtered.length === 1 ? "entry" : "entries"} · {fmt.sgd(filtered.filter(t => t.type === "expense").reduce((s, t) => s + t.amount, 0), { decimals: 0 })} spent
{filters.map(f => ( ))}
setSearch(e.target.value)} placeholder="Search merchant…" style={{ width: "100%", padding: "7px 10px 7px 30px", background: "var(--bg-muted)", border: "1px solid transparent", borderRadius: 7, fontSize: 13, color: "var(--text-1)", outline: "none", fontFamily: "inherit" }}/>
{/* Month picker — year-grouped horizontal navigator */}
{filtered.length === 0 && (
No transactions match your filters.
)} {/* DAY-GROUPED VIEW */} {groupMode === "day" && Object.entries(groupedByDay).map(([date, txs]) => { const dayTotal = txs.filter(t => t.type === "expense").reduce((s, t) => s + t.amount, 0); return (
{fmt.date(date)} {dayTotal > 0 && −{fmt.sgd(dayTotal)}}
{txs.map(tx => )}
); })} {/* MONTH-GROUPED VIEW (collapsible) */} {groupMode === "month" && Object.keys(groupedByMonth).sort().reverse().map(monthKey => { const txs = groupedByMonth[monthKey]; const isOpen = !!expanded[monthKey]; const expenseTotal = txs.filter(t => t.type === "expense").reduce((s, t) => s + t.amount, 0); const incomeTotal = txs.filter(t => t.type === "income").reduce((s, t) => s + t.amount, 0); return (
{isOpen && (
{Object.entries(txs.reduce((acc, t) => { (acc[t.date] = acc[t.date] || []).push(t); return acc; }, {})).map(([date, dayTxs]) => { const dayTotal = dayTxs.filter(t => t.type === "expense").reduce((s, t) => s + t.amount, 0); return (
{fmt.date(date)} {dayTotal > 0 && −{fmt.sgd(dayTotal)}}
{dayTxs.map(tx => )}
); })}
)}
); })}
); } // ============ MILES / CARDS VIEW ============ function CardsView() { const { CARDS } = window.FIN_DATA; const credit = CARDS.filter(c => c.type === "credit"); const debit = CARDS.filter(c => c.type === "debit"); const totalMiles = credit.reduce((s, c) => s + (c.bonus ? computeMiles(c).miles : 0), 0); const totalSpend = credit.reduce((s, c) => s + c.spent, 0); const blendedRate = totalSpend > 0 ? totalMiles / totalSpend : 0; return (

Cards & Miles

Track bonus tiers, statements and miles earned across all cards
s + c.statementBalance, 0), { decimals: 0 })} icon="alert"/>
Credit cards
{credit.map(card => { const m = card.bonus ? computeMiles(card) : { miles: 0, bonusMiles: 0, baseMiles: 0 }; return (
Bonus category
{card.bonus.category}
{card.bonus.kind === "ladys" && }
Bonus rate
{card.bonus.rate} mpd
Statement
{fmt.sgd(card.statementBalance, { decimals: 0 })}
Due {card.dueDate}
Bonus miles
{fmt.miles(m.bonusMiles)}
Base miles
{fmt.miles(m.baseMiles)}
Total
{fmt.miles(m.miles)}
); })}
Debit cards
{debit.map(card => (
{card.name}
•••• {card.last4} · Debit
))}
); } // ============ ACCOUNTS / TRANSFERS ============ function AccountsView({ transferStyle = "linked", reimbStyle = "tagged" }) { const { ACCOUNTS, TRANSACTIONS } = window.FIN_DATA; const transfers = TRANSACTIONS.filter(t => t.type === "transfer"); const reimbursables = TRANSACTIONS.filter(t => t.reimbursable); const totalNW = ACCOUNTS.reduce((s, a) => s + a.balance, 0); const banks = ACCOUNTS.filter(a => a.type === "bank"); const investments = ACCOUNTS.filter(a => a.type === "investment"); return (

Accounts

Net worth: {fmt.sgd(totalNW, { decimals: 0 })} across {ACCOUNTS.length} accounts
); } function TransferPanel({ transfers, style }) { const showTwoEntries = style === "split"; return (

Recent transfers

{style === "split" ? "Split entries" : "Linked"}
{style === "split" ? "Two paired entries — outflow and inflow" : "Single transaction linking both accounts"}
{transfers.map(tx => { const from = getAccount(tx.fromAccount); const to = getAccount(tx.toAccount); if (showTwoEntries) { return (
{fmt.date(tx.date)}{tx.note && ` · ${tx.note}`}
Out — {from?.name}
−{fmt.sgd(tx.amount, { decimals: 0 })}
In — {to?.name}
+{fmt.sgd(tx.amount, { decimals: 0 })}
); } return (
{fmt.date(tx.date)}
{fmt.sgd(tx.amount, { decimals: 0 })}
{from?.name}
{to?.name}
{tx.note &&
↳ {tx.note}
}
); })}
); } function ReimbursementsPanel({ items, style }) { const totalPending = items.filter(t => t.reimbursableStatus === "pending").reduce((s, t) => s + (t.reimbursableAmount || 0), 0); return (

Reimbursements

{style === "tagged" ? "Status tag" : "Auto-net"}
{fmt.sgd(totalPending, { decimals: 0 })} pending payback
{items.map(tx => (
{tx.merchant}
{fmt.sgd(tx.amount, { decimals: 0 })}
{fmt.dateShort(tx.date)} · {tx.reimbursableFrom} owes {fmt.sgd(tx.reimbursableAmount, { decimals: 0 })} {tx.reimbursableStatus === "pending" ? ( Pending ) : ( Settled )}
{style === "auto" && tx.reimbursableStatus === "settled" && (
↳ Net spend: {fmt.sgd(tx.amount - tx.reimbursableAmount, { decimals: 0 })}
)}
))}
); } function AccountGroup({ title, accounts }) { const total = accounts.reduce((s, a) => s + a.balance, 0); return (

{title} · {accounts.length}

{fmt.sgd(total, { decimals: 0 })}
{accounts.map(a => (
{a.name}
{a.primary && "Primary · "}{a.type === "investment" ? "Brokerage" : "Bank"}
{fmt.sgd(a.balance)}
))}
); } // ============ INSIGHTS ============ function InsightsView() { const { CATEGORIES, TRANSACTIONS, MONTHLY_HISTORY } = window.FIN_DATA; const byCat = sumByCategory(); const catData = CATEGORIES .map(c => ({ ...c, value: byCat[c.id] || 0 })) .filter(c => c.value > 0) .sort((a, b) => b.value - a.value); const total = catData.reduce((s, c) => s + c.value, 0); const byMerchant = {}; TRANSACTIONS.filter(t => t.type === "expense" && t.date.startsWith("2026-04")).forEach(t => { byMerchant[t.merchant] = (byMerchant[t.merchant] || 0) + t.amount; }); const topMerchants = Object.entries(byMerchant).map(([k, v]) => ({ merchant: k, amount: v })).sort((a, b) => b.amount - a.amount).slice(0, 8); return (

Insights

Patterns and trends in your spending
{catData.map(c => (
{c.name} {fmt.sgd(c.value, { decimals: 0 })} ({((c.value/total)*100).toFixed(0)}%)
))}
{topMerchants.map((m, i) => (
{i + 1}
{m.merchant}
{fmt.sgd(m.amount, { decimals: 0 })}
))}
); } // Lady's quarterly category editor — user mostly uses travel/food function LadysCategoryEditor({ card }) { const { CATEGORIES } = window.FIN_DATA; const [editing, setEditing] = React.useState(false); const current = CATEGORIES.find(c => c.id === card.bonus.chosenCategoryId); const popular = ["food", "travel"]; return (
Q2 2026 · {current?.name}
{editing && (
{CATEGORIES.map(c => { const isPopular = popular.includes(c.id); const isCurrent = c.id === card.bonus.chosenCategoryId; return ( ); })}
)}
); } Object.assign(window, { OverviewView, TransactionsView, CardsView, AccountsView, InsightsView });