Merge branch 'feat/payment-module-models' into feat/payment-module-interfaces

.changeset/cool-rockets-wash.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/types": patch
+"@medusajs/utils": patch
+---
+
+feat(utils,types): add registerUsages for promotion's computed actions

.changeset/forty-shrimps-watch.md

@@ -0,0 +1,9 @@
+---
+"@medusajs/ui": minor
+"@medusajs/ui-preset": minor
+"@medusajs/icons": minor
+---
+
+feat(ui): Updates spacing and sizing of components. Introduces new `size` variants for some components, such as `Button`, `IconButton`, and `Avatar`. Change most `:focus` styles to `:focus-visible` styles, to prevenent focus styles from being visible when not needed, such as on button clicks.
+feat(ui-preset): Publishes latest updates to our design system styles, as well as adding new colors. Noticable changes include changing `ui-code-text-*` styles to `ui-code-fg-*` for better consistency.
+feat(icons): Updates the `LockClosedSolid` and `LockOpenSolid` icons, and introduces four new icons: `LockClosedSolidMini`, `TriangleLeftMini`, `TriangleRightMini`, and `TriangleMini`.

.changeset/khaki-deers-talk.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/types": patch
+---
+
+Add line items in cart creation

.changeset/lazy-shoes-kiss.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/types": patch
+---
+
+feat(types): add campaign + promotion operations

.changeset/neat-seals-help.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/modules-sdk": patch
+---
+
+feat(modules-sdk): run hooks on application start

.changeset/olive-ads-brake.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/types": patch
+---
+
+feat(cart): Shipping methods

.changeset/three-files-yawn.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/workflows-sdk": patch
+---
+
+create workflow can return destructured properties of a step

.changeset/twenty-emus-roll.md

@@ -0,0 +1,8 @@
+---
+"@medusajs/pricing": patch
+"@medusajs/product": patch
+"@medusajs/utils": patch
+"@medusajs/types": patch
+---
+
+chore: Abstract module services

.eslintrc.js

@@ -227,7 +227,7 @@ module.exports = {
       },
     },
     {
-      files: ["packages/admin-next/dashboard/**/*"],
+      files: ["packages/admin-next/dashboard/src/**/*.{ts,tsx}"],
       env: { browser: true, es2020: true, node: true },
       extends: [
         "eslint:recommended",
@@ -236,7 +236,7 @@ module.exports = {
       ],
       parser: "@typescript-eslint/parser",
       parserOptions: {
-        project: "./packages/admin-next/dashboard/tsconfig.json",
+        project: "tsconfig.json",
       },
       plugins: ["react-refresh"],
       rules: {

CODEOWNERS

@@ -1,5 +1,5 @@
 # All files not owned by other teams must be reviewed by the core team
-*                                               @medusajs/core
+*                                               @medusajs/core @medusajs/engineering
 /docs-util/                                     @medusajs/docs
 /www/                                           @medusajs/docs
 /packages/admin                                 @medusajs/ui

integration-tests/plugins/__tests__/workflows/utils/composer/compose.ts

@@ -1980,4 +1980,110 @@ describe("Workflow composer", function () {
     expect(mockStep1Fn.mock.calls[0][0]).toEqual(workflowInput)
     expect(mockCompensateSte1.mock.calls[0][0]).toEqual(undefined)
   })
+
+  it("should compose a workflow that returns destructured properties", async () => {
+    const step = function () {
+      return new StepResponse({
+        propertyNotReturned: 1234,
+        property: {
+          complex: {
+            nested: 123,
+          },
+          a: "bc",
+        },
+        obj: "return from 2",
+      })
+    }
+
+    const step1 = createStep("step1", step)
+
+    const workflow = createWorkflow("workflow1", function () {
+      const { property, obj } = step1()
+
+      return { someOtherName: property, obj }
+    })
+
+    const { result } = await workflow().run({
+      throwOnError: false,
+    })
+
+    expect(result).toEqual({
+      someOtherName: {
+        complex: {
+          nested: 123,
+        },
+        a: "bc",
+      },
+      obj: "return from 2",
+    })
+  })
+
+  it("should compose a workflow that returns an array of steps", async () => {
+    const step1 = createStep("step1", () => {
+      return new StepResponse({
+        obj: "return from 1",
+      })
+    })
+    const step2 = createStep("step2", () => {
+      return new StepResponse({
+        obj: "returned from 2**",
+      })
+    })
+
+    const workflow = createWorkflow("workflow1", function () {
+      const s1 = step1()
+      const s2 = step2()
+
+      return [s1, s2]
+    })
+
+    const { result } = await workflow().run({
+      throwOnError: false,
+    })
+
+    expect(result).toEqual([
+      {
+        obj: "return from 1",
+      },
+      {
+        obj: "returned from 2**",
+      },
+    ])
+  })
+
+  it("should compose a workflow that returns an object mixed of steps and properties", async () => {
+    const step1 = createStep("step1", () => {
+      return new StepResponse({
+        obj: {
+          nested: "nested",
+        },
+      })
+    })
+
+    const step2 = createStep("step2", () => {
+      return new StepResponse({
+        obj: "returned from 2**",
+      })
+    })
+
+    const workflow = createWorkflow("workflow1", function () {
+      const { obj } = step1()
+      const s2 = step2()
+
+      return [{ step1_nested_obj: obj.nested }, s2]
+    })
+
+    const { result } = await workflow().run({
+      throwOnError: false,
+    })
+
+    expect(result).toEqual([
+      {
+        step1_nested_obj: "nested",
+      },
+      {
+        obj: "returned from 2**",
+      },
+    ])
+  })
 })

packages/admin-next/dashboard/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
+    "generate:static": "node ./scripts/generate-countries.js && prettier --write ./src/lib/countries.ts && node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
@@ -23,6 +24,7 @@
     "@tanstack/react-table": "8.10.7",
     "@uiw/react-json-view": "2.0.0-alpha.10",
     "cmdk": "^0.2.0",
+    "date-fns": "^3.2.0",
     "i18next": "23.7.11",
     "i18next-browser-languagedetector": "7.2.0",
     "i18next-http-backend": "2.4.2",
@@ -36,15 +38,15 @@
   },
   "devDependencies": {
     "@medusajs/medusa": "workspace:^",
+    "@medusajs/types": "workspace:^",
     "@medusajs/ui-preset": "workspace:^",
     "@medusajs/vite-plugin-extension": "workspace:^",
     "@types/react": "18.2.43",
     "@types/react-dom": "18.2.17",
-    "@typescript-eslint/eslint-plugin": "6.14.0",
-    "@typescript-eslint/parser": "6.14.0",
     "@vitejs/plugin-react": "4.2.1",
     "autoprefixer": "10.4.16",
     "postcss": "8.4.32",
+    "prettier": "^3.1.1",
     "tailwindcss": "3.3.6",
     "typescript": "5.2.2",
     "vite": "5.0.10"

packages/admin-next/dashboard/public/locales/en/translation.json

@@ -1,12 +1,26 @@
 {
   "$schema": "../$schema.json",
   "general": {
+    "ascending": "Ascending",
+    "descending": "Descending",
     "cancel": "Cancel",
     "save": "Save",
     "create": "Create",
     "delete": "Delete",
     "edit": "Edit",
+    "confirm": "Confirm",
+    "add": "Add",
+    "continue": "Continue",
+    "start": "Start",
+    "end": "End",
+    "apply": "Apply",
+    "range": "Range",
     "search": "Search",
+    "of": "of",
+    "results": "results",
+    "pages": "pages",
+    "next": "Next",
+    "prev": "Prev",
     "extensions": "Extensions",
     "settings": "Settings",
     "general": "General",
@@ -14,17 +28,26 @@
     "enabled": "Enabled",
     "disabled": "Disabled",
     "remove": "Remove",
+    "admin": "Admin",
+    "store": "Store",
     "countSelected": "{{count}} selected",
     "plusCountMore": "+ {{count}} more",
     "areYouSure": "Are you sure?",
-    "noRecordsFound": "No records found"
+    "noRecordsFound": "No records found",
+    "typeToConfirm": "Please type {val} to confirm:",
+    "noResultsTitle": "No results",
+    "noResultsMessage": "Try changing the filters or search query",
+    "noRecordsTitle": "No records",
+    "noRecordsMessage": "There are no records to show",
+    "unsavedChangesTitle": "Are you sure you want to leave this page?",
+    "unsavedChangesDescription": "You have unsaved changes that will be lost if you leave this page."
   },
   "products": {
     "domain": "Products",
     "variants": "Variants",
     "availableInSalesChannels": "Available in <0>{{x}}</0> of <1>{{y}}</1> sales channels",
-    "inStockVariants_one": "{{inventory}} in stock for {{count}} variant",
-    "inStockVariants_other": "{{inventory}} in stock for {{count}} variants",
+    "variantCount_one": "{{count}} variant",
+    "variantCount_other": "{{count}} variants",
     "productStatus": {
       "draft": "Draft",
       "published": "Published",
@@ -45,10 +68,28 @@
     "domain": "Gift Cards"
   },
   "customers": {
-    "domain": "Customers"
+    "domain": "Customers",
+    "editCustomer": "Edit Customer",
+    "createCustomer": "Create Customer",
+    "createCustomerHint": "Create a new customer to manage their details.",
+    "passwordHint": "Create a password for the customer to use when logging in to the storefront. Make sure that you communicate the password to the customer.",
+    "changePassword": "Change password",
+    "changePasswordPromptTitle": "Change password",
+    "changePasswordPromptDescription": "You are about to change the password for {{email}}. Make sure that you have communicated the new password to the customer before proceeding.",
+    "guest": "Guest",
+    "registered": "Registered",
+    "firstSeen": "First seen"
   },
   "customerGroups": {
-    "domain": "Customer Groups"
+    "domain": "Customer Groups",
+    "createGroup": "Create group",
+    "createCustomerGroup": "Create Customer Group",
+    "createCustomerGroupHint": "Create a new customer group to segment your customers.",
+    "customerAlreadyAdded": "The customer has already been added to the group.",
+    "editCustomerGroup": "Edit Customer Group",
+    "removeCustomersWarning_one": "You are about to remove {{count}} customer from the customer group. This action cannot be undone.",
+    "removeCustomersWarning_other": "You are about to remove {{count}} customers from the customer group. This action cannot be undone.",
+    "deleteCustomerGroupWarning": "You are about to delete the customer group {{name}}. This action cannot be undone."
   },
   "orders": {
     "domain": "Orders"
@@ -65,9 +106,11 @@
   "profile": {
     "domain": "Profile",
     "manageYourProfileDetails": "Manage your profile details",
-    "editProfileDetails": "Edit Profile Details",
+    "editProfile": "Edit profile",
     "languageHint": "The language you want to use in the admin dashboard. This will not change the language of your store.",
-    "userInsightsHint": "Share usage insights and help us improve Medusa. You can read more about what we collect and how we use it in our <0>documentation</0>."
+    "userInsightsHint": "Share usage insights and help us improve Medusa. You can read more about what we collect and how we use it in our <0>documentation</0>.",
+    "language": "Language",
+    "usageInsights": "Usage insights"
   },
   "users": {
     "domain": "Users",
@@ -81,38 +124,54 @@
   "store": {
     "domain": "Store",
     "manageYourStoresDetails": "Manage your store's details",
-    "editStoreDetails": "Edit Store Details",
-    "storeName": "Store name",
+    "editStore": "Edit store",
+    "defaultCurrency": "Default currency",
     "swapLinkTemplate": "Swap link template",
     "paymentLinkTemplate": "Payment link template",
-    "inviteLinkTemplate": "Invite link template"
+    "inviteLinkTemplate": "Invite link template",
+    "currencies": "Currencies",
+    "addCurrencies": "Add currencies",
+    "removeCurrencyWarning_one": "You are about to remove {{count}} currency from your store. Ensure that you have removed all prices using the currency before proceeding.",
+    "removeCurrencyWarning_other": "You are about to remove {{count}} currencies from your store. Ensure that you have removed all prices using the currencies before proceeding.",
+    "currencyAlreadyAdded": "The currency has already been added to your store."
   },
   "regions": {
-    "domain": "Regions"
+    "domain": "Regions",
+    "createRegion": "Create Region",
+    "editRegion": "Edit Region",
+    "deleteRegionWarning": "You are about to delete the region {{name}}. This action cannot be undone.",
+    "taxInclusiveHint": "When enabled all prices in the region will be tax inclusive.",
+    "providersHint": "The providers that are available in the region."
+  },
+  "locations": {
+    "domain": "Locations",
+    "createLocation": "Create location",
+    "editLocation": "Edit location",
+    "addSalesChannels": "Add sales channels",
+    "detailsHint": "Specify the details of the location.",
+    "noLocationsFound": "No locations found",
+    "deleteLocationWarning": "You are about to delete the location {{name}}. This action cannot be undone."
   },
   "salesChannels": {
     "domain": "Sales Channels",
+    "createSalesChannel": "Create Sales Channel",
+    "createSalesChannelHint": "Create a new sales channel to sell your products on.",
+    "enabledHint": "Specify if the sales channel is enabled or disabled.",
     "removeProductsWarning_one": "You are about to remove {{count}} product from {{sales_channel}}.",
     "removeProductsWarning_other": "You are about to remove {{count}} products from {{sales_channel}}.",
     "addProducts": "Add Products",
-    "editSalesChannel": "Edit Sales Channel",
-    "isEnabledHint": "Specify if the sales channel is enabled or disabled.",
-    "productAlreadyAdded": "The product has already been added to the sales channel."
-  },
-  "currencies": {
-    "domain": "Currencies",
-    "manageTheCurrencies": "Manage the currencies you want to use in your store",
-    "editCurrencyDetails": "Edit Currency Details",
-    "defaultCurrency": "Default Currency",
-    "defaultCurrencyHint": "The default currency of your store.",
-    "removeCurrenciesWarning_one": "You are about to remove {{count}} currency from your store. Ensure that you have removed all prices using the currency before proceeding.",
-    "removeCurrenciesWarning_other": "You are about to remove {{count}} currencies from your store. Ensure that you have removed all prices using the currencies before proceeding.",
-    "currencyAlreadyAdded": "The currency has already been added to your store."
+    "editSalesChannel": "Edit sales channel",
+    "productAlreadyAdded": "The product has already been added to the sales channel.",
+    "deleteSalesChannelWarning": "You are about to delete the sales channel {{name}}. This action cannot be undone."
   },
   "apiKeyManagement": {
     "domain": "API Key Management",
-    "createAPublishableApiKey": "Create a publishable API key",
-    "createKey": "Create Key"
+    "createKey": "Create key",
+    "createPublishableApiKey": "Create Publishable API Key",
+    "revoke": "Revoke",
+    "publishableApiKeyHint": "Publishable API keys are used to limit the scope of requests to specific sales channels.",
+    "deleteKeyWarning": "You are about to delete the API key {{title}}. This action cannot be undone.",
+    "revokeKeyWarning": "You are about to revoke the API key {{title}}."
   },
   "fields": {
     "name": "Name",
@@ -122,6 +181,7 @@
     "description": "Description",
     "email": "Email",
     "password": "Password",
+    "confirmPassword": "Confirm Password",
     "categories": "Categories",
     "category": "Category",
     "collection": "Collection",
@@ -133,8 +193,31 @@
     "sales_channels": "Sales Channels",
     "status": "Status",
     "code": "Code",
+    "countries": "Countries",
+    "paymentProviders": "Payment Providers",
+    "fulfillmentProviders": "Fulfillment Providers",
+    "providers": "Providers",
     "availability": "Availability",
     "inventory": "Inventory",
-    "optional": "Optional"
+    "optional": "Optional",
+    "taxInclusivePricing": "Tax Inclusive Pricing",
+    "taxRate": "Tax Rate",
+    "taxCode": "Tax Code",
+    "currency": "Currency",
+    "address": "Address",
+    "address2": "Apartment, suite, etc.",
+    "city": "City",
+    "postalCode": "Postal Code",
+    "country": "Country",
+    "state": "State",
+    "province": "Province",
+    "company": "Company",
+    "phone": "Phone",
+    "metadata": "Metadata",
+    "selectCountry": "Select country",
+    "variants": "Variants",
+    "orders": "Orders",
+    "account": "Account",
+    "total": "Total"
   }
 }

packages/admin-next/dashboard/scripts/generate-countries.js

@@ -0,0 +1,44 @@
+async function generateCountries() {
+  const { countries } = await import("@medusajs/medusa/dist/utils/countries.js")
+  const fs = await import("fs")
+  const path = await import("path")
+
+  const arr = countries.map((c) => {
+    const iso_2 = c.alpha2.toLowerCase()
+    const iso_3 = c.alpha3.toLowerCase()
+    const num_code = parseInt(c.numeric, 10)
+    const name = c.name.toUpperCase()
+    const display_name = c.name
+
+    return {
+      iso_2,
+      iso_3,
+      num_code,
+      name,
+      display_name,
+    }
+  })
+
+  const json = JSON.stringify(arr, null, 2)
+
+  const dest = path.join(__dirname, "../src/lib/countries.ts")
+  const destDir = path.dirname(dest)
+
+  const fileContent = `/** This file is auto-generated. Do not modify it manually. */\nimport type { Country } from "@medusajs/medusa"\n\nexport const countries: Omit<Country, "region" | "region_id" | "id">[] = ${json}`
+
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true })
+  }
+
+  fs.writeFileSync(dest, fileContent)
+}
+
+;(async () => {
+  console.log("Generating countries")
+  try {
+    await generateCountries()
+    console.log("Countries generated")
+  } catch (e) {
+    console.error(e)
+  }
+})()

packages/admin-next/dashboard/scripts/generate-currencies.js

@@ -0,0 +1,46 @@
+async function generateCurrencies() {
+  const { currencies } = await import(
+    "@medusajs/medusa/dist/utils/currencies.js"
+  )
+  const fs = await import("fs")
+  const path = await import("path")
+
+  const record = Object.entries(currencies).reduce((acc, [key, values]) => {
+    const code = values.code
+    const symbol_native = values.symbol_native
+    const name = values.name
+    const decimal_digits = values.decimal_digits
+
+    acc[key] = {
+      code,
+      name,
+      symbol_native,
+      decimal_digits,
+    }
+
+    return acc
+  }, {})
+
+  const json = JSON.stringify(record, null, 2)
+
+  const dest = path.join(__dirname, "../src/lib/currencies.ts")
+  const destDir = path.dirname(dest)
+
+  const fileContent = `/** This file is auto-generated. Do not modify it manually. */\ntype CurrencyInfo = { code: string; name: string; symbol_native: string; decimal_digits: number }\n\nexport const currencies: Record<string, CurrencyInfo> = ${json}`
+
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true })
+  }
+
+  fs.writeFileSync(dest, fileContent)
+}
+
+;(async () => {
+  console.log("Generating currency info")
+  try {
+    await generateCurrencies()
+    console.log("Currency info generated")
+  } catch (e) {
+    console.error(e)
+  }
+})()

packages/admin-next/dashboard/src/app.tsx

@@ -1,28 +1,22 @@
 import { Toaster } from "@medusajs/ui"
 import { MedusaProvider } from "medusa-react"
 
