Project 02Management accounting
Budget vs.
ActualA treasurer's variance dashboard: phased budgets, flexible-budget and activity variances, commitments, and commentary written from the numbers.
As VP Finance of a student organization I owned a budget end to end: setting the lines, phasing them across the year, approving reimbursements, and explaining to a twenty-person executive where the money went. This dashboard is that job as a tool. It separates the variance caused by doing more than planned from the variance caused by paying more than planned, tracks approved-but-unpaid claims, and drafts the commentary a treasurer would present.
- Inputs
- Phased budget, transaction log with status, events held (sample included; CSV import supported)
- Variances
- Static, flexible-budget, and the activity / spending split for event-driven lines
- Outputs
- KPI strip, three charts, variance table with drill-down, reimbursement log, auto-written commentary, CSV export
- Sample data
- Forest City Seniors Connect (fictional club), Sep 2025 – Apr 2026
- Privacy
- Static page, no server. Everything is computed in your browser; nothing is sent anywhere.
DashboardExpenses
Forest City Seniors Connect
Sample data · all figures inventedBudget: one row per line with Kind = expense or revenue, Type = fixed or per-event (with a Rate), and one column per month (YYYY-MM). Add a row named Planned events with Type = events. Transactions: Status is Paid, Approved, Pending or Rejected; Approved counts as spent, Pending and Rejected don't. If no events file is given, events held are counted from the distinct Event values in the transactions.
Budget vs. actual by line
Cumulative spend against phased budget
Variance by line
ReimbursementsClaims log
Volunteer expense claims
Much of a club's spending happens on a volunteer's own card first. A claim is reviewed against the expense policy and the budget line, approved, and then paid. Approved claims count as spent the moment they're approved, even before the money moves, which is why the dashboard tracks "committed" separately from cash.
ActivityEvents held
Planned versus held
Three of the eight budget lines are driven by how many events the club runs. When the executive added an event, those lines were always going to go over the static budget. The flexible budget re-prices them at the approved per-event rate for the number of events actually held, so the remaining variance is about spending, not activity.
The accountingWhy it works this way
Static budget, flexible budget
The static budget is the plan the executive approved in September: twelve events at $80 of refreshments each is $960. The flexible budget re-computes the plan for what actually happened: thirteen events at the same $80 is $1,040. Comparing actual spend to the static budget tells you whether you're over the plan. Comparing it to the flexible budget tells you whether you overspent given what you did. Both are true at once, and a good report shows both.
Favourable and unfavourable
For an expense line, spending less than budget is favourable (F) and more is unfavourable (U). For revenue it's the reverse. The dashboard uses that convention throughout, shows the sign explicitly, and never treats "favourable" as "good": an unspent contingency is favourable on paper and meaningless in practice, and an underspent marketing line may just mean the recruitment posters never went up.
Why the bottom line can lie
In the sample year the club finishes about $59 under its $3,600 expense budget, which sounds like a well-run year. Look at the lines and the picture changes: the $250 contingency was never drawn, so operating lines are actually about $190 over. Food and supplies account for most of it, partly because of the extra event and partly because per-event costs crept up. A treasurer who reports only the total misses the conversation the executive should be having.
Phasing
A budget that is only an annual number can't be monitored until the year is over. Each line here is spread across the months it's expected to be spent: transit and food follow the events calendar, the volunteer dinner sits in April, the club-fair printing in September. Year-to-date comparisons then mean something, and the cumulative chart shows where spend pulled ahead of plan and when.
Committed, not yet paid
A reimbursement approved at Monday's meeting is a real obligation even if the e-transfer goes out Friday. Counting it as spent on approval keeps the remaining-budget figure honest; tracking it separately keeps the bank balance honest too. Claims still under review are shown but not counted, and a rejected claim stays in the log so the decision is traceable.
Thresholds
Not every variance deserves a sentence. The flags use two tests together, a percentage and a dollar floor, so a $3 variance on a $5 line and a 1% variance on a $1,000 line are both left alone. The defaults are 10% and $25, which is roughly the scale at which a student club's executive would ask a question.
How it's builtNotes
One self-contained HTML file, no libraries. The charts are hand-drawn SVG: two-series bars with the budget and actual colours checked for colour-vision deficiency, a diverging variance chart that uses text labels as well as colour, and a cumulative line chart with a hover tooltip. Money is carried in integer cents, the variance decomposition is recomputed from the transaction log on every control change, and the commentary is generated from the same figures the table shows so the two can't disagree. The sample can be downloaded as three CSV files, and the import accepts the same layout.
- Stack
- HTML, CSS, vanilla JavaScript, inline SVG
- Dependencies
- None (fonts from Google Fonts)
- Data handling
- Entirely client-side; nothing leaves the page
- Palette
- Budget and actual colours checked for colour-vision deficiency and 3:1 contrast on this background
- Sample
- Forest City Seniors Connect, a fictional student club. All names, vendors and figures are invented.