// ledger-views.jsx — main content views
const { useState: useStateV, useMemo: useMemoV, useRef: useRefV } = React;
// ─────────────── TRANSACTIONS VIEW ───────────────
function TransactionsView({ txs, month, categoryFilter, setCategoryFilter, search, onOpenTx, onAddTx, onQuickAdd }) {
const monthTxs = useMemoV(() => txs
.filter(t => monthOf(t.date) === month)
.filter(t => !categoryFilter || t.category === categoryFilter)
.filter(t => !search || (t.desc || '').toLowerCase().includes(search.toLowerCase()) || (t.tags||[]).some(x => x.toLowerCase().includes(search.toLowerCase())))
.sort((a, b) => b.date.localeCompare(a.date) || b.id.localeCompare(a.id)),
[txs, month, categoryFilter, search]);
const { income, spend, net } = useMemoV(() => totals(txs.filter(t => monthOf(t.date) === month)), [txs, month]);
const totalBudget = BUDGETS.reduce((a,b) => a + b.amount, 0);
const budgetLeft = totalBudget - spend;
const budgetUsedPct = Math.min(100, (spend / totalBudget) * 100);
const [typeFilter, setTypeFilter] = useStateV('all'); // all|in|out
const filtered = useMemoV(() =>
typeFilter === 'all' ? monthTxs : monthTxs.filter(t => t.type === typeFilter),
[monthTxs, typeFilter]);
// group by date for visual rhythm
const grouped = useMemoV(() => {
const g = [];
let curDate = null;
filtered.forEach(t => {
if (t.date !== curDate) { g.push({ kind: 'sep', date: t.date }); curDate = t.date; }
g.push({ kind: 'tx', tx: t });
});
return g;
}, [filtered]);
const noDataAtAll = txs.length === 0;
return (
{/* Summary strip */}
{new Date(month + '-01').toLocaleDateString('en-GB', { month: 'long', year: 'numeric' })}
{monthTxs.length} transactions
{/* Quick add bar */}
{/* Filters */}
{[['all','All'],['out','Spend'],['in','Income']].map(([v,l]) => (
))}
filter
{categoryFilter && (
)}
{filtered.length} of {monthTxs.length}
CSV
{/* List */}
{noDataAtAll ? (
£
A clean slate
Type your first transaction in the quick-add bar above, or hit N to open the full form.
) : (
| Date |
Category |
Description |
Tags |
Amount |
|
{grouped.map((g, i) => g.kind === 'sep' ? (
|
{dateGroupLabel(g.date)}
|
) : (
onOpenTx(g.tx)} />
))}
{filtered.length === 0 && (
|
No transactions match these filters.
|
)}
)}
{label}
{budget ? fmt(value) : fmt(value, { sign })}
{budget && (
90 ? 'var(--neg)' : 'var(--accent)', borderRadius: 999 }}>
{pct.toFixed(0)}% used · {fmt0(BUDGETS.reduce((a,b)=>a+b.amount,0))} total
)}
);
}
function TxRow({ tx, onClick }) {
const cat = CAT_MAP[tx.category];
const isIn = tx.type === 'in';
return (
| {dateLabel(tx.date)} |
{cat?.icon}
{cat?.name}
|
{tx.desc}
{tx.recurring && }
{tx.fuel && · {tx.fuel.litres}L}
|
{(tx.tags || []).map(t => {t})}
|
{isIn ? '+' : '−'}{fmt(tx.amount)}
|
|
);
}
// ─────────────── QUICK ADD BAR ───────────────
function QuickAddBar({ onAdd, onExpand }) {
const [amount, setAmount] = useStateV('');
const [desc, setDesc] = useStateV('');
const [cat, setCat] = useStateV('food');
const [type, setType] = useStateV('out');
const [date, setDate] = useStateV('2026-05-21');
const [catOpen, setCatOpen] = useStateV(false);
const amountRef = useRefV();
const submit = () => {
if (!amount) return;
onAdd({
id: 'tx' + Date.now(),
date, type, category: cat,
amount: parseFloat(amount),
desc: desc || CAT_MAP[cat]?.name,
tags: [],
});
setAmount(''); setDesc('');
amountRef.current?.focus();
};
const c = CAT_MAP[cat];
return (
{/* type toggle */}
{/* date */}
setDate(e.target.value)} style={{ fontSize: 12.5 }} />
{/* amount */}
£
setAmount(e.target.value)}
onKeyDown={e => e.key === 'Enter' && submit()}
className="tnum"
style={{ fontSize: 18, fontWeight: 500, width: 90 }}
/>
{/* category picker */}
{catOpen && (
{ setCat(v); setCatOpen(false); }} onClose={() => setCatOpen(false)} />
)}
{/* description */}
setDesc(e.target.value)} placeholder="What was it?"
onKeyDown={e => e.key === 'Enter' && submit()}
style={{ flex: 1, fontSize: 13.5, padding: '0 6px', minWidth: 0 }} />
);
}
function CategoryPopover({ type, value, onChange, onClose }) {
return (
<>
{CATEGORIES.filter(c => c.kind === type || (type === 'xfer')).map(c => (
))}
);
}
// ─────────────── STATS VIEW ───────────────
function StatsView({ txs, month }) {
const monthTxs = useMemoV(() => txs.filter(t => monthOf(t.date) === month), [txs, month]);
const { income, spend, net } = totals(monthTxs);
const byCat = useMemoV(() => spendByCategory(monthTxs), [monthTxs]);
const series = useMemoV(() => sixMonthSeries(txs, month), [txs, month]);
const total = byCat.reduce((a, b) => a + b.amount, 0) || 1;
// pie geometry
const R = 78, CX = 90, CY = 90;
let acc = 0;
const slices = byCat.map(s => {
const start = acc / total;
acc += s.amount;
const end = acc / total;
const a0 = start * Math.PI * 2 - Math.PI / 2;
const a1 = end * Math.PI * 2 - Math.PI / 2;
const large = (end - start) > 0.5 ? 1 : 0;
const x0 = CX + Math.cos(a0) * R, y0 = CY + Math.sin(a0) * R;
const x1 = CX + Math.cos(a1) * R, y1 = CY + Math.sin(a1) * R;
const d = `M${CX},${CY} L${x0},${y0} A${R},${R} 0 ${large} 1 ${x1},${y1} Z`;
return { ...s, d };
});
return (
Stats
{new Date(month + '-01').toLocaleDateString('en-GB', { month: 'long', year: 'numeric' })}
{/* Pie + breakdown */}
Spend by category
total spend
{fmt0(total)}
{byCat.slice(0, 6).map(s => (
{s.cat.name}
{((s.amount / total) * 100).toFixed(0)}%
{fmt(s.amount)}
))}
{/* 6-month bars */}
Last 6 months
income{' vs '}
spend
avg net {fmt0(series.reduce((a,s)=>a+s.income-s.spend,0) / 6)}/mo
{/* Summary cards */}
t.type==='out').map(t=>t.amount), 0))} sub="Rent · 15 May" />
t.category===byCat[0]?.category).length} transactions`} />
0 ? 'pos' : 'neg'} />
);
}
function BarChart({ series }) {
const max = Math.max(...series.flatMap(s => [s.income, s.spend]));
const W = 480, H = 180, padL = 28, padR = 12, padT = 12, padB = 26;
const groupW = (W - padL - padR) / series.length;
const barW = (groupW - 8) / 2;
return (
);
}
function MiniStat({ label, value, sub, tone }) {
const color = tone === 'pos' ? 'var(--pos)' : tone === 'neg' ? 'var(--neg)' : 'var(--ink)';
return (
);
}
// ─────────────── BUDGETS VIEW ───────────────
function BudgetsView({ txs, month, budgets, onAddBudget, onEditBudget, onDeleteBudget }) {
const monthTxs = useMemoV(() => txs.filter(t => monthOf(t.date) === month && t.type === 'out'), [txs, month]);
const spentBy = useMemoV(() => {
const m = {};
monthTxs.forEach(t => { m[t.category] = (m[t.category] || 0) + t.amount; });
return m;
}, [monthTxs]);
const totalBudget = budgets.reduce((a, b) => a + b.amount, 0);
const totalSpent = Object.values(spentBy).reduce((a, b) => a + b, 0);
return (
Budgets
{new Date(month + '-01').toLocaleDateString('en-GB', { month: 'long', year: 'numeric' })} · {10} days remaining
{/* Total ring */}
This month
{fmt0(totalSpent)}
of {fmt0(totalBudget)} budget
📅 Pace: {fmt0(totalSpent / 21)}/day
🏁 Projected: {fmt0((totalSpent / 21) * 31)}
💷 Left: {fmt0(totalBudget - totalSpent)}
{/* List of budgets */}
{budgets.map((b, i) => {
const cat = CAT_MAP[b.category];
const spent = spentBy[b.category] || 0;
const pct = (spent / b.amount) * 100;
const danger = pct > 90;
return (
onEditBudget(b)} style={{
padding: '14px 18px',
borderTop: i === 0 ? 0 : '1px solid var(--line)',
display: 'grid', gridTemplateColumns: '36px 1fr 90px 100px 28px', gap: 14, alignItems: 'center',
cursor: 'pointer',
transition: 'background .08s',
}}
onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
>
{cat.icon}
{cat.name}
{danger && over pace}
{fmt0(spent)}
/ {fmt0(b.amount)}
{pct.toFixed(0)}%
);
})}
{budgets.length === 0 && (
🎯
No budgets yet
Set a cap on a category to keep an eye on it.
)}
);
}
// ─────────────── BUDGET MODAL ───────────────
function BudgetModal({ budget, budgets, onClose, onSave, onDelete }) {
const isNew = !budget?.category || !budgets.find(b => b.category === budget?.category);
const [draft, setDraft] = useStateV(budget || { category: '', amount: 200 });
if (!budget) return null;
const taken = new Set(budgets.filter(b => b.category !== budget.category).map(b => b.category));
const available = CATEGORIES.filter(c => c.kind === 'out' && !taken.has(c.id));
const cat = CAT_MAP[draft.category];
return (
<>
{cat ? (
{cat.icon}
) : (
🎯
)}
{isNew ? 'New budget' : 'Edit budget'}
{cat?.name || 'Choose a category'}
Category
{isNew ? (
{available.map(c => (
))}
{available.length === 0 && (
Every category already has a budget — edit those instead.
)}
) : (
{cat.icon}
{cat.name}
)}
Monthly limit
£
setDraft(d => ({ ...d, amount: parseFloat(e.target.value) || 0 }))}
className="tnum"
style={{ fontSize: 18, fontWeight: 500 }}
autoFocus
/>
/ month
{[50, 100, 200, 300, 500].map(v => (
))}
{!isNew && (
)}
);
}
function Ring({ spent, budget, size = 120 }) {
const r = size / 2 - 6;
const c = 2 * Math.PI * r;
const pct = Math.min(1, spent / budget);
return (
);
}
// ─────────────── RECURRING VIEW ───────────────
function RecurringView({ recurring, onAdd, onEdit }) {
return (
Recurring
Auto-posted on schedule. Skip or edit any time.
{recurring.map((r, i) => {
const cat = CAT_MAP[r.category];
const isIn = cat?.kind === 'in';
return (
onEdit(r)} style={{
padding: '14px 18px',
borderTop: i === 0 ? 0 : '1px solid var(--line)',
display: 'grid', gridTemplateColumns: '36px 1fr auto auto auto 24px', gap: 14, alignItems: 'center',
cursor: 'pointer', transition: 'background .08s',
}}
onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
>
{cat?.icon}
{r.desc}
{cat?.name} · {r.cadence}
next
{dateLabel(r.nextDate)}
{isIn ? '+' : '−'}{fmt(r.amount)}
);
})}
{recurring.length === 0 && (
🔁
No recurring transactions yet
Set up rent, salary, subscriptions… and they'll auto-log.
)}
);
}
// ─────────────── FUEL VIEW ───────────────
function FuelView({ txs, onAddFuel }) {
const fuelTxs = txs.filter(t => t.category === 'fuel' && t.fuel?.odo).sort((a,b) => b.date.localeCompare(a.date));
// compute mpl per fill (using prev odo)
const enriched = fuelTxs.map((t, i) => {
const prev = fuelTxs[i + 1];
if (!prev) return { ...t, miles: null, mpl: null };
const miles = t.fuel.odo - prev.fuel.odo;
return { ...t, miles, mpl: miles / t.fuel.litres, ppl: t.amount / t.fuel.litres };
});
const valid = enriched.filter(t => t.mpl != null);
const avgMpl = valid.reduce((a, t) => a + t.mpl, 0) / (valid.length || 1);
const lastMpl = valid[0]?.mpl;
return (
⛽ Fuel log
Track every fill-up. mi/L is computed from your odometer.
avgMpl ? 'pos' : 'neg'} />
a+t.amount,0))} sub={`${fuelTxs.length} fill-ups`} />
| Date |
Station |
Litres |
Odometer |
Trip |
mi/L |
£/L |
Cost |
{enriched.map(t => (
| {dateLabel(t.date)} |
{t.desc} |
{t.fuel.litres.toFixed(1)} L |
{t.fuel.odo.toLocaleString()} |
{t.miles ? `${t.miles} mi` : '—'} |
avgMpl ? 'var(--pos)' : 'var(--ink)' }}>
{t.mpl ? t.mpl.toFixed(2) : '—'}
|
{(t.amount / t.fuel.litres).toFixed(3)} |
−{fmt(t.amount)} |
))}
);
}
function FuelStat({ label, big, sub, tone }) {
const color = tone === 'pos' ? 'var(--pos)' : tone === 'neg' ? 'var(--neg)' : 'var(--ink)';
return (
);
}
Object.assign(window, {
TransactionsView, StatsView, BudgetsView, BudgetModal, RecurringView, FuelView,
QuickAddBar, TxRow, SumCard,
});