# LLM Proxy Gateway - Admin Dashboard ## Overview This is a comprehensive admin dashboard for the LLM Proxy Gateway, providing real-time monitoring, analytics, and management capabilities for the proxy service. ## Features ### 1. Dashboard Overview - Real-time request counters and statistics - System health indicators - Provider status monitoring - Recent requests stream ### 2. Usage Analytics - Time series charts for requests, tokens, and costs - Filter by date range, client, provider, and model - Top clients and models analysis - Export functionality to CSV/JSON ### 3. Cost Management - Cost breakdown by provider, client, and model - Budget tracking with alerts - Cost projections - Pricing configuration management ### 4. Client Management - List, create, revoke, and rotate API tokens - Client-specific rate limits - Usage statistics per client - Token management interface ### 5. Provider Configuration - Enable/disable LLM providers - Configure API keys (masked display) - Test provider connections - Model availability management ### 6. User Management (RBAC) - **Admin Role:** Full access to all dashboard features, user management, system configuration - **Viewer Role:** Read-only access to usage analytics, costs, and monitoring - Create/manage dashboard users with role assignment - Secure password management ### 7. Real-time Monitoring - Live request stream via WebSocket - System metrics dashboard - Response time and error rate tracking - Live system logs ### 7. **System Settings** - General configuration - Database management - Logging settings - Security settings ## Technology Stack ### Frontend - **HTML5/CSS3**: Modern, responsive design with CSS Grid/Flexbox - **JavaScript (ES6+)**: Vanilla JavaScript with modular architecture - **Chart.js**: Interactive data visualizations - **Luxon**: Date/time manipulation - **WebSocket API**: Real-time updates ### Backend (Rust/Axum) - **Axum**: Web framework with WebSocket support - **Tokio**: Async runtime - **Serde**: JSON serialization/deserialization - **Broadcast channels**: Real-time event distribution ## Installation & Setup ### 1. Build and Run the Server ```bash # Build the project cargo build --release # Run the server cargo run --release ``` ### 2. Access the Dashboard Once the server is running, access the dashboard at: ``` http://localhost:8080 ``` ### 3. Default Login Credentials - **Username**: `admin` - **Password**: `admin123` ## API Endpoints ### Authentication - `POST /api/auth/login` - Dashboard login - `GET /api/auth/status` - Authentication status ### Analytics - `GET /api/usage/summary` - Overall usage summary - `GET /api/usage/time-series` - Time series data - `GET /api/usage/clients` - Client breakdown - `GET /api/usage/providers` - Provider breakdown ### Clients - `GET /api/clients` - List all clients - `POST /api/clients` - Create new client - `PUT /api/clients/{id}` - Update client - `DELETE /api/clients/{id}` - Revoke client - `GET /api/clients/{id}/usage` - Client-specific usage ### Users (RBAC) - `GET /api/users` - List all dashboard users - `POST /api/users` - Create new user - `PUT /api/users/{id}` - Update user (admin only) - `DELETE /api/users/{id}` - Delete user (admin only) ### Providers - `GET /api/providers` - List providers and status - `PUT /api/providers/{name}` - Update provider config - `POST /api/providers/{name}/test` - Test provider connection ### System - `GET /api/system/health` - System health - `GET /api/system/logs` - Recent logs - `POST /api/system/backup` - Trigger backup ### WebSocket - `GET /ws` - WebSocket endpoint for real-time updates ## Project Structure ``` llm-proxy/ ├── src/ │ ├── dashboard/ # Dashboard backend module │ │ └── mod.rs # Dashboard routes and handlers │ ├── server/ # Main proxy server │ ├── providers/ # LLM provider implementations │ └── ... # Other modules ├── static/ # Frontend dashboard files │ ├── index.html # Main dashboard HTML │ ├── css/ │ │ └── dashboard.css # Dashboard styles │ ├── js/ │ │ ├── auth.js # Authentication module │ │ ├── dashboard.js # Main dashboard controller │ │ ├── websocket.js # WebSocket manager │ │ ├── charts.js # Chart.js utilities │ │ └── pages/ # Page-specific modules │ │ ├── overview.js │ │ ├── analytics.js │ │ ├── costs.js │ │ ├── clients.js │ │ ├── providers.js │ │ ├── monitoring.js │ │ ├── settings.js │ │ └── logs.js │ ├── img/ # Images and icons │ └── fonts/ # Font files └── Cargo.toml # Rust dependencies ``` ## Development ### Adding New Pages 1. Create a new JavaScript module in `static/js/pages/` 2. Implement the page class with `init()` method 3. Register the page in `dashboard.js` 4. Add menu item in `index.html` ### Adding New API Endpoints 1. Add route in `src/dashboard/mod.rs` 2. Implement handler function 3. Update frontend JavaScript to call the endpoint ### Styling Guidelines - Use CSS custom properties (variables) from `:root` - Follow mobile-first responsive design - Use BEM-like naming convention for CSS classes - Maintain consistent spacing with CSS variables ## Security Considerations 1. **Authentication**: Simple password-based auth for demo; replace with proper auth in production 2. **API Keys**: Tokens are masked in the UI (only last 4 characters shown) 3. **CORS**: Configure appropriate CORS headers for production 4. **Rate Limiting**: Implement rate limiting for API endpoints 5. **HTTPS**: Always use HTTPS in production ## Performance Optimizations 1. **Code Splitting**: JavaScript modules are loaded on-demand 2. **Caching**: Static assets are served with cache headers 3. **WebSocket**: Real-time updates reduce polling overhead 4. **Lazy Loading**: Charts and tables load data as needed 5. **Compression**: Enable gzip/brotli compression for static files ## Browser Support - Chrome 60+ - Firefox 55+ - Safari 11+ - Edge 79+ ## License MIT License - See LICENSE file for details. ## Contributing 1. Fork the repository 2. Create a feature branch 3. Make your changes 4. Add tests if applicable 5. Submit a pull request ## Support For issues and feature requests, please use the GitHub issue tracker.