@medusajs/dashboard 3.0.0-snapshot-20251106143524 → 3.0.0-snapshot-20251106181920

package/dist/{workflow-execution-list-6UTBTVX4.mjs → workflow-execution-list-JOVBPL45.mjs}

@@ -9,23 +9,23 @@ import "./chunk-LQTHYS2Z.mjs";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-YTN73JYH.mjs";
+} from "./chunk-PJ5EUKOB.mjs";
 import "./chunk-HQKGZADC.mjs";
 import "./chunk-EMIHDNB7.mjs";
-import "./chunk-GU5PJRPM.mjs";
+import "./chunk-FKIOYL3D.mjs";
 import {
   SingleColumnPage
 } from "./chunk-GIZFNLKK.mjs";
 import {
   useQueryParams
 } from "./chunk-C76H5USB.mjs";
-import "./chunk-DZWH2RV6.mjs";
+import "./chunk-PFKKVLZX.mjs";
 import {
   useExtension
 } from "./chunk-C5P5PL3E.mjs";
 import "./chunk-LPEUYMRK.mjs";
 import "./chunk-S4DMV3ZT.mjs";
-import "./chunk-SUYYSKCB.mjs";
+import "./chunk-67ORSRVT.mjs";
 import {
   useWorkflowExecutions
 } from "./chunk-QTCZFYFH.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medusajs/dashboard",
-  "version": "3.0.0-snapshot-20251106143524",
+  "version": "3.0.0-snapshot-20251106181920",
   "scripts": {
     "generate:static": "node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "vite",
@@ -46,10 +46,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "3.4.2",
-    "@medusajs/admin-shared": "3.0.0-snapshot-20251106143524",
-    "@medusajs/icons": "3.0.0-snapshot-20251106143524",
-    "@medusajs/js-sdk": "3.0.0-snapshot-20251106143524",
-    "@medusajs/ui": "4.0.28-snapshot-20251106143524",
+    "@medusajs/admin-shared": "3.0.0-snapshot-20251106181920",
+    "@medusajs/icons": "3.0.0-snapshot-20251106181920",
+    "@medusajs/js-sdk": "3.0.0-snapshot-20251106181920",
+    "@medusajs/ui": "4.0.28-snapshot-20251106181920",
     "@radix-ui/react-dialog": "1.1.4",
     "@radix-ui/react-dismissable-layer": "1.1.4",
     "@tanstack/react-query": "5.64.2",
@@ -81,10 +81,10 @@
     "zod": "3.25.76"
   },
   "devDependencies": {
-    "@medusajs/admin-shared": "3.0.0-snapshot-20251106143524",
-    "@medusajs/admin-vite-plugin": "3.0.0-snapshot-20251106143524",
-    "@medusajs/types": "3.0.0-snapshot-20251106143524",
-    "@medusajs/ui-preset": "3.0.0-snapshot-20251106143524"
+    "@medusajs/admin-shared": "3.0.0-snapshot-20251106181920",
+    "@medusajs/admin-vite-plugin": "3.0.0-snapshot-20251106181920",
+    "@medusajs/types": "3.0.0-snapshot-20251106181920",
+    "@medusajs/ui-preset": "3.0.0-snapshot-20251106181920"
   },
   "packageManager": "yarn@3.2.1"
 }

package/src/components/layout/main-layout/main-layout.tsx

