shadcn.io is not affiliated with official shadcn/ui
Departmental Billing Split Billing Block for Radix UI
A shared $12,450.00 bill split across four departments by CPU-hours, headcount or a fixed percentage, cut with largest remainder so the amounts sum to the cent, with a lock for next month.
Installation
Overview
Share one bill fairly and prove it adds up, with this departmental billing split for React with Radix UI. A hairline frame with a plus mark on each corner opens with a Toggle Group that picks the driver: CPU-hours, headcount or fixed percentage. Four departments sit in cells on shared hairlines, each with its driver reading, its dollar amount, a thin bar and its share to a tenth of a percent. The amounts are cut with the largest-remainder method, so they always sum to exactly $12,450.00, which is printed as "Sum $12,450.00", and the shares to exactly 100.0%. One sentence names the department the driver moves the most, "Linguistics pays $4,045.87 less by CPU-hours than by headcount". A Switch locks the split for next month. The action foot holds the only Shine Button, "Save allocation", beside Discard. On a phone the cells stack one across. For shared infrastructure, cloud and facilities bills.
FAQ
What is largest remainder, and why use it?
Rounding each share on its own can leave a cent over or short. The function splitOf gives every department the whole cents of its proportional share, then hands the cents left over, one each, to the departments with the largest fractions (the earlier one on a tie). The result always sums to the bill. The percentages are cut the same way in tenths, so they always sum to 100.0%.
How do I use my own departments and drivers?
Edit DEPARTMENTS (a name and one number per driver), DRIVERS and BILL_CENTS. A driver is just a list of weights, one per department, so adding one means adding a field and a branch in weightOf and readingOf. Fixed percentages are typed here, so they should add up to 100; the proportional cut works for any weights.
Where does the comparison sentence come from?
It compares the chosen driver with headcount (or CPU-hours when headcount is chosen), finds the department whose amount differs most and says by how much, in cents, with the words more or less. It changes with the toggle, and its three lines are reserved so nothing below it moves.
What stays local, and how do I wire it for real?
Save, Discard and the lock only change this page's state and say "Saved in this demo.", and a note beside the switch says nothing is billed; reloading starts over. To make it real, post the driver and the lock to your billing service, read the driver readings (usage, headcount) from your metering and HR systems each month, and run the same split on the server when the invoice is produced.
Is it accessible?
The driver group is named, each department is a list item with a heading, and amounts and shares are plain text in isolated spans so they read right in a right-to-left layout. The bars are decoration. The switch is named "Lock this split for next month" and described by its hint, and one polite status line says what is unsaved or saved.