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

package/src/lib/table/table-adapters.ts

@@ -0,0 +1,94 @@
+import {
+  DataTableColumnDef,
+  DataTableEmptyStateProps,
+  DataTableFilter,
+} from "@medusajs/ui"
+import { ColumnAdapter } from "../../hooks/table/columns/use-configurable-table-columns"
+
+/**
+ * Adapter interface for configurable tables.
+ * Defines how to fetch and display data for a specific entity type.
+ */
+export interface TableAdapter<TData> {
+  /**
+   * The entity type (e.g., "orders", "products", "customers")
+   */
+  entity: string
+
+  /**
+   * Hook to fetch data with the calculated required fields.
+   * Called inside ConfigurableDataTable with the fields and search params.
+   */
+  useData: (
+    fields: string,
+    params: any
+  ) => {
+    data: TData[] | undefined
+    count: number | undefined
+    isLoading: boolean
+    isError: boolean
+    error: any
+  }
+
+  /**
+   * Extract unique ID from a row. Defaults to row.id if not provided.
+   */
+  getRowId?: (row: TData) => string
+
+  /**
+   * Generate href for row navigation. Return undefined for non-clickable rows.
+   */
+  getRowHref?: (row: TData) => string | undefined
+
+  /**
+   * Table filters configuration
+   */
+  filters?: DataTableFilter[]
+
+  /**
+   * Transform API columns to table columns.
+   * If not provided, will use default column generation.
+   */
+  getColumns?: (apiColumns: any[]) => DataTableColumnDef<TData, any>[]
+
+  /**
+   * Column adapter for customizing column behavior (alignment, formatting, etc.)
+   * If not provided, will use entity's default column adapter if available.
+   */
+  columnAdapter?: ColumnAdapter<TData>
+
+  /**
+   * Empty state configuration
+   */
+  emptyState?: DataTableEmptyStateProps
+
+  /**
+   * Default page size
+   */
+  pageSize?: number
+
+  /**
+   * Query parameter prefix for URL state management
+   */
+  queryPrefix?: string
+
+  /**
+   * Optional entity display name for headings
+   */
+  entityName?: string
+}
+
+/**
+ * Helper to create a type-safe table adapter
+ */
+export function createTableAdapter<TData>(
+  adapter: TableAdapter<TData>
+): TableAdapter<TData> {
+  return {
+    // Provide smart defaults
+    getRowId: (row: any) => row.id,
+    pageSize: 20,
+    queryPrefix: "",
+    ...adapter,
+  }
+}

package/src/lib/table-display-utils.tsx

