shadcn.io is not affiliated with official shadcn/ui
Order History Account Block for React
The orders of an account and the personal details each one still holds: a status filter, a search, rows that open to items and masked details, and an alert dialog that erases the details but keeps the order.
Installation
Overview
Show people their orders and what personal data each one keeps, with this order history panel for React with Base UI. A toolbar holds a Toggle Group that filters by status, All, On its way, Delivered and Cancelled, each with its count, and a search over order numbers and items. Each order is a row with its number in mono, the day, a status as a dot and a word, and the total, worked out from the items in it. A row opens to the items and a Personal details on this order block that shows the name, address and phone masked. Once an order is delivered, Erase personal details opens an Alert Dialog that says the details can't come back while the items, the date and the total stay for tax records; after it, the three lines read Erased. The sentence over the panel counts the orders and how many still hold an address. An unseen copy of every order keeps the panel's height when the filter or the search empties it, and an Empty state names the way back. It's built from Toggle Group, Alert Dialog, Input, Empty, Button and Guides, with a CSS entrance only. For account pages, shops and any app that holds addresses and has to say what it keeps.
FAQ
How do I fill it with real orders?
Edit ORDERS. Each has an id, the ISO day it was placed, a status (shipping, delivered or cancelled), its lines (a title, a quantity and the price of one in pence) and the masked lines to show. The total is the sum of the lines, never typed, and the counts on the filter and in the sentence over the panel come from the same list. An order whose erased day is set already has its details wiped. Mask the details on your server before they reach the page: this block never needs the real ones.
What stays local, and how do I make erasing real?
Everything: Erase details marks the order as erased in this page's state and the status line says so; nothing is sent, and Start over brings the sample back, which a real erasure never would. To wire it, call your erasure endpoint from erase, mark the order only when it answers and show a failure in the same status line. Keep the order, its items and its totals on the server for as long as tax rules ask.
When can an order be erased?
After it is delivered, or when it was cancelled. An order still on its way keeps its details because the courier needs them, and its block says so instead of showing a disabled button. The alert dialog is the only confirmation, since erasing can't be undone: focus starts on Keep them, Escape closes it and focus returns to the Erase button, and confirming moves focus to the order's row.
Does the panel move when I filter or search?
No. The rows sit over an unseen copy of every order, folded, so the list keeps the height of the full set whatever the filter or search hides. When nothing matches, an empty state fills the space with a button that clears both. Opening a row is the one thing that makes the panel taller, and it is your own action.
How does it look on a phone?
The columns fold into the first cell: the order number, then the day and the total under it, with the status beside it. A row opens to the items and the details one under the other, and the foot stacks the status line over Start over.
Is it accessible?
The orders are a real list and each row's button says how many items the order holds and whether it is open. Status is a word as well as a dot, the total and the masked details read start to end in a right-to-left page, and the erase button is named for its order since every row shares the same words. The status line is a polite live region present from the start.