Billing Cost Center Assignment

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge 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/billing38.tsx instead.

Usage

The file also exports billing38Demo, 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 { Billing38, billing38Demo } from "@/components/blocks/billing/billing38";

export default function Page() {
  return <Billing38 {...billing38Demo} />;
}

Props

Types

interface CostCenterAssignment {
  id: string;
  resourceName: string;
  resourceDetail: string;
  costCenter?: string;
  glCode?: string;
}

Behavior notes

• A row counts as unassigned when costCenter is omitted, not based on a separate status field. That count is recalculated from the assignments array on every render and shown as a badge in the header.
• Unassigned rows get a light amber background tint so they stand out against assigned rows without needing a separate section.
• The GL code only renders when both costCenter and glCode are present; assigned rows without a glCode just show the cost center badge alone.
• There's no inline editing here, this is a read-only summary. Pair it with a select or dropdown in your own app to actually change an assignment.

Frequently asked questions