62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T840e,'use client' import * as React from 'react' import { ArrowUpRight, Calendar, ChevronDown, Clock, DollarSign, Download, Eye, FileText, MoreHorizontal, PackageCheck, Plus, RotateCcw, Search, ShoppingCart, TrendingUp, Truck, } from 'lucide-react' import { cn } from '@/lib/utils' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' import { Checkbox } from '@/components/ui/checkbox' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Input } from '@/components/ui/input' import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from '@/components/ui/sheet' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export type OrderStatus = 'paid' | 'processing' | 'shipped' | 'refunded' export interface OrderItem { name: string sku: string quantity: number price: number } export interface CustomerInfo { name: string email: string avatar?: string address: string city: string state: string zip: string } export interface Order { id: string orderNumber: string date: string customer: CustomerInfo items: OrderItem[] status: OrderStatus paymentMethod: string subtotal: number shipping: number tax: number total: number carrier?: string trackingNumber?: string } const orders: Order[] = [ { id: 'ord-1', orderNumber: '#ORD-8492', date: 'Oct 24, 2026', customer: { name: 'Sarah Chen', email: 'sarah.chen@example.com', address: '742 Evergreen Terrace', city: 'Springfield', state: 'OR', zip: '97477', }, items: [ { name: 'Ergonomic Mechanical Keyboard', sku: 'KB-ERGO-01', quantity: 1, price: 189 }, { name: 'Desk Mat Pro (Midnight)', sku: 'MAT-PRO-BLK', quantity: 1, price: 39 }, ], status: 'processing', paymentMethod: 'Mastercard •••• 8492', subtotal: 228, shipping: 0, tax: 18.24, total: 246.24, carrier: 'FedEx Priority', trackingNumber: 'FX-9281034-US', }, { id: 'ord-2', orderNumber: '#ORD-8491', date: 'Oct 24, 2026', customer: { name: 'Marcus Vance', email: 'marcus.v@acme-corp.com', address: '100 Enterprise Way, Suite 400', city: 'San Francisco', state: 'CA', zip: '94105', }, items: [ { name: 'UltraWide Monitor 34"', sku: 'MON-34-UW', quantity: 1, price: 699 }, { name: 'Dual Monitor Arm Mount', sku: 'ACC-ARM-02', quantity: 1, price: 129 }, { name: 'Braided DisplayPort Cable 2m', sku: 'CAB-DP-02', quantity: 1, price: 24 }, ], status: 'shipped', paymentMethod: 'Visa •••• 4242', subtotal: 852, shipping: 0, tax: 68.16, total: 920.16, carrier: 'UPS Ground', trackingNumber: '1Z999AA10123456784', }, { id: 'ord-3', orderNumber: '#ORD-8490', date: 'Oct 23, 2026', customer: { name: 'Elena Rostova', email: 'elena.rostova@techflow.io', address: '450 Innovation Parkway', city: 'Austin', state: 'TX', zip: '78701', }, items: [{ name: 'SaaS Enterprise Annual License', sku: 'LIC-ENT-YR', quantity: 1, price: 1200 }], status: 'paid', paymentMethod: 'Visa •••• 9104', subtotal: 1200, shipping: 0, tax: 0, total: 1200, }, { id: 'ord-4', orderNumber: '#ORD-8489', date: 'Oct 23, 2026', customer: { name: 'David Kim', email: 'david.kim@designly.co', address: '88 King Street West', city: 'Seattle', state: 'WA', zip: '98104', }, items: [ { name: 'USB-C Multiport Dock Pro', sku: 'HUB-USBC-8P', quantity: 2, price: 79 }, { name: 'Thunderbolt 4 Braided Cable', sku: 'CAB-TB4-1M', quantity: 2, price: 29 }, ], status: 'shipped', paymentMethod: 'Apple Pay', subtotal: 216, shipping: 0, tax: 17.28, total: 233.28, carrier: 'DHL Express', trackingNumber: 'DHL-8492019-EXP', }, { id: 'ord-5', orderNumber: '#ORD-8488', date: 'Oct 22, 2026', customer: { name: 'Olivia Taylor', email: 'olivia.t@summit.ai', address: '12 Marina Boulevard', city: 'Boston', state: 'MA', zip: '02210', }, items: [{ name: 'Noise-Cancelling Studio Headphones', sku: 'AUD-NC-700', quantity: 1, price: 349 }], status: 'refunded', paymentMethod: 'Visa •••• 1128', subtotal: 349, shipping: 0, tax: 27.92, total: 376.92, }, { id: 'ord-6', orderNumber: '#ORD-8487', date: 'Oct 22, 2026', customer: { name: 'Liam Johansson', email: 'liam.j@nordic.se', address: '240 Queen Street', city: 'New York', state: 'NY', zip: '10001', }, items: [ { name: 'Aluminum Laptop Riser', sku: 'STN-ALUM-SLV', quantity: 1, price: 65 }, { name: 'Wireless Precision Mouse', sku: 'MOU-WL-01', quantity: 1, price: 99 }, ], status: 'processing', paymentMethod: 'Mastercard •••• 5531', subtotal: 164, shipping: 0, tax: 13.12, total: 177.12, carrier: 'USPS Priority', trackingNumber: '9400100000000000000000', }, { id: 'ord-7', orderNumber: '#ORD-8486', date: 'Oct 21, 2026', customer: { name: 'Aisha Patel', email: 'aisha.patel@globalnet.com', address: '500 Central Avenue', city: 'Chicago', state: 'IL', zip: '60601', }, items: [{ name: 'Cloud Storage Tier 3 (500GB)', sku: 'SRV-STR-500', quantity: 1, price: 450 }], status: 'paid', paymentMethod: 'Amex •••• 3009', subtotal: 450, shipping: 0, tax: 36, total: 486, }, { id: 'ord-8', orderNumber: '#ORD-8485', date: 'Oct 20, 2026', customer: { name: 'Lucas Moreau', email: 'lucas.m@atelier.fr', address: '15 Rue de la Paix', city: 'Boulder', state: 'CO', zip: '80302', }, items: [ { name: 'Broadcast Studio Microphone', sku: 'MIC-POD-01', quantity: 1, price: 229 }, { name: 'Dual-Layer Pop Filter', sku: 'ACC-POP-01', quantity: 1, price: 25 }, { name: 'Gold-Plated XLR Cable 3m', sku: 'CAB-XLR-03', quantity: 1, price: 19 }, ], status: 'shipped', paymentMethod: 'Visa •••• 7712', subtotal: 273, shipping: 0, tax: 21.84, total: 294.84, carrier: 'FedEx Ground', trackingNumber: 'FX-7712093-US', }, ] const statusBadgeConfig: Record = { paid: { label: 'Paid', class: 'bg-success/10 text-success border-success/20', dot: 'bg-success', }, processing: { label: 'Processing', class: 'bg-info/10 text-info border-info/20', dot: 'bg-info', }, shipped: { label: 'Shipped', class: 'bg-chart-1/10 text-chart-1 border-chart-1/20', dot: 'bg-chart-1', }, refunded: { label: 'Refunded', class: 'bg-destructive/10 text-destructive border-destructive/20', dot: 'bg-destructive', }, } function formatCurrency(val: number) { return val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) } function initials(name: string) { return name .split(' ') .map((p) => p[0]) .slice(0, 2) .join('') .toUpperCase() } export function OrderManagementPage({ className }: { className?: string }) { const [search, setSearch] = React.useState('') const [statusFilter, setStatusFilter] = React.useState<'all' | OrderStatus>('all') const [selected, setSelected] = React.useState>(new Set()) const [selectedOrder, setSelectedOrder] = React.useState(null) const [drawerOpen, setDrawerOpen] = React.useState(false) const filteredOrders = React.useMemo(() => { const query = search.trim().toLowerCase() return orders.filter((order) => { const matchesStatus = statusFilter === 'all' || order.status === statusFilter const matchesQuery = !query || order.orderNumber.toLowerCase().includes(query) || order.customer.name.toLowerCase().includes(query) || order.customer.email.toLowerCase().includes(query) return matchesStatus && matchesQuery }) }, [search, statusFilter]) const statusCounts = React.useMemo(() => { const counts: Record = { all: orders.length, paid: 0, processing: 0, shipped: 0, refunded: 0, } for (const ord of orders) { counts[ord.status] = (counts[ord.status] || 0) + 1 } return counts }, []) const statusOptions = [ { value: 'all' as const, label: 'All', count: statusCounts.all }, { value: 'paid' as const, label: 'Paid', count: statusCounts.paid }, { value: 'processing' as const, label: 'Processing', count: statusCounts.processing }, { value: 'shipped' as const, label: 'Shipped', count: statusCounts.shipped }, { value: 'refunded' as const, label: 'Refunded', count: statusCounts.refunded }, ] const allSelected = filteredOrders.length > 0 && filteredOrders.every((ord) => selected.has(ord.id)) const someSelected = filteredOrders.some((ord) => selected.has(ord.id)) const toggleAll = (checked: boolean) => { setSelected(checked ? new Set(filteredOrders.map((ord) => ord.id)) : new Set()) } const toggleRow = (id: string, checked: boolean) => { const next = new Set(selected) if (checked) next.add(id) else next.delete(id) setSelected(next) } const clearSelection = () => setSelected(new Set()) const exportSelected = () => clearSelection() const markSelectedShipped = () => clearSelection() const openOrderDetails = (order: Order) => { setSelectedOrder(order) setDrawerOpen(true) } return (