@@ -0,0 +1,372 @@
+import React from "react"
+import { Badge, StatusBadge, Tooltip } from "@medusajs/ui"
+import { HttpTypes } from "@medusajs/types"
+import ReactCountryFlag from "react-country-flag"
+import { getCountryByIso2 } from "./data/countries"
+import { getStylizedAmount } from "./money-amount-helpers"
+
+// Helper function to get nested value from object using dot notation
+const getNestedValue = (obj: any, path: string) => {
+  return path.split('.').reduce((current, key) => current?.[key], obj)
+}
+
+// Helper function to format date
+const formatDate = (date: string | Date, format: 'short' | 'long' | 'relative' = 'short') => {
+  const dateObj = new Date(date)
+  
+  switch (format) {
+    case 'short':
+      return dateObj.toLocaleDateString('en-GB', { 
+        day: 'numeric', 
+        month: 'short', 
+        year: 'numeric' 
+      })
+    case 'long':
+      return dateObj.toLocaleDateString('en-GB', { 
+        day: 'numeric', 
+        month: 'long', 
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+      })
+    case 'relative':
+      const now = new Date()
+      const diffInMs = now.getTime() - dateObj.getTime()
+      const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24))
+      
+      if (diffInDays === 0) return 'Today'
+      if (diffInDays === 1) return 'Yesterday'
+      if (diffInDays < 7) return `${diffInDays} days ago`
+      
+      return dateObj.toLocaleDateString('en-GB', { 
+        day: 'numeric', 
+        month: 'short' 
+      })
+    default:
+      return dateObj.toLocaleDateString()
+  }
+}
+
+// Payment status display
+const PaymentStatusBadge = ({ status }: { status: string }) => {
+  const getStatusColor = (status: string) => {
+    switch (status?.toLowerCase()) {
+      case 'paid':
+      case 'captured':
+        return 'green'
+      case 'pending':
+      case 'awaiting':
+        return 'orange'
+      case 'failed':
+      case 'canceled':
+        return 'red'
+      default:
+        return 'grey'
+    }
+  }
+
+  return (
+    <StatusBadge color={getStatusColor(status)}>
+      {status}
+    </StatusBadge>
+  )
+}
+
+// Fulfillment status display
+const FulfillmentStatusBadge = ({ status }: { status: string }) => {
+  const getStatusColor = (status: string) => {
+    switch (status?.toLowerCase()) {
+      case 'fulfilled':
+      case 'shipped':
+        return 'green'
+      case 'partially_fulfilled':
+      case 'preparing':
+        return 'orange'
+      case 'canceled':
+      case 'returned':
+        return 'red'
+      case 'pending':
+      case 'not_fulfilled':
+        return 'grey'
+      default:
+        return 'grey'
+    }
+  }
+
+  return (
+    <StatusBadge color={getStatusColor(status)}>
+      {status}
+    </StatusBadge>
+  )
+}
+
+// Generic status badge
+const GenericStatusBadge = ({ status }: { status: string }) => {
+  return (
+    <Badge variant="outline" className="capitalize">
+      {status}
+    </Badge>
+  )
+}
+
+// Display strategies registry
+export const DISPLAY_STRATEGIES = {
+  // Known semantic types with pixel-perfect display
+  status: {
+    payment: (value: any) => <PaymentStatusBadge status={value} />,
+    fulfillment: (value: any) => <FulfillmentStatusBadge status={value} />,
+    default: (value: any) => <GenericStatusBadge status={value} />
+  },
+  
+  currency: {
+    default: (value: any, row: any) => {
+      if (value === null || value === undefined) return '-'
+      const currencyCode = row.currency_code || 'USD'
+      const formatted = getStylizedAmount(value, currencyCode)
+      
+      return (
+        <div className="flex h-full w-full items-center justify-end text-right">
+          <span className="truncate">{formatted}</span>
+        </div>
+      )
+    }
+  },
+  
+  timestamp: {
+    creation: (value: any) => value ? formatDate(value, 'short') : '-',
+    update: (value: any) => value ? formatDate(value, 'relative') : '-',
+    default: (value: any) => value ? formatDate(value, 'short') : '-'
+  },
+  
+  identifier: {
+    order: (value: any) => `#${value}`,
+    default: (value: any) => value
+  },
+  
+  email: {
+    default: (value: any) => value || '-'
+  },
+  
+  // Generic fallbacks for custom fields
+  enum: {
+    default: (value: any) => <GenericStatusBadge status={value} />
+  },
+  
+  // Base type fallbacks
+  string: {
+    default: (value: any) => value || '-'
+  },
+  
+  number: {
+    default: (value: any) => value?.toLocaleString() || '0'
+  },
+  
+  boolean: {
+    default: (value: any) => (
+      <Badge variant={value ? 'solid' : 'outline'}>
+        {value ? 'Yes' : 'No'}
+      </Badge>
+    )
+  },
+  
+  object: {
+    relationship: (value: any) => {
+      if (!value || typeof value !== 'object') return '-'
+      
+      // Try common display fields
+      if (value.name) return value.name
+      if (value.title) return value.title
+      if (value.email) return value.email
+      if (value.display_name) return value.display_name
+      
+      return JSON.stringify(value)
+    },
+    default: (value: any) => {
+      if (!value || typeof value !== 'object') return '-'
+      
+      // Try common display fields
+      if (value.name) return value.name
+      if (value.title) return value.title
+      if (value.email) return value.email
+      
+      return JSON.stringify(value)
+    }
+  },
+  
+  // Date types (in addition to timestamp)
+  date: {
+    default: (value: any) => value ? formatDate(value, 'short') : '-'
+  },
+  
+  datetime: {
+    default: (value: any) => value ? formatDate(value, 'long') : '-'
+  },
+  
+  // Computed columns
+  computed: {
+    display: (value: any) => value || '-',
+    default: (value: any) => value || '-'
+  }
+}
+
+// Strategy selection function
+export const getDisplayStrategy = (column: any) => {
+  const semanticStrategies = DISPLAY_STRATEGIES[column.semantic_type as keyof typeof DISPLAY_STRATEGIES]
+  if (semanticStrategies) {
+    const contextStrategy = semanticStrategies[column.context as keyof typeof semanticStrategies]
+    if (contextStrategy) return contextStrategy
+    
+    const defaultStrategy = semanticStrategies.default
+    if (defaultStrategy) return defaultStrategy
+  }
+  
+  // Fallback to data type
+  // Map 'text' data type to 'string' strategy
+  const dataType = column.data_type === 'text' ? 'string' : column.data_type
+  const dataTypeStrategies = DISPLAY_STRATEGIES[dataType as keyof typeof DISPLAY_STRATEGIES]
+  if (dataTypeStrategies) {
+    const defaultStrategy = dataTypeStrategies.default
+    if (defaultStrategy) return defaultStrategy
+  }
+  
+  // Final fallback
+  return (value: any) => String(value || '-')
+}
+
+// Computed column computation functions
+export const COMPUTED_COLUMN_FUNCTIONS = {
+  customer_name: (row: any) => {
+    // Try customer object first
+    if (row.customer?.first_name || row.customer?.last_name) {
+      const fullName = `${row.customer.first_name || ''} ${row.customer.last_name || ''}`.trim()
+      if (fullName) return fullName
+    }
+    
+    // Fall back to email
+    if (row.customer?.email) {
+      return row.customer.email
+    }
+    
+    // Fall back to phone
+    if (row.customer?.phone) {
+      return row.customer.phone
+    }
+    
+    return 'Guest'
+  },
+  
+  address_summary: (row: any, column?: any) => {
+    // Determine which address to use based on the column field
+    let address = null
+    if (column?.field === 'shipping_address_display') {
+      address = row.shipping_address
+    } else if (column?.field === 'billing_address_display') {
+      address = row.billing_address
+    } else {
+      // Fallback to shipping address if no specific field
+      address = row.shipping_address || row.billing_address
+    }
+    
+    if (!address) return '-'
+    
+    // Build address parts in a meaningful order
+    const parts = []
+    
+    // Include street address if available
+    if (address.address_1) {
+      parts.push(address.address_1)
+    }
+    
+    // City, Province/State, Postal Code
+    const locationParts = []
+    if (address.city) locationParts.push(address.city)
+    if (address.province) locationParts.push(address.province)
+    if (address.postal_code) locationParts.push(address.postal_code)
+    
+    if (locationParts.length > 0) {
+      parts.push(locationParts.join(', '))
+    }
+    
+    // Country
+    if (address.country_code) {
+      parts.push(address.country_code.toUpperCase())
+    }
+    
+    return parts.join(' • ') || '-'
+  },
+  
+  country_code: (row: any) => {
+    // Get country code from shipping address
+    const countryCode = row.shipping_address?.country_code
+    
+    if (!countryCode) return <div className="flex w-full justify-center">-</div>
+    
+    // Get country information
+    const country = getCountryByIso2(countryCode)
+    const displayName = country?.display_name || countryCode.toUpperCase()
+    
+    // Display country flag with tooltip - centered in the cell
+    return (
+      <div className="flex w-full items-center justify-center">
+        <Tooltip content={displayName}>
+          <div className="flex size-4 items-center justify-center overflow-hidden rounded-sm">
+            <ReactCountryFlag
+              countryCode={countryCode.toUpperCase()}
+              svg
+              style={{
+                width: "16px",
+                height: "16px",
+              }}
+              aria-label={displayName}
+            />
+          </div>
+        </Tooltip>
+      </div>
+    )
+  }
+}
+
+// Entity-specific column overrides
+export const ENTITY_COLUMN_OVERRIDES = {
+  orders: {
+    // Override for customer column that combines multiple fields
+    customer: {
+      accessor: (row: any) => {
+        // Complex logic for combining fields
+        const shipping = row.shipping_address
+        const customer = row.customer
+        
+        if (shipping?.first_name || shipping?.last_name) {
+          return `${shipping.first_name || ''} ${shipping.last_name || ''}`.trim()
+        }
+        if (customer?.first_name || customer?.last_name) {
+          return `${customer.first_name || ''} ${customer.last_name || ''}`.trim()
+        }
+        return customer?.email || 'Guest'
+      }
+    }
+  }
+}
+
+// Helper function to get entity-specific accessor
+export const getEntityAccessor = (entity: string, fieldName: string, column?: any) => {
+  // Check if this is a computed column
+  if (column?.computed) {
+    const computationFn = COMPUTED_COLUMN_FUNCTIONS[column.computed.type as keyof typeof COMPUTED_COLUMN_FUNCTIONS]
+    if (computationFn) {
+      // Return a wrapper function that passes the column info
+      return (row: any) => computationFn(row, column)
+    }
+  }
+  
+  const entityOverrides = ENTITY_COLUMN_OVERRIDES[entity as keyof typeof ENTITY_COLUMN_OVERRIDES]
+  if (entityOverrides) {
+    const fieldOverride = entityOverrides[fieldName as keyof typeof entityOverrides]
+    if (fieldOverride?.accessor) {
+      return fieldOverride.accessor
+    }
+  }
+  
+  // Default accessor using dot notation
+  return (row: any) => getNestedValue(row, fieldName)
+}

