How do I persist the override to my database?

Replace the setTimeout in the save handler with a server action or API call that updates the partner's commission_rate field, and only move to the saved state once that call succeeds.

Can I add an expiration date for the override?

Not as a built-in prop. Add a date field alongside the rate input and pass an end date to your backend, which should revert the partner to the standard rate after it passes.

How do I log who made the change?

Capture the admin's user ID and a timestamp in your save handler and write them to an audit log table alongside the rate change, this component doesn't track who's using it.

Is the effective rate calculated in real time?

Yes, it recalculates on every keystroke in the override input, but only once the value is a valid number within minRate and maxRate.

Does this support tiered or volume-based overrides?

No, it's a single flat rate. For volume-based bonus tiers, you'd need to extend the component with additional threshold inputs.

Is this usable on a tablet or phone?

Yes, it's a compact max-w-md layout with a large number input and touch-sized toggle buttons, so it works on smaller admin devices.

Billing Commission Rate Override

An admin panel block for overriding a partner's commission rate. A toggle switches between the standard tier rate and a custom override, a number input takes the new rate with min/max validation, and an effective-rate preview updates as the admin types. A save action moves through a saving and saved state. Built for partner and affiliate admin dashboards.

By Staaarter Team

Billing

Updated June 19, 2026

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, input, label dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-commission-rate-override.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing35.tsx instead.

Usage

The file also exports billing35Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing35, billing35Demo } from "@/components/blocks/billing/billing35";

export default function Page() {
  return <Billing35 {...billing35Demo} />;
}

Props

Prop	Type	Default	Description
partnerName	string	"Partner"	Name shown under the heading.
partnerTier	string	none	Optional tier label shown next to the partner name, such as "Gold partner".
standardRate	number	none	The partner's default commission rate as a percentage, e.g. 15 for 15%.
defaultOverrideEnabled	boolean	false	Whether the custom-override mode is active on first render.
defaultOverrideRate	number	standardRate	Starting value for the override input when override mode is on.
minRate	number	0	Minimum accepted override rate.
maxRate	number	50	Maximum accepted override rate.
saveLabel	string	"Save override"	Label for the save button in its idle state.
savingLabel	string	"Saving"	Label shown while the save action is in its loading state.
savedLabel	string	"Saved"	Label shown after a successful save.
className	string	none	Extra classes for the outer container.

Behavior notes

Rate mode (standard or custom) and the override value are both local state; the effective-rate display in the header recalculates on every keystroke in the override input.
The override input is only rendered when custom mode is selected; switching back to standard hides it and the effective rate falls back to standardRate.
A rate outside the minRate/maxRate range marks the input aria-invalid and shows an inline error, and disables the Save button until it's corrected.
Save moves through a 700ms saving state (spinner, disabled) before showing a saved state with a check icon; changing the mode or the rate value afterward resets the button back to idle.
The delta line next to the input (e.g. "+7.5% vs. standard") only appears once the entered rate is valid and differs from the standard rate.
Saving doesn't persist anything on its own; it's a local UI state stand-in for a real save request.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.