shadcn.io is not affiliated with official shadcn/ui
Commission Rate Override Billing Block for Radix UI
A rate field and an expiry for one reseller partner, with the last three months replayed at the standard and the new rate, and a button that becomes Request approval above the 20 percent cap.
Installation
Overview
Let a programme manager pay one partner a different rate, with this commission rate override for React with Radix UI. A hairline frame with a plus mark on each corner splits in two. At the start, the partner (Alex Rivera, standard tier at 10%), a whole-percent Number Input for the new rate and a Segment Group for how long it lasts: 30 days, 90 days or permanent, with the end date spelled out. In the side cell, divided by a hairline with plus marks, the partner's last three months of referred sales are replayed at the standard rate and at the new one in a native table, with a total and one sentence saying what the override pays more or less than standard, to the cent. Up to the 20% cap the rate applies at once; above it the cell says it needs approval from Finance. The action foot holds the only Shine Button, which reads "Apply override" at or below the cap and "Request approval" above it. For reseller, affiliate and channel programmes where a second approver guards the top rates.
FAQ
How do I change the partner, the rates and the sales?
Edit PARTNER, STANDARD, CAP, MIN_RATE and MAX_RATE, and MONTHS, the partner's referred sales in cents for each of the last three closed months. The side cell is worked out from them: a month's commission is its sales times the rate, rounded to the cent, the totals are sums of those cents and the sentence is the difference between the two totals.
How does the approval gate work?
The rule is one function, needsApproval(rate), true above CAP. It changes the button's label, the verdict under the table and the result: a request marks the badge "Approval pending" and the standard rate keeps paying, while an applied rate marks it "Override in place". Pressing the button again for the same rate and expiry is refused with a reason rather than repeating the action. In your app enforce the cap on the server too, and let only the second approver release a request.
What if the rate is empty or out of range?
A rate outside 1% to 50%, or an empty field, shows a message in the reserved line under the field, the table shows dashes instead of guessing, and the button stays focusable but unavailable and repeats the reason in the status line when pressed.
What stays local, and how do I wire it for real?
Both results only change this page and say so ("Approval for 25% requested."), and a quiet line says nothing is sent to Finance or saved. To make it real, post the partner, rate and expiry to your programme API, create an approval task for Finance when the rate is over the cap, and apply the rate from its approval, not from the button.