@burdenoff/microfe-store 2026.830.1 → 2026.830.2

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, useCallback } from 'react';\nimport { useNavigate } from 'react-router';\nimport {\n  Package,\n  ArrowLeft,\n  ShoppingBag,\n  Download,\n  CheckCircle,\n  Clock,\n  XCircle,\n  RefreshCw,\n  Loader2,\n  ChevronRight,\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, PagePurpose } 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  fulfillment?: {\n    status?: string | null;\n    trackingNumber?: string | null;\n    trackingUrl?: string | null;\n    carrier?: string | null;\n    estimatedDeliveryDate?: string | null;\n  } | null;\n}\n\ntype OrdersTab = 'completed' | 'pending';\n\nconst SUCCESSFUL_ORDER_STATUSES: UIOrder['status'][] = ['COMPLETED', 'FULFILLED', 'PROCESSED'];\n\n/**\n * Get status badge config\n */\nconst getStatusDisplay = (status: UIOrder['status']) => {\n  switch (status) {\n    case 'COMPLETED':\n    case 'FULFILLED':\n    case 'PROCESSED':\n      return {\n        icon: CheckCircle,\n        classes:\n          'bg-status-success-bg-subtle/15 text-status-success-text border-status-success-text/20',\n        label: 'Completed',\n      };\n    case 'PROCESSING':\n      return {\n        icon: Clock,\n        classes:\n          'bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20',\n        label: 'Processing',\n      };\n    case 'PENDING':\n      return {\n        icon: Clock,\n        classes:\n          'bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20',\n        label: 'Pending',\n      };\n    case 'FAILED':\n      return {\n        icon: XCircle,\n        classes: 'bg-status-error-bg-subtle/15 text-status-error-text border-status-error-text/20',\n        label: 'Failed',\n      };\n    case 'REFUNDED':\n      return {\n        icon: RefreshCw,\n        classes:\n          'bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20',\n        label: 'Refunded',\n      };\n    case 'CANCELLED':\n      return {\n        icon: RefreshCw,\n        classes: 'bg-bg-sunken text-text-muted border-border-default',\n        label: 'Cancelled',\n      };\n    default:\n      return {\n        icon: Clock,\n        classes: 'bg-bg-sunken text-text-muted border-border-default',\n        label: status,\n      };\n  }\n};\n\n/**\n * Status badge component\n */\nconst StatusBadge: FC<{ status: UIOrder['status'] }> = ({ status }) => {\n  const display = getStatusDisplay(status);\n  const Icon = display.icon;\n  return (\n    <span\n      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-semibold ${display.classes}`}\n    >\n      <Icon className=\"size-3.5\" />\n      {display.label}\n    </span>\n  );\n};\n\n/**\n * OrdersPage component\n *\n * Displays a table of all orders with expandable rows showing line items\n * and Install App buttons for digital products.\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  // Expanded rows tracking\n  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());\n  const [activeTab, setActiveTab] = useState<OrdersTab>('completed');\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    const lineItems = order.lineItems || [];\n    const subtotal = lineItems.reduce((sum, item) => sum + item.subtotal, 0);\n    const tax = order.total - subtotal;\n\n    const items: OrderItem[] = lineItems.map((item, index) => ({\n      id: `${order.id}-${index}`,\n      productId: item.productId,\n      productName: item.name,\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,\n      installed: installedProductIds.has(item.productId),\n    }));\n\n    return {\n      id: order.id,\n      orderNumber: `#${order.id.slice(-8).toUpperCase()}`,\n      items,\n      subtotal,\n      tax,\n      total: order.total,\n      status: order.status as UIOrder['status'],\n      createdAt: order.createdAt,\n      fulfillment: order.fulfillment ?? null,\n    };\n  });\n\n  const completedOrders = useMemo(\n    () => orders.filter((order) => SUCCESSFUL_ORDER_STATUSES.includes(order.status)),\n    [orders]\n  );\n\n  const pendingOrders = useMemo(\n    () => orders.filter((order) => !SUCCESSFUL_ORDER_STATUSES.includes(order.status)),\n    [orders]\n  );\n\n  const visibleOrders = activeTab === 'completed' ? completedOrders : pendingOrders;\n\n  const toggleExpand = useCallback((orderId: string) => {\n    setExpandedOrders((prev) => {\n      const next = new Set(prev);\n      if (next.has(orderId)) {\n        next.delete(orderId);\n      } else {\n        next.add(orderId);\n      }\n      return next;\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    handleCloseModal();\n    void refetchInstallations();\n  };\n\n  const handleInstallError = (_error: Error) => {\n    // Error is displayed in modal\n  };\n\n  const handleBrowseMarketplace = () => {\n    navigate(`${basePath}/marketplace`);\n  };\n\n  // ──── Shared table cell classes ────\n  const cellCls = 'px-4 py-3 text-sm';\n  const headerCls =\n    'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-text-muted';\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      {/* Header */}\n      <header className=\"flex-shrink-0 border-b border-border-seam bg-bg-surface px-6 py-4\">\n        <div className=\"mx-auto max-w-6xl\">\n          <div className=\"flex items-center justify-between\">\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/10 px-2.5 py-0.5 text-sm font-medium text-action-primary-bg\">\n                    {orders.length}\n                  </span>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </header>\n\n      {/* Scrollable content area */}\n      <div className=\"flex-1 overflow-y-auto\">\n        <div className=\"mx-auto max-w-6xl p-6\">\n          <PagePurpose className=\"mb-6\">\n            A record of everything you've purchased from the marketplace. Track each order's status,\n            review what you paid, and — once an order is complete — install the apps you bought into\n            a workspace right from here. Come back to re-install on a new workspace or check a past\n            receipt.\n          </PagePurpose>\n\n          {loading && orders.length === 0 ? (\n            // ── Loading state ──\n            <div className=\"flex flex-col items-center justify-center py-24\">\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            </div>\n          ) : error ? (\n            // ── Error state ──\n            <div className=\"flex flex-col items-center justify-center py-24 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            // ── Table ──\n            <div className=\"space-y-4\">\n              <div className=\"inline-flex rounded-xl border border-border-seam bg-bg-surface p-1\">\n                <button\n                  type=\"button\"\n                  onClick={() => setActiveTab('completed')}\n                  className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${\n                    activeTab === 'completed'\n                      ? 'bg-action-primary-bg text-action-primary-text'\n                      : 'text-text-muted hover:bg-bg-sunken hover:text-text-primary'\n                  }`}\n                >\n                  Completed\n                  <span className=\"ml-2 rounded-full bg-black/10 px-2 py-0.5 text-xs\">\n                    {completedOrders.length}\n                  </span>\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setActiveTab('pending')}\n                  className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${\n                    activeTab === 'pending'\n                      ? 'bg-action-primary-bg text-action-primary-text'\n                      : 'text-text-muted hover:bg-bg-sunken hover:text-text-primary'\n                  }`}\n                >\n                  Pending\n                  <span className=\"ml-2 rounded-full bg-black/10 px-2 py-0.5 text-xs\">\n                    {pendingOrders.length}\n                  </span>\n                </button>\n              </div>\n\n              {visibleOrders.length === 0 ? (\n                <GlassCard className=\"p-10 text-center\">\n                  <div className=\"mx-auto mb-4 flex size-14 items-center justify-center rounded-full bg-bg-sunken text-text-muted\">\n                    <Package className=\"size-6\" />\n                  </div>\n                  <h2 className=\"mb-2 text-lg font-semibold text-text-primary\">\n                    {activeTab === 'completed' ? 'No completed orders yet' : 'No pending orders'}\n                  </h2>\n                  <p className=\"text-sm text-text-muted\">\n                    {activeTab === 'completed'\n                      ? 'Completed purchases will appear here once payment is successful.'\n                      : 'Orders that are pending, processing, failed, refunded, or cancelled will appear here.'}\n                  </p>\n                </GlassCard>\n              ) : (\n                <div className=\"overflow-hidden rounded-xl border border-border-seam bg-bg-surface\">\n                  {/* Table Header */}\n                  <div className=\"hidden border-b border-border-seam bg-bg-sunken/50 md:grid md:grid-cols-[40px_1fr_180px_140px_120px_160px]\">\n                    <div className={headerCls} />\n                    <div className={headerCls}>Order</div>\n                    <div className={headerCls}>Date</div>\n                    <div className={headerCls}>Items</div>\n                    <div className={`${headerCls} text-right`}>Total</div>\n                    <div className={`${headerCls} text-center`}>Status</div>\n                  </div>\n\n                  {/* Table Body */}\n                  {visibleOrders.map((order) => {\n                    const isExpanded = expandedOrders.has(order.id);\n                    const isSuccessful =\n                      order.status === 'COMPLETED' ||\n                      order.status === 'FULFILLED' ||\n                      order.status === 'PROCESSED';\n\n                    return (\n                      <div key={order.id} className=\"border-b border-border-seam last:border-b-0\">\n                        {/* Order Row */}\n                        <button\n                          type=\"button\"\n                          onClick={() => toggleExpand(order.id)}\n                          className=\"grid w-full cursor-pointer grid-cols-[40px_1fr_180px_140px_120px_160px] items-center transition-colors hover:bg-bg-sunken/50 md:grid\"\n                        >\n                          {/* Expand/collapse chevron */}\n                          <div className={`${cellCls} flex justify-center`}>\n                            <ChevronRight\n                              className={`size-4 text-text-muted transition-transform duration-200 ${\n                                isExpanded ? 'rotate-90' : ''\n                              }`}\n                            />\n                          </div>\n\n                          {/* Order number */}\n                          <div className={`${cellCls} font-medium text-text-primary`}>\n                            {order.orderNumber}\n                          </div>\n\n                          {/* Date */}\n                          <div className={`${cellCls} text-text-muted`}>\n                            {new Date(order.createdAt).toLocaleDateString('en-US', {\n                              year: 'numeric',\n                              month: 'short',\n                              day: 'numeric',\n                            })}\n                          </div>\n\n                          {/* Items summary */}\n                          <div className={`${cellCls} text-text-muted`}>\n                            {order.items.length} {order.items.length === 1 ? 'item' : 'items'}\n                            <span className=\"block text-xs text-text-muted/70\">\n                              {order.items.map((i) => i.productName).join(', ')}\n                            </span>\n                          </div>\n\n                          {/* Total */}\n                          <div\n                            className={`${cellCls} text-right font-semibold tabular-nums text-text-primary`}\n                          >\n                            {formatPrice(order.total)}\n                          </div>\n\n                          {/* Status */}\n                          <div className={`${cellCls} flex justify-center`}>\n                            <StatusBadge status={order.status} />\n                          </div>\n                        </button>\n\n                        {/* Expanded: Line items */}\n                        {isExpanded && (\n                          <div className=\"border-t border-border-seam bg-bg-sunken/30\">\n                            {order.fulfillment && (\n                              <div className=\"mx-4 mt-4 rounded-xl border border-border-seam bg-bg-surface px-4 py-4 md:mx-12\">\n                                <div className=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n                                  <div>\n                                    <div className=\"text-sm font-semibold text-text-primary\">\n                                      Order tracking\n                                    </div>\n                                    <div className=\"mt-1 text-xs text-text-muted\">\n                                      {order.fulfillment.status || 'PENDING'}\n                                      {order.fulfillment.carrier\n                                        ? ` · ${order.fulfillment.carrier}`\n                                        : ''}\n                                      {order.fulfillment.estimatedDeliveryDate\n                                        ? ` · Est. delivery ${new Date(order.fulfillment.estimatedDeliveryDate).toLocaleDateString()}`\n                                        : ''}\n                                    </div>\n                                  </div>\n\n                                  <div className=\"flex flex-col items-start gap-2 md:items-end\">\n                                    {order.fulfillment.trackingNumber && (\n                                      <div className=\"text-xs text-text-muted\">\n                                        Tracking #:{' '}\n                                        <span className=\"font-medium text-text-primary\">\n                                          {order.fulfillment.trackingNumber}\n                                        </span>\n                                      </div>\n                                    )}\n                                    {order.fulfillment.trackingUrl && (\n                                      <a\n                                        href={order.fulfillment.trackingUrl}\n                                        target=\"_blank\"\n                                        rel=\"noreferrer\"\n                                        className=\"inline-flex items-center gap-1 rounded-md border border-border-default px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken\"\n                                      >\n                                        Track package\n                                        <ChevronRight className=\"size-3.5\" />\n                                      </a>\n                                    )}\n                                  </div>\n                                </div>\n\n                                <div className=\"mt-4 grid gap-2 sm:grid-cols-4\">\n                                  {[\n                                    { key: 'PROCESSING', label: 'Processing' },\n                                    { key: 'SHIPPED', label: 'Shipped' },\n                                    { key: 'OUT_FOR_DELIVERY', label: 'Out for delivery' },\n                                    { key: 'DELIVERED', label: 'Delivered' },\n                                  ].map((step) => {\n                                    const current = order.fulfillment?.status || 'PENDING';\n                                    const reached =\n                                      [\n                                        'PROCESSING',\n                                        'READY_TO_SHIP',\n                                        'SHIPPED',\n                                        'IN_TRANSIT',\n                                        'OUT_FOR_DELIVERY',\n                                        'DELIVERED',\n                                      ].indexOf(current) >=\n                                      [\n                                        'PROCESSING',\n                                        'SHIPPED',\n                                        'OUT_FOR_DELIVERY',\n                                        'DELIVERED',\n                                      ].indexOf(step.key);\n                                    return (\n                                      <div\n                                        key={step.key}\n                                        className={`rounded-lg border px-3 py-2 text-xs font-medium ${\n                                          reached\n                                            ? 'border-status-success-border bg-status-success-bg-subtle text-status-success-text'\n                                            : 'border-border-seam bg-bg-sunken/40 text-text-muted'\n                                        }`}\n                                      >\n                                        {step.label}\n                                      </div>\n                                    );\n                                  })}\n                                </div>\n                              </div>\n                            )}\n\n                            {/* Column headers for items */}\n                            <div className=\"hidden grid-cols-[1fr_100px_120px_160px] gap-4 px-12 py-2 md:grid\">\n                              <span className=\"text-xs font-medium text-text-muted\">Product</span>\n                              <span className=\"text-xs font-medium text-text-muted text-right\">\n                                Qty\n                              </span>\n                              <span className=\"text-xs font-medium text-text-muted text-right\">\n                                Price\n                              </span>\n                              <span className=\"text-xs font-medium text-text-muted text-center\">\n                                Action\n                              </span>\n                            </div>\n\n                            {order.items.map((item) => {\n                              const isInstallable =\n                                item.productType !== 'PHYSICAL' &&\n                                item.productType !== 'MERCHANDISE';\n\n                              return (\n                                <div\n                                  key={item.id}\n                                  className=\"grid grid-cols-[auto_1fr_auto] items-center gap-3 px-4 py-3 md:px-12 md:grid-cols-[1fr_100px_120px_160px]\"\n                                >\n                                  {/* Product info */}\n                                  <div className=\"flex items-center gap-3 min-w-0\">\n                                    <div className=\"size-10 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=\"size-full object-cover\"\n                                        />\n                                      ) : (\n                                        <div className=\"flex size-full items-center justify-center text-sm font-bold text-text-muted\">\n                                          {item.productName.charAt(0)}\n                                        </div>\n                                      )}\n                                    </div>\n                                    <div className=\"min-w-0\">\n                                      <p className=\"truncate text-sm font-medium text-text-primary\">\n                                        {item.productName}\n                                      </p>\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                                    </div>\n                                  </div>\n\n                                  {/* Quantity */}\n                                  <div className=\"hidden text-right text-sm text-text-muted md:block\">\n                                    {item.quantity}\n                                  </div>\n\n                                  {/* Price */}\n                                  <div className=\"hidden text-right text-sm font-semibold tabular-nums text-text-primary md:block\">\n                                    {formatPrice(item.totalPrice)}\n                                  </div>\n\n                                  {/* Mobile price + qty */}\n                                  <div className=\"text-right text-sm text-text-muted md:hidden\">\n                                    <span className=\"tabular-nums\">{item.quantity} &times; </span>\n                                    <span className=\"font-semibold text-text-primary tabular-nums\">\n                                      {formatPrice(item.unitPrice)}\n                                    </span>\n                                  </div>\n\n                                  {/* Install button */}\n                                  <div className=\"flex justify-end md:justify-center\">\n                                    {item.installed ? (\n                                      <span className=\"inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-medium text-status-success-text\">\n                                        <CheckCircle className=\"size-3.5\" />\n                                        Installed\n                                      </span>\n                                    ) : isSuccessful && isInstallable ? (\n                                      <button\n                                        type=\"button\"\n                                        onClick={(e) => {\n                                          e.stopPropagation();\n                                          handleOpenInstallModal(order.id, item);\n                                        }}\n                                        className=\"inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text transition-all hover:opacity-90 active:scale-95\"\n                                      >\n                                        <Download className=\"size-3.5\" />\n                                        Install App\n                                      </button>\n                                    ) : null}\n                                  </div>\n                                </div>\n                              );\n                            })}\n\n                            {/* Order summary footer */}\n                            <div className=\"border-t border-border-seam/50 px-4 py-2 md:px-12\">\n                              <div className=\"flex justify-end gap-6 text-xs text-text-muted\">\n                                <span>\n                                  Subtotal:{' '}\n                                  <span className=\"tabular-nums text-text-primary\">\n                                    {formatPrice(order.subtotal)}\n                                  </span>\n                                </span>\n                                <span>\n                                  Tax:{' '}\n                                  <span className=\"tabular-nums text-text-primary\">\n                                    {formatPrice(order.tax)}\n                                  </span>\n                                </span>\n                                <span className=\"font-semibold\">\n                                  Total:{' '}\n                                  <span className=\"tabular-nums text-text-primary\">\n                                    {formatPrice(order.total)}\n                                  </span>\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        )}\n                      </div>\n                    );\n                  })}\n\n                  {/* Load More */}\n                  {hasMore && (\n                    <div className=\"flex justify-center px-4 py-5\">\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 transition-colors hover:bg-bg-subtle disabled:opacity-50\"\n                        aria-label={t('common.loadMore', { defaultValue: 'Load more' })}\n                      >\n                        {loading ? (\n                          <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n                        ) : null}\n                        {t('common.loadMore', { defaultValue: 'Load more' })}\n                      </button>\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\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, useCallback } from 'react';\nimport { useNavigate } from 'react-router';\nimport {\n  Package,\n  ArrowLeft,\n  ShoppingBag,\n  Download,\n  CheckCircle,\n  Clock,\n  XCircle,\n  RefreshCw,\n  Loader2,\n  ChevronRight,\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 { useTr } from '../shared/hooks/useTr';\nimport { GlassCard, IllustratedEmptyState, PagePurpose } 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  fulfillment?: {\n    status?: string | null;\n    trackingNumber?: string | null;\n    trackingUrl?: string | null;\n    carrier?: string | null;\n    estimatedDeliveryDate?: string | null;\n  } | null;\n}\n\ntype OrdersTab = 'completed' | 'pending';\n\nconst SUCCESSFUL_ORDER_STATUSES: UIOrder['status'][] = ['COMPLETED', 'FULFILLED', 'PROCESSED'];\n\n/**\n * Get status badge config\n */\nconst getStatusDisplay = (\n  status: UIOrder['status'],\n  tr: (key: string, fallback: string) => string\n) => {\n  switch (status) {\n    case 'COMPLETED':\n    case 'FULFILLED':\n    case 'PROCESSED':\n      return {\n        icon: CheckCircle,\n        classes:\n          'bg-status-success-bg-subtle/15 text-status-success-text border-status-success-text/20',\n        label: tr('pages.orders.statusCompleted', 'Completed'),\n      };\n    case 'PROCESSING':\n      return {\n        icon: Clock,\n        classes:\n          'bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20',\n        label: tr('pages.orders.statusProcessing', 'Processing'),\n      };\n    case 'PENDING':\n      return {\n        icon: Clock,\n        classes:\n          'bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20',\n        label: tr('pages.orders.statusPending', 'Pending'),\n      };\n    case 'FAILED':\n      return {\n        icon: XCircle,\n        classes: 'bg-status-error-bg-subtle/15 text-status-error-text border-status-error-text/20',\n        label: tr('pages.orders.statusFailed', 'Failed'),\n      };\n    case 'REFUNDED':\n      return {\n        icon: RefreshCw,\n        classes:\n          'bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20',\n        label: tr('pages.orders.statusRefunded', 'Refunded'),\n      };\n    case 'CANCELLED':\n      return {\n        icon: RefreshCw,\n        classes: 'bg-bg-sunken text-text-muted border-border-default',\n        label: tr('pages.orders.statusCancelled', 'Cancelled'),\n      };\n    default:\n      return {\n        icon: Clock,\n        classes: 'bg-bg-sunken text-text-muted border-border-default',\n        label: status,\n      };\n  }\n};\n\n/**\n * Status badge component\n */\nconst StatusBadge: FC<{\n  status: UIOrder['status'];\n  tr: (key: string, fallback: string) => string;\n}> = ({ status, tr }) => {\n  const display = getStatusDisplay(status, tr);\n  const Icon = display.icon;\n  return (\n    <span\n      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-semibold ${display.classes}`}\n    >\n      <Icon className=\"size-3.5\" />\n      {display.label}\n    </span>\n  );\n};\n\n/**\n * OrdersPage component\n *\n * Displays a table of all orders with expandable rows showing line items\n * and Install App buttons for digital products.\n */\nexport const OrdersPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath } = useStore();\n  const { t } = useI18n();\n  const tr = useTr();\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  // Expanded rows tracking\n  const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());\n  const [activeTab, setActiveTab] = useState<OrdersTab>('completed');\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    const lineItems = order.lineItems || [];\n    const subtotal = lineItems.reduce((sum, item) => sum + item.subtotal, 0);\n    const tax = order.total - subtotal;\n\n    const items: OrderItem[] = lineItems.map((item, index) => ({\n      id: `${order.id}-${index}`,\n      productId: item.productId,\n      productName: item.name,\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,\n      installed: installedProductIds.has(item.productId),\n    }));\n\n    return {\n      id: order.id,\n      orderNumber: `#${order.id.slice(-8).toUpperCase()}`,\n      items,\n      subtotal,\n      tax,\n      total: order.total,\n      status: order.status as UIOrder['status'],\n      createdAt: order.createdAt,\n      fulfillment: order.fulfillment ?? null,\n    };\n  });\n\n  const completedOrders = useMemo(\n    () => orders.filter((order) => SUCCESSFUL_ORDER_STATUSES.includes(order.status)),\n    [orders]\n  );\n\n  const pendingOrders = useMemo(\n    () => orders.filter((order) => !SUCCESSFUL_ORDER_STATUSES.includes(order.status)),\n    [orders]\n  );\n\n  const visibleOrders = activeTab === 'completed' ? completedOrders : pendingOrders;\n\n  const toggleExpand = useCallback((orderId: string) => {\n    setExpandedOrders((prev) => {\n      const next = new Set(prev);\n      if (next.has(orderId)) {\n        next.delete(orderId);\n      } else {\n        next.add(orderId);\n      }\n      return next;\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    handleCloseModal();\n    void refetchInstallations();\n  };\n\n  const handleInstallError = (_error: Error) => {\n    // Error is displayed in modal\n  };\n\n  const handleBrowseMarketplace = () => {\n    navigate(`${basePath}/marketplace`);\n  };\n\n  // ──── Shared table cell classes ────\n  const cellCls = 'px-4 py-3 text-sm';\n  const headerCls =\n    'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-text-muted';\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      {/* Header */}\n      <header className=\"flex-shrink-0 border-b border-border-seam bg-bg-surface px-6 py-4\">\n        <div className=\"mx-auto max-w-6xl\">\n          <div className=\"flex items-center justify-between\">\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/10 px-2.5 py-0.5 text-sm font-medium text-action-primary-bg\">\n                    {orders.length}\n                  </span>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </header>\n\n      {/* Scrollable content area */}\n      <div className=\"flex-1 overflow-y-auto\">\n        <div className=\"mx-auto max-w-6xl p-6\">\n          <PagePurpose className=\"mb-6\">\n            {tr(\n              'pages.orders.purpose',\n              \"A record of everything you've purchased from the marketplace. Track each order's status, review what you paid, and — once an order is complete — install the apps you bought into a workspace right from here. Come back to re-install on a new workspace or check a past receipt.\"\n            )}\n          </PagePurpose>\n\n          {loading && orders.length === 0 ? (\n            // ── Loading state ──\n            <div className=\"flex flex-col items-center justify-center py-24\">\n              <Loader2 className=\"size-12 animate-spin text-text-muted mb-4\" aria-hidden=\"true\" />\n              <p className=\"text-text-muted\">\n                {tr('pages.orders.loading', 'Loading your orders…')}\n              </p>\n            </div>\n          ) : error ? (\n            // ── Error state ──\n            <div className=\"flex flex-col items-center justify-center py-24 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 ||\n                  tr(\n                    'pages.orders.errorDescription',\n                    'An error occurred while loading your orders. Please try again.'\n                  )}\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                {tr('pages.orders.browseMarketplace', '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={tr(\n                'pages.orders.emptyDescription',\n                'You have not placed any orders yet. Browse the marketplace to discover apps and products!'\n              )}\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                  {tr('pages.orders.browseMarketplace', 'Browse Marketplace')}\n                </button>\n              }\n            />\n          ) : (\n            // ── Table ──\n            <div className=\"space-y-4\">\n              <div className=\"inline-flex rounded-xl border border-border-seam bg-bg-surface p-1\">\n                <button\n                  type=\"button\"\n                  onClick={() => setActiveTab('completed')}\n                  className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${\n                    activeTab === 'completed'\n                      ? 'bg-action-primary-bg text-action-primary-text'\n                      : 'text-text-muted hover:bg-bg-sunken hover:text-text-primary'\n                  }`}\n                >\n                  {tr('pages.orders.tabCompleted', 'Completed')}\n                  <span className=\"ml-2 rounded-full bg-black/10 px-2 py-0.5 text-xs\">\n                    {completedOrders.length}\n                  </span>\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setActiveTab('pending')}\n                  className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${\n                    activeTab === 'pending'\n                      ? 'bg-action-primary-bg text-action-primary-text'\n                      : 'text-text-muted hover:bg-bg-sunken hover:text-text-primary'\n                  }`}\n                >\n                  {tr('pages.orders.tabPending', 'Pending')}\n                  <span className=\"ml-2 rounded-full bg-black/10 px-2 py-0.5 text-xs\">\n                    {pendingOrders.length}\n                  </span>\n                </button>\n              </div>\n\n              {visibleOrders.length === 0 ? (\n                <GlassCard className=\"p-10 text-center\">\n                  <div className=\"mx-auto mb-4 flex size-14 items-center justify-center rounded-full bg-bg-sunken text-text-muted\">\n                    <Package className=\"size-6\" />\n                  </div>\n                  <h2 className=\"mb-2 text-lg font-semibold text-text-primary\">\n                    {activeTab === 'completed'\n                      ? tr('pages.orders.noCompletedTitle', 'No completed orders yet')\n                      : tr('pages.orders.noPendingTitle', 'No pending orders')}\n                  </h2>\n                  <p className=\"text-sm text-text-muted\">\n                    {activeTab === 'completed'\n                      ? tr(\n                          'pages.orders.noCompletedDescription',\n                          'Completed purchases will appear here once payment is successful.'\n                        )\n                      : tr(\n                          'pages.orders.noPendingDescription',\n                          'Orders that are pending, processing, failed, refunded, or cancelled will appear here.'\n                        )}\n                  </p>\n                </GlassCard>\n              ) : (\n                <div className=\"overflow-hidden rounded-xl border border-border-seam bg-bg-surface\">\n                  {/* Table Header */}\n                  <div className=\"hidden border-b border-border-seam bg-bg-sunken/50 md:grid md:grid-cols-[40px_1fr_180px_140px_120px_160px]\">\n                    <div className={headerCls} />\n                    <div className={headerCls}>{tr('pages.orders.colOrder', 'Order')}</div>\n                    <div className={headerCls}>{tr('pages.orders.colDate', 'Date')}</div>\n                    <div className={headerCls}>{tr('pages.orders.colItems', 'Items')}</div>\n                    <div className={`${headerCls} text-right`}>\n                      {tr('pages.orders.colTotal', 'Total')}\n                    </div>\n                    <div className={`${headerCls} text-center`}>\n                      {tr('pages.orders.colStatus', 'Status')}\n                    </div>\n                  </div>\n\n                  {/* Table Body */}\n                  {visibleOrders.map((order) => {\n                    const isExpanded = expandedOrders.has(order.id);\n                    const isSuccessful =\n                      order.status === 'COMPLETED' ||\n                      order.status === 'FULFILLED' ||\n                      order.status === 'PROCESSED';\n\n                    return (\n                      <div key={order.id} className=\"border-b border-border-seam last:border-b-0\">\n                        {/* Order Row */}\n                        <button\n                          type=\"button\"\n                          onClick={() => toggleExpand(order.id)}\n                          className=\"grid w-full cursor-pointer grid-cols-[40px_1fr_180px_140px_120px_160px] items-center transition-colors hover:bg-bg-sunken/50 md:grid\"\n                        >\n                          {/* Expand/collapse chevron */}\n                          <div className={`${cellCls} flex justify-center`}>\n                            <ChevronRight\n                              className={`size-4 text-text-muted transition-transform duration-200 ${\n                                isExpanded ? 'rotate-90' : ''\n                              }`}\n                            />\n                          </div>\n\n                          {/* Order number */}\n                          <div className={`${cellCls} font-medium text-text-primary`}>\n                            {order.orderNumber}\n                          </div>\n\n                          {/* Date */}\n                          <div className={`${cellCls} text-text-muted`}>\n                            {new Date(order.createdAt).toLocaleDateString('en-US', {\n                              year: 'numeric',\n                              month: 'short',\n                              day: 'numeric',\n                            })}\n                          </div>\n\n                          {/* Items summary */}\n                          <div className={`${cellCls} text-text-muted`}>\n                            {order.items.length}{' '}\n                            {order.items.length === 1\n                              ? tr('pages.orders.item', 'item')\n                              : tr('pages.orders.items', 'items')}\n                            <span className=\"block text-xs text-text-muted/70\">\n                              {order.items.map((i) => i.productName).join(', ')}\n                            </span>\n                          </div>\n\n                          {/* Total */}\n                          <div\n                            className={`${cellCls} text-right font-semibold tabular-nums text-text-primary`}\n                          >\n                            {formatPrice(order.total)}\n                          </div>\n\n                          {/* Status */}\n                          <div className={`${cellCls} flex justify-center`}>\n                            <StatusBadge status={order.status} tr={tr} />\n                          </div>\n                        </button>\n\n                        {/* Expanded: Line items */}\n                        {isExpanded && (\n                          <div className=\"border-t border-border-seam bg-bg-sunken/30\">\n                            {order.fulfillment && (\n                              <div className=\"mx-4 mt-4 rounded-xl border border-border-seam bg-bg-surface px-4 py-4 md:mx-12\">\n                                <div className=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n                                  <div>\n                                    <div className=\"text-sm font-semibold text-text-primary\">\n                                      {tr('pages.orders.orderTracking', 'Order tracking')}\n                                    </div>\n                                    <div className=\"mt-1 text-xs text-text-muted\">\n                                      {order.fulfillment.status ||\n                                        tr('pages.orders.statusPending', 'Pending')}\n                                      {order.fulfillment.carrier\n                                        ? ` · ${order.fulfillment.carrier}`\n                                        : ''}\n                                      {order.fulfillment.estimatedDeliveryDate\n                                        ? ` · ${tr('pages.orders.estimatedDelivery', 'Est. delivery {{date}}', { date: new Date(order.fulfillment.estimatedDeliveryDate).toLocaleDateString() })}`\n                                        : ''}\n                                    </div>\n                                  </div>\n\n                                  <div className=\"flex flex-col items-start gap-2 md:items-end\">\n                                    {order.fulfillment.trackingNumber && (\n                                      <div className=\"text-xs text-text-muted\">\n                                        {tr(\n                                          'pages.orders.trackingNumber',\n                                          'Tracking #: {{number}}',\n                                          { number: order.fulfillment.trackingNumber }\n                                        )}\n                                      </div>\n                                    )}\n                                    {order.fulfillment.trackingUrl && (\n                                      <a\n                                        href={order.fulfillment.trackingUrl}\n                                        target=\"_blank\"\n                                        rel=\"noreferrer\"\n                                        className=\"inline-flex items-center gap-1 rounded-md border border-border-default px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken\"\n                                      >\n                                        {tr('pages.orders.trackPackage', 'Track package')}\n                                        <ChevronRight className=\"size-3.5\" />\n                                      </a>\n                                    )}\n                                  </div>\n                                </div>\n\n                                <div className=\"mt-4 grid gap-2 sm:grid-cols-4\">\n                                  {[\n                                    {\n                                      key: 'PROCESSING',\n                                      label: tr('pages.orders.stepProcessing', 'Processing'),\n                                    },\n                                    {\n                                      key: 'SHIPPED',\n                                      label: tr('pages.orders.stepShipped', 'Shipped'),\n                                    },\n                                    {\n                                      key: 'OUT_FOR_DELIVERY',\n                                      label: tr(\n                                        'pages.orders.stepOutForDelivery',\n                                        'Out for delivery'\n                                      ),\n                                    },\n                                    {\n                                      key: 'DELIVERED',\n                                      label: tr('pages.orders.stepDelivered', 'Delivered'),\n                                    },\n                                  ].map((step) => {\n                                    const current = order.fulfillment?.status || 'PENDING';\n                                    const reached =\n                                      [\n                                        'PROCESSING',\n                                        'READY_TO_SHIP',\n                                        'SHIPPED',\n                                        'IN_TRANSIT',\n                                        'OUT_FOR_DELIVERY',\n                                        'DELIVERED',\n                                      ].indexOf(current) >=\n                                      [\n                                        'PROCESSING',\n                                        'SHIPPED',\n                                        'OUT_FOR_DELIVERY',\n                                        'DELIVERED',\n                                      ].indexOf(step.key);\n                                    return (\n                                      <div\n                                        key={step.key}\n                                        className={`rounded-lg border px-3 py-2 text-xs font-medium ${\n                                          reached\n                                            ? 'border-status-success-border bg-status-success-bg-subtle text-status-success-text'\n                                            : 'border-border-seam bg-bg-sunken/40 text-text-muted'\n                                        }`}\n                                      >\n                                        {step.label}\n                                      </div>\n                                    );\n                                  })}\n                                </div>\n                              </div>\n                            )}\n\n                            {/* Column headers for items */}\n                            <div className=\"hidden grid-cols-[1fr_100px_120px_160px] gap-4 px-12 py-2 md:grid\">\n                              <span className=\"text-xs font-medium text-text-muted\">\n                                {tr('pages.orders.colProduct', 'Product')}\n                              </span>\n                              <span className=\"text-xs font-medium text-text-muted text-right\">\n                                {tr('pages.orders.colQty', 'Qty')}\n                              </span>\n                              <span className=\"text-xs font-medium text-text-muted text-right\">\n                                {tr('pages.orders.colPrice', 'Price')}\n                              </span>\n                              <span className=\"text-xs font-medium text-text-muted text-center\">\n                                {tr('pages.orders.colAction', 'Action')}\n                              </span>\n                            </div>\n\n                            {order.items.map((item) => {\n                              const isInstallable =\n                                item.productType !== 'PHYSICAL' &&\n                                item.productType !== 'MERCHANDISE';\n\n                              return (\n                                <div\n                                  key={item.id}\n                                  className=\"grid grid-cols-[auto_1fr_auto] items-center gap-3 px-4 py-3 md:px-12 md:grid-cols-[1fr_100px_120px_160px]\"\n                                >\n                                  {/* Product info */}\n                                  <div className=\"flex items-center gap-3 min-w-0\">\n                                    <div className=\"size-10 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=\"size-full object-cover\"\n                                        />\n                                      ) : (\n                                        <div className=\"flex size-full items-center justify-center text-sm font-bold text-text-muted\">\n                                          {item.productName.charAt(0)}\n                                        </div>\n                                      )}\n                                    </div>\n                                    <div className=\"min-w-0\">\n                                      <p className=\"truncate text-sm font-medium text-text-primary\">\n                                        {item.productName}\n                                      </p>\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                                    </div>\n                                  </div>\n\n                                  {/* Quantity */}\n                                  <div className=\"hidden text-right text-sm text-text-muted md:block\">\n                                    {item.quantity}\n                                  </div>\n\n                                  {/* Price */}\n                                  <div className=\"hidden text-right text-sm font-semibold tabular-nums text-text-primary md:block\">\n                                    {formatPrice(item.totalPrice)}\n                                  </div>\n\n                                  {/* Mobile price + qty */}\n                                  <div className=\"text-right text-sm text-text-muted md:hidden\">\n                                    <span className=\"tabular-nums\">\n                                      {tr('pages.orders.qtyTimesPrice', '{{qty}} × {{price}}', {\n                                        qty: item.quantity,\n                                        price: formatPrice(item.unitPrice),\n                                      })}\n                                    </span>\n                                  </div>\n\n                                  {/* Install button */}\n                                  <div className=\"flex justify-end md:justify-center\">\n                                    {item.installed ? (\n                                      <span className=\"inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-medium text-status-success-text\">\n                                        <CheckCircle className=\"size-3.5\" />\n                                        {tr('pages.orders.installed', 'Installed')}\n                                      </span>\n                                    ) : isSuccessful && isInstallable ? (\n                                      <button\n                                        type=\"button\"\n                                        onClick={(e) => {\n                                          e.stopPropagation();\n                                          handleOpenInstallModal(order.id, item);\n                                        }}\n                                        className=\"inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text transition-all hover:opacity-90 active:scale-95\"\n                                      >\n                                        <Download className=\"size-3.5\" />\n                                        {tr('pages.orders.installApp', 'Install App')}\n                                      </button>\n                                    ) : null}\n                                  </div>\n                                </div>\n                              );\n                            })}\n\n                            {/* Order summary footer */}\n                            <div className=\"border-t border-border-seam/50 px-4 py-2 md:px-12\">\n                              <div className=\"flex justify-end gap-6 text-xs text-text-muted\">\n                                <span>\n                                  {tr('pages.orders.subtotal', 'Subtotal:')}{' '}\n                                  <span className=\"tabular-nums text-text-primary\">\n                                    {formatPrice(order.subtotal)}\n                                  </span>\n                                </span>\n                                <span>\n                                  {tr('pages.orders.tax', 'Tax:')}{' '}\n                                  <span className=\"tabular-nums text-text-primary\">\n                                    {formatPrice(order.tax)}\n                                  </span>\n                                </span>\n                                <span className=\"font-semibold\">\n                                  {tr('pages.orders.total', 'Total:')}{' '}\n                                  <span className=\"tabular-nums text-text-primary\">\n                                    {formatPrice(order.total)}\n                                  </span>\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        )}\n                      </div>\n                    );\n                  })}\n\n                  {/* Load More */}\n                  {hasMore && (\n                    <div className=\"flex justify-center px-4 py-5\">\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 transition-colors hover:bg-bg-subtle disabled:opacity-50\"\n                        aria-label={t('common.loadMore', { defaultValue: 'Load more' })}\n                      >\n                        {loading ? (\n                          <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n                        ) : null}\n                        {t('common.loadMore', { defaultValue: 'Load more' })}\n                      </button>\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\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":";;;;;;;;;;;;;;AAmEA,IAAM,IAAiD;CAAC;CAAa;CAAa;CAAY,EAKxF,KACJ,GACA,MACG;AACH,SAAQ,GAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK,YACH,QAAO;GACL,MAAM;GACN,SACE;GACF,OAAO,EAAG,gCAAgC,YAAY;GACvD;EACH,KAAK,aACH,QAAO;GACL,MAAM;GACN,SACE;GACF,OAAO,EAAG,iCAAiC,aAAa;GACzD;EACH,KAAK,UACH,QAAO;GACL,MAAM;GACN,SACE;GACF,OAAO,EAAG,8BAA8B,UAAU;GACnD;EACH,KAAK,SACH,QAAO;GACL,MAAM;GACN,SAAS;GACT,OAAO,EAAG,6BAA6B,SAAS;GACjD;EACH,KAAK,WACH,QAAO;GACL,MAAM;GACN,SACE;GACF,OAAO,EAAG,+BAA+B,WAAW;GACrD;EACH,KAAK,YACH,QAAO;GACL,MAAM;GACN,SAAS;GACT,OAAO,EAAG,gCAAgC,YAAY;GACvD;EACH,QACE,QAAO;GACL,MAAM;GACN,SAAS;GACT,OAAO;GACR;;GAOD,KAGA,EAAE,WAAQ,YAAS;CACvB,IAAM,IAAU,EAAiB,GAAQ,EAAG,EACtC,IAAO,EAAQ;AACrB,QACE,kBAAC,QAAD;EACE,WAAW,0FAA0F,EAAQ;YAD/G,CAGE,kBAAC,GAAD,EAAM,WAAU,YAAa,CAAA,EAC5B,EAAQ,MACJ;;GAUE,UAAuB;CAClC,IAAM,IAAW,GAAa,EACxB,EAAE,gBAAa,GAAU,EACzB,EAAE,SAAM,GAAS,EACjB,IAAK,GAAO,EACZ,EAAE,QAAQ,GAAe,YAAS,UAAO,mBAAe,aAAS,iBAAa,IAAW,EACzF,EAAE,kBAAe,SAAS,OAAyB,IAAkB;AAE3E,GAAkC;EAChC,cAAc;AACP,OAAe;;EAEtB,UAAU,MAAQ;AAChB,WAAQ,KAAK,0CAA0C,EAAI,QAAQ;;EAEtE,CAAC;CAGF,IAAM,CAAC,GAAgB,KAAqB,kBAAsB,IAAI,KAAK,CAAC,EACtE,CAAC,GAAW,KAAgB,EAAoB,YAAY,EAG5D,CAAC,GAAa,KAAkB,EAAS,GAAM,EAC/C,CAAC,GAAiB,KAAsB,EAAwB,KAAK,EACrE,CAAC,GAAa,KAAkB,EAAyB,KAAK,EAC9D,CAAC,IAAgB,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;EACrD,IAAM,IAAY,EAAM,aAAa,EAAE,EACjC,IAAW,EAAU,QAAQ,GAAK,MAAS,IAAM,EAAK,UAAU,EAAE,EAClE,IAAM,EAAM,QAAQ,GAEpB,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;GACjB,aAAa,EAAM,eAAe;GACnC;GACD,EAEI,IAAkB,QAChB,EAAO,QAAQ,MAAU,EAA0B,SAAS,EAAM,OAAO,CAAC,EAChF,CAAC,EAAO,CACT,EAEK,IAAgB,QACd,EAAO,QAAQ,MAAU,CAAC,EAA0B,SAAS,EAAM,OAAO,CAAC,EACjF,CAAC,EAAO,CACT,EAEK,IAAgB,MAAc,cAAc,IAAkB,GAE9D,KAAe,GAAa,MAAoB;AACpD,KAAmB,MAAS;GAC1B,IAAM,IAAO,IAAI,IAAI,EAAK;AAM1B,UALI,EAAK,IAAI,EAAQ,GACnB,EAAK,OAAO,EAAQ,GAEpB,EAAK,IAAI,EAAQ,EAEZ;IACP;IACD,EAAE,CAAC,EAEA,MAA0B,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,MAAwB,GAAsB,MAA2B;AAExE,EADL,GAAkB,EACb,IAAsB;IAGvB,KAAsB,MAAkB,IAIxC,UAAgC;AACpC,IAAS,GAAG,EAAS,cAAc;IAI/B,IAAU,qBACV,IACJ;AAEF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,UAAD;IAAQ,WAAU;cAChB,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAS,GAAG;QAC3B,cAAW;QACX,WAAU;kBAEV,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA;QACzB,CAAA,EACT,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,GAAD,EAAS,WAAU,4BAA6B,CAAA;SAChD,kBAAC,MAAD;UAAI,WAAU;oBACX,EAAE,sBAAsB,EAAE,cAAc,aAAa,CAAC;UACpD,CAAA;SACJ,EAAO,SAAS,KACf,kBAAC,QAAD;UAAM,WAAU;oBACb,EAAO;UACH,CAAA;SAEL;UACF;;MACF,CAAA;KACF,CAAA;IACC,CAAA;GAGT,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAa,WAAU;gBACpB,EACC,wBACA,qRACD;MACW,CAAA,EAEb,KAAW,EAAO,WAAW,IAE5B,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OAAS,WAAU;OAA4C,eAAY;OAAS,CAAA,EACpF,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,wBAAwB,uBAAuB;OACjD,CAAA,CACA;UACJ,IAEF,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAS,WAAU,kCAAmC,CAAA;QAClD,CAAA;OACN,kBAAC,MAAD;QAAI,WAAU;kBACX,EAAE,6BAA6B,EAAE,cAAc,yBAAyB,CAAC;QACvE,CAAA;OACL,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAM,WACL,EACE,iCACA,iEACD;QACD,CAAA;OACJ,kBAAC,UAAD;QACE,MAAK;QACL,SAAS;QACT,WAAU;kBAHZ,CAKE,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA,EACjC,EAAG,kCAAkC,qBAAqB,CACpD;;OACL;UACJ,EAAO,WAAW,IAEpB,kBAAC,GAAD;MACE,cAAa;MACb,OAAO,EAAE,2BAA2B,EAAE,cAAc,iBAAiB,CAAC;MACtE,aAAa,EACX,iCACA,4FACD;MACD,QACE,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;iBAHZ,CAKE,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA,EACjC,EAAG,kCAAkC,qBAAqB,CACpD;;MAEX,CAAA,GAGF,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAa,YAAY;QACxC,WAAW,8DACT,MAAc,cACV,kDACA;kBANR,CASG,EAAG,6BAA6B,YAAY,EAC7C,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAgB;SACZ,CAAA,CACA;WACT,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAa,UAAU;QACtC,WAAW,8DACT,MAAc,YACV,kDACA;kBANR,CASG,EAAG,2BAA2B,UAAU,EACzC,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAc;SACV,CAAA,CACA;UACL;UAEL,EAAc,WAAW,IACxB,kBAAC,GAAD;OAAW,WAAU;iBAArB;QACE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA;SAC1B,CAAA;QACN,kBAAC,MAAD;SAAI,WAAU;mBACX,MAAc,cACX,EAAG,iCAAiC,0BAA0B,GAC9D,EAAG,+BAA+B,oBAAoB;SACvD,CAAA;QACL,kBAAC,KAAD;SAAG,WAAU;mBACV,MAAc,cACX,EACE,uCACA,mEACD,GACD,EACE,qCACA,wFACD;SACH,CAAA;QACM;WAEZ,kBAAC,OAAD;OAAK,WAAU;iBAAf;QAEE,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAK,WAAW,GAAa,CAAA;UAC7B,kBAAC,OAAD;WAAK,WAAW;qBAAY,EAAG,yBAAyB,QAAQ;WAAO,CAAA;UACvE,kBAAC,OAAD;WAAK,WAAW;qBAAY,EAAG,wBAAwB,OAAO;WAAO,CAAA;UACrE,kBAAC,OAAD;WAAK,WAAW;qBAAY,EAAG,yBAAyB,QAAQ;WAAO,CAAA;UACvE,kBAAC,OAAD;WAAK,WAAW,GAAG,EAAU;qBAC1B,EAAG,yBAAyB,QAAQ;WACjC,CAAA;UACN,kBAAC,OAAD;WAAK,WAAW,GAAG,EAAU;qBAC1B,EAAG,0BAA0B,SAAS;WACnC,CAAA;UACF;;QAGL,EAAc,KAAK,MAAU;SAC5B,IAAM,IAAa,EAAe,IAAI,EAAM,GAAG,EACzC,IACJ,EAAM,WAAW,eACjB,EAAM,WAAW,eACjB,EAAM,WAAW;AAEnB,gBACE,kBAAC,OAAD;UAAoB,WAAU;oBAA9B,CAEE,kBAAC,UAAD;WACE,MAAK;WACL,eAAe,GAAa,EAAM,GAAG;WACrC,WAAU;qBAHZ;YAME,kBAAC,OAAD;aAAK,WAAW,GAAG,EAAQ;uBACzB,kBAAC,GAAD,EACE,WAAW,4DACT,IAAa,cAAc,MAE7B,CAAA;aACE,CAAA;YAGN,kBAAC,OAAD;aAAK,WAAW,GAAG,EAAQ;uBACxB,EAAM;aACH,CAAA;YAGN,kBAAC,OAAD;aAAK,WAAW,GAAG,EAAQ;uBACxB,IAAI,KAAK,EAAM,UAAU,CAAC,mBAAmB,SAAS;cACrD,MAAM;cACN,OAAO;cACP,KAAK;cACN,CAAC;aACE,CAAA;YAGN,kBAAC,OAAD;aAAK,WAAW,GAAG,EAAQ;uBAA3B;cACG,EAAM,MAAM;cAAQ;cACpB,EAAM,MAAM,WAAW,IACpB,EAAG,qBAAqB,OAAO,GAC/B,EAAG,sBAAsB,QAAQ;cACrC,kBAAC,QAAD;eAAM,WAAU;yBACb,EAAM,MAAM,KAAK,MAAM,EAAE,YAAY,CAAC,KAAK,KAAK;eAC5C,CAAA;cACH;;YAGN,kBAAC,OAAD;aACE,WAAW,GAAG,EAAQ;uBAErB,EAAY,EAAM,MAAM;aACrB,CAAA;YAGN,kBAAC,OAAD;aAAK,WAAW,GAAG,EAAQ;uBACzB,kBAAC,GAAD;cAAa,QAAQ,EAAM;cAAY;cAAM,CAAA;aACzC,CAAA;YACC;cAGR,KACC,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACG,EAAM,eACL,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,OAAD;cAAK,WAAU;wBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;eAAK,WAAU;yBACZ,EAAG,8BAA8B,iBAAiB;eAC/C,CAAA,EACN,kBAAC,OAAD;eAAK,WAAU;yBAAf;gBACG,EAAM,YAAY,UACjB,EAAG,8BAA8B,UAAU;gBAC5C,EAAM,YAAY,UACf,MAAM,EAAM,YAAY,YACxB;gBACH,EAAM,YAAY,wBACf,MAAM,EAAG,kCAAkC,0BAA0B,EAAE,MAAM,IAAI,KAAK,EAAM,YAAY,sBAAsB,CAAC,oBAAoB,EAAE,CAAC,KACtJ;gBACA;iBACF,EAAA,CAAA,EAEN,kBAAC,OAAD;eAAK,WAAU;yBAAf,CACG,EAAM,YAAY,kBACjB,kBAAC,OAAD;gBAAK,WAAU;0BACZ,EACC,+BACA,0BACA,EAAE,QAAQ,EAAM,YAAY,gBAAgB,CAC7C;gBACG,CAAA,EAEP,EAAM,YAAY,eACjB,kBAAC,KAAD;gBACE,MAAM,EAAM,YAAY;gBACxB,QAAO;gBACP,KAAI;gBACJ,WAAU;0BAJZ,CAMG,EAAG,6BAA6B,gBAAgB,EACjD,kBAAC,GAAD,EAAc,WAAU,YAAa,CAAA,CACnC;kBAEF;iBACF;iBAEN,kBAAC,OAAD;cAAK,WAAU;wBACZ;eACC;gBACE,KAAK;gBACL,OAAO,EAAG,+BAA+B,aAAa;gBACvD;eACD;gBACE,KAAK;gBACL,OAAO,EAAG,4BAA4B,UAAU;gBACjD;eACD;gBACE,KAAK;gBACL,OAAO,EACL,mCACA,mBACD;gBACF;eACD;gBACE,KAAK;gBACL,OAAO,EAAG,8BAA8B,YAAY;gBACrD;eACF,CAAC,KAAK,MAAS;eACd,IAAM,IAAU,EAAM,aAAa,UAAU;AAgB7C,sBACE,kBAAC,OAAD;gBAEE,WAAW,mDAjBb;iBACE;iBACA;iBACA;iBACA;iBACA;iBACA;iBACD,CAAC,QAAQ,EAAQ,IAClB;iBACE;iBACA;iBACA;iBACA;iBACD,CAAC,QAAQ,EAAK,IAAI,GAMX,sFACA;0BAGL,EAAK;gBACF,EARC,EAAK,IAQN;gBAER;cACE,CAAA,CACF;;YAIR,kBAAC,OAAD;aAAK,WAAU;uBAAf;cACE,kBAAC,QAAD;eAAM,WAAU;yBACb,EAAG,2BAA2B,UAAU;eACpC,CAAA;cACP,kBAAC,QAAD;eAAM,WAAU;yBACb,EAAG,uBAAuB,MAAM;eAC5B,CAAA;cACP,kBAAC,QAAD;eAAM,WAAU;yBACb,EAAG,yBAAyB,QAAQ;eAChC,CAAA;cACP,kBAAC,QAAD;eAAM,WAAU;yBACb,EAAG,0BAA0B,SAAS;eAClC,CAAA;cACH;;YAEL,EAAM,MAAM,KAAK,MAAS;aACzB,IAAM,IACJ,EAAK,gBAAgB,cACrB,EAAK,gBAAgB;AAEvB,oBACE,kBAAC,OAAD;cAEE,WAAU;wBAFZ;eAKE,kBAAC,OAAD;gBAAK,WAAU;0BAAf,CACE,kBAAC,OAAD;iBAAK,WAAU;2BACZ,EAAK,cACJ,kBAAC,OAAD;kBACE,KAAK,EAAK;kBACV,KAAK,EAAK;kBACV,WAAU;kBACV,CAAA,GAEF,kBAAC,OAAD;kBAAK,WAAU;4BACZ,EAAK,YAAY,OAAO,EAAE;kBACvB,CAAA;iBAEJ,CAAA,EACN,kBAAC,OAAD;iBAAK,WAAU;2BAAf,CACE,kBAAC,KAAD;kBAAG,WAAU;4BACV,EAAK;kBACJ,CAAA,EACJ,kBAAC,QAAD;kBAAM,WAAU;4BACb,EAAK;kBACD,CAAA,CACH;mBACF;;eAGN,kBAAC,OAAD;gBAAK,WAAU;0BACZ,EAAK;gBACF,CAAA;eAGN,kBAAC,OAAD;gBAAK,WAAU;0BACZ,EAAY,EAAK,WAAW;gBACzB,CAAA;eAGN,kBAAC,OAAD;gBAAK,WAAU;0BACb,kBAAC,QAAD;iBAAM,WAAU;2BACb,EAAG,8BAA8B,uBAAuB;kBACvD,KAAK,EAAK;kBACV,OAAO,EAAY,EAAK,UAAU;kBACnC,CAAC;iBACG,CAAA;gBACH,CAAA;eAGN,kBAAC,OAAD;gBAAK,WAAU;0BACZ,EAAK,YACJ,kBAAC,QAAD;iBAAM,WAAU;2BAAhB,CACE,kBAAC,GAAD,EAAa,WAAU,YAAa,CAAA,EACnC,EAAG,0BAA0B,YAAY,CACrC;qBACL,KAAgB,IAClB,kBAAC,UAAD;iBACE,MAAK;iBACL,UAAU,MAAM;AAEd,kBADA,EAAE,iBAAiB,EACnB,GAAuB,EAAM,IAAI,EAAK;;iBAExC,WAAU;2BANZ,CAQE,kBAAC,GAAD,EAAU,WAAU,YAAa,CAAA,EAChC,EAAG,2BAA2B,cAAc,CACtC;qBACP;gBACA,CAAA;eACF;gBArEC,EAAK,GAqEN;cAER;YAGF,kBAAC,OAAD;aAAK,WAAU;uBACb,kBAAC,OAAD;cAAK,WAAU;wBAAf;eACE,kBAAC,QAAD,EAAA,UAAA;gBACG,EAAG,yBAAyB,YAAY;gBAAE;gBAC3C,kBAAC,QAAD;iBAAM,WAAU;2BACb,EAAY,EAAM,SAAS;iBACvB,CAAA;gBACF,EAAA,CAAA;eACP,kBAAC,QAAD,EAAA,UAAA;gBACG,EAAG,oBAAoB,OAAO;gBAAE;gBACjC,kBAAC,QAAD;iBAAM,WAAU;2BACb,EAAY,EAAM,IAAI;iBAClB,CAAA;gBACF,EAAA,CAAA;eACP,kBAAC,QAAD;gBAAM,WAAU;0BAAhB;iBACG,EAAG,sBAAsB,SAAS;iBAAE;iBACrC,kBAAC,QAAD;kBAAM,WAAU;4BACb,EAAY,EAAM,MAAM;kBACpB,CAAA;iBACF;;eACH;;aACF,CAAA;YACF;aAEJ;YApRI,EAAM,GAoRV;UAER;QAGD,MACC,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,UAAD;UACE,MAAK;UACL,SAAS;UACT,UAAU;UACV,WAAU;UACV,cAAY,EAAE,mBAAmB,EAAE,cAAc,aAAa,CAAC;oBALjE,CAOG,IACC,kBAAC,GAAD;WAAS,WAAU;WAAsB,eAAY;WAAS,CAAA,GAC5D,MACH,EAAE,mBAAmB,EAAE,cAAc,aAAa,CAAC,CAC7C;;SACL,CAAA;QAEJ;SAEJ;QAEJ;;IACF,CAAA;GAGL,KACC,kBAAC,GAAD;IACE,QAAQ;IACR,SAAS;IACT,KAAK;IACL,SAAS;IACT,kBAAkB;IAClB,gBAAgB;IAChB,CAAA;GAEA"}