shadcn.io is not affiliated with official shadcn/ui
Expense Tracker Timeline Block for React Aria
Eight expenses over three weeks on a rail under week heads with running totals, a Receipt toggle on every row, and a band that recounts the missing receipts and what they add up to as you press.
Installation
Overview
See which expenses still need a receipt with this expense-tracker timeline for React with React Aria. It is written for Spendrail, a fictional expense-report tool. A hairline frame with a plus mark on each corner holds the total to report and the receipts attached, a band that reads "Missing receipts: 3, €182.40", and eight expenses on a rail under three week heads, newest first. Each week head carries the week's total, how many receipts it is missing and the running total so far. Each row is a merchant, a category (an icon and a word), a date and an amount, with a "Receipt" toggle that flips it between attached and missing; the band, the week heads and the status line are all worked out from those toggles. Nothing is submitted. It is built from Guides with native toggle buttons (aria-pressed) and CSS for the rail. For expense reports, claims and reimbursement screens. The merchants and amounts are example data.
FAQ
How do I change the expenses?
Edit EXPENSES at the top of the file: an id, a merchant, a category, the amount in integer cents, an ISO day on and the Monday of its week. START lists the ids whose receipt is attached on load, and WEEKS orders the groups.
How are the totals worked out?
A week's total is the sum of its rows' cents, the running total is the sum of every row up to and including that week, and the missing-receipts figure is the sum of the rows whose id is not in the attached list. They are recomputed on every press, so they cannot drift.
What stays in the page?
The attached receipts only. Nothing is uploaded, saved or submitted. To make it real, let the toggle open your file upload and store the id of the receipt, then derive the same list from your records.
Is it accessible?
Each toggle is a button with aria-pressed, named "Receipt for" and the merchant. Attached and missing are written in the band and in the week heads, not only in the fill of the node and the button. The foot is a polite status line that says which receipt changed and the new total missing.