{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "order-management-page", "title": "Order Management Page", "type": "registry:page", "files": [ { "path": "packages/registry-react/blocks/order-management-page/OrderManagementPage.tsx", "content": "'use client'\n\nimport * as React from 'react'\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-react'\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 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 = {\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\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\nexport function OrderManagementPage({ className }: { className?: string }) {\n const [search, setSearch] = React.useState('')\n const [statusFilter, setStatusFilter] = React.useState<'all' | OrderStatus>('all')\n const [selected, setSelected] = React.useState>(new Set())\n const [selectedOrder, setSelectedOrder] = React.useState(null)\n const [drawerOpen, setDrawerOpen] = React.useState(false)\n\n const filteredOrders = React.useMemo(() => {\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 }, [search, statusFilter])\n\n const statusCounts = React.useMemo(() => {\n const counts: Record = {\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 = [\n { value: 'all' as const, label: 'All', count: statusCounts.all },\n { value: 'paid' as const, label: 'Paid', count: statusCounts.paid },\n { value: 'processing' as const, label: 'Processing', count: statusCounts.processing },\n { value: 'shipped' as const, label: 'Shipped', count: statusCounts.shipped },\n { value: 'refunded' as const, label: 'Refunded', count: statusCounts.refunded },\n ]\n\n const allSelected = filteredOrders.length > 0 && filteredOrders.every((ord) => selected.has(ord.id))\n const someSelected = filteredOrders.some((ord) => selected.has(ord.id))\n\n const toggleAll = (checked: boolean) => {\n setSelected(checked ? new Set(filteredOrders.map((ord) => ord.id)) : new Set())\n }\n\n const toggleRow = (id: string, checked: boolean) => {\n const next = new Set(selected)\n if (checked) next.add(id)\n else next.delete(id)\n setSelected(next)\n }\n\n const clearSelection = () => setSelected(new Set())\n const exportSelected = () => clearSelection()\n const markSelectedShipped = () => clearSelection()\n\n const openOrderDetails = (order: Order) => {\n setSelectedOrder(order)\n setDrawerOpen(true)\n }\n\n return (\n
\n {/* Page Header */}\n
\n
\n

Orders

\n

Manage and track customer purchases

\n
\n
\n \n \n
\n
\n\n {/* 4 Stat/KPI Summary Cards */}\n
\n \n \n
\n

Total Orders

\n
\n \n
\n
\n
\n 1,429\n \n \n +8.2%\n \n
\n

vs. previous 30 days

\n \n \n\n \n \n
\n

Pending Fulfillment

\n
\n \n
\n
\n
\n 28\n \n 12 urgent\n \n
\n

Requires warehouse dispatch

\n \n \n\n \n \n
\n

Processing

\n
\n \n
\n
\n
\n 45\n \n In queue\n \n
\n

Packaging & label generation

\n \n \n\n \n \n
\n

Total Revenue

\n
\n \n
\n
\n
\n $128,450\n \n \n +14.5%\n \n
\n

vs. previous period

\n \n \n
\n\n {/* Search and Filter Toolbar */}\n
\n
\n
\n \n setSearch(e.target.value)}\n placeholder=\"Search order ID, customer...\"\n className=\"h-9 pl-9 text-xs\"\n />\n
\n\n
\n {statusOptions.map((status) => (\n setStatusFilter(status.value)}\n >\n {status.label}\n {status.count !== undefined && (\n \n {status.count}\n \n )}\n \n ))}\n
\n
\n\n
\n \n
\n
\n\n {/* Bulk Action Bar */}\n {selected.size > 0 && (\n
\n
\n \n {selected.size}\n \n \n {selected.size} {selected.size === 1 ? 'order' : 'orders'} selected\n \n
\n
\n \n \n Export selected\n \n \n \n Cancel\n \n
\n
\n )}\n\n {/* Orders Table */}\n
\n \n \n \n \n toggleAll(checked === true)}\n />\n \n Order ID\n Date\n Customer\n Items\n Total\n Fulfillment\n \n Actions\n \n \n \n \n {filteredOrders.map((order) => (\n openOrderDetails(order)}\n >\n e.stopPropagation()}>\n toggleRow(order.id, checked === true)}\n />\n \n \n \n {order.orderNumber}\n \n \n {order.date}\n \n
\n \n {initials(order.customer.name)}\n \n
\n

