@mercurjs/admin 2.2.0-canary.1 → 2.2.0-canary.12

package/dist/{chunk-77T2UI6L.js → chunk-H4EHUOWL.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-54RTJBYO.js";
 import {
   PRODUCT_DETAIL_QUERY
-} from "./chunk-RQ4NMLSS.js";
+} from "./chunk-GVEF6UDT.js";
 import {
   TwoColumnPage
 } from "./chunk-E74OUNA3.js";
@@ -17,21 +17,25 @@ import {
 import {
   DataTable
 } from "./chunk-LYZT5REU.js";
-import {
-  require_dist
-} from "./chunk-2MDGYHWN.js";
 import {
   useQueryParams
 } from "./chunk-THHRRYRS.js";
+import {
+  require_dist
+} from "./chunk-UCYSCKZV.js";
 import {
   useProductTag
-} from "./chunk-AXTQMIIK.js";
+} from "./chunk-LJDGVBOQ.js";
 import {
   useProductType
 } from "./chunk-46M463BR.js";
+import {
+  productAttributesQueryKeys,
+  useProductAttribute
+} from "./chunk-533GMKEG.js";
 import {
   useCollection
-} from "./chunk-XZZTC7E5.js";
+} from "./chunk-Z5T5EPLF.js";
 import {
   useSeller
 } from "./chunk-LEG67A2R.js";
@@ -40,10 +44,7 @@ import {
 } from "./chunk-BDGZ4EQO.js";
 import {
   useProductCategory
-} from "./chunk-H5PYBIOZ.js";
-import {
-  PRODUCT_VARIANT_IDS_KEY
-} from "./chunk-YGAX72XV.js";
+} from "./chunk-DN2K5EAH.js";
 import {
   TwoColumnPageSkeleton
 } from "./chunk-INNFZYX2.js";
@@ -59,8 +60,9 @@ import {
   useRejectProduct,
   useRemoveAttributeFromProduct,
   useRequestProductChanges,
-  useUpdateProduct
-} from "./chunk-2YYXP6XI.js";
+  useUpdateProduct,
+  variantsQueryKeys
+} from "./chunk-H3MAUKL7.js";
 import {
   sdk
 } from "./chunk-ZBWL72TB.js";
@@ -86,7 +88,7 @@ import {
   isReferenceField,
   partitionProductChangeActions
 } from "@mercurjs/dashboard-shared";
-import { useQuery } from "@tanstack/react-query";
+import { useQueries } from "@tanstack/react-query";
 import { useTranslation as useTranslation2 } from "react-i18next";
 
 // src/components/common/confirm-prompt/confirm-prompt.tsx
