50: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"] 51: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"] 52:T131d,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; type IconProps = React.SVGProps; function IconDownload(props: IconProps) { return ( ); } type Status = 'paid' | 'due' | 'overdue'; interface Invoice { id: string; number: string; period: string; issued: string; status: Status; amount: number; } const INVOICES: Invoice[] = [ { id: 'i1', number: 'INV-2041', period: 'Aug 2026', issued: 'Sep 1', status: 'due', amount: 1140, }, { id: 'i2', number: 'INV-2033', period: 'Jul 2026', issued: 'Aug 1', status: 'paid', amount: 1140, }, { id: 'i3', number: 'INV-2025', period: 'Jun 2026', issued: 'Jul 1', status: 'paid', amount: 980, }, { id: 'i4', number: 'INV-2017', period: 'May 2026', issued: 'Jun 1', status: 'paid', amount: 980, }, { id: 'i5', number: 'INV-2009', period: 'Apr 2026', issued: 'May 1', status: 'overdue', amount: 860, }, { id: 'i6', number: 'INV-2001', period: 'Mar 2026', issued: 'Apr 1', status: 'paid', amount: 860, }, ]; const STATUS_STYLE: Record = { paid: 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-300 dark:ring-emerald-300/25', due: 'bg-amber-50 text-amber-800 ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-300/25', overdue: 'bg-rose-50 text-rose-700 ring-rose-600/20 dark:bg-rose-400/10 dark:text-rose-300 dark:ring-rose-300/25', }; const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }); const columns: DataTableColumn[] = [ { id: 'number', header: 'Invoice', sortable: true, value: (row) => row.number, cell: (row) => {row.number}, }, { id: 'period', header: 'Billing period', value: (row) => row.period }, { id: 'issued', header: 'Issued', hideBelow: 'sm', value: (row) => row.issued }, { id: 'status', header: 'Status', sortable: true, value: (row) => row.status, cell: (row) => ( ), }, { id: 'amount', header: 'Amount', sortable: true, numeric: true, value: (row) => row.amount, formatTotal: (sum) => money.format(sum), cell: (row) => ( {money.format(row.amount)} ), }, ]; export function InvoicesTable({ variant = 'Panel' }: { variant?: 'Panel' | 'Minimal' }) { return (

row.id} rowLabel={(row) => `invoice ${row.number}`} caption="Billing history with period, status and amount." variant={variant === 'Minimal' ? 'minimal' : 'panel'} title="Invoices" totals={['amount']} rowActions={(row) => ( )} />

); } 4f:["$","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":[null,["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/data-table"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/spectrumui/blocks/tables/invoices-table.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/tables/invoices-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]