# MadBase Control Plane UI

Web-based administration interface for the MadBase Control Plane.

## Features

- 📊 **Dashboard** - Overview of cluster health and metrics
- 🖥️ **Server Management** - Add, remove, and monitor servers
- 📋 **Templates** - Deploy pre-configured server templates
- ☁️ **Providers** - View VPS provider options and pricing
- 📈 **Scaling** - Visual scaling tool with cost estimation
- 💚 **Cluster Health** - Real-time cluster monitoring
- ⚙️ **Settings** - Configure API endpoints and credentials

## Quick Start

```bash
# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

The UI will be available at `http://localhost:3000`

## Tech Stack

- **React 18** - UI framework
- **TypeScript** - Type safety
- **Material-UI** - Component library
- **TanStack Query** - Data fetching and caching
- **React Router** - Routing
- **Vite** - Build tool

## Pages

### Dashboard
- Cluster overview
- Server count and status
- Quick actions
- Recent activity

### Servers
- List all servers
- Add new servers
- Remove servers (with data integrity checks)
- View server status

### Templates
- View all available templates
- See template details (cost, services, requirements)
- Deploy from templates

### Providers
- View supported VPS providers
- See available plans and pricing
- Compare provider options

### Scaling
- Configure scaling parameters
- View cost estimates
- Execute scaling plans

### Cluster Health
- Real-time cluster status
- Server metrics
- Service health

## Configuration

The UI connects to the Control Plane API at `http://localhost:8001` by default. To change this:

`vite.config.ts`:
``typescript
server: {
  proxy: {
    '/api': {
      target: 'http://your-api-url:8001',
      changeOrigin: true,
    },
  },
}
```

## Building for Production

```bash
npm run build
```

The built files will be in `dist/`. Serve them with any static file server:

```bash
npx serve dist
```

## Deployment

The UI can be served from:
- The Control Plane proxy (port 8080)
- Nginx/Apache
- CDN (CloudFlare, Netlify, Vercel)

## Environment Variables

No environment variables required for development. For production:

``ash
VITE_API_URL=http://your-api-url:8001
```