Dashboards Package → AppComponents

This document maps the existing @mdxui/cockpit package components to the AppComponents interface defined in mdxui.

Component Mapping

Additional in Dashboards (not in mdxui)

Architecture Differences

Provider Pattern vs Props Pattern

mdxui expects:

<App name="My App" auth={{ provider: 'workos' }}>
  <Shell>
    <Sidebar nav={nav} />
    <Header user={user} />
    <Dashboard />
  </Shell>
</App>

Dashboards uses:

<DeveloperDashboard config={{
  identity: { clientId: '...' },
  routes: { overview: true, keys: true },
  theme: { preset: 'cyan' },
  branding: { name: 'My App' },
}} />

The DeveloperDashboard wraps everything internally with providers.

Page Routing

Dashboards has internal routing with separate page components:

• OverviewPage
• KeysPage
• BillingPage
• TeamPage
• RequestsPage
• WebhooksEndpointsPage, WebhooksActivityPage, WebhooksLogsPage, WebhooksEventCatalogPage
• SettingsProfilePage, SettingsSecurityPage, SettingsSessionsPage
• DatabasePage
• IntegrationsPage
• VaultPage

Config Type Alignment

mdxui DeveloperDashboardProps:

{
  project: string
  showAPIKeys?: boolean
  showWebhooks?: boolean
  showUsage?: boolean
  showLogs?: boolean
  theme?: {
    preset?: string
    mode?: 'light' | 'dark' | 'system'
    custom?: Record<string, string>
  }
}

Dashboards DashboardConfig:

{
  basePath?: string
  branding?: {
    name?: string
    logo?: ReactNode
  }
  routes?: {
    overview?: boolean
    requests?: boolean
    keys?: boolean
    team?: boolean
    billing?: boolean
    settings?: boolean
    webhooks?: boolean
    database?: boolean
    integrations?: boolean
    vault?: boolean
  }
  theme?: {
    preset?: Theme
    mode?: 'light' | 'dark' | 'system'
    custom?: Record<string, string>
  }
  identity: {
    clientId: string
    apiHostname?: string
    devMode?: boolean
    redirectUri?: string
    // ... more auth options
  }
}

Reconciliation options:

1. Align mdxui to current implementation - Add routes, branding, identity to mdxui types
2. Align implementation to mdxui - Refactor DeveloperDashboard to use simpler props
3. Support both - Allow config object OR individual props

Action Items

1. Update mdxui types:

   • Add DashboardConfig as alternative to individual props
   • Add routes configuration
   • Add branding configuration
   • Add identity configuration (auth)
   • Add Database, Integrations, Vault component types

2. Create missing layout components:

   • Shell - app shell with sidebar/header slots
   • Sidebar - navigation sidebar
   • Header - app header bar

3. Export individual page components:

   • The *Page components should be exported separately
   • Consider making them usable standalone or composed

4. Payload admin overrides:

   • ListView, EditView, CreateView are for Payload customization
   • These may not be needed in the dashboards package