4f: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"] 50: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"] 51:T16cd,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; type Status = 'fulfilled' | 'processing' | 'cancelled'; interface OrderLine { item: string; qty: number; price: number; } interface Order { id: string; customer: string; avatar: string; status: Status; date: string; total: number; lines: OrderLine[]; } const ORDERS: Order[] = [ { id: '#4821', customer: 'Freya Lindgren', avatar: '/avatars/people/01.jpg', status: 'fulfilled', date: 'Sep 8', total: 236, lines: [ { item: 'Field jacket — moss, M', qty: 1, price: 148 }, { item: 'Trail socks — 3 pack', qty: 2, price: 44 }, ], }, { id: '#4820', customer: 'Mateo Alvarez', avatar: '/avatars/people/03.jpg', status: 'processing', date: 'Sep 8', total: 89, lines: [{ item: 'Canvas tote — natural', qty: 1, price: 89 }], }, { id: '#4819', customer: 'Aiko Watanabe', avatar: '/avatars/people/06.jpg', status: 'fulfilled', date: 'Sep 7', total: 312, lines: [ { item: 'Wool overshirt — charcoal, S', qty: 1, price: 189 }, { item: 'Beanie — rust', qty: 1, price: 38 }, { item: 'Trail socks — 3 pack', qty: 1, price: 44 }, { item: 'Gift wrap', qty: 1, price: 41 }, ], }, { id: '#4818', customer: 'Jonas Keller', avatar: '/avatars/people/09.jpg', status: 'cancelled', date: 'Sep 7', total: 148, lines: [{ item: 'Field jacket — sand, L', qty: 1, price: 148 }], }, { id: '#4817', customer: 'Zara Osei', avatar: '/avatars/people/12.jpg', status: 'fulfilled', date: 'Sep 6', total: 512, lines: [ { item: 'Down parka — ink, M', qty: 1, price: 420 }, { item: 'Liner gloves', qty: 2, price: 46 }, ], }, { id: '#4816', customer: 'Leila Haddad', avatar: '/avatars/people/05.jpg', status: 'processing', date: 'Sep 6', total: 76, lines: [{ item: 'Beanie — rust', qty: 2, price: 38 }], }, ]; const STATUS_STYLE: Record = { fulfilled: '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', cancelled: '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: 'id', header: 'Order', sortable: true, value: (row) => row.id, cell: (row) => ( {row.id} {row.lines.length} {row.lines.length === 1 ? 'item' : 'items'} ), }, { id: 'customer', header: 'Customer', sortable: true, value: (row) => row.customer, cell: (row) => ( {/* eslint-disable-next-line @next/next/no-img-element */}

{row.customer} ), }, { id: 'status', header: 'Fulfillment', sortable: true, value: (row) => row.status, cell: (row) => ( ), }, { id: 'date', header: 'Date', sortable: true, hideBelow: 'sm', value: (row) => row.date }, { id: 'total', header: 'Total', sortable: true, numeric: true, value: (row) => row.total, cell: (row) => ( {money.format(row.total)} ), }, ]; export function OrdersTable({ variant = 'Comfortable' }: { variant?: 'Comfortable' | 'Bordered' }) { return (

row.id} rowLabel={(row) => `order ${row.id}`} caption="Recent orders with fulfillment status, customer and total." variant={variant === 'Bordered' ? 'bordered' : 'default'} title="Orders" quickFilter={{ columnId: 'status', label: 'Filter by fulfillment' }} renderDetail={(row) => (

{line.item} ×{line.qty} {money.format(line.price * line.qty)}

)} />

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