shadcn.io is not affiliated with official shadcn/ui
Payout History Billing Block for Radix UI
A list of payouts that each open into the sales, refunds and fees they are made of, with a check that the lines add up to the deposit, a status word and a Download CSV button that saves the open payout's lines as a real file.
Installation
Overview
Show sellers what each payout paid, with this payout history section for React with Radix UI. Four payouts are rows with their number, date, a status word with a dot (arriving or paid), the bank as its last four digits and the amount. Each row opens into a small table of the sales, refunds and fees that make it up, each with its date and amount, and a deposit total; one payout is open at a time, and the latest is open when the page loads. A status line under the list checks the sum: "Lines add up to $1,240.50, matching your deposit." The Shine Button, "Download CSV", sits in the header inside a Download Trigger and saves a real file with the open payout's lines, or every payout's when none is open. Guides draw the frame. For marketplaces, co-ops and any platform that pays sellers.
FAQ
How do I fill it with my payouts?
Edit PAYOUTS. Each has an id, an ISO date, a deposit in cents, a bank label (never a full account number), a status and its lines; each line has a signed cents amount (sales positive, refunds and fees negative), a kind, a label and a date. Amounts are integers in cents, so the sums are exact.
What does the check line do?
It adds the open payout's lines and compares the total with the deposit. If they match it says so; if they do not it says by how much they are off, so a mismatch is visible instead of hidden. It is the page's one live region and it updates when you open or close a payout.
Is the CSV real?
Yes. Download CSV builds a file in the browser with one row per line (payout, date sent, line date, type, description and amount), quotes any field with a comma or a quotation mark and prefixes a quote to text that starts with =, +, - or @ so a spreadsheet never reads it as a formula. The file name carries the payout number. Nothing is uploaded.
How do the rows work with a keyboard?
Each payout's heading holds a button with aria-expanded and aria-controls; Enter or Space opens and closes it, and the open payout's table is named. Status is a word as well as a dot. Amounts are in dir="ltr" so they keep their shape in right-to-left pages.