@burdenoff/microfe-store 2026.510.113

package/dist/pages/OrdersPage.js

@@ -0,0 +1,358 @@
+import { useStore as e } from "../providers/StoreProvider.js";
+import { useOrderStatusUpdatedSubscription as t } from "../generated/global-operations.js";
+import { formatPrice as n } from "../utils/index.js";
+import { useInstallations as r } from "../hooks/useInstallations.js";
+import { useOrders as i } from "../hooks/useOrders.js";
+import { InstallAppModal as a } from "../components/InstallAppModal.js";
+import "../components/index.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 { useNavigate as x } from "react-router-dom";
+//#region src/pages/OrdersPage.tsx
+var S = (e) => {
+	switch (e) {
+		case "COMPLETED":
+		case "FULFILLED":
+		case "PROCESSED": return {
+			icon: u,
+			color: "text-status-success-text bg-status-success-bg-subtle/10",
+			label: "Completed"
+		};
+		case "PROCESSING": return {
+			icon: d,
+			color: "text-status-warning-text bg-status-warning-bg-subtle/10",
+			label: "Processing"
+		};
+		case "PENDING": return {
+			icon: d,
+			color: "text-status-warning-text bg-status-warning-bg-subtle/10",
+			label: "Pending"
+		};
+		case "FAILED": return {
+			icon: _,
+			color: "text-status-error-text bg-status-error-bg-subtle/10",
+			label: "Failed"
+		};
+		case "REFUNDED": return {
+			icon: h,
+			color: "text-status-warning-text bg-status-warning-bg-subtle/10",
+			label: "Refunded"
+		};
+		case "CANCELLED": return {
+			icon: h,
+			color: "text-text-muted bg-bg-sunken",
+			label: "Cancelled"
+		};
+		default: return {
+			icon: d,
+			color: "text-text-muted",
+			label: e
+		};
+	}
+}, C = ({ 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",
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken",
+				children: e.productIcon ? /* @__PURE__ */ y("img", {
+					src: e.productIcon,
+					alt: e.productName,
+					className: "h-full w-full object-cover"
+				}) : /* @__PURE__ */ y("div", {
+					className: "flex h-full w-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 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: "h-4 w-4" }), "Installed"]
+				}) : o && s ? /* @__PURE__ */ y("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: "h-4 w-4 animate-spin" }), "Installing..."] }) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(f, { className: "h-4 w-4" }), "Install App"] })
+				}) : null
+			})
+		]
+	});
+}, 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",
+		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: "h-4 w-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 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(C, {
+					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-default",
+				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",
+						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: "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();
+	t({
+		onData: () => {
+			S();
+		},
+		onError: (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.filter((e) => e.status === "ACTIVE").map((e) => e.productId)), [E]), L = 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,
+			productName: t.name,
+			productIcon: t.productIcon,
+			productType: t.productType || (typeof t.itemType == "string" ? t.itemType.toUpperCase() : "APP"),
+			version: t.version,
+			quantity: t.quantity,
+			unitPrice: t.unitPrice,
+			totalPrice: t.subtotal,
+			installed: I.has(t.productId)
+		}));
+		return {
+			id: e.id,
+			orderNumber: `#${e.id.slice(-8).toUpperCase()}`,
+			items: i,
+			subtotal: n,
+			tax: r,
+			total: e.total,
+			status: e.status,
+			createdAt: e.createdAt
+		};
+	}), R = (e, t) => {
+		j(e), F(t.id), N({
+			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) => {
+		console.error("Installation failed:", e.message);
+	}, H = () => {
+		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",
+				children: /* @__PURE__ */ y("div", {
+					className: "mx-auto max-w-4xl",
+					children: /* @__PURE__ */ b("div", {
+						className: "flex items-center gap-4",
+						children: [/* @__PURE__ */ y("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: "h-5 w-5" })
+						}), /* @__PURE__ */ b("div", {
+							className: "flex items-center gap-3",
+							children: [
+								/* @__PURE__ */ y(m, { className: "h-6 w-6 text-text-primary" }),
+								/* @__PURE__ */ y("h1", {
+									className: "text-xl font-bold text-text-primary",
+									children: d("pages.orders.title", { defaultValue: "My Orders" })
+								}),
+								L.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
+								})
+							]
+						})]
+					})
+				})
+			}),
+			/* @__PURE__ */ y("main", {
+				className: "mx-auto max-w-4xl px-6 py-6",
+				children: h ? /* @__PURE__ */ b("div", {
+					role: "status",
+					"aria-label": "Loading orders",
+					className: "flex flex-col items-center justify-center py-16",
+					children: [/* @__PURE__ */ y(p, {
+						className: "h-12 w-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: "h-16 w-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", {
+							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: "h-5 w-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: "h-16 w-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", {
+							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: "h-5 w-5" }), "Browse Marketplace"]
+						})
+					]
+				}) : /* @__PURE__ */ b("ul", {
+					className: "space-y-6",
+					children: [L.map((e) => /* @__PURE__ */ y("li", { children: /* @__PURE__ */ y(w, {
+						order: e,
+						onOpenInstallModal: R,
+						installingItem: O ? P : null
+					}) }, e.id)), C && /* @__PURE__ */ y("li", {
+						className: "flex justify-center pt-4 list-none",
+						children: /* @__PURE__ */ b("button", {
+							type: "button",
+							onClick: T,
+							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: "h-4 w-4 animate-spin",
+								"aria-hidden": "true"
+							}) : null, d("common.loadMore", { defaultValue: "Load more" })]
+						})
+					})]
+				})
+			}),
+			M && /* @__PURE__ */ y(a, {
+				isOpen: O,
+				onClose: z,
+				app: M,
+				orderId: A,
+				onInstallSuccess: B,
+				onInstallError: V
+			})
+		]
+	});
+};
+//#endregion
+export { T as OrdersPage };
+
+//# sourceMappingURL=OrdersPage.js.map

