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:T20a8,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; type IconProps = React.SVGProps; function Glyph({ children, ...props }: IconProps) { return ( ); } function IconDownload(props: IconProps) { return ( ); } function IconMore(props: IconProps) { return ( ); } type Status = 'succeeded' | 'processing' | 'failed' | 'refunded'; interface Payment { id: string; customer: string; email: string; avatar: string; status: Status; method: string; date: string; amount: number; } const PAYMENTS: Payment[] = [ { id: 'pay_9041', customer: 'Freya Lindgren', email: 'freya@driftlab.se', avatar: '/avatars/people/01.jpg', status: 'succeeded', method: 'Visa •• 4242', date: 'Sep 8', amount: 2400, }, { id: 'pay_9040', customer: 'Mateo Alvarez', email: 'mateo@keelworks.mx', avatar: '/avatars/people/03.jpg', status: 'processing', method: 'ACH transfer', date: 'Sep 8', amount: 640, }, { id: 'pay_9039', customer: 'Aiko Watanabe', email: 'aiko@lumenshift.jp', avatar: '/avatars/people/06.jpg', status: 'succeeded', method: 'Amex •• 3008', date: 'Sep 7', amount: 180, }, { id: 'pay_9038', customer: 'Jonas Keller', email: 'jonas@fernwerk.de', avatar: '/avatars/people/09.jpg', status: 'failed', method: 'Visa •• 1119', date: 'Sep 7', amount: 1280, }, { id: 'pay_9037', customer: 'Zara Osei', email: 'zara@copperline.gh', avatar: '/avatars/people/12.jpg', status: 'succeeded', method: 'Mastercard •• 7745', date: 'Sep 6', amount: 960, }, { id: 'pay_9036', customer: 'Nils Bakker', email: 'nils@havenpoint.nl', avatar: '/avatars/people/13.jpg', status: 'refunded', method: 'Visa •• 6710', date: 'Sep 5', amount: 180, }, { id: 'pay_9035', customer: 'Leila Haddad', email: 'leila@sable.co', avatar: '/avatars/people/05.jpg', status: 'succeeded', method: 'Wire transfer', date: 'Sep 5', amount: 5200, }, { id: 'pay_9034', customer: 'Tomas Vega', email: 'tomas@quietriver.ar', avatar: '/avatars/people/08.jpg', status: 'succeeded', method: 'Visa •• 9033', date: 'Sep 4', amount: 320, }, ]; const STATUS_STYLE: Record = { succeeded: 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-300 dark:ring-emerald-300/25', processing: 'bg-amber-50 text-amber-800 ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-300/25', failed: 'bg-rose-50 text-rose-700 ring-rose-600/20 dark:bg-rose-400/10 dark:text-rose-300 dark:ring-rose-300/25', refunded: 'bg-neutral-100 text-neutral-600 ring-neutral-500/20 dark:bg-neutral-100/10 dark:text-neutral-300 dark:ring-white/15', }; const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }); const columns: DataTableColumn[] = [ { id: 'customer', header: 'Customer', sortable: true, value: (row) => row.customer, cell: (row) => (

{/* eslint-disable-next-line @next/next/no-img-element */}

{row.customer} {row.email}

), }, { id: 'status', header: 'Status', sortable: true, value: (row) => row.status, cell: (row) => ( ), }, { id: 'method', header: 'Method', hideBelow: 'lg', value: (row) => row.method }, { id: 'date', header: 'Date', sortable: true, hideBelow: 'sm', value: (row) => row.date, cell: (row) => {row.date}, }, { 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 PaymentsTable({ variant = 'Comfortable', }: { variant?: 'Comfortable' | 'Striped'; }) { return (

row.id} rowLabel={(row) => `payment from ${row.customer}`} caption="Payments from the last week, with status, method, date and amount." variant={variant === 'Striped' ? 'striped' : 'default'} quickFilter={{ columnId: 'status', label: 'Filter by status' }} totals={['amount']} selectable pageSize={6} rowActions={(row) => ( )} bulkActions={({ ids, clear }) => ( )} />

); } 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/payments-table.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/tables/payments-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]