{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "order-management-page",
  "title": "Order Management Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/order-management-page/OrderManagementPage.svelte",
      "content": "<script lang=\"ts\" module>\n  export type OrderStatus = 'paid' | 'processing' | 'shipped' | 'refunded'\n\n  export interface OrderItem {\n    name: string\n    sku: string\n    quantity: number\n    price: number\n  }\n\n  export interface CustomerInfo {\n    name: string\n    email: string\n    avatar?: string\n    address: string\n    city: string\n    state: string\n    zip: string\n  }\n\n  export interface Order {\n    id: string\n    orderNumber: string\n    date: string\n    customer: CustomerInfo\n    items: OrderItem[]\n    status: OrderStatus\n    paymentMethod: string\n    subtotal: number\n    shipping: number\n    tax: number\n    total: number\n    carrier?: string\n    trackingNumber?: string\n  }\n\n  export interface OrderManagementPageProps {\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import {\n    ArrowUpRight,\n    Calendar,\n    ChevronDown,\n    Clock,\n    DollarSign,\n    Download,\n    Eye,\n    FileText,\n    MoreHorizontal,\n    PackageCheck,\n    Plus,\n    RotateCcw,\n    Search,\n    ShoppingCart,\n    TrendingUp,\n    Truck,\n  } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent } from '$lib/components/ui/card'\n  import { Checkbox } from '$lib/components/ui/checkbox'\n  import {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuLabel,\n    DropdownMenuSeparator,\n    DropdownMenuTrigger,\n  } from '$lib/components/ui/dropdown-menu'\n  import { Input } from '$lib/components/ui/input'\n  import {\n    Sheet,\n    SheetClose,\n    SheetContent,\n    SheetDescription,\n    SheetFooter,\n    SheetHeader,\n    SheetTitle,\n  } from '$lib/components/ui/sheet'\n  import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '$lib/components/ui/table'\n\n  let { class: className }: OrderManagementPageProps = $props()\n\n  let search = $state('')\n  let statusFilter = $state<'all' | OrderStatus>('all')\n  let selected = $state<Set<string>>(new Set())\n  let selectedOrder = $state<Order | null>(null)\n  let drawerOpen = $state(false)\n\n  const orders: Order[] = [\n    {\n      id: 'ord-1',\n      orderNumber: '#ORD-8492',\n      date: 'Oct 24, 2026',\n      customer: {\n        name: 'Sarah Chen',\n        email: 'sarah.chen@example.com',\n        address: '742 Evergreen Terrace',\n        city: 'Springfield',\n        state: 'OR',\n        zip: '97477',\n      },\n      items: [\n        { name: 'Ergonomic Mechanical Keyboard', sku: 'KB-ERGO-01', quantity: 1, price: 189 },\n        { name: 'Desk Mat Pro (Midnight)', sku: 'MAT-PRO-BLK', quantity: 1, price: 39 },\n      ],\n      status: 'processing',\n      paymentMethod: 'Mastercard •••• 8492',\n      subtotal: 228,\n      shipping: 0,\n      tax: 18.24,\n      total: 246.24,\n      carrier: 'FedEx Priority',\n      trackingNumber: 'FX-9281034-US',\n    },\n    {\n      id: 'ord-2',\n      orderNumber: '#ORD-8491',\n      date: 'Oct 24, 2026',\n      customer: {\n        name: 'Marcus Vance',\n        email: 'marcus.v@acme-corp.com',\n        address: '100 Enterprise Way, Suite 400',\n        city: 'San Francisco',\n        state: 'CA',\n        zip: '94105',\n      },\n      items: [\n        { name: 'UltraWide Monitor 34\"', sku: 'MON-34-UW', quantity: 1, price: 699 },\n        { name: 'Dual Monitor Arm Mount', sku: 'ACC-ARM-02', quantity: 1, price: 129 },\n        { name: 'Braided DisplayPort Cable 2m', sku: 'CAB-DP-02', quantity: 1, price: 24 },\n      ],\n      status: 'shipped',\n      paymentMethod: 'Visa •••• 4242',\n      subtotal: 852,\n      shipping: 0,\n      tax: 68.16,\n      total: 920.16,\n      carrier: 'UPS Ground',\n      trackingNumber: '1Z999AA10123456784',\n    },\n    {\n      id: 'ord-3',\n      orderNumber: '#ORD-8490',\n      date: 'Oct 23, 2026',\n      customer: {\n        name: 'Elena Rostova',\n        email: 'elena.rostova@techflow.io',\n        address: '450 Innovation Parkway',\n        city: 'Austin',\n        state: 'TX',\n        zip: '78701',\n      },\n      items: [{ name: 'SaaS Enterprise Annual License', sku: 'LIC-ENT-YR', quantity: 1, price: 1200 }],\n      status: 'paid',\n      paymentMethod: 'Visa •••• 9104',\n      subtotal: 1200,\n      shipping: 0,\n      tax: 0,\n      total: 1200,\n    },\n    {\n      id: 'ord-4',\n      orderNumber: '#ORD-8489',\n      date: 'Oct 23, 2026',\n      customer: {\n        name: 'David Kim',\n        email: 'david.kim@designly.co',\n        address: '88 King Street West',\n        city: 'Seattle',\n        state: 'WA',\n        zip: '98104',\n      },\n      items: [\n        { name: 'USB-C Multiport Dock Pro', sku: 'HUB-USBC-8P', quantity: 2, price: 79 },\n        { name: 'Thunderbolt 4 Braided Cable', sku: 'CAB-TB4-1M', quantity: 2, price: 29 },\n      ],\n      status: 'shipped',\n      paymentMethod: 'Apple Pay',\n      subtotal: 216,\n      shipping: 0,\n      tax: 17.28,\n      total: 233.28,\n      carrier: 'DHL Express',\n      trackingNumber: 'DHL-8492019-EXP',\n    },\n    {\n      id: 'ord-5',\n      orderNumber: '#ORD-8488',\n      date: 'Oct 22, 2026',\n      customer: {\n        name: 'Olivia Taylor',\n        email: 'olivia.t@summit.ai',\n        address: '12 Marina Boulevard',\n        city: 'Boston',\n        state: 'MA',\n        zip: '02210',\n      },\n      items: [{ name: 'Noise-Cancelling Studio Headphones', sku: 'AUD-NC-700', quantity: 1, price: 349 }],\n      status: 'refunded',\n      paymentMethod: 'Visa •••• 1128',\n      subtotal: 349,\n      shipping: 0,\n      tax: 27.92,\n      total: 376.92,\n    },\n    {\n      id: 'ord-6',\n      orderNumber: '#ORD-8487',\n      date: 'Oct 22, 2026',\n      customer: {\n        name: 'Liam Johansson',\n        email: 'liam.j@nordic.se',\n        address: '240 Queen Street',\n        city: 'New York',\n        state: 'NY',\n        zip: '10001',\n      },\n      items: [\n        { name: 'Aluminum Laptop Riser', sku: 'STN-ALUM-SLV', quantity: 1, price: 65 },\n        { name: 'Wireless Precision Mouse', sku: 'MOU-WL-01', quantity: 1, price: 99 },\n      ],\n      status: 'processing',\n      paymentMethod: 'Mastercard •••• 5531',\n      subtotal: 164,\n      shipping: 0,\n      tax: 13.12,\n      total: 177.12,\n      carrier: 'USPS Priority',\n      trackingNumber: '9400100000000000000000',\n    },\n    {\n      id: 'ord-7',\n      orderNumber: '#ORD-8486',\n      date: 'Oct 21, 2026',\n      customer: {\n        name: 'Aisha Patel',\n        email: 'aisha.patel@globalnet.com',\n        address: '500 Central Avenue',\n        city: 'Chicago',\n        state: 'IL',\n        zip: '60601',\n      },\n      items: [{ name: 'Cloud Storage Tier 3 (500GB)', sku: 'SRV-STR-500', quantity: 1, price: 450 }],\n      status: 'paid',\n      paymentMethod: 'Amex •••• 3009',\n      subtotal: 450,\n      shipping: 0,\n      tax: 36,\n      total: 486,\n    },\n    {\n      id: 'ord-8',\n      orderNumber: '#ORD-8485',\n      date: 'Oct 20, 2026',\n      customer: {\n        name: 'Lucas Moreau',\n        email: 'lucas.m@atelier.fr',\n        address: '15 Rue de la Paix',\n        city: 'Boulder',\n        state: 'CO',\n        zip: '80302',\n      },\n      items: [\n        { name: 'Broadcast Studio Microphone', sku: 'MIC-POD-01', quantity: 1, price: 229 },\n        { name: 'Dual-Layer Pop Filter', sku: 'ACC-POP-01', quantity: 1, price: 25 },\n        { name: 'Gold-Plated XLR Cable 3m', sku: 'CAB-XLR-03', quantity: 1, price: 19 },\n      ],\n      status: 'shipped',\n      paymentMethod: 'Visa •••• 7712',\n      subtotal: 273,\n      shipping: 0,\n      tax: 21.84,\n      total: 294.84,\n      carrier: 'FedEx Ground',\n      trackingNumber: 'FX-7712093-US',\n    },\n  ]\n\n  const statusBadgeConfig: Record<OrderStatus, { label: string; class: string; dot: string }> = {\n    paid: {\n      label: 'Paid',\n      class: 'bg-success/10 text-success border-success/20',\n      dot: 'bg-success',\n    },\n    processing: {\n      label: 'Processing',\n      class: 'bg-info/10 text-info border-info/20',\n      dot: 'bg-info',\n    },\n    shipped: {\n      label: 'Shipped',\n      class: 'bg-chart-1/10 text-chart-1 border-chart-1/20',\n      dot: 'bg-chart-1',\n    },\n    refunded: {\n      label: 'Refunded',\n      class: 'bg-destructive/10 text-destructive border-destructive/20',\n      dot: 'bg-destructive',\n    },\n  }\n\n  const filteredOrders = $derived.by(() => {\n    const query = search.trim().toLowerCase()\n    return orders.filter((order) => {\n      const matchesStatus = statusFilter === 'all' || order.status === statusFilter\n      const matchesQuery =\n        !query ||\n        order.orderNumber.toLowerCase().includes(query) ||\n        order.customer.name.toLowerCase().includes(query) ||\n        order.customer.email.toLowerCase().includes(query)\n      return matchesStatus && matchesQuery\n    })\n  })\n\n  const statusCounts = $derived.by(() => {\n    const counts: Record<string, number> = {\n      all: orders.length,\n      paid: 0,\n      processing: 0,\n      shipped: 0,\n      refunded: 0,\n    }\n    for (const ord of orders) {\n      counts[ord.status] = (counts[ord.status] || 0) + 1\n    }\n    return counts\n  })\n\n  const statusOptions = $derived([\n    { value: 'all', label: 'All', count: statusCounts.all },\n    { value: 'paid', label: 'Paid', count: statusCounts.paid },\n    { value: 'processing', label: 'Processing', count: statusCounts.processing },\n    { value: 'shipped', label: 'Shipped', count: statusCounts.shipped },\n    { value: 'refunded', label: 'Refunded', count: statusCounts.refunded },\n  ])\n\n  const allSelected = $derived(\n    filteredOrders.length > 0 && filteredOrders.every((ord) => selected.has(ord.id)),\n  )\n  const someSelected = $derived(filteredOrders.some((ord) => selected.has(ord.id)))\n\n  function toggleAll(checked: boolean) {\n    selected = checked ? new Set(filteredOrders.map((ord) => ord.id)) : new Set()\n  }\n\n  function toggleRow(id: string, checked: boolean) {\n    const next = new Set(selected)\n    if (checked) next.add(id)\n    else next.delete(id)\n    selected = next\n  }\n\n  function clearSelection() {\n    selected = new Set()\n  }\n\n  function exportSelected() {\n    clearSelection()\n  }\n\n  function markSelectedShipped() {\n    clearSelection()\n  }\n\n  function openOrderDetails(order: Order) {\n    selectedOrder = order\n    drawerOpen = true\n  }\n\n  function formatCurrency(val: number) {\n    return val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n  }\n\n  function initials(name: string) {\n    return name\n      .split(' ')\n      .map((p) => p[0])\n      .slice(0, 2)\n      .join('')\n      .toUpperCase()\n  }\n</script>\n\n<div data-slot=\"order-management-page\" class={cn('w-full space-y-6', className)}>\n  <!-- Page Header -->\n  <div class=\"flex flex-wrap items-center justify-between gap-4\">\n    <div>\n      <h2 class=\"text-foreground text-2xl font-bold tracking-tight\">Orders</h2>\n      <p class=\"text-muted-foreground mt-1 text-sm\">Manage and track customer purchases</p>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"text-xs\">\n        <Download class=\"mr-1.5 size-3.5\" aria-hidden=\"true\" />\n        Export CSV\n      </Button>\n      <Button size=\"sm\" class=\"text-xs\">\n        <Plus class=\"mr-1.5 size-3.5\" aria-hidden=\"true\" />\n        New Order\n      </Button>\n    </div>\n  </div>\n\n  <!-- 4 Stat/KPI Summary Cards -->\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n    <Card class=\"shadow-xs\">\n      <CardContent class=\"p-4 sm:p-5\">\n        <div class=\"flex items-center justify-between\">\n          <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Total Orders</p>\n          <div class=\"bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md\">\n            <ShoppingCart class=\"size-4\" aria-hidden=\"true\" />\n          </div>\n        </div>\n        <div class=\"mt-3 flex flex-wrap items-baseline justify-between gap-2\">\n          <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">1,429</span>\n          <span class=\"text-success inline-flex items-center gap-0.5 text-xs font-medium\">\n            <TrendingUp class=\"size-3.5\" aria-hidden=\"true\" />\n            +8.2%\n          </span>\n        </div>\n        <p class=\"text-muted-foreground mt-1 text-xs\">vs. previous 30 days</p>\n      </CardContent>\n    </Card>\n\n    <Card class=\"shadow-xs\">\n      <CardContent class=\"p-4 sm:p-5\">\n        <div class=\"flex items-center justify-between\">\n          <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Pending Fulfillment</p>\n          <div class=\"bg-warning/10 text-warning flex size-8 items-center justify-center rounded-md\">\n            <Clock class=\"size-4\" aria-hidden=\"true\" />\n          </div>\n        </div>\n        <div class=\"mt-3 flex flex-wrap items-baseline justify-between gap-2\">\n          <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">28</span>\n          <span\n            class=\"bg-warning/10 text-warning inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium\"\n          >\n            12 urgent\n          </span>\n        </div>\n        <p class=\"text-muted-foreground mt-1 text-xs\">Requires warehouse dispatch</p>\n      </CardContent>\n    </Card>\n\n    <Card class=\"shadow-xs\">\n      <CardContent class=\"p-4 sm:p-5\">\n        <div class=\"flex items-center justify-between\">\n          <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Processing</p>\n          <div class=\"bg-info/10 text-info flex size-8 items-center justify-center rounded-md\">\n            <PackageCheck class=\"size-4\" aria-hidden=\"true\" />\n          </div>\n        </div>\n        <div class=\"mt-3 flex flex-wrap items-baseline justify-between gap-2\">\n          <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">45</span>\n          <span class=\"bg-info/10 text-info inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium\">\n            In queue\n          </span>\n        </div>\n        <p class=\"text-muted-foreground mt-1 text-xs\">Packaging & label generation</p>\n      </CardContent>\n    </Card>\n\n    <Card class=\"shadow-xs\">\n      <CardContent class=\"p-4 sm:p-5\">\n        <div class=\"flex items-center justify-between\">\n          <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Total Revenue</p>\n          <div class=\"bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md\">\n            <DollarSign class=\"size-4\" aria-hidden=\"true\" />\n          </div>\n        </div>\n        <div class=\"mt-3 flex flex-wrap items-baseline justify-between gap-2\">\n          <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$128,450</span>\n          <span class=\"text-success inline-flex items-center gap-0.5 text-xs font-medium\">\n            <ArrowUpRight class=\"size-3.5\" aria-hidden=\"true\" />\n            +14.5%\n          </span>\n        </div>\n        <p class=\"text-muted-foreground mt-1 text-xs\">vs. previous period</p>\n      </CardContent>\n    </Card>\n  </div>\n\n  <!-- Search and Filter Toolbar -->\n  <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n    <div class=\"flex flex-1 flex-wrap items-center gap-2\">\n      <div class=\"relative min-w-[240px] flex-1 sm:max-w-xs\">\n        <Search\n          class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n        <Input bind:value={search} placeholder=\"Search order ID, customer...\" class=\"h-9 pl-9 text-xs\" />\n      </div>\n\n      <div class=\"bg-muted/60 flex items-center gap-1 rounded-lg border p-1\">\n        {#each statusOptions as status (status.value)}\n          <button\n            type=\"button\"\n            class={cn(\n              'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n              statusFilter === status.value\n                ? 'bg-background text-foreground shadow-xs'\n                : 'text-muted-foreground hover:text-foreground',\n            )}\n            onclick={() => (statusFilter = status.value as 'all' | OrderStatus)}\n          >\n            {status.label}\n            {#if status.count !== undefined}\n              <span\n                class={cn(\n                  'ml-1.5 rounded-full px-1.5 py-0.5 text-xs font-normal tabular-nums',\n                  statusFilter === status.value ? 'bg-muted text-foreground' : 'text-muted-foreground',\n                )}\n              >\n                {status.count}\n              </span>\n            {/if}\n          </button>\n        {/each}\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-2\">\n      <Button variant=\"outline\" size=\"sm\" class=\"text-xs font-normal\">\n        <Calendar class=\"text-muted-foreground mr-1.5 size-3.5\" aria-hidden=\"true\" />\n        Last 30 days\n        <ChevronDown class=\"text-muted-foreground ml-1.5 size-3.5\" aria-hidden=\"true\" />\n      </Button>\n    </div>\n  </div>\n\n  <!-- Bulk Action Bar -->\n  {#if selected.size > 0}\n    <div\n      class=\"bg-muted/50 flex flex-wrap items-center justify-between gap-2 rounded-lg border px-4 py-2.5 shadow-xs\"\n    >\n      <div class=\"flex items-center gap-2\">\n        <span\n          class=\"bg-primary text-primary-foreground flex size-5 items-center justify-center rounded-full text-xs font-medium\"\n        >\n          {selected.size}\n        </span>\n        <span class=\"text-foreground text-sm font-medium\">\n          {selected.size} {selected.size === 1 ? 'order' : 'orders'} selected\n        </span>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"text-xs\" onclick={exportSelected}>\n          <Download class=\"mr-1.5 size-3.5\" aria-hidden=\"true\" />\n          Export selected\n        </Button>\n        <Button variant=\"outline\" size=\"sm\" class=\"text-xs\" onclick={markSelectedShipped}>\n          <Truck class=\"mr-1.5 size-3.5\" aria-hidden=\"true\" />\n          Mark as shipped\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          class=\"text-destructive hover:text-destructive text-xs\"\n          onclick={clearSelection}\n        >\n          Cancel\n        </Button>\n      </div>\n    </div>\n  {/if}\n\n  <!-- Orders Table -->\n  <div class=\"bg-card overflow-x-auto rounded-lg border shadow-xs\">\n    <Table>\n      <TableHeader>\n        <TableRow class=\"hover:bg-transparent\">\n          <TableHead class=\"w-10\">\n            <Checkbox\n              checked={allSelected ? true : someSelected ? 'indeterminate' : false}\n              aria-label=\"Select all orders\"\n              onCheckedChange={(v) => toggleAll(v === true)}\n            />\n          </TableHead>\n          <TableHead class=\"min-w-[110px]\">Order ID</TableHead>\n          <TableHead class=\"min-w-[100px]\">Date</TableHead>\n          <TableHead class=\"min-w-[200px]\">Customer</TableHead>\n          <TableHead class=\"min-w-[220px]\">Items</TableHead>\n          <TableHead class=\"min-w-[90px] text-right\">Total</TableHead>\n          <TableHead class=\"min-w-[120px]\">Fulfillment</TableHead>\n          <TableHead class=\"w-10 text-right\"><span class=\"sr-only\">Actions</span></TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {#each filteredOrders as order (order.id)}\n          <TableRow class=\"group hover:bg-muted/40 cursor-pointer transition-colors\" onclick={() => openOrderDetails(order)}>\n            <TableCell class=\"w-10\" onclick={(e) => e.stopPropagation()}>\n              <Checkbox\n                checked={selected.has(order.id)}\n                aria-label={`Select order ${order.orderNumber}`}\n                onCheckedChange={(v) => toggleRow(order.id, v === true)}\n              />\n            </TableCell>\n            <TableCell>\n              <span class=\"text-foreground font-mono text-xs font-semibold hover:underline\">\n                {order.orderNumber}\n              </span>\n            </TableCell>\n            <TableCell class=\"text-muted-foreground text-xs tabular-nums\">\n              {order.date}\n            </TableCell>\n            <TableCell>\n              <div class=\"flex items-center gap-2.5\">\n                <Avatar class=\"size-7\">\n                  <AvatarFallback class=\"text-xs font-medium\">{initials(order.customer.name)}</AvatarFallback>\n                </Avatar>\n                <div class=\"min-w-0\">\n                  <p class=\"text-foreground truncate text-sm font-medium\">{order.customer.name}</p>\n                  <p class=\"text-muted-foreground truncate text-xs\">{order.customer.email}</p>\n                </div>\n              </div>\n            </TableCell>\n            <TableCell>\n              <div class=\"text-xs\">\n                <span class=\"text-foreground font-medium\">\n                  {order.items.reduce((acc, item) => acc + item.quantity, 0)}\n                  {order.items.reduce((acc, item) => acc + item.quantity, 0) === 1 ? 'item' : 'items'}\n                </span>\n                <span class=\"text-muted-foreground ml-1.5 inline-block max-w-[180px] truncate align-bottom\">\n                  • {order.items[0]?.name}{order.items.length > 1 ? ` +${order.items.length - 1} more` : ''}\n                </span>\n              </div>\n            </TableCell>\n            <TableCell class=\"text-foreground text-right font-mono text-xs font-semibold tabular-nums\">\n              ${formatCurrency(order.total)}\n            </TableCell>\n            <TableCell>\n              <Badge\n                variant=\"outline\"\n                class={cn('gap-1.5 px-2 py-0.5 text-xs font-medium capitalize', statusBadgeConfig[order.status].class)}\n              >\n                <span class={cn('size-1.5 rounded-full', statusBadgeConfig[order.status].dot)} aria-hidden=\"true\"></span>\n                {statusBadgeConfig[order.status].label}\n              </Badge>\n            </TableCell>\n            <TableCell class=\"text-right\" onclick={(e) => e.stopPropagation()}>\n              <DropdownMenu>\n                <DropdownMenuTrigger>\n                  {#snippet child({ props })}\n                    <Button\n                      {...props}\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"text-muted-foreground hover:text-foreground\"\n                    >\n                      <MoreHorizontal class=\"size-4\" aria-hidden=\"true\" />\n                      <span class=\"sr-only\">Actions for {order.orderNumber}</span>\n                    </Button>\n                  {/snippet}\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" class=\"w-48\">\n                  <DropdownMenuLabel>Order actions</DropdownMenuLabel>\n                  <DropdownMenuItem onSelect={() => openOrderDetails(order)}>\n                    <Eye class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                    View details\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <FileText class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                    Download invoice\n                  </DropdownMenuItem>\n                  {#if order.status === 'processing'}\n                    <DropdownMenuItem>\n                      <Truck class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                      Mark as shipped\n                    </DropdownMenuItem>\n                  {/if}\n                  <DropdownMenuSeparator />\n                  {#if order.status !== 'refunded'}\n                    <DropdownMenuItem class=\"text-destructive focus:text-destructive\">\n                      <RotateCcw class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                      Issue refund\n                    </DropdownMenuItem>\n                  {/if}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        {/each}\n        {#if filteredOrders.length === 0}\n          <TableRow>\n            <TableCell colspan={8} class=\"text-muted-foreground h-32 text-center text-sm\">\n              No orders match your filter criteria.\n            </TableCell>\n          </TableRow>\n        {/if}\n      </TableBody>\n    </Table>\n  </div>\n\n  <!-- Pagination Footer -->\n  <div class=\"flex flex-wrap items-center justify-between gap-4\">\n    <p class=\"text-muted-foreground text-xs tabular-nums\">Showing 1-{filteredOrders.length} of 1,429 orders</p>\n    <div class=\"flex items-center gap-2\">\n      <Button variant=\"outline\" size=\"sm\" class=\"text-xs\" disabled>Previous</Button>\n      <Button variant=\"outline\" size=\"sm\" class=\"text-xs\">Next</Button>\n    </div>\n  </div>\n\n  <!-- Quick Details Drawer / Sheet -->\n  <Sheet bind:open={drawerOpen}>\n    <SheetContent side=\"right\" class=\"flex w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-lg\">\n      {#if selectedOrder}\n        {@const ord = selectedOrder}\n        <div class=\"flex h-full flex-col\">\n          <!-- Sheet Header -->\n          <SheetHeader class=\"space-y-1 border-b px-6 py-5\">\n            <div class=\"flex items-center justify-between pr-6\">\n              <span class=\"text-foreground font-mono text-base font-bold\">{ord.orderNumber}</span>\n              <Badge\n                variant=\"outline\"\n                class={cn(\n                  'gap-1.5 px-2.5 py-0.5 text-xs font-medium capitalize',\n                  statusBadgeConfig[ord.status].class,\n                )}\n              >\n                <span class={cn('size-1.5 rounded-full', statusBadgeConfig[ord.status].dot)} aria-hidden=\"true\"></span>\n                {statusBadgeConfig[ord.status].label}\n              </Badge>\n            </div>\n            <SheetTitle class=\"text-muted-foreground text-xs font-normal\">\n              Placed on {ord.date}\n            </SheetTitle>\n            <SheetDescription class=\"sr-only\">Detailed view of order {ord.orderNumber}</SheetDescription>\n          </SheetHeader>\n\n          <!-- Sheet Body -->\n          <div class=\"flex-1 space-y-6 overflow-y-auto px-6 py-5 text-sm\">\n            <!-- Customer & Shipping -->\n            <div class=\"bg-muted/20 space-y-3 rounded-lg border p-4\">\n              <div class=\"flex items-center justify-between\">\n                <h4 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  Customer & Shipping\n                </h4>\n                <span class=\"text-muted-foreground font-mono text-xs\">{ord.paymentMethod}</span>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <Avatar class=\"size-9\">\n                  <AvatarFallback class=\"text-xs font-semibold\">\n                    {initials(ord.customer.name)}\n                  </AvatarFallback>\n                </Avatar>\n                <div class=\"min-w-0\">\n                  <p class=\"text-foreground font-medium\">{ord.customer.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{ord.customer.email}</p>\n                </div>\n              </div>\n              <div class=\"text-muted-foreground border-t pt-2.5 text-xs\">\n                <p class=\"text-foreground font-medium\">Delivery address:</p>\n                <p>{ord.customer.address}</p>\n                <p>\n                  {ord.customer.city}, {ord.customer.state} {ord.customer.zip}\n                </p>\n              </div>\n            </div>\n\n            <!-- Fulfillment & Tracking if available -->\n            {#if ord.carrier && ord.trackingNumber}\n              <div class=\"border-border bg-card space-y-2 rounded-lg border p-4\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Fulfillment</span>\n                  <Badge variant=\"secondary\" class=\"text-xs font-normal\">In Transit</Badge>\n                </div>\n                <div class=\"flex items-center justify-between pt-1 text-xs\">\n                  <span class=\"text-muted-foreground\">Carrier:</span>\n                  <span class=\"text-foreground font-medium\">{ord.carrier}</span>\n                </div>\n                <div class=\"flex items-center justify-between text-xs\">\n                  <span class=\"text-muted-foreground\">Tracking ID:</span>\n                  <span class=\"text-foreground font-mono font-medium\">{ord.trackingNumber}</span>\n                </div>\n              </div>\n            {/if}\n\n            <!-- Line Items -->\n            <div class=\"space-y-3\">\n              <h4 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Line Items</h4>\n              <div class=\"divide-border bg-card divide-y rounded-lg border\">\n                {#each ord.items as item, idx (idx)}\n                  <div class=\"flex items-center justify-between gap-3 p-3.5\">\n                    <div class=\"min-w-0 flex-1\">\n                      <p class=\"text-foreground truncate text-sm font-medium\">{item.name}</p>\n                      <p class=\"text-muted-foreground font-mono text-xs\">\n                        SKU: {item.sku} • Qty: {item.quantity} × ${formatCurrency(item.price)}\n                      </p>\n                    </div>\n                    <div class=\"text-foreground font-mono text-xs font-semibold tabular-nums\">\n                      ${formatCurrency(item.price * item.quantity)}\n                    </div>\n                  </div>\n                {/each}\n              </div>\n            </div>\n\n            <!-- Cost Breakdown -->\n            <div class=\"bg-card space-y-2 rounded-lg border p-4 text-xs\">\n              <div class=\"text-muted-foreground flex justify-between\">\n                <span>Subtotal</span>\n                <span class=\"text-foreground font-mono tabular-nums\">${formatCurrency(ord.subtotal)}</span>\n              </div>\n              <div class=\"text-muted-foreground flex justify-between\">\n                <span>Estimated Shipping</span>\n                <span class=\"text-foreground font-mono tabular-nums\">\n                  {ord.shipping === 0 ? 'Free' : `$${formatCurrency(ord.shipping)}`}\n                </span>\n              </div>\n              <div class=\"text-muted-foreground flex justify-between\">\n                <span>Tax</span>\n                <span class=\"text-foreground font-mono tabular-nums\">${formatCurrency(ord.tax)}</span>\n              </div>\n              <div class=\"text-foreground flex justify-between border-t pt-2 text-sm font-medium\">\n                <span>Total</span>\n                <span class=\"text-foreground font-mono font-bold tabular-nums\">\n                  ${formatCurrency(ord.total)}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Sheet Footer -->\n          <SheetFooter class=\"bg-muted/10 flex flex-row items-center justify-between gap-2 border-t px-6 py-4\">\n            <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"text-xs\">\n              <Download class=\"mr-1.5 size-3.5\" aria-hidden=\"true\" />\n              Invoice PDF\n            </Button>\n            <SheetClose>\n              {#snippet child({ props })}\n                <Button {...props} variant=\"secondary\" size=\"sm\" class=\"text-xs\">Close</Button>\n              {/snippet}\n            </SheetClose>\n          </SheetFooter>\n        </div>\n      {/if}\n    </SheetContent>\n  </Sheet>\n</div>\n",
      "type": "registry:page",
      "target": "~/src/lib/components/blocks/order-management-page/OrderManagementPage.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/avatar.json",
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/checkbox.json",
    "https://uipkge.dev/r/svelte/dropdown-menu.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/sheet.json",
    "https://uipkge.dev/r/svelte/table.json"
  ],
  "description": "E-commerce and SaaS order fulfillment admin table: header with export CSV and new order action, 4 KPI summary metric cards, search and multi-status filter toolbar with date range selector, selectable order rows with customer avatars and status badges, slide-over order details drawer with line items breakdown and tracking info, bulk action bar, and pagination.",
  "categories": [
    "commerce",
    "app",
    "ecommerce"
  ]
}