mdxui

ClientPortalApp

Client-facing portal with projects, invoices, and deliverables

ClientPortalApp

The ClientPortalApp specialization provides a client-facing portal interface for agencies, consultancies, and service businesses. It enables clients to view projects, access deliverables, pay invoices, and communicate with the service team.

Overview

ClientPortalApp extends the base App with client-focused features:

  • Project Access - View project status and deliverables
  • Invoice Management - View and pay invoices
  • File Sharing - Access deliverables and documents
  • Messaging - Communicate with service team
  • Support - Submit and track support tickets

Type Signature

interface ClientPortalAppProps extends AppProps {
  /** Client portal configuration */
  config?: {
    /** Show projects */
    showProjects?: boolean // default: true
    /** Show invoices */
    showInvoices?: boolean // default: true
    /** Show deliverables/files */
    showDeliverables?: boolean // default: true
    /** Show messages */
    showMessages?: boolean // default: true
    /** Show support tickets */
    showSupport?: boolean // default: false
    /** Enable client feedback */
    enableFeedback?: boolean // default: true
    /** Enable file uploads */
    enableUploads?: boolean // default: true
    /** Branding customization */
    customBranding?: boolean // default: true
  }
}

Naming Convention

All ClientPortalApp components follow the pattern: ClientPortal${Component} = ${Component} + client portal-specific props.

// Base component + client portal props = ClientPortal component
ClientPortalDashboard = Dashboard + { showRecentActivity, showUpcomingDeadlines }
ClientPortalProjects = Projects + { showTimeline, showDeliverables }
ClientPortalInvoices = Invoices + { showPaymentStatus, enablePayment }
ClientPortalDeliverables = Deliverables + { showVersions, enableDownload }
ClientPortalMessages = Messages + { showThreads, enableAttachments }
ClientPortalSupport = Support + { showTickets, enableSubmit }

Quick Start

import type { AppComponents } from 'mdxui'
import { ClientPortalApp } from '@mdxui/cockpit'

export const components: AppComponents = {
  App: ClientPortalApp,
  Shell,
  Sidebar,
  Header,
  Dashboard: ClientPortalDashboard,
  Settings,
}

In your MDX:

<ClientPortalApp
  name="Acme Client Portal"
  config={{
    showProjects: true,
    showInvoices: true,
    showDeliverables: true,
    showMessages: true,
    enableFeedback: true,
    enableUploads: true,
    customBranding: true
  }}
>
  <Shell>
    <ClientPortalDashboard />
  </Shell>
</ClientPortalApp>

App Structure

ClientPortalApp
├── ClientPortalDashboard - Overview of projects and activity
├── ClientPortalProjects - Project list and details
├── ClientPortalInvoices - Invoice list and payment
├── ClientPortalDeliverables - File access and downloads
├── ClientPortalMessages - Communication with team
├── ClientPortalSupport - Support ticket management
└── Settings - Profile and notification settings

Default Views

ClientPortalDashboard

Main dashboard showing project status and recent activity.

interface ClientPortalDashboardProps extends DashboardProps {
  /** Show recent activity */
  showRecentActivity?: boolean // default: true
  /** Show upcoming deadlines */
  showUpcomingDeadlines?: boolean // default: true
  /** Show pending invoices */
  showPendingInvoices?: boolean // default: true
  /** Show quick actions */
  showQuickActions?: boolean // default: true
}

Layout:

DashboardView (single)
├── MetricsPanel - Active projects, pending items
├── ActivityPanel - Recent updates and notifications
├── DeadlinesPanel - Upcoming milestones
└── ActionsPanel - Quick actions (upload, message, pay)

Usage:

<ClientPortalDashboard
  showRecentActivity={true}
  showUpcomingDeadlines={true}
  showPendingInvoices={true}
  showQuickActions={true}
/>

ClientPortalProjects

Project list with timeline and deliverables.

