@mercurjs/admin 2.0.0-canary.27 → 2.0.0-canary.30

package/dist/{seller-details-MSDVT5IO.js → seller-details-4TOSFX3P.js}

@@ -2,11 +2,12 @@ import {
   require_dist
 } from "./chunk-NWQRHWE5.js";
 import {
-  DateCell
-} from "./chunk-25LYVP3C.js";
-import {
-  getStylizedAmount
-} from "./chunk-PXYDR7WQ.js";
+  useOrderTableColumns
+} from "./chunk-BRUOBAPY.js";
+import "./chunk-25LYVP3C.js";
+import "./chunk-LQSLDDPT.js";
+import "./chunk-2Y3WMGN6.js";
+import "./chunk-PXYDR7WQ.js";
 import {
   ProductStatusCell
 } from "./chunk-G5OVX555.js";
@@ -24,39 +25,39 @@ import {
   Thumbnail
 } from "./chunk-WIYFXWRI.js";
 import "./chunk-IQPN4PZJ.js";
-import "./chunk-6KI3GDYH.js";
-import "./chunk-2ZFELO2L.js";
-import "./chunk-26OOAKQ6.js";
-import "./chunk-ZQZHFMD7.js";
-import "./chunk-ZGQV4I7U.js";
+import "./chunk-SXC5ZMLI.js";
 import "./chunk-MG4GKUJW.js";
 import "./chunk-AYVH6Q5O.js";
 import "./chunk-VOHEQ7B5.js";
+import "./chunk-FMOQNZFZ.js";
+import "./chunk-2ZFELO2L.js";
+import "./chunk-26OOAKQ6.js";
 import "./chunk-N5IUYCUZ.js";
 import "./chunk-7SVLKK6Q.js";
+import "./chunk-ZQZHFMD7.js";
 import "./chunk-GR6JUIRU.js";
-import "./chunk-K3GJ266Z.js";
 import "./chunk-PVZBDWLK.js";
-import {
-  useOrderTableFilters
-} from "./chunk-GEVYE225.js";
+import "./chunk-K3GJ266Z.js";
 import {
   useOrderTableQuery
 } from "./chunk-O5HZRJPB.js";
-import "./chunk-CMHI2RPL.js";
+import {
+  useOrderTableFilters
+} from "./chunk-GEVYE225.js";
 import "./chunk-VKOE5J66.js";
+import "./chunk-CMHI2RPL.js";
 import "./chunk-DY3XQPHC.js";
 import "./chunk-S2WEYEQR.js";
