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

package/dist/CustomersPanel.d.ts

@@ -0,0 +1,11 @@
+import type { ShopifyCustomer } from "./useShopifyDashboard";
+interface CustomersPanelProps {
+    customers: ShopifyCustomer[];
+    total: number;
+    loading: boolean;
+    error: string | null;
+    search: string;
+}
+export declare function CustomersPanel({ customers, total, loading, error, }: CustomersPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CustomersPanel.d.ts.map

package/dist/CustomersPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomersPanel.d.ts","sourceRoot":"","sources":["../src/CustomersPanel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAgD7D,UAAU,mBAAmB;IAC3B,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,GACN,EAAE,mBAAmB,2CAyCrB"}

package/dist/CustomersPanel.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatShortDate, Skeleton } from "@elizaos/ui";
+import {
+  CalendarDays,
+  CircleDollarSign,
+  ShoppingCart,
+  Users
+} from "lucide-react";
+function CustomerRow({ customer }) {
+  const fullName = [customer.firstName, customer.lastName].filter(Boolean).join(" ") || "\u2014";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 px-2 py-2 transition-colors hover:bg-bg-muted/20", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center text-xs-tight font-semibold uppercase text-muted-strong", children: (customer.firstName?.[0] ?? customer.email[0] ?? "?").toUpperCase() }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold text-txt", children: fullName }),
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-xs-tight text-muted", children: customer.email })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex shrink-0 items-center gap-1.5 text-sm font-semibold text-txt",
+        title: "Orders",
+        children: [
+          /* @__PURE__ */ jsx(ShoppingCart, { className: "h-3.5 w-3.5 text-muted", "aria-hidden": true }),
+          customer.ordersCount.toLocaleString()
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex shrink-0 items-center gap-1.5 text-sm font-semibold text-txt",
+        title: "Total spent",
+        children: [
+          /* @__PURE__ */ jsx(CircleDollarSign, { className: "h-3.5 w-3.5 text-muted", "aria-hidden": true }),
+          customer.totalSpent,
+          " ",
+          customer.currencyCode
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "hidden shrink-0 items-center gap-1.5 text-xs-tight text-muted sm:flex",
+        title: "Joined",
+        children: [
+          /* @__PURE__ */ jsx(CalendarDays, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+          formatShortDate(customer.createdAt)
+        ]
+      }
+    )
+  ] });
+}
+function CustomersPanel({
+  customers,
+  total,
+  loading,
+  error
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          "data-testid": "chat-search-hint",
+          className: "sr-only text-[13px] leading-relaxed text-txt/60",
+          children: "Search customers by typing in the chat."
+        }
+      ),
+      !loading ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs text-muted", children: [
+        total.toLocaleString(),
+        " customer",
+        total !== 1 ? "s" : ""
+      ] }) : null
+    ] }),
+    error ? /* @__PURE__ */ jsx("div", { className: "px-1 py-2 text-sm text-danger", children: error }) : null,
+    loading && customers.length === 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: 8 }, (_, i) => i).map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-14 w-full" }, i)) }) : customers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 py-10 text-center", children: [
+      /* @__PURE__ */ jsx(Users, { className: "h-8 w-8 text-muted/40" }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: "None" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: customers.map((customer) => /* @__PURE__ */ jsx(CustomerRow, { customer }, customer.id)) })
+  ] });
+}
+export {
+  CustomersPanel
+};
+//# sourceMappingURL=CustomersPanel.js.map

package/dist/CustomersPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CustomersPanel.tsx"],"sourcesContent":["import { formatShortDate, Skeleton } from \"@elizaos/ui\";\nimport {\n  CalendarDays,\n  CircleDollarSign,\n  ShoppingCart,\n  Users,\n} from \"lucide-react\";\nimport type { ShopifyCustomer } from \"./useShopifyDashboard.js\";\n\nfunction CustomerRow({ customer }: { customer: ShopifyCustomer }) {\n  const fullName =\n    [customer.firstName, customer.lastName].filter(Boolean).join(\" \") || \"—\";\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 px-2 py-2 transition-colors hover:bg-bg-muted/20\">\n      <div className=\"flex h-8 w-8 shrink-0 items-center justify-center text-xs-tight font-semibold uppercase text-muted-strong\">\n        {(customer.firstName?.[0] ?? customer.email[0] ?? \"?\").toUpperCase()}\n      </div>\n\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-sm font-semibold text-txt\">\n          {fullName}\n        </div>\n        <div className=\"mt-0.5 truncate text-xs-tight text-muted\">\n          {customer.email}\n        </div>\n      </div>\n\n      <div\n        className=\"flex shrink-0 items-center gap-1.5 text-sm font-semibold text-txt\"\n        title=\"Orders\"\n      >\n        <ShoppingCart className=\"h-3.5 w-3.5 text-muted\" aria-hidden />\n        {customer.ordersCount.toLocaleString()}\n      </div>\n\n      <div\n        className=\"flex shrink-0 items-center gap-1.5 text-sm font-semibold text-txt\"\n        title=\"Total spent\"\n      >\n        <CircleDollarSign className=\"h-3.5 w-3.5 text-muted\" aria-hidden />\n        {customer.totalSpent} {customer.currencyCode}\n      </div>\n\n      <div\n        className=\"hidden shrink-0 items-center gap-1.5 text-xs-tight text-muted sm:flex\"\n        title=\"Joined\"\n      >\n        <CalendarDays className=\"h-3.5 w-3.5\" aria-hidden />\n        {formatShortDate(customer.createdAt)}\n      </div>\n    </div>\n  );\n}\n\ninterface CustomersPanelProps {\n  customers: ShopifyCustomer[];\n  total: number;\n  loading: boolean;\n  error: string | null;\n  search: string;\n}\n\nexport function CustomersPanel({\n  customers,\n  total,\n  loading,\n  error,\n}: CustomersPanelProps) {\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <p\n          data-testid=\"chat-search-hint\"\n          className=\"sr-only text-[13px] leading-relaxed text-txt/60\"\n        >\n          Search customers by typing in the chat.\n        </p>\n        {!loading ? (\n          <span className=\"shrink-0 text-xs text-muted\">\n            {total.toLocaleString()} customer{total !== 1 ? \"s\" : \"\"}\n          </span>\n        ) : null}\n      </div>\n\n      {error ? (\n        <div className=\"px-1 py-2 text-sm text-danger\">{error}</div>\n      ) : null}\n\n      {loading && customers.length === 0 ? (\n        <div className=\"space-y-2\">\n          {Array.from({ length: 8 }, (_, i) => i).map((i) => (\n            <Skeleton key={i} className=\"h-14 w-full\" />\n          ))}\n        </div>\n      ) : customers.length === 0 ? (\n        <div className=\"flex flex-col items-center gap-3 py-10 text-center\">\n          <Users className=\"h-8 w-8 text-muted/40\" />\n          <div className=\"text-sm text-muted\">None</div>\n        </div>\n      ) : (\n        <div className=\"space-y-1.5\">\n          {customers.map((customer) => (\n            <CustomerRow key={customer.id} customer={customer} />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAeM,cAIA,YAJA;AAfN,SAAS,iBAAiB,gBAAgB;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY,EAAE,SAAS,GAAkC;AAChE,QAAM,WACJ,CAAC,SAAS,WAAW,SAAS,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEvE,SACE,qBAAC,SAAI,WAAU,sFACb;AAAA,wBAAC,SAAI,WAAU,6GACX,oBAAS,YAAY,CAAC,KAAK,SAAS,MAAM,CAAC,KAAK,KAAK,YAAY,GACrE;AAAA,IAEA,qBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,SAAI,WAAU,2CACZ,oBACH;AAAA,MACA,oBAAC,SAAI,WAAU,4CACZ,mBAAS,OACZ;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAM;AAAA,QAEN;AAAA,8BAAC,gBAAa,WAAU,0BAAyB,eAAW,MAAC;AAAA,UAC5D,SAAS,YAAY,eAAe;AAAA;AAAA;AAAA,IACvC;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAM;AAAA,QAEN;AAAA,8BAAC,oBAAiB,WAAU,0BAAyB,eAAW,MAAC;AAAA,UAChE,SAAS;AAAA,UAAW;AAAA,UAAE,SAAS;AAAA;AAAA;AAAA,IAClC;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAM;AAAA,QAEN;AAAA,8BAAC,gBAAa,WAAU,eAAc,eAAW,MAAC;AAAA,UACjD,gBAAgB,SAAS,SAAS;AAAA;AAAA;AAAA,IACrC;AAAA,KACF;AAEJ;AAUO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,2CACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,UACX;AAAA;AAAA,MAED;AAAA,MACC,CAAC,UACA,qBAAC,UAAK,WAAU,+BACb;AAAA,cAAM,eAAe;AAAA,QAAE;AAAA,QAAU,UAAU,IAAI,MAAM;AAAA,SACxD,IACE;AAAA,OACN;AAAA,IAEC,QACC,oBAAC,SAAI,WAAU,iCAAiC,iBAAM,IACpD;AAAA,IAEH,WAAW,UAAU,WAAW,IAC/B,oBAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,MAC3C,oBAAC,YAAiB,WAAU,iBAAb,CAA2B,CAC3C,GACH,IACE,UAAU,WAAW,IACvB,qBAAC,SAAI,WAAU,sDACb;AAAA,0BAAC,SAAM,WAAU,yBAAwB;AAAA,MACzC,oBAAC,SAAI,WAAU,sBAAqB,kBAAI;AAAA,OAC1C,IAEA,oBAAC,SAAI,WAAU,eACZ,oBAAU,IAAI,CAAC,aACd,oBAAC,eAA8B,YAAb,SAAS,EAAwB,CACpD,GACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/InventoryLevelsPanel.d.ts

