/* Finance module — Nutri-style screens
Mobile screens: Overview · Transactions · Add · Budgets · Insights
*/
function FinanceHome({ txns, accounts, onOpenTxn, onAdd, onEditAccount, loading }) {
const t30 = nfTotalsForRange(txns, 30);
const t7 = nfTotalsForRange(txns, 7);
// Net worth = sum of all account egpBalances (converts foreign-currency accounts to EGP)
const totalBalance = (accounts || []).reduce((s, a) => s + (a.egpBalance != null ? a.egpBalance : (a.balance || 0)), 0);
const hasForeignAccts = (accounts || []).some(a => a.currency && a.currency !== 'EGP');
// last 7 day spending sparkline-bars
const today = new Date();
const week = [];
for (let i = 6; i >= 0; i--) {
const d = new Date(today); d.setDate(today.getDate()-i);
const iso = isoOf(d);
const cal = txns.filter(t => t.date === iso && t.kind === 'expense').reduce((s,t) => s + Math.abs(t.amount), 0);
week.push({
iso, label: ['S','M','T','W','T','F','S'][d.getDay()], cal,
});
}
const maxCal = Math.max(...week.map(w => w.cal), 1);
// Y-axis ticks for weekly spending bar chart (inlined — _niceYTicks not yet available)
const _wkRough = maxCal / 3;
const _wkMag = Math.pow(10, Math.floor(Math.log10(_wkRough || 1)));
const _wkStep = ([1, 2, 2.5, 5, 10].find(f => f * _wkMag >= _wkRough) || 10) * _wkMag;
const wkTicks = Array.from({ length: Math.ceil(maxCal / _wkStep) + 1 }, (_, i) => i * _wkStep);
const wkMaxY = Math.max(wkTicks[wkTicks.length - 1], 1);
// top categories
const cats = nfByCategory(txns, 30).slice(0, 4);
const totalSpent30 = cats.reduce((s, c) => s + c.total, 0);
// recent transactions
const recent = [...txns].sort((a, b) => b.date.localeCompare(a.date) || (b.time||'').localeCompare(a.time||'')).slice(0, 5);
if (!txns.length) {
return (
Finance
{prettyDate(todayISO())}
{loading
?
Loading your data…
:
}
);
}
return (
{/* header */}
Finance
{prettyDate(NUTRI_TODAY)}
{/* HERO — Net balance */}
Net worth
{nfMoneyFmt(Math.round(totalBalance))}
EGP{hasForeignAccts ? ' equiv.' : ''}
{/* Accounts row */}
Accounts
{(accounts || NF_ACCOUNTS).length} total
{(accounts || NF_ACCOUNTS).map(a => (
onEditAccount(a) : null}/>
))}
{/* 7-day spending */}
Spending this week
{nfMoneyFmt(t7.expenses)} {NF_CURRENCY}
{/* Top categories */}
Top categories
Last 30 days
{cats.map(c => {
const pct = c.total / Math.max(totalSpent30, 1);
return (
{c.name}
{Math.round(pct*100)}% of spending
{nfMoneyFmt(c.total)}
);
})}
{/* Recent transactions */}
Recent transactions
{recent.length} latest
{recent.map(t => onOpenTxn(t)} />)}
{label}
{sign ? {sign} : null}{value}
{sub ?
{sub}
: null}
);
}
function AccountCard({ account, onEdit }) {
const bal = account.balance != null ? account.balance : ((account.startingBalance || 0) + (account.income || 0) - (account.expenses || 0));
const negative = bal < 0;
const acctCurrency = account.currency || NF_CURRENCY;
const showEgpEquiv = acctCurrency !== 'EGP' && account.egpBalance != null && Math.round(account.egpBalance) !== Math.round(bal);
return (
{account.icon}
{account.kind}
{onEdit && (
)}
{account.name}
{nfMoneyFmt(bal)}
{acctCurrency}
{showEgpEquiv && (
≈ {nfMoneyFmt(Math.round(account.egpBalance))} EGP
)}
{(account.income > 0 || account.expenses > 0) && (
In
+{nfMoneyFmt(account.income || 0)}
Out
−{nfMoneyFmt(account.expenses || 0)}
)}
);
}
function TxnCard({ txn, onClick, compact = false }) {
const isTransfer = txn.kind === 'transfer';
const isIncome = txn.kind === 'income';
const cat = isTransfer ? null : (NF_CATEGORIES.find(c => c.id === txn.category) || NF_CATEGORIES[0]);
const fromAcct = isTransfer ? (NF_ACCOUNTS.find(a => a.id === txn.fromAccount) || {}) : null;
const toAcct = isTransfer ? (NF_ACCOUNTS.find(a => a.id === txn.toAccount) || {}) : null;
return (
);
}
function prettyDateShort(iso) {
const d = new Date(iso + 'T00:00:00');
if (iso === todayISO()) return 'Today';
if (iso === daysAgo(1)) return 'Yest.';
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}
/* ── TRANSACTIONS LIST ────────────────────────────────────────────── */
function FinanceTxns({ txns, categories, accounts, onOpenTxn, onAdd }) {
const liveCats = categories || NF_CATEGORIES;
const liveAccts = accounts || NF_ACCOUNTS;
const [filter, setFilter] = React.useState('all');
const [q, setQ] = React.useState('');
const [filterCat, setFilterCat] = React.useState('');
const [filterAcct, setFilterAcct] = React.useState('');
const [filterType, setFilterType] = React.useState('');
const [showFilters, setShowFilters] = React.useState(false);
// lookup maps for search
const catNameMap = {}, subcatNameMap = {}, acctNameMap = {};
liveCats.forEach(c => {
catNameMap[c.id] = c.name;
(c.subcategories||[]).forEach(s => { subcatNameMap[s.id] = s.name; });
});
liveAccts.forEach(a => { acctNameMap[a.id] = a.name; });
const filtered = txns
.filter(t => filter === 'all' || t.kind === filter)
.filter(t => !filterCat || t.category === filterCat)
.filter(t => !filterAcct || t.account === filterAcct || t.fromAccount === filterAcct || t.toAccount === filterAcct)
.filter(t => {
if (!filterType) return true;
const catObj = liveCats.find(c => c.id === t.category);
return catObj && catObj.spendingType === filterType;
})
.filter(t => {
if (!q) return true;
const ql = q.toLowerCase();
return [
t.title, t.category, catNameMap[t.category],
subcatNameMap[t.subcategory], acctNameMap[t.account],
acctNameMap[t.fromAccount], acctNameMap[t.toAccount],
t.notes, t.subcategory,
(liveCats.find(c => c.id === t.category)||{}).spendingType,
].some(v => v && v.toLowerCase().includes(ql));
})
.sort((a,b) => b.date.localeCompare(a.date) || (b.time||'').localeCompare(a.time||''));
const groups = {};
filtered.forEach(t => { (groups[t.date] = groups[t.date]||[]).push(t); });
const hasFilters = filterCat || filterAcct || filterType;
return (
Transactions
{filtered.length} entries
{/* search */}
setQ(e.target.value)}
placeholder="Search title, category, subcategory, account, notes…"
style={{ flex:1, border:0, background:'transparent', outline:'none', font:'inherit', fontSize:13.5, color:'var(--text)' }}/>
{q && }
{/* kind pills */}
{[{ id:'all', label:'All' },{ id:'expense', label:'Expenses' },{ id:'income', label:'Income' },{ id:'transfer', label:'Transfers' }].map(k => (
))}
{/* filter panel */}
{showFilters && (
Category
{[{ id:'', name:'All', icon:'', color:'var(--text)' }, ...liveCats.filter(c => c.id !== 'income')].map(c => (
))}
Spending type
{['','need','want','waste','investment'].map(tp => (
))}
Account
{[{ id:'', name:'All', icon:'' }, ...liveAccts].map(a => (
))}
{hasFilters && (
)}
)}
{/* groups */}
{Object.keys(groups).length === 0 ? (
) : Object.entries(groups).sort((a,b) => b[0].localeCompare(a[0])).map(([date, items]) => {
const dayTotal = items.reduce((s,t) => t.kind==='income' ? s+t.amount : t.kind==='transfer' ? s : s-Math.abs(t.amount), 0);
return (
{prettyDate(date)}
= 0 ? 'var(--c-protein)' : 'var(--text-2)' }}>
{dayTotal >= 0 ? '+' : '−'}{nfMoneyFmt(Math.abs(dayTotal))}
{items.map(t =>
onOpenTxn(t)} compact/>)}
);
})}
);
}
/* ── BUDGETS ──────────────────────────────────────────────────────── */
function FinanceBudgets({ txns }) {
const spent = {};
const cutoff = daysAgo(30);
txns.filter(t => t.date >= cutoff && t.kind === 'expense').forEach(t => {
spent[t.category] = (spent[t.category] || 0) + Math.abs(t.amount);
});
return (
Budgets
This month · {NF_CURRENCY}
{Object.entries(NF_BUDGETS).map(([catId, budget]) => {
const cat = NF_CATEGORIES.find(c => c.id === catId);
const used = spent[catId] || 0;
const pct = Math.min(1, used / budget);
const over = used > budget;
return (
{cat.name}
{nfMoneyFmt(used)} of {nfMoneyFmt(budget)}
0.85 ? 'var(--c-carbs)' : 'var(--muted)',
}}>
{Math.round(pct*100)}%
);
})}
);
}
/* ── INSIGHTS HELPERS ─────────────────────────────────────────────── */
// Default Finance Insights filters (Part 2). Other presets are available as
// optional, user-managed filters via the Manage Filters sheet.
const _FIN_RANGE_PRESETS = [
{ id: 'month', label: 'This Month' },
{ id: 'last_month', label: 'Last Month' },
{ id: 'year', label: 'This Year' },
{ id: 'custom', label: 'Custom' },
];
// Full catalog of built-in presets (used by the global filter manager so users
// can re-add the ones that aren't shown by default).
const _FIN_RANGE_CATALOG = [
{ id: 'today', label: 'Today' },
{ id: '7d', label: 'Last 7 Days' },
{ id: '14d', label: 'Last 14 Days' },
{ id: '30d', label: 'Last 30 Days' },
{ id: 'month', label: 'This Month' },
{ id: 'last_month', label: 'Last Month' },
{ id: 'quarter', label: 'This Quarter' },
{ id: 'year', label: 'This Year' },
{ id: 'all', label: 'All Time' },
];
function _niceYTicks(maxVal, targetTicks) {
if (!maxVal || maxVal <= 0) return [0, 1];
targetTicks = targetTicks || 6; // aim for ~6 ticks for readable scales (Part 5)
const rough = maxVal / targetTicks;
const mag = Math.pow(10, Math.floor(Math.log10(rough)));
const step = ([1, 2, 2.5, 5, 10].find(f => f * mag >= rough) || 10) * mag;
return Array.from({ length: Math.ceil(maxVal / step) + 1 }, (_, i) => i * step);
}
// Compact axis label: 1500 → "1.5k", 20000 → "20k", 0.5 → "0.5"
function _axisFmt(v) {
if (v >= 1000000) return (v / 1000000).toFixed(v % 1000000 ? 1 : 0) + 'm';
if (v >= 1000) return (v / 1000).toFixed(v % 1000 ? 1 : 0) + 'k';
return String(Math.round(v * 100) / 100);
}
function _computeFinanceRange(rangeId, customFrom, customTo, savedCustoms) {
const today = todayISO();
// Saved custom filter (id like 'cf_…') → resolve its stored from/to.
if (rangeId && rangeId.indexOf('cf_') === 0 && savedCustoms) {
const f = savedCustoms.find(c => c.id === rangeId);
if (f) return { from: f.from, to: f.to };
}
const d = new Date(today + 'T00:00:00');
// Use local date parts — toISOString() converts to UTC and shifts dates in UTC+N timezones.
const fmt = dt => dt instanceof Date
? (dt.getFullYear() + '-' + String(dt.getMonth()+1).padStart(2,'0') + '-' + String(dt.getDate()).padStart(2,'0'))
: String(dt);
switch (rangeId) {
case 'today': return { from: today, to: today };
case '7d': return { from: daysAgo(6), to: today };
case '14d': return { from: daysAgo(13), to: today };
case '30d': return { from: daysAgo(29), to: today };
case 'month': return { from: fmt(new Date(d.getFullYear(), d.getMonth(), 1)), to: today };
case 'last_month': return { from: fmt(new Date(d.getFullYear(), d.getMonth()-1, 1)), to: fmt(new Date(d.getFullYear(), d.getMonth(), 0)) };
case 'quarter': return { from: fmt(new Date(d.getFullYear(), Math.floor(d.getMonth()/3)*3, 1)), to: today };
case 'year': return { from: d.getFullYear() + '-01-01', to: today };
case 'all': return { from: '2000-01-01', to: today };
case 'custom': return { from: customFrom || today, to: customTo || today };
default: return { from: daysAgo(29), to: today };
}
}
function _buildChartBars(from, to, expenseTxns) {
const fromD = new Date(from + 'T00:00:00');
const toD = new Date(to + 'T00:00:00');
const dayCount = Math.round((toD - fromD) / 86400000) + 1;
if (dayCount <= 14) {
const bars = [];
for (let i = 0; i < dayCount; i++) {
const d = new Date(fromD); d.setDate(fromD.getDate() + i);
const iso = isoOf(d);
const val = expenseTxns.filter(t => t.date === iso).reduce((s,t) => s + Math.abs(t.amount), 0);
bars.push({ key: iso, label: ['S','M','T','W','T','F','S'][d.getDay()], value: val });
}
return { bars, granularity: 'daily' };
}
if (dayCount <= 90) {
const wMap = {};
expenseTxns.forEach(t => {
const d = new Date(t.date + 'T00:00:00');
const dow = (d.getDay() + 6) % 7;
const ws = new Date(d); ws.setDate(d.getDate() - dow);
const wk = isoOf(ws);
wMap[wk] = (wMap[wk] || 0) + Math.abs(t.amount);
});
const bars = [];
const startDow = (fromD.getDay() + 6) % 7;
const first = new Date(fromD); first.setDate(fromD.getDate() - startDow);
for (let cur = new Date(first); isoOf(cur) <= to; cur.setDate(cur.getDate() + 7)) {
const wk = isoOf(cur);
bars.push({ key: wk, label: cur.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }), value: wMap[wk] || 0 });
}
return { bars, granularity: 'weekly' };
}
// Monthly
const mMap = {};
expenseTxns.forEach(t => { const mk = t.date.slice(0,7); mMap[mk] = (mMap[mk]||0) + Math.abs(t.amount); });
const bars = [];
for (
let mc = new Date(fromD.getFullYear(), fromD.getMonth(), 1);
mc.getFullYear() < toD.getFullYear() || (mc.getFullYear() === toD.getFullYear() && mc.getMonth() <= toD.getMonth());
mc.setMonth(mc.getMonth() + 1)
) {
const mk = mc.getFullYear() + '-' + String(mc.getMonth() + 1).padStart(2, '0');
bars.push({ key: mk, label: mc.toLocaleDateString(undefined, { month: 'short', year: '2-digit' }), value: mMap[mk] || 0 });
}
return { bars, granularity: 'monthly' };
}
const _FIN_PALETTE = ['#4FA862','#E89B3C','#5784D8','#E05C6A','#9B6EC8','#3BAAD0','#D4833A','#6DBE6D','#C25A4E','#7A766C'];
function _buildIncomeMonthBars(from, to, incomeTxns) {
const fromD = new Date(from + 'T00:00:00');
const toD = new Date(to + 'T00:00:00');
const mMap = {};
incomeTxns.forEach(t => { const mk = t.date.slice(0,7); mMap[mk] = (mMap[mk]||0) + t.amount; });
const bars = [];
for (
let mc = new Date(fromD.getFullYear(), fromD.getMonth(), 1);
mc.getFullYear() < toD.getFullYear() || (mc.getFullYear() === toD.getFullYear() && mc.getMonth() <= toD.getMonth());
mc.setMonth(mc.getMonth() + 1)
) {
const mk = mc.getFullYear() + '-' + String(mc.getMonth()+1).padStart(2,'0');
bars.push({ key: mk, label: mc.toLocaleDateString(undefined, { month:'short', year:'2-digit' }), value: mMap[mk] || 0 });
}
return bars;
}
/* Generic SVG donut + legend */
function _FinDonut({ data, size = 130 }) {
const total = (data||[]).reduce((s,d) => s + (d.value||0), 0);
if (!total) return null;
const R = 36, SW = 18, C = 2 * Math.PI * R;
let cum = 0;
const slices = (data||[]).map(d => {
const frac = d.value / total;
const dash = frac * C;
const sl = { ...d, frac, dash, off: -cum };
cum += dash;
return sl;
});
return (
{slices.map((s,i) => (
{s.label}
{nfMoneyFmt(Math.round(s.value))}
{Math.round(s.frac*100)}%
))}
);
}
/* ═══ GLOBAL TIME-FILTER BAR (reusable across projects) ═══════════════
scope: unique key per project (e.g. 'finance', 'calories')
catalog: [{id,label}] all selectable built-in presets
defaultVisible: [ids] shown when the user hasn't customized
value: active filter id (preset id or saved-custom id 'cf_…')
onChange(id): select a filter
onManage(): open the manage sheet
Reads saved config from Store (user-specific, persisted). */
function TimeFilterBar({ scope, catalog, defaultVisible, value, onChange, onManage }) {
const Store = window.Store;
const cfg = (Store && Store.timeFilterConfig) ? Store.timeFilterConfig(scope) : {};
const visibleIds = cfg.presets || defaultVisible;
const customs = cfg.custom || [];
const catMap = {}; catalog.forEach(p => { catMap[p.id] = p; });
const pills = [];
visibleIds.forEach(id => { if (catMap[id]) pills.push({ id, label: catMap[id].label }); });
customs.forEach(c => pills.push({ id: c.id, label: c.label, custom: true }));
return (
{pills.map(p => (
))}
);
}
function ManageFiltersSheet({ scope, catalog, defaultVisible, onClose }) {
const Store = window.Store;
const cfg = (Store && Store.timeFilterConfig) ? Store.timeFilterConfig(scope) : {};
const visibleIds = cfg.presets || defaultVisible;
const customs = cfg.custom || [];
const [editId, setEditId] = React.useState(null);
const [label, setLabel] = React.useState('');
const [from, setFrom] = React.useState(NUTRI_TODAY);
const [to, setTo] = React.useState(NUTRI_TODAY);
const [adding, setAdding] = React.useState(false);
function togglePreset(id) {
if (id === 'custom') return; // 'Custom' range entry is always available
const next = visibleIds.includes(id) ? visibleIds.filter(x => x !== id) : [...visibleIds, id];
Store.setTimeFilterPresets(scope, next);
}
function startAdd() { setAdding(true); setEditId(null); setLabel(''); setFrom(NUTRI_TODAY); setTo(NUTRI_TODAY); }
function startEdit(f) { setAdding(true); setEditId(f.id); setLabel(f.label); setFrom(f.from); setTo(f.to); }
function saveCustom() {
if (!label.trim()) return;
if (editId) Store.updateCustomTimeFilter(scope, editId, { label: label.trim(), from, to });
else Store.addCustomTimeFilter(scope, { id: 'cf_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 4), label: label.trim(), from, to });
setAdding(false); setEditId(null); setLabel('');
}
return (
Manage filters
{/* Default presets show/hide */}
Default filters
{catalog.map(p => {
const on = visibleIds.includes(p.id) || p.id === 'custom';
const locked = p.id === 'custom';
return (
{p.label}{locked ? ' (always on)' : ''}
);
})}
{/* Saved custom filters */}
Saved custom filters
{!adding &&
}
{customs.length === 0 && !adding &&
No saved filters yet.
}
{customs.map(f => (
★ {f.label}
{prettyDateShort(f.from)} – {prettyDateShort(f.to)}
))}
{adding && (
)}
);
}
/* ── INSIGHTS SCREEN ──────────────────────────────────────────────── */
function FinanceInsights({ txns, accounts, categories, onCleanup }) {
const liveCats = categories || NF_CATEGORIES;
const liveAccts = accounts || NF_ACCOUNTS;
const [range, setRange] = React.useState('month');
const [customFrom, setCustomFrom] = React.useState(NUTRI_TODAY);
const [customTo, setCustomTo] = React.useState(NUTRI_TODAY);
const [chartType, setChartType] = React.useState('bar');
const [showManage, setShowManage] = React.useState(false);
const _tfCfg = (window.Store && window.Store.timeFilterConfig) ? window.Store.timeFilterConfig('finance') : {};
const savedCustoms = _tfCfg.custom || [];
const _tfCatalog = _FIN_RANGE_CATALOG.concat([{ id: 'custom', label: 'Custom' }]);
const _tfDefault = _FIN_RANGE_PRESETS.map(p => p.id);
const { from, to } = _computeFinanceRange(range, customFrom, customTo, savedCustoms);
const dayCount = Math.max(1, Math.round((new Date(to+'T00:00:00') - new Date(from+'T00:00:00')) / 86400000) + 1);
const inRange = txns.filter(t => t.date >= from && t.date <= to);
const expenseTxns = inRange.filter(t => t.kind === 'expense');
const incomeTxns = inRange.filter(t => t.kind === 'income');
/* ── Expense stats */
const totalExpense = expenseTxns.reduce((s,t) => s + Math.abs(t.amount), 0);
const avgDaily = totalExpense / dayCount;
const dayTotals = {};
expenseTxns.forEach(t => { dayTotals[t.date] = (dayTotals[t.date]||0) + Math.abs(t.amount); });
const hdEntry = Object.entries(dayTotals).sort((a,b) => b[1]-a[1])[0] || null;
const hdDate = hdEntry ? hdEntry[0] : null;
const hdAmt = hdEntry ? hdEntry[1] : 0;
const highestExpTxn = expenseTxns.slice().sort((a,b) => Math.abs(b.amount) - Math.abs(a.amount))[0] || null;
const catTotals = {};
expenseTxns.forEach(t => { catTotals[t.category] = (catTotals[t.category]||0) + Math.abs(t.amount); });
const topCatEntry = Object.entries(catTotals).sort((a,b) => b[1]-a[1])[0] || null;
const topCatId = topCatEntry ? topCatEntry[0] : null;
const topCatObj = topCatId ? (liveCats.find(c => c.id === topCatId) || null) : null;
const subcatTotals = {};
expenseTxns.forEach(t => { if (t.subcategory) subcatTotals[t.subcategory] = (subcatTotals[t.subcategory]||0) + Math.abs(t.amount); });
const topSubEntry = Object.entries(subcatTotals).sort((a,b) => b[1]-a[1])[0] || null;
const topSubId = topSubEntry ? topSubEntry[0] : null;
const topSubAmt = topSubEntry ? topSubEntry[1] : 0;
let topSubName = null;
if (topSubId) {
for (const c of liveCats) {
const s = (c.subcategories||[]).find(s => s.id === topSubId);
if (s) { topSubName = s.name; break; }
}
if (!topSubName) topSubName = topSubId;
}
const typeBreakdown = { need: 0, want: 0, waste: 0, investment: 0 };
expenseTxns.forEach(t => {
const cat = liveCats.find(c => c.id === t.category);
const type = cat && cat.spendingType;
if (type && typeBreakdown.hasOwnProperty(type)) typeBreakdown[type] += Math.abs(t.amount);
});
const catBreakdown = Object.entries(catTotals)
.map(([id, v]) => ({ ...(liveCats.find(c => c.id === id) || { id, name: id, color: '#7A766C', icon: '📦' }), total: v }))
.sort((a,b) => b.total - a.total);
/* ── Subcategory breakdown */
const subcatBreakdown = Object.entries(subcatTotals)
.map(([subId, v], i) => {
let name = subId;
for (const c of liveCats) {
const s = (c.subcategories||[]).find(s => s.id === subId);
if (s) { name = s.name; break; }
}
return { id: subId, name, value: v, color: _FIN_PALETTE[i % _FIN_PALETTE.length] };
})
.sort((a,b) => b.value - a.value);
/* ── Account breakdown */
const acctTotals = {};
expenseTxns.forEach(t => { if (t.account) acctTotals[t.account] = (acctTotals[t.account]||0) + Math.abs(t.amount); });
const acctBreakdown = Object.entries(acctTotals)
.map(([acctId, v], i) => {
const a = liveAccts.find(x => x.id === acctId);
return { id: acctId, name: a ? (a.icon + ' ' + a.name) : acctId, value: v, color: _FIN_PALETTE[(i+3) % _FIN_PALETTE.length] };
})
.sort((a,b) => b.value - a.value);
/* ── Top individual expenses */
const topExpenses = expenseTxns.slice().sort((a,b) => Math.abs(b.amount)-Math.abs(a.amount)).slice(0, 8);
/* ── Spending type donut data */
const TYPE_COLORS = { need:'#5784D8', want:'#E89B3C', waste:'#C25A4E', investment:'#4FA862' };
const spendTypeDonut = ['need','want','waste','investment']
.map(k => ({ label: k.charAt(0).toUpperCase()+k.slice(1), value: typeBreakdown[k]||0, color: TYPE_COLORS[k] }))
.filter(d => d.value > 0);
/* ── Income stats */
const totalIncome = incomeTxns.reduce((s,t) => s + t.amount, 0);
const highestIncTxn = incomeTxns.slice().sort((a,b) => b.amount - a.amount)[0] || null;
const incByMonth = {};
incomeTxns.forEach(t => { const mk = t.date.slice(0,7); incByMonth[mk] = (incByMonth[mk]||0) + t.amount; });
const mVals = Object.values(incByMonth);
const monthlyAvgInc = mVals.length > 0 ? mVals.reduce((s,v) => s+v, 0) / mVals.length : 0;
const bestMkEntry = Object.entries(incByMonth).sort((a,b) => b[1]-a[1])[0] || null;
const bestMonthLabel = bestMkEntry ? new Date(bestMkEntry[0]+'-15').toLocaleDateString(undefined,{month:'short',year:'numeric'}) : null;
const bestMonthAmt = bestMkEntry ? bestMkEntry[1] : 0;
/* ── Income month bars + income type donut */
const incMonthBars = _buildIncomeMonthBars(from, to, incomeTxns);
const incMonthMax = Math.max(...incMonthBars.map(b => b.value), 1);
const incMonthTicks = _niceYTicks(incMonthMax, 6);
const incMonthMaxTick = incMonthTicks[incMonthTicks.length-1] || 1;
const incSubcatTotals = {};
incomeTxns.forEach(t => {
const key = t.subcategory || '__other__';
incSubcatTotals[key] = (incSubcatTotals[key]||0) + t.amount;
});
const incTypeCat = liveCats.find(c => c.id === 'income');
const incSubcatNames = {};
if (incTypeCat) (incTypeCat.subcategories||[]).forEach(s => { incSubcatNames[s.id] = s.name; });
const incTypeDonut = Object.entries(incSubcatTotals)
.map(([id, v], i) => ({ label: incSubcatNames[id] || (id === '__other__' ? 'Other' : id), value: v, color: _FIN_PALETTE[i % _FIN_PALETTE.length] }))
.filter(d => d.value > 0)
.sort((a,b) => b.value - a.value);
/* ── Account stats (range in/out, all-time balance) */
const acctStats = liveAccts.map(a => {
const ri = inRange.filter(t => t.account === a.id && t.kind === 'income').reduce((s,t) => s + (t.egpEquivalent != null ? t.egpEquivalent : t.amount), 0);
const re = inRange.filter(t => t.account === a.id && t.kind === 'expense').reduce((s,t) => s + (t.egpEquivalent != null ? t.egpEquivalent : Math.abs(t.amount)), 0);
return { ...a, rangeIncome: ri, rangeExpenses: re };
});
const totalBalance = liveAccts.reduce((s,a) => s + (a.egpBalance != null ? a.egpBalance : (a.balance||0)), 0);
/* ── Adaptive chart */
const { bars: chartBars, granularity: chartGran } = _buildChartBars(from, to, expenseTxns);
const chartMax = Math.max(...chartBars.map(b => b.value), 1);
const chartTicks = _niceYTicks(chartMax, 6);
const chartMaxTick = chartTicks[chartTicks.length-1] || 1;
const SVG_W=300, SVG_H=130, PAD_L=42, PAD_R=8, PAD_T=12, PAD_B=24;
const CHART_W = SVG_W-PAD_L-PAD_R, CHART_H = SVG_H-PAD_T-PAD_B;
const N_BARS = chartBars.length;
const SLOT_W = CHART_W / Math.max(N_BARS, 1);
const BAR_W = Math.min(SLOT_W * 0.72, 28);
const LBL_STEP = Math.max(1, Math.ceil(N_BARS / 7));
const rangeLabel = (from === to) ? prettyDate(from) : (prettyDateShort(from) + ' – ' + prettyDateShort(to));
function sectionHead(title) {
return (
);
}
return (
{/* Header */}
{/* Range filter bar (managed / customizable) */}
setShowManage(true)}/>
{/* Custom date inputs */}
{range === 'custom' && (
setCustomFrom(e.target.value)}
style={{ flex:1, minWidth:120, border:'1px solid var(--border)', background:'var(--surface-2)', borderRadius:10, padding:'8px 10px', outline:'none', font:'inherit', fontSize:13, color:'var(--text)' }}/>
setCustomTo(e.target.value)}
style={{ flex:1, minWidth:120, border:'1px solid var(--border)', background:'var(--surface-2)', borderRadius:10, padding:'8px 10px', outline:'none', font:'inherit', fontSize:13, color:'var(--text)' }}/>
)}
{inRange.length === 0 ? (
) : (
<>
{/* ═══════════ EXPENSES ═══════════ */}
{expenseTxns.length > 0 && (<>
{sectionHead('Expenses')}
{/* Key stats */}
{/* Top category + subcategory */}
{topCatObj && (
{topSubName
?
:
}
)}
{/* Largest expense */}
{highestExpTxn && (
Largest expense
{}} compact/>
)}
{/* Spending type breakdown */}
{totalExpense > 0 && (
Spending type
{[
{ key:'need', label:'Need', color:'#5784D8' },
{ key:'want', label:'Want', color:'#E89B3C' },
{ key:'waste', label:'Waste', color:'#C25A4E' },
{ key:'investment', label:'Investment', color:'#4FA862' },
].map(t => {
const amt = typeBreakdown[t.key] || 0;
return (
{t.label}
{nfMoneyFmt(Math.round(amt))}
{totalExpense > 0 ? Math.round(amt/totalExpense*100) : 0}%
);
})}
)}
{/* Adaptive expense trend chart */}
{chartBars.length > 0 && (() => {
const pts = chartBars.map((b,i) => ({
x: PAD_L + i*SLOT_W + SLOT_W/2,
y: PAD_T + (1 - Math.max(b.value,0)/chartMaxTick)*CHART_H,
}));
const lineD = pts.map((p,i) => (i===0?`M${p.x},${p.y}`:`L${p.x},${p.y}`)).join(' ');
const areaD = pts.length > 0 ? lineD + ` L${pts[pts.length-1].x},${PAD_T+CHART_H} L${pts[0].x},${PAD_T+CHART_H} Z` : '';
return (
Expense trend
{chartGran==='daily'?'Daily':chartGran==='weekly'?'Weekly':'Monthly'}
{['bar','line','area'].map(ct => (
))}
);
})()}
{/* By category — bar breakdown (names, amounts, %) */}
By category
{catBreakdown.length > 0 && totalExpense > 0
? <_FinBars items={catBreakdown.map(c => ({ key:c.id, label:`${c.icon} ${c.name}`, value:c.total, color:c.color }))} total={totalExpense}/>
:
No category data for this range.
}
{/* By subcategory — bar breakdown */}
By subcategory
{subcatBreakdown.length > 0
? <_FinBars items={subcatBreakdown.map(s => ({ key: s.id, label: s.name, value: s.value, color: s.color }))} total={totalExpense}/>
:
No subcategory data for this range.
}
{/* Spending type donut */}
{spendTypeDonut.length > 0 && (
Need · Want · Waste · Investment
<_FinDonut data={spendTypeDonut} size={130}/>
)}
{/* Top expenses horizontal bar */}
{topExpenses.length > 0 && (
Top expenses
{topExpenses.map((t,i) => {
const pct = totalExpense > 0 ? Math.abs(t.amount)/totalExpense : 0;
const catObj = liveCats.find(c => c.id === t.category) || {};
return (
{t.title || catObj.name}
{nfMoneyFmt(Math.abs(t.amount))}
);
})}
)}
{/* Account/payment donut */}
{acctBreakdown.length > 0 && (
By account
<_FinDonut data={acctBreakdown} size={130}/>
)}
)}
{/* ═══════════ INCOME ═══════════ */}
{incomeTxns.length > 0 && (<>
{sectionHead('Income')}
{bestMonthLabel
?
: null}
{highestIncTxn && (
Highest income
{}} compact/>
)}
{/* Monthly income trend */}
{incMonthBars.length > 0 && (() => {
const IW=300, IH=130, IPL=42, IPR=8, IPT=12, IPB=24;
const ICW=IW-IPL-IPR, ICH=IH-IPT-IPB;
const NI=incMonthBars.length;
const ISW=ICW/Math.max(NI,1), IBW=Math.min(ISW*0.72,28);
const ILS=Math.max(1,Math.ceil(NI/7));
const ipts = incMonthBars.map((b,i) => ({ x:IPL+i*ISW+ISW/2, y:IPT+(1-Math.max(b.value,0)/incMonthMaxTick)*ICH }));
const ilineD = ipts.map((p,i) => (i===0?`M${p.x},${p.y}`:`L${p.x},${p.y}`)).join(' ');
const iareaD = ipts.length>0 ? ilineD+` L${ipts[ipts.length-1].x},${IPT+ICH} L${ipts[0].x},${IPT+ICH} Z` : '';
return (
Monthly income
{['bar','line','area'].map(ct => (
))}
);
})()}
{/* Income type donut */}
{incTypeDonut.length > 0 && (
Income by type
<_FinDonut data={incTypeDonut} size={130}/>
)}
)}
{/* ═══════════ ACCOUNTS ═══════════ */}
{sectionHead('Accounts')}
Total balance
{nfMoneyFmt(totalBalance)}
{NF_CURRENCY}
{acctStats.map((a, i) => (
{a.icon}
{a.name}
{(a.rangeIncome > 0 || a.rangeExpenses > 0)
? `+${nfMoneyFmt(a.rangeIncome)} · −${nfMoneyFmt(a.rangeExpenses)}`
: 'No activity this period'}
{nfMoneyFmt(a.balance||0)}
{a.currency || NF_CURRENCY}
{a.currency && a.currency !== 'EGP' && a.egpBalance != null && (
≈ {nfMoneyFmt(Math.round(a.egpBalance))} EGP
)}
))}
Delete transactions by day, month, or range. Accounts, categories & projects are kept.
)}
{showManage && (
setShowManage(false)}/>
)}
setVal(e.target.value)}
onKeyDown={e => { if (e.key === 'Enter') submit(); if (e.key === 'Escape') setOpen(false); }}
placeholder={placeholder || 'Name…'}
style={{ flex: 1, border: '1px solid var(--border)', background: 'var(--surface-2)', borderRadius: 8, padding: '6px 10px', font: 'inherit', fontSize: 12.5, outline: 'none', color: 'var(--text)' }}/>
);
}
/* Inline "create project" form for the expense sheet — name + optional notes/budget/start
date, without leaving the form (so unsaved expense data is preserved). */
function _ProjectQuickAdd({ onSubmit }) {
const [open, setOpen] = React.useState(false);
const [name, setName] = React.useState('');
const [notes, setNotes] = React.useState('');
const [budget, setBudget] = React.useState('');
const [startDate, setStartDate] = React.useState('');
const fld = { width: '100%', border: '1px solid var(--border)', background: 'var(--surface-2)', borderRadius: 8, padding: '7px 10px', font: 'inherit', fontSize: 12.5, outline: 'none', color: 'var(--text)', boxSizing: 'border-box' };
function submit() {
const n = name.trim(); if (!n) return;
onSubmit({ name: n, notes: notes.trim(), budget: budget !== '' ? +budget : undefined, startDate: startDate || undefined });
setName(''); setNotes(''); setBudget(''); setStartDate(''); setOpen(false);
}
if (!open) {
return (
);
}
return (
);
}
function FinanceAddSheet({ onClose, onSave, editTxn, categories: catsProp, accounts: acctsProp, onAddIncomeSource, usdRate, projects, onQuickAddCategory, onQuickAddSubcategory, onQuickAddAccount, onQuickAddProject }) {
const liveCats = catsProp || NF_CATEGORIES;
const liveAccts = acctsProp || NF_ACCOUNTS;
const liveProjects = (projects || []).filter(p => (p.status || 'active') !== 'archived');
const ed = editTxn || null; // when present, this sheet EDITS an existing txn instead of adding
const [kind, setKind] = React.useState(ed ? (ed.kind === 'income' ? 'income' : 'expense') : 'expense');
const [projectIds, setProjectIds] = React.useState(ed ? (ed.projectIds || []) : []);
const [amount, setAmount] = React.useState(ed ? String(Math.abs(ed.amount)) : '');
const [title, setTitle] = React.useState(ed ? (ed.title || '') : '');
const [cat, setCat] = React.useState(() => {
if (ed) return ed.category || 'food';
const first = liveCats.find(c => c.id !== 'income');
return first ? first.id : 'food';
});
const [subcat, setSubcat] = React.useState(ed ? (ed.subcategory || '') : '');
const [acct, setAcct] = React.useState(ed ? (ed.account || (liveAccts[0] || {}).id || 'cash') : ((liveAccts[0] || {}).id || 'cash'));
const [date, setDate] = React.useState(ed ? (ed.date || NUTRI_TODAY) : NUTRI_TODAY);
const [notes, setNotes] = React.useState(ed ? (ed.notes || '') : '');
const [currency, setCurrency] = React.useState(() => {
if (ed) return ed.currency || 'EGP';
const a = liveAccts[0];
return (a && a.currency) || 'EGP';
});
const [txnRate, setTxnRate] = React.useState(ed && ed.exchangeRate && ed.exchangeRate !== 1 ? String(ed.exchangeRate) : '');
// Skips the auto-adjust effects below on the FIRST render so pre-filled edit values survive mount.
const _initRef = React.useRef(false);
const [showNewSource, setShowNewSource] = React.useState(false);
const [newSourceName, setNewSourceName] = React.useState('');
const CURRENCIES = ['EGP', 'USD', 'EUR', 'GBP', 'SAR', 'AED'];
const isForeign = currency !== 'EGP';
const numAmount = parseFloat(amount) || 0;
const numRate = parseFloat(txnRate) || 1;
const egpEquiv = isForeign && numAmount > 0 ? +(numAmount * numRate).toFixed(2) : numAmount;
function handleAddSource() {
const n = newSourceName.trim();
if (!n || !onAddIncomeSource) return;
onAddIncomeSource(n, (newId) => {
setSubcat(newId);
setShowNewSource(false);
setNewSourceName('');
});
}
React.useEffect(() => {
if (!_initRef.current) return;
if (kind === 'income' && cat !== 'income') {
setCat('income');
setSubcat('');
}
if (kind !== 'income' && cat === 'income') {
const first = liveCats.find(c => c.id !== 'income');
setCat(first ? first.id : 'food');
setSubcat('');
}
}, [kind]);
// Reset subcategory when category changes
React.useEffect(() => { if (!_initRef.current) return; setSubcat(''); }, [cat]);
// Sync currency with selected account
React.useEffect(() => {
if (!_initRef.current) return;
const acctObj = liveAccts.find(a => a.id === acct);
if (acctObj && acctObj.currency) setCurrency(acctObj.currency);
}, [acct]);
// Pre-fill exchange rate when switching to a known currency
React.useEffect(() => {
if (!_initRef.current) return;
if (currency === 'USD' && usdRate) setTxnRate(String(usdRate.toFixed(2)));
else if (currency === 'EGP') setTxnRate('');
}, [currency]);
// Runs LAST on mount (defined after the effects above) → flips the guard on so user-driven
// changes still auto-adjust, while the initial pre-filled edit values are never wiped.
React.useEffect(() => { _initRef.current = true; }, []);
const activeCatObj = liveCats.find(c => c.id === cat);
const subcatOptions = (activeCatObj && activeCatObj.subcategories) || [];
const canSave = !!parseFloat(amount);
function submit() {
if (!canSave) return;
onSave({
id: ed ? ed.id : undefined, // present ⇒ update existing txn (no duplicate)
kind, amount, title, cat, subcategory: subcat, acct, date, notes,
currency,
projectIds: projectIds.length ? projectIds : undefined,
exchangeRate: isForeign ? numRate : undefined,
egpEquivalent: isForeign ? egpEquiv : undefined,
});
}
return (
{ed ? (kind === 'income' ? 'Edit income' : 'Edit expense') : 'New transaction'}
{[
{ k: 'expense', label: 'Expense' },
{ k: 'income', label: 'Income' },
].map(t => (
))}
setAmount(e.target.value)}
style={{
border: 0, background: 'transparent', outline: 'none',
font: 'inherit',
fontSize: 44, fontWeight: 600, letterSpacing: '-0.04em',
textAlign: 'center', width: '100%', color: 'var(--text)',
}}
/>
{CURRENCIES.map(c => (
))}
{/* Exchange rate row (foreign currency only) */}
{isForeign && (
Exchange rate (1 {currency} = ? EGP)
setTxnRate(e.target.value)} placeholder="e.g. 47.50"
style={{ width: '100%', border: '1px solid var(--border)', background: 'var(--surface-2)', borderRadius: 10, padding: '8px 12px', outline: 'none', font: 'inherit', fontSize: 14, color: 'var(--text)' }}/>
{numAmount > 0 && (
EGP equivalent: {nfMoneyFmt(egpEquiv)} EGP
)}
)}
Category
{liveCats.filter(c => kind === 'income' ? c.id === 'income' : c.id !== 'income').map(c => (
))}
{kind !== 'income' && onQuickAddCategory && (
<_InlineAdd ctaLabel="New category" placeholder="Category name…" onSubmit={n => onQuickAddCategory(n, id => setCat(id))}/>
)}
{(subcatOptions.length > 0 || kind === 'income' || (kind !== 'income' && !!onQuickAddSubcategory)) && (
{kind === 'income' ? 'Income Source' : 'Subcategory'} (optional)
{kind === 'income' && !showNewSource && (
)}
{subcatOptions.length > 0 && (
{subcatOptions.map(s => (
))}
)}
{kind === 'income' && subcatOptions.length === 0 && !showNewSource && (
No sources yet — tap ＋ New source to add one.
)}
{kind === 'income' && showNewSource && (
setNewSourceName(e.target.value)}
onKeyDown={e => { if (e.key === 'Enter') handleAddSource(); if (e.key === 'Escape') setShowNewSource(false); }}
placeholder="Source name…"
style={{ flex: 1, border: '1px solid var(--border)', background: 'var(--surface-2)', borderRadius: 8, padding: '6px 10px', font: 'inherit', fontSize: 12.5, outline: 'none', color: 'var(--text)' }}/>
)}
{kind !== 'income' && onQuickAddSubcategory && (
<_InlineAdd ctaLabel="New subcategory" placeholder="Subcategory name…" onSubmit={n => onQuickAddSubcategory(cat, n, id => setSubcat(id))}/>
)}
)}
Account
{liveAccts.map(a => (
))}
{onQuickAddAccount && (
<_InlineAdd ctaLabel="New account" placeholder="Account name…" onSubmit={n => onQuickAddAccount(n, id => setAcct(id))}/>
)}
{(liveProjects.length > 0 || onQuickAddProject) && (
Projects (optional · choose any number)
{liveProjects.length > 0 && (
{liveProjects.map(p => {
const on = projectIds.indexOf(p.id) >= 0;
return (
);
})}
)}
{onQuickAddProject && (
<_ProjectQuickAdd onSubmit={(payload) => onQuickAddProject(payload, id => setProjectIds(ids => ids.indexOf(id) >= 0 ? ids : [...ids, id]))}/>
)}
)}