Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/yoelrrg-code/pcconnect/llms.txt

Use this file to discover all available pages before exploring further.

The PC Connect dashboard uses a persistent sidebar navigation built in Nav (src/layouts/dashboard/nav.tsx) and configured in navConfig (src/layouts/dashboard/config-navigation.tsx). The sidebar is a MUI Drawer — rendered as a permanent desktop drawer on lg+ screens (360px wide, collapsible to 90px) and as a modal overlay drawer on smaller screens. Navigation is hash-based: each item carries a path string (e.g. #users-management) that maps directly to a case in the renderTabContent() switch in App.tsx.

​
TypeScript Interfaces

The navigation configuration is strongly typed with two interfaces: 
// src/layouts/dashboard/config-navigation.tsx

export interface NavItem {
  title: string;   // Display label shown in the sidebar
  path: string;    // Hash string used as the activeTab key
  icon: ReactNode; // Custom SVG icon component
}

export interface NavGroup {
  subheader: string; // All-caps section heading (e.g. 'ADMIN')
  items: NavItem[];  // Array of nav items in this group
}
The navConfig array exports four NavGroup objects. Each group is separated by a primary-colored 1px horizontal divider in the expanded sidebar.

​
ADMIN

Administrative platform settings.
TitlePathIcon
Users Management#users-managementUsersIcon
Insurance Payers#insurance-payersCreditCardIcon
Plaid#plaidPlaidLockIcon

​
ENROLLMENT

Provider and client enrollment workflows.
TitlePathIcon
Dashboard#enrollment-dashboardLayoutGridIcon
Provider Management#provider-managementUserCheckIcon
Client Management#client-managementBuildingIcon
Client Group#client-groupUsersGroupIcon

​
OVERVIEW

Day-to-day clinical and operational views.
TitlePathIcon
Home#dashboardHomeIcon
Active Incomplete Cases#active-incomplete-casesFileCheckIcon
ED Floor Visits#ed-floor-visitsActivityIcon
Educational Resources#educational-resourcesGraduationCapIcon

​
REPORTS

Reporting and audit tools.
TitlePathIcon
Report Management#report-managementClipboardListIcon

​
How Routing Works

PC Connect does not use React Router. Instead, routing is managed entirely through a single activeTab state string in App.tsx, passed down through DashboardLayout to Nav. Clicking a nav item calls setActiveTab(item.path) and onCloseNav(). 
// src/App.tsx — AppContent (simplified)
const [activeTab, setActiveTab] = useState('#dashboard');

const renderTabContent = () => {
  switch (activeTab) {
    case '#dashboard':              return <AppView onNavigate={setActiveTab} />;
    case '#users-management':       return <UsersManagementView />;
    case '#insurance-payers':       return <InsurancePayersContent />;
    case '#plaid':                  return <PlaidContent />;
    case '#enrollment-dashboard':   return <EnrollmentDashboardContent />;
    case '#provider-management':    return <ProviderManagementContent />;
    case '#client-management':
    case '#client-profile':         return <ClientManagementView activeTab={activeTab} setActiveTab={setActiveTab} />;
    case '#client-group':           return <ClientGroupContent />;
    case '#active-incomplete-cases':return <ActiveIncompleteCasesView />;
    case '#ed-floor-visits':        return <EDFloorVisitsContent />;
    case '#educational-resources':  return <EducationalResourcesView />;
    case '#report-management':      return <ReportManagementContent />;
    default:                        return <AppView />;
  }
};
The header’s TAB_TITLES record maps the same hash keys to human-readable page titles displayed in the AppBar: 
// src/layouts/dashboard/header.tsx
const TAB_TITLES: Record<string, string> = {
  '#dashboard':               'Hi, Welcome Back 👋',
  '#users-management':        'Users Management',
  '#insurance-payers':        'Insurance Payers',
  '#plaid':                   'Plaid Integration',
  '#enrollment-dashboard':    'Enrollment Analytics',
  '#provider-management':     'Provider Management',
  '#client-management':       'Client Management',
  '#client-profile':          'Client Profile',
  '#client-group':            'Client Groups',
  '#active-incomplete-cases': 'Active Incomplete Cases',
  '#ed-floor-visits':         'ED Floor Visits',
  '#educational-resources':   'Educational Resources',
  '#report-management':       'Report Management',
};
The desktop sidebar supports a collapsed mode (90px) toggled via a floating IconButton that sits −16px outside the sidebar’s right border. In collapsed mode:
  • Group subheader labels and nav item labels are hidden (opacity transitions to 0, font-size to 0px).
  • Nav items become circular buttons (borderRadius: '100%', 60×60px).
  • A PCTooltip with placement="right" reveals the item’s title on hover.
  • The toggle button icon switches between ChevronLeft (expanded) and ChevronRight (collapsed).
// Nav width constants (nav.tsx)
const NAV_WIDTH = 360; // expanded
// collapsed width = 90 (set in DashboardLayout state)
Active items are highlighted with color: theme.palette.primary.main and bgcolor: alpha(GREY[300], 1). The #client-profile path is treated as active for the #client-management item: 
const active =
  activeTab === item.path ||
  (item.path === '#client-management' && activeTab === '#client-profile');

Build docs developers (and LLMs) love

Get started for freeTalk to us