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

package/src/lib/client/client.ts

@@ -1,11 +1,14 @@
 import Medusa from "@medusajs/js-sdk"
 
 export const backendUrl = __BACKEND_URL__ ?? "/"
+const authType = __AUTH_TYPE__ ?? "session"
+const jwtTokenStorageKey = __JWT_TOKEN_STORAGE_KEY__ || undefined
 
 export const sdk = new Medusa({
   baseUrl: backendUrl,
   auth: {
-    type: "session",
+    type: authType,
+    jwtTokenStorageKey
   },
 })
 

package/src/routes/orders/order-detail/components/order-activity-section/order-timeline.tsx

@@ -18,6 +18,7 @@ import { By } from "../../../../../components/common/user-link"
 import {
   useCancelOrderTransfer,
   useCustomer,
+  useOrder,
   useOrderChanges,
   useOrderLineItems,
 } from "../../../../../hooks/api"
@@ -123,6 +124,11 @@ type Activity = {
 const useActivityItems = (order: AdminOrder): Activity[] => {
   const { t } = useTranslation()
 
+  const { order: initialOrder = order } = useOrder(order.id, {
+    version: 1,
+    fields: "created_at,total,currency_code",
+  }, { enabled: order.version !== 1})
+
   const { order_changes: orderChanges = [] } = useOrderChanges(order.id, {
     change_type: [
       "edit",
@@ -520,19 +526,23 @@ const useActivityItems = (order: AdminOrder): Activity[] => {
       return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
     })
 
-    const createdAt = {
-      title: t("orders.activity.events.placed.title"),
-      timestamp: order.created_at,
-      children: (
-        <Text size="small" className="text-ui-fg-subtle">
-          {getStylizedAmount(order.total, order.currency_code)}
-        </Text>
-      ),
+    if (initialOrder.created_at) {
+        const createdAt = {
+          title: t("orders.activity.events.placed.title"),
+          timestamp: initialOrder.created_at,
+          children: (
+            <Text size="small" className="text-ui-fg-subtle">
+              {getStylizedAmount(initialOrder.total, initialOrder.currency_code)}
+            </Text>
+          ),
+        }
+        sortedActivities.push(createdAt)
     }
 
-    return [...sortedActivities, createdAt]
+    return [...sortedActivities]
   }, [
     order,
+    initialOrder,
     payments,
     returns,
     exchanges,

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

@@ -1,19 +1,14 @@
 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 { Filter } from "../../../../../components/table/data-table"
 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
+ * Hook to create filters in the format expected by the deprecated DataTable component
  */
 export const useOrderTableFilters = () => {
   const { t } = useTranslation()
-  const dateFilters = useDataTableDateFilters()
 
   const { regions } = useRegions({
     limit: 1000,
@@ -25,38 +20,53 @@ export const useOrderTableFilters = () => {
     fields: "id,name",
   })
 
+  // Until we migrate to the new DataTable component, we can't use `createDataTableFilterHelper` filter structure, since th identifier there is `is` 
+  // while deprecated component expexts `key`. Will be ready to migrate once SUP-2651 is done
   return useMemo(() => {
-    const filters = [...dateFilters]
+    const filters: Filter[] = [
+      {
+        key: "created_at",
+        label: t("fields.createdAt"),
+        type: "date",
+      },
+      {
+        key: "updated_at",
+        label: t("fields.updatedAt"),
+        type: "date",
+      },
+    ]
 
     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,
-          })),
-        })
-      )
+      filters.push({
+        key: "region_id",
+        label: t("fields.region"),
+        type: "select",
+        multiple: true,
+        searchable: true,
+        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,
-          })),
-        })
-      )
+      filters.push({
+        key: "sales_channel_id",
+        label: t("fields.salesChannel"),
+        type: "select",
+        multiple: true,
+        searchable: true,
+        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])
-}
+  }, [regions, sales_channels, t])
+}

