Billing Credit History Log

Installation

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

Usage

The file also exports billing40Demo, 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 { Billing40, billing40Demo } from "@/components/blocks/billing/billing40";

export default function Page() {
  return <Billing40 {...billing40Demo} />;
}

Props

Types

type TransactionType = "topup" | "usage" | "referral" | "refund" | "expired";

interface CreditTransaction {
  id: string;
  type: TransactionType;
  description: string;
  date: string;
  amount: string;
}

Behavior notes

• Amount color is decided by whether the amount string starts with "-", not by the transaction type, so pass amount already formatted with its sign (for example "+$25.00" or "-$5.00").
• Each row's icon comes from an internal type-to-icon lookup (topup, usage, referral, refund, expired), so the caller only ever passes a plain string, never a component.
• The list is a plain, unsorted rendering of whatever order the transactions array is in. Sort newest-first before passing it in if that's the order you want.
• There's no pagination or virtualization built in; long histories should be paged or windowed before reaching this component.

Frequently asked questions