@elizaos/plugin-shopify-ui 2.0.3-beta.6 → 2.0.3-beta.7

package/dist/ShopifyAppView.interact.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ShopifyAppView.interact.ts"],"sourcesContent":["// View-bundle `interact` capability handler, split out of ShopifyAppView.tsx\n// so that file exports only React components and stays Fast-Refresh-compatible\n// (Vite would full-reload a component file that also exports a plain function).\n// The view bundle re-exports `interact` via ./shopify-view-bundle.ts.\nimport {\n  fetchShopifyTuiJson,\n  loadShopifyTuiState,\n  postShopifyTuiJson,\n} from \"./ShopifyAppView.helpers\";\nimport type {\n  ShopifyCustomersResponse,\n  ShopifyInventoryResponse,\n  ShopifyOrdersResponse,\n  ShopifyProductsResponse,\n} from \"./useShopifyDashboard.js\";\n\nexport async function interact(\n  capability: string,\n  params?: Record<string, unknown>,\n): Promise<unknown> {\n  if (capability === \"terminal-shopify-state\") {\n    return { viewType: \"tui\", ...(await loadShopifyTuiState()) };\n  }\n\n  if (capability === \"terminal-shopify-products\") {\n    const query = typeof params?.query === \"string\" ? params.query.trim() : \"\";\n    const page = typeof params?.page === \"number\" ? params.page : 1;\n    const limit = typeof params?.limit === \"number\" ? params.limit : 20;\n    return {\n      viewType: \"tui\",\n      products: await fetchShopifyTuiJson<ShopifyProductsResponse>(\n        `/api/shopify/products?${new URLSearchParams({\n          page: String(page),\n          limit: String(limit),\n          q: query,\n        })}`,\n      ),\n    };\n  }\n\n  if (capability === \"terminal-shopify-orders\") {\n    const status =\n      typeof params?.status === \"string\" ? params.status.trim() : \"any\";\n    const limit = typeof params?.limit === \"number\" ? params.limit : 20;\n    return {\n      viewType: \"tui\",\n      orders: await fetchShopifyTuiJson<ShopifyOrdersResponse>(\n        `/api/shopify/orders?${new URLSearchParams({\n          status,\n          limit: String(limit),\n        })}`,\n      ),\n    };\n  }\n\n  if (capability === \"terminal-shopify-inventory\") {\n    return {\n      viewType: \"tui\",\n      inventory: await fetchShopifyTuiJson<ShopifyInventoryResponse>(\n        \"/api/shopify/inventory\",\n      ),\n    };\n  }\n\n  if (capability === \"terminal-shopify-customers\") {\n    const query = typeof params?.query === \"string\" ? params.query.trim() : \"\";\n    const limit = typeof params?.limit === \"number\" ? params.limit : 20;\n    return {\n      viewType: \"tui\",\n      customers: await fetchShopifyTuiJson<ShopifyCustomersResponse>(\n        `/api/shopify/customers?${new URLSearchParams({\n          q: query,\n          limit: String(limit),\n        })}`,\n      ),\n    };\n  }\n\n  if (capability === \"terminal-shopify-create-product\") {\n    const title = typeof params?.title === \"string\" ? params.title.trim() : \"\";\n    if (!title) throw new Error(\"title is required\");\n    return {\n      viewType: \"tui\",\n      product: await postShopifyTuiJson(\"/api/shopify/products\", {\n        title,\n        vendor: typeof params?.vendor === \"string\" ? params.vendor : undefined,\n        productType:\n          typeof params?.productType === \"string\"\n            ? params.productType\n            : undefined,\n        price:\n          typeof params?.price === \"string\" || typeof params?.price === \"number\"\n            ? params.price\n            : undefined,\n      }),\n    };\n  }\n\n  if (capability === \"terminal-shopify-adjust-inventory\") {\n    const itemId =\n      typeof params?.itemId === \"string\" ? params.itemId.trim() : \"\";\n    const delta = typeof params?.delta === \"number\" ? params.delta : null;\n    if (!itemId) throw new Error(\"itemId is required\");\n    if (delta === null) throw new Error(\"delta is required\");\n    return {\n      viewType: \"tui\",\n      inventory: await postShopifyTuiJson(\n        `/api/shopify/inventory/${encodeURIComponent(itemId)}/adjust`,\n        {\n          delta,\n          locationId:\n            typeof params?.locationId === \"string\"\n              ? params.locationId\n              : undefined,\n        },\n      ),\n    };\n  }\n\n  throw new Error(`Unsupported capability \"${capability}\"`);\n}\n"],"mappings":"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","names":[]}

