# Frontend — Build & Deploy

React + Vite + TailwindCSS Web-Frontend, deployed als statische Dateien auf Nginx.

## Eckdaten

- **Server**: 192.168.85.20 (Debian 13, Nginx)
- **Tech**: React 18, Vite, TailwindCSS, Recharts, Zustand, lucide-react
- **Theme**: Dark mit Orange-Akzent, komplett deutsch
- **Auth**: JWT Login (8h Token)
- **Default-Login**: `admin` / `Start!123`

## Seiten

| Seite | Beschreibung |
|-------|-------------|
| Dashboard | Uebersicht aller Firewalls, Status-Kacheln, AgentPanel per Klick |
| Firewalls | Suchbare Tabelle, AgentPanel mit Tabs (Uebersicht, Interfaces, Dienste, Tunnel, VPN, WireGuard, Routen, DHCP, Zertifikate, Backups, Agent); Firewall hinzufuegen/loeschen |
| Tunnel | Globale Tunnel-Uebersicht ueber alle Firewalls |
| Firmware | Multi-Plattform Firmware-Upload, Agent-Update-Trigger |
| Kunden | CRUD Kundenverwaltung |
| Einstellungen | Benutzerverwaltung, Passworte aendern |

## Features (v1.0.3)

### Firewall hinzufuegen / Pre-Registration
- Dialog mit Name + optionalem Kunden
- Zeigt Installationsanleitung mit Copy-Buttons fuer die Shell-Befehle
- Agent wird mit `hostname="(ausstehend)"` angelegt, automatisches Matching bei Registration

### Firewall loeschen
- Papierkorb-Icon im AgentPanel
- Loescht Agent und alle zugehoerigen Daten (Systemdaten, Events, Backups, Metriken)

### OPNsense Business Edition Lizenz-Anzeige
Im **Uebersicht-Tab** des AgentPanel:
- Product Name (z.B. "OPNsense Business Edition")
- Subscription Key
- Ablaufdatum
- Restlaufzeit mit visuellem Farbbalken (gruen/gelb/rot je nach verbleibender Zeit)

### Agent-Tab
- **Agent-Info**: Version, Agent-ID, Plattform, Uptime
- **Update-Button**: Direktes Agent-Update anfordern
- **Befehle**: Remote-Shell-Befehle direkt aus dem Frontend ausfuehren

### Firmware-Seite
- Multi-Platform Upload (FreeBSD, Linux, Windows)
- Versions-Uebersicht pro Plattform mit SHA256-Hash und Groesse
- Agent-Update-Buttons (einzeln oder alle)

## Build & Deploy

```bash
cd frontend
npm run build                                              # ~330 KB JS, ~32 KB CSS
ssh root@192.168.85.20 'rm -rf /var/www/html/assets/*'     # Alte Hashes loeschen!
scp -r dist/* root@192.168.85.20:/var/www/html/
```

**Wichtig:** Vor Deploy immer `assets/` loeschen — Vite generiert Hash-basierte Dateinamen, alte Dateien bleiben sonst auf dem Server und Browser-Cache liefert 404.

## Dateistruktur

```
frontend/
├── src/
│   ├── App.jsx              # Router + ProtectedRoute
│   ├── api/client.js        # API Client (auth, agents, firmware, tunnels, etc.)
│   ├── stores/auth.js       # Zustand Auth Store (JWT Token)
│   ├── layouts/AppLayout.jsx # Sidebar + Outlet
│   ├── components/
│   │   ├── AgentPanel.jsx   # Side Panel mit Tabs (Uebersicht bis Agent)
│   │   └── StatusBadge.jsx  # Online/Offline/Stale Badge
│   └── pages/
│       ├── Dashboard.jsx    # Status-Kacheln + Agent-Liste
│       ├── Agents.jsx       # Firewall-Tabelle
│       ├── AgentDetail.jsx  # Detail-Ansicht (full page)
│       ├── Tunnels.jsx      # Globale Tunnel-Uebersicht
│       ├── Firmware.jsx     # Multi-Plattform Firmware + Update-Trigger
│       ├── Customers.jsx    # Kunden CRUD
│       ├── SettingsPage.jsx # User-Management
│       └── Login.jsx        # JWT Login
├── vite.config.js
└── package.json
```