@@ -0,0 +1,10 @@
+import type { ShopifyInventoryItem } from "./useShopifyDashboard";
+interface InventoryLevelsPanelProps {
+    items: ShopifyInventoryItem[];
+    locations: string[];
+    loading: boolean;
+    error: string | null;
+}
+export declare function InventoryLevelsPanel({ items, locations, loading, error, }: InventoryLevelsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InventoryLevelsPanel.d.ts.map

package/dist/InventoryLevelsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventoryLevelsPanel.d.ts","sourceRoot":"","sources":["../src/InventoryLevelsPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAgIlE,UAAU,yBAAyB;IACjC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,SAAS,EACT,OAAO,EACP,KAAK,GACN,EAAE,yBAAyB,2CA8F3B"}

package/dist/InventoryLevelsPanel.js

@@ -0,0 +1,190 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Skeleton } from "@elizaos/ui";
+import { useAgentElement } from "@elizaos/ui/agent-surface";
+import { Minus, Package, Plus } from "lucide-react";
+import { useState } from "react";
+function InventoryAdjustButton({
+  itemKey,
+  itemLabel,
+  delta,
+  disabled,
+  onActivate
+}) {
+  const { ref, agentProps } = useAgentElement({
+    id: `inventory-adjust-${delta > 0 ? "increase" : "decrease"}-${itemKey}`,
+    role: "button",
+    label: `${delta > 0 ? "Increase" : "Decrease"} inventory for ${itemLabel}`,
+    group: "inventory",
+    description: `Adjust available quantity by ${delta} for ${itemLabel}`,
+    onActivate
+  });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      type: "button",
+      variant: "outline",
+      size: "icon",
+      className: "h-7 w-7",
+      disabled,
+      onClick: onActivate,
+      "aria-label": `${delta > 0 ? "Increase" : "Decrease"} inventory by 1`,
+      ...agentProps,
+      children: delta > 0 ? /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" })
+    }
+  );
+}
+function InventoryRow({ item, onAdjust }) {
+  const [adjusting, setAdjusting] = useState(false);
+  const [adjustError, setAdjustError] = useState(null);
+  const [localAvailable, setLocalAvailable] = useState(item.available);
+  const itemKey = `${item.id}:${item.locationName}`;
+  const itemLabel = item.variantTitle ? `${item.productTitle} \u2014 ${item.variantTitle}` : item.productTitle;
+  async function handleAdjust(delta) {
+    setAdjusting(true);
+    setAdjustError(null);
+    try {
+      await onAdjust(item.id, item.locationId, delta);
+      setLocalAvailable((prev) => prev + delta);
+    } catch (err) {
+      setAdjustError(err instanceof Error ? err.message : "Adjustment failed.");
+    } finally {
+      setAdjusting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 px-2 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold text-txt", children: item.productTitle }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-1.5 text-xs-tight text-muted", children: [
+        item.variantTitle ? /* @__PURE__ */ jsx("span", { children: item.variantTitle }) : null,
+        item.sku ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          item.variantTitle ? /* @__PURE__ */ jsx("span", { children: "\xB7" }) : null,
+          /* @__PURE__ */ jsx("span", { className: "font-mono", children: item.sku })
+        ] }) : null
+      ] }),
+      adjustError ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs-tight text-danger", children: adjustError }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex shrink-0 items-center gap-1.5 text-sm font-semibold text-txt",
+        title: "Available",
+        children: [
+          /* @__PURE__ */ jsx(Package, { className: "h-3.5 w-3.5 text-muted", "aria-hidden": true }),
+          localAvailable.toLocaleString()
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex shrink-0 items-center gap-1.5 text-sm font-semibold text-txt",
+        title: "Incoming",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5 text-muted", "aria-hidden": true }),
+          item.incoming.toLocaleString()
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        InventoryAdjustButton,
+        {
+          itemKey,
+          itemLabel,
+          delta: -1,
+          disabled: adjusting,
+          onActivate: () => void handleAdjust(-1)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InventoryAdjustButton,
+        {
+          itemKey,
+          itemLabel,
+          delta: 1,
+          disabled: adjusting,
+          onActivate: () => void handleAdjust(1)
+        }
+      )
+    ] })
+  ] });
+}
+function InventoryLevelsPanel({
+  items,
+  locations,
+  loading,
+  error
+}) {
+  const [selectedLocation, setSelectedLocation] = useState("all");
+  const locationSelect = useAgentElement({
+    id: "inventory-location-filter",
+    role: "select",
+    label: "Inventory location filter",
+    group: "inventory",
+    description: "Filter inventory levels by store location",
+    options: ["all", ...locations],
+    getValue: () => selectedLocation,
+    onFill: (value) => setSelectedLocation(value)
+  });
+  const displayedItems = selectedLocation === "all" ? items : items.filter((item) => item.locationName === selectedLocation);
+  async function handleAdjust(itemId, locationId, delta) {
+    const res = await fetch(`/api/shopify/inventory/${itemId}/adjust`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ delta, locationId })
+    });
+    if (!res.ok) {
+      const text = await res.text().catch(() => "Unknown error");
+      throw new Error(text);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    locations.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "shrink-0 text-xs font-semibold text-muted-strong",
+          htmlFor: "inventory-location",
+          children: "Location"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          ref: locationSelect.ref,
+          id: "inventory-location",
+          value: selectedLocation,
+          onChange: (e) => setSelectedLocation(e.target.value),
+          className: "flex h-10 w-full max-w-xs rounded-md border border-input bg-bg px-3 py-2 text-sm ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          ...locationSelect.agentProps,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "all", children: "All locations" }),
+            locations.map((loc) => /* @__PURE__ */ jsx("option", { value: loc, children: loc }, loc))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted", children: [
+        displayedItems.length,
+        " item",
+        displayedItems.length !== 1 ? "s" : ""
+      ] })
+    ] }) : null,
+    error ? /* @__PURE__ */ jsx("div", { className: "px-1 py-2 text-sm text-danger", children: error }) : null,
+    loading && items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: 6 }, (_, i) => i).map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-full" }, i)) }) : displayedItems.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 py-10 text-center", children: [
+      /* @__PURE__ */ jsx(Package, { className: "h-8 w-8 text-muted/40" }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: "None" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: displayedItems.map((item) => /* @__PURE__ */ jsx(
+      InventoryRow,
+      {
+        item,
+        onAdjust: handleAdjust
+      },
+      `${item.id}:${item.locationName}`
+    )) })
+  ] });
+}
+export {
+  InventoryLevelsPanel
+};
+//# sourceMappingURL=InventoryLevelsPanel.js.map