-import { AuthProvider } from "./providers/auth-provider"
 import { RouterProvider } from "./providers/router-provider"
 import { ThemeProvider } from "./providers/theme-provider"
 
-import { queryClient } from "./lib/medusa"
-
-const BASE_URL =
-  import.meta.env.VITE_MEDUSA_ADMIN_BACKEND_URL || "http://localhost:9000"
+import { MEDUSA_BACKEND_URL, queryClient } from "./lib/medusa"
 
 function App() {
   return (
     <MedusaProvider
-      baseUrl={BASE_URL}
+      baseUrl={MEDUSA_BACKEND_URL}
       queryClientProviderProps={{
         client: queryClient,
       }}
     >
       <ThemeProvider>
-        <AuthProvider>
-          <RouterProvider />
-          <Toaster />
-        </AuthProvider>
+        <RouterProvider />
+        <Toaster />
       </ThemeProvider>
     </MedusaProvider>
   )

packages/admin-next/dashboard/src/components/authentication/require-auth/require-auth.tsx

@@ -1,25 +1,31 @@
-import { Spinner } from "@medusajs/icons";
-import { PropsWithChildren } from "react";
-import { Navigate, useLocation } from "react-router-dom";
+import { Spinner } from "@medusajs/icons"
+import { Navigate, Outlet, useLocation } from "react-router-dom"
 
-import { useAuth } from "../../../providers/auth-provider";
+import { useAdminGetSession } from "medusa-react"
+import { SearchProvider } from "../../../providers/search-provider"
+import { SidebarProvider } from "../../../providers/sidebar-provider"
 
-export const RequireAuth = ({ children }: PropsWithChildren) => {
-  const auth = useAuth();
-  const location = useLocation();
+export const ProtectedRoute = () => {
+  const { user, isLoading } = useAdminGetSession()
+  const location = useLocation()
 
-  if (auth.isLoading) {
+  if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Spinner className="animate-spin text-ui-fg-interactive" />
+      <div className="flex min-h-screen items-center justify-center">
+        <Spinner className="text-ui-fg-interactive animate-spin" />
       </div>
-    );
+    )
   }
 
-  if (!auth.user) {
-    console.log("redirecting");
-    return <Navigate to="/login" state={{ from: location }} replace />;
+  if (!user) {
+    return <Navigate to="/login" state={{ from: location }} replace />
   }
 
-  return children;
-};
+  return (
+    <SidebarProvider>
+      <SearchProvider>
+        <Outlet />
+      </SearchProvider>
+    </SidebarProvider>
+  )
+}

packages/admin-next/dashboard/src/components/common/combobox/combobox.tsx

@@ -0,0 +1,37 @@
+import { clx } from "@medusajs/ui"
+import * as Popover from "@radix-ui/react-popover"
+
+type ComboboxOption = {
+  value: string
+  label: string
+}
+
+type ComboboxProps = {
+  size?: "base" | "small"
+  options: ComboboxOption[]
+  value: string
+}
+
+export const Combobox = ({ size = "base" }: ComboboxProps) => {
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <button
+          className={clx(
+            "bg-ui-bg-field shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none",
+            "data-[placeholder]:text-ui-fg-muted text-ui-fg-base",
+            "hover:bg-ui-bg-field-hover",
+            "focus:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
+            "invalid::border-ui-border-error invalid:shadow-borders-error",
+            "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+            {
+              "h-8 px-2 py-1.5 txt-compact-small": size === "base",
+              "h-7 px-2 py-1 txt-compact-small": size === "small",
+            }
+          )}
+        ></button>
+      </Popover.Trigger>
+    </Popover.Root>
+  )
+}

packages/admin-next/dashboard/src/components/common/country-select/country-select.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from "react"
+
+import { TrianglesMini } from "@medusajs/icons"
+import { clx } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { countries } from "../../../lib/countries"
+
+export const CountrySelect = forwardRef<
+  HTMLSelectElement,
+  React.ComponentPropsWithoutRef<"select"> & { placeholder?: string }
+>(({ className, disabled, placeholder, ...props }, ref) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="relative">
+      <TrianglesMini
+        className={clx(
+          "absolute right-2 top-1/2 -translate-y-1/2 text-ui-fg-muted transition-fg pointer-events-none",
+          {
+            "text-ui-fg-disabled": disabled,
+          }
+        )}
+      />
+      <select
+        disabled={disabled}
+        className={clx(
+          "appearance-none bg-ui-bg-field shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none px-2 py-1 txt-compact-small",
+          "placeholder:text-ui-fg-muted text-ui-fg-base",
+          "hover:bg-ui-bg-field-hover",
+          "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+          "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
+          "invalid::border-ui-border-error invalid:shadow-borders-error",
+          "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+          className
+        )}
+        {...props}
+        ref={ref}
+      >
+        {/* Add an empty option so the first option is preselected */}
+        <option value="" disabled hidden className="text-ui-fg-muted">
+          {placeholder || t("fields.selectCountry")}
+        </option>
+        {countries.map((country) => {
+          return (
+            <option key={country.iso_2} value={country.iso_2}>
+              {country.display_name}
+            </option>
+          )
+        })}
+      </select>
+    </div>
+  )
+})
+CountrySelect.displayName = "CountrySelect"

packages/admin-next/dashboard/src/components/common/country-select/index.ts

@@ -0,0 +1 @@
+export * from "./country-select"

packages/admin-next/dashboard/src/components/common/debounced-search/debounced-search.tsx

@@ -15,6 +15,7 @@ export const DebouncedSearch = ({
   value: initialValue,
   onChange,
   debounce = 500,
+  size = "small",
   placeholder,
   ...props
 }: DebouncedSearchProps) => {

packages/admin-next/dashboard/src/components/common/empty-table-content/empty-table-content.tsx

@@ -0,0 +1,61 @@
+import { ExclamationCircle, MagnifyingGlass } from "@medusajs/icons"
+import { Button, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+
+type NoResultsProps = {
+  title?: string
+  message?: string
+}
+
+export const NoResults = ({ title, message }: NoResultsProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex h-[400px] w-full items-center justify-center">
+      <div className="flex flex-col items-center gap-y-2">
+        <MagnifyingGlass />
+        <Text size="small" leading="compact" weight="plus">
+          {title ?? t("general.noResultsTitle")}
+        </Text>
+        <Text size="small" className="text-ui-fg-subtle">
+          {message ?? t("general.noResultsMessage")}
+        </Text>
+      </div>
+    </div>
+  )
+}
+
+type NoRecordsProps = {
+  title?: string
+  message?: string
+  action?: {
+    to: string
+    label: string
+  }
+}
+
+export const NoRecords = ({ title, message, action }: NoRecordsProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex h-[400px] w-full flex-col items-center justify-center gap-y-6">
+      <div className="flex flex-col items-center gap-y-2">
+        <ExclamationCircle />
+        <Text size="small" leading="compact" weight="plus">
+          {title ?? t("general.noRecordsTitle")}
+        </Text>
+        <Text size="small" className="text-ui-fg-subtle">
+          {message ?? t("general.noRecordsMessage")}
+        </Text>
+      </div>
+      {action && (
+        <Link to={action.to}>
+          <Button variant="secondary" size="small">
+            {action.label}
+          </Button>
+        </Link>
+      )}
+    </div>
+  )
+}

packages/admin-next/dashboard/src/components/common/empty-table-content/index.ts

@@ -0,0 +1 @@
+export * from "./empty-table-content"

packages/admin-next/dashboard/src/components/common/json-view-section/index.ts

@@ -0,0 +1 @@
+export * from "./json-view-section"

packages/admin-next/dashboard/src/components/common/json-view-section/json-view-section.tsx

@@ -21,23 +21,27 @@ type JsonViewProps = {
 }
 
 // TODO: Fix the positioning of the copy btn