@@ -1,6 +1,6 @@
 import {
-  BuildingStorefront,
   Buildings,
+  BuildingStorefront,
   ChevronDownMini,
   CogSixTooth,
   CurrencyDollar,
@@ -14,7 +14,7 @@ import {
   Tag,
   Users,
 } from "@medusajs/icons"
-import { Avatar, Divider, DropdownMenu, Text, clx } from "@medusajs/ui"
+import { Avatar, clx, Divider, DropdownMenu, Text } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 import { useTranslation } from "react-i18next"
 
@@ -107,8 +107,7 @@ const Header = () => {
 
   return (
     <div className="w-full p-3">
-    <DropdownMenu
-          dir={direction}>
+      <DropdownMenu dir={direction}>
         <DropdownMenu.Trigger
           disabled={!isLoaded}
           className={clx(
@@ -206,6 +205,10 @@ const useCoreRoutes = (): Omit<INavItem, "pathname">[] => {
           label: t("categories.domain"),
           to: "/categories",
         },
+        {
+          label: t("productOptions.domain"),
+          to: "/product-options",
+        },
         // TODO: Enable when domin is introduced
         // {
         //   label: t("giftCards.domain"),
@@ -348,7 +351,6 @@ const ExtensionRouteSection = () => {
                     label={item.label}
                     icon={item.icon ? item.icon : <SquaresPlus />}
                     items={item.items}
-                    translationNs={item.translationNs}
                     type="extension"
                   />
                 )

package/src/components/layout/nav-item/nav-item.tsx

@@ -17,7 +17,6 @@ type ItemType = "core" | "extension" | "setting"
 type NestedItemProps = {
   label: string
   to: string
-  translationNs?: string
 }
 
 export type INavItem = {
@@ -28,7 +27,6 @@ export type INavItem = {
   type?: ItemType
   from?: string
   nested?: string
-  translationNs?: string
 }
 
 const BASE_NAV_LINK_CLASSES =
@@ -92,15 +90,10 @@ export const NavItem = ({
   items,
   type = "core",
   from,
-  translationNs,
 }: INavItem) => {
-  const { t } = useTranslation(translationNs as any)
   const { pathname } = useLocation()
   const [open, setOpen] = useState(getIsOpen(to, items, pathname))
 
-  // Use translation if translationNs is provided, otherwise use label as-is
-  const displayLabel: string = translationNs ? t(label) : label
-
   useEffect(() => {
     setOpen(getIsOpen(to, items, pathname))
   }, [pathname, to, items])
@@ -157,7 +150,7 @@ export const NavItem = ({
             </div>
           )}
           <Text size="small" weight="plus" leading="compact">
-            {displayLabel}
+            {label}
           </Text>
         </NavLink>
       </NavItemTooltip>
@@ -173,7 +166,7 @@ export const NavItem = ({
               <Icon icon={icon} type={type} />
             </div>
             <Text size="small" weight="plus" leading="compact">
-              {displayLabel}
+              {label}
             </Text>
           </RadixCollapsible.Trigger>
           <RadixCollapsible.Content>
@@ -196,15 +189,12 @@ export const NavItem = ({
                       }}
                     >
                       <Text size="small" weight="plus" leading="compact">
-                        {displayLabel}
+                        {label}
                       </Text>
                     </NavLink>
                   </NavItemTooltip>
                 </li>
                 {items.map((item) => {
-                  const { t: itemT } = useTranslation(item.translationNs as any)
-                  const itemLabel: string = item.translationNs ? itemT(item.label) : item.label
-
                   return (
                     <li key={item.to} className="flex h-7 items-center">
                       <NavItemTooltip to={item.to}>
@@ -223,7 +213,7 @@ export const NavItem = ({
                           }}
                         >
                           <Text size="small" weight="plus" leading="compact">
-                            {itemLabel}
+                            {item.label}
                           </Text>
                         </NavLink>
                       </NavItemTooltip>

package/src/dashboard-app/dashboard-app.tsx

@@ -187,7 +187,6 @@ export class DashboardApp {
         icon: item.icon ? <item.icon /> : undefined,
         items: [],
         nested: item.nested,
-        translationNs: item.translationNs,
       }
 
       if (parentPath !== "/" && tempRegistry[parentPath]) {

package/src/dashboard-app/routes/get-route.map.tsx

@@ -136,18 +136,6 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-prices"),
                         },
-                        {
-                          path: "options/create",
-                          lazy: () =>
-                            import(
-                              "../../routes/products/product-create-option"
-                            ),
-                        },
-                        {
-                          path: "options/:option_id/edit",
-                          lazy: () =>
-                            import("../../routes/products/product-edit-option"),
-                        },
                         {
                           path: "variants/create",
                           lazy: () =>
@@ -165,6 +153,13 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-metadata"),
                         },
+                        {
+                          path: "options/manage",
+                          lazy: () =>
+                            import(
+                              "../../routes/products/product-options-manage"
+                            ),
+                        },
                       ],
                     },
                     {
@@ -225,6 +220,63 @@ export function getRouteMap({
                 },
               ],
             },
+            {
+              path: "/product-options",
+              errorElement: <ErrorBoundary />,
+              handle: {
+                breadcrumb: () => t("productOptions.domain"),
+              },
+              children: [
+                {
+                  path: "",
+                  lazy: () =>
+                    import("../../routes/product-options/product-option-list"),
+                  children: [
+                    {
+                      path: "create",
+                      lazy: () =>
+                        import(
+                          "../../routes/product-options/product-option-create"
+                        ),
+                    },
+                  ],
+                },
+                {
+                  path: ":id",
+                  lazy: async () => {
+                    const { Component, Breadcrumb, loader } = await import(
+                      "../../routes/product-options/product-option-detail"
+                    )
+
+                    return {
+                      Component,
+                      loader,
+                      handle: {
+                        breadcrumb: (match: UIMatch<any>) => (
+                          <Breadcrumb {...match} />
+                        ),
+                      },
+                    }
+                  },
+                  children: [
+                    {
+                      path: "edit",
+                      lazy: () =>
+                        import(
+                          "../../routes/product-options/product-option-edit"
+                        ),
+                    },
+                    {
+                      path: "metadata/edit",
+                      lazy: () =>
+                        import(
+                          "../../routes/product-options/product-option-metadata"
+                        ),
+                    },
+                  ],
+                },
+              ],
+            },
             {
               path: "/categories",
               errorElement: <ErrorBoundary />,

package/src/dashboard-app/types.ts

@@ -24,7 +24,6 @@ export type MenuItemExtension = {
   path: string
   icon?: ComponentType
   nested?: NestedRoutePosition
-  translationNs?: string
 }
 
 export type WidgetExtension = {

package/src/hooks/api/index.ts

@@ -17,6 +17,7 @@ export * from "./payment-collections"
 export * from "./payments"
 export * from "./plugins"
 export * from "./price-lists"
+export * from "./product-options"
 export * from "./product-types"
 export * from "./product-variants"
 export * from "./products"

package/src/hooks/api/product-options.tsx

@@ -0,0 +1,151 @@
+import { FetchError } from "@medusajs/js-sdk"
+import {
+  QueryKey,
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  UseQueryOptions,
+} from "@tanstack/react-query"
+import { sdk } from "../../lib/client"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+import { HttpTypes } from "@medusajs/types"
+import { queryClient } from "../../lib/query-client.ts"
+
+const PRODUCT_OPTIONS_QUERY_KEY = "product_options" as const
+export const productOptionsQueryKeys = queryKeysFactory(
+  PRODUCT_OPTIONS_QUERY_KEY
+)
+
+export const useProductOption = (
+  id: string,
+  query?: HttpTypes.AdminProductOptionParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminProductOptionResponse,
+      FetchError,
+      HttpTypes.AdminProductOptionResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryKey: productOptionsQueryKeys.detail(id, query),
+    queryFn: () => sdk.admin.productOption.retrieve(id, query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useProductOptions = (
+  query?: HttpTypes.AdminProductOptionListParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminProductOptionListResponse,
+      FetchError,
+      HttpTypes.AdminProductOptionListResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => sdk.admin.productOption.list(query),
+    queryKey: productOptionsQueryKeys.list(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useCreateProductOption = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionResponse,
+    FetchError,
+    HttpTypes.AdminCreateProductOption
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.productOption.create(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useUpdateProductOption = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionResponse,
+    FetchError,
+    HttpTypes.AdminUpdateProductOption
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.productOption.update(id, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.detail(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteProductOption = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionDeleteResponse,
+    FetchError,
+    void
+  >
+) => {
+  return useMutation({
+    mutationFn: () => sdk.admin.productOption.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.detail(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteProductOptionLazy = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionDeleteResponse,
+    FetchError,
+    string
+  >
+) => {
+  return useMutation({
+    mutationFn: (id: string) => sdk.admin.productOption.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.details(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

package/src/hooks/api/products.tsx

@@ -21,69 +21,6 @@ export const variantsQueryKeys = queryKeysFactory(VARIANTS_QUERY_KEY)
 const OPTIONS_QUERY_KEY = "product_options" as const
 export const optionsQueryKeys = queryKeysFactory(OPTIONS_QUERY_KEY)
 
-export const useCreateProductOption = (
-  productId: string,
-  options?: UseMutationOptions<any, FetchError, any>
-) => {
-  return useMutation({
-    mutationFn: (payload: HttpTypes.AdminCreateProductOption) =>
-      sdk.admin.product.createOption(productId, payload),
-    onSuccess: (data: any, variables: any, context: any) => {
-      queryClient.invalidateQueries({ queryKey: optionsQueryKeys.lists() })
-      queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.detail(productId),
-      })
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
-export const useUpdateProductOption = (
-  productId: string,
-  optionId: string,
-  options?: UseMutationOptions<any, FetchError, any>
-) => {
-  return useMutation({
-    mutationFn: (payload: HttpTypes.AdminUpdateProductOption) =>
-      sdk.admin.product.updateOption(productId, optionId, payload),
-    onSuccess: (data: any, variables: any, context: any) => {
-      queryClient.invalidateQueries({ queryKey: optionsQueryKeys.lists() })
-      queryClient.invalidateQueries({
-        queryKey: optionsQueryKeys.detail(optionId),
-      })
-      queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.detail(productId),
-      })
-
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
-export const useDeleteProductOption = (
-  productId: string,
-  optionId: string,
-  options?: UseMutationOptions<any, FetchError, void>
-) => {
-  return useMutation({
-    mutationFn: () => sdk.admin.product.deleteOption(productId, optionId),
-    onSuccess: (data: any, variables: any, context: any) => {
-      queryClient.invalidateQueries({ queryKey: optionsQueryKeys.lists() })
-      queryClient.invalidateQueries({
-        queryKey: optionsQueryKeys.detail(optionId),
-      })
-      queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.detail(productId),
-      })
-
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
 export const useProductVariant = (
   productId: string,
   variantId: string,
@@ -375,6 +312,29 @@ export const useDeleteProduct = (
   })
 }
 
+export const useLinkProductOptions = (
+  productId: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductResponse,
+    FetchError,
+    HttpTypes.AdminLinkProductOptions
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.product.linkOptions(productId, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.detail(productId),
+      })
+      queryClient.invalidateQueries({ queryKey: optionsQueryKeys.lists() })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
 export const useExportProducts = (
   query?: HttpTypes.AdminProductListParams,
   options?: UseMutationOptions<

package/src/hooks/table/columns/use-product-option-table-columns.tsx

@@ -0,0 +1,43 @@
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { TextCell } from "../../../components/table/table-cells/common/text-cell"
+import { HttpTypes } from "@medusajs/types"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminProductOption>()
+
+export const useProductOptionTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("title", {
+        header: t("fields.title"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("values", {
+        header: t("fields.values"),
+        cell: ({ getValue }) => {
+          const values = getValue()
+          const count = values?.length || 0
+          const displayText =
+            count > 0 ? `${count} ${count === 1 ? "value" : "values"}` : "-"
+
+          return <TextCell text={displayText} />
+        },
+      }),
+      columnHelper.accessor("is_exclusive", {
+        header: t("fields.exclusive"),
+        cell: ({ getValue }) => {
+          const isExclusive = getValue()
+          return (
+            <TextCell
+              text={isExclusive ? t("fields.true") : t("fields.false")}
+            />
+          )
+        },
+      }),
+    ],
+    [t]
+  )
+}

package/src/hooks/table/filters/index.ts

@@ -4,6 +4,7 @@ export * from "./use-customer-table-filters"
 export * from "./use-date-table-filters"
 export * from "./use-order-table-filters"
 export * from "./use-product-table-filters"
+export * from "./use-product-option-table-filters"
 export * from "./use-product-tag-table-filters"
 export * from "./use-product-type-table-filters"
 export * from "./use-promotion-table-filters"

package/src/hooks/table/filters/use-product-option-table-filters.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from "react-i18next"
+import { createDataTableFilterHelper } from "@medusajs/ui"
+import { HttpTypes } from "@medusajs/types"
+import { useDataTableDateFilters } from "../../../components/data-table/helpers/general/use-data-table-date-filters.tsx"
+import { useMemo } from "react"
+
+const filterHelper = createDataTableFilterHelper<HttpTypes.AdminProductOption>()
+
+export const useProductOptionTableFilters = () => {
+  const { t } = useTranslation()
+  const dateFilters = useDataTableDateFilters()
+
+  return useMemo(
+    () => [
+      filterHelper.accessor("is_exclusive", {
+        label: t("fields.exclusive"),
+        type: "radio",
+        options: [
+          {
+            label: t("fields.true"),
+            value: "false",
+          },
+          {
+            label: t("fields.false"),
+            value: "true",
+          },
+        ],
+      }),
+      ...dateFilters,
+    ],
+    [dateFilters, t]
+  )
+}

package/src/hooks/table/query/use-product-option-table-query.tsx

@@ -0,0 +1,34 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseProductOptionTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useProductOptionTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseProductOptionTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at", "is_exclusive"],
+    prefix
+  )
+
+  const { offset, created_at, updated_at, q, order, is_exclusive } = queryObject
+
+  const searchParams: HttpTypes.AdminProductOptionListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    is_exclusive: is_exclusive === "true" ? true : is_exclusive === "false" ? false : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}