package/dist/pages/OrdersPage.js.map

@@ -0,0 +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';\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=\"h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken\">\n        {item.productIcon ? (\n          <img\n            src={item.productIcon}\n            alt={item.productName}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <div className=\"flex h-full w-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=\"h-4 w-4\" />\n            Installed\n          </span>\n        ) : isOrderSuccessful && isInstallable ? (\n          <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=\"h-4 w-4 animate-spin\" />\n                Installing...\n              </>\n            ) : (\n              <>\n                <Download className=\"h-4 w-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=\"h-4 w-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      <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\n          .filter((installation) => installation.status === 'ACTIVE')\n          .map((installation) => installation.productId)\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              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=\"h-5 w-5\" />\n            </button>\n            <div className=\"flex items-center gap-3\">\n              <Package className=\"h-6 w-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 px-6 py-6\">\n        {loading ? (\n          // Loading State\n          <div\n            role=\"status\"\n            aria-label=\"Loading orders\"\n            className=\"flex flex-col items-center justify-center py-16\"\n          >\n            <Loader2 className=\"h-12 w-12 animate-spin text-text-muted mb-4\" aria-hidden=\"true\" />\n            <p className=\"text-text-muted\">Loading your orders...</p>\n          </div>\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=\"h-16 w-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              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=\"h-5 w-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=\"h-16 w-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              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=\"h-5 w-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=\"h-4 w-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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"}

package/dist/pages/ProductCategoryPage.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+
+export declare const ProductCategoryPage: FC;

package/dist/pages/ProductCategoryPage.js

