# AdPlatform Management Console

React-based admin interface for AdPlatform management.

## Project Structure

```
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

```bash
npm install
npm start
```

Opens at http://localhost:3000

## Configuration

Edit `src/auth/authConfig.js`:

```javascript
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

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