package/dist/InventoryLevelsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/InventoryLevelsPanel.tsx"],"sourcesContent":["import { Button, Skeleton } from \"@elizaos/ui\";\nimport { useAgentElement } from \"@elizaos/ui/agent-surface\";\nimport { Minus, Package, Plus } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { ShopifyInventoryItem } from \"./useShopifyDashboard.js\";\n\nfunction InventoryAdjustButton({\n  itemKey,\n  itemLabel,\n  delta,\n  disabled,\n  onActivate,\n}: {\n  itemKey: string;\n  itemLabel: string;\n  delta: 1 | -1;\n  disabled: boolean;\n  onActivate: () => void;\n}) {\n  const { ref, agentProps } = useAgentElement<HTMLButtonElement>({\n    id: `inventory-adjust-${delta > 0 ? \"increase\" : \"decrease\"}-${itemKey}`,\n    role: \"button\",\n    label: `${delta > 0 ? \"Increase\" : \"Decrease\"} inventory for ${itemLabel}`,\n    group: \"inventory\",\n    description: `Adjust available quantity by ${delta} for ${itemLabel}`,\n    onActivate,\n  });\n  return (\n    <Button\n      ref={ref}\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon\"\n      className=\"h-7 w-7\"\n      disabled={disabled}\n      onClick={onActivate}\n      aria-label={`${delta > 0 ? \"Increase\" : \"Decrease\"} inventory by 1`}\n      {...agentProps}\n    >\n      {delta > 0 ? <Plus className=\"h-3 w-3\" /> : <Minus className=\"h-3 w-3\" />}\n    </Button>\n  );\n}\n\ninterface InventoryRowProps {\n  item: ShopifyInventoryItem;\n  onAdjust: (\n    itemId: string,\n    locationId: string | null,\n    delta: number,\n  ) => Promise<void>;\n}\n\nfunction InventoryRow({ item, onAdjust }: InventoryRowProps) {\n  const [adjusting, setAdjusting] = useState(false);\n  const [adjustError, setAdjustError] = useState<string | null>(null);\n  const [localAvailable, setLocalAvailable] = useState(item.available);\n\n  const itemKey = `${item.id}:${item.locationName}`;\n  const itemLabel = item.variantTitle\n    ? `${item.productTitle} — ${item.variantTitle}`\n    : item.productTitle;\n\n  async function handleAdjust(delta: number) {\n    setAdjusting(true);\n    setAdjustError(null);\n    try {\n      await onAdjust(item.id, item.locationId, delta);\n      setLocalAvailable((prev) => prev + delta);\n    } catch (err) {\n      setAdjustError(err instanceof Error ? err.message : \"Adjustment failed.\");\n    } finally {\n      setAdjusting(false);\n    }\n  }\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 px-2 py-2\">\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-sm font-semibold text-txt\">\n          {item.productTitle}\n        </div>\n        <div className=\"mt-0.5 flex flex-wrap items-center gap-1.5 text-xs-tight text-muted\">\n          {item.variantTitle ? <span>{item.variantTitle}</span> : null}\n          {item.sku ? (\n            <>\n              {item.variantTitle ? <span>·</span> : null}\n              <span className=\"font-mono\">{item.sku}</span>\n            </>\n          ) : null}\n        </div>\n        {adjustError ? (\n          <div className=\"mt-1 text-xs-tight text-danger\">{adjustError}</div>\n        ) : null}\n      </div>\n\n      <div\n        className=\"flex shrink-0 items-center gap-1.5 text-sm font-semibold text-txt\"\n        title=\"Available\"\n      >\n        <Package className=\"h-3.5 w-3.5 text-muted\" aria-hidden />\n        {localAvailable.toLocaleString()}\n      </div>\n\n      <div\n        className=\"flex shrink-0 items-center gap-1.5 text-sm font-semibold text-txt\"\n        title=\"Incoming\"\n      >\n        <Plus className=\"h-3.5 w-3.5 text-muted\" aria-hidden />\n        {item.incoming.toLocaleString()}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-1\">\n        <InventoryAdjustButton\n          itemKey={itemKey}\n          itemLabel={itemLabel}\n          delta={-1}\n          disabled={adjusting}\n          onActivate={() => void handleAdjust(-1)}\n        />\n        <InventoryAdjustButton\n          itemKey={itemKey}\n          itemLabel={itemLabel}\n          delta={1}\n          disabled={adjusting}\n          onActivate={() => void handleAdjust(1)}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface InventoryLevelsPanelProps {\n  items: ShopifyInventoryItem[];\n  locations: string[];\n  loading: boolean;\n  error: string | null;\n}\n\nexport function InventoryLevelsPanel({\n  items,\n  locations,\n  loading,\n  error,\n}: InventoryLevelsPanelProps) {\n  const [selectedLocation, setSelectedLocation] = useState<string>(\"all\");\n\n  const locationSelect = useAgentElement<HTMLSelectElement>({\n    id: \"inventory-location-filter\",\n    role: \"select\",\n    label: \"Inventory location filter\",\n    group: \"inventory\",\n    description: \"Filter inventory levels by store location\",\n    options: [\"all\", ...locations],\n    getValue: () => selectedLocation,\n    onFill: (value) => setSelectedLocation(value),\n  });\n\n  const displayedItems =\n    selectedLocation === \"all\"\n      ? items\n      : items.filter((item) => item.locationName === selectedLocation);\n\n  async function handleAdjust(\n    itemId: string,\n    locationId: string | null,\n    delta: number,\n  ): Promise<void> {\n    const res = await fetch(`/api/shopify/inventory/${itemId}/adjust`, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ delta, locationId }),\n    });\n    if (!res.ok) {\n      const text = await res.text().catch(() => \"Unknown error\");\n      throw new Error(text);\n    }\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      {locations.length > 0 ? (\n        <div className=\"flex items-center gap-2\">\n          <label\n            className=\"shrink-0 text-xs font-semibold text-muted-strong\"\n            htmlFor=\"inventory-location\"\n          >\n            Location\n          </label>\n          <select\n            ref={locationSelect.ref}\n            id=\"inventory-location\"\n            value={selectedLocation}\n            onChange={(e) => setSelectedLocation(e.target.value)}\n            className=\"flex h-10 w-full max-w-xs rounded-md border border-input bg-bg px-3 py-2 text-sm ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n            {...locationSelect.agentProps}\n          >\n            <option value=\"all\">All locations</option>\n            {locations.map((loc) => (\n              <option key={loc} value={loc}>\n                {loc}\n              </option>\n            ))}\n          </select>\n          <span className=\"text-xs text-muted\">\n            {displayedItems.length} item{displayedItems.length !== 1 ? \"s\" : \"\"}\n          </span>\n        </div>\n      ) : null}\n\n      {error ? (\n        <div className=\"px-1 py-2 text-sm text-danger\">{error}</div>\n      ) : null}\n\n      {loading && items.length === 0 ? (\n        <div className=\"space-y-2\">\n          {Array.from({ length: 6 }, (_, i) => i).map((i) => (\n            <Skeleton key={i} className=\"h-16 w-full\" />\n          ))}\n        </div>\n      ) : displayedItems.length === 0 ? (\n        <div className=\"flex flex-col items-center gap-3 py-10 text-center\">\n          <Package className=\"h-8 w-8 text-muted/40\" />\n          <div className=\"text-sm text-muted\">None</div>\n        </div>\n      ) : (\n        <div className=\"space-y-1.5\">\n          {displayedItems.map((item) => (\n            <InventoryRow\n              key={`${item.id}:${item.locationName}`}\n              item={item}\n              onAdjust={handleAdjust}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAuCmB,SA8CP,UA9CO,KA8CP,YA9CO;AAvCnB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,uBAAuB;AAChC,SAAS,OAAO,SAAS,YAAY;AACrC,SAAS,gBAAgB;AAGzB,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,EAAE,KAAK,WAAW,IAAI,gBAAmC;AAAA,IAC7D,IAAI,oBAAoB,QAAQ,IAAI,aAAa,UAAU,IAAI,OAAO;AAAA,IACtE,MAAM;AAAA,IACN,OAAO,GAAG,QAAQ,IAAI,aAAa,UAAU,kBAAkB,SAAS;AAAA,IACxE,OAAO;AAAA,IACP,aAAa,gCAAgC,KAAK,QAAQ,SAAS;AAAA,IACnE;AAAA,EACF,CAAC;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAU;AAAA,MACV;AAAA,MACA,SAAS;AAAA,MACT,cAAY,GAAG,QAAQ,IAAI,aAAa,UAAU;AAAA,MACjD,GAAG;AAAA,MAEH,kBAAQ,IAAI,oBAAC,QAAK,WAAU,WAAU,IAAK,oBAAC,SAAM,WAAU,WAAU;AAAA;AAAA,EACzE;AAEJ;AAWA,SAAS,aAAa,EAAE,MAAM,SAAS,GAAsB;AAC3D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK,SAAS;AAEnE,QAAM,UAAU,GAAG,KAAK,EAAE,IAAI,KAAK,YAAY;AAC/C,QAAM,YAAY,KAAK,eACnB,GAAG,KAAK,YAAY,WAAM,KAAK,YAAY,KAC3C,KAAK;AAET,iBAAe,aAAa,OAAe;AACzC,iBAAa,IAAI;AACjB,mBAAe,IAAI;AACnB,QAAI;AACF,YAAM,SAAS,KAAK,IAAI,KAAK,YAAY,KAAK;AAC9C,wBAAkB,CAAC,SAAS,OAAO,KAAK;AAAA,IAC1C,SAAS,KAAK;AACZ,qBAAe,eAAe,QAAQ,IAAI,UAAU,oBAAoB;AAAA,IAC1E,UAAE;AACA,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,+CACb;AAAA,yBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,SAAI,WAAU,2CACZ,eAAK,cACR;AAAA,MACA,qBAAC,SAAI,WAAU,uEACZ;AAAA,aAAK,eAAe,oBAAC,UAAM,eAAK,cAAa,IAAU;AAAA,QACvD,KAAK,MACJ,iCACG;AAAA,eAAK,eAAe,oBAAC,UAAK,kBAAC,IAAU;AAAA,UACtC,oBAAC,UAAK,WAAU,aAAa,eAAK,KAAI;AAAA,WACxC,IACE;AAAA,SACN;AAAA,MACC,cACC,oBAAC,SAAI,WAAU,kCAAkC,uBAAY,IAC3D;AAAA,OACN;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAM;AAAA,QAEN;AAAA,8BAAC,WAAQ,WAAU,0BAAyB,eAAW,MAAC;AAAA,UACvD,eAAe,eAAe;AAAA;AAAA;AAAA,IACjC;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAM;AAAA,QAEN;AAAA,8BAAC,QAAK,WAAU,0BAAyB,eAAW,MAAC;AAAA,UACpD,KAAK,SAAS,eAAe;AAAA;AAAA;AAAA,IAChC;AAAA,IAEA,qBAAC,SAAI,WAAU,oCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV,YAAY,MAAM,KAAK,aAAa,EAAE;AAAA;AAAA,MACxC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV,YAAY,MAAM,KAAK,aAAa,CAAC;AAAA;AAAA,MACvC;AAAA,OACF;AAAA,KACF;AAEJ;AASO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,KAAK;AAEtE,QAAM,iBAAiB,gBAAmC;AAAA,IACxD,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS,CAAC,OAAO,GAAG,SAAS;AAAA,IAC7B,UAAU,MAAM;AAAA,IAChB,QAAQ,CAAC,UAAU,oBAAoB,KAAK;AAAA,EAC9C,CAAC;AAED,QAAM,iBACJ,qBAAqB,QACjB,QACA,MAAM,OAAO,CAAC,SAAS,KAAK,iBAAiB,gBAAgB;AAEnE,iBAAe,aACb,QACA,YACA,OACe;AACf,UAAM,MAAM,MAAM,MAAM,0BAA0B,MAAM,WAAW;AAAA,MACjE,QAAQ;AAAA,MACR,SAAS,EAAE,gBAAgB,mBAAmB;AAAA,MAC9C,MAAM,KAAK,UAAU,EAAE,OAAO,WAAW,CAAC;AAAA,IAC5C,CAAC;AACD,QAAI,CAAC,IAAI,IAAI;AACX,YAAM,OAAO,MAAM,IAAI,KAAK,EAAE,MAAM,MAAM,eAAe;AACzD,YAAM,IAAI,MAAM,IAAI;AAAA,IACtB;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,aACZ;AAAA,cAAU,SAAS,IAClB,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAQ;AAAA,UACT;AAAA;AAAA,MAED;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,eAAe;AAAA,UACpB,IAAG;AAAA,UACH,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,oBAAoB,EAAE,OAAO,KAAK;AAAA,UACnD,WAAU;AAAA,UACT,GAAG,eAAe;AAAA,UAEnB;AAAA,gCAAC,YAAO,OAAM,OAAM,2BAAa;AAAA,YAChC,UAAU,IAAI,CAAC,QACd,oBAAC,YAAiB,OAAO,KACtB,iBADU,GAEb,CACD;AAAA;AAAA;AAAA,MACH;AAAA,MACA,qBAAC,UAAK,WAAU,sBACb;AAAA,uBAAe;AAAA,QAAO;AAAA,QAAM,eAAe,WAAW,IAAI,MAAM;AAAA,SACnE;AAAA,OACF,IACE;AAAA,IAEH,QACC,oBAAC,SAAI,WAAU,iCAAiC,iBAAM,IACpD;AAAA,IAEH,WAAW,MAAM,WAAW,IAC3B,oBAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,MAC3C,oBAAC,YAAiB,WAAU,iBAAb,CAA2B,CAC3C,GACH,IACE,eAAe,WAAW,IAC5B,qBAAC,SAAI,WAAU,sDACb;AAAA,0BAAC,WAAQ,WAAU,yBAAwB;AAAA,MAC3C,oBAAC,SAAI,WAAU,sBAAqB,kBAAI;AAAA,OAC1C,IAEA,oBAAC,SAAI,WAAU,eACZ,yBAAe,IAAI,CAAC,SACnB;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,UAAU;AAAA;AAAA,MAFL,GAAG,KAAK,EAAE,IAAI,KAAK,YAAY;AAAA,IAGtC,CACD,GACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/OrdersPanel.d.ts

