themelia-react-ui 2.0.2 → 2.0.4

package/templates/orders-template.tsx

@@ -0,0 +1,1102 @@
+import { useMemo, useState } from 'react';
+import {
+	CheckCircle2,
+	Mail,
+	Package,
+	RotateCcw,
+	Truck,
+	XCircle,
+} from 'lucide-react';
+
+import { ActionMenu } from 'themelia-react-ui/base/action-menu';
+import { Badge } from 'themelia-react-ui/base/badge';
+import { Button } from 'themelia-react-ui/base/buttons';
+import { Card } from 'themelia-react-ui/base/cards';
+import { Select, ToggleField } from 'themelia-react-ui/base/choice-inputs';
+import { FormField, FormSection } from 'themelia-react-ui/base/forms';
+import { DecimalInput } from 'themelia-react-ui/base/forms-numeric';
+import {
+	Item,
+	ItemActions,
+	ItemContent,
+	ItemDescription,
+	ItemGroup,
+	ItemTitle,
+} from 'themelia-react-ui/base/item';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { Input, Textarea } from 'themelia-react-ui/base/text-inputs';
+import { AddressCard, PaymentMethod } from 'themelia-react-ui/blocks/commerce';
+import { MetadataList } from 'themelia-react-ui/base/metadata-list';
+import { ActivityLog, type ActivityLogEntry } from 'themelia-react-ui/features/activities';
+import { ActionDialog, useOverlayVisibility } from 'themelia-react-ui/features/overlays';
+import { TwoColumnLayout } from 'themelia-react-ui/layout/containers';
+import { Page } from 'themelia-react-ui/layout/page';
+import { Money, useMoneyFormatter } from 'themelia-react-ui/primitives';
+import { Text } from 'themelia-react-ui/typography';
+
+type OrderItemFulfillmentState = 'fulfilled' | 'unfulfilled' | 'digital';
+
+interface OrderLineItemRecord {
+	id: string;
+	name: string;
+	variant: string;
+	sku: string;
+	weightLabel?: string;
+	fulfillmentState: OrderItemFulfillmentState;
+	unitPrice: number;
+	orderedQty: number;
+	refundedQty: number;
+	canceledQty: number;
+	refundReason?: string;
+	restockedLocation?: string;
+}
+
+const INITIAL_LINE_ITEMS: OrderLineItemRecord[] = [
+	{
+		id: 'item-sweater',
+		name: 'Merino Wool Crewneck Sweater',
+		variant: 'Heather Gray / Medium',
+		sku: 'MWC-GRY-M',
+		weightLabel: '0.42 kg',
+		fulfillmentState: 'fulfilled',
+		unitPrice: 145,
+		orderedQty: 1,
+		refundedQty: 0,
+		canceledQty: 0,
+	},
+	{
+		id: 'item-shirt',
+		name: 'Washed Linen Oxford Shirt',
+		variant: 'White / Medium',
+		sku: 'WLO-WHT-M',
+		weightLabel: '0.32 kg',
+		fulfillmentState: 'fulfilled',
+		unitPrice: 95,
+		orderedQty: 2,
+		refundedQty: 0,
+		canceledQty: 0,
+	},
+	{
+		id: 'item-scarf',
+		name: 'Cashmere Ribbed Scarf',
+		variant: 'Oatmeal / One Size',
+		sku: 'CRS-OAT-OS',
+		weightLabel: '0.24 kg',
+		fulfillmentState: 'unfulfilled',
+		unitPrice: 110,
+		orderedQty: 1,
+		refundedQty: 0,
+		canceledQty: 0,
+	},
+	{
+		id: 'item-giftcard',
+		name: 'Oak & Loom Digital Gift Card',
+		variant: '50.00 USD denomination · Recipient: ava.bennett@example.com',
+		sku: 'DGC-50-USD',
+		fulfillmentState: 'digital',
+		unitPrice: 50,
+		orderedQty: 1,
+		refundedQty: 0,
+		canceledQty: 0,
+	},
+	{
+		id: 'item-tote',
+		name: 'Everyday Canvas Tote',
+		variant: 'Natural / One Size',
+		sku: 'ECT-NAT-OS',
+		weightLabel: '0.28 kg',
+		fulfillmentState: 'fulfilled',
+		unitPrice: 45,
+		orderedQty: 1,
+		refundedQty: 1,
+		canceledQty: 0,
+		refundReason: 'Customer exchanged size/color',
+		restockedLocation: 'Brooklyn Warehouse',
+	},
+	{
+		id: 'item-beanie',
+		name: 'Ribbed Merino Beanie',
+		variant: 'Charcoal / One Size',
+		sku: 'RMB-CHR-OS',
+		weightLabel: '0.15 kg',
+		fulfillmentState: 'unfulfilled',
+		unitPrice: 38,
+		orderedQty: 1,
+		refundedQty: 0,
+		canceledQty: 1,
+		refundReason: 'Canceled before fulfillment',
+		restockedLocation: 'Brooklyn Warehouse',
+	},
+];
+
+const REFUND_REASONS = [
+	{ value: 'size_exchange', label: 'Size or fit exchange' },
+	{ value: 'customer_changed_mind', label: 'Customer changed mind' },
+	{ value: 'damaged_in_transit', label: 'Arrived damaged' },
+	{ value: 'wrong_item_sent', label: 'Incorrect item shipped' },
+];
+
+const CARRIER_OPTIONS = [
+	{ value: 'UPS Ground', label: 'UPS Ground' },
+	{ value: 'UPS 2nd Day Air', label: 'UPS 2nd Day Air' },
+	{ value: 'FedEx Home Delivery', label: 'FedEx Home Delivery' },
+	{ value: 'DHL Express', label: 'DHL Express' },
+];
+
+const INITIAL_TIMELINE: ActivityLogEntry[] = [
+	{
+		id: 'evt-refund-tote',
+		kind: 'event',
+		label: 'Refund',
+		actor: { name: 'Maya Lin', initials: 'ML' },
+		action: 'refunded',
+		target: '45.00 USD',
+		description: '1 × Everyday Canvas Tote returned to Visa •••• 4242 · Restocked at Brooklyn Warehouse',
+		timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
+		icon: RotateCcw,
+		tone: 'warning',
+	},
+	{
+		id: 'evt-shipped',
+		kind: 'event',
+		label: 'Fulfillment #1042-F1',
+		actor: { name: 'Brooklyn Warehouse', initials: 'BW' },
+		action: 'shipped 3 physical items via',
+		target: 'UPS Ground #1Z999AA10123456784',
+		timestamp: new Date(Date.now() - 18 * 60 * 60 * 1000).toISOString(),
+		icon: Truck,
+		tone: 'info',
+	},
+	{
+		id: 'evt-digital',
+		kind: 'event',
+		label: 'Digital #1042-D1',
+		actor: { name: 'Online Store', initials: 'OS' },
+		action: 'emailed a 50.00 USD digital gift card to',
+		target: 'ava.bennett@example.com',
+		timestamp: new Date(Date.now() - 23 * 60 * 60 * 1000).toISOString(),
+		icon: Mail,
+		tone: 'success',
+	},
+	{
+		id: 'evt-paid',
+		kind: 'event',
+		label: 'Payment',
+		actor: { name: 'Ava Bennett', initials: 'AB' },
+		action: 'authorized and captured',
+		target: '519.21 USD on Visa ending in 4242',
+		timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+		icon: CheckCircle2,
+		tone: 'success',
+	},
+];
+
+export function OrdersAdminTemplate() {
+	// Sample records are priced in USD; bind that once for every text amount.
+	const formatMoney = useMoneyFormatter({ currency: 'USD' });
+	const [lineItems, setLineItems] = useState<OrderLineItemRecord[]>(INITIAL_LINE_ITEMS);
+	const [timeline, setTimeline] = useState<ActivityLogEntry[]>(INITIAL_TIMELINE);
+	const [orderNote, setOrderNote] = useState(
+		'Please leave package with the building doorman if I am not home.',
+	);
+
+	const [noteDraft, setNoteDraft] = useState(orderNote);
+	// Shipment tracking state
+	const [carrier, setCarrier] = useState('UPS Ground');
+	const [trackingNumber, setTrackingNumber] = useState('1Z999AA10123456784');
+	const [notifyTrackingCustomer, setNotifyTrackingCustomer] = useState(true);
+	const [trackingDraft, setTrackingDraft] = useState({ carrier, trackingNumber, notifyCustomer: notifyTrackingCustomer });
+
+	// Refund dialog state
+	const refundDialog = useOverlayVisibility();
+	const trackingDialog = useOverlayVisibility();
+	const noteDialog = useOverlayVisibility();
+
+	const [refundSelection, setRefundSelection] = useState<Record<string, number>>({
+		'item-sweater': 0,
+		'item-shirt': 1,
+		'item-scarf': 0,
+		'item-giftcard': 0,
+	});
+	const [refundReason, setRefundReason] = useState('size_exchange');
+	const [restockInventory, setRestockInventory] = useState(true);
+	const [notifyCustomer, setNotifyCustomer] = useState(true);
+	const [refundNote, setRefundNote] = useState('');
+
+	const fulfilledPhysicalItems = useMemo(
+		() =>
+			lineItems.filter(
+				(item) =>
+					item.fulfillmentState === 'fulfilled' &&
+					item.orderedQty - item.refundedQty - item.canceledQty > 0,
+			),
+		[lineItems],
+	);
+
+	const unfulfilledPhysicalItems = useMemo(
+		() =>
+			lineItems.filter(
+				(item) =>
+					item.fulfillmentState === 'unfulfilled' &&
+					item.orderedQty - item.refundedQty - item.canceledQty > 0,
+			),
+		[lineItems],
+	);
+
+	const fulfilledDigitalItems = useMemo(
+		() =>
+			lineItems.filter(
+				(item) =>
+					item.fulfillmentState === 'digital' &&
+					item.orderedQty - item.refundedQty - item.canceledQty > 0,
+			),
+		[lineItems],
+	);
+
+	const removedItems = useMemo(
+		() => lineItems.filter((item) => item.refundedQty > 0 || item.canceledQty > 0),
+		[lineItems],
+	);
+
+	const activeSubtotal = useMemo(
+		() =>
+			lineItems.reduce((sum, item) => {
+				const activeUnits = item.orderedQty - item.canceledQty;
+				return sum + activeUnits * item.unitPrice;
+			}, 0),
+		[lineItems],
+	);
+
+	const totalRefundedAmount = useMemo(
+		() =>
+			lineItems.reduce((sum, item) => sum + item.refundedQty * item.unitPrice, 0),
+		[lineItems],
+	);
+
+	const discountAmount = 50.25;
+	const shippingAmount = 0;
+	const taxAmount = 29.46;
+	const originalCapturedTotal = INITIAL_LINE_ITEMS.reduce((sum, item) => sum + (item.orderedQty - item.canceledQty) * item.unitPrice, 0) - discountAmount + shippingAmount + taxAmount;
+	const netPayment = Math.max(0, originalCapturedTotal - totalRefundedAmount);
+
+	const draftRefundTotal = useMemo(
+		() =>
+			lineItems.reduce((sum, item) => {
+				const requested = refundSelection[item.id] ?? 0;
+				const selectedQty = Number.isFinite(requested) ? Math.min(Math.max(0, Math.floor(requested)), item.orderedQty - item.refundedQty - item.canceledQty) : 0;
+				return sum + selectedQty * item.unitPrice;
+			}, 0),
+		[lineItems, refundSelection],
+	);
+
+	const openRefundForSingleItem = (itemId: string) => {
+		setRefundSelection({
+			'item-sweater': 0,
+			'item-shirt': 0,
+			'item-scarf': 0,
+			'item-giftcard': 0,
+			[itemId]: 1,
+		});
+		refundDialog.show();
+	};
+
+	const handleFulfillItem = (itemId: string) => {
+		const targetItem = lineItems.find((item) => item.id === itemId);
+		if (!targetItem) return;
+
+		setLineItems((current) =>
+			current.map((item) =>
+				item.id === itemId ? { ...item, fulfillmentState: 'fulfilled' } : item,
+			),
+		);
+
+		setTimeline((current) => [
+			{
+				id: `evt-fulfill-${Date.now()}`,
+				kind: 'event',
+				label: 'Fulfillment #1042-F1',
+				actor: { name: 'Maya Lin', initials: 'ML' },
+				action: 'fulfilled',
+				target: `${targetItem.orderedQty - targetItem.refundedQty - targetItem.canceledQty} × ${targetItem.name}`,
+				description: `Added to shipment ${carrier} #${trackingNumber}`,
+				timestamp: new Date().toISOString(),
+				icon: Package,
+				tone: 'success',
+			},
+			...current,
+		]);
+	};
+
+	const handleCancelUnfulfilledItem = (itemId: string) => {
+		const targetItem = lineItems.find((item) => item.id === itemId);
+		if (!targetItem) return;
+		const remainingQty =
+			targetItem.orderedQty - targetItem.refundedQty - targetItem.canceledQty;
+		if (remainingQty <= 0) return;
+
+		setLineItems((current) =>
+			current.map((item) =>
+				item.id === itemId
+					? {
+							...item,
+							canceledQty: item.canceledQty + remainingQty,
+							refundReason: 'Canceled before fulfillment',
+							restockedLocation: 'Brooklyn Warehouse',
+						}
+					: item,
+			),
+		);
+
+		setTimeline((current) => [
+			{
+				id: `evt-cancel-${Date.now()}`,
+				kind: 'event',
+				label: 'Cancellation',
+				actor: { name: 'Maya Lin', initials: 'ML' },
+				action: 'canceled unfulfilled item',
+				target: `${remainingQty} × ${targetItem.name}`,
+				description: 'Inventory released at Brooklyn Warehouse',
+				timestamp: new Date().toISOString(),
+				icon: XCircle,
+				tone: 'destructive',
+			},
+			...current,
+		]);
+	};
+
+	const handleResendGiftCard = () => {
+		setTimeline((current) => [
+			{
+				id: `evt-resend-dgc-${Date.now()}`,
+				kind: 'event',
+				label: 'Digital #1042-D1',
+				actor: { name: 'Maya Lin', initials: 'ML' },
+				action: 'resent digital gift card email to',
+				target: 'ava.bennett@example.com',
+				timestamp: new Date().toISOString(),
+				icon: Mail,
+				tone: 'info',
+			},
+			...current,
+		]);
+	};
+
+	const handleConfirmRefund = () => {
+		if (draftRefundTotal <= 0) {
+			refundDialog.hide();
+			return;
+		}
+
+		const reasonLabel =
+			REFUND_REASONS.find((r) => r.value === refundReason)?.label ?? 'Customer return';
+		const refundedNames: string[] = [];
+
+		const nextLineItems = lineItems.map((item) => {
+				const requested = refundSelection[item.id] ?? 0;
+				const selectedQty = Number.isFinite(requested) ? Math.min(Math.max(0, Math.floor(requested)), item.orderedQty - item.refundedQty - item.canceledQty) : 0;
+				if (selectedQty <= 0) return item;
+				const maxRefundable = item.orderedQty - item.refundedQty - item.canceledQty;
+				const applied = Math.min(selectedQty, maxRefundable);
+				if (applied > 0) {
+					refundedNames.push(`${applied} × ${item.name}`);
+				}
+				return {
+					...item,
+					refundedQty: item.refundedQty + applied,
+					refundReason: reasonLabel,
+					restockedLocation: restockInventory ? 'Brooklyn Warehouse' : undefined,
+				};
+			});
+		setLineItems(nextLineItems);
+
+		setTimeline((current) => [
+			{
+				id: `evt-refund-${Date.now()}`,
+				kind: 'event',
+				label: 'Refund',
+				actor: { name: 'Maya Lin', initials: 'ML' },
+				action: 'refunded',
+				target: formatMoney(draftRefundTotal),
+				description: `for ${refundedNames.join(', ')} (${reasonLabel}${restockInventory ? ' · Restocked at Brooklyn Warehouse' : ''})${refundNote.trim() ? ` · ${refundNote.trim()}` : ''}${notifyCustomer ? ' · Customer notification requested' : ''}`,
+				timestamp: new Date().toISOString(),
+				icon: RotateCcw,
+				tone: 'warning',
+			},
+			...current,
+		]);
+
+		setRefundSelection({});
+		setRefundNote('');
+		refundDialog.hide();
+	};
+
+	const unfulfilledUnitCount = unfulfilledPhysicalItems.reduce(
+		(sum, item) => sum + (item.orderedQty - item.refundedQty - item.canceledQty),
+		0,
+	);
+
+	const handleFulfillRemaining = () =>
+		unfulfilledPhysicalItems.forEach((item) => handleFulfillItem(item.id));
+
+	return (
+		<Page
+			header={{
+				title: 'Order #1042',
+				description: 'October 14, 2026 at 2:14 pm · Online Store',
+				titleBadges: [
+					{
+						label: totalRefundedAmount > 0 ? 'Partially refunded' : 'Paid',
+						tone: totalRefundedAmount > 0 ? 'warning' : 'success',
+					},
+					{
+						label: unfulfilledUnitCount > 0 ? 'Partially fulfilled' : 'Fulfilled',
+						tone: unfulfilledUnitCount > 0 ? 'info' : 'success',
+					},
+				],
+				// Fulfillment is the order's next step, so it is the route's one primary command
+				// while physical items remain unfulfilled.
+				primaryAction: {
+					label: `Fulfill ${unfulfilledUnitCount === 1 ? 'item' : 'items'}`,
+					visible: unfulfilledUnitCount > 0,
+					onClick: handleFulfillRemaining,
+				},
+				secondaryActions: [{ label: 'Refund items', onClick: refundDialog.show }],
+			}}
+		>
+			<TwoColumnLayout
+				stickyAside
+				main={
+					<Stack gap="2xl">
+						{/* Group 1: Fulfilled Physical Shipment */}
+						<Card
+							title="Fulfilled shipment · #1042-F1"
+							headerAction={
+								<Button
+									size="sm"
+									onClick={() => { setTrackingDraft({ carrier, trackingNumber, notifyCustomer: notifyTrackingCustomer }); trackingDialog.show(); }}
+								>
+									Edit tracking
+								</Button>
+							}
+						>
+							<Stack gap="2xl">
+								<MetadataList
+									columns={3}
+									items={[
+										{
+											id: 'carrier',
+											label: 'Carrier',
+											value: carrier,
+										},
+										{
+											id: 'tracking',
+											label: 'Tracking',
+											value: { kind: 'mono', value: trackingNumber },
+										},
+										{
+											id: 'origin',
+											label: 'Origin',
+											value: 'Brooklyn Warehouse',
+										},
+									]}
+								/>
+
+								<ItemGroup>
+									{fulfilledPhysicalItems.map((item) => {
+										const activeQty =
+											item.orderedQty - item.refundedQty - item.canceledQty;
+										return (
+											<Item key={item.id} size="md">
+												<ItemContent className="basis-48">
+													<ItemTitle>{item.name}</ItemTitle>
+													<ItemDescription>
+														{item.variant} · SKU {item.sku}
+														{item.weightLabel ? ` · ${item.weightLabel}` : ''}
+													</ItemDescription>
+												</ItemContent>
+												<ItemActions>
+													<Stack direction="horizontal" gap="md" align="center">
+														<Text size="sm" type="secondary">
+															{formatMoney(item.unitPrice)} × {activeQty}
+														</Text>
+														<Money
+															amount={item.unitPrice * activeQty}
+															currency="USD"
+															weight="semibold"
+														/>
+														<ActionMenu
+															actions={[
+																{
+																	id: `refund-${item.id}`,
+																	label: 'Refund item',
+																	icon: RotateCcw,
+																	onClick: () => openRefundForSingleItem(item.id),
+																},
+															]}
+														/>
+													</Stack>
+												</ItemActions>
+											</Item>
+										);
+									})}
+								</ItemGroup>
+							</Stack>
+						</Card>
+
+						{/* Group 2: Unfulfilled Physical Items (if any remain unfulfilled) */}
+						{unfulfilledPhysicalItems.length > 0 && (
+							<Card title="Unfulfilled · #1042-U1">
+								<Stack gap="2xl">
+									<MetadataList
+										columns={3}
+										items={[
+											{
+												id: 'location',
+												label: 'Location',
+												value: 'Brooklyn Warehouse',
+											},
+											{
+												id: 'shipping-method',
+												label: 'Delivery method',
+												value: 'UPS Ground',
+											},
+											{
+												id: 'stock-status',
+												label: 'Stock',
+												value: {
+													kind: 'badge',
+													value: 'Ready to pack',
+													badgeTone: 'success',
+												},
+											},
+										]}
+									/>
+
+									<ItemGroup>
+										{unfulfilledPhysicalItems.map((item) => {
+											const activeQty =
+												item.orderedQty - item.refundedQty - item.canceledQty;
+											return (
+												<Item key={item.id} size="md">
+													<ItemContent className="basis-48">
+														<ItemTitle>{item.name}</ItemTitle>
+														<ItemDescription>
+															{item.variant} · SKU {item.sku}
+															{item.weightLabel ? ` · ${item.weightLabel}` : ''}
+														</ItemDescription>
+													</ItemContent>
+													<ItemActions>
+														<Stack direction="horizontal" gap="md" align="center">
+															<Text size="sm" type="secondary">
+																{formatMoney(item.unitPrice)} × {activeQty}
+															</Text>
+															<Money
+																amount={item.unitPrice * activeQty}
+																currency="USD"
+																weight="semibold"
+															/>
+															<ActionMenu
+																actions={[
+																	{
+																		id: `fulfill-${item.id}`,
+																		label: 'Mark as fulfilled',
+																		icon: Package,
+																		onClick: () => handleFulfillItem(item.id),
+																	},
+																	{
+																		id: `cancel-${item.id}`,
+																		label: 'Cancel item',
+																		icon: XCircle,
+																		tone: 'destructive',
+																		onClick: () =>
+																			handleCancelUnfulfilledItem(item.id),
+																	},
+																]}
+															/>
+														</Stack>
+													</ItemActions>
+												</Item>
+											);
+										})}
+									</ItemGroup>
+								</Stack>
+							</Card>
+						)}
+
+						{/* Group 3: Digital Delivery */}
+						<Card
+							title="Digital delivery · #1042-D1"
+							headerAction={
+								<Button size="sm" onClick={handleResendGiftCard}>
+									Resend gift card
+								</Button>
+							}
+						>
+							<Stack gap="2xl">
+								<MetadataList
+									columns={3}
+									items={[
+										{
+											id: 'recipient',
+											label: 'Recipient',
+											value: { kind: 'email', value: 'ava.bennett@example.com' },
+										},
+										{
+											id: 'code',
+											label: 'Gift card code',
+											value: { kind: 'mono', value: '•••• •••• •••• 8F2A' },
+										},
+										{
+											id: 'status',
+											label: 'Status',
+											value: {
+												kind: 'badge',
+												value: 'Sent Oct 14',
+												badgeTone: 'success',
+											},
+										},
+									]}
+								/>
+
+								<ItemGroup>
+									{fulfilledDigitalItems.map((item) => {
+										const activeQty =
+											item.orderedQty - item.refundedQty - item.canceledQty;
+										return (
+											<Item key={item.id} size="md">
+												<ItemContent className="basis-48">
+													<ItemTitle>{item.name}</ItemTitle>
+													<ItemDescription>
+														{item.variant} · SKU {item.sku}
+													</ItemDescription>
+												</ItemContent>
+												<ItemActions>
+													<Stack direction="horizontal" gap="md" align="center">
+														<Text size="sm" type="secondary">
+															{formatMoney(item.unitPrice)} × {activeQty}
+														</Text>
+														<Money
+															amount={item.unitPrice * activeQty}
+															currency="USD"
+															weight="semibold"
+														/>
+														<ActionMenu
+															actions={[
+																{
+																	id: `resend-${item.id}`,
+																	label: 'Resend email',
+																	icon: Mail,
+																	onClick: handleResendGiftCard,
+																},
+																{
+																	id: `refund-${item.id}`,
+																	label: 'Refund gift card',
+																	icon: RotateCcw,
+																	onClick: () => openRefundForSingleItem(item.id),
+																},
+															]}
+														/>
+													</Stack>
+												</ItemActions>
+											</Item>
+										);
+									})}
+								</ItemGroup>
+							</Stack>
+						</Card>
+
+						{/* Group 4: Refunded & Canceled Items */}
+						{removedItems.length > 0 && (
+							<Card
+								title="Refunded & canceled"
+								headerAction={
+									<Button size="sm" onClick={refundDialog.show}>
+										Refund more items
+									</Button>
+								}
+							>
+								<ItemGroup>
+									{removedItems.map((item) => {
+										const isCanceled = item.canceledQty > 0 && item.refundedQty === 0;
+										const qty = isCanceled ? item.canceledQty : item.refundedQty;
+										return (
+											<Item key={`removed-${item.id}`} size="md">
+												<ItemContent className="basis-48">
+													<ItemTitle>
+														<Stack direction="horizontal" gap="sm" align="center" wrap>
+															<Text tag="span" size="inherit" weight="semibold" lineHeight="tight">{item.name}</Text>
+															<Badge tone={isCanceled ? 'destructive' : 'warning'}>
+																{isCanceled ? 'Canceled' : 'Refunded'}
+															</Badge>
+														</Stack>
+													</ItemTitle>
+													<ItemDescription>
+														{item.variant} · SKU {item.sku}
+														{item.refundReason ? ` · ${item.refundReason}` : ''}
+														{item.restockedLocation
+															? ` · Restocked at ${item.restockedLocation}`
+															: ''}
+													</ItemDescription>
+												</ItemContent>
+												<ItemActions>
+													<Stack direction="horizontal" gap="lg" align="center">
+														<Text size="sm" type="secondary">
+															{formatMoney(item.unitPrice)} × {qty}
+														</Text>
+														<Money
+															amount={isCanceled ? 0 : -(item.unitPrice * qty)}
+															currency="USD"
+															weight="semibold"
+														/>
+													</Stack>
+												</ItemActions>
+											</Item>
+										);
+									})}
+								</ItemGroup>
+							</Card>
+						)}
+
+						{/* Payment Summary Card: the page header's badge states the payment status once. */}
+						<Card title="Payment">
+							<Stack gap="2xl">
+								<MetadataList
+									layout="rows"
+									density="compact"
+									valueAlign="end"
+									items={[
+										{
+											id: 'subtotal',
+											label: 'Subtotal (5 active items)',
+											value: { kind: 'money', value: activeSubtotal, currency: 'USD' },
+										},
+										{
+											id: 'discount',
+											label: 'Discount · AUTUMN15 (15% off apparel)',
+											value: { kind: 'money', value: -discountAmount, currency: 'USD' },
+										},
+										{
+											id: 'shipping',
+											label: `Shipping · ${carrier} (1.4 kg)`,
+											value: { kind: 'money', value: shippingAmount, currency: 'USD' },
+										},
+										{
+											id: 'taxes',
+											label: 'Taxes · NY State & NYC Local 8.875%',
+											value: { kind: 'money', value: taxAmount, currency: 'USD' },
+										},
+										{
+											id: 'total',
+											label: <Text weight="semibold">Total</Text>,
+											value: (
+												<Money
+													amount={originalCapturedTotal}
+													currency="USD"
+													weight="bold"
+												/>
+											),
+										},
+									]}
+								/>
+
+								<MetadataList
+									layout="rows"
+									density="compact"
+									valueAlign="end"
+									items={[
+										{
+											id: 'paid',
+											label: 'Paid by customer (Visa •••• 4242)',
+											value: {
+												kind: 'money' as const,
+												value: originalCapturedTotal,
+												currency: 'USD',
+											},
+										},
+										...(totalRefundedAmount > 0
+											? [
+													{
+														id: 'refunded',
+														label: 'Refunded to Visa •••• 4242',
+														value: {
+															kind: 'money' as const,
+															value: -totalRefundedAmount,
+															currency: 'USD',
+														},
+													},
+												]
+											: []),
+										{
+											id: 'net',
+											label: <Text weight="semibold">Net payment</Text>,
+											value: <Money amount={netPayment} currency="USD" weight="bold" />,
+										},
+									]}
+								/>
+							</Stack>
+						</Card>
+
+						{/* Order Timeline */}
+						<Card title="Timeline">
+							<ActivityLog bare entries={timeline} itemSpacing="compact" />
+						</Card>
+					</Stack>
+				}
+				aside={
+					<Stack gap="2xl">
+						{/* Customer Metadata Card */}
+						<Card title="Customer">
+							<MetadataList
+								columns={1}
+								items={[
+									{
+										id: 'customer-name',
+										label: 'Name',
+										value: {
+											kind: 'text',
+											value: 'Ava Bennett',
+										},
+									},
+									{
+										id: 'customer-orders',
+										label: 'Orders',
+										value: `12 orders (${formatMoney(1840)} spent)`,
+									},
+									{
+										id: 'customer-email',
+										label: 'Email',
+										value: {
+											kind: 'email',
+											value: 'ava.bennett@example.com',
+										},
+									},
+									{
+										id: 'customer-phone',
+										label: 'Phone',
+										value: {
+											kind: 'phone',
+											value: '+12125550148',
+											display: '+1 (212) 555-0148',
+										},
+									},
+								]}
+							/>
+						</Card>
+
+						{/* Shipping Address Card */}
+						<AddressCard
+							surface="card"
+							kind="shipping"
+							default
+							name="Ava Bennett"
+							line1="214 Mercer Street"
+							line2="Apt 4B"
+							city="New York, NY"
+							postalCode="10012"
+							country="United States"
+							phone="+1 (212) 555-0148"
+						/>
+
+						{/* Billing Address Card */}
+						<AddressCard
+							surface="card"
+							kind="billing"
+							name="Ava Bennett"
+							line1="214 Mercer Street"
+							line2="Apt 4B"
+							city="New York, NY"
+							postalCode="10012"
+							country="United States"
+						/>
+
+						{/* Payment Method Card */}
+						<PaymentMethod
+							surface="card"
+							brand="visa"
+							last4="4242"
+							expiry="08/28"
+							holderName="Ava Bennett"
+							default
+						/>
+
+						{/* Customer Delivery Note */}
+						<Card
+							title="Notes"
+							headerAction={
+								<Button
+									tone="secondary"
+									buttonStyle="ghost"
+									size="sm"
+									onClick={() => { setNoteDraft(orderNote); noteDialog.show(); }}
+								>
+									Edit
+								</Button>
+							}
+						>
+							<Text size="sm" type="secondary">
+								{orderNote}
+							</Text>
+						</Card>
+					</Stack>
+				}
+			/>
+
+			{/* Edit Tracking Dialog */}
+			<ActionDialog
+				{...trackingDialog.overlayProps}
+				title="Edit tracking · Shipment #1042-F1"
+				description="Update carrier and tracking details for this fulfilled shipment."
+				strings={{
+					confirm: 'Save tracking',
+					cancel: 'Cancel',
+				}}
+				onConfirm={() => { setCarrier(trackingDraft.carrier); setTrackingNumber(trackingDraft.trackingNumber); setNotifyTrackingCustomer(trackingDraft.notifyCustomer); trackingDialog.hide(); }}
+			>
+				<FormSection title="Shipment tracking">
+					<FormField label="Shipping carrier" required>
+						<Select
+							aria-label="Shipping carrier"
+							options={CARRIER_OPTIONS}
+							value={trackingDraft.carrier}
+							onValueChange={(value) => setTrackingDraft((draft) => ({ ...draft, carrier: String(value) }))}
+						/>
+					</FormField>
+					<FormField label="Tracking number" required>
+						<Input
+							aria-label="Tracking number"
+							value={trackingDraft.trackingNumber}
+							onChange={(event) => setTrackingDraft((draft) => ({ ...draft, trackingNumber: event.target.value }))}
+						/>
+					</FormField>
+					<ToggleField
+						kind="checkbox"
+						value={trackingDraft.notifyCustomer}
+						onValueChange={(checked) => setTrackingDraft((draft) => ({ ...draft, notifyCustomer: Boolean(checked) }))}
+						label="Send tracking update email to customer"
+					/>
+				</FormSection>
+			</ActionDialog>
+
+			{/* Edit Order Note Dialog */}
+			<ActionDialog
+				{...noteDialog.overlayProps}
+				title="Edit order note"
+				description="Update delivery instructions or internal notes for Order #1042."
+				strings={{
+					confirm: 'Save note',
+					cancel: 'Cancel',
+				}}
+				onConfirm={() => { setOrderNote(noteDraft); noteDialog.hide(); }}
+			>
+				<FormSection title="Order note">
+					<FormField label="Note">
+						<Textarea
+							aria-label="Order note"
+							rows={3}
+							value={noteDraft}
+							onChange={(event) => setNoteDraft(event.target.value)}
+						/>
+					</FormField>
+				</FormSection>
+			</ActionDialog>
+
+			{/* Refund Items Dialog */}
+			<ActionDialog
+				{...refundDialog.overlayProps}
+				title="Refund items · Order #1042"
+				description="Select quantities to refund and return to inventory."
+				strings={{
+					confirm:
+						draftRefundTotal > 0
+							? `Refund ${formatMoney(draftRefundTotal)}`
+							: 'Select items to refund',
+					cancel: 'Cancel',
+				}}
+				onConfirm={handleConfirmRefund}
+			>
+				<Stack gap="2xl">
+					<FormSection title="Refundable line items">
+						<Stack gap="md">
+							{lineItems
+								.filter((item) => item.orderedQty - item.refundedQty - item.canceledQty > 0)
+								.map((item) => {
+									const maxQty = item.orderedQty - item.refundedQty - item.canceledQty;
+									const currentQty = refundSelection[item.id] ?? 0;
+									return (
+										<Stack
+											key={item.id}
+											direction="horizontal"
+											justify="between"
+											align="center"
+											gap="md"
+										>
+											<Stack gap="xs">
+												<Text weight="medium">{item.name}</Text>
+												<Text size="xs" type="secondary">
+													{item.variant} · {formatMoney(item.unitPrice)} × {maxQty} available
+												</Text>
+											</Stack>
+											<DecimalInput
+												aria-label={`Refund quantity for ${item.name}`}
+												decimalPlaces={0}
+												step={1}
+												min={0}
+												max={maxQty}
+												value={String(currentQty)}
+												onChange={(event) =>
+													setRefundSelection((prev) => ({
+														...prev,
+														[item.id]: Math.max(
+															0,
+															Math.min(maxQty, Number(event.target.value || 0)),
+														),
+													}))
+												}
+											/>
+										</Stack>
+									);
+								})}
+						</Stack>
+					</FormSection>
+					<FormSection title="Refund details">
+						<Stack gap="md">
+							<FormField label="Reason for refund" required>
+								<Select
+									aria-label="Reason for refund"
+									options={REFUND_REASONS}
+									value={refundReason}
+									onValueChange={(value) => setRefundReason(String(value))}
+								/>
+							</FormField>
+
+							<FormField label="Staff note (optional)">
+								<Textarea
+									aria-label="Staff note"
+									value={refundNote}
+									onChange={(event) => setRefundNote(event.target.value)}
+									placeholder="Reason for refund or inspection note..."
+									rows={2}
+								/>
+							</FormField>
+
+							<ToggleField
+								kind="checkbox"
+								value={restockInventory}
+								onValueChange={(checked) => setRestockInventory(Boolean(checked))}
+								label="Restock returned items at Brooklyn Warehouse"
+							/>
+							<ToggleField
+								kind="checkbox"
+								value={notifyCustomer}
+								onValueChange={(checked) => setNotifyCustomer(Boolean(checked))}
+								label="Send refund notification email to customer"
+							/>
+						</Stack>
+					</FormSection>
+				</Stack>
+			</ActionDialog>
+		</Page>
+	);
+}
+
+export default OrdersAdminTemplate;