shadcn.io is not affiliated with official shadcn/ui
Invoice Consolidation Settings Billing Block for React
Choose one invoice, one per project or one per team: the invoices each mode creates from ten typed line items, shared lines split to the cent, and a PO number field with a stated problem on every invoice that needs one.
Installation
Overview
Let an account decide how its monthly usage turns into invoices, with this consolidation setting for React with Base UI. Inside a hairline frame with a plus mark on each corner, a list of three modes sits at the start (One invoice, One per project, One per team), each a native radio row with a sentence and its invoice count. Beside it, the invoices the chosen mode would create are listed from ten typed line items across four projects and two teams: each invoice shows its name, how many lines it holds, its total, and a Field with an Input for a PO number where the customer's rules want one. The two shared lines are split between invoices by each one's own usage with the largest-remainder rule, so the totals always add up to the cent. The only Shine Button, "Save invoicing mode", is refused with the reason ("Customs filing needs a PO number") and focus moves to the missing field. The bands are ruled by Guides and the foot is pinned on a phone. It's built from Field, Input, Shine Button and Guides, with a CSS entrance only. For billing settings of products with projects or teams.
FAQ
How do I fill it with my projects?
Edit LINES (each with cents and a project, or "shared" for a line to split), GROUPS (the invoices each mode creates, with whether it needs a PO) and TEAM_OF, which says which team a project belongs to. The totals, the line counts, the shared split and the sentence "4 invoices instead of 1" all derive from those.
How are shared lines split?
In proportion to each invoice's own lines, in whole cents. Every share is rounded down and the cents left over go to the invoices with the largest remainders, so the parts always sum to the shared total exactly, with no stray cent. The grand total at the foot of the list is the same in every mode.
What is checked before saving?
Every invoice in the chosen mode that needs a PO number must have one in the shape PO-0000. A missing one is stated beside its field ("Customs filing needs a PO number") and in the status line, and focus moves to it; a malformed one says what a PO number looks like as you type. Each message sits in a reserved line so nothing moves.
What stays local?
The mode and the PO numbers live in the demo, and nothing leaves the page: the status says "Saved: one per project" and the block is a demo. To make it real, send the mode and the PO numbers to your server, create the invoices on the next cycle, and confirm from the response. The tax ID is taken from the workspace, as the rows say.
Is it accessible?
The modes are a native radio group in a fieldset with a legend, so arrow keys move between them and the choice is announced. Each PO field has a name that includes its invoice, its message is tied to it and the invalid state is set. The chosen mode is marked by a bar and a tint, not colour alone.