shadcn.io is not affiliated with official shadcn/ui
Expense Tracker Dashboard Block for Radix UI
Twelve expenses checked against a meal limit and a receipt rule, with Approve and Reject per row, a checkbox bulk bar, pending, approved and rejected totals and a category bar that updates.
Installation
Overview
Review an expense report against the company policy and decide it row by row or in bulk, with this expense tracker for React with Radix UI. A hairline frame with a plus mark on each corner lists twelve expenses with the merchant, category, date, whether there is a receipt and the amount. The policy is worked out from the data: a meal over $75 or an expense with no receipt gets a flag under its merchant. Each pending row has Approve and Reject; a decided row shows its result with Undo. A Checkbox per pending row feeds a bulk bar where "Approve selected" is the one Shine Button. The foot totals pending, approved and rejected money and draws a category bar of everything not rejected. It's built from Checkbox, Badge, Button, Shine Button and Guides. For expense tools and finance back offices.
FAQ
How do I fill it with my expenses?
Edit EXPENSES: each has a merchant, a category, an ISO date, whether it has a receipt and an amount. The flags come from flagsOf, which holds the policy (MEAL_LIMIT and the receipt rule), so a new rule is one more check there. Totals, counts and the category bar are added up from the rows.
How do the checkboxes and the bulk bar work?
Only pending rows have a checkbox. Select pending ticks all of them, Clear unticks, and Approve selected or Reject selected decide every ticked row at once. With nothing ticked the buttons stay in place and answer in the status line, instead of disappearing.
Can a decision be taken back?
Yes. A decided row keeps its place, shows Approved or Rejected and has an Undo that returns it to pending, so rows never jump. Focus moves to the row's next button after each decision.
What stays local, and how do I wire it for real?
Everything: some rows start decided as sample data, and a decision only changes this page and says nothing was sent. To make it real, load the report from your expenses service, send each decision (with the approver and a reason for a rejection) to it, and replace the starting decisions with what the service returns.