-import {
-  useProductTableFilters
-} from "./chunk-PASXA3UX.js";
 import {
   useProductTableQuery
-} from "./chunk-KW56S7WF.js";
+} from "./chunk-VVWB3GIK.js";
+import {
+  useProductTableFilters
+} from "./chunk-7J3HKFZC.js";
 import "./chunk-KBYZLKI4.js";
 import "./chunk-YWWUOGJA.js";
 import {
-  SingleColumnPage
+  TwoColumnPage
 } from "./chunk-U2UCL2VG.js";
 import {
   SingleColumnPageSkeleton
@@ -69,22 +70,23 @@ import "./chunk-Y7QKP6QU.js";
 import "./chunk-THHRRYRS.js";
 import "./chunk-UZWFZMOX.js";
 import "./chunk-XQNVC4Q7.js";
-import "./chunk-QM2TMBP3.js";
+import "./chunk-KCCJYRBN.js";
 import "./chunk-ODBDAABQ.js";
 import "./chunk-CDQJKJMX.js";
 import "./chunk-JLATVDLM.js";
-import "./chunk-E7ZBQO6E.js";
 import "./chunk-GPRBBA7S.js";
+import "./chunk-E7ZBQO6E.js";
 import "./chunk-XGHM75N2.js";
 import "./chunk-U2GCSKW3.js";
-import "./chunk-LW3UWYZU.js";
 import "./chunk-RTAIDSDS.js";
+import "./chunk-LW3UWYZU.js";
+import "./chunk-A4X5VP3G.js";
 import "./chunk-NNZP4PYP.js";
-import "./chunk-JOQ3RTF5.js";
 import {
   useSeller,
   useUpdateSeller
 } from "./chunk-GF4QHVX3.js";
+import "./chunk-JOQ3RTF5.js";
 import "./chunk-V534K7G4.js";
 import "./chunk-A5XOYSDC.js";
 import "./chunk-TQI3DOQ5.js";
@@ -127,7 +129,7 @@ var SellerDetailBreadcrumb = (props) => {
 import { useParams } from "react-router-dom";
 
 // src/pages/sellers/seller-details/components/seller-general-section.tsx
-import { PencilSquare, User } from "@medusajs/icons";
+import { CheckCircleSolid, PencilSquare, User, XCircleSolid } from "@medusajs/icons";
 import {
   Container,
   Heading,
@@ -157,11 +159,28 @@ var SellerGeneralSection = ({
     [import_types.SellerStatus.SUSPENDED]: t("sellers.status.suspended")
   };
   const statusText = statusTextMap[seller.status] ?? t("sellers.status.pending");
-  const handleSuspend = async () => {
-    const isSuspended = seller.status === import_types.SellerStatus.SUSPENDED;
+  const handleStatusChange = async (newStatus) => {
+    const labels = {
+      [import_types.SellerStatus.ACTIVE]: {
+        title: "Activate account",
+        description: "Are you sure you want to activate this seller account?",
+        success: "Seller account activated"
+      },
+      [import_types.SellerStatus.SUSPENDED]: {
+        title: "Suspend account",
+        description: "Are you sure you want to suspend this seller account?",
+        success: "Seller account suspended"
+      },
+      [import_types.SellerStatus.PENDING]: {
+        title: "Set as pending",
+        description: "Are you sure you want to set this seller account as pending?",
+        success: "Seller account set to pending"
+      }
+    };
+    const label = labels[newStatus];
     const res = await prompt({
-      title: isSuspended ? t("sellers.status.active") : t("sellers.status.suspended"),
-      description: isSuspended ? "Are you sure you want to activate this account?" : "Are you sure you want to suspend this account?",
+      title: label.title,
+      description: label.description,
       verificationText: seller.email || seller.name || "",
       confirmText: t("actions.confirm"),
       cancelText: t("actions.cancel")
@@ -170,14 +189,10 @@ var SellerGeneralSection = ({
       return;
     }
     await updateSeller(
-      {
-        status: isSuspended ? import_types.SellerStatus.ACTIVE : import_types.SellerStatus.SUSPENDED
-      },
+      { status: newStatus },
       {
         onSuccess: () => {
-          toast.success(
-            isSuspended ? "Seller account activated" : "Seller account suspended"
-          );
+          toast.success(label.success);
         },
         onError: (error) => {
           toast.error(error.message);
@@ -185,6 +200,24 @@ var SellerGeneralSection = ({
       }
     );
   };
+  const statusActions = (() => {
+    const actions = [];
+    if (seller.status !== import_types.SellerStatus.ACTIVE) {
+      actions.push({
+        label: "Activate account",
+        onClick: () => handleStatusChange(import_types.SellerStatus.ACTIVE),
+        icon: /* @__PURE__ */ jsx2(CheckCircleSolid, {})
+      });
+    }
+    if (seller.status !== import_types.SellerStatus.SUSPENDED) {
+      actions.push({
+        label: "Suspend account",
+        onClick: () => handleStatusChange(import_types.SellerStatus.SUSPENDED),
+        icon: /* @__PURE__ */ jsx2(XCircleSolid, {})
+      });
+    }
+    return actions;
+  })();
   return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
@@ -214,13 +247,7 @@ var SellerGeneralSection = ({
                 ]
               },
               {
-                actions: [
-                  {
-                    label: seller.status === import_types.SellerStatus.SUSPENDED ? "Activate account" : "Suspend account",
-                    onClick: handleSuspend,
-                    icon: /* @__PURE__ */ jsx2(User, {})
-                  }
-                ]
+                actions: statusActions
               }
             ]
           }
@@ -242,99 +269,87 @@ var SellerGeneralSection = ({
     /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
       /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.phone") }),
       /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: seller.phone || "-" })
+    ] })
+  ] });
+};
+
+// src/pages/sellers/seller-details/components/seller-address-section.tsx
+import { PencilSquare as PencilSquare2 } from "@medusajs/icons";
+import { Container as Container2, Heading as Heading2, Text as Text2 } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SellerAddressSection = ({
+  seller
+}) => {
+  const { t } = useTranslation2();
+  return /* @__PURE__ */ jsxs2(Container2, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Heading2, { level: "h2", children: t("addresses.title") }),
+      /* @__PURE__ */ jsx3(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: `/sellers/${seller.id}/edit-address`,
+                  icon: /* @__PURE__ */ jsx3(PencilSquare2, {})
+                }
+              ]
+            }
+          ]
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.address_1") }),
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: seller.address_1 || "-" })
+    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.address_1") }),
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: seller.address_1 || "-" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.address_2") }),
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: seller.address_2 || "-" })
+    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.address_2") }),
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: seller.address_2 || "-" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.city") }),
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: seller.city || "-" })
+    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.city") }),
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: seller.city || "-" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.province") }),
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: seller.province || "-" })
+    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.province") }),
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: seller.province || "-" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.postal_code") }),
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: seller.postal_code || "-" })
+    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.postal_code") }),
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: seller.postal_code || "-" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.country_code") }),
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: seller.country_code || "-" })
+    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: t("sellers.fields.country_code") }),
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: seller.country_code || "-" })
     ] })
   ] });
 };
 
 // src/pages/sellers/seller-details/components/seller-order-section.tsx