{order.customer.name}

\n

{order.customer.email}

\n
\n
\n \n \n
\n \n {order.items.reduce((acc, item) => acc + item.quantity, 0)}{' '}\n {order.items.reduce((acc, item) => acc + item.quantity, 0) === 1 ? 'item' : 'items'}\n \n \n • {order.items[0]?.name}\n {order.items.length > 1 ? ` +${order.items.length - 1} more` : ''}\n \n
\n \n \n ${formatCurrency(order.total)}\n \n \n \n \n {statusBadgeConfig[order.status].label}\n \n \n e.stopPropagation()}>\n \n \n \n \n \n Order actions\n openOrderDetails(order)}>\n \n View details\n \n \n \n Download invoice\n \n {order.status === 'processing' && (\n \n \n Mark as shipped\n \n )}\n \n {order.status !== 'refunded' && (\n \n \n Issue refund\n \n )}\n \n \n \n \n ))}\n {filteredOrders.length === 0 && (\n \n \n No orders match your filter criteria.\n \n \n )}\n \n
\n
\n\n {/* Pagination Footer */}\n
\n

Showing 1-{filteredOrders.length} of 1,429 orders

\n
\n \n \n
\n
\n\n {/* Quick Details Drawer / Sheet */}\n \n \n {selectedOrder && (\n
\n {/* Sheet Header */}\n \n
\n {selectedOrder.orderNumber}\n \n \n {statusBadgeConfig[selectedOrder.status].label}\n \n
\n \n Placed on {selectedOrder.date}\n \n \n Detailed view of order {selectedOrder.orderNumber}\n \n \n\n {/* Sheet Body */}\n
\n {/* Customer & Shipping */}\n
\n
\n

\n Customer & Shipping\n

\n {selectedOrder.paymentMethod}\n
\n
\n \n \n {initials(selectedOrder.customer.name)}\n \n \n
\n

{selectedOrder.customer.name}

\n

{selectedOrder.customer.email}

\n
\n
\n
\n

Delivery address:

\n

{selectedOrder.customer.address}

\n

\n {selectedOrder.customer.city}, {selectedOrder.customer.state} {selectedOrder.customer.zip}\n

\n
\n
\n\n {/* Fulfillment & Tracking if available */}\n {selectedOrder.carrier && selectedOrder.trackingNumber && (\n
\n
\n \n Fulfillment\n \n \n In Transit\n \n
\n
\n Carrier:\n {selectedOrder.carrier}\n
\n
\n Tracking ID:\n {selectedOrder.trackingNumber}\n
\n
\n )}\n\n {/* Line Items */}\n
\n

Line Items

\n
\n {selectedOrder.items.map((item, idx) => (\n
\n
\n

{item.name}

\n

\n SKU: {item.sku} • Qty: {item.quantity} × ${formatCurrency(item.price)}\n

\n
\n
\n ${formatCurrency(item.price * item.quantity)}\n
\n
\n ))}\n
\n
\n\n {/* Cost Breakdown */}\n
\n
\n Subtotal\n \n ${formatCurrency(selectedOrder.subtotal)}\n \n
\n
\n Estimated Shipping\n \n {selectedOrder.shipping === 0 ? 'Free' : `$${formatCurrency(selectedOrder.shipping)}`}\n \n
\n
\n Tax\n ${formatCurrency(selectedOrder.tax)}\n
\n
\n Total\n \n ${formatCurrency(selectedOrder.total)}\n \n
\n
\n
\n\n {/* Sheet Footer */}\n \n \n \n \n \n \n
\n )}\n \n \n
\n )\n}\n", "type": "registry:page", "target": "~/components/blocks/OrderManagementPage.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/checkbox.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/sheet.json", "https://uipkge.dev/r/react/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" ] }