@medusajs/dashboard 3.0.0-snapshot-20250410112222 → 3.0.0-snapshot-20251104011621

package/src/hooks/table/columns/use-shipping-option-type-table-columns.tsx

@@ -0,0 +1,44 @@
+import { HttpTypes } from "@medusajs/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+import { DateCell } from "../../../components/table/table-cells/common/date-cell"
+import { TextCell } from "../../../components/table/table-cells/common/text-cell"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminShippingOptionType>()
+
+export const useShippingOptionTypeTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("label", {
+        header: () => t("fields.label"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("code", {
+        header: () => t("fields.code"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("description", {
+        header: () => t("fields.description"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("created_at", {
+        header: () => t("fields.createdAt"),
+
+        cell: ({ getValue }) => {
+          return <DateCell date={getValue()} />
+        },
+      }),
+      columnHelper.accessor("updated_at", {
+        header: () => t("fields.updatedAt"),
+        cell: ({ getValue }) => {
+          return <DateCell date={getValue()} />
+        },
+      }),
+    ],
+    [t]
+  )
+}

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

@@ -84,6 +84,7 @@ export const useProductTableFilters = (
       label: t("fields.type"),
       type: "select",
       multiple: true,
+      searchable: true,
       options: product_types.map((t) => ({
         label: t.value,
         value: t.id,
@@ -99,6 +100,7 @@ export const useProductTableFilters = (
       label: t("fields.tag"),
       type: "select",
       multiple: true,
+      searchable: true,
       options: product_tags.map((t) => ({
         label: t.value,
         value: t.id,
@@ -114,6 +116,7 @@ export const useProductTableFilters = (
       label: t("fields.salesChannel"),
       type: "select",
       multiple: true,
+      searchable: true,
       options: sales_channels.map((s) => ({
         label: s.name,
         value: s.id,

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

@@ -1,27 +1,18 @@
 import { useTranslation } from "react-i18next"
+import { HttpTypes } from "@medusajs/types"
+
 import { Filter } from "../../../components/table/data-table"
 
-export const useShippingOptionTableFilters = () => {
+export const useShippingOptionTableFilters = (
+  locations: HttpTypes.AdminStockLocation[]
+) => {
   const { t } = useTranslation()
 
-  const isReturnFilter: Filter = {
-    key: "is_return",
-    label: t("fields.type"),
-    type: "select",
-    options: [
-      { label: t("regions.return"), value: "true" },
-      { label: t("regions.outbound"), value: "false" },
-    ],
-  }
-
-  const isAdminFilter: Filter = {
-    key: "admin_only",
-    label: t("fields.availability"),
+  const locationFilter: Filter = {
+    key: "stock_location_id",
+    label: t("fields.location"),
     type: "select",
-    options: [
-      { label: t("general.admin"), value: "true" },
-      { label: t("general.store"), value: "false" },
-    ],
+    options: locations.map((l) => ({ label: l.name, value: l.id })),
   }
 
   const dateFilters: Filter[] = [
@@ -33,7 +24,7 @@ export const useShippingOptionTableFilters = () => {
     type: "date",
   }))
 
-  const filters = [isReturnFilter, isAdminFilter, ...dateFilters]
+  const filters = [locationFilter, ...dateFilters]
 
   return filters
 }

package/src/hooks/table/filters/use-shipping-option-type-table-filters.tsx

@@ -0,0 +1,5 @@
+import { useDateTableFilters } from "./use-date-table-filters"
+
+export const useShippingOptionTypeTableFilters = () => {
+  return useDateTableFilters()
+}

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

@@ -6,6 +6,7 @@ export * from "./use-order-table-query"
 export * from "./use-product-table-query"
 export * from "./use-product-tag-table-query"
 export * from "./use-product-type-table-query"
+export * from "./use-refund-reason-table-query"
 export * from "./use-region-table-query"
 export * from "./use-return-reason-table-query"
 export * from "./use-shipping-option-table-query"

package/src/hooks/table/query/use-order-table-query.tsx

@@ -46,7 +46,7 @@ export const useOrderTableQuery = ({
     created_at: created_at ? JSON.parse(created_at) : undefined,
     updated_at: updated_at ? JSON.parse(updated_at) : undefined,
     region_id: region_id?.split(","),
-    order: order ? order : "-display_id",
+    order: order ? order : "-created_at",
     q,
   }
 

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

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseProductTagTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useProductVariantTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseProductTagTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+  const searchParams: HttpTypes.AdminProductTagListParams = {
+    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,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

package/src/hooks/table/query/use-promotion-table-query.tsx

@@ -11,17 +11,18 @@ export const usePromotionTableQuery = ({
   pageSize = 20,
 }: UsePromotionTableQueryProps) => {
   const queryObject = useQueryParams(
-    ["offset", "q", "created_at", "updated_at"],
+    ["offset", "q", "order", "created_at", "updated_at"],
     prefix
   )
 
-  const { offset, q, created_at, updated_at } = queryObject
+  const { offset, q, order, created_at, updated_at } = queryObject
 
   const searchParams: HttpTypes.AdminGetPromotionsParams = {
     limit: pageSize,
     created_at: created_at ? JSON.parse(created_at) : undefined,
     updated_at: updated_at ? JSON.parse(updated_at) : undefined,
     offset: offset ? Number(offset) : 0,
+    order,
     q,
   }
 

package/src/hooks/table/query/use-refund-reason-table-query.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseRefundReasonTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useRefundReasonTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseRefundReasonTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+  const searchParams: HttpTypes.AdminRefundReasonListParams = {
+    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,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

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

@@ -22,22 +22,34 @@ export const useShippingOptionTableQuery = ({
       "is_return",
       "created_at",
       "updated_at",
+      "stock_location_id",
     ],
     prefix
   )
 
-  const { offset, order, q, admin_only, is_return, created_at, updated_at } =
-    queryObject
+  const {
+    offset,
+    order,
+    q,
+    admin_only,
+    is_return,
+    created_at,
+    updated_at,
+    stock_location_id,
+  } = queryObject
 
   const searchParams: HttpTypes.AdminShippingOptionListParams = {
     limit: pageSize,
     offset: offset ? Number(offset) : 0,
     // TODO: We don't allow region_id in the API yet
     // region_id: regionId,
-    is_return: is_return ? is_return === "true" : undefined,
-    admin_only: admin_only ? admin_only === "true" : undefined,
+
+    // TODO: not supported
+    // is_return: is_return ? is_return === "true" : undefined,
+    // admin_only: admin_only ? admin_only === "true" : undefined,
     q,
     order,
+    stock_location_id,
     created_at: created_at ? JSON.parse(created_at) : undefined,
     updated_at: updated_at ? JSON.parse(updated_at) : undefined,
   }

package/src/hooks/table/query/use-shipping-option-type-table-query.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseShippingOptionTypeTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useShippingOptionTypeTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseShippingOptionTypeTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+  const searchParams: HttpTypes.AdminShippingOptionTypeListParams = {
+    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,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

package/src/hooks/table/use-table-configuration.tsx

@@ -0,0 +1,287 @@
+import { useState, useMemo, useCallback, useEffect } from "react"
+import { useSearchParams } from "react-router-dom"
+import { HttpTypes } from "@medusajs/types"
+import { useViewConfigurations, useViewConfiguration } from "../use-view-configurations"
+import { useEntityColumns } from "../api/views"
+import { useFeatureFlag } from "../../providers/feature-flag-provider"
+import { useColumnState } from "./columns/use-column-state"
+import { useQueryParams } from "../use-query-params"
+import { calculateRequiredFields } from "../../lib/table/field-utils"
+
+export interface TableConfiguration {
+  filters: Record<string, any>
+  sorting: { id: string; desc: boolean } | null
+  search: string
+  visible_columns?: string[]
+  column_order?: string[]
+}
+
+export interface UseTableConfigurationOptions {
+  entity: string
+  pageSize?: number
+  queryPrefix?: string
+  filters?: Array<{ id: string }>
+}
+
+export interface UseTableConfigurationReturn {
+  activeView: any
+  createView: any
+  updateView: any
+  isViewConfigEnabled: boolean
+  visibleColumns: Record<string, boolean>
+  columnOrder: string[]
+  currentColumns: {
+    visible: string[]
+    order: string[]
+  }
+  setColumnOrder: (order: string[]) => void
+  handleColumnVisibilityChange: (visibility: Record<string, boolean>) => void
+  currentConfiguration: TableConfiguration
+  hasConfigurationChanged: boolean
+  handleClearConfiguration: () => void
+  apiColumns: HttpTypes.AdminColumn[] | undefined
+  isLoadingColumns: boolean
+  queryParams: Record<string, any>
+  requiredFields: string
+}
+
+function parseSortingState(value: string) {
+  return value.startsWith("-")
+    ? { id: value.slice(1), desc: true }
+    : { id: value, desc: false }
+}
+
+export function useTableConfiguration({
+  entity,
+  queryPrefix = "",
+  filters = [],
+}: UseTableConfigurationOptions): UseTableConfigurationReturn {
+  const isViewConfigEnabled = useFeatureFlag("view_configurations")
+  const [_, setSearchParams] = useSearchParams()
+
+  const { activeView, createView } = useViewConfigurations(entity)
+  const currentActiveView = activeView?.view_configuration || null
+  const { updateView } = useViewConfiguration(entity, currentActiveView?.id || "")
+
+  const { columns: apiColumns, isLoading: isLoadingColumns } = useEntityColumns(entity, {
+    enabled: isViewConfigEnabled,
+  })
+
+  const queryParams = useQueryParams(
+    ["q", "order", "offset", "limit", ...filters.map(f => f.id)],
+    queryPrefix
+  )
+
+  // Column state
+  const {
+    visibleColumns,
+    columnOrder,
+    currentColumns,
+    setColumnOrder,
+    handleColumnVisibilityChange,
+    handleViewChange: originalHandleViewChange,
+  } = useColumnState(apiColumns, currentActiveView)
+
+  // Sync view configuration with URL and column state
+  useEffect(() => {
+    if (!apiColumns) return
+    originalHandleViewChange(currentActiveView, apiColumns)
+    setSearchParams((prev) => {
+      // Clear existing query params
+      const keysToDelete = Array.from(prev.keys()).filter(key =>
+        key.startsWith(queryPrefix + "_") || key === queryPrefix + "_q" || key === queryPrefix + "_order"
+      )
+      keysToDelete.forEach(key => prev.delete(key))
+
+      // Apply view configuration
+      if (currentActiveView) {
+        const viewConfig = currentActiveView.configuration
+
+        if (viewConfig.filters) {
+          Object.entries(viewConfig.filters).forEach(([key, value]) => {
+            prev.set(`${queryPrefix}_${key}`, JSON.stringify(value))
+          })
+        }
+
+        if (viewConfig.sorting) {
+          const sortValue = viewConfig.sorting.desc
+            ? `-${viewConfig.sorting.id}`
+            : viewConfig.sorting.id
+          prev.set(`${queryPrefix}_order`, sortValue)
+        }
+
+        if (viewConfig.search) {
+          prev.set(`${queryPrefix}_q`, viewConfig.search)
+        }
+      }
+
+      return prev
+    })
+  }, [currentActiveView, apiColumns])
+
+  // Current configuration from URL
+  const currentConfiguration = useMemo(() => {
+    const currentFilters: Record<string, any> = {}
+    filters.forEach(filter => {
+      if (queryParams[filter.id] !== undefined) {
+        currentFilters[filter.id] = JSON.parse(queryParams[filter.id] || "")
+      }
+    })
+
+    return {
+      filters: currentFilters,
+      sorting: queryParams.order ? parseSortingState(queryParams.order) : null,
+      search: queryParams.q || "",
+    }
+  }, [filters, queryParams])
+
+  // Check if configuration has changed from view
+  const [debouncedHasConfigChanged, setDebouncedHasConfigChanged] = useState(false)
+
+  const hasConfigurationChanged = useMemo(() => {
+    const currentFilters = currentConfiguration.filters
+    const currentSorting = currentConfiguration.sorting
+    const currentSearch = currentConfiguration.search
+    const currentVisibleColumns = Object.entries(visibleColumns)
+      .filter(([_, isVisible]) => isVisible)
+      .map(([field]) => field)
+      .sort()
+
+    if (currentActiveView) {
+      const viewFilters = currentActiveView.configuration.filters || {}
+      const viewSorting = currentActiveView.configuration.sorting
+      const viewSearch = currentActiveView.configuration.search || ""
+      const viewVisibleColumns = [...(currentActiveView.configuration.visible_columns || [])].sort()
+      const viewColumnOrder = currentActiveView.configuration.column_order || []
+
+      // Check filters
+      const filterKeys = new Set([...Object.keys(currentFilters), ...Object.keys(viewFilters)])
+      for (const key of filterKeys) {
+        if (JSON.stringify(currentFilters[key]) !== JSON.stringify(viewFilters[key])) {
+          return true
+        }
+      }
+
+      // Check sorting
+      const normalizedCurrentSorting = currentSorting || undefined
+      const normalizedViewSorting = viewSorting || undefined
+      if (JSON.stringify(normalizedCurrentSorting) !== JSON.stringify(normalizedViewSorting)) {
+        return true
+      }
+
+      // Check search
+      if (currentSearch !== viewSearch) {
+        return true
+      }
+
+      // Check visible columns
+      if (JSON.stringify(currentVisibleColumns) !== JSON.stringify(viewVisibleColumns)) {
+        return true
+      }
+
+      // Check column order
+      if (JSON.stringify(columnOrder) !== JSON.stringify(viewColumnOrder)) {
+        return true
+      }
+    } else {
+      // Check against defaults
+      if (Object.keys(currentFilters).length > 0) return true
+      if (currentSorting !== null) return true
+      if (currentSearch !== "") return true
+
+      if (apiColumns) {
+        const currentVisibleSet = new Set(currentVisibleColumns)
+        const defaultVisibleSet = new Set(
+          apiColumns
+            .filter(col => col.default_visible)
+            .map(col => col.field)
+        )
+
+        if (currentVisibleSet.size !== defaultVisibleSet.size ||
+          [...currentVisibleSet].some(field => !defaultVisibleSet.has(field))) {
+          return true
+        }
+
+        const defaultOrder = apiColumns
+          .sort((a, b) => (a.default_order ?? 500) - (b.default_order ?? 500))
+          .map(col => col.field)
+
+        if (JSON.stringify(columnOrder) !== JSON.stringify(defaultOrder)) {
+          return true
+        }
+      }
+    }
+
+    return false
+  }, [currentActiveView, visibleColumns, columnOrder, currentConfiguration, apiColumns])
+
+  // Debounce configuration change detection
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedHasConfigChanged(hasConfigurationChanged)
+    }, 50)
+
+    return () => clearTimeout(timer)
+  }, [hasConfigurationChanged])
+
+  // Clear configuration handler
+  const handleClearConfiguration = useCallback(() => {
+    if (apiColumns) {
+      originalHandleViewChange(currentActiveView, apiColumns)
+    }
+
+    setSearchParams((prev) => {
+      const keysToDelete = Array.from(prev.keys()).filter(key =>
+        key.startsWith(queryPrefix + "_") || key === queryPrefix + "_q" || key === queryPrefix + "_order"
+      )
+      keysToDelete.forEach(key => prev.delete(key))
+
+      if (currentActiveView?.configuration) {
+        const viewConfig = currentActiveView.configuration
+
+        if (viewConfig.filters) {
+          Object.entries(viewConfig.filters).forEach(([key, value]) => {
+            prev.set(`${queryPrefix}_${key}`, JSON.stringify(value))
+          })
+        }
+
+        if (viewConfig.sorting) {
+          const sortValue = viewConfig.sorting.desc
+            ? `-${viewConfig.sorting.id}`
+            : viewConfig.sorting.id
+          prev.set(`${queryPrefix}_order`, sortValue)
+        }
+
+        if (viewConfig.search) {
+          prev.set(`${queryPrefix}_q`, viewConfig.search)
+        }
+      }
+
+      return prev
+    })
+  }, [currentActiveView, apiColumns, queryPrefix])
+
+  // Calculate required fields based on visible columns
+  const requiredFields = useMemo(() => {
+    return calculateRequiredFields(entity, apiColumns, visibleColumns)
+  }, [entity, apiColumns, visibleColumns])
+
+  return {
+    activeView: currentActiveView,
+    createView,
+    updateView,
+    isViewConfigEnabled,
+    visibleColumns,
+    columnOrder,
+    currentColumns,
+    setColumnOrder,
+    handleColumnVisibilityChange,
+    currentConfiguration,
+    hasConfigurationChanged: debouncedHasConfigChanged,
+    handleClearConfiguration,
+    apiColumns,
+    isLoadingColumns,
+    queryParams,
+    requiredFields,
+  }
+}

package/src/hooks/use-combobox-data.tsx

@@ -13,6 +13,7 @@ type ComboboxExternalData = {
 }
 
 type ComboboxQueryParams = {
+  id?: string
   q?: string
   offset?: number
   limit?: number
@@ -27,6 +28,7 @@ export const useComboboxData = <
   getOptions,
   defaultValue,
   defaultValueKey,
+  selectedValue,
   pageSize = 10,
   enabled = true,
 }: {
@@ -35,6 +37,7 @@ export const useComboboxData = <
   getOptions: (data: TResponse) => { label: string; value: string }[]
   defaultValueKey?: keyof TParams
   defaultValue?: string | string[]
+  selectedValue?: string
   pageSize?: number
   enabled?: boolean
 }) => {
@@ -42,7 +45,7 @@ export const useComboboxData = <
 
   const queryInitialDataBy = defaultValueKey || "id"
   const { data: initialData } = useQuery({
-    queryKey: queryKey,
+    queryKey: [...queryKey, defaultValue].filter(Boolean) as QueryKey,
     queryFn: async () => {
       return queryFn({
         [queryInitialDataBy]: defaultValue,
@@ -52,8 +55,21 @@ export const useComboboxData = <
     enabled: !!defaultValue && enabled,
   })
 
+  // always load selected value in case current data dosn't contain the value
+  const { data: selectedData } = useQuery({
+    queryKey: [...queryKey, selectedValue].filter(Boolean) as QueryKey,
+    queryFn: async () => {
+      return queryFn({
+        id: selectedValue,
+        limit: 1,
+      } as TParams)
+    },
+    enabled: !!selectedValue && enabled,
+  })
+
   const { data, ...rest } = useInfiniteQuery({
-    queryKey: [...queryKey, query],
+    // prevent infinite query response shape beeing stored under regualr list reponse QKs
+    queryKey: [...queryKey, "_cbx_", query].filter(Boolean) as QueryKey,
     queryFn: async ({ pageParam = 0 }) => {
       return await queryFn({
         q: query,
@@ -72,7 +88,7 @@ export const useComboboxData = <
 
   const options = data?.pages.flatMap((page) => getOptions(page)) ?? []
   const defaultOptions = initialData ? getOptions(initialData) : []
-
+  const selectedOptions = selectedData ? getOptions(selectedData) : []
   /**
    * If there are no options and the query is empty, then the combobox should be disabled,
    * as there is no data to search for.
@@ -89,6 +105,14 @@ export const useComboboxData = <
     })
   }
 
+  if (selectedValue && selectedOptions.length) {
+    selectedOptions.forEach((option) => {
+      if (!options.find((o) => o.value === option.value)) {
+        options.unshift(option)
+      }
+    })
+  }
+
   return {
     options,
     searchValue,

package/src/hooks/use-debounced-search.tsx

@@ -1,4 +1,4 @@
-import debounce from "lodash/debounce"
+import debounce from "lodash.debounce"
 import { useCallback, useEffect, useState } from "react"
 
 /**