platform-codebase/features/platform-admin/frontend-admin/src/config

Platform Admin Configuration

This directory contains configuration files for the Platform Admin frontend application.

Navigation Configuration

File: navigation.config.ts

Architecture Principles

The navigation configuration follows SOLID principles and DRY practices:

1. Single Responsibility Principle (SRP)

   • Navigation structure is separated from presentation logic
   • Each section is self-contained with its own routes

2. Open/Closed Principle (OCP)

   • Easy to extend by adding new sections/items
   • No need to modify App.tsx when adding routes
   • Changes are localized to navigation.config.ts

3. DRY (Don't Repeat Yourself)

   • Navigation items defined once, consumed in multiple places
   • Type-safe interfaces prevent duplication of structure
   • Helper functions for common navigation queries

Type Safety

interface NavItem {
  to: string;           // Route path
  label: string;        // Display label
  description?: string; // Optional tooltip/accessibility text
  icon?: string;        // Future: icon identifier
}

interface NavSection {
  title: string;        // Section heading
  items: NavItem[];     // Routes in this section
  meta?: {              // Future: collapsibility, permissions
    description?: string;
    collapsible?: boolean;
    defaultCollapsed?: boolean;
  };
}

Usage

In App.tsx:

import { NAVIGATION_SECTIONS } from './config/navigation.config';

// Render sidebar navigation
NAVIGATION_SECTIONS.map((section) => (
  <NavSection key={section.title}>
    <NavSectionTitle>{section.title}</NavSectionTitle>
    <NavList>
      {section.items.map((item) => (
        <StyledNavLink to={item.to} title={item.description}>
          {item.label}
        </StyledNavLink>
      ))}
    </NavList>
  </NavSection>
))

Helper Functions:

import {
  getAllNavItems,
  findNavItemByPath,
  findSectionByPath
} from './config/navigation.config';

// Get all routes for validation
const allRoutes = getAllNavItems();

// Find item metadata
const item = findNavItemByPath('/analytics/revenue');
console.log(item?.description); // "Detailed revenue analytics and trends"

// Find parent section
const section = findSectionByPath('/analytics/revenue');
console.log(section?.title); // "Analytics"

Adding New Routes

To add a new navigation item:

1. Open navigation.config.ts
2. Find the appropriate section
3. Add a new NavItem object:

{
  title: 'Analytics',
  items: [
    // ... existing items
    {
      to: '/analytics/new-feature',
      label: 'New Feature',
      description: 'Description for tooltips',
    },
  ],
}

4. Add the corresponding route in App.tsx:

<Route path="/analytics/new-feature" element={<NewFeaturePage />} />

Navigation Hierarchy

Current structure (in order):

1. Home - Platform overview dashboard
2. Dashboards - Category-specific dashboards
3. Analytics - Detailed analytics tools
4. Attributes - Content attribute management
5. Conversations - Scammer detection & training
6. Devices - Device authorization
7. Email - Email system management
8. Infrastructure - Service monitoring
9. ML Services - Machine learning features
10. Shop - Product management
11. SSO - User & session management
12. Subscriptions - Subscription management

Future Enhancements

The navigation config is designed to support:

• Icons: icon field ready for future icon integration
• Permissions: Add requiredRole or requiredPermission fields
• Collapsible sections: meta.collapsible and meta.defaultCollapsed
• Badges: Add badge field for counts (e.g., "3 new")
• External links: Add external: boolean flag
• Search: Helper functions support full-text search

Benefits

Before (hardcoded in App.tsx):

• ❌ Navigation mixed with component logic
• ❌ Hard to find/modify routes
• ❌ No type safety for structure
• ❌ No reusability

After (config-based):

• ✅ Single source of truth
• ✅ Type-safe navigation structure
• ✅ Easy to extend and maintain
• ✅ Reusable helper functions
• ✅ Separation of concerns
• ✅ Supports future features (icons, permissions, etc.)

Other Configuration Files

• devUserTypes.ts - Development user type switching (dev mode only)
• index.ts - Barrel exports for clean imports

Best Practices

1. Always use the config - Never hardcode navigation in components
2. Add descriptions - Helps with accessibility and tooltips
3. Keep sections logical - Group related features together
4. Use helper functions - Leverage findNavItemByPath, etc.
5. Update routes together - Add to config AND App.tsx routes

---

Last Updated: 2026-01-10