@@ -170,6 +172,7 @@ var ConfirmPrompt = ({
 
 // src/pages/products/product-detail/components/product-active-edit-section/product-active-edit-section.tsx
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var VARIANT_LOOKUP_FIELDS = "id,title,sku,*images";
 var ImageStrip = ({
   images,
   faded
@@ -180,14 +183,6 @@ var ImageStrip = ({
     children: images.map((image, idx) => /* @__PURE__ */ jsx2(Thumbnail, { src: image.url, size: "base" }, `${image.url}-${idx}`))
   }
 );
-var BrandName = ({ id }) => {
-  const { data } = useQuery({
-    queryKey: ["product_brand", id],
-    queryFn: () => sdk.admin.productBrands.$id.query({ $id: id }),
-    enabled: !!id
-  });
-  return /* @__PURE__ */ jsx2(Fragment2, { children: data?.product_brand?.name ?? id });
-};
 var TypeName = ({ id }) => {
   const { product_type } = useProductType(id);
   return /* @__PURE__ */ jsx2(Fragment2, { children: product_type?.value ?? id });
@@ -209,8 +204,6 @@ var ReferenceName = ({
   id
 }) => {
   switch (field) {
-    case "brand_id":
-      return /* @__PURE__ */ jsx2(BrandName, { id });
     case "type_id":
       return /* @__PURE__ */ jsx2(TypeName, { id });
     case "collection_id":
@@ -313,13 +306,121 @@ var FieldRow = ({ diff }) => {
     )
   ] });
 };
-var ActionLine = ({ action }) => {
+var AttributeActionLine = ({
+  attributeId,
+  valueIds
+}) => {
+  const { product_attribute } = useProductAttribute(attributeId);
+  const name = product_attribute?.name ?? attributeId;
+  const values = product_attribute?.values ?? [];
+  const selectedNames = valueIds && valueIds.length ? valueIds.map((id) => {
+    const match = values.find((v) => v.id === id);
+    return match?.name ?? id;
+  }) : [];
+  return /* @__PURE__ */ jsxs2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: [
+    /* @__PURE__ */ jsx2("span", { className: "font-medium text-ui-fg-base", children: name }),
+    selectedNames.length > 0 && `: ${selectedNames.join(", ")}`
+  ] });
+};
+var VariantActionLine = ({
+  title,
+  images
+}) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+  images && images.length > 0 && /* @__PURE__ */ jsx2(ImageStrip, { images }),
+  /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: /* @__PURE__ */ jsx2("span", { className: "font-medium text-ui-fg-base", children: title }) })
+] });
+var ActionLine = ({
+  action,
+  variantsById
+}) => {
   const { t } = useTranslation2();
+  const details = action.details ?? {};
+  if (action.action === import_types.ProductChangeActionType.ATTRIBUTE_ADD || action.action === import_types.ProductChangeActionType.ATTRIBUTE_REMOVE) {
+    if (!details.attribute_id) return null;
+    return /* @__PURE__ */ jsx2(
+      AttributeActionLine,
+      {
+        attributeId: details.attribute_id,
+        valueIds: action.action === import_types.ProductChangeActionType.ATTRIBUTE_ADD ? details.attribute_value_ids : void 0
+      }
+    );
+  }
+  const variantFallback = t("fields.variant", { defaultValue: "Variant" });
+  if (action.action === import_types.ProductChangeActionType.VARIANT_ADD) {
+    const title = details.variant?.title || details.variant?.sku || variantFallback;
+    return /* @__PURE__ */ jsx2(VariantActionLine, { title });
+  }
+  if (action.action === import_types.ProductChangeActionType.VARIANT_REMOVE) {
+    const variantId = details.variant_id ?? "";
+    const found = variantId ? variantsById.get(variantId) : void 0;
+    const title = found?.title || found?.sku || variantId || variantFallback;
+    const images = isImageList(found?.images) ? found?.images : void 0;
+    return /* @__PURE__ */ jsx2(VariantActionLine, { title, images });
+  }
   const label = describeProductChangeAction(action, {
-    variant: t("fields.variant", { defaultValue: "Variant" })
+    variant: variantFallback
   });
   return /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: label });
 };
