Admin Dashboard Overview

​

Features

​

Core Commerce Features

• Order Management: View, update, and manage orders, including refunds, returns, and fulfillment
• Product Catalog: Create and manage products, variants, collections, categories, and tags
• Customer Management: Manage customer accounts, groups, and profiles
• Inventory: Track inventory levels, manage stock locations, and handle reservations
• Pricing: Configure price lists, promotions, and campaigns
• Sales Channels: Manage multiple sales channels and their configurations
• Regions & Shipping: Configure regions, shipping profiles, and options
• Tax Management: Set up tax regions and configure tax rules

​

Developer Features

• Extensibility: Add custom routes, widgets, and UI components
• Custom Fields: Extend forms and display custom data
• Theming: Customize colors, branding, and visual appearance
• Internationalization: Built-in support for multiple languages
• API Integration: Seamless integration with Medusa backend via the Admin SDK

​

Architecture

​

Technology Stack

• React 18: UI framework with concurrent rendering
• TypeScript: Type-safe development
• Vite: Fast build tool and development server
• React Router 6: Client-side routing
• TanStack Query: Data fetching and caching
• React Hook Form: Form management and validation
• Zod: Schema validation
• Medusa UI: Design system components

​

Package Structure

packages/admin/
├── dashboard/           # Main React application
├── admin-sdk/          # SDK for extensions and configuration
├── admin-shared/       # Shared types and utilities
├── admin-vite-plugin/  # Vite plugin for bundling extensions
└── admin-bundler/      # Build tooling

​

Core Architecture

​

DashboardApp Class

• Registers and manages plugins
• Populates routes, widgets, menus, and custom fields
• Provides an API for accessing registered extensions
• Renders the application with all providers

import { DashboardApp } from "@medusajs/dashboard"

const app = new DashboardApp({
  plugins: [
    // Your plugins here
  ]
})

app.render()

​

Plugin System

• Routes: Custom pages and navigation
• Widgets: Injectable UI components
• Menu Items: Sidebar navigation entries
• Custom Fields: Form extensions and data displays
• i18n: Translations and localization

type DashboardPlugin = {
  formModule: FormModule
  displayModule: DisplayModule
  menuItemModule: MenuItemModule
  widgetModule: WidgetModule
  routeModule: RouteModule
  i18nModule?: I18nModule
}

​

Injection Zones

• order.details.before / order.details.after
• product.details.before / product.details.after
• customer.details.before / customer.details.after
• And many more for all major entities

​

Providers

• ExtensionProvider: Provides access to registered extensions
• ThemeProvider: Manages light/dark theme switching
• i18nProvider: Handles internationalization
• KeybindProvider: Manages keyboard shortcuts
• SearchProvider: Global search functionality
• SidebarProvider: Sidebar state management

​

Data Flow

1. API Calls: The dashboard uses the Medusa JS SDK to communicate with the backend
2. TanStack Query: Manages data fetching, caching, and synchronization
3. React Hook Form: Handles form state and validation
4. Optimistic Updates: UI updates immediately while background requests process

​

Getting Started

npx medusa develop

​

Next Steps

• Learn how to customize the admin UI
• Add custom routes to create new pages
• Create widgets to extend existing pages
• Review the JavaScript SDK for API integration