@@ -0,0 +1,12 @@
+import type { ShopifyOrder } from "./useShopifyDashboard";
+interface OrdersPanelProps {
+    orders: ShopifyOrder[];
+    total: number;
+    loading: boolean;
+    error: string | null;
+    statusFilter: string;
+    onStatusFilterChange: (status: string) => void;
+}
+export declare function OrdersPanel({ orders, total, loading, error, statusFilter, onStatusFilterChange, }: OrdersPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OrdersPanel.d.ts.map

package/dist/OrdersPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrdersPanel.d.ts","sourceRoot":"","sources":["../src/OrdersPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AA8J1D,UAAU,gBAAgB;IACxB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,EACL,YAAY,EACZ,oBAAoB,GACrB,EAAE,gBAAgB,2CAuDlB"}

package/dist/OrdersPanel.js

@@ -0,0 +1,170 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatShortDate, SegmentedControl, Skeleton } from "@elizaos/ui";
+import { useAgentElement } from "@elizaos/ui/agent-surface";
+import { ChevronDown, ChevronUp, ShoppingCart } from "lucide-react";
+import { useState } from "react";
+function FulfillmentBadge({
+  status
+}) {
+  if (!status) return null;
+  const styles = {
+    FULFILLED: "bg-ok",
+    UNFULFILLED: "bg-warn",
+    PARTIALLY_FULFILLED: "bg-warn"
+  };
+  const labels = {
+    FULFILLED: "Fulfilled",
+    UNFULFILLED: "Unfulfilled",
+    PARTIALLY_FULFILLED: "Partial"
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "img",
+      "aria-label": labels[status],
+      title: labels[status],
+      className: `inline-flex h-2.5 w-2.5 rounded-full ${styles[status]}`
+    }
+  );
+}
+function FinancialBadge({
+  status
+}) {
+  const styles = {
+    PAID: "bg-ok",
+    PENDING: "bg-warn",
+    REFUNDED: "bg-danger",
+    PARTIALLY_REFUNDED: "bg-danger"
+  };
+  const labels = {
+    PAID: "Paid",
+    PENDING: "Pending",
+    REFUNDED: "Refunded",
+    PARTIALLY_REFUNDED: "Partial refund"
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "img",
+      "aria-label": labels[status],
+      title: labels[status],
+      className: `inline-flex h-2.5 w-2.5 rounded-full ${styles[status]}`
+    }
+  );
+}
+function OrderRow({ order }) {
+  const [expanded, setExpanded] = useState(false);
+  const toggle = useAgentElement({
+    id: `order-toggle-${order.id}`,
+    role: "button",
+    label: `Order ${order.name} details`,
+    group: "orders",
+    status: expanded ? "active" : "inactive",
+    description: `Expand or collapse details for order ${order.name}`,
+    onActivate: () => setExpanded((prev) => !prev)
+  });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: toggle.ref,
+        type: "button",
+        onClick: () => setExpanded((prev) => !prev),
+        "aria-expanded": expanded,
+        className: "flex w-full items-center gap-3 px-2 py-2 text-left transition-colors hover:bg-bg-muted/20",
+        ...toggle.agentProps,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-[4rem] shrink-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-txt", children: order.name }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-0.5 text-xs-tight text-muted", children: [
+              order.lineItemCount,
+              " item",
+              order.lineItemCount !== 1 ? "s" : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate text-xs text-muted", children: order.email || "\u2014" }),
+          /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-txt", children: [
+              order.totalPrice,
+              " ",
+              order.currencyCode
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs-tight text-muted", children: formatShortDate(order.createdAt) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap gap-1.5", children: [
+            /* @__PURE__ */ jsx(FulfillmentBadge, { status: order.fulfillmentStatus }),
+            /* @__PURE__ */ jsx(FinancialBadge, { status: order.financialStatus })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "shrink-0 text-muted", children: expanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) })
+        ]
+      }
+    ),
+    expanded ? /* @__PURE__ */ jsx("div", { className: "px-3 pb-3", children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-[6rem_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-muted", children: "Order ID" }),
+      /* @__PURE__ */ jsx("dd", { className: "font-semibold text-txt break-all", children: order.id }),
+      /* @__PURE__ */ jsx("dt", { className: "text-muted", children: "Customer" }),
+      /* @__PURE__ */ jsx("dd", { className: "font-semibold text-txt", children: order.email || "\u2014" }),
+      /* @__PURE__ */ jsx("dt", { className: "text-muted", children: "Total" }),
+      /* @__PURE__ */ jsxs("dd", { className: "font-semibold text-txt", children: [
+        order.totalPrice,
+        " ",
+        order.currencyCode
+      ] }),
+      /* @__PURE__ */ jsx("dt", { className: "text-muted", children: "Fulfillment" }),
+      /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(FulfillmentBadge, { status: order.fulfillmentStatus }) }),
+      /* @__PURE__ */ jsx("dt", { className: "text-muted", children: "Payment" }),
+      /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(FinancialBadge, { status: order.financialStatus }) }),
+      /* @__PURE__ */ jsx("dt", { className: "text-muted", children: "Created" }),
+      /* @__PURE__ */ jsx("dd", { className: "font-semibold text-txt", children: formatShortDate(order.createdAt) })
+    ] }) }) : null
+  ] });
+}
+const ORDER_TABS = [
+  { value: "any", label: "All" },
+  { value: "unfulfilled", label: "Unfulfilled" },
+  { value: "fulfilled", label: "Fulfilled" }
+];
+function OrdersPanel({
+  orders,
+  total,
+  loading,
+  error,
+  statusFilter,
+  onStatusFilterChange
+}) {
+  const activeTab = ORDER_TABS.some((t) => t.value === statusFilter) ? statusFilter : "any";
+  const statusFilterControl = useAgentElement({
+    id: "select-order-status",
+    role: "select",
+    label: "Order status filter",
+    group: "orders",
+    description: "Filter orders by fulfillment status",
+    options: ORDER_TABS.map((t) => t.value)
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("div", { ref: statusFilterControl.ref, ...statusFilterControl.agentProps, children: /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          value: activeTab,
+          onValueChange: (v) => onStatusFilterChange(v),
+          items: ORDER_TABS
+        }
+      ) }),
+      !loading ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted", children: [
+        total.toLocaleString(),
+        " order",
+        total !== 1 ? "s" : ""
+      ] }) : null
+    ] }),
+    error ? /* @__PURE__ */ jsx("div", { className: "px-1 py-2 text-sm text-danger", children: error }) : null,
+    loading && orders.length === 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: 6 }, (_, i) => i).map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-full" }, i)) }) : orders.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 py-10 text-center", children: [
+      /* @__PURE__ */ jsx(ShoppingCart, { className: "h-8 w-8 text-muted/40" }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: "None" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: orders.map((order) => /* @__PURE__ */ jsx(OrderRow, { order }, order.id)) })
+  ] });
+}
+export {
+  OrdersPanel
+};
+//# sourceMappingURL=OrdersPanel.js.map

