Billing Payout History

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/billing90.tsx instead.

Usage

The file also exports billing90Demo, 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 { Billing90, billing90Demo } from "@/components/blocks/billing/billing90";

export default function Page() {
  return <Billing90 {...billing90Demo} />;
}

Props

Types

export type PayoutStatus = "Paid" | "Pending" | "In Transit" | "Failed";

interface PayoutRow {
  id: string;
  date: string;
  destination: string;
  status: PayoutStatus;
  amount: string;
}

Behavior notes

• The payouts array is rendered as-is, in the order it's passed; sort or filter it before handing it to the component if you need newest-first or a status filter.
• Status uses a fixed 4-value union (Paid, Pending, In Transit, Failed) mapped to color classes in STATUS_STYLES. Add a new status by extending both the type and that map.
• destination is a plain string, so pass an already-masked value like "Bank account ending in 4242" rather than raw account details.
• The Export CSV action is a next/link, not a button, so it works with a direct download URL out of the box; swap it for a button with an onClick handler if the export needs to be generated server-side first.
• The table scrolls horizontally on narrow viewports via overflow-x-auto rather than reflowing into cards, so all five columns stay aligned at any width.

Frequently asked questions