management-client/
├── src/
│   ├── app/
│   │   └── App.js                    # Main app routing
│   ├── auth/
│   │   ├── authConfig.js             # MSAL + API config
│   │   └── AuthProvider.jsx          # Auth context
│   ├── components/
│   │   ├── admin/
│   │   │   ├── ClientsPanel.jsx      # Client management
│   │   │   ├── UsersPanel.jsx        # User management
│   │   │   └── SessionsPanel.jsx     # Session management
│   │   ├── Shell.jsx                 # Layout wrapper
│   │   ├── SignInOverlay.jsx         # Sign in screen
│   │   ├── RegistrationForm.jsx      # New org setup
│   │   └── Dashboard.jsx             # Main dashboard
│   ├── styles/
│   │   └── app.css
│   └── index.js
├── public/
│   └── index.html
├── package.json
└── webpack.config.js

Features

Authentication: Microsoft Entra External ID (MSAL.js)
Onboarding: New user registration with organization setup
Client Management: Create, list, deactivate clients
User Management: Create, list, link to clients, deactivate users
Session Management: View active sessions, revoke, cleanup

Setup

npm install
npm start

Opens at http://localhost:3000

Configuration

Edit src/auth/authConfig.js:

export const msalConfig = {
    auth: {
        clientId: 'YOUR_CLIENT_ID',
        authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
    }
};

export const API_BASE_URL = 'https://your-management-api.com';
export const GATEWAY_API_URL = 'https://your-gateway-api.com';

User Flow

User signs in with Microsoft → JWT obtained
App checks /api/onboarding/status
If not registered → Registration form shown
After registration → Session created via Gateway
Dashboard displayed with admin tabs