shadcn.io is not affiliated with official shadcn/ui
Budget Tracker Table Block for Vue
A production budget table in three departments with a pace tick on every spent bar, group rows with subtotals, a total row, and a toggle that adds money already promised and re-derives the bars, the remaining column and the flags.
Installation
Overview
Show whether the money is going faster than the calendar, with this budget tracker table for Vue with Ark UI. Seven lines of a film production's budget sit in a native table under three department rows that carry their own subtotals, with a total row at the foot. Each line has its budget, a bar of what it has spent, and what remains. The bar carries a tick where the production period stands at the as-of date (61 percent gone), and the words under it say how far the line is from that tick: "19 pts over pace", "On pace", "Over budget by $1,000", with an arrow or a check shape and never a colour. A Toggle Group at the header's end switches between Spent and Spent and committed; the second adds a lighter segment for money already promised and re-derives every bar, remaining amount and flag. The status line counts the lines that are over pace. It's built from Toggle Group and Guides, with a CSS entrance only. For film and event budgets, project cost tracking, and any plan where time and money should move together.
FAQ
What is the pace tick?
It stands at the share of the production period that has passed at the as-of date, worked out from the start date, the end date and AS_OF in the file (61 percent here). A line is "over pace" when its bar is more than two points past the tick, "under pace" when it is more than two points short, and "On pace" in between. An amount over the line's own budget says "Over budget by" instead.
What does Spent and committed add?
Committed is money promised but not yet paid, such as signed contracts and purchase orders. The toggle adds it to spent as a lighter segment after the full-weight bar, and the remaining column, the department subtotals, the total and every flag are worked out again from the sum. Spent alone is what has actually left the account.
How do the department rows work?
Each department is its own tbody whose first row holds the subtotal of its lines, so the figures stay in their columns and the rows never need a spanning cell. The total row at the foot uses the same bar and words for the whole production. Everything is summed from the typed lines.
What changes on a phone?
All four columns stay. The money is set in a smaller size, the percentages give the columns room, "Remaining" shortens to "Left", and the words under each bar wrap inside a reserved space so switching the toggle never changes a row's height.
Is it accessible?
The table has a caption, column heads, row heads and department headings with a row-group scope. The toggle group is named "What counts as spent", the bars are decoration and the same facts are in the words beside them, and one polite status line reports how many lines are over pace after each change.
What stays local, and how do I wire it for real?
Everything: the seven lines, their spent and committed amounts and the period are typed at the top of the file, and nothing is stored or sent. To wire it up, replace LINES with your ledger's totals per line, set START, END and AS_OF to your period, and keep the helpers that derive the percentages, the flags and the sums.