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:T17e1,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; type IconProps = React.SVGProps; function IconBag(props: IconProps) { return ( ); } type Stock = 'in' | 'low' | 'out'; interface Product { id: string; name: string; sku: string; category: string; stock: number; capacity: number; price: number; } const PRODUCTS: Product[] = [ { id: 'p1', name: 'Field jacket — moss', sku: 'FJ-MOSS-M', category: 'Outerwear', stock: 184, capacity: 200, price: 148, }, { id: 'p2', name: 'Wool overshirt — charcoal', sku: 'WO-CHAR-S', category: 'Outerwear', stock: 32, capacity: 150, price: 189, }, { id: 'p3', name: 'Down parka — ink', sku: 'DP-INK-M', category: 'Outerwear', stock: 0, capacity: 120, price: 420, }, { id: 'p4', name: 'Trail socks — 3 pack', sku: 'TS-3PK', category: 'Accessories', stock: 412, capacity: 500, price: 44, }, { id: 'p5', name: 'Beanie — rust', sku: 'BN-RUST', category: 'Accessories', stock: 18, capacity: 240, price: 38, }, { id: 'p6', name: 'Canvas tote — natural', sku: 'CT-NAT', category: 'Bags', stock: 96, capacity: 160, price: 89, }, ]; function stockState(row: Product): Stock { if (row.stock === 0) return 'out'; if (row.stock / row.capacity < 0.2) return 'low'; return 'in'; } const STOCK_META: Record = { in: { label: 'In stock', text: 'text-neutral-500 dark:text-neutral-400', bar: 'bg-emerald-600 dark:bg-emerald-400', }, low: { label: 'Low stock', text: 'text-amber-700 dark:text-amber-300', bar: 'bg-amber-500 dark:bg-amber-400', }, out: { label: 'Out of stock', text: 'text-rose-700 dark:text-rose-300', bar: 'bg-rose-500 dark:bg-rose-400', }, }; const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }); const columns: DataTableColumn[] = [ { id: 'name', header: 'Product', sortable: true, value: (row) => row.name, cell: (row) => ( {row.name} {row.sku} ), }, { id: 'category', header: 'Category', sortable: true, hideBelow: 'md', value: (row) => row.category, }, { id: 'stock', header: 'Stock', sortable: true, numeric: true, value: (row) => row.stock, formatTotal: (sum) => `${Math.round(sum).toLocaleString('en-US')} units`, cell: (row) => { const state = stockState(row); return ( ); }, }, { id: 'state', header: 'Status', sortable: true, hideBelow: 'sm', value: (row) => stockState(row), cell: (row) => { const state = stockState(row); return ( ); }, }, { id: 'price', header: 'Price', sortable: true, numeric: true, value: (row) => row.price, cell: (row) => money.format(row.price), }, ]; export function InventoryTable({ variant = 'Comfortable', }: { variant?: 'Comfortable' | 'Bordered'; }) { return (

row.id} rowLabel={(row) => row.name} caption="Inventory levels with stock bars, thresholds and pricing." variant={variant === 'Bordered' ? 'bordered' : 'default'} title="Inventory" totals={['stock']} searchable searchPlaceholder="Search products" defaultSort={{ columnId: 'stock', direction: 'asc' }} />

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