Billing overview with plan and payment method plus an invoices table: status tabs with counts, search, sortable dates, pagination, skeleton loading and an empty state.
import { BillingInvoicesTable, type BillingInvoice } from "@/components/ui/billing-invoices-table"
const statuses = ["paid", "paid", "paid", "open", "overdue", "refunded"] as const
const invoices: BillingInvoice[] = Array.from({ length: 14 }, (_, i) => ({
id: `INV-${String(1042 - i).padStart(4, "0")}`, date: new Date(2026, 9 - i, 1).toISOString().slice(0, 10),
description: i % 4 === 0 ? "Pro plan · 5 seats + add-ons" : "Pro plan · 5 seats", amount: i % 4 === 0 ? 129 : 99, status: i === 0 ? "open" : statuses[i % 6],
}))
export default function BillingInvoicesTableDemo() {
return (
<div className="flex min-h-screen justify-center bg-background p-6 sm:p-10">
<BillingInvoicesTable invoices={invoices} plan={{ name: "Pro", price: 99, interval: "mo", renewsOn: "Nov 1, 2026" }}
paymentMethod={{ brand: "Visa", last4: "4242", expires: "08/28" }} />
</div>
)
}