{/* Page Header */}

Orders

Manage and track customer purchases

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

Total Orders

1,429

vs. previous 30 days

Pending Fulfillment

28 12 urgent

Requires warehouse dispatch

Processing

45 In queue

Packaging & label generation

Total Revenue

$128,450

vs. previous period

{/* Search and Filter Toolbar */}

{statusOptions.map((status) => ( ))}

{/* Bulk Action Bar */} {selected.size > 0 && (

{selected.size} {selected.size} {selected.size === 1 ? 'order' : 'orders'} selected

)} {/* Orders Table */}

toggleAll(checked === true)} /> Order ID Date Customer Items Total Fulfillment Actions {filteredOrders.map((order) => ( openOrderDetails(order)} > e.stopPropagation()}> toggleRow(order.id, checked === true)} /> {order.orderNumber} {order.date}

{initials(order.customer.name)}

{order.customer.name}

{order.customer.email}

{order.items.reduce((acc, item) => acc + item.quantity, 0)}{' '} {order.items.reduce((acc, item) => acc + item.quantity, 0) === 1 ? 'item' : 'items'} • {order.items[0]?.name} {order.items.length > 1 ? ` +${order.items.length - 1} more` : ''}

${formatCurrency(order.total)} e.stopPropagation()}> Order actions openOrderDetails(order)}> {order.status === 'processing' && ( )} {order.status !== 'refunded' && ( )} ))} {filteredOrders.length === 0 && ( No orders match your filter criteria. )}

