);
}
function TxRow({ r, last, onDelete }) {
const [open, setOpen] = useState(false);
return (
);
}
/* ================================================================== */
/* CATEGORY DETAIL (subcategories) */
/* ================================================================== */
function CategoryDetail({ cat, metrics, tx, onDelete }) {
const c = metrics.cats.find((x) => x.name === cat) || {};
const rows = tx.filter((t) => t.category === cat && monthKey(t.date) === thisMonth()).sort((a, b) => b.date.localeCompare(a.date));
const subMap = {}; rows.forEach((t) => { const k = t.sub || "Other"; subMap[k] = (subMap[k] || 0) + t.amount; });
const subs = Object.entries(subMap).map(([name, amt]) => ({ name, amt })).sort((a, b) => b.amt - a.amt);
const max = Math.max(1, ...subs.map((s) => s.amt));
const over = (c.remaining || 0) < 0;
return (
);
}
/* ================================================================== */
/* INCOME */
/* ================================================================== */
function IncomeView({ metrics, income, onDelete }) {
const proj = useCountUp(metrics.projIncome);
const recent = [...income].sort((a, b) => b.date.localeCompare(a.date)).slice(0, 8);
return (
{/* projection */}
{fmt(proj)}
based on your last 90 days · typically {fmtK(metrics.incLow)}–{fmtK(metrics.incHigh)}
So far this month you've brought in {fmt(metrics.monthIncome)} . Variable income — Waffle averages your recent pace so the goal math stays honest.
{/* trend */}
Last 6 months
{metrics.trend.map((m) => (
{m.amount > 0 ? fmtK(m.amount) : ""}
0 ? `linear-gradient(180deg,${T.waffle},${T.orange})` : T.fill2, borderRadius: 6 }} />
{m.label}
))}
{/* sources */}
{metrics.sources.length > 0 && (
{metrics.sources.map((s, i) => (
{s.name}
{fmt(s.amt)}
))}
)}
{recent.length ? recent.map((r, i) => (
Add income with the + button.
}
);
}
function IncRow({ r, last, onDelete }) {
const [open, setOpen] = useState(false);
return (
setOpen((o) => !o)}>
{r.source}
{prettyDate(r.date)}
+{fmt(r.amount)}
{open &&
onDelete(r.id)} style={{ background: "none", border: "none", color: T.red, fontSize: 14, fontWeight: 500, cursor: "pointer" }}>Delete
}
);
}
/* ================================================================== */
/* INSIGHTS */
/* ================================================================== */
function InsightsView({ metrics, config }) {
const [coach, setCoach] = useState(""); const [st, setSt] = useState("");
const ring = useCountUp(metrics.overall); const C = 2 * Math.PI * 54;
const run = async () => { setSt("loading"); try { setCoach(await aiCoach({ projectedIncome: Math.round(metrics.projIncome), incomeRange: [Math.round(metrics.incLow), Math.round(metrics.incHigh)], goal: config.goal, monthsToGoal: metrics.monthsToGoal, categories: metrics.cats.filter((c) => c.budget > 0).map((c) => ({ name: c.name, spent: Math.round(c.spent), budget: c.budget, score: c.score })) })); setSt("done"); } catch (e) { setSt("error"); } };
const used = [...metrics.cats].filter((c) => c.budget > 0).sort((a, b) => a.score - b.score);
return (
{metrics.overall >= 80 ? "Dialed in this month." : metrics.overall >= 50 ? "A few leaks to plug." : "Some categories ran hot."}
{used.map((c, i) => (
{c.score}
{c.name} {fmt(c.spent)} / {fmt(c.budget)}
))}
Coach
{st === "done" ?
{coach}
:
A read on your month — income range, what ran hot, and what it means for {config.goal.name}.
}
{st === "error" &&
Couldn't reach the coach. Try again.
}
{st === "loading" ? <>
);
}
/* ================================================================== */
/* ADD SHEET (expense + income) */
/* ================================================================== */
function AddSheet({ config, metrics, income, onClose, onExpense, onIncome }) {
const [type, setType] = useState("expense");
const [mode, setMode] = useState("manual");
const [who, setWho] = useState(""); const [amount, setAmount] = useState("");
const [date, setDate] = useState(new Date().toISOString().slice(0, 10));
const [category, setCategory] = useState("Other"); const [sub, setSub] = useState("");
const [source, setSource] = useState(""); const [items, setItems] = useState(null);
const [ai, setAi] = useState(""); const [conf, setConf] = useState(null);
const fileRef = useRef();
useEffect(() => { if (type === "expense" && who && ai !== "done") setCategory(localGuess(who)); }, [who, type]);
useEffect(() => { setSub(""); }, [category]);
const knownSources = [...new Set(income.map((x) => x.source))].slice(0, 5);
const askAI = async () => { if (!who) return; setAi("loading"); try { const g = await aiCategorize(who, amount || 0); if (g.category) setCategory(g.category); if (g.sub) setSub(g.sub); setConf(g.confidence != null ? Math.round(g.confidence * 100) : null); setAi("done"); } catch (e) { setCategory(localGuess(who)); setAi("error"); } };
const onReceipt = async (e) => { const f = e.target.files && e.target.files[0]; if (!f) return; setMode("receipt"); setAi("loading"); try { const b64 = await new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result.split(",")[1]); r.onerror = rej; r.readAsDataURL(f); }); const out = await aiReadReceipt(b64, f.type || "image/jpeg"); if (out.who) setWho(out.who); if (out.amount) setAmount(String(out.amount)); if (out.date) setDate(out.date); if (out.category) setCategory(out.category); if (out.sub) setSub(out.sub); if (out.items) setItems(out.items); setAi("done"); } catch (err) { setAi("error"); } };
const budget = config.budgets[category] || 0;
const spentInCat = (metrics.cats.find((c) => c.name === category) || {}).spent || 0;
const remainAfter = budget - (spentInCat + (parseFloat(amount) || 0));
const subList = SUBS[category] || [];
const submit = () => {
const amt = parseFloat(amount); if (!amt) return;
if (type === "income") { if (!source.trim()) return; onIncome({ source: source.trim(), amount: amt, date }); }
else { if (!who.trim()) return; onExpense({ who: who.trim(), amount: amt, date, category, sub: sub || undefined, items: items || undefined }); }
};
return (
e.stopPropagation()} style={{ width: "100%", maxWidth: 480, background: T.bg, borderRadius: "28px 28px 0 0", padding: "10px 18px calc(22px + env(safe-area-inset-bottom))", maxHeight: "94vh", overflowY: "auto" }}>
{/* type toggle */}
setType("expense")} label="Expense" />
setType("income")} label="Income" />
{type === "income" ? (
<>
{knownSources.map((s) => setSource(s)} label={s} />)}
)}
Add income
) : (
<>
setMode("manual")} label="Quick add" />
fileRef.current && fileRef.current.click()} label="Snap receipt" />
{mode === "receipt" && (
{ai === "loading" ? {ai === "loading" ? "Reading your receipt…" : ai === "done" ? "Got it — check & save." : ai === "error" ? "Couldn't read it. Enter manually." : "Tap to photograph your receipt."}
fileRef.current && fileRef.current.click()} style={{ ...pillSm }}>Photo
)}
Category
{ai === "loading" ?
setCategory(e.target.value)} style={inp}>{CATS.map((c) => {c.name} )}
{/* subcategory chips — only shows if the category has them */}
{subList.length > 0 && (
Detail · optional
{subList.map((s) => setSub(sub === s ? "" : s)} label={s} />)}
)}
{budget > 0 && (
{category} after this {remainAfter < 0 ? `${fmt(-remainAfter)} over` : `${fmt(remainAfter)} left`}
)}
Add expense
)}
);
}
/* ================================================================== */
/* CONFIRM */
/* ================================================================== */
function ConfirmCard({ data, goal, onClose }) {
if (data.kind === "income") {
const { rec, monthIncome } = data;
return (
e.stopPropagation()} style={{ ...card, width: "100%", maxWidth: 330, padding: 22, textAlign: "center" }}>
+{fmt(rec.amount)} · {rec.source}
{fmt(monthIncome)} in this month. Keep stacking toward {goal.name} 🧇
Nice
);
}
const { rec, spent, budget } = data; const remaining = budget - spent; const over = remaining < 0; const pct = budget ? Math.min(100, (spent / budget) * 100) : 0;
return (
e.stopPropagation()} style={{ ...card, width: "100%", maxWidth: 330, padding: 22, textAlign: "center" }}>
{over ? ⚠️ :
{fmt(rec.amount)} · {rec.who}
{rec.sub ? `${rec.category} · ${rec.sub}` : rec.category}
{budget > 0 && (<>
{over ? `${fmt(-remaining)} over on ${rec.category}. Redirect it to ${goal.name} to stay on pace.` : `${fmt(remaining)} left in ${rec.category} this month.`}
)}
Done
);
}
/* ================================================================== */
/* SETUP */
/* ================================================================== */
function SetupView({ config, onSave }) {
const [c, setC] = useState(config); const [saved, setSaved] = useState(false);
const set = (path, v) => { const n = JSON.parse(JSON.stringify(c)); if (path[0] === "goal") n.goal[path[1]] = v; else if (path[0] === "budgets") n.budgets[path[1]] = v; else n[path[0]] = v; setC(n); setSaved(false); };
const num = (v) => parseFloat(v) || 0;
return (
);
}
/* ---- atoms ---- */
function Group({ label, children }) { return
{label &&
{label.toUpperCase()}
}
{children}
; }
function Row({ children, last, onClick }) { return
{children}
; }
function Field({ label, children, flex }) { return
; }
function Seg({ active, onClick, label }) { return
{label} ; }
function Chip({ active, onClick, label }) { return
{label} ; }
function Tab({ icon: Icon, label, active, onClick }) { return
{label} ; }
const card = { background: T.card, borderRadius: 20, boxShadow: "0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.045)" };
const grpLbl = { fontSize: 12.5, color: T.faint, fontWeight: 600, letterSpacing: ".03em", paddingLeft: 6 };
const lbl = { fontSize: 12.5, color: T.dim, fontWeight: 600, marginBottom: 6, paddingLeft: 2, textTransform: "uppercase", letterSpacing: ".02em" };
const inp = { width: "100%", background: T.fill, border: "1px solid transparent", borderRadius: 12, padding: "12px 14px", color: T.text, fontSize: 16, fontWeight: 500 };
const pill = { background: T.ink, color: "#fff", border: "none", borderRadius: 14, padding: "15px", fontSize: 16, fontWeight: 600, cursor: "pointer" };
const pillSm = { background: T.ink, color: "#fff", border: "none", borderRadius: 10, padding: "7px 14px", fontSize: 13, fontWeight: 600, cursor: "pointer" };
ReactDOM.createRoot(document.getElementById("root")).render(
);