package/src/routes/products/common/components/upload-media-form-item/upload-media-form-item.tsx

@@ -5,6 +5,7 @@ import { z } from "zod"
 import {
   FileType,
   FileUpload,
+  RejectedFile,
 } from "../../../../../components/common/file-upload"
 import { Form } from "../../../../../components/common/form"
 import { MediaSchema } from "../../../product-create/constants"
@@ -47,11 +48,13 @@ export const UploadMediaFormItem = ({
   const { t } = useTranslation()
 
   const hasInvalidFiles = useCallback(
-    (fileList: FileType[]) => {
+    (fileList: FileType[] = [], rejectedFiles: RejectedFile[] = []) => {
       const invalidFile = fileList.find(
-        (f) => !SUPPORTED_FORMATS.includes(f.file.type)
+        (f) => !SUPPORTED_FORMATS.includes(f?.file?.type)
       )
 
+      let hasInvalidFile = false;
+
       if (invalidFile) {
         form.setError("media", {
           type: "invalid_file",
@@ -61,22 +64,37 @@ export const UploadMediaFormItem = ({
           }),
         })
 
-        return true
+        hasInvalidFile = true;
+      }
+
+      const fileSizeRejections = rejectedFiles.filter((f) => f?.reason === "size")
+
+      if (fileSizeRejections.length) {
+        const fileNames = "\n" + fileSizeRejections.slice(0, 5).map((f) => f.file.name).join("\n")
+        form.setError("media", {
+          type: "file_too_large",
+          message: t("products.media.fileTooLarge", {
+            name: fileNames,
+            size: "1MB",
+          }),
+        })
+
+        hasInvalidFile = true;
       }
 
-      return false
+      return hasInvalidFile;
     },
     [form, t]
   )
 
   const onUploaded = useCallback(
-    (files: FileType[]) => {
+    (files: FileType[] = [], rejectedFiles: RejectedFile[] = []) => {
       form.clearErrors("media")
-      if (hasInvalidFiles(files)) {
+      if (hasInvalidFiles(files, rejectedFiles)) {
         return
       }
 
-      files.forEach((f) => append({ ...f, isThumbnail: false }))
+      files?.forEach((f) => append({ ...f, isThumbnail: false }))
     },
     [form, append, hasInvalidFiles]
   )
@@ -106,7 +124,7 @@ export const UploadMediaFormItem = ({
                   onUploaded={onUploaded}
                 />
               </Form.Control>
-              <Form.ErrorMessage />
+              <Form.ErrorMessage className="whitespace-pre-line" />
             </div>
           </Form.Item>
         )

package/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-general-section/product-create-general-section.tsx

@@ -27,7 +27,10 @@ export const ProductCreateGeneralSection = ({
                 <Form.Item>
                   <Form.Label>{t("products.fields.title.label")}</Form.Label>
                   <Form.Control>
-                    <Input {...field} placeholder={t("products.fields.title.placeholder")} />
+                    <Input
+                      {...field}
+                      placeholder={t("products.fields.title.placeholder")}
+                    />
                   </Form.Control>
                 </Form.Item>
               )
@@ -43,7 +46,10 @@ export const ProductCreateGeneralSection = ({
                     {t("products.fields.subtitle.label")}
                   </Form.Label>
                   <Form.Control>
-                    <Input {...field} placeholder={t("products.fields.subtitle.placeholder")} />
+                    <Input
+                      {...field}
+                      placeholder={t("products.fields.subtitle.placeholder")}
+                    />
                   </Form.Control>
                 </Form.Item>
               )
@@ -62,7 +68,10 @@ export const ProductCreateGeneralSection = ({
                     {t("fields.handle")}
                   </Form.Label>
                   <Form.Control>
-                    <HandleInput {...field} placeholder={t("products.fields.handle.placeholder")} />
+                    <HandleInput
+                      {...field}
+                      placeholder={t("products.fields.handle.placeholder")}
+                    />
                   </Form.Control>
                 </Form.Item>
               )
@@ -80,7 +89,10 @@ export const ProductCreateGeneralSection = ({
                 {t("products.fields.description.label")}
               </Form.Label>
               <Form.Control>
-                <Textarea {...field} placeholder={t("products.fields.description.placeholder")} />
+                <Textarea
+                  {...field}
+                  placeholder={t("products.fields.description.placeholder")}
+                />
               </Form.Control>
             </Form.Item>
           )

package/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx

@@ -240,6 +240,7 @@ export const ProductCreateVariantsSection = ({
         id: option.id,
         title: option.title,
         values: selectedValues,
+        value_ids: selectedValueIds,
       }
     })
 
@@ -364,6 +365,9 @@ export const ProductCreateVariantsSection = ({
             } else {
               createDefaultOptionAndVariant()
             }
+            setSelectedOptionIds([])
+            setSelectedOptionValues({})
+            setCustomValues({})
           }}
         />
       </div>
@@ -387,6 +391,7 @@ export const ProductCreateVariantsSection = ({
               options={productOptionChoices}
               placeholder={t("products.fields.options.optionTitlePlaceholder")}
               disabled={isLoading}
+              displayMode="chips"
             />
           </div>
           {selectedOptionIds.length > 0 && (
@@ -424,12 +429,13 @@ export const ProductCreateVariantsSection = ({
                             handleValueChange(option.id, value as string[])
                           }
                           onCreateOption={(_) => {
-                            // Nothing
+                            // Todo
                           }}
                           options={valueOptions}
                           placeholder={t(
                             "products.fields.options.variantionsPlaceholder"
                           )}
+                          displayMode="chips"
                         />
                       </div>
                     )

package/src/routes/products/product-create/constants.ts

@@ -50,6 +50,7 @@ const ProductCreateOptionSchema = z.object({
   id: z.string().optional(),
   title: z.string(),
   values: z.array(z.string()).min(1),
+  value_ids: z.array(z.string()).optional(),
 })
 
 export type ProductCreateOptionSchema = z.infer<

package/src/routes/products/product-create/utils.ts

@@ -44,8 +44,8 @@ export const normalizeProductFormValues = (
     height: values.height ? parseFloat(values.height) : undefined,
     weight: values.weight ? parseFloat(values.weight) : undefined,
     options: options.map((option) => {
-      const { id, ...rest } = option
-      return id ? { id } : rest
+      const { id, value_ids, ...rest } = option
+      return id ? { id, value_ids } : { ...rest, is_exclusive: true }
     }),
     variants: normalizeVariants(
       values.variants.filter((variant) => variant.should_create),

package/src/routes/products/product-detail/components/product-general-section/product-general-section.tsx

@@ -102,6 +102,7 @@ export const ProductGeneralSection = ({
       <SectionRow title={t("fields.description")} value={product.description} />
       <SectionRow title={t("fields.subtitle")} value={product.subtitle} />
       <SectionRow title={t("fields.handle")} value={`/${product.handle}`} />
+      <SectionRow title={t("fields.material")} value={product.material} />
       <SectionRow
         title={t("fields.discountable")}
         value={product.discountable ? t("fields.true") : t("fields.false")}

package/src/routes/products/product-detail/components/product-option-section/product-option-section.tsx

@@ -62,17 +62,30 @@ export const ProductOptionSection = ({
           <SectionRow
             title={option.title}
             key={option.id}
-            value={option.values?.map((val) => {
-              return (
-                <Badge
-                  key={val.value}
-                  size="2xsmall"
-                  className="flex min-w-[20px] items-center justify-center"
-                >
-                  {val.value}
-                </Badge>
-              )
-            })}
+            value={option.values
+              ?.sort((a, b) => {
+                if (a.rank == null && b.rank == null) {
+                  return 0
+                }
+                if (a.rank == null) {
+                  return 1
+                }
+                if (b.rank == null) {
+                  return -1
+                }
+                return a.rank - b.rank
+              })
+              .map((val) => {
+                return (
+                  <Badge
+                    key={val.value}
+                    size="2xsmall"
+                    className="flex min-w-[20px] items-center justify-center"
+                  >
+                    {val.value}
+                  </Badge>
+                )
+              })}
             actions={<OptionActions option={option} />}
           />
         )

package/src/routes/products/product-import/components/upload-import.tsx

@@ -48,6 +48,7 @@ export const UploadImport = ({
           }
           onUploaded(files[0].file)
         }}
+        maxFileSize={Infinity}
       />
 
       {error && (

package/src/routes/products/product-options-manage/components/product-options-manage-form/product-options-manage-form.tsx

@@ -1,5 +1,5 @@
 import { HttpTypes } from "@medusajs/types"
-import { Button, toast } from "@medusajs/ui"
+import { Button, Hint, Label, toast } from "@medusajs/ui"
 import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
@@ -21,6 +21,7 @@ type ProductOptionsManageFormProps = {
 
 const ProductOptionsManageSchema = zod.object({
   option_ids: zod.array(zod.string()),
+  option_values: zod.record(zod.array(zod.string())).optional(),
 })
 
 export const ProductOptionsManageForm = ({
@@ -46,9 +47,27 @@ export const ProductOptionsManageForm = ({
     product.options?.map((opt) => opt.id) || []
   )
 
+  const [selectedOptionValues, setSelectedOptionValues] = useState<
+    Record<string, string[]>
+  >(() => {
+    // Initialize with existing product option values
+    const initialValues: Record<string, string[]> = {}
+    product.options?.forEach((opt) => {
+      initialValues[opt.id] = opt.values?.map((v) => v.id) || []
+    })
+    return initialValues
+  })
+
   const form = useExtendableForm({
     defaultValues: {
       option_ids: product.options?.map((opt) => opt.id) || [],
+      option_values: (() => {
+        const initialValues: Record<string, string[]> = {}
+        product.options?.forEach((opt) => {
+          initialValues[opt.id] = opt.values?.map((v) => v.id) || []
+        })
+        return initialValues
+      })(),
     },
     schema: ProductOptionsManageSchema,
     configs: configs,
@@ -60,19 +79,92 @@ export const ProductOptionsManageForm = ({
   const handleProductOptionSelect = (optionIds: string[]) => {
     setSelectedOptionIds(optionIds)
     form.setValue("option_ids", optionIds)
+
+    // Initialize selected values for new options (select all by default)
+    const newSelectedValues: Record<string, string[]> = {}
+    const selectedProductOptions = product_options.filter((option) =>
+      optionIds.includes(option.id)
+    )
+
+    selectedProductOptions.forEach((option) => {
+      // If option was already selected, keep its current value selection
+      if (selectedOptionValues[option.id]) {
+        newSelectedValues[option.id] = selectedOptionValues[option.id]
+      } else {
+        // New option - select all values by default
+        newSelectedValues[option.id] = option.values?.map((v) => v.id) || []
+      }
+    })
+
+    setSelectedOptionValues(newSelectedValues)
+    form.setValue("option_values", newSelectedValues)
+  }
+
+  const handleValueChange = (optionId: string, valueIds: string[]) => {
+    // Ensure at least one value is selected
+    if (valueIds.length === 0) {
+      return
+    }
+
+    const updatedSelectedValues = {
+      ...selectedOptionValues,
+      [optionId]: valueIds,
+    }
+
+    setSelectedOptionValues(updatedSelectedValues)
+    form.setValue("option_values", updatedSelectedValues)
   }
 
   const handleSubmit = form.handleSubmit(async (data) => {
     const currentOptionIds = product.options?.map((opt) => opt.id) || []
     const newOptionIds = data.option_ids
 
-    // Determine which options to add and remove
-    const optionsToAdd = newOptionIds.filter(
-      (id) => !currentOptionIds.includes(id)
-    )
-    const optionsToRemove = currentOptionIds.filter(
-      (id) => !newOptionIds.includes(id)
-    )
+    const optionsToAdd: (string | { id: string; value_ids: string[] })[] = []
+    const optionsToRemove: string[] = []
+
+    // Check for completely removed options
+    for (const currentId of currentOptionIds) {
+      if (!newOptionIds.includes(currentId)) {
+        optionsToRemove.push(currentId)
+      }
+    }
+
+    // Check for new options or options with changed values
+    for (const newId of newOptionIds) {
+      const isNewOption = !currentOptionIds.includes(newId)
+
+      if (isNewOption) {
+        optionsToAdd.push(
+          data.option_values
+            ? {
+                id: newId,
+                value_ids: data.option_values[newId],
+              }
+            : newId
+        )
+      } else {
+        const currentOption = product.options?.find((opt) => opt.id === newId)
+        const currentValueIds =
+          currentOption?.values?.map((v) => v.id).sort() || []
+        const newValueIds = [...(data.option_values?.[newId] || [])].sort()
+
+        const valuesChanged =
+          currentValueIds.length !== newValueIds.length ||
+          currentValueIds.some((id, index) => id !== newValueIds[index])
+
+        if (valuesChanged) {
+          optionsToRemove.push(newId)
+          optionsToAdd.push(
+            data.option_values
+              ? {
+                  id: newId,
+                  value_ids: data.option_values[newId],
+                }
+              : newId
+          )
+        }
+      }
+    }
 
     await mutateAsync(
       {
@@ -120,6 +212,7 @@ export const ProductOptionsManageForm = ({
                         options={productOptionChoices}
                         placeholder={t("products.options.manage.placeholder")}
                         disabled={isLoading}
+                        displayMode="chips"
                       />
                     </Form.Control>
                     <Form.ErrorMessage />
@@ -127,6 +220,50 @@ export const ProductOptionsManageForm = ({
                 )
               }}
             />
+            {selectedOptionIds.length > 0 && (
+              <div className="flex flex-col gap-y-4">
+                <div className="flex flex-col">
+                  <Label weight="plus">{t("fields.values")}</Label>
+                  <Hint>{t("products.create.variants.selectValuesHint")}</Hint>
+                </div>
+                <div className="flex flex-col gap-y-3">
+                  {product_options
+                    .filter((option) => selectedOptionIds.includes(option.id))
+                    .map((option) => {
+                      const valueOptions =
+                        option.values
+                          ?.sort((a, b) => {
+                            const rankA = a.rank ?? Number.MAX_VALUE
+                            const rankB = b.rank ?? Number.MAX_VALUE
+                            return rankA - rankB
+                          })
+                          .map((v) => ({
+                            value: v.id,
+                            label: v.value,
+                          })) || []
+
+                      return (
+                        <div key={option.id} className="flex flex-col gap-y-2">
+                          <Label size="small" weight="plus">
+                            {option.title}
+                          </Label>
+                          <Combobox
+                            value={selectedOptionValues[option.id] || []}
+                            onChange={(value) =>
+                              handleValueChange(option.id, value as string[])
+                            }
+                            options={valueOptions}
+                            placeholder={t(
+                              "products.fields.options.variantionsPlaceholder"
+                            )}
+                            displayMode="chips"
+                          />
+                        </div>
+                      )
+                    })}
+                </div>
+              </div>
+            )}
           </div>
         </RouteDrawer.Body>
         <RouteDrawer.Footer>

package/src/vite-env.d.ts

@@ -16,3 +16,5 @@ interface ImportMeta {
 declare const __BACKEND_URL__: string | undefined
 declare const __STOREFRONT_URL__: string | undefined
 declare const __BASE__: string
+declare const __AUTH_TYPE__: "session" | "jwt" | undefined
+declare const __JWT_TOKEN_STORAGE_KEY__: string | undefined