# Personal Internet Cell - Web UI

A modern React-based web interface for managing your Personal Internet Cell.

## Features

- **Dashboard**: Overview of cell status and services
- **Peer Management**: Add, remove, and configure WireGuard peers
- **Network Services**: DNS, DHCP, and NTP management
- **WireGuard**: VPN configuration and status
- **Email Services**: Postfix and Dovecot management
- **Calendar Services**: Radicale CalDAV/CardDAV management
- **File Storage**: WebDAV file storage management
- **Routing**: Advanced VPN gateway and routing configuration
- **Logs**: System logs and monitoring
- **Settings**: Cell configuration and security settings

## Tech Stack

- **React 19**: Modern React with hooks
- **Vite**: Fast build tool and dev server
- **Tailwind CSS**: Utility-first CSS framework
- **Lucide React**: Beautiful icons
- **React Router**: Client-side routing
- **Axios**: HTTP client for API communication

## Development

### Prerequisites

- Node.js 18+ and npm
- Personal Internet Cell backend running on port 3000

### Setup

1. Install dependencies:
   ```bash
   npm install
   ```

2. Start the development server:
   ```bash
   npm run dev
   ```

3. Open your browser to `http://localhost:5173`

### Development Features

- **Hot Reload**: Changes reflect immediately
- **API Proxy**: Requests to `/api/*` are proxied to `http://localhost:3000`
- **TypeScript Support**: Full TypeScript support available
- **ESLint**: Code linting and formatting

## Building for Production

### Build

```bash
npm run build
```

This creates a `dist/` directory with optimized production files.

### Preview

```bash
npm run preview
```

This serves the built files locally for testing.

## API Integration

The Web UI communicates with the Personal Internet Cell backend API:

- **Base URL**: `http://localhost:3000` (development)
- **Health Check**: `/health`
- **API Endpoints**: `/api/*`

### Environment Variables

Create a `.env` file to customize the API URL:

```env
VITE_API_URL=http://localhost:3000
```

## Project Structure

```
src/
├── components/          # Reusable UI components
│   └── Sidebar.jsx     # Navigation sidebar
├── pages/              # Page components
│   ├── Dashboard.jsx   # Main dashboard
│   ├── Peers.jsx       # Peer management
│   ├── NetworkServices.jsx
│   ├── WireGuard.jsx   # VPN configuration
│   ├── Email.jsx       # Email services
│   ├── Calendar.jsx    # Calendar services
│   ├── Files.jsx       # File storage
│   ├── Routing.jsx     # Routing configuration
│   ├── Logs.jsx        # System logs
│   └── Settings.jsx    # Cell settings
├── services/           # API services
│   └── api.js         # API client and endpoints
├── App.jsx            # Main app component
├── main.jsx           # App entry point
└── index.css          # Global styles
```

## Styling

The Web UI uses Tailwind CSS with custom components:

- **Cards**: `.card` for content containers
- **Buttons**: `.btn`, `.btn-primary`, `.btn-secondary`, etc.
- **Inputs**: `.input` for form fields
- **Status Indicators**: `.status-indicator`, `.status-online`, etc.

## Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## Contributing

1. Follow the existing code style
2. Use TypeScript for new components
3. Add tests for new features
4. Update documentation as needed

## License

Part of the Personal Internet Cell project.