{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "order-management-page",
  "title": "Order Management Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-vue/blocks/order-management-page/OrderManagementPage.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\nimport {\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-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Input } from '@/components/ui/input'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n} from '@/components/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type OrderStatus = 'paid' | 'processing' | 'shipped' | 'refunded'\n\nexport interface OrderItem {\n  name: string\n  sku: string\n  quantity: number\n  price: number\n}\n\nexport 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\nexport 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\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst search = ref('')\nconst statusFilter = ref<'all' | OrderStatus>('all')\nconst selected = ref<Set<string>>(new Set())\nconst selectedOrder = ref<Order | null>(null)\nconst drawerOpen = ref(false)\n\nconst 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\nconst 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\nconst filteredOrders = computed(() => {\n  const query = search.value.trim().toLowerCase()\n  return orders.filter((order) => {\n    const matchesStatus = statusFilter.value === 'all' || order.status === statusFilter.value\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\nconst statusCounts = computed(() => {\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\nconst statusOptions = computed(() => [\n  { value: 'all', label: 'All', count: statusCounts.value.all },\n  { value: 'paid', label: 'Paid', count: statusCounts.value.paid },\n  { value: 'processing', label: 'Processing', count: statusCounts.value.processing },\n  { value: 'shipped', label: 'Shipped', count: statusCounts.value.shipped },\n  { value: 'refunded', label: 'Refunded', count: statusCounts.value.refunded },\n])\n\nconst allSelected = computed(\n  () => filteredOrders.value.length > 0 && filteredOrders.value.every((ord) => selected.value.has(ord.id)),\n)\nconst someSelected = computed(() => filteredOrders.value.some((ord) => selected.value.has(ord.id)))\n\nfunction toggleAll(checked: boolean) {\n  selected.value = checked ? new Set(filteredOrders.value.map((ord) => ord.id)) : new Set()\n}\n\nfunction toggleRow(id: string, checked: boolean) {\n  const next = new Set(selected.value)\n  if (checked) next.add(id)\n  else next.delete(id)\n  selected.value = next\n}\n\nfunction clearSelection() {\n  selected.value = new Set()\n}\n\nfunction exportSelected() {\n  clearSelection()\n}\n\nfunction markSelectedShipped() {\n  clearSelection()\n}\n\nfunction openOrderDetails(order: Order) {\n  selectedOrder.value = order\n  drawerOpen.value = true\n}\n\nfunction formatCurrency(val: number) {\n  return val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n}\n\nfunction 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<template>\n  <div data-slot=\"order-management-page\" :class=\"cn('w-full space-y-6', props.class)\">\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 v-model=\"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          <button\n            v-for=\"status in statusOptions\"\n            :key=\"status.value\"\n            type=\"button\"\n            :class=\"\n              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            \"\n            @click=\"statusFilter = status.value as any\"\n          >\n            {{ status.label }}\n            <span\n              v-if=\"status.count !== undefined\"\n              :class=\"\n                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            >\n              {{ status.count }}\n            </span>\n          </button>\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    <div\n      v-if=\"selected.size > 0\"\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\" @click=\"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\" @click=\"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          @click=\"clearSelection\"\n        >\n          Cancel\n        </Button>\n      </div>\n    </div>\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                :model-value=\"allSelected ? true : someSelected ? 'indeterminate' : false\"\n                aria-label=\"Select all orders\"\n                @update:model-value=\"toggleAll($event === 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          <TableRow\n            v-for=\"order in filteredOrders\"\n            :key=\"order.id\"\n            class=\"group hover:bg-muted/40 cursor-pointer transition-colors\"\n            @click=\"openOrderDetails(order)\"\n          >\n            <TableCell class=\"w-10\" @click.stop>\n              <Checkbox\n                :model-value=\"selected.has(order.id)\"\n                :aria-label=\"`Select order ${order.orderNumber}`\"\n                @update:model-value=\"toggleRow(order.id, $event === 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\" />\n                {{ statusBadgeConfig[order.status].label }}\n              </Badge>\n            </TableCell>\n            <TableCell class=\"text-right\" @click.stop>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon-sm\" class=\"text-muted-foreground hover:text-foreground\">\n                    <MoreHorizontal class=\"size-4\" aria-hidden=\"true\" />\n                    <span class=\"sr-only\">Actions for {{ order.orderNumber }}</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" class=\"w-48\">\n                  <DropdownMenuLabel>Order actions</DropdownMenuLabel>\n                  <DropdownMenuItem @click=\"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                  <DropdownMenuItem v-if=\"order.status === 'processing'\">\n                    <Truck class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                    Mark as shipped\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem v-if=\"order.status !== 'refunded'\" class=\"text-destructive focus:text-destructive\">\n                    <RotateCcw class=\"mr-2 size-4\" aria-hidden=\"true\" />\n                    Issue refund\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow v-if=\"filteredOrders.length === 0\">\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        </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 :open=\"drawerOpen\" @update:open=\"drawerOpen = $event\">\n      <SheetContent side=\"right\" class=\"flex w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-lg\">\n        <div v-if=\"selectedOrder\" 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\">{{ selectedOrder.orderNumber }}</span>\n              <Badge\n                variant=\"outline\"\n                :class=\"\n                  cn(\n                    'gap-1.5 px-2.5 py-0.5 text-xs font-medium capitalize',\n                    statusBadgeConfig[selectedOrder.status].class,\n                  )\n                \"\n              >\n                <span\n                  :class=\"cn('size-1.5 rounded-full', statusBadgeConfig[selectedOrder.status].dot)\"\n                  aria-hidden=\"true\"\n                />\n                {{ statusBadgeConfig[selectedOrder.status].label }}\n              </Badge>\n            </div>\n            <SheetTitle class=\"text-muted-foreground text-xs font-normal\">\n              Placed on {{ selectedOrder.date }}\n            </SheetTitle>\n            <SheetDescription class=\"sr-only\">Detailed view of order {{ selectedOrder.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\">{{ selectedOrder.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(selectedOrder.customer.name) }}\n                  </AvatarFallback>\n                </Avatar>\n                <div class=\"min-w-0\">\n                  <p class=\"text-foreground font-medium\">{{ selectedOrder.customer.name }}</p>\n                  <p class=\"text-muted-foreground text-xs\">{{ selectedOrder.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>{{ selectedOrder.customer.address }}</p>\n                <p>\n                  {{ selectedOrder.customer.city }}, {{ selectedOrder.customer.state }} {{ selectedOrder.customer.zip }}\n                </p>\n              </div>\n            </div>\n\n            <!-- Fulfillment & Tracking if available -->\n            <div\n              v-if=\"selectedOrder.carrier && selectedOrder.trackingNumber\"\n              class=\"border-border bg-card space-y-2 rounded-lg border p-4\"\n            >\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\">{{ selectedOrder.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\">{{ selectedOrder.trackingNumber }}</span>\n              </div>\n            </div>\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                <div\n                  v-for=\"(item, idx) in selectedOrder.items\"\n                  :key=\"idx\"\n                  class=\"flex items-center justify-between gap-3 p-3.5\"\n                >\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              </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\"\n                  >${{ formatCurrency(selectedOrder.subtotal) }}</span\n                >\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                  {{ selectedOrder.shipping === 0 ? 'Free' : `$${formatCurrency(selectedOrder.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(selectedOrder.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(selectedOrder.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 as-child>\n              <Button variant=\"secondary\" size=\"sm\" class=\"text-xs\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
      "type": "registry:page",
      "target": "~/app/components/blocks/OrderManagementPage.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/checkbox.json",
    "https://uipkge.dev/r/vue/dropdown-menu.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/sheet.json",
    "https://uipkge.dev/r/vue/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"
  ]
}