{/* Pagination Footer */}

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

{/* Quick Details Drawer / Sheet */} {selectedOrder && (

{/* Sheet Header */}

{selectedOrder.orderNumber}

Placed on {selectedOrder.date} Detailed view of order {selectedOrder.orderNumber} {/* Sheet Body */}

{/* Customer & Shipping */}

Customer & Shipping

{selectedOrder.paymentMethod}

{initials(selectedOrder.customer.name)}

{selectedOrder.customer.name}

{selectedOrder.customer.email}

Delivery address:

{selectedOrder.customer.address}

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

{/* Fulfillment & Tracking if available */} {selectedOrder.carrier && selectedOrder.trackingNumber && (

Fulfillment In Transit

Carrier: {selectedOrder.carrier}

Tracking ID: {selectedOrder.trackingNumber}

)} {/* Line Items */}

Line Items

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

{item.name}

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

${formatCurrency(item.price * item.quantity)}

))}

{/* Cost Breakdown */}

Subtotal ${formatCurrency(selectedOrder.subtotal)}

Estimated Shipping {selectedOrder.shipping === 0 ? 'Free' : `$${formatCurrency(selectedOrder.shipping)}`}

Tax ${formatCurrency(selectedOrder.tax)}

Total ${formatCurrency(selectedOrder.total)}

{/* Sheet Footer */}

)}

) } 61:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","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"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/order-management-page/OrderManagementPage.tsx","content":"$64","type":"registry:page","target":"~/components/blocks/OrderManagementPage.tsx"}],"className":"h-[70svh] min-h-80"}]]}]