-export const JsonView = ({ data, root }: JsonViewProps) => {
+export const JsonViewSection = ({ data, root }: JsonViewProps) => {
   const numberOfKeys = Object.keys(data).length
 
   return (
-    <Container className="flex items-center justify-between py-6">
+    <Container className="flex items-center justify-between px-6 py-4">
       <div className="flex items-center gap-x-4">
         <Heading level="h2">JSON</Heading>
         <Badge>{numberOfKeys} keys</Badge>
       </div>
       <Drawer>
         <Drawer.Trigger asChild>
-          <IconButton variant="transparent" className="text-ui-fg-subtle">
+          <IconButton
+            size="small"
+            variant="transparent"
+            className="text-ui-fg-subtle"
+          >
             <ArrowsPointingOut />
           </IconButton>
         </Drawer.Trigger>
         <Drawer.Content className="border-ui-code-border bg-ui-code-bg-base text-ui-code-text-base dark overflow-hidden border shadow-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]">
-          <div className="bg-ui-code-bg-header border-ui-code-border flex items-center justify-between border-b px-8 py-6">
+          <div className="bg-ui-code-bg-header border-ui-code-border flex items-center justify-between border-b px-6 py-4">
             <div className="flex items-center gap-x-4">
               <Heading>JSON</Heading>
               <Badge>{numberOfKeys} keys</Badge>
@@ -45,7 +49,11 @@ export const JsonView = ({ data, root }: JsonViewProps) => {
             <div className="flex items-center gap-x-2">
               <Kbd>esc</Kbd>
               <Drawer.Close asChild>
-                <IconButton variant="transparent" className="text-ui-fg-subtle">
+                <IconButton
+                  size="small"
+                  variant="transparent"
+                  className="text-ui-fg-subtle"
+                >
                   <XMarkMini />
                 </IconButton>
               </Drawer.Close>

packages/admin-next/dashboard/src/components/common/json-view/index.ts

@@ -1 +0,0 @@
-export * from "./json-view";

packages/admin-next/dashboard/src/components/common/order-table-cells/index.ts

@@ -0,0 +1 @@
+export * from "./order-table-cells"

packages/admin-next/dashboard/src/components/common/order-table-cells/order-table-cells.tsx

@@ -0,0 +1,97 @@
+import type { Order } from "@medusajs/medusa"
+import { StatusBadge } from "@medusajs/ui"
+import { format } from "date-fns"
+import { getPresentationalAmount } from "../../../lib/money-amount-helpers"
+
+export const OrderDisplayIdCell = ({ id }: { id: Order["display_id"] }) => {
+  return <span>#{id}</span>
+}
+
+export const OrderDateCell = ({
+  date,
+}: {
+  date: Order["created_at"] | string
+}) => {
+  const value = new Date(date)
+
+  return <span>{format(value, "dd MMM, yyyy")}</span>
+}
+
+export const OrderFulfillmentStatusCell = ({
+  status,
+}: {
+  status: Order["fulfillment_status"]
+}) => {
+  switch (status) {
+    case "not_fulfilled":
+      return <StatusBadge color="grey">Not fulfilled</StatusBadge>
+    case "partially_fulfilled":
+      return <StatusBadge color="orange">Partially fulfilled</StatusBadge>
+    case "fulfilled":
+      return <StatusBadge color="green">Fulfilled</StatusBadge>
+    case "partially_shipped":
+      return <StatusBadge color="orange">Partially shipped</StatusBadge>
+    case "shipped":
+      return <StatusBadge color="green">Shipped</StatusBadge>
+    case "partially_returned":
+      return <StatusBadge color="orange">Partially returned</StatusBadge>
+    case "returned":
+      return <StatusBadge color="green">Returned</StatusBadge>
+    case "canceled":
+      return <StatusBadge color="red">Canceled</StatusBadge>
+    case "requires_action":
+      return <StatusBadge color="orange">Requires action</StatusBadge>
+  }
+}
+
+export const OrderPaymentStatusCell = ({
+  status,
+}: {
+  status: Order["payment_status"]
+}) => {
+  switch (status) {
+    case "not_paid":
+      return <StatusBadge color="grey">Not paid</StatusBadge>
+    case "awaiting":
+      return <StatusBadge color="orange">Awaiting</StatusBadge>
+    case "captured":
+      return <StatusBadge color="green">Captured</StatusBadge>
+    case "partially_refunded":
+      return <StatusBadge color="orange">Partially refunded</StatusBadge>
+    case "refunded":
+      return <StatusBadge color="green">Refunded</StatusBadge>
+    case "canceled":
+      return <StatusBadge color="red">Canceled</StatusBadge>
+    case "requires_action":
+      return <StatusBadge color="orange">Requires action</StatusBadge>
+  }
+}
+
+// TODO: Fix formatting amount with correct division eg. EUR 1000 -> EUR 10.00
+// Source currency info from `@medusajs/medusa` definition
+export const OrderTotalCell = ({
+  total,
+  currencyCode,
+}: {
+  total: Order["total"]
+  currencyCode: Order["currency_code"]
+}) => {
+  const formatted = new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency: currencyCode,
+    currencyDisplay: "narrowSymbol",
+  }).format(0)
+
+  const symbol = formatted.replace(/\d/g, "").replace(/[.,]/g, "").trim()
+
+  const presentationAmount = getPresentationalAmount(total, currencyCode)
+  const formattedTotal = new Intl.NumberFormat(undefined, {
+    style: "decimal",
+  }).format(presentationAmount)
+
+  return (
+    <span>
+      {symbol} {formattedTotal} {currencyCode.toUpperCase()}
+    </span>
+  )
+}

packages/admin-next/dashboard/src/components/common/product-table-cells/product-table-cells.tsx

@@ -8,7 +8,7 @@ import { StatusBadge, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { Thumbnail } from "../thumbnail"
 
-export const ProductInventoryCell = ({
+export const ProductVariantCell = ({
   variants,
 }: {
   variants: ProductVariant[] | null
@@ -23,13 +23,10 @@ export const ProductInventoryCell = ({
     )
   }
 
-  const inventory = variants.reduce((acc, v) => acc + v.inventory_quantity, 0)
-
   return (
     <Text size="small" className="text-ui-fg-base">
-      {t("products.inStockVariants", {
+      {t("products.variantCount", {
         count: variants.length,
-        inventory: inventory,
       })}
     </Text>
   )

packages/admin-next/dashboard/src/components/common/skeleton/index.ts

@@ -0,0 +1 @@
+export * from "./skeleton"

packages/admin-next/dashboard/src/components/common/skeleton/skeleton.tsx

@@ -0,0 +1,16 @@
+import { clx } from "@medusajs/ui"
+
+type SkeletonProps = {
+  className?: string
+}
+
+export const Skeleton = ({ className }: SkeletonProps) => {
+  return (
+    <div
+      className={clx(
+        "bg-ui-bg-component animate-pulse w-3 h-3 rounded-[4px]",
+        className
+      )}
+    />
+  )
+}

packages/admin-next/dashboard/src/components/common/table-row-actions/index.ts

@@ -0,0 +1 @@
+export * from "./table-row-actions"

packages/admin-next/dashboard/src/components/common/table-row-actions/table-row-actions.tsx

@@ -0,0 +1,84 @@
+import { EllipsisHorizontal } from "@medusajs/icons"
+import { DropdownMenu, IconButton } from "@medusajs/ui"
+import { ReactNode } from "react"
+import { Link } from "react-router-dom"
+
+type TableRowAction = {
+  icon: ReactNode
+  label: string
+} & (
+  | {
+      to: string
+      onClick?: never
+    }
+  | {
+      onClick: () => void
+      to?: never
+    }
+)
+
+type TableRowActionGroup = {
+  actions: TableRowAction[]
+}
+
+type TableRowActionsProps = {
+  groups: TableRowActionGroup[]
+}
+
+export const TableRowActions = ({ groups }: TableRowActionsProps) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton size="small" variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        {groups.map((group, index) => {
+          if (!group.actions.length) {
+            return null
+          }
+
+          const isLast = index === groups.length - 1
+
+          return (
+            <div className="flex flex-col gap-y-1">
+              {group.actions.map((action, index) => {
+                if (action.onClick) {
+                  return (
+                    <DropdownMenu.Item
+                      key={index}
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        action.onClick()
+                      }}
+                      className="[&_svg]:text-ui-fg-subtle flex items-center gap-x-2"
+                    >
+                      {action.icon}
+                      <span>{action.label}</span>
+                    </DropdownMenu.Item>
+                  )
+                }
+
+                return (
+                  <Link to={action.to} key={index}>
+                    <DropdownMenu.Item
+                      onClick={(e) => {
+                        e.stopPropagation()
+                      }}
+                      className="[&_svg]:text-ui-fg-subtle flex items-center gap-x-2"
+                    >
+                      {action.icon}
+                      <span>{action.label}</span>
+                    </DropdownMenu.Item>
+                  </Link>
+                )
+              })}
+              {!isLast && <DropdownMenu.Separator />}
+            </div>
+          )
+        })}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}

packages/admin-next/dashboard/src/components/error/error-boundary/error-boundary.tsx

@@ -1,5 +1,5 @@
-import type { AxiosError } from "axios"
 import { Navigate, useLocation, useRouteError } from "react-router-dom"
+import { isAxiosError } from "../../../lib/is-axios-error"
 
 export const ErrorBoundary = () => {
   const error = useRouteError()
@@ -20,7 +20,3 @@ export const ErrorBoundary = () => {
   // TODO: Actual catch-all error page
   return <div>Dang!</div>
 }
-
-const isAxiosError = (error: any): error is AxiosError => {
-  return error.isAxiosError
-}

packages/admin-next/dashboard/src/components/filtering/filter-group/filter-group.tsx

@@ -0,0 +1,54 @@
+import { Button, DropdownMenu } from "@medusajs/ui"
+import { ReactNode } from "react"
+import { useSearchParams } from "react-router-dom"
+
+type FilterGroupProps = {
+  filters: {
+    [key: string]: ReactNode
+  }
+}
+
+export const FilterGroup = ({ filters }: FilterGroupProps) => {
+  const [searchParams] = useSearchParams()
+  const filterKeys = Object.keys(filters)
+
+  if (filterKeys.length === 0) {
+    return null
+  }
+
+  const isClearable = filterKeys.some((key) => searchParams.get(key))
+  const hasMore = !filterKeys.every((key) => searchParams.get(key))
+  const availableKeys = filterKeys.filter((key) => !searchParams.get(key))
+
+  return (
+    <div className="flex items-center flex-wrap gap-2">
+      {hasMore && <AddFilterMenu availableKeys={availableKeys} />}
+      {isClearable && (
+        <Button variant="transparent" size="small">
+          Clear all
+        </Button>
+      )}
+    </div>
+  )
+}
+
+type AddFilterMenuProps = {
+  availableKeys: string[]
+}
+
+const AddFilterMenu = ({ availableKeys }: AddFilterMenuProps) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <Button variant="secondary" size="small">
+          Add filter
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        {availableKeys.map((key) => (
+          <DropdownMenu.Item key={key}>{key}</DropdownMenu.Item>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}

packages/admin-next/dashboard/src/components/filtering/filter-group/index.ts

@@ -0,0 +1 @@
+export * from "./filter-group"

packages/admin-next/dashboard/src/components/filtering/order-by/index.ts

@@ -0,0 +1 @@
+export * from "./order-by"

packages/admin-next/dashboard/src/components/filtering/order-by/order-by.tsx

@@ -0,0 +1,148 @@
+import { ArrowUpDown } from "@medusajs/icons"
+import { DropdownMenu, IconButton } from "@medusajs/ui"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
+
+type OrderByProps = {
+  keys: string[]
+}
+
+enum SortDirection {
+  ASC = "asc",
+  DESC = "desc",
+}
+
+type SortState = {
+  key?: string
+  dir: SortDirection
+}
+
+const initState = (params: URLSearchParams): SortState => {
+  const sortParam = params.get("order")
+
+  if (!sortParam) {
+    return {
+      dir: SortDirection.ASC,
+    }
+  }
+
+  const dir = sortParam.startsWith("-") ? SortDirection.DESC : SortDirection.ASC
+  const key = sortParam.replace("-", "")
+
+  return {
+    key,
+    dir,
+  }
+}
+
+const formatKey = (key: string) => {
+  const words = key.split("_")
+  const formattedWords = words.map((word, index) => {
+    if (index === 0) {
+      return word.charAt(0).toUpperCase() + word.slice(1)
+    } else {
+      return word
+    }
+  })
+  return formattedWords.join(" ")
+}
+
+export const OrderBy = ({ keys }: OrderByProps) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [state, setState] = useState<{
+    key?: string
+    dir: SortDirection
+  }>(initState(searchParams))
+
+  const { t } = useTranslation()
+
+  const handleDirChange = (dir: string) => {
+    setState((prev) => ({
+      ...prev,
+      dir: dir as SortDirection,
+    }))
+    updateOrderParam({
+      key: state.key,
+      dir: dir as SortDirection,
+    })
+  }
+
+  const handleKeyChange = (value: string) => {
+    setState((prev) => ({
+      ...prev,
+      key: value,
+    }))
+
+    updateOrderParam({
+      key: value,
+      dir: state.dir,
+    })
+  }
+
+  const updateOrderParam = (state: SortState) => {
+    if (!state.key) {
+      setSearchParams((prev) => {
+        prev.delete("order")
+        return prev
+      })
+
+      return
+    }
+
+    const orderParam =
+      state.dir === SortDirection.ASC ? state.key : `-${state.key}`
+    setSearchParams((prev) => {
+      prev.set("order", orderParam)
+      return prev
+    })
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton size="small">
+          <ArrowUpDown />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.RadioGroup
+          value={state.key}
+          onValueChange={handleKeyChange}
+        >
+          {keys.map((key) => (
+            <DropdownMenu.RadioItem
+              key={key}
+              value={key}
+              onSelect={(event) => event.preventDefault()}
+            >
+              {formatKey(key)}
+            </DropdownMenu.RadioItem>
+          ))}
+        </DropdownMenu.RadioGroup>
+        <DropdownMenu.Separator />
+        <DropdownMenu.RadioGroup
+          value={state.dir}
+          onValueChange={handleDirChange}
+        >
+          <DropdownMenu.RadioItem
+            className="flex items-center justify-between"
+            value="asc"
+            onSelect={(event) => event.preventDefault()}
+          >
+            {t("general.ascending")}
+            <DropdownMenu.Label>1 - 30</DropdownMenu.Label>
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem
+            className="flex items-center justify-between"
+            value="desc"
+            onSelect={(event) => event.preventDefault()}
+          >
+            {t("general.descending")}
+            <DropdownMenu.Label>30 - 1</DropdownMenu.Label>
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}

packages/admin-next/dashboard/src/components/filtering/query/index.ts

@@ -0,0 +1 @@
+export * from "./query"

packages/admin-next/dashboard/src/components/filtering/query/query.tsx

@@ -0,0 +1,57 @@
+import { Input } from "@medusajs/ui"
+import { debounce } from "lodash"
+import { ChangeEvent, useCallback, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
+
+type QueryProps = {
+  placeholder?: string
+}
+
+export const Query = ({ placeholder }: QueryProps) => {
+  const { t } = useTranslation()
+  const placeholderText = placeholder || t("general.search")
+
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [inputValue, setInputValue] = useState(searchParams.get("q") || "")
+
+  const updateSearchParams = (newValue: string) => {
+    if (!newValue) {
+      setSearchParams((prev) => {
+        prev.delete("q")
+        return prev
+      })
+
+      return
+    }
+
+    setSearchParams((prev) => ({ ...prev, q: newValue || "" }))
+  }
+
+  const debouncedUpdate = useCallback(
+    debounce((newValue: string) => updateSearchParams(newValue), 500),
+    []
+  )
+
+  useEffect(() => {
+    debouncedUpdate(inputValue)
+
+    return () => {
+      debouncedUpdate.cancel()
+    }
+  }, [inputValue, debouncedUpdate])
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value)
+  }
+
+  return (
+    <Input
+      type="search"
+      size="small"
+      value={inputValue}
+      onChange={handleInputChange}
+      placeholder={placeholderText}
+    />
+  )
+}

packages/admin-next/dashboard/src/components/layout/app-layout/app-layout.tsx

@@ -1,26 +0,0 @@
-import { Outlet, useLocation } from "react-router-dom"
-import { Gutter } from "./gutter"
-import { MainNav } from "./main-nav"
-import { SettingsNav } from "./settings-nav"
-import { Topbar } from "./topbar"
-
-export const AppLayout = () => {
-  const location = useLocation()
-
-  const isSettings = location.pathname.startsWith("/settings")
-
-  return (
-    <div className="flex h-screen flex-col items-start overflow-hidden md:flex-row">
-      <MainNav />
-      <div className="flex h-[calc(100vh-57px)] w-full md:h-screen">
-        {isSettings && <SettingsNav />}
-        <div className="flex h-full w-full flex-col items-center overflow-y-auto p-4">
-          <Gutter>
-            <Topbar />
-            <Outlet />
-          </Gutter>
-        </div>
-      </div>
-    </div>
-  )
-}

packages/admin-next/dashboard/src/components/layout/app-layout/breadcrumbs.tsx

@@ -1,52 +0,0 @@
-import { TriangleRightMini } from "@medusajs/icons";
-import { clx } from "@medusajs/ui";
-import { Link, UIMatch, useMatches } from "react-router-dom";
-
-type BreadcrumbProps = React.ComponentPropsWithoutRef<"ol">;
-
-export const Breadcrumbs = ({ className, ...props }: BreadcrumbProps) => {
-  const matches = useMatches() as unknown as UIMatch<
-    unknown,
-    { crumb?: (data?: unknown) => string }
-  >[];
-
-  const crumbs = matches
-    .filter((match) => Boolean(match.handle?.crumb))
-    .map((match) => {
-      const handle = match.handle;
-
-      return {
-        label: handle.crumb!(match.data),
-        path: match.pathname,
-      };
-    });
-
-  if (crumbs.length < 2) {
-    return null;
-  }
-
-  return (
-    <ol
-      className={clx("flex items-center gap-x-1 text-ui-fg-muted", className)}
-      {...props}
-    >
-      {crumbs.map((crumb, index) => {
-        const isLast = index === crumbs.length - 1;
-
-        return (
-          <li
-            key={index}
-            className="txt-compact-small-plus flex items-center gap-x-1"
-          >
-            {!isLast ? (
-              <Link to={crumb.path}>{crumb.label}</Link>
-            ) : (
-              <span key={index}>{crumb.label}</span>
-            )}
-            {!isLast && <TriangleRightMini />}
-          </li>
-        );
-      })}
-    </ol>
-  );
-};

packages/admin-next/dashboard/src/components/layout/app-layout/gutter.tsx

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from "react";
-
-export const Gutter = ({ children }: PropsWithChildren) => {
-  return (
-    <div className="w-full max-w-[1200px] flex flex-col gap-y-4">
-      {children}
-    </div>
-  );
-};

packages/admin-next/dashboard/src/components/layout/app-layout/index.ts

@@ -1 +0,0 @@
-export * from "./app-layout";

packages/admin-next/dashboard/src/components/layout/app-layout/loader.tsx

@@ -1,26 +0,0 @@
-import { QueryClient } from "@tanstack/react-query";
-import { adminProductKeys } from "medusa-react";
-import { LoaderFunctionArgs } from "react-router-dom";
-import { medusa, queryClient } from "../../../lib/medusa";
-
-const appLoaderQuery = (id: string) => ({
-  queryKey: adminProductKeys.detail(id),
-  queryFn: async () => medusa.admin.products.retrieve(id),
-});
-
-export const productLoader = (client: QueryClient) => {
-  return async ({ params }: LoaderFunctionArgs) => {
-    const id = params?.id;
-
-    if (!id) {
-      throw new Error("No id provided");
-    }
-
-    const query = appLoaderQuery(id);
-
-    return (
-      queryClient.getQueryData(query.queryKey) ??
-      (await client.fetchQuery(query))
-    );
-  };
-};

packages/admin-next/dashboard/src/components/layout/app-layout/main-nav.tsx

@@ -1,380 +0,0 @@
-import {
-  ArrowRightOnRectangle,
-  BookOpen,
-  BuildingStorefront,
-  Calendar,
-  ChevronDownMini,
-  CircleHalfSolid,
-  CogSixTooth,
-  CurrencyDollar,
-  EllipsisHorizontal,
-  MinusMini,
-  ReceiptPercent,
-  ShoppingCart,
-  Sidebar,
-  SquaresPlus,
-  Tag,
-  Users,
-} from "@medusajs/icons"
-import { Avatar, DropdownMenu, IconButton, Text } from "@medusajs/ui"
-import * as Collapsible from "@radix-ui/react-collapsible"
-import * as Dialog from "@radix-ui/react-dialog"
-import { useAdminDeleteSession, useAdminStore } from "medusa-react"
-import { Link, useLocation, useNavigate } from "react-router-dom"
-
-import { useAuth } from "../../../providers/auth-provider"
-import { useTheme } from "../../../providers/theme-provider"
-
-import { Fragment, useEffect, useState } from "react"
-import { Breadcrumbs } from "./breadcrumbs"
-import { NavItem, NavItemProps } from "./nav-item"
-import { Notifications } from "./notifications"
-import { SearchToggle } from "./search-toggle"
-import { Spacer } from "./spacer"
-
-import extensions from "medusa-admin:routes/links"
-import { useTranslation } from "react-i18next"
-
-export const MainNav = () => {
-  return (
-    <Fragment>
-      <DesktopNav />
-      <MobileNav />
-    </Fragment>
-  )
-}
-
-const MobileNav = () => {
-  const [open, setOpen] = useState(false)
-  const location = useLocation()
-
-  // If the user navigates to a new route, we want to close the menu
-  useEffect(() => {
-    setOpen(false)
-  }, [location.pathname])
-
-  return (
-    <div className="bg-ui-bg-base border-ui-border-base flex h-[57px] w-full items-center justify-between border-b px-4 md:hidden">
-      <Dialog.Root open={open} onOpenChange={setOpen}>
-        <div className="flex items-center gap-x-2">
-          <Dialog.Trigger asChild>
-            <IconButton variant="transparent">
-              <Sidebar />
-            </IconButton>
-          </Dialog.Trigger>
-          <Breadcrumbs />
-        </div>
-        <Dialog.Portal>
-          <Dialog.Overlay className="bg-ui-bg-overlay fixed inset-0 lg:hidden" />
-          <Dialog.Content className="bg-ui-bg-subtle fixed inset-y-0 left-0 flex w-full flex-col overflow-y-auto sm:max-w-[240px] lg:hidden">
-            <div className="flex flex-1 flex-col">
-              <div className="sticky top-0">
-                <Header />
-                <Spacer />
-              </div>
-              <CoreRouteSection />
-              <ExtensionRouteSection />
-            </div>
-            <div className="sticky bottom-0 flex w-full flex-col">
-              <SettingsSection />
-              <Spacer />
-              <UserSection />
-            </div>
-          </Dialog.Content>
-        </Dialog.Portal>
-      </Dialog.Root>
-      <div className="flex items-center gap-x-2">
-        <SearchToggle />
-        <Notifications />
-      </div>
-    </div>
-  )
-}
-
-const DesktopNav = () => {
-  return (
-    <aside className="flex h-full max-h-screen w-full max-w-[240px] flex-col justify-between overflow-y-auto max-md:hidden">
-      <div className="flex flex-1 flex-col">
-        <div className="bg-ui-bg-subtle sticky top-0">
-          <Header />
-          <Spacer />
-        </div>
-        <CoreRouteSection />
-        <ExtensionRouteSection />
-      </div>
-      <div className="bg-ui-bg-subtle sticky bottom-0 flex flex-col">
-        <SettingsSection />
-        <Spacer />
-        <UserSection />
-      </div>
-    </aside>
-  )
-}
-
-const Header = () => {
-  const { store } = useAdminStore()
-  const { setTheme, theme } = useTheme()
-  const { mutateAsync: logoutMutation } = useAdminDeleteSession()
-  const navigate = useNavigate()
-
-  const logout = async () => {
-    await logoutMutation(undefined, {
-      onSuccess: () => {
-        navigate("/login")
-      },
-    })
-  }
-
-  if (!store) {
-    return null
-  }
-
-  return (
-    <div className="w-full p-4">
-      <DropdownMenu>
-        <DropdownMenu.Trigger className="hover:bg-ui-bg-subtle-hover active:bg-ui-bg-subtle-pressed focus:bg-ui-bg-subtle-pressed transition-fg w-full rounded-md outline-none">
-          <div className="flex items-center justify-between p-1 md:pr-2">
-            <div className="flex items-center gap-x-3">
-              <div className="bg-ui-bg-base shadow-borders-base flex h-8 w-8 items-center justify-center overflow-hidden rounded-md">
-                <div className="bg-ui-bg-component flex h-[28px] w-[28px] items-center justify-center overflow-hidden rounded-[4px]">
-                  {store.name[0].toUpperCase()}
-                </div>
-              </div>
-              <Text size="small" weight="plus" leading="compact">
-                {store.name}
-              </Text>
-            </div>
-            <div className="text-ui-fg-subtle">
-              <EllipsisHorizontal />
-            </div>
-          </div>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.Item>
-            <BuildingStorefront className="text-ui-fg-subtle mr-2" />
-            Store Settings
-          </DropdownMenu.Item>
-          <DropdownMenu.Separator />
-          <Link to="https://docs.medusajs.com/user-guide" target="_blank">
-            <DropdownMenu.Item>
-              <BookOpen className="text-ui-fg-subtle mr-2" />
-              Documentation
-            </DropdownMenu.Item>
-          </Link>
-          <Link to="https://medusajs.com/changelog/" target="_blank">
-            <DropdownMenu.Item>
-              <Calendar className="text-ui-fg-subtle mr-2" />
-              Changelog
-            </DropdownMenu.Item>
-          </Link>
-          <DropdownMenu.Separator />
-          <DropdownMenu.SubMenu>
-            <DropdownMenu.SubMenuTrigger className="rounded-md">
-              <CircleHalfSolid className="text-ui-fg-subtle mr-2" />
-              Theme
-            </DropdownMenu.SubMenuTrigger>
-            <DropdownMenu.SubMenuContent>
-              <DropdownMenu.RadioGroup value={theme}>
-                <DropdownMenu.RadioItem
-                  value="light"
-                  onClick={(e) => {
-                    e.preventDefault()
-                    setTheme("light")
-                  }}
-                >
-                  Light
-                </DropdownMenu.RadioItem>
-                <DropdownMenu.RadioItem
-                  value="dark"
-                  onClick={(e) => {
-                    e.preventDefault()
-                    setTheme("dark")
-                  }}
-                >
-                  Dark
-                </DropdownMenu.RadioItem>
-              </DropdownMenu.RadioGroup>
-            </DropdownMenu.SubMenuContent>
-          </DropdownMenu.SubMenu>
-          <DropdownMenu.Separator />
-          <DropdownMenu.Item onClick={logout}>
-            <ArrowRightOnRectangle className="text-ui-fg-subtle mr-2" />
-            Logout
-            <DropdownMenu.Shortcut>⌥⇧Q</DropdownMenu.Shortcut>
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    </div>
-  )
-}
-
-const useCoreRoutes = (): Omit<NavItemProps, "pathname">[] => {
-  const { t } = useTranslation()
-
-  return [
-    {
-      icon: <ShoppingCart />,
-      label: t("orders.domain"),
-      to: "/orders",
-      items: [
-        {
-          label: t("draftOrders.domain"),
-          to: "/draft-orders",
-        },
-      ],
-    },
-    {
-      icon: <Tag />,
-      label: t("products.domain"),
-      to: "/products",
-      items: [
-        {
-          label: t("collections.domain"),
-          to: "/collections",
-        },
-        {
-          label: t("categories.domain"),
-          to: "/categories",
-        },
-        {
-          label: t("giftCards.domain"),
-          to: "/gift-cards",
-        },
-        {
-          label: t("inventory.domain"),
-          to: "/inventory",
-        },
-      ],
-    },
-    {
-      icon: <Users />,
-      label: t("customers.domain"),
-      to: "/customers",
-      items: [
-        {
-          label: t("customerGroups.domain"),
-          to: "/customer-groups",
-        },
-      ],
-    },
-    {
-      icon: <ReceiptPercent />,
-      label: t("discounts.domain"),
-      to: "/discounts",
-    },
-    {
-      icon: <CurrencyDollar />,
-      label: t("pricing.domain"),
-      to: "/pricing",
-    },
-  ]
-}
-
-const CoreRouteSection = () => {
-  const coreRoutes = useCoreRoutes()
-
-  return (
-    <nav className="flex flex-col gap-y-1 py-4">
-      {coreRoutes.map((route) => {
-        return <NavItem key={route.to} {...route} />
-      })}
-    </nav>
-  )
-}
-
-const ExtensionRouteSection = () => {
-  if (!extensions.links || extensions.links.length === 0) {
-    return null
-  }
-
-  return (
-    <div>
-      <Spacer />
-      <div className="flex flex-col gap-y-4 py-4">
-        <Collapsible.Root defaultOpen>
-          <div className="px-4">
-            <Collapsible.Trigger asChild className="group/trigger">
-              <button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
-                <Text size="xsmall" weight="plus" leading="compact">
-                  Extensions
-                </Text>
-                <div className="text-ui-fg-muted">
-                  <ChevronDownMini className="group-data-[state=open]/trigger:hidden" />
-                  <MinusMini className="group-data-[state=closed]/trigger:hidden" />
-                </div>
-              </button>
-            </Collapsible.Trigger>
-          </div>
-          <Collapsible.Content>
-            <div className="flex flex-col gap-y-1 py-1 pb-4">
-              {extensions.links.map((link) => {
-                return (
-                  <NavItem
-                    key={link.path}
-                    to={link.path}
-                    label={link.label}
-                    icon={link.icon ? <link.icon /> : <SquaresPlus />}
-                    type="extension"
-                  />
-                )
-              })}
-            </div>
-          </Collapsible.Content>
-        </Collapsible.Root>
-      </div>
-    </div>
-  )
-}
-
-const SettingsSection = () => {
-  return (
-    <div className="py-4">
-      <NavItem icon={<CogSixTooth />} label="Settings" to="/settings" />
-    </div>
-  )
-}
-
-const UserSection = () => {
-  const { user } = useAuth()
-
-  if (!user) {
-    return null
-  }
-
-  const fallback =
-    user.first_name && user.last_name
-      ? `${user.first_name[0]}${user.last_name[0]}`
-      : user.first_name
-      ? user.first_name[0]
-      : user.email[0]
-
-  return (
-    <div className="p-4">
-      <Link
-        to="/settings/profile"
-        className="hover:bg-ui-bg-subtle-hover transition-fg active:bg-ui-bg-subtle-pressed focus:bg-ui-bg-subtle-pressed flex items-center gap-x-3 rounded-md p-1 outline-none"
-      >
-        <Avatar fallback={fallback.toUpperCase()} />
-        <div className="flex flex-1 flex-col">
-          {(user.first_name || user.last_name) && (
-            <Text
-              size="xsmall"
-              weight="plus"
-              leading="compact"
-              className="max-w-[90%] truncate"
-            >{`${user.first_name && `${user.first_name} `}${
-              user.last_name
-            }`}</Text>
-          )}
-          <Text
-            size="xsmall"
-            leading="compact"
-            className="text-ui-fg-subtle max-w-[90%] truncate"
-          >
-            {user.email}
-          </Text>
-        </div>
-      </Link>
-    </div>
-  )
-}

packages/admin-next/dashboard/src/components/layout/app-layout/nav-item.tsx

@@ -1,148 +0,0 @@
-import { Text, clx } from "@medusajs/ui";
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { useEffect, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-
-type ItemType = "core" | "extension";
-
-type NestedItemProps = {
-  label: string;
-  to: string;
-};
-
-export type NavItemProps = {
-  icon?: React.ReactNode;
-  label: string;
-  to: string;
-  items?: NestedItemProps[];
-  type?: ItemType;
-};
-
-export const NavItem = ({
-  icon,
-  label,
-  to,
-  items,
-  type = "core",
-}: NavItemProps) => {
-  const location = useLocation();
-
-  const [open, setOpen] = useState(
-    [to, ...(items?.map((i) => i.to) ?? [])].some((p) =>
-      location.pathname.startsWith(p)
-    )
-  );
-
-  useEffect(() => {
-    setOpen(
-      [to, ...(items?.map((i) => i.to) ?? [])].some((p) =>
-        location.pathname.startsWith(p)
-      )
-    );
-  }, [location.pathname, to, items]);
-
-  return (
-    <div className="px-4">
-      <Link
-        to={to}
-        className={clx(
-          "text-ui-fg-subtle hover:text-ui-fg-base px-2 py-2.5 md:py-1.5 outline-none flex items-center gap-x-2 transition-fg rounded-md hover:bg-ui-bg-subtle-hover",
-          {
-            "bg-ui-bg-base shadow-elevation-card-rest":
-              location.pathname.startsWith(to),
-            "max-md:hidden": items && items.length > 0,
-          }
-        )}
-      >
-        <Icon icon={icon} type={type} />
-        <Text size="small" weight="plus" leading="compact">
-          {label}
-        </Text>
-      </Link>
-      {items && items.length > 0 && (
-        <Collapsible.Root open={open} onOpenChange={setOpen}>
-          <Collapsible.Trigger
-            className={clx(
-              "w-full md:hidden text-ui-fg-subtle hover:text-ui-fg-base px-2 py-2.5 md:py-1.5 outline-none flex items-center gap-x-2 transition-fg rounded-md hover:bg-ui-bg-subtle-hover"
-            )}
-          >
-            <Icon icon={icon} type={type} />
-            <Text size="small" weight="plus" leading="compact">
-              {label}
-            </Text>
-          </Collapsible.Trigger>
-          <Collapsible.Content className="flex flex-col gap-y-1 pt-1">
-            <Link
-              to={to}
-              className={clx(
-                "md:hidden text-ui-fg-subtle hover:text-ui-fg-base px-2 py-2.5 md:py-1.5 outline-none flex items-center gap-x-2 transition-fg rounded-md hover:bg-ui-bg-subtle-hover",
-                {
-                  "bg-ui-bg-base shadow-elevation-card-rest":
-                    location.pathname.startsWith(to),
-                }
-              )}
-            >
-              <div className="w-5 h-5 flex items-center justify-center">
-                <div
-                  className={clx(
-                    "w-1.5 h-1.5 border-[1.5px] border-ui-fg-muted transition-fg rounded-full",
-                    {
-                      "border-ui-fg-base border-2": location.pathname === to,
-                    }
-                  )}
-                />
-              </div>
-              <Text size="small" weight="plus" leading="compact">
-                {label}
-              </Text>
-            </Link>
-            {items.map((item) => {
-              return (
-                <Link
-                  to={item.to}
-                  key={item.to}
-                  className={clx(
-                    "first-of-type:mt-1 last-of-type:mb-2 text-ui-fg-subtle hover:text-ui-fg-base px-2 py-2.5 md:py-1.5 outline-none flex items-center gap-x-2 transition-fg rounded-md hover:bg-ui-bg-subtle-hover",
-                    {
-                      "bg-ui-bg-base shadow-elevation-card-rest":
-                        location.pathname === item.to,
-                    }
-                  )}
-                >
-                  <div className="w-5 h-5 flex items-center justify-center">
-                    <div
-                      className={clx(
-                        "w-1.5 h-1.5 border-[1.5px] border-ui-fg-muted transition-fg rounded-full",
-                        {
-                          "border-ui-fg-base border-2":
-                            location.pathname === item.to,
-                        }
-                      )}
-                    />
-                  </div>
-                  <Text size="small" weight="plus" leading="compact">
-                    {item.label}
-                  </Text>
-                </Link>
-              );
-            })}
-          </Collapsible.Content>
-        </Collapsible.Root>
-      )}
-    </div>
-  );
-};
-
-const Icon = ({ icon, type }: { icon?: React.ReactNode; type: ItemType }) => {
-  if (!icon) {
-    return null;
-  }
-
-  return type === "extension" ? (
-    <div className="rounded-[4px] w-5 h-5 flex items-center justify-center shadow-borders-base bg-ui-bg-base">
-      <div className="w-4 h-4 rounded-sm overflow-hidden">{icon}</div>
-    </div>
-  ) : (
-    icon
-  );
-};

packages/admin-next/dashboard/src/components/layout/app-layout/search-toggle.tsx

@@ -1,17 +0,0 @@
-import { MagnifyingGlass } from "@medusajs/icons"
-import { IconButton } from "@medusajs/ui"
-import { useSearch } from "../../../providers/search-provider"
-
-export const SearchToggle = () => {
-  const { toggleSearch } = useSearch()
-
-  return (
-    <IconButton
-      variant="transparent"
-      onClick={toggleSearch}
-      className="text-ui-fg-muted hover:text-ui-fg-subtle"
-    >
-      <MagnifyingGlass />
-    </IconButton>
-  )
-}

packages/admin-next/dashboard/src/components/layout/app-layout/settings-nav.tsx

@@ -1,119 +0,0 @@
-import { ChevronDownMini, CogSixTooth, MinusMini } from "@medusajs/icons"
-import { Text } from "@medusajs/ui"
-import * as Collapsible from "@radix-ui/react-collapsible"
-
-import { useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import { NavItem, NavItemProps } from "./nav-item"
-import { Spacer } from "./spacer"
-
-const useSettingRoutes = (): NavItemProps[] => {
-  const { t } = useTranslation()
-
-  return useMemo(
-    () => [
-      {
-        label: t("profile.domain"),
-        to: "/settings/profile",
-      },
-      {
-        label: t("store.domain"),
-        to: "/settings/store",
-      },
-      {
-        label: t("users.domain"),
-        to: "/settings/users",
-      },
-      {
-        label: t("regions.domain"),
-        to: "/settings/regions",
-      },
-      {
-        label: t("currencies.domain"),
-        to: "/settings/currencies",
-      },
-      {
-        label: "Taxes",
-        to: "/settings/taxes",
-      },
-      {
-        label: "Locations",
-        to: "/settings/locations",
-      },
-      {
-        label: t("salesChannels.domain"),
-        to: "/settings/sales-channels",
-      },
-      {
-        label: t("apiKeyManagement.domain"),
-        to: "/settings/api-key-management",
-      },
-    ],
-    [t]
-  )
-}
-
-export const SettingsNav = () => {
-  const routes = useSettingRoutes()
-  const { t } = useTranslation()
-
-  return (
-    <div className="border-ui-border-base box-content flex h-full max-h-screen w-full max-w-[240px] flex-col overflow-hidden border-x max-md:hidden">
-      <div className="p-4">
-        <div className="flex h-10 items-center gap-x-3 p-1">
-          <CogSixTooth className="text-ui-fg-subtle" />
-          <Text leading="compact" weight="plus" size="small">
-            {t("general.settings")}
-          </Text>
-        </div>
-      </div>
-      <Spacer />
-      <div className="flex flex-1 flex-col gap-y-4 overflow-y-auto py-4">
-        <Collapsible.Root defaultOpen>
-          <div className="px-4">
-            <Collapsible.Trigger asChild className="group/trigger">
-              <button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
-                <Text size="xsmall" weight="plus" leading="compact">
-                  {t("general.general")}
-                </Text>
-                <div className="text-ui-fg-muted">
-                  <ChevronDownMini className="group-data-[state=open]/trigger:hidden" />
-                  <MinusMini className="group-data-[state=closed]/trigger:hidden" />
-                </div>
-              </button>
-            </Collapsible.Trigger>
-          </div>
-          <Collapsible.Content asChild>
-            <nav className="flex flex-col gap-y-1 py-1">
-              {routes.map((setting) => (
-                <NavItem key={setting.to} {...setting} />
-              ))}
-            </nav>
-          </Collapsible.Content>
-        </Collapsible.Root>
-        <Collapsible.Root>
-          <div className="px-4">
-            <Collapsible.Trigger asChild className="group/trigger">
-              <button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
-                <Text size="xsmall" weight="plus" leading="compact">
-                  {t("general.extensions")}
-                </Text>
-                <div className="text-ui-fg-muted">
-                  <ChevronDownMini className="group-data-[state=open]/trigger:hidden" />
-                  <MinusMini className="group-data-[state=closed]/trigger:hidden" />
-                </div>
-              </button>
-            </Collapsible.Trigger>
-          </div>
-          <Collapsible.Content asChild>
-            <nav className="flex flex-col gap-y-1 py-1">
-              {routes.map((setting) => (
-                <NavItem key={setting.to} {...setting} />
-              ))}
-            </nav>
-          </Collapsible.Content>
-        </Collapsible.Root>
-      </div>
-    </div>
-  )
-}

packages/admin-next/dashboard/src/components/layout/app-layout/spacer.tsx

@@ -1,7 +0,0 @@
-export const Spacer = () => {
-  return (
-    <div className="px-4">
-      <div className="w-full h-px border-b border-dashed border-ui-border-strong" />
-    </div>
-  );
-};

packages/admin-next/dashboard/src/components/layout/app-layout/topbar.tsx

@@ -1,19 +0,0 @@
-import { Sidebar } from "@medusajs/icons"
-import { Breadcrumbs } from "./breadcrumbs"
-import { Notifications } from "./notifications"
-import { SearchToggle } from "./search-toggle"
-
-export const Topbar = () => {
-  return (
-    <div className="hidden items-center justify-between px-4 py-1 md:flex">
-      <div className="flex items-center gap-x-1.5">
-        <Sidebar className="text-ui-fg-muted" />
-        <Breadcrumbs />
-      </div>
-      <div className="text-ui-fg-muted flex items-center gap-x-1">
-        <SearchToggle />
-        <Notifications />
-      </div>
-    </div>
-  )
-}

packages/admin-next/dashboard/src/components/layout/main-layout/index.ts

@@ -0,0 +1 @@
+export * from "./main-layout"

packages/admin-next/dashboard/src/components/layout/main-layout/main-layout.tsx

@@ -0,0 +1,197 @@
+import {
+  ChevronDownMini,
+  CurrencyDollar,
+  MinusMini,
+  ReceiptPercent,
+  ShoppingCart,
+  SquaresPlus,
+  Tag,
+  Users,
+} from "@medusajs/icons"
+import { Avatar, Text } from "@medusajs/ui"
+import * as Collapsible from "@radix-ui/react-collapsible"
+import { useAdminStore } from "medusa-react"
+import { useTranslation } from "react-i18next"
+
+import { Skeleton } from "../../common/skeleton"
+import { NavItem, NavItemProps } from "../nav-item"
+import { Shell } from "../shell"
+
+import extensions from "medusa-admin:routes/links"
+
+export const MainLayout = () => {
+  return (
+    <Shell>
+      <MainSidebar />
+    </Shell>
+  )
+}
+
+const MainSidebar = () => {
+  return (
+    <aside className="flex flex-1 flex-col justify-between overflow-y-auto">
+      <div className="flex flex-1 flex-col">
+        <div className="bg-ui-bg-subtle sticky top-0">
+          <Header />
+          <div className="px-3">
+            <div className="border-ui-border-strong h-px w-full border-b border-dashed" />
+          </div>
+        </div>
+        <CoreRouteSection />
+        <ExtensionRouteSection />
+      </div>
+    </aside>
+  )
+}
+
+const Header = () => {
+  const { store, isError, error } = useAdminStore()
+
+  const name = store?.name
+  const fallback = store?.name?.slice(0, 1).toUpperCase()
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <div className="w-full px-3 py-2">
+      <div className="flex items-center p-1 md:pr-2">
+        <div className="flex items-center gap-x-3">
+          {fallback ? (
+            <Avatar variant="squared" fallback={fallback} />
+          ) : (
+            <Skeleton className="w-8 h-8 rounded-md" />
+          )}
+          {name ? (
+            <Text size="small" weight="plus" leading="compact">
+              {store.name}
+            </Text>
+          ) : (
+            <Skeleton className="w-[120px] h-[9px]" />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const useCoreRoutes = (): Omit<NavItemProps, "pathname">[] => {
+  const { t } = useTranslation()
+
+  return [
+    {
+      icon: <ShoppingCart />,
+      label: t("orders.domain"),
+      to: "/orders",
+      items: [
+        {
+          label: t("draftOrders.domain"),
+          to: "/draft-orders",
+        },
+      ],
+    },
+    {
+      icon: <Tag />,
+      label: t("products.domain"),
+      to: "/products",
+      items: [
+        {
+          label: t("collections.domain"),
+          to: "/collections",
+        },
+        {
+          label: t("categories.domain"),
+          to: "/categories",
+        },
+        {
+          label: t("giftCards.domain"),
+          to: "/gift-cards",
+        },
+        {
+          label: t("inventory.domain"),
+          to: "/inventory",
+        },
+      ],
+    },
+    {
+      icon: <Users />,
+      label: t("customers.domain"),
+      to: "/customers",
+      items: [
+        {
+          label: t("customerGroups.domain"),
+          to: "/customer-groups",
+        },
+      ],
+    },
+    {
+      icon: <ReceiptPercent />,
+      label: t("discounts.domain"),
+      to: "/discounts",
+    },
+    {
+      icon: <CurrencyDollar />,
+      label: t("pricing.domain"),
+      to: "/pricing",
+    },
+  ]
+}
+
+const CoreRouteSection = () => {
+  const coreRoutes = useCoreRoutes()
+
+  return (
+    <nav className="flex flex-col gap-y-1 py-2">
+      {coreRoutes.map((route) => {
+        return <NavItem key={route.to} {...route} />
+      })}
+    </nav>
+  )
+}
+
+const ExtensionRouteSection = () => {
+  if (!extensions.links || extensions.links.length === 0) {
+    return null
+  }
+
+  return (
+    <div>
+      <div className="px-3">
+        <div className="border-ui-border-strong h-px w-full border-b border-dashed" />
+      </div>
+      <div className="flex flex-col gap-y-1 py-2">
+        <Collapsible.Root defaultOpen>
+          <div className="px-4">
+            <Collapsible.Trigger asChild className="group/trigger">
+              <button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
+                <Text size="xsmall" weight="plus" leading="compact">
+                  Extensions
+                </Text>
+                <div className="text-ui-fg-muted">
+                  <ChevronDownMini className="group-data-[state=open]/trigger:hidden" />
+                  <MinusMini className="group-data-[state=closed]/trigger:hidden" />
+                </div>
+              </button>
+            </Collapsible.Trigger>
+          </div>
+          <Collapsible.Content>
+            <div className="flex flex-col gap-y-1 py-1 pb-4">
+              {extensions.links.map((link) => {
+                return (
+                  <NavItem
+                    key={link.path}
+                    to={link.path}
+                    label={link.label}
+                    icon={link.icon ? <link.icon /> : <SquaresPlus />}
+                    type="extension"
+                  />
+                )
+              })}
+            </div>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      </div>
+    </div>
+  )
+}

packages/admin-next/dashboard/src/components/layout/nav-item/index.ts

@@ -0,0 +1 @@
+export * from "./nav-item"

packages/admin-next/dashboard/src/components/layout/nav-item/nav-item.tsx

@@ -0,0 +1,156 @@
+import { Text, clx } from "@medusajs/ui"
+import * as Collapsible from "@radix-ui/react-collapsible"
+import { useEffect, useState } from "react"
+import { Link, useLocation } from "react-router-dom"
+
+type ItemType = "core" | "extension"
+
+type NestedItemProps = {
+  label: string
+  to: string
+}
+
+export type NavItemProps = {
+  icon?: React.ReactNode
+  label: string
+  to: string
+  items?: NestedItemProps[]
+  type?: ItemType
+  from?: string
+}
+
+export const NavItem = ({
+  icon,
+  label,
+  to,
+  items,
+  type = "core",
+  from,
+}: NavItemProps) => {
+  const location = useLocation()
+
+  const [open, setOpen] = useState(
+    [to, ...(items?.map((i) => i.to) ?? [])].some((p) =>
+      location.pathname.startsWith(p)
+    )
+  )
+
+  useEffect(() => {
+    setOpen(
+      [to, ...(items?.map((i) => i.to) ?? [])].some((p) =>
+        location.pathname.startsWith(p)
+      )
+    )
+  }, [location.pathname, to, items])
+
+  return (
+    <div className="px-3">
+      <Link
+        to={to}
+        state={
+          from
+            ? {
+                from,
+              }
+            : undefined
+        }
+        className={clx(
+          "text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex items-center gap-x-2 rounded-md px-2 py-2.5 outline-none md:py-1.5",
+          {
+            "bg-ui-bg-base hover:bg-ui-bg-base-hover shadow-elevation-card-rest":
+              location.pathname.startsWith(to),
+            "max-md:hidden": items && items.length > 0,
+          }
+        )}
+      >
+        <Icon icon={icon} type={type} />
+        <Text size="small" weight="plus" leading="compact">
+          {label}
+        </Text>
+      </Link>
+      {items && items.length > 0 && (
+        <Collapsible.Root open={open} onOpenChange={setOpen}>
+          <Collapsible.Trigger
+            className={clx(
+              "text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex w-full items-center gap-x-2 rounded-md px-2 py-2.5 outline-none md:hidden md:py-1.5"
+            )}
+          >
+            <Icon icon={icon} type={type} />
+            <Text size="small" weight="plus" leading="compact">
+              {label}
+            </Text>
+          </Collapsible.Trigger>
+          <Collapsible.Content className="flex flex-col pt-1">
+            <div className="flex h-[36px] w-full items-center gap-x-1 pl-2 md:hidden">
+              <div
+                role="presentation"
+                className="flex h-full w-5 items-center justify-center"
+              >
+                <div className="bg-ui-border-strong h-full w-px" />
+              </div>
+              <Link
+                to={to}
+                className={clx(
+                  "text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover mb-2 mt-1 flex h-8 flex-1 items-center gap-x-2 rounded-md px-2 py-2.5 outline-none md:py-1.5",
+                  {
+                    "bg-ui-bg-base hover:bg-ui-bg-base text-ui-fg-base shadow-elevation-card-rest":
+                      location.pathname.startsWith(to),
+                  }
+                )}
+              >
+                <Text size="small" weight="plus" leading="compact">
+                  {label}
+                </Text>
+              </Link>
+            </div>
+            <ul>
+              {items.map((item) => {
+                return (
+                  <li
+                    key={item.to}
+                    className="flex h-[36px] items-center gap-x-1 pl-2"
+                  >
+                    <div
+                      role="presentation"
+                      className="flex h-full w-5 items-center justify-center"
+                    >
+                      <div className="bg-ui-border-strong h-full w-px" />
+                    </div>
+                    <Link
+                      to={item.to}
+                      className={clx(
+                        "text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex h-8 flex-1 items-center gap-x-2 rounded-md px-2 py-2.5 outline-none first-of-type:mt-1 last-of-type:mb-2 md:py-1.5",
+                        {
+                          "bg-ui-bg-base text-ui-fg-base hover:bg-ui-bg-base shadow-elevation-card-rest":
+                            location.pathname === item.to,
+                        }
+                      )}
+                    >
+                      <Text size="small" weight="plus" leading="compact">
+                        {item.label}
+                      </Text>
+                    </Link>
+                  </li>
+                )
+              })}
+            </ul>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      )}
+    </div>
+  )
+}
+
+const Icon = ({ icon, type }: { icon?: React.ReactNode; type: ItemType }) => {
+  if (!icon) {
+    return null
+  }
+
+  return type === "extension" ? (
+    <div className="shadow-borders-base bg-ui-bg-base flex h-5 w-5 items-center justify-center rounded-[4px]">
+      <div className="h-4 w-4 overflow-hidden rounded-sm">{icon}</div>
+    </div>
+  ) : (
+    icon
+  )
+}

packages/admin-next/dashboard/src/components/layout/notifications/index.ts

@@ -0,0 +1 @@
+export * from "./notifications"

packages/admin-next/dashboard/src/components/layout/notifications/notifications.tsx

@@ -1,28 +1,31 @@
-import { BellAlert } from "@medusajs/icons";
-import { Drawer, Heading, IconButton } from "@medusajs/ui";
-import { useEffect, useState } from "react";
+import { BellAlert } from "@medusajs/icons"
+import { Drawer, Heading, IconButton } from "@medusajs/ui"
+import { useEffect, useState } from "react"
 
 export const Notifications = () => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === "n" && (e.metaKey || e.ctrlKey)) {
-        setOpen((prev) => !prev);
+        setOpen((prev) => !prev)
       }
-    };
+    }
 
-    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keydown", onKeyDown)
 
     return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, []);
+      document.removeEventListener("keydown", onKeyDown)
+    }
+  }, [])
 
   return (
     <Drawer open={open} onOpenChange={setOpen}>
       <Drawer.Trigger asChild>
-        <IconButton variant="transparent" className="text-ui-fg-muted">
+        <IconButton
+          variant="transparent"
+          className="text-ui-fg-muted hover:text-ui-fg-subtle"
+        >
           <BellAlert />
         </IconButton>
       </Drawer.Trigger>
@@ -33,5 +36,5 @@ export const Notifications = () => {
         <Drawer.Body>Notifications will go here</Drawer.Body>
       </Drawer.Content>
     </Drawer>
-  );
-};
+  )
+}

packages/admin-next/dashboard/src/components/layout/settings-layout/index.ts

@@ -0,0 +1 @@
+export * from "./settings-layout"

packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx

@@ -0,0 +1,99 @@
+import { ArrowUturnLeft } from "@medusajs/icons"
+import { IconButton, Text } from "@medusajs/ui"
+import { useEffect, useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useLocation } from "react-router-dom"
+
+import { NavItem, NavItemProps } from "../nav-item"
+import { Shell } from "../shell"
+
+export const SettingsLayout = () => {
+  return (
+    <Shell>
+      <SettingsSidebar />
+    </Shell>
+  )
+}
+
+const useSettingRoutes = (): NavItemProps[] => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      {
+        label: t("profile.domain"),
+        to: "/settings/profile",
+      },
+      {
+        label: t("store.domain"),
+        to: "/settings/store",
+      },
+      {
+        label: t("users.domain"),
+        to: "/settings/users",
+      },
+      {
+        label: t("regions.domain"),
+        to: "/settings/regions",
+      },
+      {
+        label: "Taxes",
+        to: "/settings/taxes",
+      },
+      {
+        label: "Locations",
+        to: "/settings/locations",
+      },
+      {
+        label: t("salesChannels.domain"),
+        to: "/settings/sales-channels",
+      },
+      {
+        label: t("apiKeyManagement.domain"),
+        to: "/settings/api-key-management",
+      },
+    ],
+    [t]
+  )
+}
+
+const SettingsSidebar = () => {
+  const routes = useSettingRoutes()
+  const { t } = useTranslation()
+
+  const location = useLocation()
+  const [from, setFrom] = useState("/orders")
+
+  useEffect(() => {
+    if (location.state?.from) {
+      setFrom(location.state.from)
+    }
+  }, [location])
+
+  return (
+    <aside className="flex flex-1 flex-col justify-between overflow-y-auto">
+      <div className="px-3 py-2">
+        <div className="flex items-center gap-x-3 p-1">
+          <Link to={from} replace className="flex items-center justify-center">
+            <IconButton size="small" variant="transparent">
+              <ArrowUturnLeft />
+            </IconButton>
+          </Link>
+          <Text leading="compact" weight="plus" size="small">
+            {t("general.settings")}
+          </Text>
+        </div>
+      </div>
+      <div className="px-3">
+        <div className="border-ui-border-strong h-px w-full border-b border-dashed" />
+      </div>
+      <div className="flex flex-1 flex-col gap-y-4 overflow-y-auto py-2">
+        <nav className="flex flex-col gap-y-1">
+          {routes.map((setting) => (
+            <NavItem key={setting.to} {...setting} />
+          ))}
+        </nav>
+      </div>
+    </aside>
+  )
+}

packages/admin-next/dashboard/src/components/layout/shell/index.ts

@@ -0,0 +1 @@
+export * from "./shell"

packages/admin-next/dashboard/src/components/layout/shell/shell.tsx

@@ -0,0 +1,378 @@
+import {
+  ArrowRightOnRectangle,
+  BellAlert,
+  BookOpen,
+  Calendar,
+  CircleHalfSolid,
+  CogSixTooth,
+  MagnifyingGlass,
+  Sidebar,
+  User as UserIcon,
+} from "@medusajs/icons"
+import { Avatar, DropdownMenu, IconButton, Kbd, Text, clx } from "@medusajs/ui"
+import * as Dialog from "@radix-ui/react-dialog"
+import { useAdminDeleteSession, useAdminGetSession } from "medusa-react"
+import { PropsWithChildren } from "react"
+import {
+  Link,
+  Outlet,
+  UIMatch,
+  useLocation,
+  useMatches,
+  useNavigate,
+} from "react-router-dom"
+
+import { Skeleton } from "../../common/skeleton"
+
+import { useSearch } from "../../../providers/search-provider"
+import { useSidebar } from "../../../providers/sidebar-provider"
+import { useTheme } from "../../../providers/theme-provider"
+
+export const Shell = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="flex h-screen flex-col items-start overflow-hidden lg:flex-row">
+      <div>
+        <MobileSidebarContainer>{children}</MobileSidebarContainer>
+        <DesktopSidebarContainer>{children}</DesktopSidebarContainer>
+      </div>
+      <div className="flex flex-col h-screen w-full">
+        <Topbar />
+        <div className="flex h-full w-full flex-col items-center overflow-y-auto">
+          <Gutter>
+            <Outlet />
+          </Gutter>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Gutter = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="flex w-full max-w-[1600px] flex-col gap-y-2 p-3">
+      {children}
+    </div>
+  )
+}
+
+const Breadcrumbs = () => {
+  const matches = useMatches() as unknown as UIMatch<
+    unknown,
+    { crumb?: (data?: unknown) => string }
+  >[]
+
+  const crumbs = matches
+    .filter((match) => Boolean(match.handle?.crumb))
+    .map((match) => {
+      const handle = match.handle
+
+      return {
+        label: handle.crumb!(match.data),
+        path: match.pathname,
+      }
+    })
+
+  return (
+    <ol className={clx("text-ui-fg-muted flex items-center select-none")}>
+      {crumbs.map((crumb, index) => {
+        const isLast = index === crumbs.length - 1
+
+        return (
+          <li
+            key={index}
+            className={clx("txt-compact-small-plus flex items-center", {
+              "text-ui-fg-subtle": isLast,
+            })}
+          >
+            {!isLast ? (
+              <Link
+                className="transition-fg hover:text-ui-fg-subtle"
+                to={crumb.path}
+              >
+                {crumb.label}
+              </Link>
+            ) : (
+              <div>
+                <span className="block md:hidden">...</span>
+                <span key={index} className="hidden md:block">
+                  {crumb.label}
+                </span>
+              </div>
+            )}
+            {/* {!isLast && <TriangleRightMini className="-mt-0.5 mx-2" />} */}
+            {!isLast && <span className="-mt-0.5 mx-2">›</span>}
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+const UserBadge = () => {
+  const { user, isError, error } = useAdminGetSession()
+
+  const displayName = user
+    ? user.first_name && user.last_name
+      ? `${user.first_name} ${user.last_name}`
+      : user.first_name
+        ? user.first_name
+        : user.email
+    : null
+
+  const fallback = displayName ? displayName[0].toUpperCase() : null
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <DropdownMenu.Trigger asChild>
+      <button
+        disabled={!user}
+        className={clx(
+          "shadow-borders-base flex max-w-[192px] items-center gap-x-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-full py-1 pl-1 pr-2.5 select-none"
+        )}
+      >
+        {fallback ? (
+          <Avatar size="xsmall" fallback={fallback} />
+        ) : (
+          <Skeleton className="w-5 h-5 rounded-full" />
+        )}
+        {displayName ? (
+          <Text
+            size="xsmall"
+            weight="plus"
+            leading="compact"
+            className="truncate"
+          >
+            {displayName}
+          </Text>
+        ) : (
+          <Skeleton className="w-[70px] h-[9px]" />
+        )}
+      </button>
+    </DropdownMenu.Trigger>
+  )
+}
+
+const ThemeToggle = () => {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <DropdownMenu.SubMenu>
+      <DropdownMenu.SubMenuTrigger className="rounded-md">
+        <CircleHalfSolid className="text-ui-fg-subtle mr-2" />
+        Theme
+      </DropdownMenu.SubMenuTrigger>
+      <DropdownMenu.SubMenuContent>
+        <DropdownMenu.RadioGroup value={theme}>
+          <DropdownMenu.RadioItem
+            value="light"
+            onClick={(e) => {
+              e.preventDefault()
+              setTheme("light")
+            }}
+          >
+            Light
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem
+            value="dark"
+            onClick={(e) => {
+              e.preventDefault()
+              setTheme("dark")
+            }}
+          >
+            Dark
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.SubMenuContent>
+    </DropdownMenu.SubMenu>
+  )
+}
+
+const Logout = () => {
+  const navigate = useNavigate()
+  const { mutateAsync: logoutMutation } = useAdminDeleteSession()
+
+  const handleLayout = async () => {
+    await logoutMutation(undefined, {
+      onSuccess: () => {
+        navigate("/login")
+      },
+    })
+  }
+
+  return (
+    <DropdownMenu.Item onClick={handleLayout}>
+      <div className="flex items-center gap-x-2">
+        <ArrowRightOnRectangle className="text-ui-fg-subtle" />
+        <span>Logout</span>
+      </div>
+    </DropdownMenu.Item>
+  )
+}
+
+const Profile = () => {
+  const location = useLocation()
+
+  return (
+    <Link to="/settings/profile" state={{ from: location.pathname }}>
+      <DropdownMenu.Item>
+        <UserIcon className="text-ui-fg-subtle mr-2" />
+        Profile
+      </DropdownMenu.Item>
+    </Link>
+  )
+}
+
+const LoggedInUser = () => {
+  return (
+    <DropdownMenu>
+      <UserBadge />
+      <DropdownMenu.Content align="center">
+        <Profile />
+        <DropdownMenu.Separator />
+        <Link to="https://docs.medusajs.com/user-guide" target="_blank">
+          <DropdownMenu.Item>
+            <BookOpen className="text-ui-fg-subtle mr-2" />
+            Documentation
+          </DropdownMenu.Item>
+        </Link>
+        <Link to="https://medusajs.com/changelog/" target="_blank">
+          <DropdownMenu.Item>
+            <Calendar className="text-ui-fg-subtle mr-2" />
+            Changelog
+          </DropdownMenu.Item>
+        </Link>
+        <DropdownMenu.Separator />
+        <ThemeToggle />
+        <DropdownMenu.Separator />
+        <Logout />
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const SettingsLink = () => {
+  const location = useLocation()
+
+  return (
+    <Link
+      to="/settings"
+      className="flex items-center justify-center"
+      state={{ from: location.pathname }}
+    >
+      <IconButton
+        size="small"
+        variant="transparent"
+        className="text-ui-fg-muted transition-fg hover:text-ui-fg-subtle"
+      >
+        <CogSixTooth />
+      </IconButton>
+    </Link>
+  )
+}
+
+const ToggleNotifications = () => {
+  return (
+    <IconButton
+      size="small"
+      variant="transparent"
+      className="text-ui-fg-muted transition-fg hover:text-ui-fg-subtle"
+    >
+      <BellAlert />
+    </IconButton>
+  )
+}
+
+const Searchbar = () => {
+  const { toggleSearch } = useSearch()
+
+  return (
+    <button
+      onClick={toggleSearch}
+      className="shadow-borders-base bg-ui-bg-subtle hover:bg-ui-bg-subtle-hover transition-fg focus-visible:shadow-borders-focus text-ui-fg-muted flex w-full max-w-[280px] items-center gap-x-2 rounded-full py-1.5 pl-2 pr-1.5 outline-none select-none"
+    >
+      <MagnifyingGlass />
+      <div className="flex-1 text-left">
+        <Text size="small" leading="compact">
+          Jump to or search
+        </Text>
+      </div>
+      <Kbd className="rounded-full">⌘K</Kbd>
+    </button>
+  )
+}
+
+const ToggleSidebar = () => {
+  const { toggle } = useSidebar()
+
+  return (
+    <div>
+      <IconButton
+        className="hidden lg:flex"
+        variant="transparent"
+        onClick={() => toggle("desktop")}
+      >
+        <Sidebar className="text-ui-fg-muted" />
+      </IconButton>
+      <IconButton
+        className="hidden max-lg:flex"
+        variant="transparent"
+        onClick={() => toggle("mobile")}
+      >
+        <Sidebar className="text-ui-fg-muted" />
+      </IconButton>
+    </div>
+  )
+}
+
+const Topbar = () => {
+  return (
+    <div className="w-full grid-cols-3 border-b p-3 grid">
+      <div className="flex items-center gap-x-1.5">
+        <ToggleSidebar />
+        <Breadcrumbs />
+      </div>
+      <div className="flex items-center justify-center">
+        <Searchbar />
+      </div>
+      <div className="flex items-center justify-end gap-x-3">
+        <div className="text-ui-fg-muted flex items-center gap-x-1">
+          <ToggleNotifications />
+          <SettingsLink />
+        </div>
+        <LoggedInUser />
+      </div>
+    </div>
+  )
+}
+
+const DesktopSidebarContainer = ({ children }: PropsWithChildren) => {
+  const { desktop } = useSidebar()
+
+  return (
+    <div
+      className={clx("hidden h-screen w-[220px] border-r", {
+        "lg:flex": desktop,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+const MobileSidebarContainer = ({ children }: PropsWithChildren) => {
+  const { mobile, toggle } = useSidebar()
+
+  return (
+    <Dialog.Root open={mobile} onOpenChange={() => toggle("mobile")}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-ui-bg-overlay" />
+        <Dialog.Content className="h-screen fixed left-0 inset-y-0 w-[220px] border-r bg-ui-bg-subtle">
+          {children}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

packages/admin-next/dashboard/src/components/localization/localized-date-picker/index.ts

@@ -0,0 +1 @@
+export * from "./localized-date-picker"

packages/admin-next/dashboard/src/components/localization/localized-date-picker/localized-date-picker.tsx

@@ -0,0 +1,36 @@
+import { DatePicker } from "@medusajs/ui"
+import { ComponentPropsWithoutRef } from "react"
+import { useTranslation } from "react-i18next"
+import { languages } from "../../../i18n/config"
+
+type LocalizedDatePickerProps = Omit<
+  ComponentPropsWithoutRef<typeof DatePicker>,
+  "translations" | "locale"
+>
+
+export const LocalizedDatePicker = ({
+  mode = "single",
+  ...props
+}: LocalizedDatePickerProps) => {
+  const { i18n, t } = useTranslation()
+
+  const locale = languages.find((lang) => lang.code === i18n.language)
+    ?.date_locale
+
+  const translations = {
+    cancel: t("general.cancel"),
+    apply: t("general.apply"),
+    end: t("general.end"),
+    start: t("general.start"),
+    range: t("general.range"),
+  }
+
+  return (
+    <DatePicker
+      mode={mode}
+      translations={translations}
+      locale={locale}
+      {...(props as any)}
+    />
+  )
+}

packages/admin-next/dashboard/src/components/localization/localized-table-pagination/index.ts

@@ -0,0 +1 @@
+export * from "./localized-table-pagination"

packages/admin-next/dashboard/src/components/localization/localized-table-pagination/localized-table-pagination.tsx

@@ -0,0 +1,26 @@
+import { Table } from "@medusajs/ui"
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+import { useTranslation } from "react-i18next"
+
+type LocalizedTablePaginationProps = Omit<
+  ComponentPropsWithoutRef<typeof Table.Pagination>,
+  "translations"
+>
+
+export const LocalizedTablePagination = forwardRef<
+  ElementRef<typeof Table.Pagination>,
+  LocalizedTablePaginationProps
+>((props, ref) => {
+  const { t } = useTranslation()
+
+  const translations = {
+    of: t("general.of"),
+    results: t("general.results"),
+    pages: t("general.pages"),
+    prev: t("general.prev"),
+    next: t("general.next"),
+  }
+
+  return <Table.Pagination {...props} translations={translations} ref={ref} />
+})
+LocalizedTablePagination.displayName = "LocalizedTablePagination"

packages/admin-next/dashboard/src/components/search/search.tsx

@@ -1,5 +1,5 @@
 import { MagnifyingGlass } from "@medusajs/icons"
-import { clx } from "@medusajs/ui"
+import { Kbd, Text, clx } from "@medusajs/ui"
 import * as Dialog from "@radix-ui/react-dialog"
 import { Command } from "cmdk"
 import {
@@ -10,6 +10,7 @@ import {
   useMemo,
 } from "react"
 import { useTranslation } from "react-i18next"
+
 import { useSearch } from "../../providers/search-provider"
 
 export const Search = () => {
@@ -100,6 +101,18 @@ const useLinks = (): CommandGroupProps[] => {
           {
             label: t("users.domain"),
           },
+          {
+            label: t("regions.domain"),
+          },
+          {
+            label: t("locations.domain"),
+          },
+          {
+            label: t("salesChannels.domain"),
+          },
+          {
+            label: t("apiKeyManagement.domain"),
+          },
         ],
       },
     ],
@@ -129,11 +142,30 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
     <Dialog.Root {...props}>
       <Dialog.Portal>
         <Dialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
-        <Dialog.Content className="bg-ui-bg-subtle shadow-elevation-modal fixed left-[50%] top-[50%] w-full max-w-2xl translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-xl p-0">
+        <Dialog.Content className="bg-ui-bg-base shadow-elevation-modal fixed left-[50%] top-[50%] w-full max-w-2xl translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-xl p-0">
           <CommandPalette className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
             {children}
           </CommandPalette>
-          <div className="border-t px-4 pb-4 pt-3"></div>
+          <div className="flex items-center justify-between border-t px-4 pb-4 pt-3">
+            <div></div>
+            <div className="flex items-center gap-x-3">
+              <div className="flex items-center gap-x-2">
+                <Text size="xsmall" leading="compact">
+                  Navigation
+                </Text>
+                <div className="flex items-center gap-x-1">
+                  <Kbd>↓</Kbd>
+                  <Kbd>↑</Kbd>
+                </div>
+              </div>
+              <div className="flex items-center gap-x-2">
+                <Text size="xsmall" leading="compact">
+                  Open Result
+                </Text>
+                <Kbd>↵</Kbd>
+              </div>
+            </div>
+          </div>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
@@ -149,7 +181,7 @@ const CommandInput = forwardRef<
     <Command.Input
       ref={ref}
       className={clx(
-        "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-ui-fg-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -166,7 +198,7 @@ const CommandList = forwardRef<
   <Command.List
     ref={ref}
     className={clx(
-      "max-h-[300px] overflow-y-auto overflow-x-hidden",
+      "max-h-[300px] overflow-y-auto overflow-x-hidden pb-4",
       className
     )}
     {...props}
@@ -219,7 +251,7 @@ const CommandItem = forwardRef<
   <Command.Item
     ref={ref}
     className={clx(
-      "aria-selected:bg-accent aria-selected:text-accent-foreground txt-compact-small relative flex cursor-default select-none items-center rounded-sm p-2 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "aria-selected:bg-ui-bg-base-hover hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-hover txt-compact-small relative flex cursor-default select-none items-center rounded-md p-2 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}

packages/admin-next/dashboard/src/hooks/use-form-prompt.tsx

@@ -0,0 +1,20 @@
+import { usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+export const useFormPrompt = () => {
+  const { t } = useTranslation()
+  const fn = usePrompt()
+
+  const promptValues = {
+    title: t("general.unsavedChangesTitle"),
+    description: t("general.unsavedChangesDescription"),
+    cancelText: t("general.cancel"),
+    confirmText: t("general.continue"),
+  }
+
+  const prompt = async () => {
+    return await fn(promptValues)
+  }
+
+  return prompt
+}

packages/admin-next/dashboard/src/hooks/use-query-params.tsx

@@ -0,0 +1,16 @@
+import { useSearchParams } from "react-router-dom"
+
+export function useQueryParams<T extends string>(
+  keys: T[]
+): Record<T, string | undefined> {
+  const [params] = useSearchParams()
+
+  // Use a type assertion to initialize the result
+  const result = {} as Record<T, string | undefined>
+
+  keys.forEach((key) => {
+    result[key] = params.get(key) || undefined
+  })
+
+  return result
+}

packages/admin-next/dashboard/src/hooks/use-route-modal-state.tsx

@@ -0,0 +1,63 @@
+import { usePrompt } from "@medusajs/ui"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+
+type Prompt = {
+  title: string
+  description: string
+  cancelText: string
+  confirmText: string
+}
+
+/**
+ * Hook for managing the state of route modals.
+ */
+export const useRouteModalState = (): [
+  open: boolean,
+  onOpenChange: (open: boolean, ignore?: boolean) => void,
+  /**
+   * Subscribe to the dirty state of the form.
+   * If the form is dirty, the modal will prompt
+   * the user before closing.
+   */
+  subscribe: (value: boolean) => void,
+] => {
+  const [open, setOpen] = useState(false)
+  const [shouldPrompt, subscribe] = useState(false)
+
+  const navigate = useNavigate()
+  const prompt = usePrompt()
+  const { t } = useTranslation()
+
+  let promptValues: Prompt = {
+    title: t("general.unsavedChangesTitle"),
+    description: t("general.unsavedChangesDescription"),
+    cancelText: t("general.cancel"),
+    confirmText: t("general.continue"),
+  }
+
+  useEffect(() => {
+    setOpen(true)
+  }, [])
+
+  const onOpenChange = async (open: boolean, ignore = false) => {
+    if (!open) {
+      if (shouldPrompt && !ignore) {
+        const confirmed = await prompt(promptValues)
+
+        if (!confirmed) {
+          return
+        }
+      }
+
+      setTimeout(() => {
+        navigate("..", { replace: true })
+      }, 200)
+    }
+
+    setOpen(open)
+  }
+
+  return [open, onOpenChange, subscribe]
+}

packages/admin-next/dashboard/src/i18n/config.ts

@@ -1,3 +1,4 @@
+import { enUS } from "date-fns/locale"
 import i18n from "i18next"
 import LanguageDetector from "i18next-browser-languagedetector"
 import Backend, { type HttpBackendOptions } from "i18next-http-backend"
@@ -22,6 +23,7 @@ export const languages: Language[] = [
     code: "en",
     display_name: "English",
     ltr: true,
+    date_locale: enUS,
   },
 ]
 

packages/admin-next/dashboard/src/i18n/types.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import en from "../../public/locales/en/translation.json"
 
 const resources = {
@@ -10,4 +11,5 @@ export type Language = {
   code: string
   display_name: string
   ltr: boolean
+  date_locale: Locale
 }

packages/admin-next/dashboard/src/lib/currencies.ts

@@ -0,0 +1,730 @@
+/** This file is auto-generated. Do not modify it manually. */
+type CurrencyInfo = {
+  code: string
+  name: string
+  symbol_native: string
+  decimal_digits: number
+}
+
+export const currencies: Record<string, CurrencyInfo> = {
+  USD: {
+    code: "USD",
+    name: "US Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  CAD: {
+    code: "CAD",
+    name: "Canadian Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  EUR: {
+    code: "EUR",
+    name: "Euro",
+    symbol_native: "€",
+    decimal_digits: 2,
+  },
+  AED: {
+    code: "AED",
+    name: "United Arab Emirates Dirham",
+    symbol_native: "د.إ.‏",
+    decimal_digits: 2,
+  },
+  AFN: {
+    code: "AFN",
+    name: "Afghan Afghani",
+    symbol_native: "؋",
+    decimal_digits: 0,
+  },
+  ALL: {
+    code: "ALL",
+    name: "Albanian Lek",
+    symbol_native: "Lek",
+    decimal_digits: 0,
+  },
+  AMD: {
+    code: "AMD",
+    name: "Armenian Dram",
+    symbol_native: "դր.",
+    decimal_digits: 0,
+  },
+  ARS: {
+    code: "ARS",
+    name: "Argentine Peso",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  AUD: {
+    code: "AUD",
+    name: "Australian Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  AZN: {
+    code: "AZN",
+    name: "Azerbaijani Manat",
+    symbol_native: "ман.",
+    decimal_digits: 2,
+  },
+  BAM: {
+    code: "BAM",
+    name: "Bosnia-Herzegovina Convertible Mark",
+    symbol_native: "KM",
+    decimal_digits: 2,
+  },
+  BDT: {
+    code: "BDT",
+    name: "Bangladeshi Taka",
+    symbol_native: "৳",
+    decimal_digits: 2,
+  },
+  BGN: {
+    code: "BGN",
+    name: "Bulgarian Lev",
+    symbol_native: "лв.",
+    decimal_digits: 2,
+  },
+  BHD: {
+    code: "BHD",
+    name: "Bahraini Dinar",
+    symbol_native: "د.ب.‏",
+    decimal_digits: 3,
+  },
+  BIF: {
+    code: "BIF",
+    name: "Burundian Franc",
+    symbol_native: "FBu",
+    decimal_digits: 0,
+  },
+  BND: {
+    code: "BND",
+    name: "Brunei Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  BOB: {
+    code: "BOB",
+    name: "Bolivian Boliviano",
+    symbol_native: "Bs",
+    decimal_digits: 2,
+  },
+  BRL: {
+    code: "BRL",
+    name: "Brazilian Real",
+    symbol_native: "R$",
+    decimal_digits: 2,
+  },
+  BWP: {
+    code: "BWP",
+    name: "Botswanan Pula",
+    symbol_native: "P",
+    decimal_digits: 2,
+  },
+  BYN: {
+    code: "BYN",
+    name: "Belarusian Ruble",
+    symbol_native: "руб.",
+    decimal_digits: 2,
+  },
+  BZD: {
+    code: "BZD",
+    name: "Belize Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  CDF: {
+    code: "CDF",
+    name: "Congolese Franc",
+    symbol_native: "FrCD",
+    decimal_digits: 2,
+  },
+  CHF: {
+    code: "CHF",
+    name: "Swiss Franc",
+    symbol_native: "CHF",
+    decimal_digits: 2,
+  },
+  CLP: {
+    code: "CLP",
+    name: "Chilean Peso",
+    symbol_native: "$",
+    decimal_digits: 0,
+  },
+  CNY: {
+    code: "CNY",
+    name: "Chinese Yuan",
+    symbol_native: "CN¥",
+    decimal_digits: 2,
+  },
+  COP: {
+    code: "COP",
+    name: "Colombian Peso",
+    symbol_native: "$",
+    decimal_digits: 0,
+  },
+  CRC: {
+    code: "CRC",
+    name: "Costa Rican Colón",
+    symbol_native: "₡",
+    decimal_digits: 0,
+  },
+  CVE: {
+    code: "CVE",
+    name: "Cape Verdean Escudo",
+    symbol_native: "CV$",
+    decimal_digits: 2,
+  },
+  CZK: {
+    code: "CZK",
+    name: "Czech Republic Koruna",
+    symbol_native: "Kč",
+    decimal_digits: 2,
+  },
+  DJF: {
+    code: "DJF",
+    name: "Djiboutian Franc",
+    symbol_native: "Fdj",
+    decimal_digits: 0,
+  },
+  DKK: {
+    code: "DKK",
+    name: "Danish Krone",
+    symbol_native: "kr",
+    decimal_digits: 2,
+  },
+  DOP: {
+    code: "DOP",
+    name: "Dominican Peso",
+    symbol_native: "RD$",
+    decimal_digits: 2,
+  },
+  DZD: {
+    code: "DZD",
+    name: "Algerian Dinar",
+    symbol_native: "د.ج.‏",
+    decimal_digits: 2,
+  },
+  EEK: {
+    code: "EEK",
+    name: "Estonian Kroon",
+    symbol_native: "kr",
+    decimal_digits: 2,
+  },
+  EGP: {
+    code: "EGP",
+    name: "Egyptian Pound",
+    symbol_native: "ج.م.‏",
+    decimal_digits: 2,
+  },
+  ERN: {
+    code: "ERN",
+    name: "Eritrean Nakfa",
+    symbol_native: "Nfk",
+    decimal_digits: 2,
+  },
+  ETB: {
+    code: "ETB",
+    name: "Ethiopian Birr",
+    symbol_native: "Br",
+    decimal_digits: 2,
+  },
+  GBP: {
+    code: "GBP",
+    name: "British Pound Sterling",
+    symbol_native: "£",
+    decimal_digits: 2,
+  },
+  GEL: {
+    code: "GEL",
+    name: "Georgian Lari",
+    symbol_native: "GEL",
+    decimal_digits: 2,
+  },
+  GHS: {
+    code: "GHS",
+    name: "Ghanaian Cedi",
+    symbol_native: "GH₵",
+    decimal_digits: 2,
+  },
+  GNF: {
+    code: "GNF",
+    name: "Guinean Franc",
+    symbol_native: "FG",
+    decimal_digits: 0,
+  },
+  GTQ: {
+    code: "GTQ",
+    name: "Guatemalan Quetzal",
+    symbol_native: "Q",
+    decimal_digits: 2,
+  },
+  HKD: {
+    code: "HKD",
+    name: "Hong Kong Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  HNL: {
+    code: "HNL",
+    name: "Honduran Lempira",
+    symbol_native: "L",
+    decimal_digits: 2,
+  },
+  HRK: {
+    code: "HRK",
+    name: "Croatian Kuna",
+    symbol_native: "kn",
+    decimal_digits: 2,
+  },
+  HUF: {
+    code: "HUF",
+    name: "Hungarian Forint",
+    symbol_native: "Ft",
+    decimal_digits: 0,
+  },
+  IDR: {
+    code: "IDR",
+    name: "Indonesian Rupiah",
+    symbol_native: "Rp",
+    decimal_digits: 0,
+  },
+  ILS: {
+    code: "ILS",
+    name: "Israeli New Sheqel",
+    symbol_native: "₪",
+    decimal_digits: 2,
+  },
+  INR: {
+    code: "INR",
+    name: "Indian Rupee",
+    symbol_native: "টকা",
+    decimal_digits: 2,
+  },
+  IQD: {
+    code: "IQD",
+    name: "Iraqi Dinar",
+    symbol_native: "د.ع.‏",
+    decimal_digits: 0,
+  },
+  IRR: {
+    code: "IRR",
+    name: "Iranian Rial",
+    symbol_native: "﷼",
+    decimal_digits: 0,
+  },
+  ISK: {
+    code: "ISK",
+    name: "Icelandic Króna",
+    symbol_native: "kr",
+    decimal_digits: 0,
+  },
+  JMD: {
+    code: "JMD",
+    name: "Jamaican Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  JOD: {
+    code: "JOD",
+    name: "Jordanian Dinar",
+    symbol_native: "د.أ.‏",
+    decimal_digits: 3,
+  },
+  JPY: {
+    code: "JPY",
+    name: "Japanese Yen",
+    symbol_native: "￥",
+    decimal_digits: 0,
+  },
+  KES: {
+    code: "KES",
+    name: "Kenyan Shilling",
+    symbol_native: "Ksh",
+    decimal_digits: 2,
+  },
+  KHR: {
+    code: "KHR",
+    name: "Cambodian Riel",
+    symbol_native: "៛",
+    decimal_digits: 2,
+  },
+  KMF: {
+    code: "KMF",
+    name: "Comorian Franc",
+    symbol_native: "FC",
+    decimal_digits: 0,
+  },
+  KRW: {
+    code: "KRW",
+    name: "South Korean Won",
+    symbol_native: "₩",
+    decimal_digits: 0,
+  },
+  KWD: {
+    code: "KWD",
+    name: "Kuwaiti Dinar",
+    symbol_native: "د.ك.‏",
+    decimal_digits: 3,
+  },
+  KZT: {
+    code: "KZT",
+    name: "Kazakhstani Tenge",
+    symbol_native: "тңг.",
+    decimal_digits: 2,
+  },
+  LBP: {
+    code: "LBP",
+    name: "Lebanese Pound",
+    symbol_native: "ل.ل.‏",
+    decimal_digits: 0,
+  },
+  LKR: {
+    code: "LKR",
+    name: "Sri Lankan Rupee",
+    symbol_native: "SL Re",
+    decimal_digits: 2,
+  },
+  LTL: {
+    code: "LTL",
+    name: "Lithuanian Litas",
+    symbol_native: "Lt",
+    decimal_digits: 2,
+  },
+  LVL: {
+    code: "LVL",
+    name: "Latvian Lats",
+    symbol_native: "Ls",
+    decimal_digits: 2,
+  },
+  LYD: {
+    code: "LYD",
+    name: "Libyan Dinar",
+    symbol_native: "د.ل.‏",
+    decimal_digits: 3,
+  },
+  MAD: {
+    code: "MAD",
+    name: "Moroccan Dirham",
+    symbol_native: "د.م.‏",
+    decimal_digits: 2,
+  },
+  MDL: {
+    code: "MDL",
+    name: "Moldovan Leu",
+    symbol_native: "MDL",
+    decimal_digits: 2,
+  },
+  MGA: {
+    code: "MGA",
+    name: "Malagasy Ariary",
+    symbol_native: "MGA",
+    decimal_digits: 0,
+  },
+  MKD: {
+    code: "MKD",
+    name: "Macedonian Denar",
+    symbol_native: "MKD",
+    decimal_digits: 2,
+  },
+  MMK: {
+    code: "MMK",
+    name: "Myanma Kyat",
+    symbol_native: "K",
+    decimal_digits: 0,
+  },
+  MNT: {
+    code: "MNT",
+    name: "Mongolian Tugrig",
+    symbol_native: "₮",
+    decimal_digits: 0,
+  },
+  MOP: {
+    code: "MOP",
+    name: "Macanese Pataca",
+    symbol_native: "MOP$",
+    decimal_digits: 2,
+  },
+  MUR: {
+    code: "MUR",
+    name: "Mauritian Rupee",
+    symbol_native: "MURs",
+    decimal_digits: 0,
+  },
+  MXN: {
+    code: "MXN",
+    name: "Mexican Peso",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  MYR: {
+    code: "MYR",
+    name: "Malaysian Ringgit",
+    symbol_native: "RM",
+    decimal_digits: 2,
+  },
+  MZN: {
+    code: "MZN",
+    name: "Mozambican Metical",
+    symbol_native: "MTn",
+    decimal_digits: 2,
+  },
+  NAD: {
+    code: "NAD",
+    name: "Namibian Dollar",
+    symbol_native: "N$",
+    decimal_digits: 2,
+  },
+  NGN: {
+    code: "NGN",
+    name: "Nigerian Naira",
+    symbol_native: "₦",
+    decimal_digits: 2,
+  },
+  NIO: {
+    code: "NIO",
+    name: "Nicaraguan Córdoba",
+    symbol_native: "C$",
+    decimal_digits: 2,
+  },
+  NOK: {
+    code: "NOK",
+    name: "Norwegian Krone",
+    symbol_native: "kr",
+    decimal_digits: 2,
+  },
+  NPR: {
+    code: "NPR",
+    name: "Nepalese Rupee",
+    symbol_native: "नेरू",
+    decimal_digits: 2,
+  },
+  NZD: {
+    code: "NZD",
+    name: "New Zealand Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  OMR: {
+    code: "OMR",
+    name: "Omani Rial",
+    symbol_native: "ر.ع.‏",
+    decimal_digits: 3,
+  },
+  PAB: {
+    code: "PAB",
+    name: "Panamanian Balboa",
+    symbol_native: "B/.",
+    decimal_digits: 2,
+  },
+  PEN: {
+    code: "PEN",
+    name: "Peruvian Nuevo Sol",
+    symbol_native: "S/.",
+    decimal_digits: 2,
+  },
+  PHP: {
+    code: "PHP",
+    name: "Philippine Peso",
+    symbol_native: "₱",
+    decimal_digits: 2,
+  },
+  PKR: {
+    code: "PKR",
+    name: "Pakistani Rupee",
+    symbol_native: "₨",
+    decimal_digits: 0,
+  },
+  PLN: {
+    code: "PLN",
+    name: "Polish Zloty",
+    symbol_native: "zł",
+    decimal_digits: 2,
+  },
+  PYG: {
+    code: "PYG",
+    name: "Paraguayan Guarani",
+    symbol_native: "₲",
+    decimal_digits: 0,
+  },
+  QAR: {
+    code: "QAR",
+    name: "Qatari Rial",
+    symbol_native: "ر.ق.‏",
+    decimal_digits: 2,
+  },
+  RON: {
+    code: "RON",
+    name: "Romanian Leu",
+    symbol_native: "RON",
+    decimal_digits: 2,
+  },
+  RSD: {
+    code: "RSD",
+    name: "Serbian Dinar",
+    symbol_native: "дин.",
+    decimal_digits: 0,
+  },
+  RUB: {
+    code: "RUB",
+    name: "Russian Ruble",
+    symbol_native: "₽.",
+    decimal_digits: 2,
+  },
+  RWF: {
+    code: "RWF",
+    name: "Rwandan Franc",
+    symbol_native: "FR",
+    decimal_digits: 0,
+  },
+  SAR: {
+    code: "SAR",
+    name: "Saudi Riyal",
+    symbol_native: "ر.س.‏",
+    decimal_digits: 2,
+  },
+  SDG: {
+    code: "SDG",
+    name: "Sudanese Pound",
+    symbol_native: "SDG",
+    decimal_digits: 2,
+  },
+  SEK: {
+    code: "SEK",
+    name: "Swedish Krona",
+    symbol_native: "kr",
+    decimal_digits: 2,
+  },
+  SGD: {
+    code: "SGD",
+    name: "Singapore Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  SOS: {
+    code: "SOS",
+    name: "Somali Shilling",
+    symbol_native: "Ssh",
+    decimal_digits: 0,
+  },
+  SYP: {
+    code: "SYP",
+    name: "Syrian Pound",
+    symbol_native: "ل.س.‏",
+    decimal_digits: 0,
+  },
+  THB: {
+    code: "THB",
+    name: "Thai Baht",
+    symbol_native: "฿",
+    decimal_digits: 2,
+  },
+  TND: {
+    code: "TND",
+    name: "Tunisian Dinar",
+    symbol_native: "د.ت.‏",
+    decimal_digits: 3,
+  },
+  TOP: {
+    code: "TOP",
+    name: "Tongan Paʻanga",
+    symbol_native: "T$",
+    decimal_digits: 2,
+  },
+  TRY: {
+    code: "TRY",
+    name: "Turkish Lira",
+    symbol_native: "TL",
+    decimal_digits: 2,
+  },
+  TTD: {
+    code: "TTD",
+    name: "Trinidad and Tobago Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  TWD: {
+    code: "TWD",
+    name: "New Taiwan Dollar",
+    symbol_native: "NT$",
+    decimal_digits: 2,
+  },
+  TZS: {
+    code: "TZS",
+    name: "Tanzanian Shilling",
+    symbol_native: "TSh",
+    decimal_digits: 0,
+  },
+  UAH: {
+    code: "UAH",
+    name: "Ukrainian Hryvnia",
+    symbol_native: "₴",
+    decimal_digits: 2,
+  },
+  UGX: {
+    code: "UGX",
+    name: "Ugandan Shilling",
+    symbol_native: "USh",
+    decimal_digits: 0,
+  },
+  UYU: {
+    code: "UYU",
+    name: "Uruguayan Peso",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  UZS: {
+    code: "UZS",
+    name: "Uzbekistan Som",
+    symbol_native: "UZS",
+    decimal_digits: 0,
+  },
+  VEF: {
+    code: "VEF",
+    name: "Venezuelan Bolívar",
+    symbol_native: "Bs.F.",
+    decimal_digits: 2,
+  },
+  VND: {
+    code: "VND",
+    name: "Vietnamese Dong",
+    symbol_native: "₫",
+    decimal_digits: 0,
+  },
+  XAF: {
+    code: "XAF",
+    name: "CFA Franc BEAC",
+    symbol_native: "FCFA",
+    decimal_digits: 0,
+  },
+  XOF: {
+    code: "XOF",
+    name: "CFA Franc BCEAO",
+    symbol_native: "CFA",
+    decimal_digits: 0,
+  },
+  YER: {
+    code: "YER",
+    name: "Yemeni Rial",
+    symbol_native: "ر.ي.‏",
+    decimal_digits: 0,
+  },
+  ZAR: {
+    code: "ZAR",
+    name: "South African Rand",
+    symbol_native: "R",
+    decimal_digits: 2,
+  },
+  ZMK: {
+    code: "ZMK",
+    name: "Zambian Kwacha",
+    symbol_native: "ZK",
+    decimal_digits: 0,
+  },
+  ZWL: {
+    code: "ZWL",
+    name: "Zimbabwean Dollar",
+    symbol_native: "ZWL$",
+    decimal_digits: 0,
+  },
+}

packages/admin-next/dashboard/src/lib/debounce.ts

@@ -0,0 +1,20 @@
+type Options = {
+  leading?: boolean
+}
+
+export const debounce = (
+  func: (...args: any[]) => void,
+  delay: number,
+  { leading }: Options = {}
+): ((...args: any[]) => void) => {
+  let timerId: NodeJS.Timeout | undefined
+
+  return (...args) => {
+    if (!timerId && leading) {
+      func(...args)
+    }
+    clearTimeout(timerId)
+
+    timerId = setTimeout(() => func(...args), delay)
+  }
+}

packages/admin-next/dashboard/src/lib/is-axios-error.ts

@@ -0,0 +1,5 @@
+import type { AxiosError } from "axios"
+
+export const isAxiosError = (error: any): error is AxiosError => {
+  return error.isAxiosError
+}

packages/admin-next/dashboard/src/lib/medusa.ts

@@ -1,6 +1,9 @@
 import Medusa from "@medusajs/medusa-js"
 import { QueryClient } from "@tanstack/react-query"
 
+export const MEDUSA_BACKEND_URL =
+  import.meta.env.VITE_MEDUSA_ADMIN_BACKEND_URL || "http://localhost:9000"
+
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -12,6 +15,6 @@ export const queryClient = new QueryClient({
 })
 
 export const medusa = new Medusa({
-  baseUrl: "http://localhost:9000",
-  maxRetries: 3,
+  baseUrl: MEDUSA_BACKEND_URL,
+  maxRetries: 1,
 })

packages/admin-next/dashboard/src/lib/money-amount-helpers.ts

@@ -0,0 +1,21 @@
+import { currencies } from "./currencies"
+
+export const getPresentationalAmount = (amount: number, currency: string) => {
+  const decimalDigits = currencies[currency.toUpperCase()].decimal_digits
+
+  if (decimalDigits === 0) {
+    throw new Error("Currency has no decimal digits")
+  }
+
+  return amount / 10 ** decimalDigits
+}
+
+export const getDbAmount = (amount: number, currency: string) => {
+  const decimalDigits = currencies[currency.toUpperCase()].decimal_digits
+
+  if (decimalDigits === 0) {
+    throw new Error("Currency has no decimal digits")
+  }
+
+  return amount * 10 ** decimalDigits
+}

packages/admin-next/dashboard/src/providers/auth-provider/auth-context.tsx

@@ -1,10 +0,0 @@
-import { AdminAuthRes, User } from "@medusajs/medusa"
-import { createContext } from "react"
-
-type AuthContextValue = {
-  login: (email: string, password: string) => Promise<AdminAuthRes>
-  user: Omit<User, "password_hash"> | null
-  isLoading: boolean
-}
-
-export const AuthContext = createContext<AuthContextValue | null>(null)

packages/admin-next/dashboard/src/providers/auth-provider/auth-provider.tsx

@@ -1,24 +0,0 @@
-import { useAdminGetSession, useAdminLogin } from "medusa-react"
-import { PropsWithChildren } from "react"
-import { AuthContext } from "./auth-context"
-
-export const AuthProvider = ({ children }: PropsWithChildren) => {
-  const { mutateAsync: loginMutation } = useAdminLogin()
-  const { user, isLoading } = useAdminGetSession()
-
-  const login = async (email: string, password: string) => {
-    return await loginMutation({ email, password })
-  }
-
-  return (
-    <AuthContext.Provider
-      value={{
-        login,
-        user: user ?? null,
-        isLoading,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  )
-}

packages/admin-next/dashboard/src/providers/auth-provider/index.ts

@@ -1,2 +0,0 @@
-export * from "./auth-provider";
-export * from "./use-auth";

packages/admin-next/dashboard/src/providers/auth-provider/use-auth.tsx

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { AuthContext } from "./auth-context";
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
-};

packages/admin-next/dashboard/src/providers/router-provider/router-provider.tsx

@@ -1,18 +1,24 @@
+import type {
+  AdminCustomerGroupsRes,
+  AdminCustomersRes,
+  AdminProductsRes,
+  AdminRegionsRes,
+} from "@medusajs/medusa"
 import {
+  Outlet,
   RouterProvider as Provider,
   RouteObject,
   createBrowserRouter,
 } from "react-router-dom"
 
-import { RequireAuth } from "../../components/authentication/require-auth"
-import { AppLayout } from "../../components/layout/app-layout"
+import { ProtectedRoute } from "../../components/authentication/require-auth"
+import { ErrorBoundary } from "../../components/error/error-boundary"
+import { MainLayout } from "../../components/layout/main-layout"
 import { PublicLayout } from "../../components/layout/public-layout"
+import { SettingsLayout } from "../../components/layout/settings-layout"
 
-import { AdminProductsRes } from "@medusajs/medusa"
 import routes from "medusa-admin:routes/pages"
 import settings from "medusa-admin:settings/pages"
-import { ErrorBoundary } from "../../components/error/error-boundary"
-import { SearchProvider } from "../search-provider"
 
 const routeExtensions: RouteObject[] = routes.pages.map((ext) => {
   return {
@@ -45,161 +51,239 @@ const router = createBrowserRouter([
     ],
   },
   {
-    element: (
-      <RequireAuth>
-        <SearchProvider>
-          <AppLayout />
-        </SearchProvider>
-      </RequireAuth>
-    ),
+    element: <ProtectedRoute />,
     errorElement: <ErrorBoundary />,
     children: [
       {
         path: "/",
-        lazy: () => import("../../routes/home"),
-      },
-      {
-        path: "/orders",
+        element: <MainLayout />,
         children: [
           {
             index: true,
-            lazy: () => import("../../routes/orders/list"),
+            lazy: () => import("../../routes/home"),
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/orders/details"),
-          },
-        ],
-      },
-      {
-        path: "/draft-orders",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/draft-orders/list"),
-          },
-          {
-            path: ":id",
-            lazy: () => import("../../routes/draft-orders/details"),
-          },
-        ],
-      },
-      {
-        path: "/products",
-        handle: {
-          crumb: () => "Products",
-        },
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/products/views/product-list"),
-          },
-          {
-            path: ":id",
-            lazy: () => import("../../routes/products/views/product-details"),
+            path: "/orders",
             handle: {
-              crumb: (data: AdminProductsRes) => data.product.title,
+              crumb: () => "Orders",
             },
-          },
-        ],
-      },
-      {
-        path: "/categories",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/categories/list"),
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/orders/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/orders/details"),
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/categories/details"),
-          },
-        ],
-      },
-      {
-        path: "/collections",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/collections/list"),
+            path: "/draft-orders",
+            handle: {
+              crumb: () => "Draft Orders",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/draft-orders/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/draft-orders/details"),
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/collections/details"),
-          },
-        ],
-      },
-      {
-        path: "/customers",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/customers/list"),
+            path: "/products",
+            handle: {
+              crumb: () => "Products",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/products/product-list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/products/product-detail"),
+                handle: {
+                  crumb: (data: AdminProductsRes) => data.product.title,
+                },
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/customers/details"),
-          },
-        ],
-      },
-      {
-        path: "/customer-groups",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/customer-groups/list"),
+            path: "/categories",
+            handle: {
+              crumb: () => "Categories",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/categories/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/categories/details"),
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/customer-groups/details"),
-          },
-        ],
-      },
-      {
-        path: "/gift-cards",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/gift-cards/list"),
+            path: "/collections",
+            handle: {
+              crumb: () => "Collections",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/collections/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/collections/details"),
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/gift-cards/details"),
-          },
-        ],
-      },
-      {
-        path: "/inventory",
-        lazy: () => import("../../routes/inventory/list"),
-      },
-      {
-        path: "/discounts",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/discounts/list"),
+            path: "/customers",
+            handle: {
+              crumb: () => "Customers",
+            },
+            children: [
+              {
+                path: "",
+                lazy: () => import("../../routes/customers/customer-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import("../../routes/customers/customer-create"),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/customers/customer-detail"),
+                handle: {
+                  crumb: (data: AdminCustomersRes) => data.customer.email,
+                },
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () => import("../../routes/customers/customer-edit"),
+                  },
+                ],
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/discounts/details"),
-          },
-        ],
-      },
-      {
-        path: "/pricing",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/pricing/list"),
+            path: "/customer-groups",
+            handle: {
+              crumb: () => "Customer Groups",
+            },
+            children: [
+              {
+                path: "",
+                lazy: () =>
+                  import("../../routes/customer-groups/customer-group-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import(
+                        "../../routes/customer-groups/customer-group-create"
+                      ),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () =>
+                  import("../../routes/customer-groups/customer-group-detail"),
+                handle: {
+                  crumb: (data: AdminCustomerGroupsRes) =>
+                    data.customer_group.name,
+                },
+                children: [
+                  {
+                    path: "add-customers",
+                    lazy: () =>
+                      import(
+                        "../../routes/customer-groups/customer-group-add-customers"
+                      ),
+                  },
+                  {
+                    path: "edit",
+                    lazy: () =>
+                      import(
+                        "../../routes/customer-groups/customer-group-edit"
+                      ),
+                  },
+                ],
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/pricing/details"),
+            path: "/gift-cards",
+            handle: {
+              crumb: () => "Gift Cards",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/gift-cards/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/gift-cards/details"),
+              },
+            ],
+          },
+          {
+            path: "/inventory",
+            handle: {
+              crumb: () => "Inventory",
+            },
+            lazy: () => import("../../routes/inventory/list"),
+          },
+          {
+            path: "/discounts",
+            handle: {
+              crumb: () => "Discounts",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/discounts/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/discounts/details"),
+              },
+            ],
+          },
+          {
+            path: "/pricing",
+            handle: {
+              crumb: () => "Pricing",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/pricing/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/pricing/details"),
+              },
+            ],
           },
         ],
       },
       {
         path: "/settings",
+        element: <SettingsLayout />,
         handle: {
           crumb: () => "Settings",
         },
@@ -210,52 +294,131 @@ const router = createBrowserRouter([
           },
           {
             path: "profile",
-            lazy: () => import("../../routes/profile/views/profile-details"),
+            lazy: () => import("../../routes/profile/profile-detail"),
             handle: {
               crumb: () => "Profile",
             },
+            children: [
+              {
+                path: "edit",
+                lazy: () => import("../../routes/profile/profile-edit"),
+              },
+            ],
           },
           {
             path: "store",
-            lazy: () => import("../../routes/store/views/store-details"),
+            lazy: () => import("../../routes/store/store-detail"),
             handle: {
               crumb: () => "Store",
             },
+            children: [
+              {
+                path: "edit",
+                lazy: () => import("../../routes/store/store-edit"),
+              },
+              {
+                path: "add-currencies",
+                lazy: () => import("../../routes/store/store-add-currencies"),
+              },
+            ],
           },
           {
             path: "locations",
-            lazy: () => import("../../routes/locations/list"),
+            element: <Outlet />,
+            handle: {
+              crumb: () => "Locations",
+            },
+            children: [
+              {
+                path: "",
+                lazy: () => import("../../routes/locations/location-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import("../../routes/locations/location-create"),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/locations/location-detail"),
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () => import("../../routes/locations/location-edit"),
+                  },
+                  {
+                    path: "add-sales-channels",
+                    lazy: () =>
+                      import(
+                        "../../routes/locations/location-add-sales-channels"
+                      ),
+                  },
+                ],
+              },
+            ],
           },
           {
             path: "regions",
+            element: <Outlet />,
             handle: {
               crumb: () => "Regions",
             },
             children: [
               {
-                index: true,
-                lazy: () => import("../../routes/regions/views/region-list"),
+                path: "",
+                lazy: () => import("../../routes/regions/region-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () => import("../../routes/regions/region-create"),
+                  },
+                ],
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/regions/views/region-details"),
+                lazy: () => import("../../routes/regions/region-detail"),
+                handle: {
+                  crumb: (data: AdminRegionsRes) => data.region.name,
+                },
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () => import("../../routes/regions/region-edit"),
+                  },
+                ],
               },
             ],
           },
           {
             path: "users",
-            lazy: () => import("../../routes/users"),
+            element: <Outlet />,
             handle: {
               crumb: () => "Users",
             },
-          },
-          {
-            path: "currencies",
-            lazy: () =>
-              import("../../routes/currencies/views/currencies-details"),
-            handle: {
-              crumb: () => "Currencies",
-            },
+            children: [
+              {
+                path: "",
+                lazy: () => import("../../routes/users/user-list"),
+                children: [
+                  {
+                    path: "invite",
+                    lazy: () => import("../../routes/users/user-invite"),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/users/user-detail"),
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () => import("../../routes/users/user-edit"),
+                  },
+                ],
+              },
+            ],
           },
           {
             path: "taxes",
@@ -275,32 +438,86 @@ const router = createBrowserRouter([
           },
           {
             path: "sales-channels",
+            element: <Outlet />,
             handle: {
               crumb: () => "Sales Channels",
             },
             children: [
               {
-                index: true,
+                path: "",
                 lazy: () =>
-                  import(
-                    "../../routes/sales-channels/views/sales-channel-list"
-                  ),
+                  import("../../routes/sales-channels/sales-channel-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import(
+                        "../../routes/sales-channels/sales-channel-create"
+                      ),
+                  },
+                ],
               },
               {
                 path: ":id",
                 lazy: () =>
-                  import(
-                    "../../routes/sales-channels/views/sales-channel-details"
-                  ),
+                  import("../../routes/sales-channels/sales-channel-detail"),
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () =>
+                      import("../../routes/sales-channels/sales-channel-edit"),
+                  },
+                  {
+                    path: "add-products",
+                    lazy: () =>
+                      import(
+                        "../../routes/sales-channels/sales-channel-add-products"
+                      ),
+                  },
+                ],
               },
             ],
           },
           {
             path: "api-key-management",
-            lazy: () => import("../../routes/api-key-management"),
+            element: <Outlet />,
             handle: {
               crumb: () => "API Key Management",
             },
+            children: [
+              {
+                path: "",
+                lazy: () =>
+                  import(
+                    "../../routes/api-key-management/api-key-management-list"
+                  ),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import(
+                        "../../routes/api-key-management/api-key-management-create"
+                      ),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () =>
+                  import(
+                    "../../routes/api-key-management/api-key-management-detail"
+                  ),
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () =>
+                      import(
+                        "../../routes/api-key-management/api-key-management-edit"
+                      ),
+                  },
+                ],
+              },
+            ],
           },
           ...settingsExtensions,
         ],

packages/admin-next/dashboard/src/providers/sidebar-provider/index.ts

@@ -0,0 +1,2 @@
+export * from "./sidebar-provider"
+export * from "./use-sidebar"

packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-context.tsx

@@ -0,0 +1,9 @@
+import { createContext } from "react"
+
+type SidebarContextValue = {
+  desktop: boolean
+  mobile: boolean
+  toggle: (view: "desktop" | "mobile") => void
+}
+
+export const SidebarContext = createContext<SidebarContextValue | null>(null)

packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-provider.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren, useState } from "react"
+import { SidebarContext } from "./sidebar-context"
+
+export const SidebarProvider = ({ children }: PropsWithChildren) => {
+  const [desktop, setDesktop] = useState(true)
+  const [mobile, setMobile] = useState(false)
+
+  const toggle = (view: "desktop" | "mobile") => {
+    if (view === "desktop") {
+      setDesktop(!desktop)
+    } else {
+      setMobile(!mobile)
+    }
+  }
+
+  return (
+    <SidebarContext.Provider value={{ desktop, mobile, toggle }}>
+      {children}
+    </SidebarContext.Provider>
+  )
+}

packages/admin-next/dashboard/src/providers/sidebar-provider/use-sidebar.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react"
+import { SidebarContext } from "./sidebar-context"
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext)
+
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider")
+  }
+
+  return context
+}

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/api-key-management-create.tsx