package/src/module.d.ts

@@ -33,3 +33,9 @@ declare module "virtual:medusa/widgets" {
   const widgetModule: WidgetModule
   export default widgetModule
 }
+
+declare module "virtual:medusa/i18n" {
+  import type { I18nModule } from "./extensions"
+  const i18nModule: I18nModule
+  export default i18nModule
+}

package/src/providers/feature-flag-provider/index.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, useContext } from "react"
+import { useFeatureFlags, FeatureFlags } from "../../hooks/api/feature-flags"
+
+interface FeatureFlagContextValue {
+  flags: FeatureFlags
+  isLoading: boolean
+  isFeatureEnabled: (flag: keyof FeatureFlags) => boolean
+}
+
+const FeatureFlagContext = createContext<FeatureFlagContextValue | null>(null)
+
+export const useFeatureFlag = (flag: keyof FeatureFlags): boolean => {
+  const context = useContext(FeatureFlagContext)
+  if (!context) {
+    // If no context, assume feature is disabled
+    return false
+  }
+  return context.isFeatureEnabled(flag)
+}
+
+export const useFeatureFlagContext = () => {
+  const context = useContext(FeatureFlagContext)
+  if (!context) {
+    throw new Error("useFeatureFlagContext must be used within FeatureFlagProvider")
+  }
+  return context
+}
+
+interface FeatureFlagProviderProps {
+  children: React.ReactNode
+}
+
+export const FeatureFlagProvider: React.FC<FeatureFlagProviderProps> = ({ children }) => {
+  const { data: flags = {}, isLoading, error } = useFeatureFlags()
+
+  const isFeatureEnabled = (flag: keyof FeatureFlags): boolean => {
+    const enabled = flags[flag] === true
+    return enabled
+  }
+
+  return (
+    <FeatureFlagContext.Provider value={{ flags, isLoading, isFeatureEnabled }}>
+      {children}
+    </FeatureFlagContext.Provider>
+  )
+}

