Billing Departmental Billing Split

Installation

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

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

Usage

The file also exports billing46Demo, 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 { Billing46, billing46Demo } from "@/components/blocks/billing/billing46";

export default function Page() {
  return <Billing46 {...billing46Demo} />;
}

Props

Types

interface DepartmentSplit {
  id: string;
  name: string;
  percent: number;
}

Behavior notes

• departments only seeds initial state, edits to any percentage input update local state, they don't write back to the prop.
• Each percentage input is clamped between 0 and 100 on change, and any non-numeric entry falls back to 0 rather than leaving the field in an invalid state.
• The total row sums every department's current percentage on every render and compares it to 100 with a rounding tolerance, so 33.33 times three still reads as balanced.
• The stacked bar and the colored square next to each row share the same shade lookup, cycling through a fixed array of primary-color opacity steps by index rather than assigning arbitrary colors.
• The save button is disabled whenever the split doesn't total exactly 100%, there's no partial-save or auto-normalize option built in.

Frequently asked questions