4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T5bcb,"use client" import * as React from "react" import { sortFn_datetime, columnVisibilityFeature, type ColumnDef, type SortingState, flexRender, tableFeatures, useTable, createSortedRowModel, rowSortingFeature, createPaginatedRowModel, rowPaginationFeature, } from "@tanstack/react-table" const TABLE_FEATURES = tableFeatures({ columnVisibilityFeature, rowSortingFeature, rowPaginationFeature, sortedRowModel: createSortedRowModel(), paginatedRowModel: createPaginatedRowModel(), sortFns: { datetime: sortFn_datetime, }, }) import { toast } from "sonner" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Field, FieldLabel } from "@/components/ui/field" import { Input } from "@/components/ui/input" import { Progress } from "@/components/ui/progress" import { Separator } from "@/components/ui/separator" import { Toaster } from "@/components/ui/sonner" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { IconPlaceholder } from "@/components/icons/icon-placeholder" const PLAN = { name: "Pro", price: "$49", interval: "/ Month", renewalDate: "July 14, 2026", storage: { used: 162, total: 250, }, } const PAYMENT = { brand: "Visa", last4: "4242", expiry: "08 / 28", holder: "Jordan Rivera", } type InvoiceStatus = "Paid" | "Pending" | "Failed" type Invoice = { id: string date: string amount: string status: InvoiceStatus } const INVOICES: Invoice[] = [ { id: "INV-2026-0047", date: "Jun 1, 2026", amount: "$49.00", status: "Paid", }, { id: "INV-2026-0031", date: "May 1, 2026", amount: "$49.00", status: "Paid", }, { id: "INV-2026-0018", date: "Apr 1, 2026", amount: "$49.00", status: "Pending", }, { id: "INV-2026-0009", date: "Mar 1, 2026", amount: "$49.00", status: "Paid", }, { id: "INV-2026-0004", date: "Feb 1, 2026", amount: "$49.00", status: "Failed", }, { id: "INV-2026-0001", date: "Jan 1, 2026", amount: "$49.00", status: "Paid", }, { id: "INV-2025-0142", date: "Dec 1, 2025", amount: "$49.00", status: "Paid", }, { id: "INV-2025-0128", date: "Nov 1, 2025", amount: "$49.00", status: "Paid", }, ] const STATUS_VARIANT: Record< InvoiceStatus, "default" | "secondary" | "destructive" | "outline" > = { Paid: "secondary", Pending: "outline", Failed: "destructive", } function SortIcon({ sorted }: { sorted: false | "asc" | "desc" }) { if (sorted === "asc") return ( ) if (sorted === "desc") return ( ) return ( ) } function SortHeader({ label, sorted, onToggle, align = "left", }: { label: string sorted: false | "asc" | "desc" onToggle: () => void align?: "left" | "right" }) { return ( ) } const columns: ColumnDef[] = [ { accessorKey: "id", header: ({ column }) => ( column.toggleSorting(column.getIsSorted() === "asc")} /> ), cell: ({ row }) => ( {row.original.id} ), }, { accessorKey: "date", sortFn: "datetime", header: ({ column }) => ( column.toggleSorting(column.getIsSorted() === "asc")} /> ), cell: ({ row }) => ( {row.original.date} ), }, { accessorKey: "amount", header: ({ column }) => ( column.toggleSorting(column.getIsSorted() === "asc")} /> ), cell: ({ row }) => ( {row.original.amount} ), }, { accessorKey: "status", enableSorting: false, header: () => ( Status ), cell: ({ row }) => ( {row.original.status} ), }, { id: "download", enableSorting: false, header: () => ( Download ), cell: ({ row }) => (

), }, ] export default function BillingBlock() { const autoRenew = true const [sorting, setSorting] = React.useState([]) const storagePct = Math.round((PLAN.storage.used / PLAN.storage.total) * 100) const table = useTable({ features: TABLE_FEATURES, data: INVOICES, columns, state: { sorting }, onSortingChange: setSorting, initialState: { pagination: { pageIndex: 0, pageSize: 5 } }, }) const pageCount = table.getPageCount() return (

Billing

Manage your Acme subscription, payment method, and invoices.

Current Plan {PLAN.name}

{autoRenew ? "Your subscription renews automatically." : "Auto-renew is turned off."}

{PLAN.price} {PLAN.interval}

Next Renewal:{" "} {PLAN.renewalDate}

Storage Used

{PLAN.storage.used} GB{" "} / {PLAN.storage.total} GB

{PLAN.storage.total - PLAN.storage.used} GB Remaining

Payment Method Used for recurring charges. Edit } title="Edit Payment Method" description="Update the card used for your recurring Acme charges." submitLabel="Save Card" successMessage="Payment method updated" />

{PAYMENT.brand} ending in {PAYMENT.last4} Expires {PAYMENT.expiry}

Cardholder {PAYMENT.holder}

Billing email billing@acme.com

Add Payment Method } title="Add Payment Method" description="Add a new card to use for future Acme charges." submitLabel="Add Card" successMessage="Payment method added" /> Invoice History Download or review past invoices. {INVOICES.length} {" "} Invoices {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} ))} ))} {table.getRowModel().rows.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender( cell.column.columnDef.cell, cell.getContext() )} ))} )) ) : ( No invoices yet. )}

Page {table.state.pagination.pageIndex + 1} of{" "} {Math.max(pageCount, 1)}

) } const UPGRADE_PLANS = [ { name: "Team", price: "$99", detail: "Everything in Pro + admin controls" }, { name: "Enterprise", price: "Custom", detail: "SSO, audit logs, and a dedicated success manager", }, ] function UpgradePlanDialog() { const [open, setOpen] = React.useState(false) return ( ) } function PaymentMethodDialog({ trigger, title, description, submitLabel, successMessage, }: { trigger: React.ReactElement title: string description: string submitLabel: string successMessage: string }) { const [open, setOpen] = React.useState(false) function handleSubmit(event: React.FormEvent) { event.preventDefault() setOpen(false) toast.success(successMessage, { description: "Your billing details are now up to date.", }) } return ( ) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tanstack/react-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table"}]]}]}],["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@7ovr","registryDependencies":["badge","button","card","dialog","field","input","progress","separator","sonner","table"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/billing/3/billing-block.tsx","content":"$50","type":"registry:component","target":"components/blocks/billing-3.tsx"}],"className":"h-[70svh] min-h-80"}]]}]