@@ -0,0 +1,83 @@
+import { useStore as e } from "../providers/StoreProvider.js";
+import { useBrowseStoreWithContext as t } from "../hooks/useStoreGraphQL.js";
+import { useMemo as n } from "react";
+import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowLeft as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useNavigate as s, useParams as c } from "react-router-dom";
+//#region src/pages/ProductCategoryPage.tsx
+var l = ({ product: e, onOpen: t, noDesc: n }) => /* @__PURE__ */ o("button", {
+	onClick: () => t(e.id),
+	className: "cursor-pointer rounded-xl border border-border-default bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken",
+	children: [
+		/* @__PURE__ */ a("h3", {
+			className: "font-semibold text-text-primary",
+			children: e.name
+		}),
+		/* @__PURE__ */ a("p", {
+			className: "mt-1 text-xs text-text-muted",
+			children: e.type
+		}),
+		/* @__PURE__ */ a("p", {
+			className: "mt-2 text-sm text-text-muted line-clamp-2",
+			children: e.description || n
+		})
+	]
+}), u = () => {
+	let u = s(), { basePath: d } = e(), { categorySlug: f } = c(), { t: p } = r(), m = n(() => decodeURIComponent(f ?? ""), [f]), { products: h, loading: g, error: _ } = t({
+		filter: m ? { category: m } : void 0,
+		pagination: { limit: 30 }
+	});
+	return /* @__PURE__ */ o("div", {
+		className: "flex h-full flex-col",
+		children: [/* @__PURE__ */ a("header", {
+			className: "border-b border-border-default bg-bg-surface px-6 py-4",
+			children: /* @__PURE__ */ o("div", {
+				className: "mx-auto flex max-w-6xl items-center gap-3",
+				children: [/* @__PURE__ */ a("button", {
+					onClick: () => u(-1),
+					"aria-label": "Go back",
+					className: "cursor-pointer rounded-lg p-2 text-text-muted hover:bg-bg-sunken hover:text-text-primary",
+					children: /* @__PURE__ */ a(i, { className: "h-5 w-5" })
+				}), /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h1", {
+					className: "text-2xl font-bold text-text-primary",
+					children: p("pages.category.title", {
+						defaultValue: `Category: ${m || "All"}`,
+						name: m || "All"
+					})
+				}), /* @__PURE__ */ a("p", {
+					className: "text-sm text-text-muted",
+					children: p("pages.category.subtitle", { defaultValue: "Browse products filtered by category" })
+				})] })]
+			})
+		}), /* @__PURE__ */ a("main", {
+			className: "flex-1 overflow-y-auto p-6",
+			children: /* @__PURE__ */ a("div", {
+				className: "mx-auto max-w-6xl",
+				children: g ? /* @__PURE__ */ a("p", {
+					role: "status",
+					className: "text-sm text-text-muted",
+					children: p("common.loading", { defaultValue: "Loading products..." })
+				}) : _ ? /* @__PURE__ */ a("p", {
+					role: "alert",
+					className: "text-sm text-status-error-text",
+					children: _.message
+				}) : h.length === 0 ? /* @__PURE__ */ a("p", {
+					className: "text-sm text-text-muted",
+					children: p("pages.category.noProducts", { defaultValue: "No products found for this category." })
+				}) : /* @__PURE__ */ a("ul", {
+					className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+					children: h.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(l, {
+						product: e,
+						noDesc: p("pages.productDetail.noDesc", { defaultValue: "No description available." }),
+						onOpen: (e) => u(`${d}/marketplace/product/${e}`)
+					}) }, e.id))
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { u as ProductCategoryPage };
+
+//# sourceMappingURL=ProductCategoryPage.js.map

package/dist/pages/ProductCategoryPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCategoryPage.js","names":[],"sources":["../../src/pages/ProductCategoryPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo } from 'react';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport { ArrowLeft } from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { useBrowseStoreWithContext, type StoreProduct } from '../hooks/useStoreGraphQL';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nconst ProductTile: FC<{ product: StoreProduct; onOpen: (id: string) => void; noDesc: string }> = ({\n  product,\n  onOpen,\n  noDesc,\n}) => (\n  <button\n    onClick={() => onOpen(product.id)}\n    className=\"cursor-pointer rounded-xl border border-border-default bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken\"\n  >\n    <h3 className=\"font-semibold text-text-primary\">{product.name}</h3>\n    <p className=\"mt-1 text-xs text-text-muted\">{product.type}</p>\n    <p className=\"mt-2 text-sm text-text-muted line-clamp-2\">{product.description || noDesc}</p>\n  </button>\n);\n\nexport const ProductCategoryPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath } = useStore();\n  const { categorySlug } = useParams<{ categorySlug: string }>();\n  const { t } = useI18n();\n\n  const category = useMemo(() => decodeURIComponent(categorySlug ?? ''), [categorySlug]);\n  const { products, loading, error } = useBrowseStoreWithContext({\n    filter: category ? { category } : undefined,\n    pagination: { limit: 30 },\n  });\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <header className=\"border-b border-border-default bg-bg-surface px-6 py-4\">\n        <div className=\"mx-auto flex max-w-6xl items-center gap-3\">\n          <button\n            onClick={() => navigate(-1)}\n            aria-label=\"Go back\"\n            className=\"cursor-pointer rounded-lg p-2 text-text-muted hover:bg-bg-sunken hover:text-text-primary\"\n          >\n            <ArrowLeft className=\"h-5 w-5\" />\n          </button>\n          <div>\n            <h1 className=\"text-2xl font-bold text-text-primary\">\n              {t('pages.category.title', {\n                defaultValue: `Category: ${category || 'All'}`,\n                name: category || 'All',\n              })}\n            </h1>\n            <p className=\"text-sm text-text-muted\">\n              {t('pages.category.subtitle', {\n                defaultValue: 'Browse products filtered by category',\n              })}\n            </p>\n          </div>\n        </div>\n      </header>\n\n      <main className=\"flex-1 overflow-y-auto p-6\">\n        <div className=\"mx-auto max-w-6xl\">\n          {loading ? (\n            <p role=\"status\" className=\"text-sm text-text-muted\">\n              {t('common.loading', { defaultValue: 'Loading products...' })}\n            </p>\n          ) : error ? (\n            <p role=\"alert\" className=\"text-sm text-status-error-text\">\n              {error.message}\n            </p>\n          ) : products.length === 0 ? (\n            <p className=\"text-sm text-text-muted\">\n              {t('pages.category.noProducts', {\n                defaultValue: 'No products found for this category.',\n              })}\n            </p>\n          ) : (\n            <ul className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n              {products.map((product) => (\n                <li key={product.id}>\n                  <ProductTile\n                    product={product}\n                    noDesc={t('pages.productDetail.noDesc', {\n                      defaultValue: 'No description available.',\n                    })}\n                    onOpen={(id) => navigate(`${basePath}/marketplace/product/${id}`)}\n                  />\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n      </main>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAM,KAA4F,EAChG,YACA,WACA,gBAEA,kBAAC,UAAD;CACE,eAAe,EAAO,EAAQ,GAAG;CACjC,WAAU;WAFZ;EAIE,kBAAC,MAAD;GAAI,WAAU;aAAmC,EAAQ;GAAU,CAAA;EACnE,kBAAC,KAAD;GAAG,WAAU;aAAgC,EAAQ;GAAS,CAAA;EAC9D,kBAAC,KAAD;GAAG,WAAU;aAA6C,EAAQ,eAAe;GAAW,CAAA;EACrF;IAGE,UAAgC;CAC3C,IAAM,IAAW,GAAa,EACxB,EAAE,gBAAa,GAAU,EACzB,EAAE,oBAAiB,GAAqC,EACxD,EAAE,SAAM,GAAS,EAEjB,IAAW,QAAc,mBAAmB,KAAgB,GAAG,EAAE,CAAC,EAAa,CAAC,EAChF,EAAE,aAAU,YAAS,aAAU,EAA0B;EAC7D,QAAQ,IAAW,EAAE,aAAU,GAAG,KAAA;EAClC,YAAY,EAAE,OAAO,IAAI;EAC1B,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GAAQ,WAAU;aAChB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,eAAe,EAAS,GAAG;KAC3B,cAAW;KACX,WAAU;eAEV,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;KAC1B,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAE,wBAAwB;MACzB,cAAc,aAAa,KAAY;MACvC,MAAM,KAAY;MACnB,CAAC;KACC,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EAAE,2BAA2B,EAC5B,cAAc,wCACf,CAAC;KACA,CAAA,CACA,EAAA,CAAA,CACF;;GACC,CAAA,EAET,kBAAC,QAAD;GAAM,WAAU;aACd,kBAAC,OAAD;IAAK,WAAU;cACZ,IACC,kBAAC,KAAD;KAAG,MAAK;KAAS,WAAU;eACxB,EAAE,kBAAkB,EAAE,cAAc,uBAAuB,CAAC;KAC3D,CAAA,GACF,IACF,kBAAC,KAAD;KAAG,MAAK;KAAQ,WAAU;eACvB,EAAM;KACL,CAAA,GACF,EAAS,WAAW,IACtB,kBAAC,KAAD;KAAG,WAAU;eACV,EAAE,6BAA6B,EAC9B,cAAc,wCACf,CAAC;KACA,CAAA,GAEJ,kBAAC,MAAD;KAAI,WAAU;eACX,EAAS,KAAK,MACb,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;MACW;MACT,QAAQ,EAAE,8BAA8B,EACtC,cAAc,6BACf,CAAC;MACF,SAAS,MAAO,EAAS,GAAG,EAAS,uBAAuB,IAAK;MACjE,CAAA,EACC,EARI,EAAQ,GAQZ,CACL;KACC,CAAA;IAEH,CAAA;GACD,CAAA,CACH"}

package/dist/pages/ProductDetailPage.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+/**
+ * Product Detail Page Component
+ *
+ * Displays comprehensive product details using real GraphQL data
+ */
+export declare const ProductDetailPage: FC;