@burdenoff/microfe-store 2026.625.2 → 2026.625.3

package/dist/pages/OrdersPage.js

@@ -9,8 +9,9 @@ import { useI18n as c } from "@burdenoff/fe-libs/shared/providers/shell/I18nProv
 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 { useNavigate as x } from "react-router-dom";
+import { GlassCard as S, IllustratedEmptyState as C } from "@burdenoff/fe-libs/ui";
 //#region src/pages/OrdersPage.tsx
-var S = (e) => {
+var w = (e) => {
 	switch (e) {
 		case "COMPLETED":
 		case "FULFILLED":
@@ -50,10 +51,10 @@ var S = (e) => {
 			label: e
 		};
 	}
-}, C = ({ item: e, orderId: t, orderStatus: r, onOpenInstallModal: i, installing: a }) => {
+}, T = ({ 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-default bg-bg-sunken/50 p-4",
+		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",
@@ -89,7 +90,7 @@ var S = (e) => {
 			/* @__PURE__ */ y("div", {
 				className: "text-right",
 				children: /* @__PURE__ */ y("p", {
-					className: "font-semibold text-text-primary",
+					className: "font-semibold tabular-nums text-text-primary",
 					children: n(e.totalPrice)
 				})
 			}),
@@ -108,10 +109,10 @@ var S = (e) => {
 			})
 		]
 	});
-}, w = ({ order: e, onOpenInstallModal: t, installingItem: r }) => {
-	let i = S(e.status), a = i.icon;
-	return /* @__PURE__ */ b("div", {
-		className: "rounded-xl border border-border-default bg-bg-surface p-6 transition-shadow hover:shadow-md",
+}, E = ({ order: e, onOpenInstallModal: t, installingItem: r }) => {
+	let i = w(e.status), a = i.icon;
+	return /* @__PURE__ */ b(S, {
+		className: "p-6",
 		children: [
 			/* @__PURE__ */ b("div", {
 				className: "flex items-start justify-between mb-4",
@@ -136,7 +137,7 @@ var S = (e) => {
 				})] }), /* @__PURE__ */ b("div", {
 					className: "text-right",
 					children: [/* @__PURE__ */ y("p", {
-						className: "text-xl font-bold text-text-primary",
+						className: "text-xl font-bold tabular-nums text-text-primary",
 						children: n(e.total)
 					}), /* @__PURE__ */ b("p", {
 						className: "text-xs text-text-muted",
@@ -150,7 +151,7 @@ var S = (e) => {
 			}),
 			/* @__PURE__ */ y("div", {
 				className: "space-y-3",
-				children: e.items.map((n) => /* @__PURE__ */ y(C, {
+				children: e.items.map((n) => /* @__PURE__ */ y(T, {
 					item: n,
 					orderId: e.id,
 					orderStatus: e.status,
@@ -159,14 +160,14 @@ var S = (e) => {
 				}, n.id))
 			}),
 			/* @__PURE__ */ b("div", {
-				className: "mt-4 pt-4 border-t border-border-default",
+				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: "text-text-primary",
+						className: "tabular-nums text-text-primary",
 						children: n(e.subtotal)
 					})]
 				}), /* @__PURE__ */ b("div", {
@@ -175,15 +176,15 @@ var S = (e) => {
 						className: "text-text-muted",
 						children: "Tax"
 					}), /* @__PURE__ */ y("span", {
-						className: "text-text-primary",
+						className: "tabular-nums text-text-primary",
 						children: n(e.tax)
 					})]
 				})]
 			})
 		]
 	});
-}, T = () => {
-	let n = x(), { basePath: u } = e(), { t: d } = c(), { orders: f, loading: h, error: v, refetchOrders: S, hasMore: C, loadMore: T } = i(), { installations: E, refetch: D } = r();
+}, D = () => {
+	let n = x(), { basePath: u } = e(), { t: d } = c(), { orders: f, loading: h, error: v, refetchOrders: S, hasMore: w, loadMore: T } = i(), { installations: D, refetch: O } = r();
 	t({
 		onData: () => {
 			S();
@@ -192,7 +193,7 @@ var S = (e) => {
 			console.warn("OrderStatusUpdated subscription error:", e.message);
 		}
 	});
-	let [O, k] = s(!1), [A, j] = s(null), [M, N] = s(null), [P, F] = s(null), I = o(() => new Set(E.flatMap((e) => e.status === "ACTIVE" ? [e.productId] : [])), [E]), L = f.map((e) => {
+	let [k, A] = s(!1), [j, M] = s(null), [N, P] = s(null), [F, I] = s(null), L = o(() => new Set(D.flatMap((e) => e.status === "ACTIVE" ? [e.productId] : [])), [D]), R = f.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,
@@ -203,7 +204,7 @@ var S = (e) => {
 			quantity: t.quantity,
 			unitPrice: t.unitPrice,
 			totalPrice: t.subtotal,
-			installed: I.has(t.productId)
+			installed: L.has(t.productId)
 		}));
 		return {
 			id: e.id,
@@ -215,28 +216,28 @@ var S = (e) => {
 			status: e.status,
 			createdAt: e.createdAt
 		};
-	}), R = (e, t) => {
-		j(e), F(t.id), N({
+	}), z = (e, t) => {
+		M(e), I(t.id), P({
 			id: t.productId,
 			name: t.productName,
 			icon: t.productIcon,
 			type: t.productType,
 			version: t.version
-		}), k(!0);
-	}, z = () => {
-		k(!1), j(null), N(null), F(null);
-	}, B = (e, t) => {
-		!A || !P || (console.log(`Successfully installed ${M?.name} to workspace ${t} (${e})`), z(), D());
-	}, V = (e) => {
+		}), A(!0);
+	}, B = () => {
+		A(!1), M(null), P(null), I(null);
+	}, V = (e, t) => {
+		!j || !F || (console.log(`Successfully installed ${N?.name} to workspace ${t} (${e})`), B(), O());
+	}, H = (e) => {
 		console.error("Installation failed:", e.message);
-	}, H = () => {
+	}, U = () => {
 		n(`${u}/marketplace`);
 	};
 	return /* @__PURE__ */ b("div", {
 		className: "h-full overflow-y-auto",
 		children: [
 			/* @__PURE__ */ y("header", {
-				className: "sticky top-0 z-10 border-b border-border-default bg-bg-surface px-6 py-4",
+				className: "sticky top-0 z-10 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", {
@@ -255,9 +256,9 @@ var S = (e) => {
 									className: "text-xl font-bold text-text-primary",
 									children: d("pages.orders.title", { defaultValue: "My Orders" })
 								}),
-								L.length > 0 && /* @__PURE__ */ y("span", {
+								R.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: L.length
+									children: R.length
 								})
 							]
 						})]
@@ -294,40 +295,28 @@ var S = (e) => {
 						}),
 						/* @__PURE__ */ b("button", {
 							type: "button",
-							onClick: H,
-							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"]
-						})
-					]
-				}) : L.length === 0 ? /* @__PURE__ */ b("div", {
-					className: "flex flex-col items-center justify-center py-16 text-center",
-					children: [
-						/* @__PURE__ */ y("div", {
-							className: "mb-6 rounded-full bg-bg-sunken p-6",
-							children: /* @__PURE__ */ y(g, { className: "size-16 text-text-muted" })
-						}),
-						/* @__PURE__ */ y("h2", {
-							className: "mb-2 text-2xl font-bold text-text-primary",
-							children: d("pages.orders.emptyTitle", { defaultValue: "No orders yet" })
-						}),
-						/* @__PURE__ */ y("p", {
-							className: "mb-6 max-w-md text-text-muted",
-							children: "You have not placed any orders yet. Browse the marketplace to discover apps and products!"
-						}),
-						/* @__PURE__ */ b("button", {
-							type: "button",
-							onClick: H,
+							onClick: U,
 							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"]
 						})
 					]
+				}) : R.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: U,
+						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: [L.map((e) => /* @__PURE__ */ y("li", { children: /* @__PURE__ */ y(w, {
+					children: [R.map((e) => /* @__PURE__ */ y("li", { children: /* @__PURE__ */ y(E, {
 						order: e,
-						onOpenInstallModal: R,
-						installingItem: O ? P : null
-					}) }, e.id)), C && /* @__PURE__ */ y("li", {
+						onOpenInstallModal: z,
+						installingItem: k ? F : null
+					}) }, e.id)), w && /* @__PURE__ */ y("li", {
 						className: "flex justify-center pt-4 list-none",
 						children: /* @__PURE__ */ b("button", {
 							type: "button",
@@ -343,18 +332,18 @@ var S = (e) => {
 					})]
 				})
 			}),
-			M && /* @__PURE__ */ y(a, {
-				isOpen: O,
-				onClose: z,
-				app: M,
-				orderId: A,
-				onInstallSuccess: B,
-				onInstallError: V
+			N && /* @__PURE__ */ y(a, {
+				isOpen: k,
+				onClose: B,
+				app: N,
+				orderId: j,
+				onInstallSuccess: V,
+				onInstallError: H
 			})
 		]
 	});
 };
 //#endregion