+var VariantUpdateBlock = ({
+  variantId,
+  diffs,
+  variantsById
+}) => {
+  const { t } = useTranslation2();
+  const found = variantsById.get(variantId);
+  const variantFallback = t("fields.variant", { defaultValue: "Variant" });
+  const title = found?.title || found?.sku || variantId || variantFallback;
+  const sku = found?.sku && title !== found.sku ? found.sku : void 0;
+  const images = isImageList(found?.images) ? found?.images : void 0;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "flex items-start gap-4 px-6 py-4",
+        "data-testid": `product-active-edit-variant-${variantId}`,
+        children: [
+          /* @__PURE__ */ jsx2(
+            Text,
+            {
+              size: "small",
+              weight: "plus",
+              leading: "compact",
+              className: "text-ui-fg-subtle w-[160px] shrink-0",
+              children: variantFallback
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 items-center gap-2", children: [
+            images && images.length > 0 && /* @__PURE__ */ jsx2(ImageStrip, { images }),
+            /* @__PURE__ */ jsx2(
+              Text,
+              {
+                size: "small",
+                leading: "compact",
+                className: "text-ui-fg-base font-medium",
+                children: title
+              }
+            ),
+            sku && /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: `\xB7 ${sku}` })
+          ] })
+        ]
+      }
+    ),
+    diffs.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
+      /* @__PURE__ */ jsx2(
+        Text,
+        {
+          size: "small",
+          weight: "plus",
+          leading: "compact",
+          className: "text-ui-fg-subtle w-[160px] shrink-0",
+          children: t("labels.updated")
+        }
+      ),
+      /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-4", children: diffs.map((diff, idx) => /* @__PURE__ */ jsx2(FieldRow, { diff }, `${variantId}-${diff.field}-${idx}`)) })
+    ] })
+  ] });
+};
 var ProductActiveEditSection = ({
   product
 }) => {
@@ -339,13 +440,80 @@ var ProductActiveEditSection = ({
     () => partitionProductChangeActions(product_change?.actions ?? []),
     [product_change]
   );
+  const productUpdated = useMemo(
+    () => updated.filter((d) => !d.variant_id),
+    [updated]
+  );
+  const variantsUpdated = useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const diff of updated) {
+      if (!diff.variant_id) continue;
+      const bucket = groups.get(diff.variant_id) ?? [];
+      bucket.push(diff);
+      groups.set(diff.variant_id, bucket);
+    }
+    return groups;
+  }, [updated]);
+  const attributeIds = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const action of [...added, ...removed]) {
+      if (action.action === import_types.ProductChangeActionType.ATTRIBUTE_ADD || action.action === import_types.ProductChangeActionType.ATTRIBUTE_REMOVE) {
+        const details = action.details ?? {};
+        if (details.attribute_id) ids.add(details.attribute_id);
+      }
+    }
+    return Array.from(ids);
+  }, [added, removed]);
+  const attributeQueries = useQueries({
+    queries: attributeIds.map((id) => ({
+      queryKey: productAttributesQueryKeys.detail(id),
+      queryFn: () => sdk.admin.productAttributes.$id.query({ $id: id })
+    }))
+  });
+  const isLoadingAttributes = attributeQueries.some((q) => q.isPending);
+  const variantIds = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const action of removed) {
+      if (action.action === import_types.ProductChangeActionType.VARIANT_REMOVE) {
+        const details = action.details ?? {};
+        if (details.variant_id) ids.add(details.variant_id);
+      }
+    }
+    for (const diff of updated) {
+      if (diff.variant_id) ids.add(diff.variant_id);
+    }
+    return Array.from(ids);
+  }, [removed, updated]);
+  const variantQueryInput = { fields: VARIANT_LOOKUP_FIELDS };
+  const variantQueries = useQueries({
+    queries: variantIds.map((variantId) => ({
+      queryKey: variantsQueryKeys.detail(variantId, variantQueryInput),
+      queryFn: () => sdk.admin.products.$id.variants.$variantId.query({
+        $id: product.id,
+        $variantId: variantId,
+        ...variantQueryInput
+      })
+    }))
+  });
+  const isLoadingVariants = variantQueries.some((q) => q.isPending);
+  const variantsById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const query of variantQueries) {
+      const variant = query.data?.variant;
+      if (variant?.id) map.set(variant.id, variant);
+    }
+    return map;
+  }, [variantQueries]);
   if (isError || !product_change) {
     return null;
   }
   if (product_change.status !== import_types.ProductChangeStatus.PENDING) {
     return null;
   }
-  const hasContent = updated.length > 0 || added.length > 0 || removed.length > 0 || deleteRequested;
+  if (isLoadingAttributes || isLoadingVariants) {
+    return null;
+  }
+  const hasContent = productUpdated.length > 0 || variantsUpdated.size > 0 || added.length > 0 || removed.length > 0 || deleteRequested;
   const handleConfirm = async (note) => {
     try {
       await confirmChange({ internal_note: note });
@@ -378,7 +546,7 @@ var ProductActiveEditSection = ({
           store: requesterSeller?.name ?? t("products.request.fallbackStore")
         }) }) }),
         hasContent && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          updated.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
