rmm2/docs/FRONTEND.md

# Frontend — Installation, Build & Deploy

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

## Eckdaten

| | |
|---|---|
| **Tech** | React 18, Vite, TailwindCSS, Recharts, Zustand, lucide-react |
| **Theme** | Dark mit Orange-Akzent, komplett deutsch |
| **Auth** | JWT Login (8h Token) |
| **Standard-Login** | `admin` / `Start!123` (beim ersten Backend-Start angelegt) |
| **Frontend-Server** | separater LXC / Debian-Server mit Nginx |
| **Backend-Verbindung** | direkter HTTPS-API-Call zu `https://BACKEND_IP:8443` |

---

## 1. Voraussetzungen (Build-System)

Build läuft auf dem Mac / Entwicklungsrechner, **nicht** auf dem Frontend-Server.

```bash
# Node.js 20+ installieren (macOS mit Homebrew)
brew install node

# Abhängigkeiten installieren (einmalig nach Clone)
cd frontend
npm install
```

---

## 2. Backend-URL konfigurieren

**VOR dem Build** muss `frontend/src/config.js` angelegt werden.
Die Datei ist in `.gitignore` und wird nicht eingecheckt (enthält echte IP + API-Key).

```bash
cp frontend/src/config.example.js frontend/src/config.js
```

Dann `config.js` anpassen:

```js
// frontend/src/config.js
export const BACKEND_HOST = '192.168.85.13'        // IP des Backend-Servers
export const BACKEND_URL = `https://${BACKEND_HOST}:8443`
export const API_KEY = 'DEIN_API_KEY'              // aus backend/config.yaml → api_keys[0]
```

Für die **lokale Entwicklung** (`npm run dev`) muss zusätzlich `vite.config.js` angepasst werden:

```js
// vite.config.js → server.proxy
proxy: {
  '/api': {
    target: 'https://192.168.85.13:8443',  // Backend-IP eintragen
    changeOrigin: true,
    secure: false,
  }
}
```

---

## 3. Build

```bash
cd frontend
npm run build
```

Erzeugt `frontend/dist/` mit:
- `index.html`
- `assets/index-[hash].js` (~330 KB)
- `assets/index-[hash].css` (~32 KB)
- `vite.svg`

---

## 4. Nginx auf dem Frontend-Server installieren

```bash
# Debian 12/13
apt update
apt install -y nginx

systemctl enable nginx
systemctl start nginx
```

---

## 5. Nginx konfigurieren (Single-Page Application)

React Router benötigt ein Nginx-Config das alle Routen auf `index.html` umleitet:

```bash
# Bestehende Default-Config ersetzen
cat > /etc/nginx/sites-available/rmm-frontend << 'EOF'
server {
    listen 80;
    server_name _;

    root /var/www/html;
    index index.html;

    # React SPA — alle Routen auf index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Statische Assets mit Cache
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Kein Zugriff auf versteckte Dateien
    location ~ /\. {
        deny all;
    }
}
EOF

ln -sf /etc/nginx/sites-available/rmm-frontend /etc/nginx/sites-enabled/rmm-frontend
rm -f /etc/nginx/sites-enabled/default

