Control Plane UI

frontend/control-plane-ui/src/
  components/
    AdminAssistant/       # AI assistant for admin tasks
    audit/                # Audit log browsing
    Billing/              # Billing and usage management
    ErrorBoundary.tsx     # Error boundary
    executive/            # Executive dashboard components
    infrastructure/       # Infrastructure monitoring
    Layout/               # Layout components
    provisioning/         # Tenant provisioning wizard
    SupportChatWidget.tsx # Support chat integration
    Topology/             # Service topology visualization
    users/                # User management
    Wizard/               # Configuration wizards
  hooks/
    useAuditLog.ts        # Audit log data access
    useUsers.ts           # User management operations
  pages/                  # Route-level page components
  App.tsx                 # Root application component
  main.tsx                # Vite entry point

// frontend/control-plane-ui/src/hooks/useUsers.ts
export function useUsers() {
  // User CRUD operations backed by IAM Service
  const listUsers = useCallback(async (params?: UserListParams) => { /* ... */ }, []);
  const getUser = useCallback(async (userId: string) => { /* ... */ }, []);
  const inviteUser = useCallback(async (invitation: UserInvitation) => { /* ... */ }, []);
  const updateUserRole = useCallback(async (userId: string, role: string) => { /* ... */ }, []);
  const suspendUser = useCallback(async (userId: string, reason: string) => { /* ... */ }, []);
  const resetPassword = useCallback(async (userId: string) => { /* ... */ }, []);
 
  return { listUsers, getUser, inviteUser, updateUserRole, suspendUser, resetPassword };
}

+-----------------------------------------------------------+
|  Service Health                                            |
+-----------------------------------------------------------+
|  Control Plane:                                            |
|  [OK] IAM      [OK] Tenant   [OK] Config   [OK] Billing  |
|  [OK] Audit    [OK] Notify   [OK] Registry [OK] Infra    |
|  [OK] Gateway  [OK] Observability                         |
+-----------------------------------------------------------+
|  Data Plane (tenant: acme-corp):                           |
|  [OK] Query Engine  [OK] AI Service   [OK] BI Service     |
|  [!] Pipeline Svc   [OK] Catalog Svc  [OK] ML Service     |
|  [OK] Governance    [OK] Render Svc   [OK] Semantic Layer  |
+-----------------------------------------------------------+
|  Infrastructure:                                           |
|  [OK] PostgreSQL    [OK] Redis         [OK] Kafka         |
|  [OK] Trino         [OK] Elasticsearch [OK] MinIO         |
+-----------------------------------------------------------+

+-----------------------------------------------------------+
|  Platform Topology                [Zoom] [Filter] [Layout] |
+-----------------------------------------------------------+
|                                                            |
|    [Kong Gateway]                                          |
|        |    |                                              |
|    [Control Plane]          [Data Plane]                   |
|    +---+---+---+            +---+---+---+                  |
|    |IAM|Ten|Cfg|            |QE |AI |BI |                  |
|    +---+---+---+            +---+---+---+                  |
|        |                        |   |                      |
|    [PostgreSQL]             [Trino] [Redis]                 |
|                                 |                          |
|                            [Kafka]                         |
|                                                            |
+-----------------------------------------------------------+
|  Legend: [OK] Healthy  [!] Degraded  [X] Down              |
+-----------------------------------------------------------+

// frontend/control-plane-ui/src/hooks/useAuditLog.ts
export function useAuditLog() {
  const fetchAuditLogs = useCallback(async (params: AuditLogParams) => {
    // Query audit service with filters
    // Supports: date range, actor, action, resource type, tenant
  }, []);
 
  const exportAuditLogs = useCallback(async (params: AuditLogParams, format: 'csv' | 'json') => {
    // Export filtered audit logs
  }, []);
 
  return { fetchAuditLogs, exportAuditLogs };
}