+          productUpdated.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
             /* @__PURE__ */ jsx2(
               Text,
               {
@@ -389,8 +557,17 @@ var ProductActiveEditSection = ({
                 children: t("labels.updated")
               }
             ),
-            /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-4", children: updated.map((diff, idx) => /* @__PURE__ */ jsx2(FieldRow, { diff }, `${diff.field}-${idx}`)) })
+            /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-4", children: productUpdated.map((diff, idx) => /* @__PURE__ */ jsx2(FieldRow, { diff }, `${diff.field}-${idx}`)) })
           ] }),
+          variantsUpdated.size > 0 && Array.from(variantsUpdated.entries()).map(([variantId, diffs]) => /* @__PURE__ */ jsx2(
+            VariantUpdateBlock,
+            {
+              variantId,
+              diffs,
+              variantsById
+            },
+            variantId
+          )),
           added.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
             /* @__PURE__ */ jsx2(
               Text,
@@ -402,7 +579,14 @@ var ProductActiveEditSection = ({
                 children: t("labels.added")
               }
             ),
-            /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-2", children: added.map((action) => /* @__PURE__ */ jsx2(ActionLine, { action }, action.id)) })
+            /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-2", children: added.map((action) => /* @__PURE__ */ jsx2(
+              ActionLine,
+              {
+                action,
+                variantsById
+              },
+              action.id
+            )) })
           ] }),
           removed.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
             /* @__PURE__ */ jsx2(
@@ -415,7 +599,14 @@ var ProductActiveEditSection = ({
                 children: t("labels.removed")
               }
             ),
-            /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-2", children: removed.map((action) => /* @__PURE__ */ jsx2(ActionLine, { action }, action.id)) })
+            /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-2", children: removed.map((action) => /* @__PURE__ */ jsx2(
+              ActionLine,
+              {
+                action,
+                variantsById
+              },
+              action.id
+            )) })
           ] }),
           deleteRequested && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
             /* @__PURE__ */ jsx2(
@@ -666,7 +857,8 @@ import {
   Trash,
   Swatch,
   DropCap,
-  InformationCircleSolid
+  InformationCircleSolid,
+  PencilSquare
 } from "@medusajs/icons";
 import {
   Badge,
@@ -708,12 +900,23 @@ var AttributeActions = ({
     ActionMenu,
     {
       groups: [
+        {
+          actions: [
+            {
+              label: t("actions.edit"),
+              to: `attributes/${attribute.id}/edit`,
+              icon: /* @__PURE__ */ jsx4(PencilSquare, {})
+            }
+          ]
+        },
         {
           actions: [
             {
               label: t("actions.delete"),
               onClick: handleDelete,
-              icon: /* @__PURE__ */ jsx4(Trash, {})
+              icon: /* @__PURE__ */ jsx4(Trash, {}),
+              disabled: attribute.is_required,
+              disabledTooltip: attribute.is_required ? t("products.attributeRequiredDeleteDisabledTooltip") : void 0
             }
           ]
         }
@@ -841,7 +1044,7 @@ var ProductAttributeSection = ({
 };
 
 // src/pages/products/product-detail/components/product-general-section/product-general-section.tsx
-import { PencilSquare, Trash as Trash2 } from "@medusajs/icons";
+import { PencilSquare as PencilSquare2, Trash as Trash2 } from "@medusajs/icons";
 import { Container as Container4, Heading as Heading4, StatusBadge, usePrompt as usePrompt2 } from "@medusajs/ui";
 import { useTranslation as useTranslation5 } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -854,8 +1057,6 @@ var productStatusColor = (status) => {
       return "orange";
     case "published":
       return "green";
-    case "requires_action":
-      return "blue";
     case "rejected":
       return "red";
     default:
@@ -918,7 +1119,7 @@ var ProductGeneralSection = ({
                           {
                             label: t("actions.edit"),
                             to: "edit",
-                            icon: /* @__PURE__ */ jsx5(PencilSquare, {})
+                            icon: /* @__PURE__ */ jsx5(PencilSquare2, {})
                           }
                         ]
                       },
@@ -977,7 +1178,7 @@ var ProductGeneralSection = ({
 };
 
 // src/pages/products/product-detail/components/product-media-section/product-media-section.tsx
-import { PencilSquare as PencilSquare2, ThumbnailBadge } from "@medusajs/icons";
+import { PencilSquare as PencilSquare3, ThumbnailBadge } from "@medusajs/icons";
 import {
   Button as Button3,
   Checkbox,
@@ -1054,7 +1255,7 @@ var ProductMediaSection = ({
                 {
                   label: t("actions.edit"),
                   to: "media?view=edit",
-                  icon: /* @__PURE__ */ jsx6(PencilSquare2, {})
+                  icon: /* @__PURE__ */ jsx6(PencilSquare3, {})
                 }
               ]
             }
@@ -1157,7 +1358,7 @@ var getMedia = (product) => {
 };
 
 // src/pages/products/product-detail/components/product-organization-section/product-organization-section.tsx
-import { PencilSquare as PencilSquare3 } from "@medusajs/icons";
+import { PencilSquare as PencilSquare4 } from "@medusajs/icons";
 import { Badge as Badge2, Container as Container6, Heading as Heading6, Tooltip as Tooltip3 } from "@medusajs/ui";
 import { useTranslation as useTranslation7 } from "react-i18next";
 import { Link as Link2 } from "react-router-dom";
@@ -1188,7 +1389,7 @@ var ProductOrganizationSection = ({
                         {
                           label: t("actions.edit"),
                           to: "organization",
-                          icon: /* @__PURE__ */ jsx7(PencilSquare3, {})
+                          icon: /* @__PURE__ */ jsx7(PencilSquare4, {})
                         }
                       ]
                     }
@@ -1228,20 +1429,6 @@ var ProductOrganizationSection = ({
             "data-testid": "product-type-row"
           }
         ),
-        /* @__PURE__ */ jsx7(
-          SectionRow,
-          {
-            title: t("fields.brand"),
-            value: product.brand ? /* @__PURE__ */ jsx7(
-              OrganizationTag,
-              {
-                label: product.brand.name,
-                to: `/settings/product-brands/${product.brand.id}`
-              }
-            ) : void 0,
-            "data-testid": "product-brand-row"
-          }
-        ),
         /* @__PURE__ */ jsx7(
           SectionRow,
           {
@@ -1288,19 +1475,20 @@ var OrganizationTag = ({ label, to }) => {
 
 // src/pages/products/product-detail/components/product-variant-section/product-variant-section.tsx
 import { useCallback, useMemo as useMemo2 } from "react";
-import { Buildings, Component, PencilSquare as PencilSquare4, Trash as Trash3 } from "@medusajs/icons";
+import { PencilSquare as PencilSquare5, Trash as Trash3 } from "@medusajs/icons";
 import {
   Badge as Badge3,
+  Button as Button4,
   Container as Container7,
   createDataTableColumnHelper,
-  createDataTableCommandHelper,
+  Heading as Heading7,
   Tooltip as Tooltip4,
   usePrompt as usePrompt4
 } from "@medusajs/ui";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useTranslation as useTranslation8 } from "react-i18next";
-import { useNavigate as useNavigate2, useSearchParams } from "react-router-dom";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { Link as Link3, useNavigate as useNavigate2, useSearchParams } from "react-router-dom";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
 var PREFIX = "pv";
 var ProductVariantSection = ({
@@ -1313,7 +1501,6 @@ var ProductVariantSection = ({
   );
   const columns = useColumns(product);
   const filters = useFilters();
-  const commands = useCommands();
   const { variants, count, isPending, isError, error } = useProductVariants(
     product.id,
     {
@@ -1323,7 +1510,7 @@ var ProductVariantSection = ({
       limit: PAGE_SIZE,
       created_at: created_at ? JSON.parse(created_at) : void 0,
       updated_at: updated_at ? JSON.parse(updated_at) : void 0,
-      fields: "title,created_at,updated_at,*attribute_values,*attribute_values.attribute"
+      fields: "title,sku,created_at,updated_at,*options,*options.option"
     },
     {
       placeholderData: keepPreviousData
@@ -1332,55 +1519,46 @@ var ProductVariantSection = ({
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsx8(Container7, { className: "divide-y p-0", "data-testid": "product-variant-section", children: /* @__PURE__ */ jsx8("div", { "data-testid": "product-variants-table-container", children: /* @__PURE__ */ jsx8(
-    DataTable,
-    {
-      data: variants,
-      columns,
-      filters,
-      rowCount: count,
-      getRowId: (row) => row.id,
-      rowHref: (row) => `/products/${product.id}/variants/${row.id}`,
-      pageSize: PAGE_SIZE,
-      isLoading: isPending,
-      heading: t("products.variants.header"),
-      emptyState: {
-        empty: {
-          heading: t("products.variants.empty.heading"),
-          description: t("products.variants.empty.description")
-        },
-        filtered: {
-          heading: t("products.variants.filtered.heading"),
-          description: t("products.variants.filtered.description")
+  return /* @__PURE__ */ jsxs8(Container7, { className: "divide-y p-0", "data-testid": "product-variant-section", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx8(Heading7, { level: "h2", children: t("products.variants.header") }),
+      /* @__PURE__ */ jsx8(
+        Button4,
+        {
+          size: "small",
+          variant: "secondary",
+          asChild: true,
+          "data-testid": "product-variants-create-button",
+          children: /* @__PURE__ */ jsx8(Link3, { to: "variants/create", children: t("actions.create") })
         }
-      },
-      action: {
-        label: t("actions.create"),
-        to: `variants/create`
-      },
-      actionMenu: {
-        groups: [
-          {
-            actions: [
-              {
-                label: t("products.editPrices"),
-                to: `prices`,
-                icon: /* @__PURE__ */ jsx8(PencilSquare4, {})
-              },
-              {
-                label: t("inventory.stock.action"),
-                to: `stock`,
-                icon: /* @__PURE__ */ jsx8(Buildings, {})
-              }
-            ]
+      )
+    ] }),
+    /* @__PURE__ */ jsx8("div", { "data-testid": "product-variants-table-container", children: /* @__PURE__ */ jsx8(
+      DataTable,
+      {
+        data: variants,
+        columns,
+        filters,
+        rowCount: count,
+        getRowId: (row) => row.id,
+        rowHref: (row) => `/products/${product.id}/variants/${row.id}`,
+        pageSize: PAGE_SIZE,
+        isLoading: isPending,
+        compact: true,
+        emptyState: {
+          empty: {
+            heading: t("products.variants.empty.heading"),
+            description: t("products.variants.empty.description")
+          },
+          filtered: {
+            heading: t("products.variants.filtered.heading"),
+            description: t("products.variants.filtered.description")
           }
-        ],
-        "data-testid": "product-variant-section-action-menu"
-      },
-      commands,
-      prefix: PREFIX
-    }
-  ) }) });
+        },
+        prefix: PREFIX
+      }
+    ) })
+  ] });
 };
 var columnHelper = createDataTableColumnHelper();
 var useColumns = (product) => {
@@ -1416,44 +1594,8 @@ var useColumns = (product) => {
     },
     [mutateAsync, prompt, t]
   );
-  const optionColumns = useMemo2(() => {
-    if (!product?.options) {
-      return [];
-    }
-    return product.options.map((option) => {
-      return columnHelper.display({
-        id: option.id,
-        header: option.title,
-        cell: ({ row }) => {
-          const variantOpt = row.original.options?.find(
-            (opt) => opt.option_id === option.id
-          );
-          if (!variantOpt) {
-            return /* @__PURE__ */ jsx8("span", { className: "text-ui-fg-muted", children: "-" });
-          }
-          return /* @__PURE__ */ jsx8(
-            "div",
-            {
-              className: "flex items-center",
-              "data-testid": `product-variant-option-${option.id}-${row.original.id}`,
-              children: /* @__PURE__ */ jsx8(Tooltip4, { content: variantOpt.value, children: /* @__PURE__ */ jsx8(
-                Badge3,
-                {
-                  size: "2xsmall",
-                  title: variantOpt.value,
-                  className: "inline-flex min-w-[20px] max-w-[140px] items-center justify-center overflow-hidden truncate",
-                  "data-testid": `product-variant-option-badge-${option.id}-${row.original.id}-${variantOpt.value}`,
-                  children: variantOpt.value
-                }
-              ) })
-            }
-          );
-        }
-      });
-    });
-  }, [product]);
   const attributeColumns = useMemo2(() => {
-    const variantAttributes = product?.variant_attributes?.filter((attr) => attr.is_variant_axis);
+    const variantAttributes = product?.attributes?.filter((attr) => attr.is_variant_axis);
     if (!variantAttributes?.length) {
       return [];
     }
@@ -1462,11 +1604,10 @@ var useColumns = (product) => {
         id: `attribute-${attribute.id}`,
         header: attribute.name,
         cell: ({ row }) => {
-          const variant = row.original;
-          const matches = variant.attribute_values?.filter(
-            (v) => v.attribute?.id === attribute.id
-          ) ?? [];
-          if (!matches.length) {
+          const variantOpt = row.original.options?.find(
+            (opt) => opt.option?.title === attribute.name
+          );
+          if (!variantOpt?.value) {
             return /* @__PURE__ */ jsx8("span", { className: "text-ui-fg-muted", children: "-" });
           }
           return /* @__PURE__ */ jsx8(
@@ -1474,16 +1615,16 @@ var useColumns = (product) => {
             {
               className: "flex flex-wrap items-center gap-1",
               "data-testid": `product-variant-attribute-${attribute.id}-${row.original.id}`,
-              children: matches.map((value) => /* @__PURE__ */ jsx8(Tooltip4, { content: value.name, children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx8(Tooltip4, { content: variantOpt.value, children: /* @__PURE__ */ jsx8(
                 Badge3,
                 {
                   size: "2xsmall",
-                  title: value.name,
+                  title: variantOpt.value,
                   className: "inline-flex min-w-[20px] max-w-[140px] items-center justify-center overflow-hidden truncate",
-                  "data-testid": `product-variant-attribute-badge-${attribute.id}-${row.original.id}-${value.name}`,
-                  children: value.name
+                  "data-testid": `product-variant-attribute-badge-${attribute.id}-${row.original.id}-${variantOpt.value}`,
+                  children: variantOpt.value
                 }
-              ) }, value.id))
+              ) })
             }
           );
         }
@@ -1495,7 +1636,7 @@ var useColumns = (product) => {
       const variant = ctx.row.original;
       const mainActions = [
         {
-          icon: /* @__PURE__ */ jsx8(PencilSquare4, {}),
+          icon: /* @__PURE__ */ jsx8(PencilSquare5, {}),
           label: t("actions.edit"),
           onClick: (row) => {
             navigate(
@@ -1516,38 +1657,6 @@ var useColumns = (product) => {
           onClick: () => handleDelete(variant.id, variant.title)
         }
       ];
-      const inventoryItemsCount = variant.inventory_items?.length || 0;
-      switch (inventoryItemsCount) {
-        case 0:
-          break;
-        case 1: {
-          const inventoryItemLink = `/inventory/${variant.inventory_items[0].inventory.id}`;
-          mainActions.push({
-            label: t("products.variant.inventory.actions.inventoryItems"),
-            onClick: () => {
-              navigate(inventoryItemLink);
-            },
-            icon: /* @__PURE__ */ jsx8(Buildings, {})
-          });
-          break;
-        }
-        default: {
-          const ids = variant.inventory_items?.map((i) => i.inventory?.id);
-          if (!ids || ids.length === 0) {
-            break;
-          }
-          const inventoryKitLink = `/inventory?${new URLSearchParams({
-            id: ids.join(",")
-          }).toString()}`;
-          mainActions.push({
-            label: t("products.variant.inventory.actions.inventoryKit"),
-            onClick: () => {
-              navigate(inventoryKitLink);
-            },
-            icon: /* @__PURE__ */ jsx8(Component, {})
-          });
-        }
-      }
       return [mainActions, secondaryActions];
     },
     [handleDelete, navigate, t, tableSearchParams]
@@ -1560,14 +1669,20 @@ var useColumns = (product) => {
         sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
         sortDescLabel: t("filters.sorting.alphabeticallyDesc")
       }),
-      ...optionColumns,
+      columnHelper.accessor("sku", {
+        header: t("fields.sku"),
+        cell: ({ getValue }) => {
+          const value = getValue();
+          return value ? value : /* @__PURE__ */ jsx8("span", { className: "text-ui-fg-muted", children: "-" });
+        }
+      }),
       ...attributeColumns,
       ...dateColumns,
       columnHelper.action({
         actions: getActions
       })
     ];
-  }, [t, optionColumns, attributeColumns, dateColumns, getActions]);
+  }, [t, attributeColumns, dateColumns, getActions]);
 };
 var useFilters = () => {
   const dateFilters = useDataTableDateFilters();
@@ -1577,25 +1692,9 @@ var useFilters = () => {
     ];
   }, [dateFilters]);
 };
-var commandHelper = createDataTableCommandHelper();
-var useCommands = () => {
-  const { t } = useTranslation8();
-  const navigate = useNavigate2();
-  return [
-    commandHelper.command({
-      label: t("inventory.stock.action"),
-      shortcut: "i",
-      action: async (selection) => {
-        navigate(
-          `stock?${PRODUCT_VARIANT_IDS_KEY}=${Object.keys(selection).join(",")}`
-        );
-      }
-    })
-  ];
-};
 
 // src/pages/products/product-detail/product-detail.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var Root = ({ children }) => {
   const initialData = useLoaderData();
   const { id } = useParams();
@@ -1631,7 +1730,7 @@ var Root = ({ children }) => {
       "data-testid": "product-detail-page",
       children
     }
-  ) : /* @__PURE__ */ jsxs8(
+  ) : /* @__PURE__ */ jsxs9(
     TwoColumnPage,
     {
       data: product,
@@ -1639,14 +1738,14 @@ var Root = ({ children }) => {
       showMetadata: true,
       "data-testid": "product-detail-page",
       children: [
-        /* @__PURE__ */ jsxs8(TwoColumnPage.Main, { "data-testid": "product-detail-main", children: [
+        /* @__PURE__ */ jsxs9(TwoColumnPage.Main, { "data-testid": "product-detail-main", children: [
           /* @__PURE__ */ jsx9(ProductActiveRequestSection, { product }),
           /* @__PURE__ */ jsx9(ProductActiveEditSection, { product }),
           /* @__PURE__ */ jsx9(ProductGeneralSection, { product }),
           /* @__PURE__ */ jsx9(ProductMediaSection, { product }),
           /* @__PURE__ */ jsx9(ProductVariantSection, { product })
         ] }),
-        /* @__PURE__ */ jsxs8(TwoColumnPage.Sidebar, { "data-testid": "product-detail-sidebar", children: [
+        /* @__PURE__ */ jsxs9(TwoColumnPage.Sidebar, { "data-testid": "product-detail-sidebar", children: [
           /* @__PURE__ */ jsx9(ProductOrganizationSection, { product }),
           /* @__PURE__ */ jsx9(ProductAttributeSection, { product })
         ] })