Billing Purchase Approval Workflow

Installation

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

Usage

The file also exports billing104Demo, 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 { Billing104, billing104Demo } from "@/components/blocks/billing/billing104";

export default function Page() {
  return <Billing104 {...billing104Demo} />;
}

Props

Types

type ApprovalStepStatus = "approved" | "rejected" | "pending" | "waiting";

interface ApprovalStep {
  id: string;
  approverName: string;
  approverRole: string;
  status: ApprovalStepStatus;
  comment?: string;
  decidedAt?: string;
}

Behavior notes

• The steps array is copied into local state on mount, so approve/reject decisions only change what's rendered in the browser, they don't call any API. Wire the actual mutation into your own onClick handler if you fork this component.
• Only the step whose status is "pending" shows the comment box and action buttons; every other step is read-only.
• Approving the active step marks it "approved" and, if the next step's status is "waiting", flips that next step to "pending" so it becomes the new active step.
• Rejecting the active step marks it "rejected" and stops the chain there. Any steps still marked "waiting" stay waiting rather than auto-advancing, since the request is dead.
• A comment typed into the textarea is attached to whichever step gets decided next and then cleared; it's not saved if you navigate away without approving or rejecting.
• A banner appears above the step list once every step is approved, or as soon as any step is rejected, summarizing the outcome.

Frequently asked questions