-import { useMemo } from "react";
-import { Badge, Container as Container2, Heading as Heading2 } from "@medusajs/ui";
+import { Container as Container3, Heading as Heading3 } from "@medusajs/ui";
 import { keepPreviousData } from "@tanstack/react-query";
-import { createColumnHelper } from "@tanstack/react-table";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
 var PREFIX = "selord";
-var DEFAULT_FIELDS = "id,status,display_id,created_at,email,fulfillment_status,payment_status,total,currency_code,*customer";
-var getOrderStatusBadgeColor = (status) => {
-  const colors = {
-    pending: "orange",
-    completed: "green",
-    canceled: "red",
-    archived: "grey",
-    requires_action: "orange",
-    draft: "grey"
-  };
-  return colors[status] || "grey";
-};
-var getPaymentStatusBadgeColor = (status) => {
-  const colors = {
-    captured: "green",
-    paid: "green",
-    partially_captured: "orange",
-    awaiting: "orange",
-    authorized: "blue",
-    partially_authorized: "blue",
-    pending: "orange",
-    refunded: "red",
-    partially_refunded: "orange",
-    canceled: "red",
-    not_paid: "grey",
-    requires_action: "orange"
-  };
-  return colors[status] || "grey";
-};
-var getFulfillmentStatusBadgeColor = (status) => {
-  const colors = {
-    fulfilled: "green",
-    shipped: "green",
-    delivered: "green",
-    partially_fulfilled: "orange",
-    partially_shipped: "orange",
-    partially_delivered: "orange",
-    not_fulfilled: "grey",
-    canceled: "red",
-    returned: "red",
-    partially_returned: "orange",
-    requires_action: "orange"
-  };
-  return colors[status] || "grey";
-};
-var formatStatus = (status) => status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
-var SellerOrderSection = () => {
-  const { t } = useTranslation2();
+var DEFAULT_RELATIONS = "*customer,*items,*sales_channel";
+var DEFAULT_FIELDS = "id,status,display_id,created_at,email,fulfillment_status,payment_status,total,currency_code";
+var SellerOrderSection = ({ sellerId }) => {
+  const { t } = useTranslation3();
   const { searchParams, raw } = useOrderTableQuery({
     pageSize: PAGE_SIZE,
     prefix: PREFIX
   });
   const { orders, count, isLoading, isError, error } = useOrders(
     {
-      fields: DEFAULT_FIELDS,
-      ...searchParams
+      ...searchParams,
+      seller_id: sellerId,
+      fields: DEFAULT_FIELDS + "," + DEFAULT_RELATIONS
     },
     {
       placeholderData: keepPreviousData
@@ -353,9 +368,9 @@ var SellerOrderSection = () => {
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs2(Container2, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx3(Heading2, { level: "h2", children: t("orders.domain") }) }),
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3(Container3, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx4(Heading3, { level: "h2", children: t("orders.domain") }) }),
+    /* @__PURE__ */ jsx4(
       _DataTable,
       {
         columns,
@@ -378,111 +393,34 @@ var SellerOrderSection = () => {
     )
   ] });
 };
-var columnHelper = createColumnHelper();
 var useColumns = () => {
+  const base = useOrderTableColumns({ exclude: ["customer"] });
   return useMemo(
-    () => [
-      columnHelper.display({
-        id: "display_id",
-        header: "Order",
-        cell: ({ row }) => `#${row.original.display_id}`
-      }),
-      columnHelper.display({
-        id: "created_at",
-        header: "Date",
-        cell: ({ row }) => /* @__PURE__ */ jsx3(DateCell, { date: row.original.created_at })
-      }),
-      columnHelper.display({
-        id: "customer",
-        header: "Customer",
-        cell: ({ row }) => {
-          return row.original.customer?.first_name && row.original.customer?.last_name ? `${row.original.customer?.first_name} ${row.original.customer?.last_name}` : row.original.customer?.email;
-        }
-      }),
-      columnHelper.display({
-        id: "status",
-        header: "Order Status",
-        cell: ({ row }) => /* @__PURE__ */ jsx3(
-          Badge,
-          {
-            size: "2xsmall",
-            color: getOrderStatusBadgeColor(row.original.status),
-            children: formatStatus(row.original.status)
-          }
-        )
-      }),
-      columnHelper.display({
-        id: "payment_status",
-        header: "Payment Status",
-        cell: ({ row }) => {
-          const status = row.original?.payment_status;
-          if (!status) return "-";
-          return /* @__PURE__ */ jsx3(
-            Badge,
-            {
-              size: "2xsmall",
-              color: getPaymentStatusBadgeColor(status),
-              children: formatStatus(status)
-            }
-          );
-        }
-      }),
-      columnHelper.display({
-        id: "fulfillment_status",
-        header: "Fulfillment Status",
-        cell: ({ row }) => {
-          const status = row.original.fulfillment_status;
-          if (!status) return "-";
-          return /* @__PURE__ */ jsx3(
-            Badge,
-            {
-              size: "2xsmall",
-              color: getFulfillmentStatusBadgeColor(status),
-              children: formatStatus(status)
-            }
-          );
-        }
-      }),
-      columnHelper.display({
-        id: "total",
-        header: "Order Total",
-        cell: ({ row }) => {
-          if (typeof row.original.total === "undefined" || row.original.total === null) {
-            return "-";
-          }
-          const formatted = getStylizedAmount(
-            row.original.total,
-            row.original.currency_code
-          );
-          return /* @__PURE__ */ jsx3("div", { className: "flex h-full w-full items-center justify-start overflow-hidden text-left", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: formatted }) });
-        }
-      })
-    ],
-    []
+    () => [...base],
+    [base]
   );
 };
 
 // src/pages/sellers/seller-details/components/seller-product-section.tsx
 import { useMemo as useMemo2 } from "react";