@@ -0,0 +1,15 @@
+import { FocusModal } from "@medusajs/ui"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { CreatePublishableApiKeyForm } from "./components/create-publishable-api-key-form"
+
+export const ApiKeyManagementCreate = () => {
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        <CreatePublishableApiKeyForm />
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/create-publishable-api-key-form/create-publishable-api-key-form.tsx

@@ -0,0 +1,97 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, FocusModal, Heading, Input, Text } from "@medusajs/ui"
+import { useAdminCreatePublishableApiKey } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { useEffect } from "react"
+import { Form } from "../../../../../components/common/form"
+
+type CreatePublishableApiKeyFormProps = {
+  subscribe: (state: boolean) => void
+}
+
+const CreatePublishableApiKeySchema = zod.object({
+  title: zod.string().min(1),
+})
+
+export const CreatePublishableApiKeyForm = ({
+  subscribe,
+}: CreatePublishableApiKeyFormProps) => {
+  const { mutateAsync, isLoading } = useAdminCreatePublishableApiKey()
+
+  const form = useForm<zod.infer<typeof CreatePublishableApiKeySchema>>({
+    defaultValues: {
+      title: "",
+    },
+    resolver: zodResolver(CreatePublishableApiKeySchema),
+  })
+
+  const {
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    subscribe(isDirty)
+  }, [isDirty])
+
+  const { t } = useTranslation()
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(values)
+  })
+
+  return (
+    <Form {...form}>
+      <form
+        className="flex h-full flex-col overflow-hidden"
+        onSubmit={handleSubmit}
+      >
+        <FocusModal.Header>
+          <div className="flex items-center gap-x-2 justify-end">
+            <FocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </FocusModal.Close>
+            <Button size="small" type="submit" isLoading={isLoading}>
+              {t("general.save")}
+            </Button>
+          </div>
+        </FocusModal.Header>
+        <FocusModal.Body className="flex flex-1 flex-col overflow-hidden">
+          <div className="flex flex-1 flex-col items-center overflow-y-auto">
+            <div className="flex w-full max-w-[720px] flex-col gap-y-10 px-2 pb-6 pt-[72px]">
+              <div>
+                <Heading>
+                  {t("apiKeyManagement.createPublishableApiKey")}
+                </Heading>
+                <Text size="small" className="text-ui-fg-subtle">
+                  {t("apiKeyManagement.publishableApiKeyHint")}
+                </Text>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Form.Field
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.title")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </FocusModal.Body>
+      </form>
+    </Form>
+  )
+}

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/create-publishable-api-key-form/index.ts

