shadcn.io is not affiliated with official shadcn/ui
Approval Chain Success Block for React
An expense-report confirmation page: the report's number, date, category and total, the approval chain down a rail with a word for where it stands, the attached receipts, and a withdraw button that says so in the chain.
Installation
Overview
Show who has the report next with this expense confirmation page for React with Base UI. It's the page Receiptfern, an expense-report tool, shows after a report is sent for approval: the page's side rails and one band frame it, a success mark and a headline say the report went out, and one framed card of bands holds the report. The first band is its facts (number, date, category and the total, which is the sum of the receipts). The second is split by a divider: at the start, the approval chain down a rail of three people, each with an Avatar of initials, a role and one word for where the report stands (submitted, reviewing, waiting) and a ghost Button to withdraw it; at the end, the two attached receipts as Attachments. The Shine Button opens the report, the only colored control. It's built from Avatar, Attachment, Button, Shine Button and Guides, with a CSS entrance only. For expenses, purchase requests and any approval flow.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was sent: the report, the people and the receipts are typed constants (REPORT, CHAIN, RECEIPTS). The withdraw button only changes the page: the chain's words become Withdrawn and Stopped, a polite status message says nothing was sent, and the same button then reads Submit again and puts the chain back. To wire it, load the report and its approvers from your server, post the withdrawal where flip is, and render the chain's state from the response instead of a flag. Point the Shine Button at the report.
Where does the total come from?
It's worked out, not typed: the total in the first band and the line under the receipts both sum the amounts in RECEIPTS, in whole cents, and are formatted with Intl.NumberFormat inside one left-to-right span. Add a receipt and both change together.
How does the chain say where the report stands without color?
Each step has a glyph and a word: a check and Submitted for you, a filled dot and Reviewing for the person whose turn it is (it's also marked as the current step for assistive technology), a ring and Waiting for the last. After a withdrawal all three show a bar and a word (Withdrawn, then Stopped twice). The rail between the avatars is a plain hairline; nothing is red or green.
Does the page move when I withdraw?
No. Each step reserves its status line and the words are short, so Withdraw report and Submit again swap in the same button, keep focus on it, and nothing shifts. The only motion on the page is the entrance, which reduced motion switches off.
How does it look on a phone?
The facts fold into two rows of two, the chain and the receipts stack in that order, and the Shine Button is pinned to the bottom of the screen while the page scrolls under it, so it is on the first screen. From the small breakpoint up it sits in the flow, and the chain and the receipts sit side by side from the medium breakpoint.
Related
- Pro
Pay Breakdown Success
Payments and refundsA pay-run confirmation page: net pay as the headline figure, a stacked bar of gross pay split into net pay, taxes, benefits and retirement, a legend table, and a toggle between the pay period and the year to date.
- Pro
Time Off Approved Success
People and approvalsA confirmation page for approved leave: a read-only month grid with the days off marked as one run, the allowance as a three-part bar with the days left, and three automations as switches that change the page and say so.
- Pro
Payment Receipt Success
Payments and refundsA full-height payment confirmation split in two: what happened and what comes next on one side, an itemised receipt table with the tax worked out in cents, a copyable receipt number and a text download on the other.
- Pro
A full-height split confirmation for a generated contract: the page drawn in greyscale with clause numbers and two signature blocks, a select that sets who signs first so the numbers follow, and a Request signatures button with a local result.
- Pro
A split confirmation for a sent support ticket: a stub with a copyable ticket number, subject, category, priority and time, a bar with three response-time marks worked out from the sent minute, and three articles to read meanwhile.
- Pro
Benefits Enrollment Cost Success
People and approvalsA confirmation page for chosen benefits: a ledger of three plans with who each covers, what the employer pays and what you pay each pay period, and a twelve-week strip from today to the day cover starts with the enrolment deadline marked.