{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "order-management-page", "title": "Order Management Page", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/order-management-page/order-management-page.component.ts", "content": "// E-commerce and SaaS order fulfillment admin table: header actions, 4 KPI cards,\n// search + status filter toolbar, selectable rows with avatars and status badges,\n// slide-over order details drawer, bulk action bar, and pagination. Port of the\n// Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowUpRight,\n Calendar,\n ChevronDown,\n Clock,\n DollarSign,\n Download,\n Eye,\n FileText,\n LucideAngularModule,\n MoreHorizontal,\n PackageCheck,\n Plus,\n RotateCcw,\n Search,\n ShoppingCart,\n TrendingUp,\n Truck,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSheetCloseComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetDescriptionComponent,\n UiSheetFooterComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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\nexport 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\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: {\n label: 'Refunded',\n class: 'bg-destructive/10 text-destructive border-destructive/20',\n dot: 'bg-destructive',\n },\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-order-management-page, [ui-order-management-page]',\n standalone: true,\n // The block renders its own root
(and the sheet portals to body): keep the host out of layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCheckboxComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiSheetCloseComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetDescriptionComponent,\n UiSheetFooterComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n

Orders

\n

Manage and track customer purchases

\n
\n
\n \n \n
\n
\n\n \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 \n
\n
\n \n \n \n
\n \n
\n\n
\n @for (status of statusOptions(); track status.value) {\n \n }\n
\n
\n\n
\n \n
\n
\n\n \n @if (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 \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (order of filteredOrders(); track order.id) {\n \n \n \n \n \n \n \n \n \n \n }\n @if (filteredOrders().length === 0) {\n \n \n \n }\n \n
\n \n Order IDDateCustomerItemsTotalFulfillmentActions
\n \n \n \n {{ order.orderNumber }}\n \n {{ order.date }}\n
\n \n {{\n initials(order.customer.name)\n }}\n \n
\n

{{ order.customer.name }}

\n

{{ order.customer.email }}

\n
\n
\n 		\n
\n \n {{ itemCount(order) }} {{ itemCount(order) === 1 ? 'item' : 'items' }}\n \n \n • {{ order.items[0]?.name\n }}{{ order.items.length > 1 ? ' +' + (order.items.length - 1) + ' more' : '' }}\n \n
\n 		\n ${{ formatCurrency(order.total) }}\n \n \n \n {{ statusBadgeConfig[order.status].label }}\n \n \n \n \n \n Actions for {{ order.orderNumber }}\n \n \n Order actions\n \n \n View details\n \n \n \n Download invoice\n \n @if (order.status === 'processing') {\n \n \n Mark as shipped\n \n }\n \n @if (order.status !== 'refunded') {\n \n \n Issue refund\n \n }\n \n \n
\n No orders match your filter criteria.\n
\n
\n\n \n
\n

\n Showing 1-{{ filteredOrders().length }} of 1,429 orders\n

\n
\n \n \n
\n
\n\n \n
\n
\n @if (selectedOrder(); as detail) {\n
\n \n
\n
\n {{ detail.orderNumber }}\n \n \n {{ statusBadgeConfig[detail.status].label }}\n \n
\n

Placed on {{ detail.date }}

\n

Detailed view of order {{ detail.orderNumber }}

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

\n Customer & Shipping\n

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

{{ detail.customer.name }}

\n

{{ detail.customer.email }}

\n
\n
\n
\n

Delivery address:

\n

{{ detail.customer.address }}

\n

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

\n
\n
\n\n \n @if (detail.carrier && detail.trackingNumber) {\n
\n
\n Fulfillment\n In Transit\n
\n
\n Carrier:\n {{ detail.carrier }}\n
\n
\n Tracking ID:\n {{ detail.trackingNumber }}\n
\n
\n }\n\n \n
\n

Line Items

\n
\n @for (item of detail.items; track item.sku) {\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 \n
\n
\n Subtotal\n ${{ formatCurrency(detail.subtotal) }}\n
\n
\n Estimated Shipping\n \n {{ detail.shipping === 0 ? 'Free' : '$' + formatCurrency(detail.shipping) }}\n \n
\n
\n Tax\n ${{ formatCurrency(detail.tax) }}\n
\n
\n Total\n \n ${{ formatCurrency(detail.total) }}\n \n
\n
\n
\n\n \n \n \n \n
\n
\n }\n
\n
\n \n `,\n})\nexport class UiOrderManagementPageComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Calendar = Calendar\n protected readonly ChevronDown = ChevronDown\n protected readonly Clock = Clock\n protected readonly DollarSign = DollarSign\n protected readonly Download = Download\n protected readonly Eye = Eye\n protected readonly FileText = FileText\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly PackageCheck = PackageCheck\n protected readonly Plus = Plus\n protected readonly RotateCcw = RotateCcw\n protected readonly Search = Search\n protected readonly ShoppingCart = ShoppingCart\n protected readonly TrendingUp = TrendingUp\n protected readonly Truck = Truck\n\n protected readonly statusBadgeConfig = statusBadgeConfig\n\n @Input('class') className?: string\n\n readonly search = signal('')\n readonly statusFilter = signal<'all' | OrderStatus>('all')\n readonly selected = signal>(new Set())\n readonly selectedOrder = signal(null)\n readonly drawerOpen = signal(false)\n\n readonly filteredOrders = computed(() => {\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 readonly statusCounts = computed(() => {\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 readonly statusOptions = computed(() => [\n { value: 'all', label: 'All', count: this.statusCounts().all },\n { value: 'paid', label: 'Paid', count: this.statusCounts().paid },\n { value: 'processing', label: 'Processing', count: this.statusCounts().processing },\n { value: 'shipped', label: 'Shipped', count: this.statusCounts().shipped },\n { value: 'refunded', label: 'Refunded', count: this.statusCounts().refunded },\n ])\n\n readonly allSelected = computed(\n () => this.filteredOrders().length > 0 && this.filteredOrders().every((ord) => this.selected().has(ord.id)),\n )\n readonly someSelected = computed(() => this.filteredOrders().some((ord) => this.selected().has(ord.id)))\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n statusPillClass(value: string): string {\n return cn(\n 'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n this.statusFilter() === value\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n statusCountClass(value: string): string {\n return cn(\n 'ml-1.5 rounded-full px-1.5 py-0.5 text-xs font-normal tabular-nums',\n this.statusFilter() === value ? 'bg-muted text-foreground' : 'text-muted-foreground',\n )\n }\n\n statusBadgeClass(status: OrderStatus): string {\n return cn('gap-1.5 px-2 py-0.5 text-xs font-medium capitalize', statusBadgeConfig[status].class)\n }\n\n statusBadgeDrawerClass(status: OrderStatus): string {\n return cn('gap-1.5 px-2.5 py-0.5 text-xs font-medium capitalize', statusBadgeConfig[status].class)\n }\n\n statusDotClass(status: OrderStatus): string {\n return cn('size-1.5 rounded-full', statusBadgeConfig[status].dot)\n }\n\n setStatusFilter(value: string): void {\n this.statusFilter.set(value as 'all' | OrderStatus)\n }\n\n itemCount(order: Order): number {\n return order.items.reduce((acc, item) => acc + item.quantity, 0)\n }\n\n toggleAll(checked: boolean): void {\n this.selected.set(checked ? new Set(this.filteredOrders().map((ord) => ord.id)) : new Set())\n }\n\n toggleRow(id: string, checked: boolean): void {\n const next = new Set(this.selected())\n if (checked) next.add(id)\n else next.delete(id)\n this.selected.set(next)\n }\n\n clearSelection(): void {\n this.selected.set(new Set())\n }\n\n exportSelected(): void {\n this.clearSelection()\n }\n\n markSelectedShipped(): void {\n this.clearSelection()\n }\n\n openOrderDetails(order: Order): void {\n this.selectedOrder.set(order)\n this.drawerOpen.set(true)\n }\n\n formatCurrency(val: number): string {\n return val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n }\n\n initials(name: string): string {\n return name\n .split(' ')\n .map((p) => p[0])\n .slice(0, 2)\n .join('')\n .toUpperCase()\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/order-management-page/order-management-page.component.ts" }, { "path": "packages/registry-angular/blocks/order-management-page/index.ts", "content": "export {\n UiOrderManagementPageComponent,\n type OrderStatus,\n type OrderItem,\n type CustomerInfo,\n type Order,\n orders,\n} from './order-management-page.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/order-management-page/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/checkbox.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/sheet.json", "https://uipkge.dev/r/angular/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" ] }