-import { PencilSquare as PencilSquare2, Trash } from "@medusajs/icons";
-import { Container as Container3, Heading as Heading3, toast as toast2, usePrompt as usePrompt2 } from "@medusajs/ui";
+import { PencilSquare as PencilSquare3, Trash } from "@medusajs/icons";
+import { Container as Container4, Heading as Heading4, toast as toast2, usePrompt as usePrompt2 } from "@medusajs/ui";
 import { keepPreviousData as keepPreviousData2 } from "@tanstack/react-query";
-import { createColumnHelper as createColumnHelper2 } from "@tanstack/react-table";
-import { useTranslation as useTranslation3 } from "react-i18next";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var PAGE_SIZE2 = 10;
 var PREFIX2 = "selprod";
-var DEFAULT_FIELDS2 = "*collection,+type_id,+tag_id,+sales_channel_id,+status,+created_at,+updated_at";
-var SellerProductSection = () => {
-  const { t } = useTranslation3();
+var SellerProductSection = ({ sellerId }) => {
+  const { t } = useTranslation4();
   const { searchParams, raw } = useProductTableQuery({
     pageSize: PAGE_SIZE2,
     prefix: PREFIX2
   });
   const { products, count, isLoading, isError, error } = useProducts(
     {
-      fields: DEFAULT_FIELDS2,
-      ...searchParams
+      ...searchParams,
+      seller_id: sellerId
     },
     {
       placeholderData: keepPreviousData2
@@ -501,9 +439,9 @@ var SellerProductSection = () => {
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs3(Container3, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx4(Heading3, { level: "h2", children: t("products.domain") }) }),
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs4(Container4, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx5(Heading4, { level: "h2", children: t("products.domain") }) }),
+    /* @__PURE__ */ jsx5(
       _DataTable,
       {
         columns,
@@ -526,9 +464,9 @@ var SellerProductSection = () => {
     )
   ] });
 };
-var columnHelper2 = createColumnHelper2();
+var columnHelper = createColumnHelper();
 var useColumns2 = () => {
-  const { t } = useTranslation3();
+  const { t } = useTranslation4();
   const prompt = usePrompt2();
   const handleDelete = async (product) => {
     const res = await prompt({
@@ -562,24 +500,24 @@ var useColumns2 = () => {
   };
   return useMemo2(
     () => [
-      columnHelper2.display({
+      columnHelper.display({
         id: "product",
         header: "Product",
         cell: ({ row }) => {
-          return /* @__PURE__ */ jsxs3("div", { className: "flex h-full w-full max-w-[250px] items-center gap-x-3 overflow-hidden", children: [
-            /* @__PURE__ */ jsx4("div", { className: "w-fit flex-shrink-0", children: /* @__PURE__ */ jsx4(Thumbnail, { src: row.original.thumbnail }) }),
-            /* @__PURE__ */ jsx4("span", { title: row.original.title, className: "truncate", children: row.original.title })
+          return /* @__PURE__ */ jsxs4("div", { className: "flex h-full w-full max-w-[250px] items-center gap-x-3 overflow-hidden", children: [
+            /* @__PURE__ */ jsx5("div", { className: "w-fit flex-shrink-0", children: /* @__PURE__ */ jsx5(Thumbnail, { src: row.original.thumbnail }) }),
+            /* @__PURE__ */ jsx5("span", { title: row.original.title, className: "truncate", children: row.original.title })
           ] });
         }
       }),
-      columnHelper2.display({
+      columnHelper.display({
         id: "collection",
         header: "Collection",
         cell: ({ row }) => {
           return row.original.collection?.title;
         }
       }),
-      columnHelper2.display({
+      columnHelper.display({
         id: "variants",
         header: "Variants",
         cell: ({ row }) => {
@@ -588,15 +526,15 @@ var useColumns2 = () => {
           return `${variants} ${suffix}`;
         }
       }),
-      columnHelper2.display({
+      columnHelper.display({
         id: "status",
         header: "Status",
-        cell: ({ row }) => /* @__PURE__ */ jsx4(ProductStatusCell, { status: row.original.status })
+        cell: ({ row }) => /* @__PURE__ */ jsx5(ProductStatusCell, { status: row.original.status })
       }),
-      columnHelper2.display({
+      columnHelper.display({
         id: "actions",
         header: "",
-        cell: ({ row }) => /* @__PURE__ */ jsx4(
+        cell: ({ row }) => /* @__PURE__ */ jsx5(
           ActionMenu,
           {
             groups: [
@@ -605,7 +543,7 @@ var useColumns2 = () => {
                   {
                     label: t("actions.edit"),
                     to: `/products/${row.original.id}/edit`,
-                    icon: /* @__PURE__ */ jsx4(PencilSquare2, {})
+                    icon: /* @__PURE__ */ jsx5(PencilSquare3, {})
                   }
                 ]
               },
@@ -614,7 +552,7 @@ var useColumns2 = () => {
                   {
                     label: t("actions.delete"),
                     onClick: () => handleDelete(row.original),
-                    icon: /* @__PURE__ */ jsx4(Trash, {})
+                    icon: /* @__PURE__ */ jsx5(Trash, {})
                   }
                 ]
               }
@@ -628,27 +566,30 @@ var useColumns2 = () => {
 };
 
 // src/pages/sellers/seller-details/components/seller-details.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var SellerDetails = () => {
   const { id } = useParams();
   const { seller, isLoading, isError, error } = useSeller(id);
   if (isLoading || !seller) {
-    return /* @__PURE__ */ jsx5(SingleColumnPageSkeleton, { sections: 2, showJSON: true, showMetadata: true });
+    return /* @__PURE__ */ jsx6(SingleColumnPageSkeleton, { sections: 2, showJSON: true, showMetadata: true });
   }
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs4(
-    SingleColumnPage,
+  return /* @__PURE__ */ jsxs5(
+    TwoColumnPage,
     {
       data: seller,
       hasOutlet: true,
       showJSON: true,
       showMetadata: true,
       children: [
-        /* @__PURE__ */ jsx5(SellerGeneralSection, { seller }),
-        /* @__PURE__ */ jsx5(SellerOrderSection, {}),
-        /* @__PURE__ */ jsx5(SellerProductSection, {})
+        /* @__PURE__ */ jsxs5(TwoColumnPage.Main, { children: [
+          /* @__PURE__ */ jsx6(SellerGeneralSection, { seller }),
+          /* @__PURE__ */ jsx6(SellerOrderSection, { sellerId: seller.id }),
+          /* @__PURE__ */ jsx6(SellerProductSection, { sellerId: seller.id })
+        ] }),
+        /* @__PURE__ */ jsx6(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsx6(SellerAddressSection, { seller }) })
       ]
     }
   );