@@ -0,0 +1 @@
+export * from "./create-publishable-api-key-form"

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/index.ts

@@ -0,0 +1 @@
+export { ApiKeyManagementCreate as Component } from "./api-key-management-create"

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx

@@ -0,0 +1,3 @@
+export const ApiKeyManagementDetail = () => {
+  return <div className="flex flex-col gap-y-2"></div>
+}

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/index.ts

@@ -0,0 +1 @@
+export { ApiKeyManagementDetail as Component } from "./api-key-management-detail"

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/api-key-management-edit.tsx

@@ -0,0 +1,12 @@
+import { Drawer } from "@medusajs/ui"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+
+export const ApiKeyManagementEdit = () => {
+  const [open, onOpenChange] = useRouteModalState()
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <Drawer.Content></Drawer.Content>
+    </Drawer>
+  )
+}

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/index.ts

@@ -0,0 +1 @@
+export { ApiKeyManagementEdit as Component } from "./api-key-management-edit"

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx

@@ -1,4 +1,3 @@
-import { InformationCircle } from "@medusajs/icons"
 import { PublishableApiKey, SalesChannel } from "@medusajs/medusa"
 import {
   Button,
@@ -21,136 +20,22 @@ import {
 } from "@tanstack/react-table"
 import {
   useAdminCreatePublishableApiKey,
-  useAdminPublishableApiKeys,
   useAdminSalesChannels,
 } from "medusa-react"
-import { useMemo, useState } from "react"
+import { useMemo } from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
-import { Form } from "../../components/common/form"
-
-export const ApiKeyManagement = () => {
-  const [showCreateModal, setShowCreateModal] = useState(false)
-
-  const { publishable_api_keys, isLoading, isError, error } =
-    useAdminPublishableApiKeys()
-
-  const columns = useColumns()
-
-  const table = useReactTable({
-    data: publishable_api_keys || [],
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getRowId: (row) => row.id,
-  })
-
-  const { t } = useTranslation()
-
-  // TODO: Move to loading.tsx and set as Suspense fallback for the route
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  // TODO: Move to error.tsx and set as ErrorBoundary for the route
-  if (isError || !publishable_api_keys) {
-    const err = error ? JSON.parse(JSON.stringify(error)) : null
-    return (
-      <div>
-        {(err as Error & { status: number })?.status === 404 ? (
-          <div>Not found</div>
-        ) : (
-          <div>Something went wrong!</div>
-        )}
-      </div>
-    )
-  }
-
-  const hasData = publishable_api_keys.length !== 0
+import { Outlet } from "react-router-dom"
+import { Form } from "../../../components/common/form"
+import { ApiKeyManagementListTable } from "./components/api-key-management-list-table"
 
+export const ApiKeyManagementList = () => {
   return (
     <div className="flex flex-col gap-y-2">
-      <Container className="p-0">
-        <div className="px-8 py-6 pb-4">
-          <Heading>{t("apiKeyManagement.domain")}</Heading>
-        </div>
-        <div className="border-ui-border-base border-y">
-          {hasData ? (
-            <Table>
-              <Table.Header>
-                {table.getHeaderGroups().map((headerGroup) => {
-                  return (
-                    <Table.Row
-                      key={headerGroup.id}
-                      className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th]:w-1/3"
-                    >
-                      {headerGroup.headers.map((header) => {
-                        return (
-                          <Table.HeaderCell key={header.id}>
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                          </Table.HeaderCell>
-                        )
-                      })}
-                    </Table.Row>
-                  )
-                })}
-              </Table.Header>
-              <Table.Body className="border-b-0">
-                {table.getRowModel().rows.map((row) => (
-                  <Table.Row
-                    key={row.id}
-                    className={clx(
-                      "transition-fg cursor-pointer [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
-                      {
-                        "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
-                          row.getIsSelected(),
-                      }
-                    )}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <Table.Cell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </Table.Cell>
-                    ))}
-                  </Table.Row>
-                ))}
-              </Table.Body>
-            </Table>
-          ) : (
-            <div className="flex flex-col items-center py-24">
-              <div className="flex flex-col items-center gap-y-6">
-                <div className="flex flex-col items-center gap-y-2">
-                  <InformationCircle />
-                  <Text weight="plus" size="small" leading="compact">
-                    {t("general.noRecordsFound")}
-                  </Text>
-                  <Text size="small" className="text-ui-fg-muted">
-                    {t("apiKeyManagement.createAPublishableApiKey")}
-                  </Text>
-                </div>
-                <Button
-                  variant="secondary"
-                  onClick={() => setShowCreateModal(!showCreateModal)}
-                >
-                  {t("apiKeyManagement.createKey")}
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-        <div className="h-[72px]"></div>
-      </Container>
-      <CreatePublishableApiKey
-        open={showCreateModal}
-        onOpenChange={setShowCreateModal}
-      />
+      <ApiKeyManagementListTable />
+      <Outlet />
     </div>
   )
 }
