shadcn.io is not affiliated with official shadcn/ui
Audit Logs Billing Block for React
Five account changes read as a bill: who made each, the day, and its effect on the invoice as a signed amount and a word, filtered by person, with a net effect line and a real CSV download.
Installation
Overview
Show a billing admin what changed and what it cost, with this audit log for React with Base UI. A hairline frame with a plus mark on each corner lists five changes on ruled rows: a seat added, an add-on removed, a plan upgraded, a payment method updated and a refund processed. Each has a category icon in a tile, a plain sentence about what changed, who made it and on which day, and its effect on the bill under or beside it as a signed amount and a word: "+$12.00 a month, more", "-$29.00 a month, less", "$0.00 once, no charge", "-$49.00 once, less". A Native Select in the header limits the rows to one person. A totals line under the rows adds up only the rows showing and keeps the monthly and the one-time effects apart: "Net effect of these 5 events: +$13.00 a month and -$49.00 once". The action foot holds the only Shine Button, wrapped in a Download Trigger, which saves the rows on screen as a real CSV file. For billing admin screens and any account where a change should show its price.
FAQ
How do I fill it with my own events?
Edit EVENTS at the top of the file: for each, a title, a detail sentence, the actor, an ISO day, an icon, and two amounts in cents, monthly (the change to the monthly bill) and once (a one-time charge or credit). The word next to each amount, the filter's choices and the net line are worked out from those, so nothing is typed twice. A change with both amounts zero reads "once, no charge".
Why are the monthly and one-time effects kept apart?
They are different kinds of money: a seat adds to every invoice from now on, a refund happens once. Adding them would give a number that is true for no month. The net line shows each part only when it is not zero and joins them with "and".
What does the filter do to the page?
It limits the rows, the count ("2 of 5"), the net line and the CSV to one person, and the status line says what is showing. The list sits over an unseen copy of every row, so the panel keeps its height whatever you pick and nothing below the rows jumps.
Is the download real?
Yes. The button is wrapped in a Download Trigger and saves a CSV of the rows on screen (date, event, detail, person, and the two effects in dollars), built in the browser from the typed events. Text with a comma or a quote is quoted so the file opens cleanly. The status line says how many events were saved.
What stays local, and how do I wire it for real?
The events are typed, so nothing is read from an account and nothing is written. To make it real, read the account's billing events from your audit service with the actor, the time and the line items each change added to or removed from the next invoice, and keep the sign rule: the effect of a change is the difference it makes to the next invoice, not the price of the thing.
Is it accessible?
Each row is a list item with a heading, the sentence, the person and a machine-readable date, and the effect is text with a sign and a word, never colour alone. The select has a visible label, the category icons are hidden from assistive technology, and one polite status line speaks the filter and the download. Amounts and names are isolated so they read right in a right-to-left layout.