-export { T as OrdersPage };
+export { D as OrdersPage };
 
 //# sourceMappingURL=OrdersPage.js.map

package/dist/pages/OrdersPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrdersPage.js","names":[],"sources":["../../src/pages/OrdersPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  Package,\n  ArrowLeft,\n  ShoppingBag,\n  Download,\n  CheckCircle,\n  Clock,\n  XCircle,\n  RefreshCw,\n  Loader2,\n} from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { useInstallations } from '../hooks/useInstallations';\nimport { useOrders } from '../hooks/useOrders';\nimport { formatPrice } from '../utils';\nimport { InstallAppModal, type AppInfo } from '../components/InstallAppModal';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useOrderStatusUpdatedSubscription } from '../generated/global-operations';\n\n// Local types for UI\ninterface OrderItem {\n  id: string;\n  productId: string;\n  productName: string;\n  productIcon?: string;\n  productType: string;\n  version?: string;\n  quantity: number;\n  unitPrice: number;\n  totalPrice: number;\n  installed?: boolean;\n}\n\ninterface UIOrder {\n  id: string;\n  orderNumber: string;\n  items: OrderItem[];\n  subtotal: number;\n  tax: number;\n  total: number;\n  status:\n    | 'PENDING'\n    | 'PROCESSING'\n    | 'COMPLETED'\n    | 'FAILED'\n    | 'CANCELLED'\n    | 'FULFILLED'\n    | 'PROCESSED'\n    | 'REFUNDED';\n  createdAt: string;\n}\n\n/**\n * Get status icon and color\n */\nconst getStatusDisplay = (status: UIOrder['status']) => {\n  switch (status) {\n    case 'COMPLETED':\n    case 'FULFILLED':\n    case 'PROCESSED':\n      return {\n        icon: CheckCircle,\n        color: 'text-status-success-text bg-status-success-bg-subtle/10',\n        label: 'Completed',\n      };\n    case 'PROCESSING':\n      return {\n        icon: Clock,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Processing',\n      };\n    case 'PENDING':\n      return {\n        icon: Clock,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Pending',\n      };\n    case 'FAILED':\n      return {\n        icon: XCircle,\n        color: 'text-status-error-text bg-status-error-bg-subtle/10',\n        label: 'Failed',\n      };\n    case 'REFUNDED':\n      return {\n        icon: RefreshCw,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Refunded',\n      };\n    case 'CANCELLED':\n      return { icon: RefreshCw, color: 'text-text-muted bg-bg-sunken', label: 'Cancelled' };\n    default:\n      return { icon: Clock, color: 'text-text-muted', label: status };\n  }\n};\n\n/**\n * Order item card with Install App button\n */\nconst OrderItemCard: FC<{\n  item: OrderItem;\n  orderId: string;\n  orderStatus: UIOrder['status'];\n  onOpenInstallModal: (orderId: string, item: OrderItem) => void;\n  installing: boolean;\n}> = ({ item, orderId, orderStatus, onOpenInstallModal, installing }) => {\n  const isOrderSuccessful =\n    orderStatus === 'COMPLETED' || orderStatus === 'FULFILLED' || orderStatus === 'PROCESSED';\n  const isInstallable = item.productType !== 'PHYSICAL' && item.productType !== 'MERCHANDISE';\n  return (\n    <div className=\"flex items-center gap-4 rounded-lg border border-border-default bg-bg-sunken/50 p-4\">\n      {/* Product Icon */}\n      <div className=\"size-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken\">\n        {item.productIcon ? (\n          <img src={item.productIcon} alt={item.productName} className=\"size-full object-cover\" />\n        ) : (\n          <div className=\"flex size-full items-center justify-center text-lg font-bold text-text-muted\">\n            {item.productName.charAt(0)}\n          </div>\n        )}\n      </div>\n\n      {/* Product Info */}\n      <div className=\"flex-1 min-w-0\">\n        <h4 className=\"font-medium text-text-primary truncate\">{item.productName}</h4>\n        <div className=\"flex items-center gap-2 mt-1\">\n          <span className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-muted\">\n            {item.productType}\n          </span>\n          <span className=\"text-sm text-text-muted\">\n            {item.quantity} x {formatPrice(item.unitPrice)}\n          </span>\n        </div>\n      </div>\n\n      {/* Price */}\n      <div className=\"text-right\">\n        <p className=\"font-semibold text-text-primary\">{formatPrice(item.totalPrice)}</p>\n      </div>\n\n      {/* Install Button - only show when order is successfully processed */}\n      <div className=\"flex-shrink-0\">\n        {item.installed ? (\n          <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\">\n            <CheckCircle className=\"size-4\" />\n            Installed\n          </span>\n        ) : isOrderSuccessful && isInstallable ? (\n          <button\n            type=\"button\"\n            onClick={() => onOpenInstallModal(orderId, item)}\n            disabled={installing}\n            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\"\n          >\n            {installing ? (\n              <>\n                <Loader2 className=\"size-4 animate-spin\" />\n                Installing…\n              </>\n            ) : (\n              <>\n                <Download className=\"size-4\" />\n                Install App\n              </>\n            )}\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Order card component\n */\nconst OrderCard: FC<{\n  order: UIOrder;\n  onOpenInstallModal: (orderId: string, item: OrderItem) => void;\n  installingItem: string | null;\n}> = ({ order, onOpenInstallModal, installingItem }) => {\n  const statusDisplay = getStatusDisplay(order.status);\n  const StatusIcon = statusDisplay.icon;\n\n  return (\n    <div className=\"rounded-xl border border-border-default bg-bg-surface p-6 transition-shadow hover:shadow-md\">\n      {/* Order Header */}\n      <div className=\"flex items-start justify-between mb-4\">\n        <div>\n          <div className=\"flex items-center gap-3\">\n            <h3 className=\"text-lg font-semibold text-text-primary\">{order.orderNumber}</h3>\n            <span\n              className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold ${statusDisplay.color}`}\n            >\n              <StatusIcon className=\"size-4\" />\n              {statusDisplay.label}\n            </span>\n          </div>\n          <p className=\"text-sm text-text-muted mt-1\">\n            {new Date(order.createdAt).toLocaleDateString('en-US', {\n              year: 'numeric',\n              month: 'long',\n              day: 'numeric',\n              hour: '2-digit',\n              minute: '2-digit',\n            })}\n          </p>\n        </div>\n        <div className=\"text-right\">\n          <p className=\"text-xl font-bold text-text-primary\">{formatPrice(order.total)}</p>\n          <p className=\"text-xs text-text-muted\">\n            {order.items.length} {order.items.length === 1 ? 'item' : 'items'}\n          </p>\n        </div>\n      </div>\n\n      {/* Order Items */}\n      <div className=\"space-y-3\">\n        {order.items.map((item) => (\n          <OrderItemCard\n            key={item.id}\n            item={item}\n            orderId={order.id}\n            orderStatus={order.status}\n            onOpenInstallModal={onOpenInstallModal}\n            installing={installingItem === item.id}\n          />\n        ))}\n      </div>\n\n      {/* Order Summary */}\n      {/* TODO(ux-sweep): no order-details modal exists; tax + shipping live inline. When a modal lands, wrap \"Tax + shipping advanced\" in OptionalFields. */}\n      <div className=\"mt-4 pt-4 border-t border-border-default\">\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-text-muted\">Subtotal</span>\n          <span className=\"text-text-primary\">{formatPrice(order.subtotal)}</span>\n        </div>\n        <div className=\"flex justify-between text-sm mt-1\">\n          <span className=\"text-text-muted\">Tax</span>\n          <span className=\"text-text-primary\">{formatPrice(order.tax)}</span>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n/**\n * OrdersPage component\n *\n * Displays a list of all orders with their items and Install App buttons\n */\nexport const OrdersPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath } = useStore();\n  const { t } = useI18n();\n  const { orders: backendOrders, loading, error, refetchOrders, hasMore, loadMore } = useOrders();\n  const { installations, refetch: refetchInstallations } = useInstallations();\n\n  useOrderStatusUpdatedSubscription({\n    onData: () => {\n      void refetchOrders();\n    },\n    onError: (err) => {\n      console.warn('OrderStatusUpdated subscription error:', err.message);\n    },\n  });\n\n  // Modal state\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);\n  const [selectedApp, setSelectedApp] = useState<AppInfo | null>(null);\n  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);\n\n  const installedProductIds = useMemo(\n    () =>\n      new Set(\n        installations.flatMap((installation) =>\n          installation.status === 'ACTIVE' ? [installation.productId] : []\n        )\n      ),\n    [installations]\n  );\n\n  // Map backend orders to UI format\n  const orders: UIOrder[] = backendOrders.map((order) => {\n    // Calculate subtotal from line items (with safety check)\n    const lineItems = order.lineItems || [];\n    const subtotal = lineItems.reduce((sum, item) => sum + item.subtotal, 0);\n    // Estimate tax (backend doesn't store separate tax amount)\n    const tax = order.total - subtotal;\n\n    // Map lineItems to items with unique IDs\n    const items: OrderItem[] = lineItems.map((item, index) => ({\n      id: `${order.id}-${index}`, // Generate unique ID for each line item\n      productId: item.productId,\n      productName: item.name, // Backend uses 'name', UI expects 'productName'\n      productIcon: item.productIcon,\n      productType:\n        item.productType ||\n        (typeof item.itemType === 'string' ? item.itemType.toUpperCase() : 'APP'),\n      version: item.version,\n      quantity: item.quantity,\n      unitPrice: item.unitPrice,\n      totalPrice: item.subtotal, // Backend uses 'subtotal', UI expects 'totalPrice'\n      installed: installedProductIds.has(item.productId),\n    }));\n\n    return {\n      id: order.id,\n      orderNumber: `#${order.id.slice(-8).toUpperCase()}`, // Generate order number from ID\n      items,\n      subtotal,\n      tax,\n      total: order.total,\n      status: order.status as UIOrder['status'], // Cast to union type\n      createdAt: order.createdAt,\n    };\n  });\n\n  const handleOpenInstallModal = (orderId: string, item: OrderItem) => {\n    setSelectedOrderId(orderId);\n    setSelectedItemId(item.id);\n    setSelectedApp({\n      id: item.productId,\n      name: item.productName,\n      icon: item.productIcon,\n      type: item.productType,\n      version: item.version,\n    });\n    setIsModalOpen(true);\n  };\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false);\n    setSelectedOrderId(null);\n    setSelectedApp(null);\n    setSelectedItemId(null);\n  };\n\n  const handleInstallSuccess = (workspaceId: string, workspaceName: string) => {\n    if (!selectedOrderId || !selectedItemId) return;\n\n    console.log(\n      `Successfully installed ${selectedApp?.name} to workspace ${workspaceName} (${workspaceId})`\n    );\n\n    // Reset modal state\n    handleCloseModal();\n    void refetchInstallations();\n  };\n\n  const handleInstallError = (error: Error) => {\n    console.error('Installation failed:', error.message);\n    // Error is displayed in modal, no need to close it\n  };\n\n  const handleBrowseMarketplace = () => {\n    navigate(`${basePath}/marketplace`);\n  };\n\n  return (\n    <div className=\"h-full overflow-y-auto\">\n      {/* Header */}\n      <header className=\"sticky top-0 z-10 border-b border-border-default bg-bg-surface px-6 py-4\">\n        <div className=\"mx-auto max-w-4xl\">\n          <div className=\"flex items-center gap-4\">\n            <button\n              type=\"button\"\n              onClick={() => navigate(-1)}\n              aria-label=\"Go back\"\n              className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n            >\n              <ArrowLeft className=\"size-5\" />\n            </button>\n            <div className=\"flex items-center gap-3\">\n              <Package className=\"size-6 text-text-primary\" />\n              <h1 className=\"text-xl font-bold text-text-primary\">\n                {t('pages.orders.title', { defaultValue: 'My Orders' })}\n              </h1>\n              {orders.length > 0 && (\n                <span className=\"rounded-full bg-action-primary-bg px-2.5 py-0.5 text-sm font-medium text-action-primary-text\">\n                  {orders.length}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </header>\n\n      <main className=\"mx-auto max-w-4xl p-6\">\n        {loading ? (\n          // Loading State\n          <output\n            aria-label=\"Loading orders\"\n            className=\"flex flex-col items-center justify-center py-16\"\n          >\n            <Loader2 className=\"size-12 animate-spin text-text-muted mb-4\" aria-hidden=\"true\" />\n            <p className=\"text-text-muted\">Loading your orders…</p>\n          </output>\n        ) : error ? (\n          // Error State\n          <div role=\"alert\" className=\"flex flex-col items-center justify-center py-16 text-center\">\n            <div className=\"mb-6 rounded-full bg-status-error-bg-subtle/10 p-6\">\n              <XCircle className=\"size-16 text-status-error-text\" />\n            </div>\n            <h2 className=\"mb-2 text-2xl font-bold text-text-primary\">\n              {t('pages.orders.failedToLoad', { defaultValue: 'Failed to load orders' })}\n            </h2>\n            <p className=\"mb-6 max-w-md text-text-muted\">\n              {error.message || 'An error occurred while loading your orders. Please try again.'}\n            </p>\n            <button\n              type=\"button\"\n              onClick={handleBrowseMarketplace}\n              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\"\n            >\n              <ShoppingBag className=\"size-5\" />\n              Browse Marketplace\n            </button>\n          </div>\n        ) : orders.length === 0 ? (\n          // Empty State\n          <div className=\"flex flex-col items-center justify-center py-16 text-center\">\n            <div className=\"mb-6 rounded-full bg-bg-sunken p-6\">\n              <ShoppingBag className=\"size-16 text-text-muted\" />\n            </div>\n            <h2 className=\"mb-2 text-2xl font-bold text-text-primary\">\n              {t('pages.orders.emptyTitle', { defaultValue: 'No orders yet' })}\n            </h2>\n            <p className=\"mb-6 max-w-md text-text-muted\">\n              You have not placed any orders yet. Browse the marketplace to discover apps and\n              products!\n            </p>\n            <button\n              type=\"button\"\n              onClick={handleBrowseMarketplace}\n              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\"\n            >\n              <ShoppingBag className=\"size-5\" />\n              Browse Marketplace\n            </button>\n          </div>\n        ) : (\n          // Orders List\n          <ul className=\"space-y-6\">\n            {orders.map((order) => (\n              <li key={order.id}>\n                <OrderCard\n                  order={order}\n                  onOpenInstallModal={handleOpenInstallModal}\n                  installingItem={isModalOpen ? selectedItemId : null}\n                />\n              </li>\n            ))}\n            {hasMore && (\n              <li className=\"flex justify-center pt-4 list-none\">\n                <button\n                  type=\"button\"\n                  onClick={loadMore}\n                  disabled={loading}\n                  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\"\n                  aria-label={t('common.loadMore', { defaultValue: 'Load more' })}\n                >\n                  {loading ? <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" /> : null}\n                  {t('common.loadMore', { defaultValue: 'Load more' })}\n                </button>\n              </li>\n            )}\n          </ul>\n        )}\n      </main>\n\n      {/* Install App Modal */}\n      {selectedApp && (\n        <InstallAppModal\n          isOpen={isModalOpen}\n          onClose={handleCloseModal}\n          app={selectedApp}\n          orderId={selectedOrderId}\n          onInstallSuccess={handleInstallSuccess}\n          onInstallError={handleInstallError}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"OrdersPage.js","names":[],"sources":["../../src/pages/OrdersPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  Package,\n  ArrowLeft,\n  ShoppingBag,\n  Download,\n  CheckCircle,\n  Clock,\n  XCircle,\n  RefreshCw,\n  Loader2,\n} from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { useInstallations } from '../hooks/useInstallations';\nimport { useOrders } from '../hooks/useOrders';\nimport { formatPrice } from '../utils';\nimport { InstallAppModal, type AppInfo } from '../components/InstallAppModal';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { GlassCard, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\nimport { useOrderStatusUpdatedSubscription } from '../generated/global-operations';\n\n// Local types for UI\ninterface OrderItem {\n  id: string;\n  productId: string;\n  productName: string;\n  productIcon?: string;\n  productType: string;\n  version?: string;\n  quantity: number;\n  unitPrice: number;\n  totalPrice: number;\n  installed?: boolean;\n}\n\ninterface UIOrder {\n  id: string;\n  orderNumber: string;\n  items: OrderItem[];\n  subtotal: number;\n  tax: number;\n  total: number;\n  status:\n    | 'PENDING'\n    | 'PROCESSING'\n    | 'COMPLETED'\n    | 'FAILED'\n    | 'CANCELLED'\n    | 'FULFILLED'\n    | 'PROCESSED'\n    | 'REFUNDED';\n  createdAt: string;\n}\n\n/**\n * Get status icon and color\n */\nconst getStatusDisplay = (status: UIOrder['status']) => {\n  switch (status) {\n    case 'COMPLETED':\n    case 'FULFILLED':\n    case 'PROCESSED':\n      return {\n        icon: CheckCircle,\n        color: 'text-status-success-text bg-status-success-bg-subtle/10',\n        label: 'Completed',\n      };\n    case 'PROCESSING':\n      return {\n        icon: Clock,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Processing',\n      };\n    case 'PENDING':\n      return {\n        icon: Clock,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Pending',\n      };\n    case 'FAILED':\n      return {\n        icon: XCircle,\n        color: 'text-status-error-text bg-status-error-bg-subtle/10',\n        label: 'Failed',\n      };\n    case 'REFUNDED':\n      return {\n        icon: RefreshCw,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Refunded',\n      };\n    case 'CANCELLED':\n      return { icon: RefreshCw, color: 'text-text-muted bg-bg-sunken', label: 'Cancelled' };\n    default:\n      return { icon: Clock, color: 'text-text-muted', label: status };\n  }\n};\n\n/**\n * Order item card with Install App button\n */\nconst OrderItemCard: FC<{\n  item: OrderItem;\n  orderId: string;\n  orderStatus: UIOrder['status'];\n  onOpenInstallModal: (orderId: string, item: OrderItem) => void;\n  installing: boolean;\n}> = ({ item, orderId, orderStatus, onOpenInstallModal, installing }) => {\n  const isOrderSuccessful =\n    orderStatus === 'COMPLETED' || orderStatus === 'FULFILLED' || orderStatus === 'PROCESSED';\n  const isInstallable = item.productType !== 'PHYSICAL' && item.productType !== 'MERCHANDISE';\n  return (\n    <div className=\"flex items-center gap-4 rounded-lg border border-border-seam bg-bg-sunken/50 p-4\">\n      {/* Product Icon */}\n      <div className=\"size-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken\">\n        {item.productIcon ? (\n          <img src={item.productIcon} alt={item.productName} className=\"size-full object-cover\" />\n        ) : (\n          <div className=\"flex size-full items-center justify-center text-lg font-bold text-text-muted\">\n            {item.productName.charAt(0)}\n          </div>\n        )}\n      </div>\n\n      {/* Product Info */}\n      <div className=\"flex-1 min-w-0\">\n        <h4 className=\"font-medium text-text-primary truncate\">{item.productName}</h4>\n        <div className=\"flex items-center gap-2 mt-1\">\n          <span className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-muted\">\n            {item.productType}\n          </span>\n          <span className=\"text-sm text-text-muted\">\n            {item.quantity} x {formatPrice(item.unitPrice)}\n          </span>\n        </div>\n      </div>\n\n      {/* Price */}\n      <div className=\"text-right\">\n        <p className=\"font-semibold tabular-nums text-text-primary\">\n          {formatPrice(item.totalPrice)}\n        </p>\n      </div>\n\n      {/* Install Button - only show when order is successfully processed */}\n      <div className=\"flex-shrink-0\">\n        {item.installed ? (\n          <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\">\n            <CheckCircle className=\"size-4\" />\n            Installed\n          </span>\n        ) : isOrderSuccessful && isInstallable ? (\n          <button\n            type=\"button\"\n            onClick={() => onOpenInstallModal(orderId, item)}\n            disabled={installing}\n            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\"\n          >\n            {installing ? (\n              <>\n                <Loader2 className=\"size-4 animate-spin\" />\n                Installing…\n              </>\n            ) : (\n              <>\n                <Download className=\"size-4\" />\n                Install App\n              </>\n            )}\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Order card component\n */\nconst OrderCard: FC<{\n  order: UIOrder;\n  onOpenInstallModal: (orderId: string, item: OrderItem) => void;\n  installingItem: string | null;\n}> = ({ order, onOpenInstallModal, installingItem }) => {\n  const statusDisplay = getStatusDisplay(order.status);\n  const StatusIcon = statusDisplay.icon;\n\n  return (\n    <GlassCard className=\"p-6\">\n      {/* Order Header */}\n      <div className=\"flex items-start justify-between mb-4\">\n        <div>\n          <div className=\"flex items-center gap-3\">\n            <h3 className=\"text-lg font-semibold text-text-primary\">{order.orderNumber}</h3>\n            <span\n              className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold ${statusDisplay.color}`}\n            >\n              <StatusIcon className=\"size-4\" />\n              {statusDisplay.label}\n            </span>\n          </div>\n          <p className=\"text-sm text-text-muted mt-1\">\n            {new Date(order.createdAt).toLocaleDateString('en-US', {\n              year: 'numeric',\n              month: 'long',\n              day: 'numeric',\n              hour: '2-digit',\n              minute: '2-digit',\n            })}\n          </p>\n        </div>\n        <div className=\"text-right\">\n          <p className=\"text-xl font-bold tabular-nums text-text-primary\">\n            {formatPrice(order.total)}\n          </p>\n          <p className=\"text-xs text-text-muted\">\n            {order.items.length} {order.items.length === 1 ? 'item' : 'items'}\n          </p>\n        </div>\n      </div>\n\n      {/* Order Items */}\n      <div className=\"space-y-3\">\n        {order.items.map((item) => (\n          <OrderItemCard\n            key={item.id}\n            item={item}\n            orderId={order.id}\n            orderStatus={order.status}\n            onOpenInstallModal={onOpenInstallModal}\n            installing={installingItem === item.id}\n          />\n        ))}\n      </div>\n\n      {/* Order Summary */}\n      {/* TODO(ux-sweep): no order-details modal exists; tax + shipping live inline. When a modal lands, wrap \"Tax + shipping advanced\" in OptionalFields. */}\n      <div className=\"mt-4 pt-4 border-t border-border-seam\">\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-text-muted\">Subtotal</span>\n          <span className=\"tabular-nums text-text-primary\">{formatPrice(order.subtotal)}</span>\n        </div>\n        <div className=\"flex justify-between text-sm mt-1\">\n          <span className=\"text-text-muted\">Tax</span>\n          <span className=\"tabular-nums text-text-primary\">{formatPrice(order.tax)}</span>\n        </div>\n      </div>\n    </GlassCard>\n  );\n};\n\n/**\n * OrdersPage component\n *\n * Displays a list of all orders with their items and Install App buttons\n */\nexport const OrdersPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath } = useStore();\n  const { t } = useI18n();\n  const { orders: backendOrders, loading, error, refetchOrders, hasMore, loadMore } = useOrders();\n  const { installations, refetch: refetchInstallations } = useInstallations();\n\n  useOrderStatusUpdatedSubscription({\n    onData: () => {\n      void refetchOrders();\n    },\n    onError: (err) => {\n      console.warn('OrderStatusUpdated subscription error:', err.message);\n    },\n  });\n\n  // Modal state\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);\n  const [selectedApp, setSelectedApp] = useState<AppInfo | null>(null);\n  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);\n\n  const installedProductIds = useMemo(\n    () =>\n      new Set(\n        installations.flatMap((installation) =>\n          installation.status === 'ACTIVE' ? [installation.productId] : []\n        )\n      ),\n    [installations]\n  );\n\n  // Map backend orders to UI format\n  const orders: UIOrder[] = backendOrders.map((order) => {\n    // Calculate subtotal from line items (with safety check)\n    const lineItems = order.lineItems || [];\n    const subtotal = lineItems.reduce((sum, item) => sum + item.subtotal, 0);\n    // Estimate tax (backend doesn't store separate tax amount)\n    const tax = order.total - subtotal;\n\n    // Map lineItems to items with unique IDs\n    const items: OrderItem[] = lineItems.map((item, index) => ({\n      id: `${order.id}-${index}`, // Generate unique ID for each line item\n      productId: item.productId,\n      productName: item.name, // Backend uses 'name', UI expects 'productName'\n      productIcon: item.productIcon,\n      productType:\n        item.productType ||\n        (typeof item.itemType === 'string' ? item.itemType.toUpperCase() : 'APP'),\n      version: item.version,\n      quantity: item.quantity,\n      unitPrice: item.unitPrice,\n      totalPrice: item.subtotal, // Backend uses 'subtotal', UI expects 'totalPrice'\n      installed: installedProductIds.has(item.productId),\n    }));\n\n    return {\n      id: order.id,\n      orderNumber: `#${order.id.slice(-8).toUpperCase()}`, // Generate order number from ID\n      items,\n      subtotal,\n      tax,\n      total: order.total,\n      status: order.status as UIOrder['status'], // Cast to union type\n      createdAt: order.createdAt,\n    };\n  });\n\n  const handleOpenInstallModal = (orderId: string, item: OrderItem) => {\n    setSelectedOrderId(orderId);\n    setSelectedItemId(item.id);\n    setSelectedApp({\n      id: item.productId,\n      name: item.productName,\n      icon: item.productIcon,\n      type: item.productType,\n      version: item.version,\n    });\n    setIsModalOpen(true);\n  };\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false);\n    setSelectedOrderId(null);\n    setSelectedApp(null);\n    setSelectedItemId(null);\n  };\n\n  const handleInstallSuccess = (workspaceId: string, workspaceName: string) => {\n    if (!selectedOrderId || !selectedItemId) return;\n\n    console.log(\n      `Successfully installed ${selectedApp?.name} to workspace ${workspaceName} (${workspaceId})`\n    );\n\n    // Reset modal state\n    handleCloseModal();\n    void refetchInstallations();\n  };\n\n  const handleInstallError = (error: Error) => {\n    console.error('Installation failed:', error.message);\n    // Error is displayed in modal, no need to close it\n  };\n\n  const handleBrowseMarketplace = () => {\n    navigate(`${basePath}/marketplace`);\n  };\n\n  return (\n    <div className=\"h-full overflow-y-auto\">\n      {/* Header */}\n      <header className=\"sticky top-0 z-10 border-b border-border-seam bg-bg-surface px-6 py-4\">\n        <div className=\"mx-auto max-w-4xl\">\n          <div className=\"flex items-center gap-4\">\n            <button\n              type=\"button\"\n              onClick={() => navigate(-1)}\n              aria-label=\"Go back\"\n              className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n            >\n              <ArrowLeft className=\"size-5\" />\n            </button>\n            <div className=\"flex items-center gap-3\">\n              <Package className=\"size-6 text-text-primary\" />\n              <h1 className=\"text-xl font-bold text-text-primary\">\n                {t('pages.orders.title', { defaultValue: 'My Orders' })}\n              </h1>\n              {orders.length > 0 && (\n                <span className=\"rounded-full bg-action-primary-bg px-2.5 py-0.5 text-sm font-medium text-action-primary-text\">\n                  {orders.length}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </header>\n\n      <main className=\"mx-auto max-w-4xl p-6\">\n        {loading ? (\n          // Loading State\n          <output\n            aria-label=\"Loading orders\"\n            className=\"flex flex-col items-center justify-center py-16\"\n          >\n            <Loader2 className=\"size-12 animate-spin text-text-muted mb-4\" aria-hidden=\"true\" />\n            <p className=\"text-text-muted\">Loading your orders…</p>\n          </output>\n        ) : error ? (\n          // Error State\n          <div role=\"alert\" className=\"flex flex-col items-center justify-center py-16 text-center\">\n            <div className=\"mb-6 rounded-full bg-status-error-bg-subtle/10 p-6\">\n              <XCircle className=\"size-16 text-status-error-text\" />\n            </div>\n            <h2 className=\"mb-2 text-2xl font-bold text-text-primary\">\n              {t('pages.orders.failedToLoad', { defaultValue: 'Failed to load orders' })}\n            </h2>\n            <p className=\"mb-6 max-w-md text-text-muted\">\n              {error.message || 'An error occurred while loading your orders. Please try again.'}\n            </p>\n            <button\n              type=\"button\"\n              onClick={handleBrowseMarketplace}\n              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\"\n            >\n              <ShoppingBag className=\"size-5\" />\n              Browse Marketplace\n            </button>\n          </div>\n        ) : orders.length === 0 ? (\n          // Empty State\n          <IllustratedEmptyState\n            illustration=\"empty-data\"\n            title={t('pages.orders.emptyTitle', { defaultValue: 'No orders yet' })}\n            description=\"You have not placed any orders yet. Browse the marketplace to discover apps and products!\"\n            action={\n              <button\n                type=\"button\"\n                onClick={handleBrowseMarketplace}\n                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\"\n              >\n                <ShoppingBag className=\"size-5\" />\n                Browse Marketplace\n              </button>\n            }\n          />\n        ) : (\n          // Orders List\n          <ul className=\"space-y-6\">\n            {orders.map((order) => (\n              <li key={order.id}>\n                <OrderCard\n                  order={order}\n                  onOpenInstallModal={handleOpenInstallModal}\n                  installingItem={isModalOpen ? selectedItemId : null}\n                />\n              </li>\n            ))}\n            {hasMore && (\n              <li className=\"flex justify-center pt-4 list-none\">\n                <button\n                  type=\"button\"\n                  onClick={loadMore}\n                  disabled={loading}\n                  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\"\n                  aria-label={t('common.loadMore', { defaultValue: 'Load more' })}\n                >\n                  {loading ? <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" /> : null}\n                  {t('common.loadMore', { defaultValue: 'Load more' })}\n                </button>\n              </li>\n            )}\n          </ul>\n        )}\n      </main>\n\n      {/* Install App Modal */}\n      {selectedApp && (\n        <InstallAppModal\n          isOpen={isModalOpen}\n          onClose={handleCloseModal}\n          app={selectedApp}\n          orderId={selectedOrderId}\n          onInstallSuccess={handleInstallSuccess}\n          onInstallError={handleInstallError}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AA2DA,IAAM,KAAoB,MAA8B;AACtD,SAAQ,GAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK,YACH,QAAO;GACL,MAAM;GACN,OAAO;GACP,OAAO;GACR;EACH,KAAK,aACH,QAAO;GACL,MAAM;GACN,OAAO;GACP,OAAO;GACR;EACH,KAAK,UACH,QAAO;GACL,MAAM;GACN,OAAO;GACP,OAAO;GACR;EACH,KAAK,SACH,QAAO;GACL,MAAM;GACN,OAAO;GACP,OAAO;GACR;EACH,KAAK,WACH,QAAO;GACL,MAAM;GACN,OAAO;GACP,OAAO;GACR;EACH,KAAK,YACH,QAAO;GAAE,MAAM;GAAW,OAAO;GAAgC,OAAO;GAAa;EACvF,QACE,QAAO;GAAE,MAAM;GAAO,OAAO;GAAmB,OAAO;GAAQ;;GAO/D,KAMA,EAAE,SAAM,YAAS,gBAAa,uBAAoB,oBAAiB;CACvE,IAAM,IACJ,MAAgB,eAAe,MAAgB,eAAe,MAAgB,aAC1E,IAAgB,EAAK,gBAAgB,cAAc,EAAK,gBAAgB;AAC9E,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAK,cACJ,kBAAC,OAAD;KAAK,KAAK,EAAK;KAAa,KAAK,EAAK;KAAa,WAAU;KAA2B,CAAA,GAExF,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAK,YAAY,OAAO,EAAE;KACvB,CAAA;IAEJ,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA0C,EAAK;KAAiB,CAAA,EAC9E,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;MACD,CAAA,EACP,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,EAAK;OAAS;OAAI,EAAY,EAAK,UAAU;OACzC;QACH;OACF;;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,KAAD;KAAG,WAAU;eACV,EAAY,EAAK,WAAW;KAC3B,CAAA;IACA,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAK,YACJ,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA,EAAA,YAE7B;SACL,KAAqB,IACvB,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAmB,GAAS,EAAK;KAChD,UAAU;KACV,WAAU;eAET,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,EAAA,cAE1C,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA,EAAA,cAE9B,EAAA,CAAA;KAEE,CAAA,GACP;IACA,CAAA;GACF;;GAOJ,KAIA,EAAE,UAAO,uBAAoB,wBAAqB;CACtD,IAAM,IAAgB,EAAiB,EAAM,OAAO,EAC9C,IAAa,EAAc;AAEjC,QACE,kBAAC,GAAD;EAAW,WAAU;YAArB;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA2C,EAAM;MAAiB,CAAA,EAChF,kBAAC,QAAD;MACE,WAAW,iFAAiF,EAAc;gBAD5G,CAGE,kBAAC,GAAD,EAAY,WAAU,UAAW,CAAA,EAChC,EAAc,MACV;QACH;QACN,kBAAC,KAAD;KAAG,WAAU;eACV,IAAI,KAAK,EAAM,UAAU,CAAC,mBAAmB,SAAS;MACrD,MAAM;MACN,OAAO;MACP,KAAK;MACL,MAAM;MACN,QAAQ;MACT,CAAC;KACA,CAAA,CACA,EAAA,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAY,EAAM,MAAM;MACvB,CAAA,EACJ,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG,EAAM,MAAM;OAAO;OAAE,EAAM,MAAM,WAAW,IAAI,SAAS;OACxD;QACA;OACF;;GAGN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM,MAAM,KAAK,MAChB,kBAAC,GAAD;KAEQ;KACN,SAAS,EAAM;KACf,aAAa,EAAM;KACC;KACpB,YAAY,MAAmB,EAAK;KACpC,EANK,EAAK,GAMV,CACF;IACE,CAAA;GAIN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAkB;MAAe,CAAA,EACjD,kBAAC,QAAD;MAAM,WAAU;gBAAkC,EAAY,EAAM,SAAS;MAAQ,CAAA,CACjF;QACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAkB;MAAU,CAAA,EAC5C,kBAAC,QAAD;MAAM,WAAU;gBAAkC,EAAY,EAAM,IAAI;MAAQ,CAAA,CAC5E;OACF;;GACI;;GASH,UAAuB;CAClC,IAAM,IAAW,GAAa,EACxB,EAAE,gBAAa,GAAU,EACzB,EAAE,SAAM,GAAS,EACjB,EAAE,QAAQ,GAAe,YAAS,UAAO,kBAAe,YAAS,gBAAa,GAAW,EACzF,EAAE,kBAAe,SAAS,MAAyB,GAAkB;AAE3E,GAAkC;EAChC,cAAc;AACP,MAAe;;EAEtB,UAAU,MAAQ;AAChB,WAAQ,KAAK,0CAA0C,EAAI,QAAQ;;EAEtE,CAAC;CAGF,IAAM,CAAC,GAAa,KAAkB,EAAS,GAAM,EAC/C,CAAC,GAAiB,KAAsB,EAAwB,KAAK,EACrE,CAAC,GAAa,KAAkB,EAAyB,KAAK,EAC9D,CAAC,GAAgB,KAAqB,EAAwB,KAAK,EAEnE,IAAsB,QAExB,IAAI,IACF,EAAc,SAAS,MACrB,EAAa,WAAW,WAAW,CAAC,EAAa,UAAU,GAAG,EAAE,CACjE,CACF,EACH,CAAC,EAAc,CAChB,EAGK,IAAoB,EAAc,KAAK,MAAU;EAErD,IAAM,IAAY,EAAM,aAAa,EAAE,EACjC,IAAW,EAAU,QAAQ,GAAK,MAAS,IAAM,EAAK,UAAU,EAAE,EAElE,IAAM,EAAM,QAAQ,GAGpB,IAAqB,EAAU,KAAK,GAAM,OAAW;GACzD,IAAI,GAAG,EAAM,GAAG,GAAG;GACnB,WAAW,EAAK;GAChB,aAAa,EAAK;GAClB,aAAa,EAAK;GAClB,aACE,EAAK,gBACJ,OAAO,EAAK,YAAa,WAAW,EAAK,SAAS,aAAa,GAAG;GACrE,SAAS,EAAK;GACd,UAAU,EAAK;GACf,WAAW,EAAK;GAChB,YAAY,EAAK;GACjB,WAAW,EAAoB,IAAI,EAAK,UAAU;GACnD,EAAE;AAEH,SAAO;GACL,IAAI,EAAM;GACV,aAAa,IAAI,EAAM,GAAG,MAAM,GAAG,CAAC,aAAa;GACjD;GACA;GACA;GACA,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,WAAW,EAAM;GAClB;GACD,EAEI,KAA0B,GAAiB,MAAoB;AAUnE,EATA,EAAmB,EAAQ,EAC3B,EAAkB,EAAK,GAAG,EAC1B,EAAe;GACb,IAAI,EAAK;GACT,MAAM,EAAK;GACX,MAAM,EAAK;GACX,MAAM,EAAK;GACX,SAAS,EAAK;GACf,CAAC,EACF,EAAe,GAAK;IAGhB,UAAyB;AAI7B,EAHA,EAAe,GAAM,EACrB,EAAmB,KAAK,EACxB,EAAe,KAAK,EACpB,EAAkB,KAAK;IAGnB,KAAwB,GAAqB,MAA0B;AACvE,GAAC,KAAmB,CAAC,MAEzB,QAAQ,IACN,0BAA0B,GAAa,KAAK,gBAAgB,EAAc,IAAI,EAAY,GAC3F,EAGD,GAAkB,EACb,GAAsB;IAGvB,KAAsB,MAAiB;AAC3C,UAAQ,MAAM,wBAAwB,EAAM,QAAQ;IAIhD,UAAgC;AACpC,IAAS,GAAG,EAAS,cAAc;;AAGrC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,UAAD;IAAQ,WAAU;cAChB,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAS,GAAG;OAC3B,cAAW;OACX,WAAU;iBAEV,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA;OACzB,CAAA,EACT,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,GAAD,EAAS,WAAU,4BAA6B,CAAA;QAChD,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAE,sBAAsB,EAAE,cAAc,aAAa,CAAC;SACpD,CAAA;QACJ,EAAO,SAAS,KACf,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAO;SACH,CAAA;QAEL;SACF;;KACF,CAAA;IACC,CAAA;GAET,kBAAC,QAAD;IAAM,WAAU;cACb,IAEC,kBAAC,UAAD;KACE,cAAW;KACX,WAAU;eAFZ,CAIE,kBAAC,GAAD;MAAS,WAAU;MAA4C,eAAY;MAAS,CAAA,EACpF,kBAAC,KAAD;MAAG,WAAU;gBAAkB;MAAwB,CAAA,CAChD;SACP,IAEF,kBAAC,OAAD;KAAK,MAAK;KAAQ,WAAU;eAA5B;MACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAS,WAAU,kCAAmC,CAAA;OAClD,CAAA;MACN,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAE,6BAA6B,EAAE,cAAc,yBAAyB,CAAC;OACvE,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAM,WAAW;OAChB,CAAA;MACJ,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;iBAHZ,CAKE,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA,EAAA,qBAE3B;;MACL;SACJ,EAAO,WAAW,IAEpB,kBAAC,GAAD;KACE,cAAa;KACb,OAAO,EAAE,2BAA2B,EAAE,cAAc,iBAAiB,CAAC;KACtE,aAAY;KACZ,QACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA,EAAA,qBAE3B;;KAEX,CAAA,GAGF,kBAAC,MAAD;KAAI,WAAU;eAAd,CACG,EAAO,KAAK,MACX,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;MACS;MACP,oBAAoB;MACpB,gBAAgB,IAAc,IAAiB;MAC/C,CAAA,EACC,EANI,EAAM,GAMV,CACL,EACD,KACC,kBAAC,MAAD;MAAI,WAAU;gBACZ,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU;OACV,WAAU;OACV,cAAY,EAAE,mBAAmB,EAAE,cAAc,aAAa,CAAC;iBALjE,CAOG,IAAU,kBAAC,GAAD;QAAS,WAAU;QAAsB,eAAY;QAAS,CAAA,GAAG,MAC3E,EAAE,mBAAmB,EAAE,cAAc,aAAa,CAAC,CAC7C;;MACN,CAAA,CAEJ;;IAEF,CAAA;GAGN,KACC,kBAAC,GAAD;IACE,QAAQ;IACR,SAAS;IACT,KAAK;IACL,SAAS;IACT,kBAAkB;IAClB,gBAAgB;IAChB,CAAA;GAEA"}