@mercurjs/admin 2.0.0-canary.100

package/dist/chunk-FIYO3KTR.js

@@ -0,0 +1,710 @@
+import {
+  InventoryItemGeneralSection
+} from "./chunk-LFKTHNWI.js";
+import {
+  TextCell,
+  TextHeader
+} from "./chunk-JHIMVLB2.js";
+import {
+  getFormattedCountry
+} from "./chunk-W6Y3PPU5.js";
+import {
+  SectionRow
+} from "./chunk-3XPXUIK3.js";
+import {
+  PlaceholderCell
+} from "./chunk-PHOCVOZ5.js";
+import {
+  TwoColumnPage
+} from "./chunk-V5J73NPW.js";
+import {
+  Thumbnail
+} from "./chunk-WIYFXWRI.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-ULJ3OMWU.js";
+import {
+  TwoColumnPageSkeleton
+} from "./chunk-INNFZYX2.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useQueryParams
+} from "./chunk-THHRRYRS.js";
+import {
+  useDate
+} from "./chunk-UZWFZMOX.js";
+import {
+  useDeleteReservationItem,
+  useReservationItems
+} from "./chunk-I5LLMPI2.js";
+import {
+  useStockLocations
+} from "./chunk-VXW3BCN2.js";
+import {
+  inventoryItemLevelsQueryKeys,
+  inventoryItemsQueryKeys,
+  useInventoryItem,
+  useInventoryItemLevels
+} from "./chunk-WBNGBRBK.js";
+import {
+  queryClient
+} from "./chunk-RHKRREUU.js";
+import {
+  sdk
+} from "./chunk-LXZXXOJ3.js";
+
+// src/pages/inventory/inventory-detail/inventory-detail.tsx
+import { Children } from "react";
+import { useLoaderData, useParams } from "react-router-dom";
+
+// src/pages/inventory/inventory-detail/components/inventory-item-attributes/attributes-section.tsx
+import { Container, Heading } from "@medusajs/ui";
+import { PencilSquare } from "@medusajs/icons";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InventoryItemAttributeSection = ({
+  inventoryItem
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", "data-testid": "inventory-item-attribute-section", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "inventory-item-attribute-header", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h2", "data-testid": "inventory-item-attribute-title", children: t("products.attributes") }),
+      /* @__PURE__ */ jsx(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "attributes",
+                  icon: /* @__PURE__ */ jsx(PencilSquare, {})
+                }
+              ]
+            }
+          ],
+          "data-testid": "inventory-item-attribute-action-menu"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(SectionRow, { title: t("fields.height"), value: inventoryItem.height, "data-testid": "inventory-item-height-row" }),
+    /* @__PURE__ */ jsx(SectionRow, { title: t("fields.width"), value: inventoryItem.width, "data-testid": "inventory-item-width-row" }),
+    /* @__PURE__ */ jsx(SectionRow, { title: t("fields.length"), value: inventoryItem.length, "data-testid": "inventory-item-length-row" }),
+    /* @__PURE__ */ jsx(SectionRow, { title: t("fields.weight"), value: inventoryItem.weight, "data-testid": "inventory-item-weight-row" }),
+    /* @__PURE__ */ jsx(SectionRow, { title: t("fields.midCode"), value: inventoryItem.mid_code, "data-testid": "inventory-item-mid-code-row" }),
+    /* @__PURE__ */ jsx(SectionRow, { title: t("fields.material"), value: inventoryItem.material, "data-testid": "inventory-item-material-row" }),
+    /* @__PURE__ */ jsx(SectionRow, { title: t("fields.hsCode"), value: inventoryItem.hs_code, "data-testid": "inventory-item-hs-code-row" }),
+    /* @__PURE__ */ jsx(
+      SectionRow,
+      {
+        title: t("fields.countryOfOrigin"),
+        value: getFormattedCountry(inventoryItem.origin_country),
+        "data-testid": "inventory-item-country-of-origin-row"
+      }
+    )
+  ] });
+};
+
+// src/pages/inventory/inventory-detail/components/inventory-item-location-levels.tsx
+import { Button, Container as Container2, Heading as Heading2 } from "@medusajs/ui";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { Link } from "react-router-dom";
+
+// src/pages/inventory/inventory-detail/components/location-levels-table/use-location-list-table-columns.tsx
+import { useMemo } from "react";
+import { PencilSquare as PencilSquare2, Trash } from "@medusajs/icons";
+import { createDataTableColumnHelper, toast, usePrompt } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var columnHelper = createDataTableColumnHelper();
+var useLocationListTableColumns = () => {
+  const { t } = useTranslation2();
+  const navigate = useNavigate();
+  const prompt = usePrompt();
+  const handleDelete = async (level) => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("inventory.deleteWarning"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    try {
+      await sdk.admin.inventoryItem.deleteLevel(
+        level.inventory_item_id,
+        level.location_id
+      );
+      toast.success(t("inventory.levelDeleted"));
+      queryClient.invalidateQueries({
+        queryKey: inventoryItemsQueryKeys.lists()
+      });
+      queryClient.invalidateQueries({
+        queryKey: inventoryItemLevelsQueryKeys.list({
+          inventoryItemId: level.inventory_item_id
+        })
+      });
+      queryClient.invalidateQueries({
+        queryKey: inventoryItemsQueryKeys.detail(level.inventory_item_id)
+      });
+      queryClient.invalidateQueries({
+        queryKey: inventoryItemLevelsQueryKeys.detail(level.inventory_item_id)
+      });
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "An error occurred");
+    }
+  };
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "location",
+        header: t("fields.location"),
+        cell: ({ row }) => {
+          const locationName = row.original.stock_locations?.map((location) => location.name).join(", ");
+          if (!locationName) {
+            return /* @__PURE__ */ jsx2(PlaceholderCell, {});
+          }
+          return /* @__PURE__ */ jsx2("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx2("span", { className: "truncate", children: locationName.toString() }) });
+        }
+      }),
+      columnHelper.accessor("reserved_quantity", {
+        header: t("inventory.reserved"),
+        cell: ({ getValue }) => {
+          const quantity = getValue();
+          if (Number.isNaN(quantity)) {
+            return /* @__PURE__ */ jsx2(PlaceholderCell, {});
+          }
+          return /* @__PURE__ */ jsx2("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx2("span", { className: "truncate", children: quantity }) });
+        },
+        enableSorting: true
+      }),
+      columnHelper.accessor("stocked_quantity", {
+        header: t("fields.inStock"),
+        cell: ({ getValue }) => {
+          const stockedQuantity = getValue();
+          if (Number.isNaN(stockedQuantity)) {
+            return /* @__PURE__ */ jsx2(PlaceholderCell, {});
+          }
+          return /* @__PURE__ */ jsx2("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx2("span", { className: "truncate", children: stockedQuantity }) });
+        },
+        enableSorting: true
+      }),
+      columnHelper.accessor("available_quantity", {
+        header: t("inventory.available"),
+        cell: ({ getValue }) => {
+          const availableQuantity = getValue();
+          if (Number.isNaN(availableQuantity)) {
+            return /* @__PURE__ */ jsx2(PlaceholderCell, {});
+          }
+          return /* @__PURE__ */ jsx2("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx2("span", { className: "truncate", children: availableQuantity }) });
+        }
+      }),
+      columnHelper.action({
+        actions: (ctx) => {
+          const level = ctx.row.original;
+          return [
+            [
+              {
+                icon: /* @__PURE__ */ jsx2(PencilSquare2, {}),
+                label: t("actions.edit"),
+                onClick: () => {
+                  navigate(`locations/${level.location_id}`);
+                }
+              }
+            ],
+            [
+              {
+                icon: /* @__PURE__ */ jsx2(Trash, {}),
+                label: t("actions.delete"),
+                onClick: () => handleDelete(level),
+                disabled: level.reserved_quantity > 0 || level.stocked_quantity > 0
+              }
+            ]
+          ];
+        }
+      })
+    ],
+    [t]
+  );
+};
+
+// src/pages/inventory/inventory-detail/components/location-levels-table/use-location-list-table-query.tsx
+var useLocationLevelTableQuery = ({
+  pageSize = 20,
+  prefix
+}) => {
+  const raw = useQueryParams(
+    [
+      "order",
+      "offset",
+      "location_id",
+      "stocked_quantity",
+      "reserved_quantity",
+      "incoming_quantity"
+    ],
+    prefix
+  );
+  const { offset, stocked_quantity, reserved_quantity, ...rest } = raw;
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    stocked_quantity: stocked_quantity ? JSON.parse(stocked_quantity) : void 0,
+    reserved_quantity: reserved_quantity ? JSON.parse(reserved_quantity) : void 0,
+    ...rest
+  };
+  return { searchParams, raw };
+};
+
+// src/pages/inventory/inventory-detail/components/location-levels-table/location-list-table.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var PREFIX = "invlvl";
+var ItemLocationListTable = ({
+  inventory_item_id
+}) => {
+  const { searchParams, raw } = useLocationLevelTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX
+  });
+  const {
+    inventory_levels,
+    count,
+    isPending: isLoading,
+    isError,
+    error
+  } = useInventoryItemLevels(inventory_item_id, {
+    ...searchParams,
+    fields: "+stock_locations.id,+stock_locations.name"
+  });
+  const columns = useLocationListTableColumns();
+  if (isError) {
+    throw error;
+  }
+  const { table } = useDataTable({
+    data: inventory_levels ?? [],
+    columns,
+    count,
+    enablePagination: true,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE
+  });
+  return /* @__PURE__ */ jsx3("div", { "data-testid": "inventory-location-levels-table", children: /* @__PURE__ */ jsx3(
+    _DataTable,
+    {
+      table,
+      columns,
+      pageSize: PAGE_SIZE,
+      count,
+      isLoading,
+      pagination: true,
+      queryObject: raw
+    }
+  ) });
+};
+
+// src/pages/inventory/inventory-detail/components/inventory-item-location-levels.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var InventoryItemLocationLevelsSection = ({
+  inventoryItem
+}) => {
+  const { t } = useTranslation3();
+  return /* @__PURE__ */ jsxs2(
+    Container2,
+    {
+      className: "divide-y p-0",
+      "data-testid": "inventory-item-location-levels-section",
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "flex items-center justify-between px-6 py-4",
+            "data-testid": "inventory-item-location-levels-header",
+            children: [
+              /* @__PURE__ */ jsx4(Heading2, { "data-testid": "inventory-item-location-levels-title", children: t("inventory.locationLevels") }),
+              /* @__PURE__ */ jsx4(
+                Button,
+                {
+                  size: "small",
+                  variant: "secondary",
+                  asChild: true,
+                  "data-testid": "inventory-manage-locations-button",
+                  children: /* @__PURE__ */ jsx4(Link, { to: "locations", "data-testid": "inventory-manage-locations-link", children: t("inventory.manageLocations") })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4(ItemLocationListTable, { inventory_item_id: inventoryItem.id })
+      ]
+    }
+  );
+};
+
+// src/pages/inventory/inventory-detail/components/inventory-item-reservations.tsx
+import { Button as Button2, Container as Container3, Heading as Heading3 } from "@medusajs/ui";
+import { useTranslation as useTranslation7 } from "react-i18next";
+import { Link as Link2 } from "react-router-dom";
+
+// src/pages/inventory/inventory-detail/components/reservations-table/reservation-list-table.tsx
+import { useMemo as useMemo3 } from "react";
+
+// src/pages/inventory/inventory-detail/components/reservations-table/use-reservation-list-table-columns.tsx
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo as useMemo2 } from "react";
+import { useTranslation as useTranslation6 } from "react-i18next";
+
+// src/components/table/table-cells/common/created-at-cell/created-at-cell.tsx
+import { Tooltip } from "@medusajs/ui";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CreatedAtCell = ({ date }) => {
+  const { getFullDate } = useDate();
+  if (!date) {
+    return /* @__PURE__ */ jsx5(PlaceholderCell, {});
+  }
+  return /* @__PURE__ */ jsx5("div", { className: "flex h-full w-full items-center overflow-hidden", children: /* @__PURE__ */ jsx5(
+    Tooltip,
+    {
+      className: "z-10",
+      content: /* @__PURE__ */ jsx5("span", { className: "text-pretty", children: `${getFullDate({
+        date,
+        includeTime: true
+      })}` }),
+      children: /* @__PURE__ */ jsx5("span", { className: "truncate", children: getFullDate({ date, includeTime: true }) })
+    }
+  ) });
+};
+
+// src/pages/inventory/inventory-detail/components/reservations-table/reservation-actions.tsx
+import { PencilSquare as PencilSquare3, Trash as Trash2 } from "@medusajs/icons";
+import { toast as toast2, usePrompt as usePrompt2 } from "@medusajs/ui";
+import { useTranslation as useTranslation5 } from "react-i18next";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ReservationActions = ({
+  reservation
+}) => {
+  const { t } = useTranslation5();
+  const prompt = usePrompt2();
+  const { mutateAsync } = useDeleteReservationItem(reservation.id);
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("inventory.deleteWarning"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    await mutateAsync(void 0, {
+      onSuccess: () => {
+        toast2.success(t("inventory.reservation.deleteSuccessToast"));
+      },
+      onError: (e) => {
+        toast2.error(e.message);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx6(
+    ActionMenu,
+    {
+      groups: [
+        {
+          actions: [
+            {
+              icon: /* @__PURE__ */ jsx6(PencilSquare3, {}),
+              label: t("actions.edit"),
+              to: `/reservations/${reservation.id}/edit`
+            }
+          ]
+        },
+        {
+          actions: [
+            {
+              icon: /* @__PURE__ */ jsx6(Trash2, {}),
+              label: t("actions.delete"),
+              onClick: handleDelete
+            }
+          ]
+        }
+      ],
+      "data-testid": `reservation-actions-${reservation.id}`
+    }
+  );
+};
+
+// src/pages/inventory/inventory-detail/components/reservations-table/use-reservation-list-table-columns.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var columnHelper2 = createColumnHelper();
+var useReservationTableColumn = ({ sku }) => {
+  const { t } = useTranslation6();
+  return useMemo2(
+    () => [
+      columnHelper2.display({
+        id: "sku",
+        header: () => /* @__PURE__ */ jsx7(TextHeader, { text: t("fields.sku") }),
+        cell: () => {
+          return /* @__PURE__ */ jsx7(TextCell, { text: sku });
+        }
+      }),
+      columnHelper2.accessor("line_item.order_id", {
+        header: () => /* @__PURE__ */ jsx7(TextHeader, { text: t("inventory.reservation.orderID") }),
+        cell: ({ getValue }) => {
+          const orderId = getValue();
+          if (!orderId) {
+            return /* @__PURE__ */ jsx7(PlaceholderCell, {});
+          }
+          return /* @__PURE__ */ jsx7(TextCell, { text: orderId });
+        }
+      }),
+      columnHelper2.accessor("description", {
+        header: () => /* @__PURE__ */ jsx7(TextHeader, { text: t("fields.description") }),
+        cell: ({ getValue }) => {
+          const description = getValue();
+          if (!description) {
+            return /* @__PURE__ */ jsx7(PlaceholderCell, {});
+          }
+          return /* @__PURE__ */ jsx7(TextCell, { text: description });
+        }
+      }),
+      columnHelper2.accessor("location.name", {
+        header: () => /* @__PURE__ */ jsx7(TextHeader, { text: t("inventory.reservation.location") }),
+        cell: ({ getValue }) => {
+          const location = getValue();
+          if (!location) {
+            return /* @__PURE__ */ jsx7(PlaceholderCell, {});
+          }
+          return /* @__PURE__ */ jsx7(TextCell, { text: location });
+        }
+      }),
+      columnHelper2.accessor("created_at", {
+        header: () => /* @__PURE__ */ jsx7(TextHeader, { text: t("fields.createdAt") }),
+        cell: ({ getValue }) => /* @__PURE__ */ jsx7(CreatedAtCell, { date: getValue() })
+      }),
+      columnHelper2.accessor("quantity", {
+        header: () => /* @__PURE__ */ jsx7(TextHeader, { text: t("fields.quantity"), align: "right" }),
+        cell: ({ getValue }) => {
+          return /* @__PURE__ */ jsx7(TextCell, { text: getValue(), align: "right" });
+        }
+      }),
+      columnHelper2.display({
+        id: "actions",
+        cell: ({ row }) => /* @__PURE__ */ jsx7(ReservationActions, { reservation: row.original })
+      })
+    ],
+    [t]
+  );
+};
+
+// src/pages/inventory/inventory-detail/components/reservations-table/use-reservation-list-table-query.tsx
+var useReservationsTableQuery = ({
+  pageSize = 20,
+  prefix
+}) => {
+  const raw = useQueryParams(
+    [
+      "id",
+      "location_id",
+      "inventory_item_id",
+      "quantity",
+      "line_item_id",
+      "description",
+      "created_by"
+    ],
+    prefix
+  );
+  const { quantity, ...params } = raw;
+  const searchParams = {
+    limit: pageSize,
+    quantity: quantity ? JSON.parse(quantity) : void 0,
+    ...params
+  };
+  return {
+    searchParams,
+    raw
+  };
+};
+
+// src/pages/inventory/inventory-detail/components/reservations-table/reservation-list-table.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var PAGE_SIZE2 = 20;
+var ReservationItemTable = ({
+  inventoryItem
+}) => {
+  const { searchParams, raw } = useReservationsTableQuery({
+    pageSize: PAGE_SIZE2
+  });
+  const { reservations, count, isPending, isError, error } = useReservationItems({
+    ...searchParams,
+    inventory_item_id: [inventoryItem.id]
+  });
+  const { stock_locations } = useStockLocations({
+    id: (reservations || []).map((r) => r.location_id)
+  });
+  const data = useMemo3(() => {
+    const locationMap = new Map((stock_locations || []).map((l) => [l.id, l]));
+    return (reservations || []).map((r) => ({
+      ...r,
+      location: locationMap.get(r.location_id)
+    }));
+  }, [reservations, stock_locations]);
+  const columns = useReservationTableColumn({ sku: inventoryItem.sku });
+  const { table } = useDataTable({
+    data: data ?? [],
+    columns,
+    count,
+    enablePagination: true,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE2
+  });
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx8("div", { "data-testid": "inventory-reservations-table", children: /* @__PURE__ */ jsx8(
+    _DataTable,
+    {
+      table,
+      columns,
+      pageSize: PAGE_SIZE2,
+      count,
+      isLoading: isPending,
+      pagination: true,
+      queryObject: raw
+    }
+  ) });
+};
+
+// src/pages/inventory/inventory-detail/components/inventory-item-reservations.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var InventoryItemReservationsSection = ({
+  inventoryItem
+}) => {
+  const { t } = useTranslation7();
+  return /* @__PURE__ */ jsxs3(Container3, { className: "divide-y p-0", "data-testid": "inventory-item-reservations-section", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "inventory-item-reservations-header", children: [
+      /* @__PURE__ */ jsx9(Heading3, { "data-testid": "inventory-item-reservations-title", children: t("reservations.domain") }),
+      /* @__PURE__ */ jsx9(Button2, { size: "small", variant: "secondary", asChild: true, "data-testid": "inventory-create-reservation-button", children: /* @__PURE__ */ jsx9(Link2, { to: `/reservations/create?item_id=${inventoryItem.id}`, "data-testid": "inventory-create-reservation-link", children: t("actions.create") }) })
+    ] }),
+    /* @__PURE__ */ jsx9(ReservationItemTable, { inventoryItem })
+  ] });
+};
+
+// src/pages/inventory/inventory-detail/components/inventory-item-variants/variants-section.tsx
+import { TriangleRightMini } from "@medusajs/icons";
+import { Container as Container4, Heading as Heading4 } from "@medusajs/ui";
+import { useTranslation as useTranslation8 } from "react-i18next";
+import { Link as Link3 } from "react-router-dom";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var InventoryItemVariantsSection = ({
+  variants
+}) => {
+  const { t } = useTranslation8();
+  if (!variants?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs4(Container4, { className: "p-0", "data-testid": "inventory-item-variants-section", children: [
+    /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "inventory-item-variants-header", children: /* @__PURE__ */ jsx10(Heading4, { level: "h2", "data-testid": "inventory-item-variants-title", children: t("inventory.associatedVariants") }) }),
+    /* @__PURE__ */ jsx10("div", { className: "txt-small flex flex-col gap-2 px-2 pb-2", "data-testid": "inventory-item-variants-list", children: variants.map((variant) => {
+      const link = variant.product ? `/products/${variant.product.id}/variants/${variant.id}` : null;
+      const Inner = /* @__PURE__ */ jsx10("div", { className: "shadow-elevation-card-rest bg-ui-bg-component rounded-md px-4 py-2 transition-colors", "data-testid": `inventory-item-variant-${variant.id}`, children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx10("div", { className: "shadow-elevation-card-rest rounded-md", "data-testid": `inventory-item-variant-thumbnail-${variant.id}`, children: /* @__PURE__ */ jsx10(Thumbnail, { src: variant.product?.thumbnail }) }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx10("span", { className: "text-ui-fg-base font-medium", "data-testid": `inventory-item-variant-title-${variant.id}`, children: variant.title }),
+          /* @__PURE__ */ jsx10("span", { className: "text-ui-fg-subtle", "data-testid": `inventory-item-variant-options-${variant.id}`, children: variant.options.map((o) => o.value).join(" \u22C5 ") })
+        ] }),
+        /* @__PURE__ */ jsx10("div", { className: "size-7 flex items-center justify-center", "data-testid": `inventory-item-variant-arrow-${variant.id}`, children: /* @__PURE__ */ jsx10(TriangleRightMini, { className: "text-ui-fg-muted rtl:rotate-180" }) })
+      ] }) });
+      if (!link) {
+        return /* @__PURE__ */ jsx10("div", { "data-testid": `inventory-item-variant-container-${variant.id}`, children: Inner }, variant.id);
+      }
+      return /* @__PURE__ */ jsx10(
+        Link3,
+        {
+          to: link,
+          className: "outline-none focus-within:shadow-borders-interactive-with-focus rounded-md [&:hover>div]:bg-ui-bg-component-hover",
+          "data-testid": `inventory-item-variant-link-${variant.id}`,
+          children: Inner
+        },
+        variant.id
+      );
+    }) })
+  ] });
+};
+
+// src/pages/inventory/inventory-detail/constants.ts
+var INVENTORY_DETAIL_FIELDS = "*variants,*variants.product,*variants.options";
+
+// src/pages/inventory/inventory-detail/inventory-detail.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var Root = ({ children }) => {
+  const { id } = useParams();
+  const initialData = useLoaderData();
+  const {
+    inventory_item,
+    isPending: isLoading,
+    isError,
+    error
+  } = useInventoryItem(
+    id,
+    {
+      fields: INVENTORY_DETAIL_FIELDS
+    },
+    {
+      initialData
+    }
+  );
+  if (isLoading || !inventory_item) {
+    return /* @__PURE__ */ jsx11(
+      TwoColumnPageSkeleton,
+      {
+        showJSON: true,
+        mainSections: 3,
+        sidebarSections: 2,
+        showMetadata: true
+      }
+    );
+  }
+  if (isError) {
+    throw error;
+  }
+  return Children.count(children) > 0 ? /* @__PURE__ */ jsx11(TwoColumnPage, { data: inventory_item, showJSON: true, showMetadata: true, "data-testid": "inventory-detail-page", children }) : /* @__PURE__ */ jsxs5(TwoColumnPage, { data: inventory_item, showJSON: true, showMetadata: true, "data-testid": "inventory-detail-page", children: [
+    /* @__PURE__ */ jsxs5(TwoColumnPage.Main, { "data-testid": "inventory-detail-main", children: [
+      /* @__PURE__ */ jsx11(InventoryItemGeneralSection, { inventoryItem: inventory_item }),
+      /* @__PURE__ */ jsx11(
+        InventoryItemLocationLevelsSection,
+        {
+          inventoryItem: inventory_item
+        }
+      ),
+      /* @__PURE__ */ jsx11(InventoryItemReservationsSection, { inventoryItem: inventory_item })
+    ] }),
+    /* @__PURE__ */ jsxs5(TwoColumnPage.Sidebar, { "data-testid": "inventory-detail-sidebar", children: [
+      inventory_item.variants && inventory_item.variants?.length > 0 && /* @__PURE__ */ jsx11(
+        InventoryItemVariantsSection,
+        {
+          variants: inventory_item.variants
+        }
+      ),
+      /* @__PURE__ */ jsx11(InventoryItemAttributeSection, { inventoryItem: inventory_item })
+    ] })
+  ] });
+};
+var InventoryDetailPage = Object.assign(Root, {
+  Main: TwoColumnPage.Main,
+  Sidebar: TwoColumnPage.Sidebar,
+  MainGeneralSection: InventoryItemGeneralSection,
+  MainLocationLevelsSection: InventoryItemLocationLevelsSection,
+  MainReservationsSection: InventoryItemReservationsSection,
+  SidebarVariantsSection: InventoryItemVariantsSection,
+  SidebarAttributeSection: InventoryItemAttributeSection
+});
+
+export {
+  INVENTORY_DETAIL_FIELDS,
+  InventoryDetailPage
+};