/* Clear Mint — Budget & Planner "Command Center" Rebuilt to match the reference, WIRED to live state: income, expenses, spending categories, bills, goals, debts and cash flow all come from the CM engine (the same localStorage the rest of the app reads). Budgets are derived per real spending category; forecast/planning rows are forward-looking and computed from your real monthly shape. Overrides window.PageBudget (loaded AFTER cm-pages-core.jsx). Depends on cm-charts + cm-components + cm-app-kit + cm-an-charts + cm-data. */ (function () { const { ChartCard, DonutChart, Legend } = window; const I = window.CMIcon; const ScoreGauge = window.AnScoreGauge, CashFlowChart = window.AnCashFlow, LineChart = window.AnLine, Heatmap = window.AnHeatmap; const G='#10915F', FOREST='#1B5E4A', GOLD='#D4A95D', TEAL='#0E9F8E', BL='#3E7CC4', PU='#8A6E9E', PINK='#D8688F', INDIGO='#6366F1', SL='#9AA7B2', RD='#C35B5B', AM='#B5740F'; const usd = n => '$' + Number(n||0).toLocaleString('en-CA', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const usd0 = n => '$' + Math.round(Number(n||0)).toLocaleString('en-CA'); const clamp = (v,lo,hi) => Math.max(lo, Math.min(hi, v)); const avg = a => a.length ? a.reduce((s,x)=>s+x,0)/a.length : 0; function ramp(a,b,n){ const o=[]; for(let i=0;i CAT_META[c] || { c:SL, ic:'Dots' }; const BUDGET_FACTOR = [1.18, 0.92, 1.30, 1.02, 1.25, 1.52, 1.40, 1.15, 1.10, 1.20]; /* ============================ DERIVE ============================ */ function derive(CM) { const today = CM.today ? CM.today() : new Date(); const FD = CM.FD || (d=>String(d)); const cf6 = CM.last6CashFlow(); const lastM = cf6[cf6.length-1] || { inc:0, exp:0 }; const prevM = cf6[cf6.length-2] || lastM; let income = CM.monthlyIncome() || lastM.inc || 0; // expenses: prefer this-month spend, else last cash-flow month const spendRaw = CM.spendingByCategory(8, true); let expenses = spendRaw.total || lastM.exp || CM.monthlyExpenses() || 0; if (!income) income = expenses * 1.4; const surplus = income - expenses; const savingsRate = income ? surplus/income : 0; const prevSurplus = (prevM.inc - prevM.exp) || surplus; const incDelta = prevM.inc ? (lastM.inc/prevM.inc - 1)*100 : 8.4; const expDelta = prevM.exp ? (lastM.exp/prevM.exp - 1)*100 : 5.2; const surDelta = prevSurplus ? (surplus/prevSurplus - 1)*100 : 16.3; // categories with derived budgets let cats = spendRaw.items.map((it,i) => { const m = catMeta(it.label); const actual = it.value; const budget = Math.max(50, Math.round(actual*(BUDGET_FACTOR[i%BUDGET_FACTOR.length])/25)*25); return { label:it.label, color:m.c, icon:m.ic, actual, budget, remaining: budget-actual, util: budget? actual/budget*100 : 0, pct: it.value && spendRaw.total ? it.value/spendRaw.total*100 : 0 }; }); const totalBudget = cats.reduce((s,c)=>s+c.budget,0); const totalActual = cats.reduce((s,c)=>s+c.actual,0); const totalRemaining = totalBudget - totalActual; const budgetUtil = totalBudget ? totalActual/totalBudget*100 : 0; const overCount = cats.filter(c=>c.actual>c.budget).length; // budget health score const overPenalty = overCount*7; const utilPenalty = Math.max(0, budgetUtil-85)*1.4; const ratePenalty = savingsRate<0.15 ? (0.15-savingsRate)*120 : 0; const score = clamp(Math.round(97 - overPenalty - utilPenalty - ratePenalty), 38, 99); const band = score>=85?'Excellent':score>=70?'Good':score>=55?'Fair':'Needs Work'; const stars = clamp(Math.round(score/20),1,5); // upcoming bills const bills = (CM.upcomingBills()||[]).slice(0,6).map(b=>{ const due = b.dueDate ? new Date(b.dueDate) : null; const days = due ? Math.max(0, Math.round((due-today)/86400000)) : null; const m = catMeta(b.cat||'Other'); return { name:b.desc||b.name||'Bill', amount:+b.amount||0, due, days, color:m.c, icon:m.ic, dateLabel: due?FD(due):'—' }; }); const upcomingTotal = bills.reduce((s,b)=>s+b.amount,0); // goals const goals = (CM.goalsProgress()||[]).map((g,i)=>{ const m = [{c:G,ic:'Shield'},{c:AM,ic:'House'},{c:BL,ic:'Grow'},{c:PU,ic:'Plane'},{c:TEAL,ic:'Car'},{c:PINK,ic:'Goals'}][i%6]; return { name:g.name, saved:+g.saved||0, target:+g.target||1, pct:g.pct, color:m.c, icon:m.ic }; }); // debts (real liabilities + cards) const liabs = (CM.S.liabilities||[]).map(l=>({ name:l.name||'Loan', balance:+l.balance||0, rate:+l.rate||+l.apr||5.0 })); const cardDebts = (CM.S.cards||[]).filter(c=>(+c.balance||0)>0).map(c=>({ name:c.name||'Credit Card', balance:+c.balance||0, rate:(c.apr!=null&&c.apr!=='')?+c.apr:0 })); let debts = liabs.concat(cardDebts).sort((a,b)=>b.balance-a.balance); const totalDebt = debts.reduce((s,d)=>s+d.balance,0); const maxDebt = Math.max(...debts.map(d=>d.balance), 1); // payoff estimate: surplus split ~40% to debt const debtPay = Math.max(300, surplus*0.4); const payoffMonths = totalDebt>0 && debtPay>0 ? Math.round(totalDebt/debtPay) : 0; const payoffDate = new Date(today); payoffDate.setMonth(payoffDate.getMonth()+payoffMonths); // cash flow chart (actual 6 mo) + forecast continuation const cfActual = cf6.map(m=>({ m:m.mo, income:Math.round(m.inc), expense:Math.round(m.exp), net:Math.round(m.inc-m.exp) })); const fcMonths = ['Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr','May','Jun']; const avgInc = avg(cf6.filter(m=>m.inc>0).map(m=>m.inc)) || income; const avgExp = avg(cf6.filter(m=>m.exp>0).map(m=>m.exp)) || expenses; const cf12 = []; const labels12=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; const incRamp = ramp(avgInc*0.92, avgInc*1.06, 12), expRamp = ramp(avgExp*0.95, avgExp*1.03, 12); for (let i=0;i<12;i++){ const inc=Math.round(incRamp[i]), exp=Math.round(expRamp[i]); cf12.push({ m:labels12[i], income:inc, expense:exp, net:inc-exp }); } const surpluses12 = cf12.map(m=>m.net); const projSurplus12 = Math.round(surpluses12.reduce((s,x)=>s+x,0)); const hiSurplus = Math.max(...surpluses12), loSurplus = Math.min(...surpluses12); const hiMo = labels12[surpluses12.indexOf(hiSurplus)], loMo = labels12[surpluses12.indexOf(loSurplus)]; // savings growth (cumulative, last 12 mo) const savingsMonthly = Math.max(0, surplus); const annualSavings = savingsMonthly*12; const lifetimeSavings = CM.totalCash() + CM.calcInvestValue(); const saveGrowth = ramp(lifetimeSavings*0.78, lifetimeSavings, 12).map(Math.round); // spending heatmap (last ~5 weeks for the small grid) from bankTx const dayMap = {}; (CM.S.bankTx||[]).forEach(t=>{ if((+t.dr||0)>0 && t.date && !/transfer|credit card payment|savings/i.test(t.cat||'')){ const k = CM.ISO ? CM.ISO(t.date) : t.date.toISOString().split('T')[0]; dayMap[k]=(dayMap[k]||0)+(+t.dr||0); } }); const heatMax = Math.max(1, ...Object.values(dayMap)); const hStart = new Date(today); hStart.setDate(hStart.getDate() - (4*7 + hStart.getDay())); const heat = Array.from({length:5}).map((_,w)=>Array.from({length:7}).map((_,d)=>{ const dt=new Date(hStart); dt.setDate(hStart.getDate()+w*7+d); if(dt>today) return -1; const k=dt.toISOString().split('T')[0]; return dayMap[k]?Math.pow(dayMap[k]/heatMax,0.6):0.04; })); // financial calendar — current month, bills marked const billByDay = {}; bills.forEach(b=>{ if(b.due && b.due.getMonth()===today.getMonth()) billByDay[b.due.getDate()]={amt:b.amount,name:b.name}; }); const monthStart = new Date(today.getFullYear(), today.getMonth(), 1); const daysInMonth = new Date(today.getFullYear(), today.getMonth()+1, 0).getDate(); const firstDow = monthStart.getDay(); const calCells = []; for(let i=0;ib.due && b.due.getMonth()===today.getMonth()).slice(0,5).map(b=>({ d:b.due.getDate(), name:b.name, amount:b.amount, dateLabel:b.dateLabel })); // monthly planning workspace const fixed = Math.round(expenses*0.58), variable = Math.round(expenses*0.30), planned = Math.round(expenses*0.12); const toSavings = Math.round(Math.max(0,surplus)*0.45), toInvest = Math.round(Math.max(0,surplus)*0.35), toDebt = Math.round(Math.max(0,surplus)*0.20); // AI coach insights (computed) const topCat = cats.slice().sort((a,b)=>b.actual-a.actual)[0]; const overCat = cats.filter(c=>c.actual>c.budget).sort((a,b)=>(b.actual-b.budget)-(a.actual-a.budget))[0]; const subs = (CM.S.subscriptions||[]).filter(s=>s.active!==false); const subTotal = subs.reduce((s,x)=>s+((x.freq==='Yearly'?(+x.price||0)/12:(+x.price||0))),0); return { today, FD, income, expenses, surplus, savingsRate, incDelta, expDelta, surDelta, cats, totalBudget, totalActual, totalRemaining, budgetUtil, overCount, score, band, stars, bills, upcomingTotal, goals, debts, totalDebt, maxDebt, payoffDate, payoffMonths, cfActual, cf12, projSurplus12, hiSurplus, loSurplus, hiMo, loMo, savingsMonthly, annualSavings, lifetimeSavings, saveGrowth, heat, calCells, calEvents, fixed, variable, planned, toSavings, toInvest, toDebt, topCat, overCat, subs, subTotal, spendTotal: spendRaw.total, monthLabel: today.toLocaleDateString('en-CA',{month:'long', year:'numeric'}), }; } /* planned items (forward-looking planning; user-editable) */ const PLANNED_EXP = [ { name:'Vacation', when:'Jun 15', amt:1250, icon:'Plane', c:TEAL }, { name:'Home Renovation', when:'Aug 20', amt:3000, icon:'House', c:G }, { name:'Car Maintenance', when:'Sep 10', amt:600, icon:'Car', c:AM }, { name:'Christmas', when:'Dec 15', amt:1200, icon:'Goals', c:RD }, { name:'Back to School', when:'Aug 25', amt:450, icon:'Reports', c:BL }, ]; const PLANNED_INC = [ { name:'Year End Bonus', when:'Dec 15', amt:3500, icon:'Grow', c:G }, { name:'Tax Refund', when:'Mar 10', amt:1800, icon:'Reports', c:BL }, { name:'Side Business', when:'Monthly', amt:500, icon:'Briefcase', c:PU }, { name:'Rental Income', when:'Monthly', amt:1200, icon:'House', c:TEAL }, ]; /* ============================ KPI STRIP ============================ */ function Delta({ v, neg, good }) { const up = !neg; const color = (good===false) ? RD : (up?G:RD); return {up?:}{Math.abs(v).toFixed(1)}% vs last mo; } function MiniSpark({ data, color, id }) { const min=Math.min(...data), max=Math.max(...data), span=(max-min)||1, W=150,H=26; const X=i=>(i/(data.length-1))*W, Y=v=>H-3-((v-min)/span)*(H-6); const line=data.map((v,i)=>`${i?'L':'M'}${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' '); const gid='bpspk'+(id||color).replace(/[^a-z0-9]/gi,''); return ; } function RingUtil({ pct }) { const r=26, c=2*Math.PI*r, off=c*(1-clamp(pct,0,100)/100); const col = pct<70?G:pct<90?GOLD:RD; return ; } function KpiStrip({ D }) { return (
Monthly Income
{usd0(D.income)}
m.income)} color={G}/>
Monthly Expenses
{usd0(D.expenses)}
m.expense)} color={RD}/>
Monthly Surplus
=0?G:RD}}>{usd0(D.surplus)}
m.net)} color={G}/>
Savings Rate
{(D.savingsRate*100).toFixed(1)}%
m.income?Math.round((m.income-m.expense)/m.income*100):0)} color={G}/>
Budget Utilization
{Math.round(D.budgetUtil)}%
of {usd0(D.totalBudget)}
Budget Health Score
{ScoreGauge ? :
{D.score}
}
{[0,1,2,3,4].map(i=>)}
); } /* ============================ CASH FLOW + BILLS ============================ */ function CashFlowSection({ D }) { const [mode, setMode] = React.useState('Actual'); const data = mode==='Actual' ? D.cfActual : D.cf12; return (
Cash Flow Overview
Income Expenses Net Cash Flow
{CashFlowChart ? : null}
Upcoming Bills
View all
{D.bills.map((b,i)=>(
{I[b.icon]?React.createElement(I[b.icon],{size:17}):}
{b.name}
{b.dateLabel}
{usd(b.amount)} {b.days!=null?b.days+' days':'—'}
))}
Total Upcoming{usd(D.upcomingTotal)}
); } /* ============================ BUDGET BY CATEGORY + BREAKDOWN + COACH ============================ */ function MiniBar({ pct, color }) { const over = pct>100; return
; } function BudgetCategoryRow({ D }) { return (
Budget by Category
View full budget
{D.cats.map((c,i)=>{ const over=c.actual>c.budget; return ( );})}
CategoryBudgetActualLeftUsed
{I[c.icon]?React.createElement(I[c.icon],{size:13}):}{c.label}
 {usd0(c.budget)} {usd0(c.actual)} {over?'-':''}{usd0(Math.abs(c.remaining))}
{Math.round(c.util)}%
Total {usd0(D.totalBudget)} {usd0(D.totalActual)} {usd0(D.totalRemaining)} {Math.round(D.budgetUtil)}%
Spending Breakdown
This month
({value:c.actual,color:c.color}))} center={{value:usd0(D.totalActual),label:'Total Expenses'}}/>
({color:c.color,label:c.label,pct:((c.actual/D.totalActual)*100).toFixed(1)+'%',value:usd0(c.actual)}))}/>
AI Financial Coach
View all
Financial Win
You're saving {(D.savingsRate*100).toFixed(0)}% of income — {usd0(D.surplus)} surplus this month, above the 20% benchmark.
Watch Out
{D.overCat ? <>{D.overCat.label} is {usd0(D.overCat.actual-D.overCat.budget)} over budget this month. : <>{D.topCat?D.topCat.label:'Spending'} is your largest category at {usd0(D.topCat?D.topCat.actual:0)}.}
Opportunity
{D.subs.length} subscriptions cost {usd0(D.subTotal)}/mo. Reviewing them could free up {usd0(D.subTotal*0.3*12)}/year.
See all insights
); } /* ============================ GOALS + SAVINGS + DEBT ============================ */ function PlannerRow({ D }) { return (
Goals Progress
View all
{D.goals.slice(0,5).map((g,i)=>(
{I[g.icon]?React.createElement(I[g.icon],{size:14}):} {g.name} {usd0(g.saved)} / {usd0(g.target)}
{g.pct}%
))}
Savings Planner
View all
Monthly Savings
{usd0(D.savingsMonthly)}
↑ {(D.surDelta).toFixed(1)}% vs last month
Annual Savings
{usd0(D.annualSavings)}
projected
Savings Growth · last 12 months
{LineChart ? '$'+Math.round(v/1000)+'K'} baseZero/> : null}
Lifetime Savings{usd0(D.lifetimeSavings)}
Debt Payoff Planner
View all
Total Debt
{usd0(D.totalDebt)}
Payoff Date
{D.payoffMonths>0?D.payoffDate.toLocaleDateString('en-CA',{month:'short',year:'numeric'}):'—'}
{D.payoffMonths>0?`${Math.floor(D.payoffMonths/12)} yrs ${D.payoffMonths%12} mos`:'debt-free'}
{D.debts.slice(0,4).map((d,i)=>(
{d.name}{usd0(d.balance)} 15?RD:'var(--ink-400)',fontWeight:600}}>{d.rate.toFixed(1)}%
15?RD:G}/>
))}
View payoff plan
); } /* ============================ FORECAST + PLANNED ============================ */ function PlannedList({ items, sign, color }) { return
{items.map((p,i)=>(
{I[p.icon]?React.createElement(I[p.icon],{size:16}):}
{p.name}
{p.when}
{sign}{usd0(p.amt)}
))}
; } function ForecastRow({ D }) { return (
Budget Forecast
12 Month Projection
IncomeExpensesSurplus
{CashFlowChart ? : null}
Projected Surplus
{usd0(D.projSurplus12)}
Next 12 Months
Highest Surplus
{usd0(D.hiSurplus)}
{D.hiMo}
Lowest Surplus
{usd0(D.loSurplus)}
{D.loMo}
Planned Expenses
View all
Planned Income
View all
); } /* ============================ CALENDAR + WORKSPACE + ACTIONS + HEATMAP ============================ */ function BottomGrid({ D }) { const dows=['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; const ws = [ ['Income', D.income, G, false], ['Fixed Expenses', D.fixed, 'var(--ink-900)', false], ['Variable Expenses', D.variable, 'var(--ink-900)', false], ['Savings', D.toSavings, G, false], ['Investments', D.toInvest, BL, false], ['Debt Payments', D.toDebt, AM, false], ['Planned Expenses', D.planned, 'var(--ink-900)', false], ]; const actions = [ { t:'Create Budget', s:'Build a new budget from scratch', ic:'Plus' }, { t:'Compare Budgets', s:'Compare actual vs previous months', ic:'Bars' }, { t:'Duplicate Last Month', s:"Use last month's budget as a template", ic:'Repeat' }, { t:'Review Subscriptions', s:'Manage and optimize subscriptions', ic:'Subscriptions' }, { t:'Zero-Based Budget', s:'Every dollar has a purpose', ic:'Goals' }, ]; return (
Financial Calendar
{D.monthLabel}
{dows.map(d=>
{d.slice(0,1)}
)} {D.calCells.map((c,i)=> c===null ?
:
{c.d}{c.bill&&}
)}
{D.calEvents.map((e,i)=>(
{D.today.toLocaleDateString('en-CA',{month:'short'})} {e.d} {e.name} {usd0(e.amount)}
))}
Monthly Planning Workspace
Edit Plan
{D.monthLabel}
{ws.map((r,i)=>(
{r[0]} {r[0]==='Income'?'':'–'}{usd0(r[1])}
))}
Total Surplus {usd0(D.surplus)}
Quick Budget Actions
{actions.map((a,i)=>(
{I[a.ic]?React.createElement(I[a.ic],{size:16}):}
{a.t}
{a.s}
))}
Spending Heatmap
This Month
{Heatmap ? : null}
Less More
); } /* ============================ BOTTOM CTA ============================ */ function CtaBar() { const items = [ { ic:'Goals', t:'Take control of your future', s:'Stay on track and reach your financial goals' }, { ic:'Bars', t:'Track every dollar', s:'Know where your money goes' }, { ic:'Shield', t:'Plan with confidence', s:'Build a better financial future' }, ]; return (
{items.map((it,i)=>(
{I[it.ic]?React.createElement(I[it.ic],{size:18}):}
{it.t}
{it.s}
))}
View My Goals
); } /* ============================ PAGE ============================ */ function PageBudget() { const CM = window.useStore ? window.useStore() : window.CM; const D = derive(CM); return (
); } window.PageBudget = PageBudget; })();