@mercurjs/admin 2.2.0-canary.29 → 2.2.0-canary.30

package/dist/{chunk-4UWPTSZK.js → chunk-GX7OEF7F.js}

@@ -1,18 +1,12 @@
 import {
   ProductMediaSection
-} from "./chunk-AWLDIHXR.js";
+} from "./chunk-27PAP64U.js";
 import {
   SectionRow
 } from "./chunk-3XPXUIK3.js";
-import {
-  useDataTableDateColumns
-} from "./chunk-UKLRBS4W.js";
-import {
-  useDataTableDateFilters
-} from "./chunk-DGCPYCHU.js";
 import {
   PRODUCT_DETAIL_QUERY
-} from "./chunk-GVEF6UDT.js";
+} from "./chunk-46MOMKPW.js";
 import {
   TwoColumnPage
 } from "./chunk-E74OUNA3.js";
@@ -20,36 +14,21 @@ import {
   Thumbnail
 } from "./chunk-WIYFXWRI.js";
 import {
-  DataTable
-} from "./chunk-C4XKPQ6T.js";
+  _DataTable,
+  useDataTable
+} from "./chunk-JGCGVEFZ.js";
 import {
   useQueryParams
 } from "./chunk-THHRRYRS.js";
 import {
   require_dist
-} from "./chunk-6FLSBL4Q.js";
-import {
-  useProductTag
-} from "./chunk-PJR6W35H.js";
-import {
-  productAttributesQueryKeys,
-  useProductAttribute
-} from "./chunk-533GMKEG.js";
-import {
-  useProductType
-} from "./chunk-46M463BR.js";
-import {
-  useCollection
-} from "./chunk-QKJGSZI2.js";
+} from "./chunk-YZBEJ3CY.js";
 import {
   useSeller
 } from "./chunk-LEG67A2R.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
-import {
-  useProductCategory
-} from "./chunk-KYFWVLWO.js";
 import {
   TwoColumnPageSkeleton
 } from "./chunk-INNFZYX2.js";
@@ -64,9 +43,8 @@ import {
   useProductVariants,
   useRejectProduct,
   useRemoveAttributeFromProduct,
-  useRequestProductChanges,
-  variantsQueryKeys
-} from "./chunk-M2E3PKA4.js";
+  useRequestProductChanges
+} from "./chunk-AM5XDEIN.js";
 import {
   sdk
 } from "./chunk-ZBWL72TB.js";
@@ -80,19 +58,11 @@ import { useLoaderData, useParams } from "react-router-dom";
 
 // src/pages/products/product-detail/components/product-active-edit-section/product-active-edit-section.tsx
 var import_types = __toESM(require_dist(), 1);
-import { Fragment, useMemo, useState as useState2 } from "react";
-import { ExclamationCircleSolid } from "@medusajs/icons";
-import { Button, Container, Heading, Text, toast } from "@medusajs/ui";
+import { useState as useState2 } from "react";
+import { Button, Text, toast } from "@medusajs/ui";
 import {
-  describeProductChangeAction,
-  extractReferenceIds,
-  formatFieldValue,
-  humanizeFieldName,
-  isImageList,
-  isReferenceField,
-  partitionProductChangeActions
+  ProductChangePanel
 } from "@mercurjs/dashboard-shared";
-import { useQueries } from "@tanstack/react-query";
 import { useTranslation as useTranslation2 } from "react-i18next";
 
 // src/components/common/confirm-prompt/confirm-prompt.tsx
