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

package/src/routes/orders/order-list/components/order-list-table/components/save-view-dropdown.tsx

@@ -0,0 +1,81 @@
+import React from "react"
+import { Button, DropdownMenu, usePrompt } from "@medusajs/ui"
+import { ChevronDownMini } from "@medusajs/icons"
+
+interface SaveViewDropdownProps {
+  isDefaultView: boolean
+  currentViewId?: string | null
+  currentViewName?: string | null
+  onSaveAsDefault: () => void
+  onUpdateExisting: () => void
+  onSaveAsNew: () => void
+}
+
+export const SaveViewDropdown: React.FC<SaveViewDropdownProps> = ({
+  isDefaultView,
+  currentViewId,
+  currentViewName,
+  onSaveAsDefault,
+  onUpdateExisting,
+  onSaveAsNew,
+}) => {
+  const prompt = usePrompt()
+
+  const handleSaveAsDefault = async () => {
+    const result = await prompt({
+      title: "Update default view",
+      description: "This will update the default view for all users. Are you sure?",
+      confirmText: "Update for everyone",
+      cancelText: "Cancel",
+    })
+
+    if (result) {
+      onSaveAsDefault()
+    }
+  }
+
+  const handleUpdateExisting = async () => {
+    const result = await prompt({
+      title: "Update view",
+      description: `Are you sure you want to update "${currentViewName}"?`,
+      confirmText: "Update",
+      cancelText: "Cancel",
+    })
+
+    if (result) {
+      onUpdateExisting()
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <Button variant="secondary" size="small">
+          Save
+          <ChevronDownMini />
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="end">
+        {isDefaultView ? (
+          <>
+            <DropdownMenu.Item onClick={handleSaveAsDefault}>
+              Update default for everyone
+            </DropdownMenu.Item>
+            <DropdownMenu.Item onClick={onSaveAsNew}>
+              Save as new view
+            </DropdownMenu.Item>
+          </>
+        ) : (
+          <>
+            <DropdownMenu.Item onClick={handleUpdateExisting}>
+              Update "{currentViewName}"
+            </DropdownMenu.Item>
+            <DropdownMenu.Item onClick={onSaveAsNew}>
+              Save as new view
+            </DropdownMenu.Item>
+          </>
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}

package/src/routes/orders/order-list/components/order-list-table/configurable-order-list-table.tsx

@@ -0,0 +1,16 @@
+import { useTranslation } from "react-i18next"
+import { ConfigurableDataTable } from "../../../../../components/table/configurable-data-table"
+import { useOrderTableAdapter } from "./order-table-adapter"
+
+export const ConfigurableOrderListTable = () => {
+  const { t } = useTranslation()
+  const orderAdapter = useOrderTableAdapter()
+
+  return (
+    <ConfigurableDataTable
+      adapter={orderAdapter}
+      heading={t("orders.domain")}
+      layout="fill"
+    />
+  )
+}

package/src/routes/orders/order-list/components/order-list-table/constants.ts

@@ -0,0 +1,14 @@
+export const PAGE_SIZE = 20
+export const DEFAULT_COLUMN_ORDER = 500
+export const QUERY_PREFIX = "o"
+
+export enum ColumnAlignment {
+  LEFT = "left",
+  CENTER = "center",
+  RIGHT = "right",
+}
+
+export interface ColumnState {
+  visibility: Record<string, boolean>
+  order: string[]
+}

package/src/routes/orders/order-list/components/order-list-table/hooks/use-order-data-table-columns.tsx

@@ -0,0 +1,153 @@
+import React, { useMemo } from "react"
+import { createDataTableColumnHelper, StatusBadge } from "@medusajs/ui"
+import { HttpTypes } from "@medusajs/types"
+import { useDate } from "../../../../../../hooks/use-date"
+
+const columnHelper = createDataTableColumnHelper<HttpTypes.AdminOrder>()
+
+export function useOrderDataTableColumns(apiColumns: any[] | undefined) {
+  const { getFullDate } = useDate()
+  
+  return useMemo(() => {
+    if (!apiColumns?.length) {
+      return []
+    }
+
+    return apiColumns.map(apiColumn => {
+      // Special handling for specific columns
+      if (apiColumn.field === "display_id") {
+        return columnHelper.accessor("display_id", {
+          id: apiColumn.field,
+          header: () => apiColumn.name,
+          cell: ({ getValue }) => {
+            const value = getValue()
+            return (
+              <div className="flex items-center gap-x-2">
+                <span className="text-ui-fg-subtle">#</span>
+                <span>{value}</span>
+              </div>
+            )
+          },
+          meta: {
+            name: apiColumn.name,
+            column: apiColumn,
+          },
+          enableHiding: apiColumn.hideable,
+          enableSorting: false,
+        })
+      }
+
+      if (apiColumn.field === "created_at" || apiColumn.field === "updated_at") {
+        return columnHelper.accessor(apiColumn.field as any, {
+          id: apiColumn.field,
+          header: () => apiColumn.name,
+          cell: ({ getValue }) => {
+            const value = getValue()
+            if (!value) return null
+            return getFullDate({ date: value })
+          },
+          meta: {
+            name: apiColumn.name,
+            column: apiColumn,
+          },
+          enableHiding: apiColumn.hideable,
+          enableSorting: false,
+        })
+      }
+
+      if (apiColumn.field === "payment_status") {
+        return columnHelper.accessor("payment_status", {
+          id: apiColumn.field,
+          header: () => apiColumn.name,
+          cell: ({ getValue }) => {
+            const value = getValue()
+            return value ? (
+              <StatusBadge variant="default">{value}</StatusBadge>
+            ) : null
+          },
+          meta: {
+            name: apiColumn.name,
+            column: apiColumn,
+          },
+          enableHiding: apiColumn.hideable,
+          enableSorting: false,
+        })
+      }
+
+      if (apiColumn.field === "fulfillment_status") {
+        return columnHelper.accessor("fulfillment_status", {
+          id: apiColumn.field,
+          header: () => apiColumn.name,
+          cell: ({ getValue }) => {
+            const value = getValue()
+            return value ? (
+              <StatusBadge variant="default">{value}</StatusBadge>
+            ) : null
+          },
+          meta: {
+            name: apiColumn.name,
+            column: apiColumn,
+          },
+          enableHiding: apiColumn.hideable,
+          enableSorting: false,
+        })
+      }
+
+      if (apiColumn.field === "total") {
+        return columnHelper.accessor("total", {
+          id: apiColumn.field,
+          header: () => apiColumn.name,
+          cell: ({ getValue }) => {
+            const value = getValue()
+            // Format as currency if we have the value
+            return value !== null && value !== undefined ? `$${(value / 100).toFixed(2)}` : null
+          },
+          meta: {
+            name: apiColumn.name,
+            column: apiColumn,
+          },
+          enableHiding: apiColumn.hideable,
+          enableSorting: false,
+        })
+      }
+
+      // Handle nested fields with dot notation
+      const fieldParts = apiColumn.field.split(".")
+      
+      return columnHelper.accessor(
+        (row) => {
+          let value: any = row
+          for (const part of fieldParts) {
+            value = value?.[part]
+          }
+          return value
+        },
+        {
+          id: apiColumn.field,
+          header: () => apiColumn.name,
+          cell: ({ getValue }) => {
+            const value = getValue()
+            if (value === null || value === undefined) return null
+            
+            // Handle objects by trying to display sensible values
+            if (typeof value === "object") {
+              if (value.name) return value.name
+              if (value.title) return value.title
+              if (value.code) return value.code
+              if (value.label) return value.label
+              return JSON.stringify(value)
+            }
+            
+            return String(value)
+          },
+          meta: {
+            name: apiColumn.name,
+            column: apiColumn,
+          },
+          enableHiding: apiColumn.hideable,
+          enableSorting: false,
+        }
+      )
+    })
+  }, [apiColumns, getFullDate])
+}

package/src/routes/orders/order-list/components/order-list-table/order-list-table.tsx

@@ -5,9 +5,11 @@ import { useTranslation } from "react-i18next"
 import { _DataTable } from "../../../../../components/table/data-table/data-table"
 import { useOrders } from "../../../../../hooks/api/orders"
 import { useOrderTableColumns } from "../../../../../hooks/table/columns/use-order-table-columns"
-import { useOrderTableFilters } from "../../../../../hooks/table/filters/use-order-table-filters"
+import { useOrderTableFilters } from "./use-order-table-filters"
 import { useOrderTableQuery } from "../../../../../hooks/table/query/use-order-table-query"
 import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
+import { ConfigurableOrderListTable } from "./configurable-order-list-table"
 
 import { DEFAULT_FIELDS } from "../../const"
 
@@ -15,6 +17,13 @@ const PAGE_SIZE = 20
 
 export const OrderListTable = () => {
   const { t } = useTranslation()
+  const isViewConfigEnabled = useFeatureFlag("view_configurations")
+
+  // If feature flag is enabled, use the new configurable table
+  if (isViewConfigEnabled) {
+    return <ConfigurableOrderListTable />
+  }
+
   const { searchParams, raw } = useOrderTableQuery({
     pageSize: PAGE_SIZE,
   })

package/src/routes/orders/order-list/components/order-list-table/order-table-adapter.tsx

@@ -0,0 +1,68 @@
+import { HttpTypes } from "@medusajs/types"
+import { createTableAdapter, TableAdapter } from "../../../../../lib/table/table-adapters"
+import { useOrders } from "../../../../../hooks/api/orders"
+import { useOrderTableFilters } from "./use-order-table-filters"
+import { orderColumnAdapter } from "../../../../../lib/table/entity-adapters"
+
+/**
+ * Create the order table adapter with all order-specific logic
+ */
+export function createOrderTableAdapter(): TableAdapter<HttpTypes.AdminOrder> {
+  return createTableAdapter<HttpTypes.AdminOrder>({
+    entity: "orders",
+    queryPrefix: "o",
+    pageSize: 20,
+    columnAdapter: orderColumnAdapter,
+
+    useData: (fields, params) => {
+      const { orders, count, isError, error, isLoading } = useOrders(
+        {
+          fields,
+          ...params,
+        },
+        {
+          placeholderData: (previousData, previousQuery) => {
+            // Only keep placeholder data if the fields haven't changed
+            const prevFields = previousQuery?.[previousQuery.length - 1]?.query?.fields
+            if (prevFields && prevFields !== fields) {
+              // Fields changed, don't use placeholder data
+              return undefined
+            }
+            // Fields are the same, keep previous data for smooth transitions
+            return previousData
+          },
+        }
+      )
+
+      return {
+        data: orders,
+        count,
+        isLoading,
+        isError,
+        error,
+      }
+    },
+
+    getRowHref: (row) => `/orders/${row.id}`,
+
+    emptyState: {
+      empty: {
+        heading: "No orders found",
+      }
+    }
+  })
+}
+
+/**
+ * Hook to get the order table adapter with filters
+ */
+export function useOrderTableAdapter(): TableAdapter<HttpTypes.AdminOrder> {
+  const filters = useOrderTableFilters()
+  const adapter = createOrderTableAdapter()
+
+  // Add dynamic filters to the adapter
+  return {
+    ...adapter,
+    filters,
+  }
+}

package/src/routes/orders/order-list/components/order-list-table/use-order-table-filters.tsx

@@ -0,0 +1,62 @@
+import { useMemo } from "react"
+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"
+import { useRegions } from "../../../../../hooks/api/regions"
+import { useSalesChannels } from "../../../../../hooks/api/sales-channels"
+
+const filterHelper = createDataTableFilterHelper<HttpTypes.AdminOrder>()
+
+/**
+ * Hook to create filters in the format expected by @medusajs/ui DataTable
+ */
+export const useOrderTableFilters = () => {
+  const { t } = useTranslation()
+  const dateFilters = useDataTableDateFilters()
+
+  const { regions } = useRegions({
+    limit: 1000,
+    fields: "id,name",
+  })
+
+  const { sales_channels } = useSalesChannels({
+    limit: 1000,
+    fields: "id,name",
+  })
+
+  return useMemo(() => {
+    const filters = [...dateFilters]
+
+    if (regions?.length) {
+      filters.push(
+        filterHelper.accessor("region_id", {
+          label: t("fields.region"),
+          type: "multiselect",
+          options: regions.map((r) => ({
+            label: r.name,
+            value: r.id,
+          })),
+        })
+      )
+    }
+
+    if (sales_channels?.length) {
+      filters.push(
+        filterHelper.accessor("sales_channel_id", {
+          label: t("fields.salesChannel"),
+          type: "multiselect",
+          options: sales_channels.map((s) => ({
+            label: s.name,
+            value: s.id,
+          })),
+        })
+      )
+    }
+
+    // TODO: Add payment and fulfillment status filters when they are properly linked to orders
+    // Note: These filters are commented out in the legacy implementation as well
+
+    return filters
+  }, [regions, sales_channels, dateFilters, t])
+}

package/src/routes/orders/order-list/const.ts

@@ -1,4 +1,4 @@
-const DEFAULT_PROPERTIES = [
+export const DEFAULT_PROPERTIES = [
   "id",
   "status",
   "created_at",
@@ -10,7 +10,7 @@ const DEFAULT_PROPERTIES = [
   "currency_code",
 ]
 
-const DEFAULT_RELATIONS = ["*customer", "*sales_channel"]
+export const DEFAULT_RELATIONS = ["*customer", "*sales_channel"]
 
 export const DEFAULT_FIELDS = `${DEFAULT_PROPERTIES.join(
   ","

package/src/routes/orders/order-receive-return/components/order-receive-return-form/order-receive-return-form.tsx

@@ -345,7 +345,8 @@ export function OrderReceiveReturnForm({
                     <div className="flex items-center gap-3">
                       <Form.Control>
                         <Switch
-                          className="mt-1 self-start"
+                          dir="ltr"
+                          className="mt-1 self-start rtl:rotate-180"
                           checked={!!value}
                           onCheckedChange={onChange}
                           {...field}

package/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-create-form.tsx

@@ -25,6 +25,7 @@ import {
   PricingProductsFields,
   PricingProductsSchema,
 } from "./schema"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 enum Tab {
   DETAIL = "detail",
@@ -58,7 +59,7 @@ export const PriceListCreateForm = ({
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<PricingCreateSchemaType>({
     defaultValues: {
       type: "sale",
@@ -249,6 +250,7 @@ export const PriceListCreateForm = ({
   return (
     <RouteFocusModal.Form form={form}>
       <ProgressTabs
+        dir={direction}
         value={tab}
         onValueChange={(tab) => handleChangeTab(tab as Tab)}
         className="flex h-full flex-col overflow-hidden"

package/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-details-form.tsx

@@ -23,6 +23,7 @@ import type {
   PricingCreateSchemaType,
   PricingCustomerGroupsArrayType,
 } from "./schema"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type PriceListDetailsFormProps = {
   form: UseFormReturn<PricingCreateSchemaType>
@@ -30,7 +31,7 @@ type PriceListDetailsFormProps = {
 
 export const PriceListDetailsForm = ({ form }: PriceListDetailsFormProps) => {
   const { t } = useTranslation()
-
+  const direction = useDocumentDirection()
   const { fields, remove, append } = useFieldArray({
     control: form.control,
     name: "rules.customer_group_id",
@@ -78,6 +79,7 @@ export const PriceListDetailsForm = ({ form }: PriceListDetailsFormProps) => {
                   </div>
                   <Form.Control>
                     <RadioGroup
+                      dir={direction}
                       onValueChange={onChange}
                       {...rest}
                       className="grid grid-cols-1 gap-4 md:grid-cols-2"
@@ -133,7 +135,11 @@ export const PriceListDetailsForm = ({ form }: PriceListDetailsFormProps) => {
                       {t("priceLists.fields.status.label")}
                     </Form.Label>
                     <Form.Control>
-                      <Select {...field} onValueChange={onChange}>
+                      <Select
+                        dir={direction}
+                        {...field}
+                        onValueChange={onChange}
+                      >
                         <Select.Trigger ref={ref}>
                           <Select.Value />
                         </Select.Trigger>

package/src/routes/price-lists/price-list-detail/components/price-list-product-section/price-list-product-section.tsx

@@ -113,7 +113,7 @@ export const PriceListProductSection = ({
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading>{t("priceLists.products.header")}</Heading>
+        <Heading level="h2">{t("priceLists.products.header")}</Heading>
         <ActionMenu
           groups={[
             {

package/src/routes/price-lists/price-list-edit/components/price-list-edit-form/edit-price-list-form.tsx

@@ -16,6 +16,7 @@ import { Form } from "../../../../../components/common/form"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdatePriceList } from "../../../../../hooks/api/price-lists"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 import { PriceListStatus, PriceListType } from "../../../common/constants"
 
 type PriceListEditFormProps = {
@@ -32,7 +33,7 @@ const PriceListEditSchema = z.object({
 export const PriceListEditForm = ({ priceList }: PriceListEditFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<z.infer<typeof PriceListEditSchema>>({
     defaultValues: {
       type: priceList.type as PriceListType,
@@ -80,7 +81,11 @@ export const PriceListEditForm = ({ priceList }: PriceListEditFormProps) => {
                     <Form.Hint>{t("priceLists.fields.type.hint")}</Form.Hint>
                   </div>
                   <Form.Control>
-                    <RadioGroup {...field} onValueChange={onChange}>
+                    <RadioGroup
+                      dir={direction}
+                      {...field}
+                      onValueChange={onChange}
+                    >
                       <RadioGroup.ChoiceBox
                         value={PriceListType.SALE}
                         label={t("priceLists.fields.type.options.sale.label")}
@@ -130,7 +135,11 @@ export const PriceListEditForm = ({ priceList }: PriceListEditFormProps) => {
                       {t("priceLists.fields.status.label")}
                     </Form.Label>
                     <Form.Control>
-                      <Select {...field} onValueChange={onChange}>
+                      <Select
+                          dir={direction}
+                        {...field}
+                        onValueChange={onChange}
+                      >
                         <Select.Trigger ref={ref}>
                           <Select.Value />
                         </Select.Trigger>

package/src/routes/price-lists/price-list-prices-add/components/price-list-prices-add-form/price-list-prices-add-form.tsx

@@ -21,6 +21,7 @@ import {
   PriceListPricesAddProductsIdsFields,
   PriceListPricesAddSchema,
 } from "./schema"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type PriceListPricesAddFormProps = {
   priceList: HttpTypes.AdminPriceList
@@ -54,7 +55,7 @@ export const PriceListPricesAddForm = ({
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<PriceListPricesAddSchema>({
     defaultValues: {
       products: {},
@@ -90,10 +91,13 @@ export const PriceListPricesAddForm = ({
   ) => {
     form.clearErrors(fields)
 
-    const values = fields.reduce((acc, key) => {
-      acc[key] = form.getValues(key)
-      return acc
-    }, {} as Record<string, unknown>)
+    const values = fields.reduce(
+      (acc, key) => {
+        acc[key] = form.getValues(key)
+        return acc
+      },
+      {} as Record<string, unknown>
+    )
 
     const validationResult = schema.safeParse(values)
 
@@ -196,6 +200,7 @@ export const PriceListPricesAddForm = ({
   return (
     <RouteFocusModal.Form form={form}>
       <ProgressTabs
+        dir={direction}
         value={tab}
         onValueChange={(tab) => handleChangeTab(tab as Tab)}
         className="flex h-full flex-col overflow-hidden"

package/src/routes/price-lists/price-list-prices-add/components/price-list-prices-add-form/price-list-prices-add-product-ids-form.tsx

@@ -125,6 +125,7 @@ export const PriceListPricesAddProductIdsForm = ({
       updater,
     },
     pageSize: PAGE_SIZE,
+    prefix: PREFIX,
     meta: {
       variantIdMap,
     },

package/src/routes/product-tags/product-tag-detail/product-tag-detail.tsx

@@ -40,6 +40,7 @@ export const ProductTagDetail = () => {
         before: getWidgets("product_tag.details.before"),
       }}
       showJSON
+      showMetadata
       data={product_tag}
     >
       <ProductTagGeneralSection productTag={product_tag} />

package/src/routes/product-tags/product-tag-metadata/index.ts

@@ -0,0 +1 @@
+export { ProductTagMetadata as Component } from "./product-tag-metadata"

package/src/routes/product-tags/product-tag-metadata/product-tag-metadata.tsx

@@ -0,0 +1,26 @@
+import { useParams } from "react-router-dom"
+import { MetadataForm } from "../../../components/forms/metadata-form/metadata-form"
+import { useProductTag, useUpdateProductTag } from "../../../hooks/api"
+
+export const ProductTagMetadata = () => {
+  const { id } = useParams()
+
+  const { product_tag, isPending, isError, error } = useProductTag(id!)
+
+  const { mutateAsync, isPending: isMutating } = useUpdateProductTag(
+    product_tag?.id!
+  )
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <MetadataForm
+      metadata={product_tag?.metadata}
+      hook={mutateAsync}
+      isPending={isPending}
+      isMutating={isMutating}
+    />
+  )
+}

package/src/routes/product-types/product-type-metadata/index.ts

@@ -0,0 +1 @@
+export { ProductTypeMetadata as Component } from "./product-type-metadata"