diff --git a/src/app/page.tsx b/src/app/page.tsx index 7d3178c..9b2e792 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -422,8 +422,8 @@ export default function BudgetDashboard() { const handleTransactionEdit = (updated: Transaction) => { setTransactions(prev => { const next = prev.map(t => t.id === updated.id ? updated : t); - setEnvelopes(calculateEnvelopeSpending(envelopes, next)); - setAccounts(calculateAccountBalances(accounts, next)); + setEnvelopes(e => calculateEnvelopeSpending(e, next)); + setAccounts(a => calculateAccountBalances(a, next)); return next; }); }; @@ -431,8 +431,8 @@ export default function BudgetDashboard() { const handleTransactionDelete = (id: string) => { setTransactions(prev => { const next = prev.filter(t => t.id !== id); - setEnvelopes(calculateEnvelopeSpending(envelopes, next)); - setAccounts(calculateAccountBalances(accounts, next)); + setEnvelopes(e => calculateEnvelopeSpending(e, next)); + setAccounts(a => calculateAccountBalances(a, next)); return next; }); }; @@ -928,9 +928,32 @@ export default function BudgetDashboard() { const incomeAlloc = transactions.filter(t => t.envelopeId === e.id && t.amount > 0).reduce((s, t) => s + t.amount, 0); return e.allocated + incomeAlloc > 0 && e.spent > e.allocated + incomeAlloc; }); + + // Available to budget = liquid assets (checking + savings) minus total envelope allocations + const liquidBalance = accounts + .filter(a => a.type === 'checking' || a.type === 'savings') + .reduce((s, a) => s + a.balance, 0); + const totalAllocated = envelopes.reduce((s, e) => s + e.allocated, 0); + const availableToBudget = liquidBalance - totalAllocated; + return (
Available to Budget
+= 0 ? 'text-green-700' : 'text-red-700'}`}> + ${Math.abs(availableToBudget).toFixed(2)}{availableToBudget < 0 ? ' over' : ''} +
++ ${liquidBalance.toFixed(2)} in checking & savings − ${totalAllocated.toFixed(2)} allocated to envelopes +
++ Assigning income to an envelope increases its available balance and reduces "Available to Budget". +
+ )}