@@ -274,8 +159,14 @@ const CreatePublishableApiKey = (props: CreatePublishableApiKeyProps) => {
         <FocusModal.Content>
           <FocusModal.Header>
             <div className="flex items-center justify-end gap-x-2">
-              <Button variant="secondary">{t("general.cancel")}</Button>
-              <Button type="submit">Publish API Key</Button>
+              <FocusModal.Close asChild>
+                <Button size="small" variant="secondary">
+                  {t("general.cancel")}
+                </Button>
+              </FocusModal.Close>
+              <Button size="small" type="submit">
+                Publish API Key
+              </Button>
             </div>
           </FocusModal.Header>
           <FocusModal.Body className="flex flex-col items-center py-16">

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-management-list-table.tsx

@@ -0,0 +1,265 @@
+import { EllipsisHorizontal, Trash, XCircle } from "@medusajs/icons"
+import { PublishableApiKey } from "@medusajs/medusa"
+import {
+  Button,
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  Table,
+  clx,
+  usePrompt,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  useAdminDeletePublishableApiKey,
+  useAdminPublishableApiKeys,
+  useAdminRevokePublishableApiKey,
+} from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router-dom"
+import { NoRecords } from "../../../../../components/common/empty-table-content"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+
+const PAGE_SIZE = 50
+
+export const ApiKeyManagementListTable = () => {
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const { publishable_api_keys, count, isLoading, isError, error } =
+    useAdminPublishableApiKeys({})
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: publishable_api_keys || [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    getRowId: (row) => row.id,
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  })
+
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="p-0">
+      <div className="px-6 py-4 flex items-center justify-between">
+        <Heading level="h2">{t("apiKeyManagement.domain")}</Heading>
+        <Link to="create">
+          <Button variant="secondary" size="small">
+            {t("general.create")}
+          </Button>
+        </Link>
+      </div>
+      <div>
+        {(publishable_api_keys?.length ?? 0) > 0 ? (
+          <div>
+            <Table>
+              <Table.Header className="border-t-0">
+                {table.getHeaderGroups().map((headerGroup) => {
+                  return (
+                    <Table.Row
+                      key={headerGroup.id}
+                      className="[&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap [&_th]:w-1/3"
+                    >
+                      {headerGroup.headers.map((header) => {
+                        return (
+                          <Table.HeaderCell key={header.id}>
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </Table.HeaderCell>
+                        )
+                      })}
+                    </Table.Row>
+                  )
+                })}
+              </Table.Header>
+              <Table.Body className="border-b-0">
+                {table.getRowModel().rows.map((row) => (
+                  <Table.Row
+                    key={row.id}
+                    className={clx(
+                      "transition-fg cursor-pointer [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                      {
+                        "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                          row.getIsSelected(),
+                      }
+                    )}
+                    onClick={() =>
+                      navigate(
+                        `/settings/api-key-management/${row.original.id}`
+                      )
+                    }
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <Table.Cell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </Table.Cell>
+                    ))}
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+            <LocalizedTablePagination
+              canNextPage={table.getCanNextPage()}
+              canPreviousPage={table.getCanPreviousPage()}
+              nextPage={table.nextPage}
+              previousPage={table.previousPage}
+              count={count ?? 0}
+              pageIndex={pageIndex}
+              pageCount={table.getPageCount()}
+              pageSize={PAGE_SIZE}
+            />
+          </div>
+        ) : (
+          <NoRecords
+            action={{
+              label: t("apiKeyManagement.createKey"),
+              to: "create",
+            }}
+          />
+        )}
+      </div>
+    </Container>
+  )
+}
+
+const KeyActions = ({ apiKey }: { apiKey: PublishableApiKey }) => {
+  const { mutateAsync: revokeAsync } = useAdminRevokePublishableApiKey(
+    apiKey.id
+  )
+  const { mutateAsync: deleteAsync } = useAdminDeletePublishableApiKey(
+    apiKey.id
+  )
+
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("apiKeyManagement.deleteKeyWarning", {
+        title: apiKey.title,
+      }),
+      confirmText: t("general.delete"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await deleteAsync()
+  }
+
+  const handleRevoke = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("apiKeyManagement.revokeKeyWarning", {
+        title: apiKey.title,
+      }),
+      confirmText: t("apiKeyManagement.revoke"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await revokeAsync()
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton size="small" variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item onClick={handleRevoke}>
+          <div className="flex items-center gap-x-2 [&_svg]:text-ui-fg-subtle">
+            <XCircle />
+            <span onClick={handleRevoke}>{t("apiKeyManagement.revoke")}</span>
+          </div>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onClick={handleDelete}>
+          <div className="flex items-center gap-x-2 [&_svg]:text-ui-fg-subtle">
+            <Trash />
+            <span>{t("general.delete")}</span>
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const columnHelper = createColumnHelper<PublishableApiKey>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("title", {
+        header: t("fields.title"),
+        cell: ({ getValue }) => getValue(),
+      }),
+      columnHelper.accessor("id", {
+        header: "Key",
+        cell: ({ getValue }) => getValue(),
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return <KeyActions apiKey={row.original} />
+        },
+      }),
+    ],
+    [t]
+  )
+
+  return columns
+}

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/index.ts