nginx -t && systemctl reload nginx
```

---

## 6. Deploy

### Manuell

```bash
cd frontend
npm run build
ssh root@FRONTEND_SERVER 'rm -rf /var/www/html/assets/*'   # Alte Hashes löschen!
scp -r dist/* root@FRONTEND_SERVER:/var/www/html/
ssh root@FRONTEND_SERVER 'nginx -s reload'
```

**Wichtig:** `assets/*` MUSS vor dem Deploy gelöscht werden — Vite generiert Hash-basierte
Dateinamen (`index-Dv2B5kJs.js`). Alte Dateien bleiben sonst auf dem Server und
der Browser-Cache liefert 404-Fehler.

### Mit deploy-script (empfohlen)

Das Skript `deploy-frontend.sh` im Root-Verzeichnis erledigt Build + Deploy + Nginx-Reload
in einem Schritt. Server-IP und Webroot am Anfang des Skripts anpassen:

```bash
# deploy-frontend.sh — Variablen anpassen:
REMOTE="root@192.168.85.20"    # IP des Frontend-Servers
WEB_ROOT="/var/www/html"

# Dann ausführen:
./deploy-frontend.sh
```

---

## 7. Erster Login

```
URL:       http://FRONTEND_SERVER_IP
Benutzer:  admin
Passwort:  Start!123
```

Passwort sofort ändern unter **Einstellungen → Benutzer**.

---

## 8. Lokale Entwicklung

```bash
cd frontend
npm run dev
```

Startet Vite Dev-Server auf `http://localhost:5173` mit Hot-Reload.
API-Calls werden per Proxy an das Backend weitergeleitet (→ `vite.config.js` anpassen).

---

## Seiten

| Seite | Route | Beschreibung |
|-------|-------|-------------|
| Login | `/login` | JWT Login |
| Dashboard | `/` | Status-Kacheln, Agent-Liste, AgentPanel per Klick |
| Firewalls | `/agents` | Suchbare Tabelle, AgentPanel mit Tabs, Hinzufügen/Löschen |
| Tunnel | `/tunnels` | Globale Tunnel-Übersicht über alle Firewalls |
| Firmware | `/firmware` | Multi-Plattform Upload, Agent-Update-Trigger |
| Kunden | `/customers` | CRUD Kundenverwaltung |
| Einstellungen | `/settings` | Benutzerverwaltung, Passwörter ändern |

## AgentPanel Tabs

| Tab | Inhalt |
|-----|--------|
| Übersicht | Hardware, OS, Uptime, CPU/RAM, Lizenz (Business Edition) |
| Interfaces | Netzwerk-Interfaces mit IP, MAC, Status, RX/TX |
| Dienste | Laufende Services mit Status-Badge |
| Tunnel | Quick-Buttons (WebGUI, SSH, Custom), aktive Tunnel |
| VPN | WireGuard-Instanzen mit Transfer-Statistiken |
| WireGuard | Peer-Management (CRUD), Client-Config mit Copy-Button |
| Routen | Routing-Tabelle |
| DHCP | Aktive Leases mit Suche (IP, MAC, Hostname) |
| Zertifikate | Karten-Layout mit Ablaufdatum und Fortschrittsbalken |
| Backups | Config-Backup erstellen, Liste, Download als XML |
| Agent | Version, Agent-ID, Update-Button, Remote-Befehle |

---

## Dateistruktur

```
frontend/
├── src/
│   ├── config.js              # NICHT im Git — vor Build anlegen (s.o.)
│   ├── config.example.js      # Vorlage mit Platzhaltern
│   ├── App.jsx                # Router + ProtectedRoute
│   ├── main.jsx               # Entry Point
│   ├── index.css              # TailwindCSS + Custom Styles
│   ├── api/client.js          # API Client (alle Endpoints)
│   ├── stores/auth.js         # Zustand Auth Store (JWT Token)
│   ├── layouts/AppLayout.jsx  # Sidebar Navigation + Outlet
│   ├── components/
│   │   ├── AgentPanel.jsx     # Side Panel mit 11 Tabs
│   │   └── StatusBadge.jsx    # Online/Offline/Stale Badge
│   └── pages/
│       ├── Dashboard.jsx      # Status-Kacheln + Agent-Liste
│       ├── Agents.jsx         # Firewall-Tabelle + Pre-Registration
│       ├── Tunnels.jsx        # Globale Tunnel-Übersicht
│       ├── Firmware.jsx       # Multi-Plattform Firmware + Updates
│       ├── Customers.jsx      # Kunden CRUD
│       ├── SettingsPage.jsx   # User-Management + Passwort
│       └── Login.jsx          # JWT Login
├── vite.config.js             # Vite Config (Proxy für Dev-Server)
└── package.json
```