{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "order-management-page", "title": "Order Management Page", "type": "registry:page", "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" ], "files": [ { "path": "packages/elements-lit/src/blocks/order-management-page/order-management-page.ts", "content": "import { LitElement, css, html, nothing } from 'lit'\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'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/avatar/avatar'\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/card/card'\nimport '../../components/checkbox/checkbox'\nimport '../../components/dropdown-menu/dropdown-menu'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/sheet/sheet'\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: { label: 'Paid', class: 'bg-success/10 text-success border-success/20', dot: 'bg-success' },\n processing: { label: 'Processing', class: 'bg-info/10 text-info border-info/20', dot: 'bg-info' },\n shipped: { label: 'Shipped', class: 'bg-chart-1/10 text-chart-1 border-chart-1/20', dot: 'bg-chart-1' },\n refunded: { label: 'Refunded', class: 'bg-destructive/10 text-destructive border-destructive/20', dot: 'bg-destructive' },\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\n/**\n * — the registry OrderManagementPage block as a web component.\n *\n * Class strings and order data are React's verbatim. React state becomes\n * { state: true } fields. The block takes no props and fires no events; search,\n * status filter, bulk selection, and the details sheet are internal.\n *\n * Two deliberate departures: (1) the orders grid uses a native with\n * the registry Table part classes copied verbatim — 's data-driven\n * API can't express per-row/per-cell custom classes, badges, or row clicks;\n * (2) the search icon moves from an absolute overlay into 's\n * prefix slot (same visual result, no overlay positioning to maintain).\n */\nexport class UipOrderManagementPage extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n search: { state: true },\n statusFilter: { state: true },\n selected: { state: true },\n selectedOrder: { state: true },\n drawerOpen: { state: true },\n }\n\n private search = ''\n private statusFilter: 'all' | OrderStatus = 'all'\n private selected: Set = new Set()\n private selectedOrder: Order | null = null\n private drawerOpen = false\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'order-management-page')\n }\n\n private get filteredOrders(): Order[] {\n const query = this.search.trim().toLowerCase()\n return orders.filter((order) => {\n const matchesStatus = this.statusFilter === 'all' || order.status === this.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 private get statusCounts(): Record {\n const counts: Record = { all: orders.length, paid: 0, processing: 0, shipped: 0, refunded: 0 }\n for (const ord of orders) counts[ord.status] = (counts[ord.status] || 0) + 1\n return counts\n }\n\n private toggleAll(checked: boolean) {\n this.selected = checked ? new Set(this.filteredOrders.map((ord) => ord.id)) : new Set()\n }\n\n private toggleRow(id: string, checked: boolean) {\n const next = new Set(this.selected)\n if (checked) next.add(id)\n else next.delete(id)\n this.selected = next\n }\n\n private clearSelection() {\n this.selected = new Set()\n }\n\n private openOrderDetails(order: Order) {\n this.selectedOrder = order\n this.drawerOpen = true\n }\n\n render() {\n const filteredOrders = this.filteredOrders\n const counts = this.statusCounts\n const statusOptions = [\n { value: 'all' as const, label: 'All', count: counts.all },\n { value: 'paid' as const, label: 'Paid', count: counts.paid },\n { value: 'processing' as const, label: 'Processing', count: counts.processing },\n { value: 'shipped' as const, label: 'Shipped', count: counts.shipped },\n { value: 'refunded' as const, label: 'Refunded', count: counts.refunded },\n ]\n const allSelected = filteredOrders.length > 0 && filteredOrders.every((ord) => this.selected.has(ord.id))\n const someSelected = filteredOrders.some((ord) => this.selected.has(ord.id))\n const order = this.selectedOrder\n\n return html`\n
\n
\n
\n

Orders

\n

Manage and track customer purchases

\n
\n
\n \n ${icon(Download, 'download', 'mr-1.5 size-3.5')} Export CSV\n \n ${icon(Plus, 'plus', 'mr-1.5 size-3.5')} New Order \n
\n
\n\n
\n \n \n
\n

Total Orders

\n
\n ${icon(ShoppingCart, 'shopping-cart', 'size-4')}\n
\n
\n
\n 1,429\n \n ${icon(TrendingUp, 'trending-up', 'size-3.5')} +8.2%\n \n
\n

vs. previous 30 days

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

Pending Fulfillment

\n
\n ${icon(Clock, 'clock', 'size-4')}\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 ${icon(PackageCheck, 'package-check', 'size-4')}\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 ${icon(DollarSign, 'dollar-sign', 'size-4')}\n
\n
\n
\n $128,450\n \n ${icon(ArrowUpRight, 'arrow-up-right', 'size-3.5')} +14.5%\n \n
\n

vs. previous period

\n \n \n
\n\n
\n
\n {\n this.search = (e.target as UipInput).value ?? ''\n }}\n >\n ${icon(Search, 'search', 'size-4')}\n \n\n
\n ${statusOptions.map(\n (status) => html` {\n this.statusFilter = status.value\n }}\n >\n ${status.label}\n ${status.count !== undefined\n ? html`\n ${status.count}\n `\n : nothing}\n `,\n )}\n
\n
\n\n
\n \n ${icon(Calendar, 'calendar', 'text-muted-foreground mr-1.5 size-3.5')} Last 30 days\n ${icon(ChevronDown, 'chevron-down', 'text-muted-foreground ml-1.5 size-3.5')}\n \n
\n
\n\n ${this.selected.size > 0\n ? html`
\n
\n \n ${this.selected.size}\n \n \n ${this.selected.size} ${this.selected.size === 1 ? 'order' : 'orders'} selected\n \n
\n
\n this.clearSelection()}\n >\n ${icon(Download, 'download', 'mr-1.5 size-3.5')} Export selected\n \n this.clearSelection()}>\n ${icon(Truck, 'truck', 'mr-1.5 size-3.5')} Mark as shipped\n \n this.clearSelection()}\n >\n Cancel\n \n
\n
`\n : nothing}\n\n
\n
\n \n \n [role=checkbox]]:translate-y-[2px] w-10\"\n >\n ) => this.toggleAll(e.detail.checked)}\n >\n \n [role=checkbox]]:translate-y-[2px] min-w-[110px]\"\n >\n Order ID\n \n [role=checkbox]]:translate-y-[2px] min-w-[100px]\"\n >\n Date\n \n [role=checkbox]]:translate-y-[2px] min-w-[200px]\"\n >\n Customer\n \n [role=checkbox]]:translate-y-[2px] min-w-[220px]\"\n >\n Items\n \n [role=checkbox]]:translate-y-[2px] min-w-[90px] text-right\"\n >\n Total\n \n [role=checkbox]]:translate-y-[2px] min-w-[120px]\"\n >\n Fulfillment\n \n [role=checkbox]]:translate-y-[2px] w-10 text-right\"\n >\n Actions\n \n \n \n \n ${filteredOrders.map(\n (ord) => html` this.openOrderDetails(ord)}\n >\n [role=checkbox]]:translate-y-[2px] w-10\"\n @click=${(e: Event) => e.stopPropagation()}\n >\n ) => this.toggleRow(ord.id, e.detail.checked)}\n >\n \n [role=checkbox]]:translate-y-[2px]\"\n >\n ${ord.orderNumber}\n \n [role=checkbox]]:translate-y-[2px] text-muted-foreground text-xs tabular-nums\"\n >\n ${ord.date}\n \n [role=checkbox]]:translate-y-[2px]\"\n >\n
\n \n ${initials(ord.customer.name)}\n \n
\n