@@ -0,0 +1 @@
+export * from "./api-key-management-list-table"

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/index.ts

@@ -0,0 +1 @@
+export { ApiKeyManagementList as Component } from "./api-key-management-list"

packages/admin-next/dashboard/src/routes/api-key-management/index.ts

@@ -1 +0,0 @@
-export { ApiKeyManagement as Component } from "./api-key-management"

packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/edit-currencies-details-drawer.tsx

@@ -1,159 +0,0 @@
-import { Store } from "@medusajs/medusa"
-import { Button, Drawer, Heading, Select } from "@medusajs/ui"
-import { useAdminUpdateStore } from "medusa-react"
-import { useState } from "react"
-import { useForm } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-import * as zod from "zod"
-import { Form } from "../../../../components/common/form"
-
-const EditCurrenciesDetailsSchema = zod.object({
-  default_currency_code: zod.string(),
-})
-
-type EditCurrenciesDetailsDrawerProps = {
-  store: Store
-}
-
-export const EditCurrenciesDetailsDrawer = ({
-  store,
-}: EditCurrenciesDetailsDrawerProps) => {
-  const [open, setOpen] = useState(false)
-  const [selectOpen, setSelectOpen] = useState(false)
-
-  const { t } = useTranslation()
-
-  const { mutateAsync } = useAdminUpdateStore()
-
-  const form = useForm<zod.infer<typeof EditCurrenciesDetailsSchema>>({
-    defaultValues: {
-      default_currency_code: store.default_currency_code,
-    },
-  })
-
-  const sortedCurrencies = store.currencies.sort((a, b) => {
-    if (a.code === store.default_currency_code) {
-      return -1
-    }
-
-    if (b.code === store.default_currency_code) {
-      return 1
-    }
-
-    return a.code.localeCompare(b.code)
-  })
-
-  const onOpenChange = (open: boolean) => {
-    if (!open) {
-      form.reset()
-
-      /**
-       * We need to close the select when the drawer closes.
-       * Otherwise it may lead to `pointer-events: none` being applied to the body.
-       */
-      setSelectOpen(false)
-    }
-    setOpen(open)
-  }
-
-  const onSubmit = form.handleSubmit(async (values) => {
-    await mutateAsync(
-      {
-        default_currency_code: values.default_currency_code,
-      },
-      {
-        onSuccess: ({ store }) => {
-          form.reset({
-            default_currency_code: store.default_currency_code,
-          })
-
-          onOpenChange(false)
-        },
-        onError: (err) => {
-          console.log(err)
-        },
-      }
-    )
-  })
-
-  return (
-    <Drawer open={open} onOpenChange={onOpenChange}>
-      <Drawer.Trigger asChild>
-        <Button variant="secondary">
-          {t("currencies.editCurrencyDetails")}
-        </Button>
-      </Drawer.Trigger>
-      <Drawer.Content>
-        <Drawer.Header>
-          <Heading>{t("currencies.editCurrencyDetails")}</Heading>
-        </Drawer.Header>
-        <Drawer.Body>
-          <Form {...form}>
-            <form>
-              <Form.Field
-                name="default_currency_code"
-                control={form.control}
-                render={({ field: { ref, ...field } }) => {
-                  return (
-                    <Form.Item className="gap-y-2">
-                      <Form.Label>{t("currencies.defaultCurrency")}</Form.Label>
-                      <div>
-                        <Form.Control>
-                          <Select
-                            {...field}
-                            open={selectOpen}
-                            onOpenChange={setSelectOpen}
-                            value={field.value}
-                            onValueChange={field.onChange}
-                            size="small"
-                          >
-                            <Select.Trigger ref={ref}>
-                              <Select.Value>
-                                <span>
-                                  <span className="txt-compact-small-plus uppercase">
-                                    {field.value}
-                                  </span>{" "}
-                                  {
-                                    sortedCurrencies.find(
-                                      (curr) => curr.code === field.value
-                                    )?.name
-                                  }
-                                </span>
-                              </Select.Value>
-                            </Select.Trigger>
-                            <Select.Content>
-                              {sortedCurrencies.map((curr) => (
-                                <Select.Item key={curr.code} value={curr.code}>
-                                  <span>
-                                    <span className="txt-compact-small-plus uppercase">
-                                      {curr.code}
-                                    </span>{" "}
-                                    {curr.name}
-                                  </span>
-                                </Select.Item>
-                              ))}
-                            </Select.Content>
-                          </Select>
-                        </Form.Control>
-                        <Form.ErrorMessage />
-                      </div>
-                      <Form.Hint>
-                        {t("currencies.defaultCurrencyHint")}
-                      </Form.Hint>
-                    </Form.Item>
-                  )
-                }}
-              />
-            </form>
-          </Form>
-        </Drawer.Body>
-        <Drawer.Footer>
-          <Drawer.Close asChild>
-            <Button variant="secondary">{t("general.cancel")}</Button>
-          </Drawer.Close>
-          <Button onClick={onSubmit}>{t("general.save")}</Button>
-        </Drawer.Footer>
-      </Drawer.Content>
-    </Drawer>
-  )
-}