shadcn.io is not affiliated with official shadcn/ui
Enterprise Billing Portal Billing Block for React Aria
A billing portal in a fixed-height window for a group with three legal entities: a sidebar with each entity's balance in its own currency, a totals-per-currency table, invoices to tick and one Pay selected button.
Installation
Overview
Give a finance team one place to pay several companies, with this enterprise billing portal for React with React Aria. A window framed by a hairline with a plus mark on each corner holds the Sidebar: the product's mark, "All entities" and three legal entities (UK Ltd, DE GmbH, US Inc), each with what it owes in its own currency (pounds, euros and dollars), and the signed-in person at the foot. "All entities" is a table by entity with the invoices due and the balance, and totals per currency with the line "Totals are per currency, not added across them". An entity page shows its payment terms and tax ID and its invoices, each with a Checkbox, its due day or how overdue it is, and its amount in that entity's currency. The top bar names the open page and holds "Pay selected (2)", a Shine Button and the only colored control: it pays every ticked invoice, each in its own currency, and the balances in the sidebar follow. The rail collapses to icons with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Checkbox, Badge, Avatar, Button, Shine Button and Guides, with a CSS entrance only. For groups with subsidiaries that invoice and pay in more than one currency.
FAQ
Why are the totals not added together?
Pounds, euros and dollars cannot be summed without an exchange rate, and a rate is a decision (which day, which source). The portal shows one total per currency and says so. If your finance team wants a reporting-currency figure, add it as a separate, labelled line with the rate and its date, never as the total.
How do I use my own entities and invoices?
Edit ENTITIES (name, currency, payment terms, tax ID) and INVOICES (the entity, an id, a description, the amount in minor units of that entity's currency and the due day), plus AS_OF, the typed date that decides "Due Oct 28, in 10 days" and "Overdue by 8 days". The balances, counts and totals are all sums of those rows, so paying an invoice moves the table, the sidebar and the page together.
What does Pay selected do?
It marks every ticked invoice paid, in its own currency, and says "2 invoices paid in this demo." in the window's status line; the page shows the amounts per currency. With nothing ticked the button stays focusable but unavailable and the status line says to tick an invoice first. Nothing is charged: in your app the button would start a payment per currency and the invoices would turn paid when the server confirms them.
How are the sidebar items wired?
They are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with href, which React Aria renders as a link. Point them at your routes and mark the current one with isActive. Each link's name includes the balance, and the provider is set with persist={false} and shortcut={false} so the block writes no cookie and leaves Ctrl and Command with B to your page.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Choosing an entity or pressing Escape closes it and focus goes back to the menu button. The window keeps its height and the page inside it scrolls; the top bar keeps the title and the one button, and the table columns fold into the first cell.
Is it accessible?
The sidebar is a navigation landmark named after the product, its groups are named by their labels and the open page is marked as the current page. Tables have captions and row headers, each checkbox is named with its invoice number, and one polite status line reports each change. Amounts, dates and counts are isolated so they read right in a right-to-left layout.