# 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.