{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "orders-table",
  "title": "Orders Table",
  "description": "E-commerce orders with fulfillment pills, customer avatars and an expandable line-item panel.",
  "registryDependencies": [
    "@spectrumui/data-table"
  ],
  "files": [
    {
      "path": "components/spectrumui/blocks/tables/orders-table.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table';\n\ntype Status = 'fulfilled' | 'processing' | 'cancelled';\n\ninterface OrderLine {\n  item: string;\n  qty: number;\n  price: number;\n}\n\ninterface Order {\n  id: string;\n  customer: string;\n  avatar: string;\n  status: Status;\n  date: string;\n  total: number;\n  lines: OrderLine[];\n}\n\nconst ORDERS: Order[] = [\n  {\n    id: '#4821',\n    customer: 'Freya Lindgren',\n    avatar: '/avatars/people/01.jpg',\n    status: 'fulfilled',\n    date: 'Sep 8',\n    total: 236,\n    lines: [\n      { item: 'Field jacket — moss, M', qty: 1, price: 148 },\n      { item: 'Trail socks — 3 pack', qty: 2, price: 44 },\n    ],\n  },\n  {\n    id: '#4820',\n    customer: 'Mateo Alvarez',\n    avatar: '/avatars/people/03.jpg',\n    status: 'processing',\n    date: 'Sep 8',\n    total: 89,\n    lines: [{ item: 'Canvas tote — natural', qty: 1, price: 89 }],\n  },\n  {\n    id: '#4819',\n    customer: 'Aiko Watanabe',\n    avatar: '/avatars/people/06.jpg',\n    status: 'fulfilled',\n    date: 'Sep 7',\n    total: 312,\n    lines: [\n      { item: 'Wool overshirt — charcoal, S', qty: 1, price: 189 },\n      { item: 'Beanie — rust', qty: 1, price: 38 },\n      { item: 'Trail socks — 3 pack', qty: 1, price: 44 },\n      { item: 'Gift wrap', qty: 1, price: 41 },\n    ],\n  },\n  {\n    id: '#4818',\n    customer: 'Jonas Keller',\n    avatar: '/avatars/people/09.jpg',\n    status: 'cancelled',\n    date: 'Sep 7',\n    total: 148,\n    lines: [{ item: 'Field jacket — sand, L', qty: 1, price: 148 }],\n  },\n  {\n    id: '#4817',\n    customer: 'Zara Osei',\n    avatar: '/avatars/people/12.jpg',\n    status: 'fulfilled',\n    date: 'Sep 6',\n    total: 512,\n    lines: [\n      { item: 'Down parka — ink, M', qty: 1, price: 420 },\n      { item: 'Liner gloves', qty: 2, price: 46 },\n    ],\n  },\n  {\n    id: '#4816',\n    customer: 'Leila Haddad',\n    avatar: '/avatars/people/05.jpg',\n    status: 'processing',\n    date: 'Sep 6',\n    total: 76,\n    lines: [{ item: 'Beanie — rust', qty: 2, price: 38 }],\n  },\n];\n\nconst STATUS_STYLE: Record<Status, string> = {\n  fulfilled:\n    'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-300 dark:ring-emerald-300/25',\n  processing:\n    'bg-amber-50 text-amber-800 ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-300/25',\n  cancelled:\n    'bg-neutral-100 text-neutral-600 ring-neutral-500/20 dark:bg-neutral-100/10 dark:text-neutral-300 dark:ring-white/15',\n};\n\nconst money = new Intl.NumberFormat('en-US', {\n  style: 'currency',\n  currency: 'USD',\n  maximumFractionDigits: 0,\n});\n\nconst columns: DataTableColumn<Order>[] = [\n  {\n    id: 'id',\n    header: 'Order',\n    sortable: true,\n    value: (row) => row.id,\n    cell: (row) => (\n      <span>\n        <span className=\"font-mono text-[13px]\">{row.id}</span>\n        <span className=\"block text-xs font-normal text-neutral-500 dark:text-neutral-400\">\n          {row.lines.length} {row.lines.length === 1 ? 'item' : 'items'}\n        </span>\n      </span>\n    ),\n  },\n  {\n    id: 'customer',\n    header: 'Customer',\n    sortable: true,\n    value: (row) => row.customer,\n    cell: (row) => (\n      <span className=\"flex items-center gap-2\">\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={row.avatar}\n          alt=\"\"\n          loading=\"lazy\"\n          width={24}\n          height={24}\n          className=\"size-6 shrink-0 rounded-full object-cover outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10\"\n        />\n        <span className=\"truncate font-normal\">{row.customer}</span>\n      </span>\n    ),\n  },\n  {\n    id: 'status',\n    header: 'Fulfillment',\n    sortable: true,\n    value: (row) => row.status,\n    cell: (row) => (\n      <span\n        className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium capitalize ring-1 ring-inset ${STATUS_STYLE[row.status]}`}\n      >\n        <span aria-hidden=\"true\" className=\"size-1.5 rounded-full bg-current\" />\n        {row.status}\n      </span>\n    ),\n  },\n  { id: 'date', header: 'Date', sortable: true, hideBelow: 'sm', value: (row) => row.date },\n  {\n    id: 'total',\n    header: 'Total',\n    sortable: true,\n    numeric: true,\n    value: (row) => row.total,\n    cell: (row) => (\n      <span className=\"font-medium text-neutral-900 dark:text-neutral-100\">\n        {money.format(row.total)}\n      </span>\n    ),\n  },\n];\n\nexport function OrdersTable({ variant = 'Comfortable' }: { variant?: 'Comfortable' | 'Bordered' }) {\n  return (\n    <div className=\"mx-auto w-full max-w-4xl px-4 py-10 sm:px-6\">\n      <DataTable\n        data={ORDERS}\n        columns={columns}\n        rowId={(row) => row.id}\n        rowLabel={(row) => `order ${row.id}`}\n        caption=\"Recent orders with fulfillment status, customer and total.\"\n        variant={variant === 'Bordered' ? 'bordered' : 'default'}\n        title=\"Orders\"\n        quickFilter={{ columnId: 'status', label: 'Filter by fulfillment' }}\n        renderDetail={(row) => (\n          <ul className=\"flex flex-col gap-2 text-sm\">\n            {row.lines.map((line) => (\n              <li key={line.item} className=\"flex items-baseline justify-between gap-4\">\n                <span className=\"text-neutral-700 dark:text-neutral-300\">\n                  {line.item}\n                  <span className=\"ms-2 text-xs text-neutral-500 dark:text-neutral-400\">\n                    ×{line.qty}\n                  </span>\n                </span>\n                <span className=\"font-medium text-neutral-900 tabular-nums dark:text-neutral-100\">\n                  {money.format(line.price * line.qty)}\n                </span>\n              </li>\n            ))}\n          </ul>\n        )}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/spectrumui/blocks/tables/orders-table.tsx"
    }
  ],
  "type": "registry:block"
}