@medusajs/dashboard 3.0.0-preview-20250211091350 → 3.0.0-preview-20250406180144

package/src/components/modals/route-drawer/route-drawer.tsx

@@ -1,12 +1,13 @@
 import { Drawer, clx } from "@medusajs/ui"
 import { PropsWithChildren, useEffect, useState } from "react"
-import { useNavigate } from "react-router-dom"
+import { Path, useNavigate } from "react-router-dom"
+import { useStateAwareTo } from "../hooks/use-state-aware-to"
 import { RouteModalForm } from "../route-modal-form"
 import { RouteModalProvider } from "../route-modal-provider/route-provider"
 import { StackedModalProvider } from "../stacked-modal-provider"
 
 type RouteDrawerProps = PropsWithChildren<{
-  prev?: string
+  prev?: string | Partial<Path>
 }>
 
 const Root = ({ prev = "..", children }: RouteDrawerProps) => {
@@ -14,6 +15,8 @@ const Root = ({ prev = "..", children }: RouteDrawerProps) => {
   const [open, setOpen] = useState(false)
   const [stackedModalOpen, onStackedModalOpen] = useState(false)
 
+  const to = useStateAwareTo(prev)
+
   /**
    * Open the modal when the component mounts. This
    * ensures that the entry animation is played.
@@ -30,7 +33,7 @@ const Root = ({ prev = "..", children }: RouteDrawerProps) => {
   const handleOpenChange = (open: boolean) => {
     if (!open) {
       document.body.style.pointerEvents = "auto"
-      navigate(prev, { replace: true })
+      navigate(to, { replace: true })
       return
     }
 
@@ -39,7 +42,7 @@ const Root = ({ prev = "..", children }: RouteDrawerProps) => {
 
   return (
     <Drawer open={open} onOpenChange={handleOpenChange}>
-      <RouteModalProvider prev={prev}>
+      <RouteModalProvider prev={to}>
         <StackedModalProvider onOpenChange={onStackedModalOpen}>
           <Drawer.Content
             aria-describedby={undefined}

package/src/components/modals/route-focus-modal/route-focus-modal.tsx

@@ -1,13 +1,14 @@
 import { FocusModal, clx } from "@medusajs/ui"
 import { PropsWithChildren, useEffect, useState } from "react"
-import { useNavigate } from "react-router-dom"
+import { Path, useNavigate } from "react-router-dom"
+import { useStateAwareTo } from "../hooks/use-state-aware-to"
 import { RouteModalForm } from "../route-modal-form"
 import { useRouteModal } from "../route-modal-provider"
 import { RouteModalProvider } from "../route-modal-provider/route-provider"
 import { StackedModalProvider } from "../stacked-modal-provider"
 
 type RouteFocusModalProps = PropsWithChildren<{
-  prev?: string
+  prev?: string | Partial<Path>
 }>
 
 const Root = ({ prev = "..", children }: RouteFocusModalProps) => {
@@ -15,6 +16,8 @@ const Root = ({ prev = "..", children }: RouteFocusModalProps) => {
   const [open, setOpen] = useState(false)
   const [stackedModalOpen, onStackedModalOpen] = useState(false)
 
+  const to = useStateAwareTo(prev)
+
   /**
    * Open the modal when the component mounts. This
    * ensures that the entry animation is played.
@@ -31,7 +34,7 @@ const Root = ({ prev = "..", children }: RouteFocusModalProps) => {
   const handleOpenChange = (open: boolean) => {
     if (!open) {
       document.body.style.pointerEvents = "auto"
-      navigate(prev, { replace: true })
+      navigate(to, { replace: true })
       return
     }
 
@@ -40,7 +43,7 @@ const Root = ({ prev = "..", children }: RouteFocusModalProps) => {
 
   return (
     <FocusModal open={open} onOpenChange={handleOpenChange}>
-      <RouteModalProvider prev={prev}>
+      <RouteModalProvider prev={to}>
         <StackedModalProvider onOpenChange={onStackedModalOpen}>
           <Content stackedModalOpen={stackedModalOpen}>{children}</Content>
         </StackedModalProvider>

package/src/components/modals/route-modal-provider/route-provider.tsx

@@ -1,9 +1,9 @@
 import { PropsWithChildren, useCallback, useMemo, useState } from "react"
-import { useNavigate } from "react-router-dom"
+import { Path, useNavigate } from "react-router-dom"
 import { RouteModalProviderContext } from "./route-modal-context"
 
 type RouteModalProviderProps = PropsWithChildren<{
-  prev: string
+  prev: string | Partial<Path>
 }>
 
 export const RouteModalProvider = ({

package/src/components/table/table-cells/common/date-cell/date-cell.tsx

@@ -1,35 +1,33 @@
 import { Tooltip } from "@medusajs/ui"
-import { format } from "date-fns/format"
 import { useTranslation } from "react-i18next"
 import { PlaceholderCell } from "../placeholder-cell"
+import { useDate } from "../../../../../hooks/use-date"
 
 type DateCellProps = {
   date?: Date | string | null
 }
 
 export const DateCell = ({ date }: DateCellProps) => {
+  const { getFullDate } = useDate()
+
   if (!date) {
     return <PlaceholderCell />
   }
 
-  const value = new Date(date)
-  value.setMinutes(value.getMinutes() - value.getTimezoneOffset())
-
-  const hour12 = Intl.DateTimeFormat().resolvedOptions().hour12
-  const timestampFormat = hour12 ? "dd MMM yyyy hh:MM a" : "dd MMM yyyy HH:MM"
-
   return (
     <div className="flex h-full w-full items-center overflow-hidden">
       <Tooltip
         className="z-10"
         content={
-          <span className="text-pretty">{`${format(
-            value,
-            timestampFormat
-          )}`}</span>
+          <span className="text-pretty">{`${getFullDate({
+            date,
+            includeTime: true,
+          })}`}</span>
         }
       >
-        <span className="truncate">{format(value, "dd MMM yyyy")}</span>
+        <span className="truncate">
+          {getFullDate({ date, includeTime: false })}
+        </span>
       </Tooltip>
     </div>
   )

package/src/{extensions/dashboard-extension-manager/dashboard-extension-manager.tsx → dashboard-app/dashboard-app.tsx}

@@ -7,87 +7,123 @@ import {
   NESTED_ROUTE_POSITIONS,
 } from "@medusajs/admin-shared"
 import * as React from "react"
-import { INavItem } from "../../components/layout/nav-item"
+import {
+  createBrowserRouter,
+  RouteObject,
+  RouterProvider,
+} from "react-router-dom"
+import { INavItem } from "../components/layout/nav-item"
+import { Providers } from "../providers"
+import { getRouteMap } from "./routes/get-route.map"
+import { createRouteMap, getRouteExtensions } from "./routes/utils"
 import {
   ConfigExtension,
   ConfigField,
   ConfigFieldMap,
+  DashboardPlugin,
   DisplayExtension,
   DisplayMap,
-  DisplayModule,
   FormExtension,
   FormField,
   FormFieldExtension,
   FormFieldMap,
-  FormModule,
   FormZoneMap,
   MenuItemExtension,
   MenuItemKey,
-  MenuItemModule,
-  WidgetExtension,
-  WidgetModule,
+  MenuMap,
+  WidgetMap,
   ZoneStructure,
-} from "../types"
+} from "./types"
 
-export type DashboardExtensionManagerProps = {
-  formModule: FormModule
-  displayModule: DisplayModule
-  menuItemModule: MenuItemModule
-  widgetModule: WidgetModule
+type DashboardAppProps = {
+  plugins: DashboardPlugin[]
 }
 
-export class DashboardExtensionManager {
-  private widgets: Map<InjectionZone, React.ComponentType[]>
-  private menus: Map<MenuItemKey, INavItem[]>
+export class DashboardApp {
+  private widgets: WidgetMap
+  private menus: MenuMap
   private fields: FormFieldMap
   private configs: ConfigFieldMap
   private displays: DisplayMap
+  private coreRoutes: RouteObject[]
+  private settingsRoutes: RouteObject[]
+
+  constructor({ plugins }: DashboardAppProps) {
+    this.widgets = this.populateWidgets(plugins)
+    this.menus = this.populateMenus(plugins)
 
-  constructor({
-    widgetModule,
-    menuItemModule,
-    displayModule,
-    formModule,
-  }: DashboardExtensionManagerProps) {
-    this.widgets = this.populateWidgets(widgetModule.widgets)
-    this.menus = this.populateMenus(menuItemModule.menuItems)
+    const { coreRoutes, settingsRoutes } = this.populateRoutes(plugins)
+    this.coreRoutes = coreRoutes
+    this.settingsRoutes = settingsRoutes
 
-    const { fields, configs } = this.populateForm(formModule)
+    const { fields, configs } = this.populateForm(plugins)
     this.fields = fields
     this.configs = configs
-    this.displays = this.populateDisplays(displayModule)
+    this.displays = this.populateDisplays(plugins)
   }
 
-  private populateWidgets(widgets: WidgetExtension[] | undefined) {
-    const registry = new Map<InjectionZone, React.ComponentType[]>()
+  private populateRoutes(plugins: DashboardPlugin[]) {
+    const coreRoutes: RouteObject[] = []
+    const settingsRoutes: RouteObject[] = []
 
-    if (!widgets) {
-      return registry
+    for (const plugin of plugins) {
+      const filteredCoreRoutes = getRouteExtensions(plugin.routeModule, "core")
+      const filteredSettingsRoutes = getRouteExtensions(
+        plugin.routeModule,
+        "settings"
+      )
+
+      const coreRoutesMap = createRouteMap(filteredCoreRoutes)
+      const settingsRoutesMap = createRouteMap(filteredSettingsRoutes)
+
+      coreRoutes.push(...coreRoutesMap)
+      settingsRoutes.push(...settingsRoutesMap)
     }
 
-    widgets.forEach((widget) => {
-      widget.zone.forEach((zone) => {
-        if (!registry.has(zone)) {
-          registry.set(zone, [])
-        }
-        registry.get(zone)!.push(widget.Component)
+    return { coreRoutes, settingsRoutes }
+  }
+
+  private populateWidgets(plugins: DashboardPlugin[]) {
+    const registry = new Map<InjectionZone, React.ComponentType[]>()
+
+    plugins.forEach((plugin) => {
+      const widgets = plugin.widgetModule.widgets
+      if (!widgets) {
+        return
+      }
+
+      widgets.forEach((widget) => {
+        widget.zone.forEach((zone) => {
+          if (!registry.has(zone)) {
+            registry.set(zone, [])
+          }
+          registry.get(zone)!.push(widget.Component)
+        })
       })
     })
 
     return registry
   }
 
-  private populateMenus(menuItems: MenuItemExtension[] | undefined) {
+  private populateMenus(plugins: DashboardPlugin[]) {
     const registry = new Map<MenuItemKey, INavItem[]>()
     const tempRegistry: Record<string, INavItem> = {}
 
-    if (!menuItems) {
+    // Collect all menu items from all plugins
+    const allMenuItems: MenuItemExtension[] = []
+    plugins.forEach((plugin) => {
+      if (plugin.menuItemModule.menuItems) {
+        allMenuItems.push(...plugin.menuItemModule.menuItems)
+      }
+    })
+
+    if (allMenuItems.length === 0) {
       return registry
     }
 
-    menuItems.sort((a, b) => a.path.length - b.path.length)
+    allMenuItems.sort((a, b) => a.path.length - b.path.length)
 
-    menuItems.forEach((item) => {
+    allMenuItems.forEach((item) => {
       if (item.path.includes("/:")) {
         if (process.env.NODE_ENV === "development") {
           console.warn(
@@ -114,7 +150,7 @@ export class DashboardExtensionManager {
       }
 
       // Find the parent item if it exists
-      const parentItem = menuItems.find(
+      const parentItem = allMenuItems.find(
         (menuItem) => menuItem.path === parentPath
       )
 
@@ -158,25 +194,62 @@ export class DashboardExtensionManager {
     return registry
   }
 
-  private populateForm(formModule: FormModule): {
+  private populateForm(plugins: DashboardPlugin[]): {
     fields: FormFieldMap
     configs: ConfigFieldMap
   } {
     const fields: FormFieldMap = new Map()
     const configs: ConfigFieldMap = new Map()
 
-    Object.entries(formModule.customFields).forEach(
-      ([model, customization]) => {
-        fields.set(
-          model as CustomFieldModel,
-          this.processFields(customization.forms)
-        )
-        configs.set(
-          model as CustomFieldModel,
-          this.processConfigs(customization.configs)
-        )
-      }
-    )
+    plugins.forEach((plugin) => {
+      Object.entries(plugin.formModule.customFields).forEach(
+        ([model, customization]) => {
+          // Initialize maps if they don't exist for this model
+          if (!fields.has(model as CustomFieldModel)) {
+            fields.set(model as CustomFieldModel, new Map())
+          }
+          if (!configs.has(model as CustomFieldModel)) {
+            configs.set(model as CustomFieldModel, new Map())
+          }
+
+          // Process forms
+          const modelFields = this.processFields(customization.forms)
+          const existingModelFields = fields.get(model as CustomFieldModel)!
+
+          // Merge the maps
+          modelFields.forEach((zoneStructure, zone) => {
+            if (!existingModelFields.has(zone)) {
+              existingModelFields.set(zone, { components: [], tabs: new Map() })
+            }
+
+            const existingZoneStructure = existingModelFields.get(zone)!
+
+            // Merge components
+            existingZoneStructure.components.push(...zoneStructure.components)
+
+            // Merge tabs
+            zoneStructure.tabs.forEach((fields, tab) => {
+              if (!existingZoneStructure.tabs.has(tab)) {
+                existingZoneStructure.tabs.set(tab, [])
+              }
+              existingZoneStructure.tabs.get(tab)!.push(...fields)
+            })
+          })
+
+          // Process configs
+          const modelConfigs = this.processConfigs(customization.configs)
+          const existingModelConfigs = configs.get(model as CustomFieldModel)!
+
+          // Merge the config maps
+          modelConfigs.forEach((configFields, zone) => {
+            if (!existingModelConfigs.has(zone)) {
+              existingModelConfigs.set(zone, [])
+            }
+            existingModelConfigs.get(zone)!.push(...configFields)
+          })
+        }
+      )
+    })
 
     return { fields, configs }
   }
@@ -269,16 +342,36 @@ export class DashboardExtensionManager {
     }
   }
 
-  private populateDisplays(displayModule: DisplayModule): DisplayMap {
+  private populateDisplays(plugins: DashboardPlugin[]): DisplayMap {
     const displays = new Map<
       CustomFieldModel,
       Map<CustomFieldContainerZone, React.ComponentType<{ data: any }>[]>
     >()
 
-    Object.entries(displayModule.displays).forEach(([model, customization]) => {
-      displays.set(
-        model as CustomFieldModel,
-        this.processDisplays(customization)
+    plugins.forEach((plugin) => {
+      Object.entries(plugin.displayModule.displays).forEach(
+        ([model, customization]) => {
+          if (!displays.has(model as CustomFieldModel)) {
+            displays.set(
+              model as CustomFieldModel,
+              new Map<
+                CustomFieldContainerZone,
+                React.ComponentType<{ data: any }>[]
+              >()
+            )
+          }
+
+          const modelDisplays = displays.get(model as CustomFieldModel)!
+          const processedDisplays = this.processDisplays(customization)
+
+          // Merge the displays
+          processedDisplays.forEach((components, zone) => {
+            if (!modelDisplays.has(zone)) {
+              modelDisplays.set(zone, [])
+            }
+            modelDisplays.get(zone)!.push(...components)
+          })
+        }
       )
     })
 
@@ -347,4 +440,21 @@ export class DashboardExtensionManager {
       getDisplays: this.getDisplays.bind(this),
     }
   }
+
+  render() {
+    const routes = getRouteMap({
+      settingsRoutes: this.settingsRoutes,
+      coreRoutes: this.coreRoutes,
+    })
+
+    const router = createBrowserRouter(routes, {
+      basename: __BASE__ || "/",
+    })
+
+    return (
+      <Providers api={this.api}>
+        <RouterProvider router={router} />
+      </Providers>
+    )
+  }
 }

package/src/{extensions → dashboard-app}/forms/form-extension-zone/form-extension-zone.tsx

@@ -1,8 +1,8 @@
-import { Input, Switch } from "@medusajs/ui"
+import { InlineTip, Input, Switch } from "@medusajs/ui"
 import { ComponentType } from "react"
 import { ControllerRenderProps, UseFormReturn } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 import { Form } from "../../../components/common/form"
-import { InlineTip } from "../../../components/common/inline-tip"
 import { FormField } from "../../types"
 import { FormFieldType } from "./types"
 import { getFieldType } from "./utils"
@@ -86,6 +86,8 @@ const FormExtensionFieldComponent = ({
   component,
   placeholder,
 }: FormExtensionFieldComponentProps) => {
+  const { t } = useTranslation()
+
   if (component) {
     const Component = component
 
@@ -104,7 +106,7 @@ const FormExtensionFieldComponent = ({
     }
     default: {
       return (
-        <InlineTip variant="warning">
+        <InlineTip variant="warning" label={t("general.warning")}>
           The field type does not support rendering a fallback component. Please
           provide a component prop.
         </InlineTip>

package/src/{extensions → dashboard-app}/index.ts

@@ -1,5 +1,4 @@
-export * from "./dashboard-extension-manager"
-export * from "./dashboard-extension-provider"
+export * from "./dashboard-app"
 export * from "./forms"
 export * from "./links/utils"
 export * from "./routes/utils"