@@ -175,256 +145,49 @@ 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";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var VARIANT_LOOKUP_FIELDS = "id,title,sku,*images";
-var ImageStrip = ({
-  images,
-  faded
-}) => /* @__PURE__ */ jsx2(
-  "div",
-  {
-    className: faded ? "flex items-center gap-1.5 opacity-50" : "flex items-center gap-1.5",
-    children: images.map((image, idx) => /* @__PURE__ */ jsx2(Thumbnail, { src: image.url, size: "base" }, `${image.url}-${idx}`))
-  }
-);
-var TypeName = ({ id }) => {
-  const { product_type } = useProductType(id);
-  return /* @__PURE__ */ jsx2(Fragment2, { children: product_type?.value ?? id });
-};
-var CollectionName = ({ id }) => {
-  const { collection } = useCollection(id);
-  return /* @__PURE__ */ jsx2(Fragment2, { children: collection?.title ?? id });
-};
-var CategoryName = ({ id }) => {
-  const { product_category } = useProductCategory(id);
-  return /* @__PURE__ */ jsx2(Fragment2, { children: product_category?.name ?? id });
-};
-var TagName = ({ id }) => {
-  const { product_tag } = useProductTag(id);
-  return /* @__PURE__ */ jsx2(Fragment2, { children: product_tag?.value ?? id });
-};
-var ReferenceName = ({
-  field,
-  id
-}) => {
-  switch (field) {
-    case "type_id":
-      return /* @__PURE__ */ jsx2(TypeName, { id });
-    case "collection_id":
-      return /* @__PURE__ */ jsx2(CollectionName, { id });
-    case "categories":
-      return /* @__PURE__ */ jsx2(CategoryName, { id });
-    case "tags":
-      return /* @__PURE__ */ jsx2(TagName, { id });
-  }
-};
-var ReferenceList = ({
-  field,
-  ids
-}) => {
-  if (!ids.length) return /* @__PURE__ */ jsx2(Fragment2, { children: "-" });
-  return /* @__PURE__ */ jsx2(Fragment2, { children: ids.map((id, idx) => /* @__PURE__ */ jsxs2(Fragment, { children: [
-    idx > 0 && ", ",
-    /* @__PURE__ */ jsx2(ReferenceName, { field, id })
-  ] }, `${field}-${id}`)) });
-};
-var FieldRow = ({ diff }) => {
-  const { t } = useTranslation2();
-  const hasPrevious = diff.previous !== void 0 && diff.previous !== null && diff.previous !== "" && !(Array.isArray(diff.previous) && diff.previous.length === 0);
-  const nextIsImages = isImageList(diff.next);
-  const previousIsImages = isImageList(diff.previous);
-  const renderAsImages = nextIsImages || previousIsImages;
-  const renderAsReference = isReferenceField(diff.field);
-  return /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4", children: [
-    /* @__PURE__ */ jsx2(
-      Text,
-      {
-        size: "small",
-        weight: "plus",
-        leading: "compact",
-        className: "text-ui-fg-subtle w-[160px] shrink-0",
-        children: t(`fields.${diff.field}`, {
-          defaultValue: humanizeFieldName(diff.field)
-        })
-      }
-    ),
-    renderAsImages ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [
-      hasPrevious && previousIsImages && /* @__PURE__ */ jsx2(ImageStrip, { images: diff.previous, faded: true }),
-      hasPrevious && /* @__PURE__ */ jsx2(
-        Text,
-        {
-          size: "small",
-          leading: "compact",
-          className: "text-ui-fg-subtle",
-          children: "\u2192"
-        }
-      ),
-      nextIsImages ? /* @__PURE__ */ jsx2(ImageStrip, { images: diff.next }) : /* @__PURE__ */ jsx2(
-        Text,
-        {
-          size: "small",
-          leading: "compact",
-          className: "text-ui-fg-subtle",
-          children: formatFieldValue(diff.next, diff.field)
-        }
-      )
-    ] }) : renderAsReference ? /* @__PURE__ */ jsxs2(
-      Text,
-      {
-        size: "small",
-        leading: "compact",
-        className: "text-ui-fg-subtle flex-1 whitespace-pre-line text-pretty",
-        children: [
-          hasPrevious && /* @__PURE__ */ jsx2("span", { className: "line-through", children: /* @__PURE__ */ jsx2(
-            ReferenceList,
-            {
-              field: diff.field,
-              ids: extractReferenceIds(
-                diff.field,
-                diff.previous
-              )
-            }
-          ) }),
-          hasPrevious && " \u2192 ",
-          /* @__PURE__ */ jsx2(
-            ReferenceList,
-            {
-              field: diff.field,
-              ids: extractReferenceIds(diff.field, diff.next)
-            }
-          )
-        ]
-      }
-    ) : /* @__PURE__ */ jsxs2(
-      Text,
-      {
-        size: "small",
-        leading: "compact",
-        className: "text-ui-fg-subtle flex-1 whitespace-pre-line text-pretty",
-        children: [
-          hasPrevious && /* @__PURE__ */ jsx2("span", { className: "line-through", children: formatFieldValue(diff.previous, diff.field) }),
-          hasPrevious && " \u2192 ",
-          formatFieldValue(diff.next, diff.field)
-        ]
-      }
-    )
-  ] });
-};
-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 });
+var resolversFor = (productId) => ({
+  getType: async (id) => {
+    const { product_type } = await sdk.admin.productTypes.$id.query({ $id: id });
+    return product_type?.value ?? null;
+  },
+  getCollection: async (id) => {
+    const { collection } = await sdk.admin.collections.$id.query({ $id: id });
+    return collection?.title ?? null;
+  },
+  getCategory: async (id) => {
+    const { product_category } = await sdk.admin.productCategories.$id.query({
+      $id: id
+    });
+    return product_category?.name ?? null;
+  },
+  getTag: async (id) => {
+    const { product_tag } = await sdk.admin.productTags.$id.query({ $id: id });
+    return product_tag?.value ?? null;
+  },
+  getAttribute: async (id) => {
+    const { product_attribute } = await sdk.admin.productAttributes.$id.query({
+      $id: id
+    });
+    if (!product_attribute) return null;
+    return {
+      name: product_attribute.name ?? id,
+      values: (product_attribute.values ?? []).map((v) => ({
+        id: v.id,
+        name: v.name ?? v.id
+      }))
+    };
+  },
+  getVariant: async (variantId) => {
+    const { variant } = await sdk.admin.products.$id.variants.$variantId.query({
+      $id: productId,
+      $variantId: variantId,
+      fields: VARIANT_LOOKUP_FIELDS
+    });
+    return variant ?? null;
   }
-  const label = describeProductChangeAction(action, {
-    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
 }) => {
@@ -440,84 +203,12 @@ var ProductActiveEditSection = ({
   });
   const { mutateAsync: confirmChange, isPending: isConfirming } = useConfirmProductChange(product_change?.id ?? "", product.id);
   const { mutateAsync: cancelChange, isPending: isRejecting } = useCancelProductChange(product_change?.id ?? "", product.id);
-  const { updated, added, removed, deleteRequested } = useMemo(
-    () => 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;
   }
-  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 });
@@ -536,172 +227,84 @@ var ProductActiveEditSection = ({
       toast.error(e.message);
     }
   };
-  return /* @__PURE__ */ jsxs2(
-    Container,
-    {
-      className: "divide-y p-0",
-      "data-testid": "product-active-edit-section",
-      children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-6 py-4", children: [
-          /* @__PURE__ */ jsx2(ExclamationCircleSolid, { className: "text-ui-fg-interactive" }),
-          /* @__PURE__ */ jsx2(Heading, { level: "h2", "data-testid": "product-active-edit-heading", children: t("products.edits.panel.title") })
-        ] }),
-        /* @__PURE__ */ jsx2("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("products.edits.panel.description", {
+  const panelProduct = {
+    id: product.id,
+    title: product.title,
+    thumbnail: product.thumbnail,
+    variants: product.variants,
+    attributes: product.attributes
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      ProductChangePanel,
+      {
+        product: panelProduct,
+        actions: product_change.actions ?? [],
+        resolvers: resolversFor(product.id),
+        headerDescription: /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("products.edits.panel.description", {
           store: requesterSeller?.name ?? t("products.request.fallbackStore")
-        }) }) }),
-        hasContent && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          productUpdated.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: productUpdated.map((diff, idx) => /* @__PURE__ */ jsx2(FieldRow, { diff }, `${diff.field}-${idx}`)) })
-          ] }),
-          variantsUpdated.size > 0 && Array.from(variantsUpdated.entries()).map(([variantId, diffs]) => /* @__PURE__ */ jsx2(
-            VariantUpdateBlock,
+        }) }),
+        footer: /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2(
+            Button,
             {
-              variantId,
-              diffs,
-              variantsById
-            },
-            variantId
-          )),
-          added.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.added")
-              }
-            ),
-            /* @__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(
-              Text,
-              {
-                size: "small",
-                weight: "plus",
-                leading: "compact",
-                className: "text-ui-fg-subtle w-[160px] shrink-0",
-                children: t("labels.removed")
-              }
-            ),
-            /* @__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(
-              Text,
-              {
-                size: "small",
-                weight: "plus",
-                leading: "compact",
-                className: "text-ui-fg-subtle w-[160px] shrink-0",
-                children: t("labels.removed")
-              }
-            ),
-            /* @__PURE__ */ jsx2(
-              Text,
-              {
-                size: "small",
-                leading: "compact",
-                className: "text-ui-fg-subtle flex-1",
-                children: t("products.edits.panel.deleteRequested")
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs2(
-          "div",
-          {
-            className: "bg-ui-bg-subtle flex items-center justify-end gap-x-2 rounded-b-xl px-6 py-4",
-            "data-testid": "product-active-edit-actions",
-            children: [
-              /* @__PURE__ */ jsx2(
-                Button,
-                {
-                  size: "small",
-                  variant: "secondary",
-                  onClick: () => setConfirmOpen(true),
-                  "data-testid": "product-active-edit-confirm-button",
-                  children: t("actions.confirm")
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                Button,
-                {
-                  size: "small",
-                  variant: "secondary",
-                  onClick: () => setRejectOpen(true),
-                  "data-testid": "product-active-edit-reject-button",
-                  children: t("products.edits.actions.reject")
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          ConfirmPrompt,
-          {
-            open: confirmOpen,
-            onOpenChange: setConfirmOpen,
-            title: t("products.edits.confirmPrompt.title"),
-            description: t("products.edits.confirmPrompt.description"),
-            noteLabel: t("products.edits.confirmPrompt.noteLabel"),
-            noteOptional: true,
-            notePlaceholder: t("products.edits.confirmPrompt.notePlaceholder"),
-            isLoading: isConfirming,
-            onConfirm: handleConfirm
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          ConfirmPrompt,
-          {
-            open: rejectOpen,
-            onOpenChange: setRejectOpen,
-            title: t("products.edits.rejectPrompt.title"),
-            description: t("products.edits.rejectPrompt.description"),
-            noteLabel: t("products.edits.rejectPrompt.noteLabel"),
-            noteOptional: true,
-            notePlaceholder: t("products.edits.rejectPrompt.notePlaceholder"),
-            confirmLabel: t("products.edits.rejectPrompt.confirm"),
-            isLoading: isRejecting,
-            onConfirm: handleReject
-          }
-        )
-      ]
-    }
-  );
+              size: "small",
+              variant: "secondary",
+              onClick: () => setConfirmOpen(true),
+              "data-testid": "product-active-edit-confirm-button",
+              children: t("actions.confirm")
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            Button,
+            {
+              size: "small",
+              variant: "secondary",
+              onClick: () => setRejectOpen(true),
+              "data-testid": "product-active-edit-reject-button",
+              children: t("products.edits.actions.reject")
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      ConfirmPrompt,
+      {
+        open: confirmOpen,
+        onOpenChange: setConfirmOpen,
+        title: t("products.edits.confirmPrompt.title"),
+        description: t("products.edits.confirmPrompt.description"),
+        noteLabel: t("products.edits.confirmPrompt.noteLabel"),
+        noteOptional: true,
+        notePlaceholder: t("products.edits.confirmPrompt.notePlaceholder"),
+        isLoading: isConfirming,
+        onConfirm: handleConfirm
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      ConfirmPrompt,
+      {
+        open: rejectOpen,
+        onOpenChange: setRejectOpen,
+        title: t("products.edits.rejectPrompt.title"),
+        description: t("products.edits.rejectPrompt.description"),
+        noteLabel: t("products.edits.rejectPrompt.noteLabel"),
+        noteOptional: true,
+        notePlaceholder: t("products.edits.rejectPrompt.notePlaceholder"),
+        confirmLabel: t("products.edits.rejectPrompt.confirm"),
+        isLoading: isRejecting,
+        onConfirm: handleReject
+      }
+    )
+  ] });
 };
 
 // src/pages/products/product-detail/components/product-active-request-section/product-active-request-section.tsx
 var import_types2 = __toESM(require_dist(), 1);
 import { useState as useState3 } from "react";
-import { Button as Button2, Container as Container2, Heading as Heading2, Text as Text2, toast as toast2 } from "@medusajs/ui";
-import { ExclamationCircleSolid as ExclamationCircleSolid2 } from "@medusajs/icons";
+import { Button as Button2, Container, Heading, Text as Text2, toast as toast2 } from "@medusajs/ui";
+import { ExclamationCircleSolid } from "@medusajs/icons";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var ProductActiveRequestSection = ({
@@ -745,7 +348,7 @@ var ProductActiveRequestSection = ({
     }
   };
   return /* @__PURE__ */ jsxs3(
-    Container2,
+    Container,
     {
       className: "divide-y p-0",
       "data-testid": "product-active-request-section",
@@ -756,8 +359,8 @@ var ProductActiveRequestSection = ({
             className: "flex items-center gap-2 px-6 py-4",
             "data-testid": "product-active-request-header",
             children: [
-              /* @__PURE__ */ jsx3(ExclamationCircleSolid2, { className: "text-ui-fg-interactive" }),
-              /* @__PURE__ */ jsx3(Heading2, { level: "h2", "data-testid": "product-active-request-heading", children: t("products.request.panel.title") })
+              /* @__PURE__ */ jsx3(ExclamationCircleSolid, { className: "text-ui-fg-interactive" }),
+              /* @__PURE__ */ jsx3(Heading, { level: "h2", "data-testid": "product-active-request-heading", children: t("products.request.panel.title") })
             ]
           }
         ),
@@ -866,8 +469,8 @@ import {
 } from "@medusajs/icons";
 import {
   Badge,
-  Container as Container3,
-  Heading as Heading3,
+  Container as Container2,
+  Heading as Heading2,
   Text as Text3,
   toast as toast3,
   Tooltip,
@@ -913,17 +516,17 @@ var AttributeActions = ({
             }
           ]
         },
-        {
-          actions: [
-            {
-              label: t("actions.delete"),
-              onClick: handleDelete,
-              icon: /* @__PURE__ */ jsx4(Trash, {}),
-              disabled: attribute.is_required,
-              disabledTooltip: attribute.is_required ? t("products.attributeRequiredDeleteDisabledTooltip") : void 0
-            }
-          ]
-        }
+        ...attribute.is_required ? [] : [
+          {
+            actions: [
+              {
+                label: t("actions.delete"),
+                onClick: handleDelete,
+                icon: /* @__PURE__ */ jsx4(Trash, {})
+              }
+            ]
+          }
+        ]
       ]
     }
   );
@@ -973,7 +576,9 @@ var AttributeGroup = ({
                 size: "small",
                 leading: "compact",
                 className: "text-ui-fg-subtle",
-                children: values.join(", ") || "-"
+                children: attr.type === "toggle" ? values.map(
+                  (val) => val === "true" ? t("general.yes") : t("general.no")
+                ).join(", ") || "-" : values.join(", ") || "-"
               }
             ) }),
             /* @__PURE__ */ jsx4(AttributeActions, { productId, attribute: attr })
@@ -992,13 +597,13 @@ var ProductAttributeSection = ({
   const variantAttributes = allAttributes.filter((a) => a.is_variant_axis);
   const infoAttributes = allAttributes.filter((a) => !a.is_variant_axis);
   const isEmpty = !variantAttributes.length && !infoAttributes.length;
-  return /* @__PURE__ */ jsxs4(Container3, { className: "p-0", children: [
+  return /* @__PURE__ */ jsxs4(Container2, { className: "p-0", children: [
     /* @__PURE__ */ jsxs4(
       "div",
       {
         className: `flex items-center justify-between px-6 py-4${isEmpty ? "" : " border-b border-ui-border-base"}`,
         children: [
-          /* @__PURE__ */ jsx4(Heading3, { level: "h2", children: t("products.attributes") }),
+          /* @__PURE__ */ jsx4(Heading2, { level: "h2", children: t("products.attributes") }),
           /* @__PURE__ */ jsx4(
             ActionMenu,
             {
@@ -1049,7 +654,7 @@ var ProductAttributeSection = ({
 
 // src/pages/products/product-detail/components/product-general-section/product-general-section.tsx
 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 { Container as Container3, Heading as Heading3, StatusBadge, usePrompt as usePrompt2 } from "@medusajs/ui";
 import { useTranslation as useTranslation5 } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1092,14 +697,14 @@ var ProductGeneralSection = ({
       }
     });
   };
-  return /* @__PURE__ */ jsxs5(Container4, { className: "divide-y p-0", "data-testid": "product-general-section", children: [
+  return /* @__PURE__ */ jsxs5(Container3, { className: "divide-y p-0", "data-testid": "product-general-section", children: [
     /* @__PURE__ */ jsxs5(
       "div",
       {
         className: "flex items-center justify-between px-6 py-4",
         "data-testid": "product-general-header",
         children: [
-          /* @__PURE__ */ jsx5(Heading4, { "data-testid": "product-general-title", children: product.title }),
+          /* @__PURE__ */ jsx5(Heading3, { "data-testid": "product-general-title", children: product.title }),
           /* @__PURE__ */ jsxs5(
             "div",
             {
@@ -1183,7 +788,7 @@ var ProductGeneralSection = ({
 
 // src/pages/products/product-detail/components/product-organization-section/product-organization-section.tsx
 import { PencilSquare as PencilSquare3 } from "@medusajs/icons";
-import { Badge as Badge2, Container as Container5, Heading as Heading5, Tooltip as Tooltip2 } from "@medusajs/ui";
+import { Badge as Badge2, Container as Container4, Heading as Heading4, Tooltip as Tooltip2 } from "@medusajs/ui";
 import { useTranslation as useTranslation6 } from "react-i18next";
 import { Link } from "react-router-dom";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -1192,7 +797,7 @@ var ProductOrganizationSection = ({
 }) => {
   const { t } = useTranslation6();
   return /* @__PURE__ */ jsxs6(
-    Container5,
+    Container4,
     {
       className: "divide-y p-0",
       "data-testid": "product-organization-section",
@@ -1203,7 +808,7 @@ var ProductOrganizationSection = ({
             className: "flex items-center justify-between px-6 py-4",
             "data-testid": "product-organization-header",
             children: [
-              /* @__PURE__ */ jsx6(Heading5, { level: "h2", "data-testid": "product-organization-title", children: t("products.organization.header") }),
+              /* @__PURE__ */ jsx6(Heading4, { level: "h2", "data-testid": "product-organization-title", children: t("products.organization.header") }),
               /* @__PURE__ */ jsx6(
                 ActionMenu,
                 {
@@ -1298,18 +903,19 @@ 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 { useCallback, useMemo } from "react";
 import { PencilSquare as PencilSquare4, Trash as Trash3 } from "@medusajs/icons";
 import {
   Badge as Badge3,
   Button as Button3,
-  Container as Container6,
-  createDataTableColumnHelper,
-  Heading as Heading6,
+  Container as Container5,
+  Heading as Heading5,
+  toast as toast4,
   Tooltip as Tooltip3,
   usePrompt as usePrompt3
 } from "@medusajs/ui";
 import { keepPreviousData } from "@tanstack/react-query";
+import { createColumnHelper } from "@tanstack/react-table";
 import { useTranslation as useTranslation7 } from "react-i18next";
 import { Link as Link2, useNavigate as useNavigate2, useSearchParams } from "react-router-dom";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -1323,9 +929,7 @@ var ProductVariantSection = ({
     ["q", "order", "offset", "created_at", "updated_at"],
     PREFIX
   );
-  const columns = useColumns(product);
-  const filters = useFilters();
-  const { variants, count, isPending, isError, error } = useProductVariants(
+  const { variants, count, isLoading, isError, error } = useProductVariants(
     product.id,
     {
       q,
@@ -1340,12 +944,23 @@ var ProductVariantSection = ({
       placeholderData: keepPreviousData
     }
   );
+  const columns = useColumns(product);
+  const filters = useFilters();
+  const orderBy = useOrderBy();
+  const { table } = useDataTable({
+    data: variants ?? [],
+    columns,
+    count,
+    pageSize: PAGE_SIZE,
+    getRowId: (row) => row.id,
+    prefix: PREFIX
+  });
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs7(Container6, { className: "p-0", "data-testid": "product-variant-section", children: [
+  return /* @__PURE__ */ jsxs7(Container5, { className: "divide-y p-0", "data-testid": "product-variant-section", children: [
     /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx7(Heading6, { level: "h2", children: t("products.variants.header") }),
+      /* @__PURE__ */ jsx7(Heading5, { level: "h2", children: t("products.variants.header") }),
       /* @__PURE__ */ jsx7(
         Button3,
         {
@@ -1357,40 +972,37 @@ var ProductVariantSection = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx7("div", { "data-testid": "product-variants-table-container", children: /* @__PURE__ */ jsx7(
-      DataTable,
+    /* @__PURE__ */ jsx7(
+      _DataTable,
       {
-        data: variants,
+        table,
         columns,
-        filters,
-        rowCount: count,
-        getRowId: (row) => row.id,
-        rowHref: (row) => `/products/${product.id}/variants/${row.id}`,
+        count,
         pageSize: PAGE_SIZE,
-        isLoading: isPending,
-        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")
-          }
-        },
-        prefix: PREFIX
+        filters,
+        search: true,
+        pagination: true,
+        isLoading,
+        orderBy,
+        prefix: PREFIX,
+        queryObject: { q, order, created_at, updated_at },
+        navigateTo: (row) => `variants/${row.original.id}`,
+        noRecords: {
+          title: t("products.variants.empty.heading"),
+          message: t("products.variants.empty.description")
+        }
       }
-    ) })
+    )
   ] });
 };
-var columnHelper = createDataTableColumnHelper();
+var columnHelper = createColumnHelper();
 var useColumns = (product) => {
   const { t } = useTranslation7();
   const navigate = useNavigate2();
   const { mutateAsync } = useDeleteVariantLazy(product.id);
   const prompt = usePrompt3();
   const [searchParams] = useSearchParams();
-  const tableSearchParams = useMemo2(() => {
+  const tableSearchParams = useMemo(() => {
     const filtered = new URLSearchParams();
     for (const [key, value] of searchParams.entries()) {
       if (key.startsWith(`${PREFIX}_`)) {
@@ -1399,7 +1011,6 @@ var useColumns = (product) => {
     }
     return filtered;
   }, [searchParams]);
-  const dateColumns = useDataTableDateColumns();
   const handleDelete = useCallback(
     async (id, title) => {
       const res = await prompt({
@@ -1413,11 +1024,18 @@ var useColumns = (product) => {
       if (!res) {
         return;
       }
-      await mutateAsync({ variantId: id });
+      await mutateAsync(
+        { variantId: id },
+        {
+          onError: (error) => {
+            toast4.error(error.message);
+          }
+        }
+      );
     },
     [mutateAsync, prompt, t]
   );
-  const attributeColumns = useMemo2(() => {
+  const attributeColumns = useMemo(() => {
     const variantAttributes = product?.attributes?.filter((attr) => attr.is_variant_axis);
     if (!variantAttributes?.length) {
       return [];
@@ -1454,45 +1072,21 @@ var useColumns = (product) => {
       });
     });
   }, [product]);
-  const getActions = useCallback(
-    (ctx) => {
-      const variant = ctx.row.original;
-      const mainActions = [
-        {
-          icon: /* @__PURE__ */ jsx7(PencilSquare4, {}),
-          label: t("actions.edit"),
-          onClick: (row) => {
-            navigate(
-              `edit-variant?variant_id=${row.row.original.id}&${tableSearchParams.toString()}`,
-              {
-                state: {
-                  restore_params: tableSearchParams.toString()
-                }
-              }
-            );
-          }
-        }
-      ];
-      const secondaryActions = [
-        {
-          icon: /* @__PURE__ */ jsx7(Trash3, {}),
-          label: t("actions.delete"),
-          onClick: () => handleDelete(variant.id, variant.title)
-        }
-      ];
-      return [mainActions, secondaryActions];
-    },
-    [handleDelete, navigate, t, tableSearchParams]
-  );
-  return useMemo2(() => {
-    return [
+  return useMemo(
+    () => [
       columnHelper.accessor("title", {
+        id: "title",
         header: t("fields.title"),
-        enableSorting: true,
-        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
-        sortDescLabel: t("filters.sorting.alphabeticallyDesc")
+        cell: ({ getValue }) => {
+          const value = getValue();
+          return /* @__PURE__ */ jsxs7("div", { className: "flex h-full w-full max-w-[250px] items-center gap-x-3 overflow-hidden", children: [
+            /* @__PURE__ */ jsx7("div", { className: "w-fit flex-shrink-0", children: /* @__PURE__ */ jsx7(Thumbnail, { src: product.thumbnail }) }),
+            value ? /* @__PURE__ */ jsx7("span", { title: value, className: "truncate", children: value }) : /* @__PURE__ */ jsx7("span", { className: "text-ui-fg-muted", children: "-" })
+          ] });
+        }
       }),
       columnHelper.accessor("sku", {
+        id: "sku",
         header: t("fields.sku"),
         cell: ({ getValue }) => {
           const value = getValue();
@@ -1500,20 +1094,64 @@ var useColumns = (product) => {
         }
       }),
       ...attributeColumns,
-      ...dateColumns,
-      columnHelper.action({
-        actions: getActions
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => /* @__PURE__ */ jsx7(
+          ActionMenu,
+          {
+            groups: [
+              {
+                actions: [
+                  {
+                    icon: /* @__PURE__ */ jsx7(PencilSquare4, {}),
+                    label: t("actions.edit"),
+                    onClick: () => navigate(
+                      `edit-variant?variant_id=${row.original.id}&${tableSearchParams.toString()}`,
+                      {
+                        state: {
+                          restore_params: tableSearchParams.toString()
+                        }
+                      }
+                    )
+                  }
+                ]
+              },
+              {
+                actions: [
+                  {
+                    icon: /* @__PURE__ */ jsx7(Trash3, {}),
+                    label: t("actions.delete"),
+                    onClick: () => handleDelete(row.original.id, row.original.title ?? "")
+                  }
+                ]
+              }
+            ]
+          }
+        )
       })
-    ];
-  }, [t, attributeColumns, dateColumns, getActions]);
+    ],
+    [t, attributeColumns, navigate, handleDelete, tableSearchParams, product]
+  );
 };
 var useFilters = () => {
-  const dateFilters = useDataTableDateFilters();
-  return useMemo2(() => {
-    return [
-      ...dateFilters
-    ];
-  }, [dateFilters]);
+  const { t } = useTranslation7();
+  return useMemo(
+    () => [
+      { key: "created_at", label: t("fields.createdAt"), type: "date" },
+      { key: "updated_at", label: t("fields.updatedAt"), type: "date" }
+    ],
+    [t]
+  );
+};
+var useOrderBy = () => {
+  const { t } = useTranslation7();
+  return useMemo(
+    () => [
+      { key: "title", label: t("fields.title") },
+      { key: "sku", label: t("fields.sku") }
+    ],
+    [t]
+  );
 };
 
 // src/pages/products/product-detail/product-detail.tsx