shadcn.io is not affiliated with official shadcn/ui
Billing Records Account Block for Radix UI
A table of the five billing record types an account has on file, with what each holds, how long it is kept and why (tax law, fraud prevention or yours to delete), and a Delete with a confirm on the two you own.
Installation
Overview
Tell customers what billing data you keep about them and why, with this billing records section for React with Radix UI. A hairline frame with a plus mark on each corner holds a table of five record types (invoices, tax IDs, card tokens, payment attempts and billing notes): what is in each, how long it is kept, and the reason in an icon and a word, a lock for tax law or fraud prevention and a bin for "yours to delete". The header of the table counts how many types must be kept. Only the two records the account owns have a Delete, which opens an Alert Dialog that says what goes; the kept ones say they can't be deleted, and once deleted a record shows as such with a Restore. On a phone each record is a card. It's built from Alert Dialog, Badge, Button and Guides, with a CSS entrance only. For the privacy or billing page of any app that keeps tax records.
FAQ
How do I describe my own records?
Edit RECORDS. Each has a name, a sentence for what it holds, a short count such as "14 invoices", the years it is kept (0 when only the owner decides) and a why of tax, fraud or none. The count in the header ("3 of 5 must be kept") is worked out from the why of each row, so it never needs typing. A row with a why of none gets the Delete; every other row says it is kept.
What stays local, and how do I wire a real delete?
Deleting changes this page only: the row says Deleted, the status line says nothing was sent, and Restore brings it back. In a real app the dialog's action would call your server, which must also delete the data held by your payment processor (for card tokens, its API removes the saved payment method). Keep the records you owe by law out of any delete route, and enforce that on the server, not only by hiding the button.
How does the confirm work from the keyboard?
Delete opens a modal alert dialog with its first focus on Cancel, Escape closes it and focus returns to Delete. Confirming closes it and moves focus to the row's Restore button, since Delete has gone, and the polite status line says what happened. The confirm's text is mixed toward the foreground so it passes contrast in both themes.
Why are the reasons words and icons, not colours?
A lock and the words "Tax law" or "Fraud prevention" tell the reader a record is held for a reason, and a bin with "Yours to delete" says the opposite, without relying on colour. No row is tinted and no status is red or green. Add a reason by extending the Why type and whyWord.