// Reusable UI components: charts, cards, transaction rows
// ---- Donut chart (pure SVG) ----
function Donut({ data, size = 180, thickness = 22, gap = 1.5 }) {
const total = data.reduce((s, d) => s + d.value, 0);
if (total === 0) return null;
const r = (size - thickness) / 2;
const cx = size / 2, cy = size / 2;
const circumference = 2 * Math.PI * r;
let offset = 0;
return (
);
}
// ---- Horizontal bar (for spending by card) ----
function HBar({ value, max, color, height = 8, bg = "var(--bg-muted)" }) {
const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
return (
);
}
// ---- Sparkline / line chart for monthly trend ----
function MonthlyChart({ data, height = 180, accent = "var(--accent)" }) {
const pad = { t: 16, r: 12, b: 28, l: 44 };
const w = 600;
const innerW = w - pad.l - pad.r;
const innerH = height - pad.t - pad.b;
const maxVal = Math.max(...data.flatMap(d => [d.expenses, d.income])) * 1.1;
const x = (i) => pad.l + (i / (data.length - 1)) * innerW;
const y = (v) => pad.t + innerH - (v / maxVal) * innerH;
const expensesPath = data.map((d, i) => `${i === 0 ? "M" : "L"}${x(i)},${y(d.expenses)}`).join(" ");
const incomePath = data.map((d, i) => `${i === 0 ? "M" : "L"}${x(i)},${y(d.income)}`).join(" ");
const ticks = 4;
const tickVals = Array.from({ length: ticks + 1 }, (_, i) => (maxVal / ticks) * i);
return (
);
}
// ---- Miles bonus progress bar (the key feature) ----
function MilesProgressBar({ card, expanded = false }) {
if (!card?.bonus) return null;
const b = card.bonus;
const spent = card.spent || 0;
const m = computeMiles(card);
// Multi-segment cards (PPV split, PRVI regional, KrisFlyer SQ-gate)
if (b.kind === "ppv") {
return (
Bonus tier total: S${b.capSgd}/mo
{fmt.miles(m.miles)} mi earned
);
}
if (b.kind === "krisflyer") {
const sqSpent = card.sqSpent || 0;
const otherSpent = Math.max(0, spent - sqSpent);
const sqUnlocked = sqSpent >= b.sqGateSgd;
const sqPct = Math.min(100, (sqSpent / b.sqGateSgd) * 100);
return (
SQ spend gate {sqUnlocked ? "✓ Unlocked" : "Locked"}
{fmt.sgd(sqSpent, { decimals: 0 })} / {fmt.sgd(b.sqGateSgd, { decimals: 0 })}
{sqUnlocked
? "Earning 2.4mpd on accelerated · 3mpd on SQ"
: `Earning 1.2mpd until S$${(b.sqGateSgd - sqSpent).toFixed(0)} more on SQ`}
Other spend: {fmt.sgd(otherSpent, { decimals: 0 })}
{fmt.miles(m.miles)} mi earned
);
}
if (b.kind === "prvi") {
return (
Uncapped · tiered by region
{fmt.miles(m.miles)} mi
{m.segments.filter(s => s.spent > 0).map((s, i) => {
const pct = (s.spent / spent) * 100;
const colors = [card.color + "88", card.color, card.accent, "#10b981"];
return
;
})}
{m.segments.filter(s => s.spent > 0).map((s, i) => {
const colors = [card.color + "88", card.color, card.accent, "#10b981"];
return (
{s.label.replace(/ @ .*/, "")}: {fmt.sgd(s.spent, { decimals: 0 })}
);
})}
);
}
// Single-cap cards (Lady's, Citi Rewards, Trust)
if (!b.capSgd) {
return (
Uncapped · {b.rate}mpd
{fmt.miles(m.miles)} mi
);
}
const pct = Math.min(100, (spent / b.capSgd) * 100);
const remaining = Math.max(0, b.capSgd - spent);
const overflow = Math.max(0, spent - b.capSgd);
const isOver = spent > b.capSgd;
const isNear = pct > 80 && pct < 100;
return (
{b.rate}mpd up to {fmt.sgdShort(b.capSgd)}/mo
{fmt.sgd(spent, { decimals: 0 })} / {fmt.sgd(b.capSgd, { decimals: 0 })}
{[25, 50, 75].map(t => (
))}
{isOver ? (
⚠ {fmt.sgd(overflow, { decimals: 0 })} over cap — earning {b.baseRate}mpd
) : isNear ? (
⚡ {fmt.sgd(remaining, { decimals: 0 })} left to max bonus
) : (
{fmt.sgd(remaining, { decimals: 0 })} left in bonus tier
)}
{fmt.miles(m.miles)} mi earned
);
}
// Sub-bar for PPV split caps
function SubBar({ label, spent, cap, rate, color }) {
const pct = Math.min(100, (spent / cap) * 100);
const isOver = spent > cap;
return (
{label} · {rate}mpd
{fmt.sgd(spent, { decimals: 0 })} / {fmt.sgd(cap, { decimals: 0 })}
);
}
// ---- Visual credit card ----
function CreditCard({ card, size = "md", showMiles = false, onClick }) {
const isLg = size === "lg";
const w = isLg ? 320 : 240;
const h = isLg ? 200 : 150;
const m = card.bonus ? computeMiles(card) : { miles: 0, bonusMiles: 0, baseMiles: 0 };
const isDebit = card.type === "debit";
return (
{/* Decorative shapes */}
{card.network}
{card.name}
{showMiles && !isDebit ? (
<>
Miles this month
{fmt.miles(m.miles)}
) : (
<>
•••• {card.last4}
Statement
{fmt.sgd(card.statementBalance)}
)}
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
position: "relative",
display: "grid",
gridTemplateColumns: "auto 1fr auto auto",
gap: 12,
padding: dense ? "10px 16px" : "14px 16px",
alignItems: "center",
borderBottom: "1px solid var(--border-subtle)",
}}>
{editing ? (
setDraft(e.target.value)}
onBlur={save}
onKeyDown={e => {
if (e.key === "Enter") save();
if (e.key === "Escape") cancel();
}}
style={{
fontSize: 14, fontWeight: 500, color: "var(--text-1)",
width: "100%", padding: "2px 6px", margin: "-3px -7px",
background: "var(--bg-muted)",
border: "1px solid var(--accent, var(--text-1))",
borderRadius: 4,
outline: "none", fontFamily: "inherit",
}}
/>
) : (
{ e.stopPropagation(); setEditing(true); }}
style={{
fontSize: 14, fontWeight: 500, color: "var(--text-1)",
whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
cursor: "text",
}}
title="Click to edit name">
{tx.merchant}
)}
{secondary}
{showPopover && (
setShowPopover(false)}
/>
)}
e.stopPropagation()}
style={{
position: "absolute", top: "calc(100% - 6px)", right: 16, zIndex: 50,
width: 280, padding: 12,
background: "var(--bg)",
border: "1px solid var(--border)",
borderRadius: 10,
boxShadow: "0 8px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06)",
display: "flex", flexDirection: "column", gap: 10,
}}>
Edit transaction
onChange("merchant", e.target.value.trim() || tx.merchant)}
onKeyDown={e => { if (e.key === "Enter") e.target.blur(); }}
style={popoverInputStyle}/>
{tx.type === "income" && (
)}
{tx.type === "expense" && (
)}
{(tx.type === "income" || (tx.type === "expense" && !tx.cardId)) && (
)}
{tx.type === "expense" && tx.cardId && (
)}
onChange("note", e.target.value.trim() || undefined)}
onKeyDown={e => { if (e.key === "Enter") e.target.blur(); }}
style={popoverInputStyle}/>
Changes save when you tab away or press Enter.
{title}
{subtitle &&
{subtitle}
}
{action}
);
}
// ---- Stat card ----
function Stat({ label, value, delta, icon, accent }) {
return (
{value}
{delta && (
{delta.positive && }
{delta.negative && }
{delta.label}
)}
);
}
Object.assign(window, { Donut, HBar, MonthlyChart, MilesProgressBar, CreditCard, TxRow, SectionHeader, Stat });