Control Plane UI Overview
The Control Plane UI is a React/Vite application that provides the administrative interface for platform operators and tenant administrators. It enables user management, billing configuration, audit log review, infrastructure monitoring, privacy controls, and tenant provisioning through a unified dashboard experience.
Application Structure
The Control Plane UI is located at frontend/control-plane-ui/ and follows the standard MATIH frontend architecture:
| Directory | Purpose |
|---|---|
src/pages/ | Page components for each functional area |
src/components/ | Reusable UI components |
src/hooks/ | Custom React hooks |
src/routes/ | Route definitions and guards |
src/store/ | State management (Zustand) |
Pages
| Page | Component | Route | Description |
|---|---|---|---|
| Authentication | AuthPages | /auth/* | Login, registration, password reset |
| Executive Dashboard | ExecutiveDashboard | /dashboard | Platform-wide KPI overview |
| User Management | UserManagement | /users | User CRUD, role assignment |
| Billing | BillingPage | /billing | Invoicing, usage metering, plan management |
| Audit Log | AuditLogPage | /audit | Searchable audit event timeline |
| Privacy Center | PrivacyCenter | /privacy | Data subject requests, consent management |
| Infrastructure | InfrastructurePage | /infrastructure | Cluster topology, resource monitoring |
| Provisioning | ProvisioningWizard | /provisioning | Tenant onboarding wizard |
Technology Stack
| Technology | Version | Purpose |
|---|---|---|
| React | 18.x | UI framework |
| Vite | 5.x | Build tool and dev server |
| TypeScript | 5.x | Type-safe development |
| Tailwind CSS | 3.x | Utility-first styling |
| Zustand | 4.x | State management |
| React Router | 6.x | Client-side routing |
| TanStack Query | 5.x | Server state management |
Authentication Flow
The Control Plane UI uses JWT-based authentication through the IAM Service:
- User submits credentials on login page
- IAM Service validates and returns access + refresh tokens
- Tokens are stored in HTTP-only cookies
- API Client attaches tokens to all subsequent requests
- Token refresh happens transparently before expiration
Role-Based Access
| Role | Dashboard | Users | Billing | Audit | Infrastructure | Provisioning |
|---|---|---|---|---|---|---|
| Platform Admin | Full | Full | Full | Full | Full | Full |
| Tenant Admin | Tenant | Tenant | View | Tenant | View | Initiate |
| Operator | View | None | None | View | Full | None |
| Auditor | View | None | None | Full | None | None |
Development
cd frontend/control-plane-ui
npm install
npm run dev # Starts on port 3004Detailed Sections
| Section | Content |
|---|---|
| Authentication Pages | Login, registration, MFA, password reset |
| Executive Dashboard | KPI cards, usage charts, health indicators |
| User Management | User CRUD, role assignment, team management |
| Billing and Invoicing | Plans, usage metering, invoice history |
| Audit Log | Event search, filtering, export |
| Privacy Center | DSAR handling, consent, data retention |
| Infrastructure Topology | Cluster view, resource monitoring |
| Provisioning Wizard | Tenant creation, configuration steps |