interface ClientPortalProjectsProps {
  /** Show project timeline */
  showTimeline?: boolean // default: true
  /** Show deliverables */
  showDeliverables?: boolean // default: true
  /** Show team members */
  showTeam?: boolean // default: true
  /** Show project status */
  showStatus?: boolean // default: true
}

Layout:

ProjectsView (column)
├── CardsPanel - Active projects
│   ├── Project name
│   ├── Status badge
│   ├── Progress bar
│   ├── Next deadline
│   └── Team avatars
└── DetailPanel - Project details
    ├── Overview
    ├── Timeline
    ├── Deliverables list
    ├── Team members
    └── Recent activity

Usage:

<ClientPortalProjects
  showTimeline={true}
  showDeliverables={true}
  showTeam={true}
  showStatus={true}
/>

ClientPortalInvoices

Invoice list with payment capabilities.

interface ClientPortalInvoicesProps {
  /** Show payment status */
  showPaymentStatus?: boolean // default: true
  /** Enable online payment */
  enablePayment?: boolean // default: true
  /** Show payment history */
  showHistory?: boolean // default: true
  /** Payment methods */
  paymentMethods?: Array<'card' | 'ach' | 'wire'>
}

Layout:

InvoicesView (column)
├── TablePanel - Invoice list
│   ├── Invoice number
│   ├── Date
│   ├── Amount
│   ├── Status (paid/pending/overdue)
│   └── Actions (view, pay, download)
└── DetailPanel - Invoice details
    ├── Invoice header (number, date)
    ├── Line items
    ├── Total breakdown
    ├── Payment status
    ├── Payment button
    └── Download PDF button

Usage:

<ClientPortalInvoices
  showPaymentStatus={true}
  enablePayment={true}
  showHistory={true}
  paymentMethods={['card', 'ach']}
/>

ClientPortalDeliverables

File access and document management.

interface ClientPortalDeliverablesProps {
  /** Show file versions */
  showVersions?: boolean // default: true
  /** Enable downloads */
  enableDownload?: boolean // default: true
  /** Enable file uploads */
  enableUpload?: boolean // default: true
  /** Show file previews */
  showPreviews?: boolean // default: true
  /** Allowed file types */
  allowedTypes?: string[] // e.g., ['.pdf', '.zip', '.png']
}

Layout:

DeliverablesView (column)
├── FilterPanel - Project, type, date filters
├── ListPanel - Files and folders
│   ├── Thumbnail/icon
│   ├── Name
│   ├── Type
│   ├── Size
│   ├── Upload date
│   └── Actions (view, download, share)
└── DetailPanel - File details
    ├── Preview (if supported)
    ├── Metadata (size, type, date)
    ├── Version history
    ├── Download button
    └── Share link

Usage:

<ClientPortalDeliverables
  showVersions={true}
  enableDownload={true}
  enableUpload={true}
  showPreviews={true}
  allowedTypes={['.pdf', '.zip', '.png', '.jpg', '.psd', '.ai']}
/>

ClientPortalMessages

Communication interface with service team.

interface ClientPortalMessagesProps {
  /** Show message threads */
  showThreads?: boolean // default: true
  /** Enable attachments */
  enableAttachments?: boolean // default: true
  /** Show read receipts */
  showReadReceipts?: boolean // default: false
  /** Max attachment size (MB) */
  maxAttachmentSize?: number // default: 10
}

Layout:

MessagesView (column)
├── ListPanel - Message threads
│   ├── Thread title
│   ├── Last message preview
│   ├── Unread badge
│   ├── Timestamp
│   └── Participants
└── DetailPanel - Thread conversation
    ├── Message history
    ├── Attachments
    ├── Compose area
    ├── Attachment button
    └── Send button

Usage:

<ClientPortalMessages
  showThreads={true}
  enableAttachments={true}
  showReadReceipts={false}
  maxAttachmentSize={10}
/>

ClientPortalSupport

Support ticket system.