package/dist/OrdersPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/OrdersPanel.tsx"],"sourcesContent":["import { formatShortDate, SegmentedControl, Skeleton } from \"@elizaos/ui\";\nimport { useAgentElement } from \"@elizaos/ui/agent-surface\";\nimport { ChevronDown, ChevronUp, ShoppingCart } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { ShopifyOrder } from \"./useShopifyDashboard.js\";\n\nfunction FulfillmentBadge({\n  status,\n}: {\n  status: ShopifyOrder[\"fulfillmentStatus\"];\n}) {\n  if (!status) return null;\n\n  const styles = {\n    FULFILLED: \"bg-ok\",\n    UNFULFILLED: \"bg-warn\",\n    PARTIALLY_FULFILLED: \"bg-warn\",\n  } satisfies Record<NonNullable<ShopifyOrder[\"fulfillmentStatus\"]>, string>;\n\n  const labels: Record<\n    NonNullable<ShopifyOrder[\"fulfillmentStatus\"]>,\n    string\n  > = {\n    FULFILLED: \"Fulfilled\",\n    UNFULFILLED: \"Unfulfilled\",\n    PARTIALLY_FULFILLED: \"Partial\",\n  };\n\n  return (\n    <span\n      role=\"img\"\n      aria-label={labels[status]}\n      title={labels[status]}\n      className={`inline-flex h-2.5 w-2.5 rounded-full ${styles[status]}`}\n    />\n  );\n}\n\nfunction FinancialBadge({\n  status,\n}: {\n  status: ShopifyOrder[\"financialStatus\"];\n}) {\n  const styles = {\n    PAID: \"bg-ok\",\n    PENDING: \"bg-warn\",\n    REFUNDED: \"bg-danger\",\n    PARTIALLY_REFUNDED: \"bg-danger\",\n  } satisfies Record<ShopifyOrder[\"financialStatus\"], string>;\n\n  const labels: Record<ShopifyOrder[\"financialStatus\"], string> = {\n    PAID: \"Paid\",\n    PENDING: \"Pending\",\n    REFUNDED: \"Refunded\",\n    PARTIALLY_REFUNDED: \"Partial refund\",\n  };\n\n  return (\n    <span\n      role=\"img\"\n      aria-label={labels[status]}\n      title={labels[status]}\n      className={`inline-flex h-2.5 w-2.5 rounded-full ${styles[status]}`}\n    />\n  );\n}\n\nfunction OrderRow({ order }: { order: ShopifyOrder }) {\n  const [expanded, setExpanded] = useState(false);\n\n  const toggle = useAgentElement<HTMLButtonElement>({\n    id: `order-toggle-${order.id}`,\n    role: \"button\",\n    label: `Order ${order.name} details`,\n    group: \"orders\",\n    status: expanded ? \"active\" : \"inactive\",\n    description: `Expand or collapse details for order ${order.name}`,\n    onActivate: () => setExpanded((prev) => !prev),\n  });\n\n  return (\n    <div>\n      <button\n        ref={toggle.ref}\n        type=\"button\"\n        onClick={() => setExpanded((prev) => !prev)}\n        aria-expanded={expanded}\n        className=\"flex w-full items-center gap-3 px-2 py-2 text-left transition-colors hover:bg-bg-muted/20\"\n        {...toggle.agentProps}\n      >\n        <div className=\"min-w-[4rem] shrink-0\">\n          <div className=\"text-sm font-semibold text-txt\">{order.name}</div>\n          <div className=\"mt-0.5 text-xs-tight text-muted\">\n            {order.lineItemCount} item{order.lineItemCount !== 1 ? \"s\" : \"\"}\n          </div>\n        </div>\n\n        <div className=\"min-w-0 flex-1 truncate text-xs text-muted\">\n          {order.email || \"—\"}\n        </div>\n\n        <div className=\"shrink-0 text-right\">\n          <div className=\"text-sm font-semibold text-txt\">\n            {order.totalPrice} {order.currencyCode}\n          </div>\n          <div className=\"mt-0.5 text-xs-tight text-muted\">\n            {formatShortDate(order.createdAt)}\n          </div>\n        </div>\n\n        <div className=\"flex shrink-0 flex-wrap gap-1.5\">\n          <FulfillmentBadge status={order.fulfillmentStatus} />\n          <FinancialBadge status={order.financialStatus} />\n        </div>\n\n        <div className=\"shrink-0 text-muted\">\n          {expanded ? (\n            <ChevronUp className=\"h-4 w-4\" />\n          ) : (\n            <ChevronDown className=\"h-4 w-4\" />\n          )}\n        </div>\n      </button>\n\n      {expanded ? (\n        <div className=\"px-3 pb-3\">\n          <dl className=\"grid grid-cols-[6rem_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-xs\">\n            <dt className=\"text-muted\">Order ID</dt>\n            <dd className=\"font-semibold text-txt break-all\">{order.id}</dd>\n            <dt className=\"text-muted\">Customer</dt>\n            <dd className=\"font-semibold text-txt\">{order.email || \"—\"}</dd>\n            <dt className=\"text-muted\">Total</dt>\n            <dd className=\"font-semibold text-txt\">\n              {order.totalPrice} {order.currencyCode}\n            </dd>\n            <dt className=\"text-muted\">Fulfillment</dt>\n            <dd>\n              <FulfillmentBadge status={order.fulfillmentStatus} />\n            </dd>\n            <dt className=\"text-muted\">Payment</dt>\n            <dd>\n              <FinancialBadge status={order.financialStatus} />\n            </dd>\n            <dt className=\"text-muted\">Created</dt>\n            <dd className=\"font-semibold text-txt\">\n              {formatShortDate(order.createdAt)}\n            </dd>\n          </dl>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\ntype OrderTab = \"any\" | \"unfulfilled\" | \"fulfilled\";\n\nconst ORDER_TABS = [\n  { value: \"any\" as const, label: \"All\" },\n  { value: \"unfulfilled\" as const, label: \"Unfulfilled\" },\n  { value: \"fulfilled\" as const, label: \"Fulfilled\" },\n];\n\ninterface OrdersPanelProps {\n  orders: ShopifyOrder[];\n  total: number;\n  loading: boolean;\n  error: string | null;\n  statusFilter: string;\n  onStatusFilterChange: (status: string) => void;\n}\n\nexport function OrdersPanel({\n  orders,\n  total,\n  loading,\n  error,\n  statusFilter,\n  onStatusFilterChange,\n}: OrdersPanelProps) {\n  const activeTab = (\n    ORDER_TABS.some((t) => t.value === statusFilter) ? statusFilter : \"any\"\n  ) as OrderTab;\n\n  const statusFilterControl = useAgentElement<HTMLDivElement>({\n    id: \"select-order-status\",\n    role: \"select\",\n    label: \"Order status filter\",\n    group: \"orders\",\n    description: \"Filter orders by fulfillment status\",\n    options: ORDER_TABS.map((t) => t.value),\n  });\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between gap-3\">\n        <div ref={statusFilterControl.ref} {...statusFilterControl.agentProps}>\n          <SegmentedControl\n            value={activeTab}\n            onValueChange={(v) => onStatusFilterChange(v)}\n            items={ORDER_TABS}\n          />\n        </div>\n        {!loading ? (\n          <span className=\"text-xs text-muted\">\n            {total.toLocaleString()} order{total !== 1 ? \"s\" : \"\"}\n          </span>\n        ) : null}\n      </div>\n\n      {error ? (\n        <div className=\"px-1 py-2 text-sm text-danger\">{error}</div>\n      ) : null}\n\n      {loading && orders.length === 0 ? (\n        <div className=\"space-y-2\">\n          {Array.from({ length: 6 }, (_, i) => i).map((i) => (\n            <Skeleton key={i} className=\"h-16 w-full\" />\n          ))}\n        </div>\n      ) : orders.length === 0 ? (\n        <div className=\"flex flex-col items-center gap-3 py-10 text-center\">\n          <ShoppingCart className=\"h-8 w-8 text-muted/40\" />\n          <div className=\"text-sm text-muted\">None</div>\n        </div>\n      ) : (\n        <div className=\"space-y-1.5\">\n          {orders.map((order) => (\n            <OrderRow key={order.id} order={order} />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA6BI,cA+DM,YA/DN;AA7BJ,SAAS,iBAAiB,kBAAkB,gBAAgB;AAC5D,SAAS,uBAAuB;AAChC,SAAS,aAAa,WAAW,oBAAoB;AACrD,SAAS,gBAAgB;AAGzB,SAAS,iBAAiB;AAAA,EACxB;AACF,GAEG;AACD,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,SAAS;AAAA,IACb,WAAW;AAAA,IACX,aAAa;AAAA,IACb,qBAAqB;AAAA,EACvB;AAEA,QAAM,SAGF;AAAA,IACF,WAAW;AAAA,IACX,aAAa;AAAA,IACb,qBAAqB;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,OAAO,MAAM;AAAA,MACzB,OAAO,OAAO,MAAM;AAAA,MACpB,WAAW,wCAAwC,OAAO,MAAM,CAAC;AAAA;AAAA,EACnE;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AACF,GAEG;AACD,QAAM,SAAS;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,EACtB;AAEA,QAAM,SAA0D;AAAA,IAC9D,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,OAAO,MAAM;AAAA,MACzB,OAAO,OAAO,MAAM;AAAA,MACpB,WAAW,wCAAwC,OAAO,MAAM,CAAC;AAAA;AAAA,EACnE;AAEJ;AAEA,SAAS,SAAS,EAAE,MAAM,GAA4B;AACpD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,SAAS,gBAAmC;AAAA,IAChD,IAAI,gBAAgB,MAAM,EAAE;AAAA,IAC5B,MAAM;AAAA,IACN,OAAO,SAAS,MAAM,IAAI;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ,WAAW,WAAW;AAAA,IAC9B,aAAa,wCAAwC,MAAM,IAAI;AAAA,IAC/D,YAAY,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC/C,CAAC;AAED,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,OAAO;AAAA,QACZ,MAAK;AAAA,QACL,SAAS,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,QAC1C,iBAAe;AAAA,QACf,WAAU;AAAA,QACT,GAAG,OAAO;AAAA,QAEX;AAAA,+BAAC,SAAI,WAAU,yBACb;AAAA,gCAAC,SAAI,WAAU,kCAAkC,gBAAM,MAAK;AAAA,YAC5D,qBAAC,SAAI,WAAU,mCACZ;AAAA,oBAAM;AAAA,cAAc;AAAA,cAAM,MAAM,kBAAkB,IAAI,MAAM;AAAA,eAC/D;AAAA,aACF;AAAA,UAEA,oBAAC,SAAI,WAAU,8CACZ,gBAAM,SAAS,UAClB;AAAA,UAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,iCAAC,SAAI,WAAU,kCACZ;AAAA,oBAAM;AAAA,cAAW;AAAA,cAAE,MAAM;AAAA,eAC5B;AAAA,YACA,oBAAC,SAAI,WAAU,mCACZ,0BAAgB,MAAM,SAAS,GAClC;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,mCACb;AAAA,gCAAC,oBAAiB,QAAQ,MAAM,mBAAmB;AAAA,YACnD,oBAAC,kBAAe,QAAQ,MAAM,iBAAiB;AAAA,aACjD;AAAA,UAEA,oBAAC,SAAI,WAAU,uBACZ,qBACC,oBAAC,aAAU,WAAU,WAAU,IAE/B,oBAAC,eAAY,WAAU,WAAU,GAErC;AAAA;AAAA;AAAA,IACF;AAAA,IAEC,WACC,oBAAC,SAAI,WAAU,aACb,+BAAC,QAAG,WAAU,iEACZ;AAAA,0BAAC,QAAG,WAAU,cAAa,sBAAQ;AAAA,MACnC,oBAAC,QAAG,WAAU,oCAAoC,gBAAM,IAAG;AAAA,MAC3D,oBAAC,QAAG,WAAU,cAAa,sBAAQ;AAAA,MACnC,oBAAC,QAAG,WAAU,0BAA0B,gBAAM,SAAS,UAAI;AAAA,MAC3D,oBAAC,QAAG,WAAU,cAAa,mBAAK;AAAA,MAChC,qBAAC,QAAG,WAAU,0BACX;AAAA,cAAM;AAAA,QAAW;AAAA,QAAE,MAAM;AAAA,SAC5B;AAAA,MACA,oBAAC,QAAG,WAAU,cAAa,yBAAW;AAAA,MACtC,oBAAC,QACC,8BAAC,oBAAiB,QAAQ,MAAM,mBAAmB,GACrD;AAAA,MACA,oBAAC,QAAG,WAAU,cAAa,qBAAO;AAAA,MAClC,oBAAC,QACC,8BAAC,kBAAe,QAAQ,MAAM,iBAAiB,GACjD;AAAA,MACA,oBAAC,QAAG,WAAU,cAAa,qBAAO;AAAA,MAClC,oBAAC,QAAG,WAAU,0BACX,0BAAgB,MAAM,SAAS,GAClC;AAAA,OACF,GACF,IACE;AAAA,KACN;AAEJ;AAIA,MAAM,aAAa;AAAA,EACjB,EAAE,OAAO,OAAgB,OAAO,MAAM;AAAA,EACtC,EAAE,OAAO,eAAwB,OAAO,cAAc;AAAA,EACtD,EAAE,OAAO,aAAsB,OAAO,YAAY;AACpD;AAWO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,YACJ,WAAW,KAAK,CAAC,MAAM,EAAE,UAAU,YAAY,IAAI,eAAe;AAGpE,QAAM,sBAAsB,gBAAgC;AAAA,IAC1D,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS,WAAW,IAAI,CAAC,MAAM,EAAE,KAAK;AAAA,EACxC,CAAC;AAED,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,2CACb;AAAA,0BAAC,SAAI,KAAK,oBAAoB,KAAM,GAAG,oBAAoB,YACzD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe,CAAC,MAAM,qBAAqB,CAAC;AAAA,UAC5C,OAAO;AAAA;AAAA,MACT,GACF;AAAA,MACC,CAAC,UACA,qBAAC,UAAK,WAAU,sBACb;AAAA,cAAM,eAAe;AAAA,QAAE;AAAA,QAAO,UAAU,IAAI,MAAM;AAAA,SACrD,IACE;AAAA,OACN;AAAA,IAEC,QACC,oBAAC,SAAI,WAAU,iCAAiC,iBAAM,IACpD;AAAA,IAEH,WAAW,OAAO,WAAW,IAC5B,oBAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,MAC3C,oBAAC,YAAiB,WAAU,iBAAb,CAA2B,CAC3C,GACH,IACE,OAAO,WAAW,IACpB,qBAAC,SAAI,WAAU,sDACb;AAAA,0BAAC,gBAAa,WAAU,yBAAwB;AAAA,MAChD,oBAAC,SAAI,WAAU,sBAAqB,kBAAI;AAAA,OAC1C,IAEA,oBAAC,SAAI,WAAU,eACZ,iBAAO,IAAI,CAAC,UACX,oBAAC,YAAwB,SAAV,MAAM,EAAkB,CACxC,GACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ProductsPanel.d.ts

@@ -0,0 +1,13 @@
+import type { ShopifyProduct } from "./useShopifyDashboard";
+interface ProductsPanelProps {
+    products: ShopifyProduct[];
+    total: number;
+    page: number;
+    loading: boolean;
+    error: string | null;
+    search: string;
+    onPageChange: (page: number) => void;
+}
+export declare function ProductsPanel({ products, total, page, loading, error, onPageChange, }: ProductsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProductsPanel.d.ts.map

package/dist/ProductsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductsPanel.d.ts","sourceRoot":"","sources":["../src/ProductsPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAoS5D,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAID,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,KAAK,EACL,YAAY,GACb,EAAE,kBAAkB,2CAmHpB"}