package/src/providers/i18n-provider/i18n-provider.tsx

@@ -1,5 +1,5 @@
 import { I18nProvider as Provider } from "@medusajs/ui"
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, useEffect } from "react"
 import { useTranslation } from "react-i18next"
 import { languages } from "../../i18n/languages"
 
@@ -12,9 +12,14 @@ const formatLocaleCode = (code: string) => {
 export const I18nProvider = ({ children }: I18nProviderProps) => {
   const { i18n } = useTranslation()
 
-  const locale =
-    languages.find((lan) => lan.code === i18n.language)?.code ||
-    languages[0].code
+  const currentLanguage =
+    languages.find((lan) => lan.code === i18n.language) || languages[0]
+  const locale = currentLanguage.code
+  const direction = currentLanguage.ltr ? "ltr" : "rtl"
+
+  useEffect(() => {
+    document.documentElement.setAttribute("dir", direction)
+  }, [direction])
 
   return <Provider locale={formatLocaleCode(locale)}>{children}</Provider>
 }

package/src/providers/keybind-provider/hooks.tsx

@@ -1,4 +1,4 @@
-import debounceFn from "lodash/debounce"
+import { default as debounceFn } from "lodash.debounce"
 import { useCallback, useContext, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"

package/src/providers/providers.tsx

@@ -8,7 +8,7 @@ import { queryClient } from "../lib/query-client"
 import { ExtensionProvider } from "./extension-provider"
 import { I18nProvider } from "./i18n-provider"
 import { ThemeProvider } from "./theme-provider"
-
+import { FeatureFlagProvider } from "./feature-flag-provider"
 type ProvidersProps = PropsWithChildren<{
   api: DashboardApp["api"]
 }>
@@ -20,9 +20,11 @@ export const Providers = ({ api, children }: ProvidersProps) => {
         <HelmetProvider>
           <QueryClientProvider client={queryClient}>
             <ThemeProvider>
-              <I18n />
-              <I18nProvider>{children}</I18nProvider>
-              <Toaster />
+              <FeatureFlagProvider>
+                <I18n />
+                <I18nProvider>{children}</I18nProvider>
+                <Toaster />
+              </FeatureFlagProvider>
             </ThemeProvider>
           </QueryClientProvider>
         </HelmetProvider>

package/src/routes/api-key-management/api-key-management-detail/components/api-key-sales-channel-section/api-key-sales-channel-section.tsx

@@ -56,6 +56,7 @@ export const ApiKeySalesChannelSection = ({
         filters={filters}
         commands={commands}
         heading={t("salesChannels.domain")}
+        headingLevel="h2"
         getRowId={(row) => row.id}
         rowCount={count}
         isLoading={isPending}

package/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-management-list-table.tsx

@@ -53,7 +53,7 @@ export const ApiKeyManagementListTable = ({
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
         <div>
-          <Heading level="h2">
+          <Heading level="h1">
             {keyType === "publishable"
               ? t(`apiKeyManagement.domain.publishable`)
               : t("apiKeyManagement.domain.secret")}

package/src/routes/campaigns/campaign-create/components/create-campaign-form/create-campaign-form.tsx

@@ -21,8 +21,9 @@ export const CreateCampaignSchema = zod.object({
   starts_at: zod.date().nullable(),
   ends_at: zod.date().nullable(),
   budget: zod.object({
+    attribute: zod.string().nullish(),
     limit: zod.number().min(0).nullish(),
-    type: zod.enum(["spend", "usage"]),
+    type: zod.enum(["spend", "usage", "use_by_attribute"]),
     currency_code: zod.string().nullish(),
   }),
 })
@@ -38,6 +39,10 @@ export const CreateCampaignForm = () => {
   })
 
   const handleSubmit = form.handleSubmit(async (data) => {
+    const attribute = data.budget.attribute || null
+
+    const type = attribute ? "use_by_attribute" : data.budget.type
+
     await mutateAsync(
       {
         name: data.name,
@@ -46,7 +51,8 @@ export const CreateCampaignForm = () => {
         starts_at: data.starts_at,
         ends_at: data.ends_at,
         budget: {
-          type: data.budget.type,
+          type,
+          attribute,
           limit: data.budget.limit ? data.budget.limit : undefined,
           currency_code: data.budget.currency_code,
         },

package/src/routes/campaigns/campaign-detail/components/campaign-budget/campaign-budget.tsx

@@ -11,22 +11,33 @@ type CampaignBudgetProps = {
 export const CampaignBudget = ({ campaign }: CampaignBudgetProps) => {
   const { t } = useTranslation()
 
+  const getTranslation = () => {
+    const budget = campaign.budget
+
+    if (budget?.type === "use_by_attribute") {
+      if (budget?.attribute === "customer_id") {
+        return t(`campaigns.budget.fields.totalUsedByAttributeCustomerId`)
+      } else if (budget?.attribute === "customer_email") {
+        return t(`campaigns.budget.fields.totalUsedByAttributeEmail`)
+      }
+      return t(`campaigns.budget.fields.totalUsedByAttribute`, {
+        attribute: budget?.attribute,
+      })
+    }
+    return t(`campaigns.fields.budget_limit`)
+  }
+
   return (
     <Container className="flex flex-col gap-y-4 px-6 py-4">
       <div className="flex justify-between">
-        <div className="flex-grow">
-          <div className="bg-ui-bg-base shadow-borders-base float-left flex size-7 items-center justify-center rounded-md">
+        <div className="mb-2 grid flex-grow grid-cols-[28px_1fr] items-center gap-x-3">
+          <div className="bg-ui-bg-base shadow-borders-base flex size-7 items-center justify-center rounded-md">
             <div className="bg-ui-bg-component flex size-6 items-center justify-center rounded-[4px]">
               <ChartPie className="text-ui-fg-subtle" />
             </div>
           </div>
 
-          <Heading
-            className="text-ui-fg-subtle ml-10 mt-[1.5px] font-normal"
-            level="h3"
-          >
-            {t("campaigns.fields.budget_limit")}
-          </Heading>
+          <Heading level="h2">{getTranslation()}</Heading>
         </div>
 
         <ActionMenu
@@ -46,7 +57,7 @@ export const CampaignBudget = ({ campaign }: CampaignBudgetProps) => {
 
       <div>
         <Text
-          className="text-ui-fg-subtle border-ui-border-strong border-l-4 pl-3"
+          className="text-ui-fg-subtle border-ui-border-strong border-l-4 ps-3"
           size="small"
           leading="compact"
         >