@burdenoff/microfe-store 2026.704.1 → 2026.706.1

package/dist/pages/OrdersPage.js

@@ -4,196 +4,74 @@ import { formatPrice as n } from "../utils/index.js";
 import { InstallAppModal as r } from "../components/InstallAppModal.js";
 import { useInstallations as i } from "../hooks/useInstallations.js";
 import { useOrders as a } from "../hooks/useOrders.js";
-import { useMemo as o, useState as s } from "react";
-import { useI18n as c } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ArrowLeft as l, CheckCircle as u, Clock as d, Download as f, Loader2 as p, Package as m, RefreshCw as h, ShoppingBag as g, XCircle as _ } from "lucide-react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useCallback as o, useMemo as s, useState as c } from "react";
+import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowLeft as l, CheckCircle as u, ChevronRight as d, Clock as f, Download as p, Loader2 as m, Package as h, RefreshCw as g, ShoppingBag as _, XCircle as v } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 import { useNavigate as x } from "react-router-dom";
 import { GlassCard as S, IllustratedEmptyState as C, PagePurpose as w } from "@burdenoff/fe-libs/ui";
 //#region src/pages/OrdersPage.tsx
-var T = (e) => {
+var T = [
+	"COMPLETED",
+	"FULFILLED",
+	"PROCESSED"
+], E = (e) => {
 	switch (e) {
 		case "COMPLETED":
 		case "FULFILLED":
 		case "PROCESSED": return {
 			icon: u,
-			color: "text-status-success-text bg-status-success-bg-subtle/10",
+			classes: "bg-status-success-bg-subtle/15 text-status-success-text border-status-success-text/20",
 			label: "Completed"
 		};
 		case "PROCESSING": return {
-			icon: d,
-			color: "text-status-warning-text bg-status-warning-bg-subtle/10",
+			icon: f,
+			classes: "bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20",
 			label: "Processing"
 		};
 		case "PENDING": return {
-			icon: d,
-			color: "text-status-warning-text bg-status-warning-bg-subtle/10",
+			icon: f,
+			classes: "bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20",
 			label: "Pending"
 		};
 		case "FAILED": return {
-			icon: _,
-			color: "text-status-error-text bg-status-error-bg-subtle/10",
+			icon: v,
+			classes: "bg-status-error-bg-subtle/15 text-status-error-text border-status-error-text/20",
 			label: "Failed"
 		};
 		case "REFUNDED": return {
-			icon: h,
-			color: "text-status-warning-text bg-status-warning-bg-subtle/10",
+			icon: g,
+			classes: "bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20",
 			label: "Refunded"
 		};
 		case "CANCELLED": return {
-			icon: h,
-			color: "text-text-muted bg-bg-sunken",
+			icon: g,
+			classes: "bg-bg-sunken text-text-muted border-border-default",
 			label: "Cancelled"
 		};
 		default: return {
-			icon: d,
-			color: "text-text-muted",
+			icon: f,
+			classes: "bg-bg-sunken text-text-muted border-border-default",
 			label: e
 		};
 	}
-}, E = ({ item: e, orderId: t, orderStatus: r, onOpenInstallModal: i, installing: a }) => {
-	let o = r === "COMPLETED" || r === "FULFILLED" || r === "PROCESSED", s = e.productType !== "PHYSICAL" && e.productType !== "MERCHANDISE";
-	return /* @__PURE__ */ b("div", {
-		className: "flex items-center gap-4 rounded-lg border border-border-seam bg-bg-sunken/50 p-4",
-		children: [
-			/* @__PURE__ */ y("div", {
-				className: "size-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken",
-				children: e.productIcon ? /* @__PURE__ */ y("img", {
-					src: e.productIcon,
-					alt: e.productName,
-					className: "size-full object-cover"
-				}) : /* @__PURE__ */ y("div", {
-					className: "flex size-full items-center justify-center text-lg font-bold text-text-muted",
-					children: e.productName.charAt(0)
-				})
-			}),
-			/* @__PURE__ */ b("div", {
-				className: "flex-1 min-w-0",
-				children: [/* @__PURE__ */ y("h4", {
-					className: "font-medium text-text-primary truncate",
-					children: e.productName
-				}), /* @__PURE__ */ b("div", {
-					className: "flex items-center gap-2 mt-1",
-					children: [/* @__PURE__ */ y("span", {
-						className: "inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-muted",
-						children: e.productType
-					}), /* @__PURE__ */ b("span", {
-						className: "text-sm text-text-muted",
-						children: [
-							e.quantity,
-							" x ",
-							n(e.unitPrice)
-						]
-					})]
-				})]
-			}),
-			/* @__PURE__ */ y("div", {
-				className: "text-right",
-				children: /* @__PURE__ */ y("p", {
-					className: "font-semibold tabular-nums text-text-primary",
-					children: n(e.totalPrice)
-				})
-			}),
-			/* @__PURE__ */ y("div", {
-				className: "flex-shrink-0",
-				children: e.installed ? /* @__PURE__ */ b("span", {
-					className: "inline-flex items-center gap-1.5 rounded-lg bg-status-success-bg-subtle/10 px-4 py-2 text-sm font-medium text-status-success-text",
-					children: [/* @__PURE__ */ y(u, { className: "size-4" }), "Installed"]
-				}) : o && s ? /* @__PURE__ */ y("button", {
-					type: "button",
-					onClick: () => i(t, e),
-					disabled: a,
-					className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90 disabled:opacity-50",
-					children: a ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(p, { className: "size-4 animate-spin" }), "Installing…"] }) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(f, { className: "size-4" }), "Install App"] })
-				}) : null
-			})
-		]
-	});
-}, D = ({ order: e, onOpenInstallModal: t, installingItem: r }) => {
-	let i = T(e.status), a = i.icon;
-	return /* @__PURE__ */ b(S, {
-		className: "p-6",
-		children: [
-			/* @__PURE__ */ b("div", {
-				className: "flex items-start justify-between mb-4",
-				children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("div", {
-					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ y("h3", {
-						className: "text-lg font-semibold text-text-primary",
-						children: e.orderNumber
-					}), /* @__PURE__ */ b("span", {
-						className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold ${i.color}`,
-						children: [/* @__PURE__ */ y(a, { className: "size-4" }), i.label]
-					})]
-				}), /* @__PURE__ */ y("p", {
-					className: "text-sm text-text-muted mt-1",
-					children: new Date(e.createdAt).toLocaleDateString("en-US", {
-						year: "numeric",
-						month: "long",
-						day: "numeric",
-						hour: "2-digit",
-						minute: "2-digit"
-					})
-				})] }), /* @__PURE__ */ b("div", {
-					className: "text-right",
-					children: [/* @__PURE__ */ y("p", {
-						className: "text-xl font-bold tabular-nums text-text-primary",
-						children: n(e.total)
-					}), /* @__PURE__ */ b("p", {
-						className: "text-xs text-text-muted",
-						children: [
-							e.items.length,
-							" ",
-							e.items.length === 1 ? "item" : "items"
-						]
-					})]
-				})]
-			}),
-			/* @__PURE__ */ y("div", {
-				className: "space-y-3",
-				children: e.items.map((n) => /* @__PURE__ */ y(E, {
-					item: n,
-					orderId: e.id,
-					orderStatus: e.status,
-					onOpenInstallModal: t,
-					installing: r === n.id
-				}, n.id))
-			}),
-			/* @__PURE__ */ b("div", {
-				className: "mt-4 pt-4 border-t border-border-seam",
-				children: [/* @__PURE__ */ b("div", {
-					className: "flex justify-between text-sm",
-					children: [/* @__PURE__ */ y("span", {
-						className: "text-text-muted",
-						children: "Subtotal"
-					}), /* @__PURE__ */ y("span", {
-						className: "tabular-nums text-text-primary",
-						children: n(e.subtotal)
-					})]
-				}), /* @__PURE__ */ b("div", {
-					className: "flex justify-between text-sm mt-1",
-					children: [/* @__PURE__ */ y("span", {
-						className: "text-text-muted",
-						children: "Tax"
-					}), /* @__PURE__ */ y("span", {
-						className: "tabular-nums text-text-primary",
-						children: n(e.tax)
-					})]
-				})]
-			})
-		]
+}, D = ({ status: e }) => {
+	let t = E(e), n = t.icon;
+	return /* @__PURE__ */ b("span", {
+		className: `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-semibold ${t.classes}`,
+		children: [/* @__PURE__ */ y(n, { className: "size-3.5" }), t.label]
 	});
 }, O = () => {
-	let n = x(), { basePath: u } = e(), { t: d } = c(), { orders: f, loading: h, error: v, refetchOrders: S, hasMore: T, loadMore: E } = a(), { installations: O, refetch: k } = i();
+	let f = x(), { basePath: g } = e(), { t: E } = ee(), { orders: O, loading: k, error: A, refetchOrders: j, hasMore: M, loadMore: te } = a(), { installations: N, refetch: ne } = i();
 	t({
 		onData: () => {
-			S();
+			j();
 		},
 		onError: (e) => {
 			console.warn("OrderStatusUpdated subscription error:", e.message);
 		}
 	});
-	let [A, j] = s(!1), [M, N] = s(null), [P, F] = s(null), [I, L] = s(null), R = o(() => new Set(O.flatMap((e) => e.status === "ACTIVE" ? [e.productId] : [])), [O]), z = f.map((e) => {
+	let [re, P] = c(/* @__PURE__ */ new Set()), [F, I] = c("completed"), [L, R] = c(!1), [z, B] = c(null), [V, H] = c(null), [ie, U] = c(null), W = s(() => new Set(N.flatMap((e) => e.status === "ACTIVE" ? [e.productId] : [])), [N]), G = O.map((e) => {
 		let t = e.lineItems || [], n = t.reduce((e, t) => e + t.subtotal, 0), r = e.total - n, i = t.map((t, n) => ({
 			id: `${e.id}-${n}`,
 			productId: t.productId,
@@ -204,7 +82,7 @@ var T = (e) => {
 			quantity: t.quantity,
 			unitPrice: t.unitPrice,
 			totalPrice: t.subtotal,
-			installed: R.has(t.productId)
+			installed: W.has(t.productId)
 		}));
 		return {
 			id: e.id,
@@ -216,132 +94,373 @@ var T = (e) => {
 			status: e.status,
 			createdAt: e.createdAt
 		};
-	}), B = (e, t) => {
-		N(e), L(t.id), F({
+	}), K = s(() => G.filter((e) => T.includes(e.status)), [G]), q = s(() => G.filter((e) => !T.includes(e.status)), [G]), J = F === "completed" ? K : q, Y = o((e) => {
+		P((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, []), ae = (e, t) => {
+		B(e), U(t.id), H({
 			id: t.productId,
 			name: t.productName,
 			icon: t.productIcon,
 			type: t.productType,
 			version: t.version
-		}), j(!0);
-	}, V = () => {
-		j(!1), N(null), F(null), L(null);
-	}, H = (e, t) => {
-		!M || !I || (console.log(`Successfully installed ${P?.name} to workspace ${t} (${e})`), V(), k());
-	}, U = (e) => {
-		console.error("Installation failed:", e.message);
-	}, W = () => {
-		n(`${u}/marketplace`);
-	};
+		}), R(!0);
+	}, X = () => {
+		R(!1), B(null), H(null), U(null);
+	}, oe = (e, t) => {
+		X(), ne();
+	}, se = (e) => {}, Z = () => {
+		f(`${g}/marketplace`);
+	}, Q = "px-4 py-3 text-sm", $ = "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-text-muted";
 	return /* @__PURE__ */ b("div", {
-		className: "h-full overflow-y-auto",
+		className: "flex h-full flex-col",
 		children: [
 			/* @__PURE__ */ y("header", {
-				className: "sticky top-0 z-10 border-b border-border-seam bg-bg-surface px-6 py-4",
+				className: "flex-shrink-0 border-b border-border-seam bg-bg-surface px-6 py-4",
 				children: /* @__PURE__ */ y("div", {
-					className: "mx-auto max-w-4xl",
-					children: /* @__PURE__ */ b("div", {
-						className: "flex items-center gap-4",
-						children: [/* @__PURE__ */ y("button", {
-							type: "button",
-							onClick: () => n(-1),
-							"aria-label": "Go back",
-							className: "cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary",
-							children: /* @__PURE__ */ y(l, { className: "size-5" })
-						}), /* @__PURE__ */ b("div", {
-							className: "flex items-center gap-3",
-							children: [
-								/* @__PURE__ */ y(m, { className: "size-6 text-text-primary" }),
-								/* @__PURE__ */ y("h1", {
-									className: "text-xl font-bold text-text-primary",
-									children: d("pages.orders.title", { defaultValue: "My Orders" })
-								}),
-								z.length > 0 && /* @__PURE__ */ y("span", {
-									className: "rounded-full bg-action-primary-bg px-2.5 py-0.5 text-sm font-medium text-action-primary-text",
-									children: z.length
-								})
-							]
-						})]
+					className: "mx-auto max-w-6xl",
+					children: /* @__PURE__ */ y("div", {
+						className: "flex items-center justify-between",
+						children: /* @__PURE__ */ b("div", {
+							className: "flex items-center gap-4",
+							children: [/* @__PURE__ */ y("button", {
+								type: "button",
+								onClick: () => f(-1),
+								"aria-label": "Go back",
+								className: "cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary",
+								children: /* @__PURE__ */ y(l, { className: "size-5" })
+							}), /* @__PURE__ */ b("div", {
+								className: "flex items-center gap-3",
+								children: [
+									/* @__PURE__ */ y(h, { className: "size-6 text-text-primary" }),
+									/* @__PURE__ */ y("h1", {
+										className: "text-xl font-bold text-text-primary",
+										children: E("pages.orders.title", { defaultValue: "My Orders" })
+									}),
+									G.length > 0 && /* @__PURE__ */ y("span", {
+										className: "rounded-full bg-action-primary-bg/10 px-2.5 py-0.5 text-sm font-medium text-action-primary-bg",
+										children: G.length
+									})
+								]
+							})]
+						})
 					})
 				})
 			}),
-			/* @__PURE__ */ b("main", {
-				className: "mx-auto max-w-4xl p-6",
-				children: [/* @__PURE__ */ y(w, {
-					className: "mb-6",
-					children: "A record of everything you've purchased from the marketplace. Track each order's status, review what you paid, and — once an order is complete — install the apps you bought into a workspace right from here. Come back to re-install on a new workspace or check a past receipt."
-				}), h ? /* @__PURE__ */ b("output", {
-					"aria-label": "Loading orders",
-					className: "flex flex-col items-center justify-center py-16",
-					children: [/* @__PURE__ */ y(p, {
-						className: "size-12 animate-spin text-text-muted mb-4",
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ y("p", {
-						className: "text-text-muted",
-						children: "Loading your orders…"
-					})]
-				}) : v ? /* @__PURE__ */ b("div", {
-					role: "alert",
-					className: "flex flex-col items-center justify-center py-16 text-center",
-					children: [
-						/* @__PURE__ */ y("div", {
-							className: "mb-6 rounded-full bg-status-error-bg-subtle/10 p-6",
-							children: /* @__PURE__ */ y(_, { className: "size-16 text-status-error-text" })
-						}),
-						/* @__PURE__ */ y("h2", {
-							className: "mb-2 text-2xl font-bold text-text-primary",
-							children: d("pages.orders.failedToLoad", { defaultValue: "Failed to load orders" })
-						}),
-						/* @__PURE__ */ y("p", {
-							className: "mb-6 max-w-md text-text-muted",
-							children: v.message || "An error occurred while loading your orders. Please try again."
-						}),
-						/* @__PURE__ */ b("button", {
+			/* @__PURE__ */ y("div", {
+				className: "flex-1 overflow-y-auto",
+				children: /* @__PURE__ */ b("div", {
+					className: "mx-auto max-w-6xl p-6",
+					children: [/* @__PURE__ */ y(w, {
+						className: "mb-6",
+						children: "A record of everything you've purchased from the marketplace. Track each order's status, review what you paid, and — once an order is complete — install the apps you bought into a workspace right from here. Come back to re-install on a new workspace or check a past receipt."
+					}), k && G.length === 0 ? /* @__PURE__ */ b("div", {
+						className: "flex flex-col items-center justify-center py-24",
+						children: [/* @__PURE__ */ y(m, {
+							className: "size-12 animate-spin text-text-muted mb-4",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ y("p", {
+							className: "text-text-muted",
+							children: "Loading your orders…"
+						})]
+					}) : A ? /* @__PURE__ */ b("div", {
+						className: "flex flex-col items-center justify-center py-24 text-center",
+						children: [
+							/* @__PURE__ */ y("div", {
+								className: "mb-6 rounded-full bg-status-error-bg-subtle/10 p-6",
+								children: /* @__PURE__ */ y(v, { className: "size-16 text-status-error-text" })
+							}),
+							/* @__PURE__ */ y("h2", {
+								className: "mb-2 text-2xl font-bold text-text-primary",
+								children: E("pages.orders.failedToLoad", { defaultValue: "Failed to load orders" })
+							}),
+							/* @__PURE__ */ y("p", {
+								className: "mb-6 max-w-md text-text-muted",
+								children: A.message || "An error occurred while loading your orders. Please try again."
+							}),
+							/* @__PURE__ */ b("button", {
+								type: "button",
+								onClick: Z,
+								className: "cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90",
+								children: [/* @__PURE__ */ y(_, { className: "size-5" }), "Browse Marketplace"]
+							})
+						]
+					}) : G.length === 0 ? /* @__PURE__ */ y(C, {
+						illustration: "empty-data",
+						title: E("pages.orders.emptyTitle", { defaultValue: "No orders yet" }),
+						description: "You have not placed any orders yet. Browse the marketplace to discover apps and products!",
+						action: /* @__PURE__ */ b("button", {
 							type: "button",
-							onClick: W,
+							onClick: Z,
 							className: "cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90",
-							children: [/* @__PURE__ */ y(g, { className: "size-5" }), "Browse Marketplace"]
-						})
-					]
-				}) : z.length === 0 ? /* @__PURE__ */ y(C, {
-					illustration: "empty-data",
-					title: d("pages.orders.emptyTitle", { defaultValue: "No orders yet" }),
-					description: "You have not placed any orders yet. Browse the marketplace to discover apps and products!",
-					action: /* @__PURE__ */ b("button", {
-						type: "button",
-						onClick: W,
-						className: "cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90",
-						children: [/* @__PURE__ */ y(g, { className: "size-5" }), "Browse Marketplace"]
-					})
-				}) : /* @__PURE__ */ b("ul", {
-					className: "space-y-6",
-					children: [z.map((e) => /* @__PURE__ */ y("li", { children: /* @__PURE__ */ y(D, {
-						order: e,
-						onOpenInstallModal: B,
-						installingItem: A ? I : null
-					}) }, e.id)), T && /* @__PURE__ */ y("li", {
-						className: "flex justify-center pt-4 list-none",
-						children: /* @__PURE__ */ b("button", {
-							type: "button",
-							onClick: E,
-							disabled: h,
-							className: "flex items-center gap-2 rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50",
-							"aria-label": d("common.loadMore", { defaultValue: "Load more" }),
-							children: [h ? /* @__PURE__ */ y(p, {
-								className: "size-4 animate-spin",
-								"aria-hidden": "true"
-							}) : null, d("common.loadMore", { defaultValue: "Load more" })]
+							children: [/* @__PURE__ */ y(_, { className: "size-5" }), "Browse Marketplace"]
 						})
+					}) : /* @__PURE__ */ b("div", {
+						className: "space-y-4",
+						children: [/* @__PURE__ */ b("div", {
+							className: "inline-flex rounded-xl border border-border-seam bg-bg-surface p-1",
+							children: [/* @__PURE__ */ b("button", {
+								type: "button",
+								onClick: () => I("completed"),
+								className: `rounded-lg px-4 py-2 text-sm font-medium transition-colors ${F === "completed" ? "bg-action-primary-bg text-action-primary-text" : "text-text-muted hover:bg-bg-sunken hover:text-text-primary"}`,
+								children: ["Completed", /* @__PURE__ */ y("span", {
+									className: "ml-2 rounded-full bg-black/10 px-2 py-0.5 text-xs",
+									children: K.length
+								})]
+							}), /* @__PURE__ */ b("button", {
+								type: "button",
+								onClick: () => I("pending"),
+								className: `rounded-lg px-4 py-2 text-sm font-medium transition-colors ${F === "pending" ? "bg-action-primary-bg text-action-primary-text" : "text-text-muted hover:bg-bg-sunken hover:text-text-primary"}`,
+								children: ["Pending", /* @__PURE__ */ y("span", {
+									className: "ml-2 rounded-full bg-black/10 px-2 py-0.5 text-xs",
+									children: q.length
+								})]
+							})]
+						}), J.length === 0 ? /* @__PURE__ */ b(S, {
+							className: "p-10 text-center",
+							children: [
+								/* @__PURE__ */ y("div", {
+									className: "mx-auto mb-4 flex size-14 items-center justify-center rounded-full bg-bg-sunken text-text-muted",
+									children: /* @__PURE__ */ y(h, { className: "size-6" })
+								}),
+								/* @__PURE__ */ y("h2", {
+									className: "mb-2 text-lg font-semibold text-text-primary",
+									children: F === "completed" ? "No completed orders yet" : "No pending orders"
+								}),
+								/* @__PURE__ */ y("p", {
+									className: "text-sm text-text-muted",
+									children: F === "completed" ? "Completed purchases will appear here once payment is successful." : "Orders that are pending, processing, failed, refunded, or cancelled will appear here."
+								})
+							]
+						}) : /* @__PURE__ */ b("div", {
+							className: "overflow-hidden rounded-xl border border-border-seam bg-bg-surface",
+							children: [
+								/* @__PURE__ */ b("div", {
+									className: "hidden border-b border-border-seam bg-bg-sunken/50 md:grid md:grid-cols-[40px_1fr_180px_140px_120px_160px]",
+									children: [
+										/* @__PURE__ */ y("div", { className: $ }),
+										/* @__PURE__ */ y("div", {
+											className: $,
+											children: "Order"
+										}),
+										/* @__PURE__ */ y("div", {
+											className: $,
+											children: "Date"
+										}),
+										/* @__PURE__ */ y("div", {
+											className: $,
+											children: "Items"
+										}),
+										/* @__PURE__ */ y("div", {
+											className: `${$} text-right`,
+											children: "Total"
+										}),
+										/* @__PURE__ */ y("div", {
+											className: `${$} text-center`,
+											children: "Status"
+										})
+									]
+								}),
+								J.map((e) => {
+									let t = re.has(e.id), r = e.status === "COMPLETED" || e.status === "FULFILLED" || e.status === "PROCESSED";
+									return /* @__PURE__ */ b("div", {
+										className: "border-b border-border-seam last:border-b-0",
+										children: [/* @__PURE__ */ b("button", {
+											type: "button",
+											onClick: () => Y(e.id),
+											className: "grid w-full cursor-pointer grid-cols-[40px_1fr_180px_140px_120px_160px] items-center transition-colors hover:bg-bg-sunken/50 md:grid",
+											children: [
+												/* @__PURE__ */ y("div", {
+													className: `${Q} flex justify-center`,
+													children: /* @__PURE__ */ y(d, { className: `size-4 text-text-muted transition-transform duration-200 ${t ? "rotate-90" : ""}` })
+												}),
+												/* @__PURE__ */ y("div", {
+													className: `${Q} font-medium text-text-primary`,
+													children: e.orderNumber
+												}),
+												/* @__PURE__ */ y("div", {
+													className: `${Q} text-text-muted`,
+													children: new Date(e.createdAt).toLocaleDateString("en-US", {
+														year: "numeric",
+														month: "short",
+														day: "numeric"
+													})
+												}),
+												/* @__PURE__ */ b("div", {
+													className: `${Q} text-text-muted`,
+													children: [
+														e.items.length,
+														" ",
+														e.items.length === 1 ? "item" : "items",
+														/* @__PURE__ */ y("span", {
+															className: "block text-xs text-text-muted/70",
+															children: e.items.map((e) => e.productName).join(", ")
+														})
+													]
+												}),
+												/* @__PURE__ */ y("div", {
+													className: `${Q} text-right font-semibold tabular-nums text-text-primary`,
+													children: n(e.total)
+												}),
+												/* @__PURE__ */ y("div", {
+													className: `${Q} flex justify-center`,
+													children: /* @__PURE__ */ y(D, { status: e.status })
+												})
+											]
+										}), t && /* @__PURE__ */ b("div", {
+											className: "border-t border-border-seam bg-bg-sunken/30",
+											children: [
+												/* @__PURE__ */ b("div", {
+													className: "hidden grid-cols-[1fr_100px_120px_160px] gap-4 px-12 py-2 md:grid",
+													children: [
+														/* @__PURE__ */ y("span", {
+															className: "text-xs font-medium text-text-muted",
+															children: "Product"
+														}),
+														/* @__PURE__ */ y("span", {
+															className: "text-xs font-medium text-text-muted text-right",
+															children: "Qty"
+														}),
+														/* @__PURE__ */ y("span", {
+															className: "text-xs font-medium text-text-muted text-right",
+															children: "Price"
+														}),
+														/* @__PURE__ */ y("span", {
+															className: "text-xs font-medium text-text-muted text-center",
+															children: "Action"
+														})
+													]
+												}),
+												e.items.map((t) => {
+													let i = t.productType !== "PHYSICAL" && t.productType !== "MERCHANDISE";
+													return /* @__PURE__ */ b("div", {
+														className: "grid grid-cols-[auto_1fr_auto] items-center gap-3 px-4 py-3 md:px-12 md:grid-cols-[1fr_100px_120px_160px]",
+														children: [
+															/* @__PURE__ */ b("div", {
+																className: "flex items-center gap-3 min-w-0",
+																children: [/* @__PURE__ */ y("div", {
+																	className: "size-10 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken",
+																	children: t.productIcon ? /* @__PURE__ */ y("img", {
+																		src: t.productIcon,
+																		alt: t.productName,
+																		className: "size-full object-cover"
+																	}) : /* @__PURE__ */ y("div", {
+																		className: "flex size-full items-center justify-center text-sm font-bold text-text-muted",
+																		children: t.productName.charAt(0)
+																	})
+																}), /* @__PURE__ */ b("div", {
+																	className: "min-w-0",
+																	children: [/* @__PURE__ */ y("p", {
+																		className: "truncate text-sm font-medium text-text-primary",
+																		children: t.productName
+																	}), /* @__PURE__ */ y("span", {
+																		className: "inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-muted",
+																		children: t.productType
+																	})]
+																})]
+															}),
+															/* @__PURE__ */ y("div", {
+																className: "hidden text-right text-sm text-text-muted md:block",
+																children: t.quantity
+															}),
+															/* @__PURE__ */ y("div", {
+																className: "hidden text-right text-sm font-semibold tabular-nums text-text-primary md:block",
+																children: n(t.totalPrice)
+															}),
+															/* @__PURE__ */ b("div", {
+																className: "text-right text-sm text-text-muted md:hidden",
+																children: [/* @__PURE__ */ b("span", {
+																	className: "tabular-nums",
+																	children: [t.quantity, " × "]
+																}), /* @__PURE__ */ y("span", {
+																	className: "font-semibold text-text-primary tabular-nums",
+																	children: n(t.unitPrice)
+																})]
+															}),
+															/* @__PURE__ */ y("div", {
+																className: "flex justify-end md:justify-center",
+																children: t.installed ? /* @__PURE__ */ b("span", {
+																	className: "inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-medium text-status-success-text",
+																	children: [/* @__PURE__ */ y(u, { className: "size-3.5" }), "Installed"]
+																}) : r && i ? /* @__PURE__ */ b("button", {
+																	type: "button",
+																	onClick: (n) => {
+																		n.stopPropagation(), ae(e.id, t);
+																	},
+																	className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text transition-all hover:opacity-90 active:scale-95",
+																	children: [/* @__PURE__ */ y(p, { className: "size-3.5" }), "Install App"]
+																}) : null
+															})
+														]
+													}, t.id);
+												}),
+												/* @__PURE__ */ y("div", {
+													className: "border-t border-border-seam/50 px-4 py-2 md:px-12",
+													children: /* @__PURE__ */ b("div", {
+														className: "flex justify-end gap-6 text-xs text-text-muted",
+														children: [
+															/* @__PURE__ */ b("span", { children: [
+																"Subtotal:",
+																" ",
+																/* @__PURE__ */ y("span", {
+																	className: "tabular-nums text-text-primary",
+																	children: n(e.subtotal)
+																})
+															] }),
+															/* @__PURE__ */ b("span", { children: [
+																"Tax:",
+																" ",
+																/* @__PURE__ */ y("span", {
+																	className: "tabular-nums text-text-primary",
+																	children: n(e.tax)
+																})
+															] }),
+															/* @__PURE__ */ b("span", {
+																className: "font-semibold",
+																children: [
+																	"Total:",
+																	" ",
+																	/* @__PURE__ */ y("span", {
+																		className: "tabular-nums text-text-primary",
+																		children: n(e.total)
+																	})
+																]
+															})
+														]
+													})
+												})
+											]
+										})]
+									}, e.id);
+								}),
+								M && /* @__PURE__ */ y("div", {
+									className: "flex justify-center px-4 py-5",
+									children: /* @__PURE__ */ b("button", {
+										type: "button",
+										onClick: te,
+										disabled: k,
+										className: "flex items-center gap-2 rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-subtle disabled:opacity-50",
+										"aria-label": E("common.loadMore", { defaultValue: "Load more" }),
+										children: [k ? /* @__PURE__ */ y(m, {
+											className: "size-4 animate-spin",
+											"aria-hidden": "true"
+										}) : null, E("common.loadMore", { defaultValue: "Load more" })]
+									})
+								})
+							]
+						})]
 					})]
-				})]
+				})
 			}),
-			P && /* @__PURE__ */ y(r, {
-				isOpen: A,
-				onClose: V,
-				app: P,
-				orderId: M,
-				onInstallSuccess: H,
-				onInstallError: U
+			V && /* @__PURE__ */ y(r, {
+				isOpen: L,
+				onClose: X,
+				app: V,
+				orderId: z,
+				onInstallSuccess: oe,
+				onInstallError: se
 			})
 		]
 	});