Billing Invoice Consolidation Settings

Installation

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

Usage

The file also exports billing66Demo, 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 { Billing66, billing66Demo } from "@/components/blocks/billing/billing66";

export default function Page() {
  return <Billing66 {...billing66Demo} />;
}

Props

Types

interface BillingResource {
  id: string;
  name: string;
  department: string;
  monthlyAmount: string;
}

type ConsolidationGroupBy = "department" | "project" | "none";

Behavior notes

• Consolidation on/off and the group-by choice are both local state, seeded from defaultConsolidate and defaultGroupBy.
• The group-by control is visually and functionally disabled (dimmed and non-interactive) whenever consolidation is off, since grouping only matters once invoices are being merged.
• The invoice-count preview recalculates live: it's resources.length when consolidation is off, the number of distinct departments when grouped by department, and 1 when grouping is set to none, updating instantly as either setting changes.
• 'Group by project' currently falls back to one invoice per resource in the count preview, since the demo data doesn't carry a project field; wire your own project-based grouping logic into that branch if you track projects separately from departments.
• The save button doesn't call anything on its own; it's there to be wired up to your settings save action, reading the current consolidate/groupBy state from wherever you lift it to.

Frequently asked questions