package/dist/ShopifyAppView.js

@@ -0,0 +1,667 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Badge,
+  Button,
+  Skeleton,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@elizaos/ui";
+import { useAgentElement } from "@elizaos/ui/agent-surface";
+import {
+  AlertTriangle,
+  BarChart3,
+  ChevronLeft,
+  Globe2,
+  KeyRound,
+  Package,
+  ShoppingBag,
+  ShoppingCart,
+  Store,
+  Users,
+  Wifi,
+  WifiOff
+} from "lucide-react";
+import { useState } from "react";
+import { CustomersPanel } from "./CustomersPanel.js";
+import { InventoryLevelsPanel } from "./InventoryLevelsPanel.js";
+import { OrdersPanel } from "./OrdersPanel.js";
+import { ProductsPanel } from "./ProductsPanel.js";
+import { StoreOverviewCard } from "./StoreOverviewCard.js";
+import { useShopifyDashboard } from "./useShopifyDashboard.js";
+const SH_ACCENT = "var(--accent, #ff8a24)";
+const SH_TXT = "var(--txt, #111)";
+const SH_MUTED = "var(--muted, rgba(0,0,0,0.58))";
+function SetupField({
+  icon: Icon,
+  label,
+  description,
+  envHint
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 12,
+        padding: "10px 2px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: 34,
+              height: 34,
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: SH_ACCENT
+            },
+            children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              minWidth: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: 2
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 13.5, fontWeight: 600, color: SH_TXT }, children: label }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "sr-only",
+                  style: { fontSize: 12, color: SH_MUTED, lineHeight: 1.4 },
+                  children: description
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "code",
+                {
+                  style: {
+                    marginTop: 3,
+                    fontSize: 10.5,
+                    color: SH_MUTED,
+                    opacity: 0.75,
+                    fontFamily: "ui-monospace, monospace"
+                  },
+                  children: envHint
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ShopifySetupCard() {
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-md", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          gap: 6,
+          marginBottom: 18
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: 84,
+                height: 84,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx(ShoppingBag, { style: { width: 38, height: 38, color: SH_ACCENT } })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              style: {
+                margin: "12px 0 0",
+                fontSize: 20,
+                fontWeight: 700,
+                color: SH_TXT
+              },
+              children: "Connect your store"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "sr-only",
+              style: {
+                margin: 0,
+                maxWidth: 320,
+                fontSize: 13.5,
+                color: SH_MUTED,
+                lineHeight: 1.5
+              },
+              children: "Link a Shopify store to manage products, orders, and inventory right here."
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: 4,
+          display: "flex",
+          flexDirection: "column",
+          gap: 10
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            SetupField,
+            {
+              icon: Globe2,
+              label: "Store domain",
+              description: "Your shop address, e.g. mystore.myshopify.com",
+              envHint: "SHOPIFY_STORE_DOMAIN"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SetupField,
+            {
+              icon: KeyRound,
+              label: "Access token",
+              description: "Admin API token with product, order & inventory scopes",
+              envHint: "SHOPIFY_ACCESS_TOKEN"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 6,
+                padding: "2px 2px 6px"
+              },
+              children: [
+                { label: "Products", icon: Package },
+                { label: "Orders", icon: ShoppingCart },
+                { label: "Stock", icon: BarChart3 }
+              ].map(({ label, icon: Icon }) => /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                    padding: "3px 0",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    color: SH_TXT
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { style: { width: 13, height: 13, color: SH_MUTED } }),
+                    label
+                  ]
+                },
+                label
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: "/settings",
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 8,
+                height: 42,
+                background: SH_ACCENT,
+                color: "var(--accent-foreground, #fff)",
+                fontSize: 14,
+                fontWeight: 600,
+                textDecoration: "none"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Store, { className: "h-4 w-4" }),
+                "Settings"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function ConnectionStatus({
+  connected,
+  loading,
+  domain
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-24" });
+  }
+  if (connected && domain) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-1 py-1", children: [
+      /* @__PURE__ */ jsx(Wifi, { className: "h-3.5 w-3.5 text-ok" }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-[10rem] truncate text-xs font-medium text-ok", children: domain })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-1 py-1", children: [
+    /* @__PURE__ */ jsx(WifiOff, { className: "h-3.5 w-3.5 text-danger" }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-danger", children: "Offline" })
+  ] });
+}
+const DASHBOARD_TABS = [
+  { value: "overview", label: "Overview", icon: BarChart3 },
+  { value: "products", label: "Products", icon: Package },
+  { value: "orders", label: "Orders", icon: ShoppingCart },
+  { value: "inventory", label: "Inventory", icon: BarChart3 },
+  { value: "customers", label: "Customers", icon: Users }
+];
+function ShopifyDashboardTabTrigger({
+  value,
+  label,
+  icon: Icon,
+  active
+}) {
+  const { ref, agentProps } = useAgentElement({
+    id: `tab-${value}`,
+    role: "tab",
+    label,
+    group: "dashboard-tabs",
+    status: active ? "active" : "inactive",
+    description: `Show the ${label} tab`
+  });
+  return /* @__PURE__ */ jsxs(
+    TabsTrigger,
+    {
+      ref,
+      value,
+      className: "h-9 w-9 gap-0 px-0 sm:w-auto sm:gap-1.5 sm:px-3",
+      "aria-current": active ? "true" : void 0,
+      title: label,
+      ...agentProps,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: label })
+      ]
+    }
+  );
+}
+function OverviewTile({
+  icon: Icon,
+  label,
+  value,
+  accent,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "group flex min-h-20 items-start gap-3 px-2 py-2 text-left transition-colors hover:bg-bg-muted/20",
+      title: label,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `flex h-9 w-9 shrink-0 items-center justify-center ${accent}`,
+            children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-2xl font-semibold leading-none text-txt", children: value }),
+          /* @__PURE__ */ jsx("span", { className: "mt-2 block truncate text-xs font-medium text-muted", children: label })
+        ] })
+      ]
+    }
+  );
+}
+function ShopifyAppView({ exitToApps }) {
+  const [activeTab, setActiveTab] = useState("overview");
+  const {
+    status,
+    statusLoading,
+    statusError,
+    products,
+    productsTotal,
+    productsPage,
+    productsLoading,
+    productsError,
+    productSearch,
+    setProductsPage,
+    orders,
+    ordersTotal,
+    ordersLoading,
+    ordersError,
+    orderStatusFilter,
+    setOrderStatusFilter,
+    inventoryItems,
+    inventoryLocations,
+    inventoryLoading,
+    inventoryError,
+    customers,
+    customersTotal,
+    customersLoading,
+    customersError,
+    customerSearch,
+    counts
+  } = useShopifyDashboard();
+  const connected = status?.connected ?? false;
+  const shop = status?.shop ?? null;
+  const lowInventoryItems = inventoryItems.filter(
+    (item) => item.available <= 5
+  );
+  const urgentInventoryCount = lowInventoryItems.filter(
+    (item) => item.available === 0
+  ).length;
+  const backButton = useAgentElement({
+    id: "action-back",
+    role: "button",
+    label: "Back to apps",
+    group: "header",
+    description: "Exit the Shopify dashboard and return to the apps grid"
+  });
+  const viewAllOrdersButton = useAgentElement({
+    id: "overview-view-all-orders",
+    role: "button",
+    label: "View all orders",
+    group: "overview",
+    description: "Jump to the orders tab from the overview summary",
+    onActivate: () => setActiveTab("orders")
+  });
+  const viewAllInventoryButton = useAgentElement({
+    id: "overview-view-inventory",
+    role: "button",
+    label: "View inventory",
+    group: "overview",
+    description: "Jump to the inventory tab from the overview summary",
+    onActivate: () => setActiveTab("inventory")
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "shopify-shell",
+      className: "fixed inset-0 z-50 flex flex-col overflow-hidden bg-bg pb-[var(--safe-area-bottom,0px)] pl-[var(--safe-area-left,0px)] pr-[var(--safe-area-right,0px)] pt-[var(--safe-area-top,0px)] supports-[height:100dvh]:h-[100dvh]",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3 px-3 py-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: backButton.ref,
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              onClick: exitToApps,
+              className: "h-8 w-8 shrink-0",
+              "aria-label": "Back to apps",
+              ...backButton.agentProps,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex h-8 w-8 shrink-0 items-center justify-center",
+                style: {
+                  color: SH_ACCENT
+                },
+                children: /* @__PURE__ */ jsx(Store, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-txt", children: shop?.name ?? "Shopify" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsx(
+            ConnectionStatus,
+            {
+              connected,
+              loading: statusLoading,
+              domain: shop?.domain
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto pb-[calc(7rem+var(--safe-area-bottom,0px))]", children: [
+          statusError ? /* @__PURE__ */ jsx("div", { className: "m-3 px-1 py-2 text-sm text-danger", children: statusError }) : null,
+          !statusLoading && !connected ? /* @__PURE__ */ jsx("div", { className: "flex min-h-full items-center justify-center px-4 py-10", children: /* @__PURE__ */ jsx(ShopifySetupCard, {}) }) : statusLoading && !connected ? /* @__PURE__ */ jsx("div", { className: "flex min-h-full items-center justify-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "mx-4 h-80 w-full max-w-lg" }) }) : /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-3xl px-4 py-4", children: /* @__PURE__ */ jsxs(
+            Tabs,
+            {
+              value: activeTab,
+              onValueChange: (v) => setActiveTab(v),
+              children: [
+                /* @__PURE__ */ jsx(TabsList, { className: "sticky top-3 z-10 mb-3 h-auto w-full justify-between gap-1 bg-transparent p-0 sm:w-auto sm:justify-start", children: DASHBOARD_TABS.map((tab) => /* @__PURE__ */ jsx(
+                  ShopifyDashboardTabTrigger,
+                  {
+                    value: tab.value,
+                    label: tab.label,
+                    icon: tab.icon,
+                    active: activeTab === tab.value
+                  },
+                  tab.value
+                )) }),
+                /* @__PURE__ */ jsx(TabsContent, { value: "overview", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                  shop ? /* @__PURE__ */ jsx(StoreOverviewCard, { shop }) : null,
+                  /* @__PURE__ */ jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [
+                    /* @__PURE__ */ jsx(
+                      OverviewTile,
+                      {
+                        icon: Package,
+                        label: "Products",
+                        value: counts.productCount.toLocaleString(),
+                        accent: "text-muted-strong",
+                        onClick: () => setActiveTab("products")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverviewTile,
+                      {
+                        icon: ShoppingCart,
+                        label: "Orders",
+                        value: counts.orderCount.toLocaleString(),
+                        accent: "text-muted-strong",
+                        onClick: () => setActiveTab("orders")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverviewTile,
+                      {
+                        icon: AlertTriangle,
+                        label: "Low stock",
+                        value: lowInventoryItems.length.toLocaleString(),
+                        accent: urgentInventoryCount > 0 ? "text-danger" : "text-warn",
+                        onClick: () => setActiveTab("inventory")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverviewTile,
+                      {
+                        icon: Users,
+                        label: "Customers",
+                        value: counts.customerCount.toLocaleString(),
+                        accent: "text-muted-strong",
+                        onClick: () => setActiveTab("customers")
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "px-2 py-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "inline-flex h-8 w-8 items-center justify-center text-muted-strong",
+                            title: "Recent orders",
+                            children: /* @__PURE__ */ jsx(ShoppingCart, { className: "h-4 w-4", "aria-hidden": true })
+                          }
+                        ),
+                        ordersTotal > 3 ? /* @__PURE__ */ jsxs(
+                          Button,
+                          {
+                            ref: viewAllOrdersButton.ref,
+                            type: "button",
+                            variant: "ghost",
+                            size: "sm",
+                            className: "h-7 px-2 text-xs-tight",
+                            onClick: () => setActiveTab("orders"),
+                            title: `View all ${ordersTotal.toLocaleString()} orders`,
+                            ...viewAllOrdersButton.agentProps,
+                            children: [
+                              "+",
+                              (ordersTotal - 3).toLocaleString()
+                            ]
+                          }
+                        ) : null
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-1.5", children: [
+                        ordersLoading && orders.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }),
+                          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }),
+                          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" })
+                        ] }) : orders.slice(0, 3).map((order) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: "grid grid-cols-[5rem_minmax(0,1fr)_auto] items-center gap-2 px-2 py-1.5",
+                            children: [
+                              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-txt", children: order.name }),
+                              /* @__PURE__ */ jsx("span", { className: "truncate text-xs-tight text-muted", children: order.email }),
+                              /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs font-semibold text-txt", children: [
+                                order.totalPrice,
+                                " ",
+                                order.currencyCode
+                              ] })
+                            ]
+                          },
+                          order.id
+                        )),
+                        orders.length === 0 && !ordersLoading ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: "None" }) : null
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "px-2 py-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "inline-flex h-8 w-8 items-center justify-center text-muted-strong",
+                            title: "Low inventory",
+                            children: /* @__PURE__ */ jsx(Package, { className: "h-4 w-4", "aria-hidden": true })
+                          }
+                        ),
+                        lowInventoryItems.length > 3 ? /* @__PURE__ */ jsxs(
+                          Button,
+                          {
+                            ref: viewAllInventoryButton.ref,
+                            type: "button",
+                            variant: "ghost",
+                            size: "sm",
+                            className: "h-7 px-2 text-xs-tight",
+                            onClick: () => setActiveTab("inventory"),
+                            title: "View inventory",
+                            ...viewAllInventoryButton.agentProps,
+                            children: [
+                              "+",
+                              (lowInventoryItems.length - 3).toLocaleString()
+                            ]
+                          }
+                        ) : null
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-1.5", children: [
+                        inventoryLoading && inventoryItems.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }),
+                          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" })
+                        ] }) : lowInventoryItems.slice(0, 3).map((item) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: "flex items-center justify-between gap-2 px-2 py-1.5",
+                            children: [
+                              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate text-xs font-semibold text-txt", children: [
+                                item.productTitle,
+                                item.variantTitle ? ` \u2014 ${item.variantTitle}` : ""
+                              ] }),
+                              /* @__PURE__ */ jsx(
+                                Badge,
+                                {
+                                  variant: item.available === 0 ? "destructive" : "secondary",
+                                  className: "shrink-0 text-2xs",
+                                  children: item.available
+                                }
+                              )
+                            ]
+                          },
+                          `${item.id}:${item.locationName}`
+                        )),
+                        lowInventoryItems.length === 0 && !inventoryLoading ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: "Stock levels look good." }) : null
+                      ] })
+                    ] })
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(TabsContent, { value: "products", children: /* @__PURE__ */ jsx(
+                  ProductsPanel,
+                  {
+                    products,
+                    total: productsTotal,
+                    page: productsPage,
+                    loading: productsLoading,
+                    error: productsError,
+                    search: productSearch,
+                    onPageChange: setProductsPage
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TabsContent, { value: "orders", children: /* @__PURE__ */ jsx(
+                  OrdersPanel,
+                  {
+                    orders,
+                    total: ordersTotal,
+                    loading: ordersLoading,
+                    error: ordersError,
+                    statusFilter: orderStatusFilter,
+                    onStatusFilterChange: setOrderStatusFilter
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TabsContent, { value: "inventory", children: /* @__PURE__ */ jsx(
+                  InventoryLevelsPanel,
+                  {
+                    items: inventoryItems,
+                    locations: inventoryLocations,
+                    loading: inventoryLoading,
+                    error: inventoryError
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TabsContent, { value: "customers", children: /* @__PURE__ */ jsx(
+                  CustomersPanel,
+                  {
+                    customers,
+                    total: customersTotal,
+                    loading: customersLoading,
+                    error: customersError,
+                    search: customerSearch
+                  }
+                ) })
+              ]
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ShopifyAppView
+};
+//# sourceMappingURL=ShopifyAppView.js.map