interface ClientPortalSupportProps {
  /** Show ticket list */
  showTickets?: boolean // default: true
  /** Enable ticket submission */
  enableSubmit?: boolean // default: true
  /** Show knowledge base */
  showKnowledgeBase?: boolean // default: false
  /** Ticket categories */
  categories?: string[] // e.g., ['billing', 'technical', 'general']
}

Layout:

SupportView (column)
├── ToolbarPanel - New ticket button, filters
├── ListPanel - Support tickets
│   ├── Subject
│   ├── Category
│   ├── Status (open/resolved)
│   ├── Priority
│   ├── Last updated
│   └── Actions (view, reply)
└── DetailPanel - Ticket details
    ├── Ticket info (subject, category, priority)
    ├── Conversation thread
    ├── Attachments
    ├── Reply composer
    └── Status controls

Usage:

<ClientPortalSupport
  showTickets={true}
  enableSubmit={true}
  showKnowledgeBase={false}
  categories={['billing', 'technical', 'general', 'feature-request']}
/>

Configuration

Branding Customization

<ClientPortalApp
  config={{
    customBranding: true
  }}
  theme={{
    preset: 'custom',
    custom: {
      primaryColor: '#4F46E5',
      logo: '/client-logo.svg'
    }
  }}
>
  {/* Custom branding per client */}
</ClientPortalApp>

File Upload Settings

<ClientPortalDeliverables
  enableUpload={true}
  allowedTypes={['.pdf', '.zip', '.png', '.jpg']}
  maxFileSize={50} // MB
/>

Payment Configuration

<ClientPortalInvoices
  enablePayment={true}
  paymentMethods={['card', 'ach', 'wire']}
/>

Support Settings

<ClientPortalSupport
  enableSubmit={true}
  categories={['billing', 'technical', 'general']}
  showKnowledgeBase={true}
/>

Auto-Wiring

ClientPortalApp components automatically wire to Payload collections:

ComponentCollectionPurpose
ClientPortalProjectsprojectsProject information
ClientPortalInvoicesinvoicesInvoice management
ClientPortalDeliverablesdeliverablesFile storage
ClientPortalMessagesmessagesCommunication threads
ClientPortalSupportticketsSupport tickets

Collection Schemas

projects Collection:

{
  name: string
  description: string
  clientId: User
  status: 'planning' | 'active' | 'review' | 'completed'
  startDate: Date
  deadline: Date
  progress: number // 0-100
  teamMembers: User[]
  deliverables: Deliverable[]
  timeline: Array<{
    milestone: string
    date: Date
    completed: boolean
  }>
}

invoices Collection:

{
  invoiceNumber: string
  clientId: User
  projectId?: Project
  items: Array<{
    description: string
    quantity: number
    rate: number
    amount: number
  }>
  subtotal: number
  tax: number
  total: number
  status: 'draft' | 'sent' | 'paid' | 'overdue'
  issueDate: Date
  dueDate: Date
  paidDate?: Date
  paymentMethod?: string
}

deliverables Collection:

{
  name: string
  projectId: Project
  type: string // file extension
  size: number // bytes
  url: string
  versions: Array<{
    version: number
    url: string
    uploadedAt: Date
    uploadedBy: User
  }>
  uploadedAt: Date
  uploadedBy: User
}

messages Collection:

{
  threadId: string
  subject: string
  projectId?: Project
  participants: User[]
  messages: Array<{
    from: User
    content: string
    attachments: Array<{
      name: string
      url: string
      size: number
    }>
    timestamp: Date
    read: boolean
  }>
  lastMessageAt: Date
}

tickets Collection:

{
  subject: string
  category: string
  priority: 'low' | 'medium' | 'high' | 'urgent'
  status: 'open' | 'in-progress' | 'resolved' | 'closed'
  clientId: User
  projectId?: Project
  description: string
  replies: Array<{
    from: User
    content: string
    timestamp: Date
    internal: boolean
  }>
  createdAt: Date
  resolvedAt?: Date
}

Default navigation structure:

const navigation = [
  { path: '/', label: 'Dashboard', icon: 'LayoutDashboard' },
  { path: '/projects', label: 'Projects', icon: 'FolderKanban' },
  { path: '/invoices', label: 'Invoices', icon: 'Receipt' },
  { path: '/deliverables', label: 'Files', icon: 'Files' },
  { path: '/messages', label: 'Messages', icon: 'MessageSquare' },
  { path: '/support', label: 'Support', icon: 'LifeBuoy' },
  { path: '/settings', label: 'Settings', icon: 'Settings' },
]

Best Practices

Client Experience

  1. Simple navigation - Keep it intuitive for non-technical users
  2. Clear status - Show project and invoice status clearly
  3. Notifications - Alert on new messages and updates
  4. Mobile friendly - Ensure responsive design
<ClientPortalApp
  config={{
    customBranding: true,
    enableFeedback: true
  }}
/>

File Management

  1. Version control - Track file versions
  2. Previews - Show file previews when possible
  3. Organization - Group files by project
  4. Access control - Limit access to client's files only
<ClientPortalDeliverables
  showVersions={true}
  showPreviews={true}
  enableDownload={true}
/>

Communication

  1. Thread organization - Group by project or topic
  2. Attachments - Allow file sharing in messages
  3. Response time - Set expectations for response
  4. Notifications - Email notifications for new messages
<ClientPortalMessages
  showThreads={true}
  enableAttachments={true}
  maxAttachmentSize={10}
/>

Billing

  1. Transparent pricing - Show detailed line items
  2. Payment options - Support multiple payment methods
  3. Auto-reminders - Send payment reminders
  4. Receipt delivery - Auto-send receipts
<ClientPortalInvoices
  enablePayment={true}
  paymentMethods={['card', 'ach']}
  showHistory={true}
/>

Examples

Minimal Client Portal

<ClientPortalApp name="Client Portal">
  <Shell>
    <ClientPortalDashboard />
  </Shell>
</ClientPortalApp>
<ClientPortalApp
  name="Acme Client Portal"
  config={{
    showProjects: true,
    showInvoices: true,
    showDeliverables: true,
    showMessages: true,
    showSupport: true,
    enableFeedback: true,
    enableUploads: true,
    customBranding: true
  }}
  theme={{
    preset: 'custom',
    custom: {
      primaryColor: '#4F46E5',
      logo: '/client-logo.svg'
    }
  }}
>
  <Shell>
    <Routes>
      <Route path="/" element={
        <ClientPortalDashboard
          showRecentActivity={true}
          showUpcomingDeadlines={true}
          showPendingInvoices={true}
        />
      } />
      <Route path="/projects" element={
        <ClientPortalProjects
          showTimeline={true}
          showDeliverables={true}
          showTeam={true}
        />
      } />
      <Route path="/invoices" element={
        <ClientPortalInvoices
          enablePayment={true}
          paymentMethods={['card', 'ach']}
          showHistory={true}
        />
      } />
      <Route path="/deliverables" element={
        <ClientPortalDeliverables
          showVersions={true}
          enableDownload={true}
          enableUpload={true}
          showPreviews={true}
        />
      } />
      <Route path="/messages" element={
        <ClientPortalMessages
          showThreads={true}
          enableAttachments={true}
        />
      } />
      <Route path="/support" element={
        <ClientPortalSupport
          enableSubmit={true}
          categories={['billing', 'technical', 'general']}
        />
      } />
    </Routes>
  </Shell>
</ClientPortalApp>

AgentApp

AI agent management with MCP tools and prompt engineering

On this page

ClientPortalAppOverviewType SignatureNaming ConventionQuick StartApp StructureDefault ViewsClientPortalDashboardClientPortalProjectsClientPortalInvoicesClientPortalDeliverablesClientPortalMessagesClientPortalSupportConfigurationBranding CustomizationFile Upload SettingsPayment ConfigurationSupport SettingsAuto-WiringCollection SchemasNavigationBest PracticesClient ExperienceFile ManagementCommunicationBillingRelated ComponentsExamplesMinimal Client PortalFull-Featured Client Portal