${ord.customer.name}

\n

${ord.customer.email}

\n
\n
\n \n [role=checkbox]]:translate-y-[2px]\"\n >\n
\n \n ${ord.items.reduce((acc, item) => acc + item.quantity, 0)}\n ${ord.items.reduce((acc, item) => acc + item.quantity, 0) === 1 ? 'item' : 'items'}\n \n \n • ${ord.items[0]?.name}${ord.items.length > 1 ? ` +${ord.items.length - 1} more` : ''}\n \n
\n \n [role=checkbox]]:translate-y-[2px] text-foreground text-right font-mono text-xs font-semibold tabular-nums\"\n >\n $${formatCurrency(ord.total)}\n \n [role=checkbox]]:translate-y-[2px]\"\n >\n \n \n ${statusBadgeConfig[ord.status].label}\n \n \n [role=checkbox]]:translate-y-[2px] text-right\"\n @click=${(e: Event) => e.stopPropagation()}\n >\n \n \n ${icon(MoreHorizontal, 'ellipsis', 'size-4')}\n Actions for ${ord.orderNumber}\n \n \n Order actions\n this.openOrderDetails(ord)}>\n ${icon(Eye, 'eye', 'mr-2 size-4')} View details\n \n \n ${icon(FileText, 'file-text', 'mr-2 size-4')} Download invoice\n \n ${ord.status === 'processing'\n ? html`\n ${icon(Truck, 'truck', 'mr-2 size-4')} Mark as shipped\n `\n : nothing}\n \n ${ord.status !== 'refunded'\n ? html`\n ${icon(RotateCcw, 'rotate-ccw', 'mr-2 size-4')} Issue refund\n `\n : nothing}\n \n \n \n `,\n )}\n ${filteredOrders.length === 0\n ? html`\n \n No orders match your filter criteria.\n \n `\n : nothing}\n \n
\n \n\n
\n

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

\n
\n Previous\n Next\n
\n
\n\n ) => {\n this.drawerOpen = e.detail.open\n }}\n >\n ${order\n ? html`\n
\n
\n ${order.orderNumber}\n \n \n ${statusBadgeConfig[order.status].label}\n \n
\n
\n
\n
\n

Customer & Shipping

\n ${order.paymentMethod}\n
\n
\n \n ${initials(order.customer.name)}\n \n
\n

${order.customer.name}

\n

${order.customer.email}

\n
\n
\n
\n

Delivery address:

\n

${order.customer.address}

\n

${order.customer.city}, ${order.customer.state} ${order.customer.zip}

\n
\n
\n\n ${order.carrier && order.trackingNumber\n ? html`
\n
\n Fulfillment\n In Transit\n
\n
\n Carrier:\n ${order.carrier}\n
\n
\n Tracking ID:\n ${order.trackingNumber}\n
\n
`\n : nothing}\n\n
\n

Line Items

\n
\n ${order.items.map(\n (item) => html`
\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
\n
\n Subtotal\n $${formatCurrency(order.subtotal)}\n
\n
\n Estimated Shipping\n ${order.shipping === 0 ? 'Free' : `$${formatCurrency(order.shipping)}`}\n
\n
\n Tax\n $${formatCurrency(order.tax)}\n
\n
\n Total\n $${formatCurrency(order.total)}\n
\n
\n
\n
\n `\n : nothing}\n \n ${icon(Download, 'download', 'mr-1.5 size-3.5')} Invoice PDF\n \n Close\n \n \n `\n }\n}\n\ncustomElements.get('uip-order-management-page') ||\n customElements.define('uip-order-management-page', UipOrderManagementPage)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-order-management-page': UipOrderManagementPage\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/order-management-page/order-management-page.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/avatar.json", "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/card.json", "https://uipkge.dev/r/lit/checkbox.json", "https://uipkge.dev/r/lit/dropdown-menu.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/sheet.json" ] }