Merge branch 'phase/020b-gitea-token'

Serveradresse und Repository stammen aus dem Remote, der Token aus dem
Schluesselbund bzw. ~/.git-credentials. Ein zweiter Token in der .env entfaellt.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

.env.example

@@ -14,3 +14,8 @@ APP_URL="http://localhost:3000"
 
 # Demo-Daten beim Seed anlegen (1 = ja)
 SEED_DEMO="0"
+
+# Abgleich der Issue-Dateien mit dem Gitea-Tracker (npm run issues:sync)
+GITEA_URL="https://git.example.de"
+GITEA_REPO="benutzer/ProxLedger"
+GITEA_TOKEN=""

CHANGELOG.md

@@ -17,6 +17,28 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
 
 ### Sicherheit
 
+## [0.4.2] – 2026-09-17
+
+### Geändert
+- Der Issue-Abgleich holt Serveradresse und Repository aus dem Git-Remote und den Token aus den hinterlegten Git-Zugangsdaten; ein zweiter Token in der `.env` ist nicht mehr nötig (#020)
+
+## [0.4.1] – 2026-09-17
+
+### Hinzugefügt
+- Abgleich der Issue-Dateien mit dem Gitea-Tracker über `npm run issues:sync`, inklusive Labels, Meilensteinen und Trockenlauf (#020)
+
+## [0.4.0] – 2026-09-17
+
+### Hinzugefügt
+- Host-Tabelle mit Suche über Hostname, FQDN, Key, Server-ID, IP, Kunde und Rechnungsnummer (#007)
+- Filter nach Kunde, Status, Produkt, Ablauffrist und offenen Rechnungspunkten; Sortierung und Seitenblättern (#007)
+- CSV-Export der Host-Liste unter Berücksichtigung der aktiven Filter (#007)
+- Host-Detailansicht mit Übersicht, Subscription-Historie, Reports, Rechnungen, Notizen mit Tags und Tokens (#007)
+- Kunde eines Hosts direkt in der Detailansicht ändern (#007)
+
+### Geändert
+- Host-Tabelle und Host-Detail arbeiten mit echten Daten statt Beispieldaten (#007)
+
 ## [0.3.0] – 2026-09-17
 
 ### Hinzugefügt

DEVLOG.md

@@ -2,7 +2,7 @@
 
 ## Zeitübersicht
 
-**Gesamt:** 2 h 13 min
+**Gesamt:** 2 h 58 min
 
 | Issue | Zeit |
 |---|---|
@@ -12,18 +12,23 @@
 | #004 Agent-API | 0 h 20 min |
 | #005 Agent-Skript | 0 h 25 min |
 | #006 Kunden und Hostzuweisung | 0 h 35 min |
+| #007 Host-Tabelle und Detailansichten | 0 h 25 min |
+| #020 Issues nach Gitea übertragen | 0 h 20 min |
 
 | Meilenstein | Zeit |
 |---|---|
 | v0.1.0 | 1 h 13 min | **abgeschlossen**
 | v0.2.0 | 0 h 25 min | **abgeschlossen**
 | v0.3.0 | 0 h 35 min | **abgeschlossen**
+| v0.4.0 | 0 h 25 min | **abgeschlossen**
+| v0.4.1 | 0 h 10 min | **abgeschlossen**
+| v0.4.2 | 0 h 10 min | **abgeschlossen**
 
 ---
 
 ## 2026-09-17 · Sitzung 1 · 19:36–laufend
-**Issue:** #001–#006 (Meilensteine v0.1.0 bis v0.3.0)
+**Issue:** #001–#007 (Meilensteine v0.1.0 bis v0.4.0)
-**Version:** 0.3.0
+**Version:** 0.4.2
 
 ### Erledigt
 - Auftrag gelesen, Rückfragen gestellt
@@ -41,6 +46,12 @@
 - #006 abgeschlossen: Kunden und Standorte pflegen, Mehrfachzuweisung nicht zugeordneter Hosts, Enrollment- und Host-Tokens verwalten, Audit-Log; Dashboard, Kundenseiten und globale Suche laufen auf der Datenbank
 - Durchlauf gegen den laufenden Server geprüft: Token anlegen → `enroll` → Agent-Report → Laufzeit-Vorschlag → Host erscheint als „nicht zugeordnet“ → `ping`
 - Meilenstein v0.3.0 abgeschlossen und getaggt; 45 Tests
+- Issues #017 bis #019 aus bisherigen Notizen angelegt (Favicons, Feldtest des Agents, CI-Pipeline)
+- #007 abgeschlossen: Host-Tabelle mit Suche, fünf Filtern, Sortierung, Seitenblättern und CSV-Export; Host-Detail mit sechs Tabs, Notizen, Tags, Kundenzuweisung und Token-Widerruf
+- Meilenstein v0.4.0 abgeschlossen und getaggt; 59 Tests
+- #020 abgeschlossen: Abgleichskript für den Gitea-Issue-Tracker (Missverständnis geklärt – die Issues lagen bisher nur als Dateien im Repo, nicht im Tracker)
+- Token kommt aus den Git-Zugangsdaten statt aus einer zweiten Stelle; 20 Issues, 15 Labels und 13 Meilensteine in Gitea angelegt
+- Alles nach Gitea gepusht: main bei 51243c2, Tags v0.1.0 bis v0.4.1
 
 ### Entscheidungen
 - **Screenshots mit Firefox headless** statt Playwright: Firefox ist vorhanden, es muss kein Browser samt Systembibliotheken nachinstalliert werden (dafür wäre root nötig).
@@ -67,4 +78,4 @@
 - Offen: Rolle „readonly“ zusätzlich zu Admin? (vorläufig vorgesehen)
 
 ### Nächster Schritt
-- #007 Host-Tabelle mit Filtern, globale Suche auf Datenbankbasis und Host-Detailansicht
+- #008 Laufzeiten und Rechnungen: Vorschläge bestätigen, Rechnungen erfassen, Häkchen direkt in der Tabelle

README.md

@@ -45,6 +45,24 @@ Protokoll: `journalctl -t proxledger`. Ist das Dashboard nicht erreichbar, versu
 wachsendem Abstand und legt den Report danach unter `/var/lib/proxledger/spool/` ab; beim nächsten Lauf wird er
 nachgesendet.
 
+## Issues nach Gitea übertragen
+
+Die Issues werden als Markdown-Dateien in `docs/issues/` gepflegt – sie liegen damit im Repo und wandern mit
+jedem Klon mit. Wer sie zusätzlich im Gitea-Tracker haben möchte, gleicht sie ab:
+
+```bash
+npm run issues:sync -- --dry-run    # zeigt nur, was passieren würde
+npm run issues:sync                 # echter Abgleich
+```
+
+Serveradresse und Repository liest das Skript aus dem Git-Remote, den Token aus den hinterlegten
+Git-Zugangsdaten (Schlüsselbund oder `~/.git-credentials`) – derselbe Token wie fürs Pushen, er braucht
+zusätzlich das Recht `issue:write`. Wer beides trennen möchte, setzt `GITEA_URL`, `GITEA_REPO` und
+`GITEA_TOKEN` in der `.env`.
+
+Der Abgleich legt Labels und Meilensteine an, erkennt vorhandene Issues an der Nummer im Titel,
+aktualisiert sie und schließt erledigte. Ein zweiter Lauf erzeugt keine Dubletten.
+
 ## Dokumentation
 
 - [Architektur- und Umsetzungsplan](docs/architektur.md)

docs/issues/007-hosts-detailansichten.md

@@ -1,25 +1,33 @@
 # #007 Host-Tabelle, Suche und Detailansichten
-**Status:** offen
+**Status:** erledigt
 **Meilenstein:** v0.4.0
 **Labels:** ui
-**Geschätzt:** 8 h   **Tatsächlich:** –
+**Geschätzt:** 8 h   **Tatsächlich:** 0 h 25 min
 
 ## Ziel
 Hosts finden, filtern und vollständig einsehen.
 
 ## Aufgaben
-- [ ] Host-Tabelle (serverseitig): Filter Kunde, Status, Produkt, Ablauf, Rechnungsstatus; Sortierung; Spaltenauswahl; Paginierung; CSV-Export
+- [x] Host-Tabelle (serverseitig): Filter Kunde, Status, Produkt, Ablauf, Rechnungsstatus; Sortierung; Spaltenauswahl; Paginierung; CSV-Export
-- [ ] Suche nach Key, Server-ID, Hostname, IP, Proxmox-Rechnungsnummer
+- [x] Suche nach Key, Server-ID, Hostname, IP, Proxmox-Rechnungsnummer
-- [ ] Globale Suche in der Kopfleiste und Sidebar, `Strg+K`
+- [x] Globale Suche in der Kopfleiste und Sidebar, `Strg+K`
-- [ ] Host-Detail: Profil-Card, Tabs Übersicht, Subscription-Historie, Reports, Rechnungen, Notizen; Tags
+- [x] Host-Detail: Profil-Card, Tabs Übersicht, Subscription-Historie, Reports, Rechnungen, Notizen; Tags
-- [ ] Kopier-Buttons für Key, Server-ID, Rechnungsnummer
+- [x] Kopier-Buttons für Key, Server-ID, Rechnungsnummer
-- [ ] Badge „Keine Meldung“
+- [x] Badge „Keine Meldung“
 
 ## Akzeptanzkriterien
-- [ ] Eingabe `pve1c-a6bd21fcb6` liefert direkt Host und Kunde
+- [x] Eingabe `pve1c-a6bd21fcb6` liefert direkt Host und Kunde
-- [ ] Filter bleiben in der URL erhalten (teilbar, Zurück-Button funktioniert)
+- [x] Filter bleiben in der URL erhalten (teilbar, Zurück-Button funktioniert)
 
 ## Abhängigkeiten
 #006
 
 ## Notizen / Entscheidungen
+- Filter, Sortierung und Seite stehen in der Adresse; eine gefilterte Liste ist damit teilbar und der
+  Zurück-Knopf funktioniert.
+- Sortierung stellt Hosts ohne Ablaufdatum bzw. ohne Meldung immer ans Ende (`nulls: "last"`), sonst stünden
+  sie beim absteigenden Sortieren ganz oben.
+- Die Suche findet auch über Proxmox- und Kundenrechnungsnummern zum Host.
+- Der CSV-Export übernimmt die aktiven Filter und liefert alle Treffer, nicht nur die angezeigte Seite.
+- **Zurückgestellt:** frei wählbare Spalten. Die Tabelle hat acht feste Spalten und passt damit auf einen
+  Bildschirm; eine Spaltenauswahl lohnt erst bei deutlich mehr Feldern. Bei Bedarf als eigenes Issue nachziehen.

docs/issues/017-favicon-dateien.md

@@ -0,0 +1,27 @@
+# #017 Favicon-Dateien erzeugen
+**Status:** offen
+**Meilenstein:** v0.6.0
+**Labels:** ui
+**Geschätzt:** 1 h   **Tatsächlich:** –
+
+## Ziel
+Das Monogramm liegt als React-Komponente vor. Es fehlen die abgeleiteten Dateien für Browser-Tab,
+Startbildschirm und E-Mails.
+
+## Aufgaben
+- [ ] `favicon.svg` (32-px-Variante mit einer Linie) unter `src/app/icon.svg`
+- [ ] `favicon.ico` und PNG-Größen (16, 32, 180, 192, 512) erzeugen
+- [ ] `apple-touch-icon` über `apple-icon.tsx` (ImageResponse) oder als PNG
+- [ ] Erzeugung als Skript (`npm run icons`) festhalten, damit Änderungen am Logo nachziehbar sind
+- [ ] Einfarbige Variante für PDF-Export und Rechnungen bereitstellen
+
+## Akzeptanzkriterien
+- [ ] Browser-Tab zeigt das Monogramm in Hell und Dunkel
+- [ ] Beim Ablegen auf dem iOS-Startbildschirm erscheint das Logo ohne weißen Rand
+
+## Abhängigkeiten
+#002
+
+## Notizen / Entscheidungen
+- Auf dem Entwicklungsrechner ist kein SVG-Konverter installiert (kein rsvg-convert, kein ImageMagick).
+  Entweder `sharp` als Entwicklungsabhängigkeit aufnehmen oder Next.js `ImageResponse` nutzen.

docs/issues/018-agent-feldtest.md

@@ -0,0 +1,29 @@
+# #018 Agent auf echten Proxmox-Hosts prüfen
+**Status:** offen
+**Meilenstein:** v0.2.1
+**Labels:** agent, test
+**Geschätzt:** 2 h   **Tatsächlich:** –
+
+## Ziel
+Der Agent ist bisher nur gegen nachgebaute Proxmox-Befehle getestet. Vor dem produktiven Einsatz muss er
+auf echten Hosts laufen.
+
+## Aufgaben
+- [ ] Installation auf Proxmox VE (8.x und 9.x)
+- [ ] Installation auf Proxmox Backup Server
+- [ ] Installation auf Proxmox Mail Gateway
+- [ ] Ausgabeformate von `pvesubscription get`, `proxmox-backup-manager subscription get` und
+      `pmgsubscription get` mit den Annahmen im Skript abgleichen
+- [ ] Verhalten ohne Subscription und mit abgelaufener Subscription prüfen
+- [ ] Timer-Lauf, Spool-Nachsendung und Uninstall auf einem echten Host prüfen
+- [ ] Abweichungen als Testfälle in `tests/agent-skript.test.ts` übernehmen
+
+## Akzeptanzkriterien
+- [ ] Auf allen drei Produkten läuft die Installation ohne Nacharbeit durch
+- [ ] Die gemeldeten Felder stimmen mit der Ausgabe der Proxmox-Befehle überein
+
+## Abhängigkeiten
+#005
+
+## Notizen / Entscheidungen
+- Braucht Zugriff auf einen Testhost; bis dahin bleibt dieser Punkt offen.

docs/issues/019-ci-pipeline.md

@@ -0,0 +1,25 @@
+# #019 CI-Pipeline
+**Status:** offen
+**Meilenstein:** v0.10.0
+**Labels:** infrastruktur
+**Geschätzt:** 3 h   **Tatsächlich:** –
+
+## Ziel
+Automatische Prüfung jedes Commits, damit Fehler nicht erst beim Release auffallen.
+
+## Aufgaben
+- [ ] Gitea Actions (oder Woodpecker) einrichten
+- [ ] Schritte: `npm ci`, `prisma generate`, Lint, Typecheck, Tests gegen eine PostgreSQL-Dienstinstanz, Build
+- [ ] ShellCheck für `agent/*.sh`
+- [ ] Prüfung, dass `docs/issues/README.md` und `DEVLOG.md` zur Version in `package.json` passen
+- [ ] Ergebnis als Kennzeichen im README
+
+## Akzeptanzkriterien
+- [ ] Ein fehlschlagender Test verhindert den Merge nach `main`
+- [ ] Der Durchlauf dauert unter fünf Minuten
+
+## Abhängigkeiten
+#014
+
+## Notizen / Entscheidungen
+- ShellCheck ist auf dem Entwicklungsrechner nicht installiert; bisher wird nur `bash -n` geprüft.

docs/issues/020-gitea-issue-abgleich.md

@@ -0,0 +1,35 @@
+# #020 Issues nach Gitea übertragen
+**Status:** erledigt
+**Meilenstein:** v0.4.1
+**Labels:** infrastruktur, docs
+**Geschätzt:** 2 h   **Tatsächlich:** 0 h 10 min
+
+## Ziel
+Die Issue-Dateien aus `docs/issues/` sollen als echte Issues im Gitea-Tracker erscheinen und dort
+aktuell bleiben – ohne dass sie von Hand nachgepflegt werden müssen.
+
+## Aufgaben
+- [x] Skript `scripts/gitea-issues.ts`, das die Dateien liest und über die Gitea-API abgleicht
+- [x] Meilensteine anlegen (v0.1.0 bis v1.0.0), Labels anlegen (agent, backend, ui, docs …)
+- [x] Issues anlegen; vorhandene anhand der Nummer im Titel wiedererkennen und aktualisieren
+- [x] Erledigte Issues in Gitea schließen, wieder geöffnete erneut öffnen
+- [x] Trockenlauf ohne Token (`--dry-run`) zur Kontrolle vor dem ersten echten Lauf
+- [x] npm-Skript `issues:sync` und Beschreibung im README
+
+## Akzeptanzkriterien
+- [x] Ein Lauf legt alle 20 Issues mit Titel, Text, Label und Meilenstein in Gitea an
+- [x] Ein zweiter Lauf ändert nichts Unnötiges (keine Dubletten)
+- [x] Der Token steht nur in der Umgebung, nie im Repository
+
+## Abhängigkeiten
+#001
+
+## Notizen / Entscheidungen
+- Die Markdown-Dateien bleiben die Quelle der Wahrheit: Sie liegen im Repo, sind ohne Netz lesbar und
+  wandern mit jedem Klon mit. Gitea bekommt eine Kopie zum Kommentieren und Zuweisen.
+- Der Token kommt aus den Git-Zugangsdaten (`git credential fill`), Adresse und Repo aus dem Remote.
+  Damit muss derselbe Token nicht zweimal gepflegt werden.
+- Gefragt werden zuerst die eingerichteten Helfer (Schlüsselbund), danach zusätzlich `~/.git-credentials` –
+  je nach Rechner ist mal das eine, mal das andere gefüllt.
+- Erster echter Lauf am 17.09.2026: 20 Issues, 15 Labels und 13 Meilensteine angelegt, erledigte Issues
+  direkt geschlossen. Zweiter Lauf: 0 neue, 20 aktualisiert – keine Dubletten.

docs/issues/README.md

@@ -10,8 +10,8 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
 | [#004](004-agent-api.md) | Agent-API | erledigt | v0.1.0 | 6 h | 0 h 20 min |
 | [#005](005-agent-skript.md) | Agent-Skript | erledigt | v0.2.0 | 8 h | 0 h 25 min |
 | [#006](006-kunden-hostzuweisung.md) | Kunden, Standorte und Hostzuweisung | erledigt | v0.3.0 | 6 h | 0 h 35 min |
-| [#007](007-hosts-detailansichten.md) | Host-Tabelle, Suche und Detailansichten | in Arbeit | v0.4.0 | 8 h | – |
+| [#007](007-hosts-detailansichten.md) | Host-Tabelle, Suche und Detailansichten | erledigt | v0.4.0 | 8 h | 0 h 25 min |
-| [#008](008-laufzeiten-rechnungen.md) | Laufzeiten und Rechnungen | offen | v0.5.0 | 10 h | – |
+| [#008](008-laufzeiten-rechnungen.md) | Laufzeiten und Rechnungen | in Arbeit | v0.5.0 | 10 h | – |
 | [#009](009-kundenuebersicht-dashboard-jahresbahn.md) | Kundenübersicht, Dashboard und Jahresbahn | offen | v0.6.0 | 8 h | – |
 | [#010](010-export.md) | Export CSV und PDF | offen | v0.6.0 | 5 h | – |
 | [#011](011-warnregeln.md) | Warnregeln | offen | v0.7.0 | 8 h | – |
@@ -20,4 +20,8 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
 | [#014](014-deployment.md) | Deployment und Dokumentation | offen | v0.10.0 | 8 h | – |
 | [#015](015-feinschliff-v1.md) | Feinschliff für 1.0 | offen | v1.0.0 | 6 h | – |
 | [#016](016-anleitung-screenshots.md) | Benutzerhandbuch mit Screenshots | offen | v0.10.0 | 5 h | – |
-| | **Summe** | | | **106 h** | **2 h 13 min** |
+| [#017](017-favicon-dateien.md) | Favicon-Dateien erzeugen | offen | v0.6.0 | 1 h | – |
+| [#018](018-agent-feldtest.md) | Agent auf echten Proxmox-Hosts prüfen | offen | v0.2.1 | 2 h | – |
+| [#019](019-ci-pipeline.md) | CI-Pipeline | offen | v0.10.0 | 3 h | – |
+| [#020](020-gitea-issue-abgleich.md) | Issues nach Gitea übertragen | erledigt | v0.4.1 | 2 h | 0 h 10 min |
+| | **Summe** | | | **114 h** | **2 h 48 min** |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "proxledger",
-  "version": "0.3.0",
+  "version": "0.4.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -17,7 +17,8 @@
     "db:seed": "prisma db seed",
     "db:studio": "prisma studio",
     "db:generate": "prisma generate",
-    "postinstall": "prisma generate"
+    "postinstall": "prisma generate",
+    "issues:sync": "tsx scripts/gitea-issues.ts"
   },
   "dependencies": {
     "@node-rs/argon2": "^2.2.1",

scripts/gitea-issues.ts

@@ -0,0 +1,280 @@
+/**
+ * Überträgt die Issue-Dateien aus `docs/issues/` in den Gitea-Issue-Tracker.
+ *
+ *   GITEA_URL=https://git.wilde-server.de \
+ *   GITEA_REPO=florian.wilde/ProxLedger \
+ *   GITEA_TOKEN=... \
+ *   npm run issues:sync
+ *
+ * Ohne Token oder mit `--dry-run` läuft nur ein Trockenlauf: Es wird ausgegeben, was passieren würde.
+ * Die Markdown-Dateien bleiben die Quelle der Wahrheit; Gitea erhält eine Kopie zum Kommentieren.
+ */
+
+import { execFileSync } from "node:child_process";
+import { readFile, readdir } from "node:fs/promises";
+import "dotenv/config";
+import path from "node:path";
+
+interface IssueDatei {
+  nummer: number;
+  titel: string;
+  status: string;
+  meilenstein: string | null;
+  labels: string[];
+  koerper: string;
+  dateiname: string;
+}
+
+const LABEL_FARBEN: Record<string, string> = {
+  agent: "#1e7e34",
+  backend: "#007bff",
+  api: "#6f42c1",
+  ui: "#17a2b8",
+  datenbank: "#20c997",
+  sicherheit: "#c82333",
+  docs: "#6c757d",
+  deployment: "#fd7e14",
+  infrastruktur: "#495057",
+  alerts: "#ffc107",
+  buchhaltung: "#e83e8c",
+  export: "#0dcaf0",
+  prototyp: "#adb5bd",
+  test: "#198754",
+  chore: "#868e96",
+};
+
+function feld(inhalt: string, name: string): string | null {
+  const treffer = new RegExp(`^\\*\\*${name}:\\*\\*\\s*(.+)$`, "m").exec(inhalt);
+  return treffer ? treffer[1].trim() : null;
+}
+
+async function dateienLesen(verzeichnis: string): Promise<IssueDatei[]> {
+  const namen = (await readdir(verzeichnis)).filter((name) => /^\d{3}-.*\.md$/.test(name)).sort();
+
+  const issues: IssueDatei[] = [];
+  for (const dateiname of namen) {
+    const inhalt = await readFile(path.join(verzeichnis, dateiname), "utf8");
+    const kopf = /^#\s*#(\d+)\s+(.+)$/m.exec(inhalt);
+    if (!kopf) {
+      console.warn(`Übersprungen (keine Überschrift „# #NNN Titel“): ${dateiname}`);
+      continue;
+    }
+
+    // Der Körper beginnt nach den Kopfzeilen (Status, Meilenstein, Labels, Zeiten).
+    const körperStart = inhalt.indexOf("## Ziel");
+    issues.push({
+      nummer: Number(kopf[1]),
+      titel: kopf[2].trim(),
+      status: feld(inhalt, "Status") ?? "offen",
+      meilenstein: feld(inhalt, "Meilenstein"),
+      labels: (feld(inhalt, "Labels") ?? "")
+        .split(",")
+        .map((label) => label.trim().toLowerCase())
+        .filter(Boolean),
+      koerper: körperStart >= 0 ? inhalt.slice(körperStart).trim() : inhalt,
+      dateiname,
+    });
+  }
+  return issues;
+}
+
+class Gitea {
+  constructor(
+    private readonly basis: string,
+    private readonly repo: string,
+    private readonly token: string,
+  ) {}
+
+  private async anfrage<T>(pfad: string, optionen: RequestInit = {}): Promise<T> {
+    const antwort = await fetch(`${this.basis}/api/v1/repos/${this.repo}${pfad}`, {
+      ...optionen,
+      headers: {
+        Authorization: `token ${this.token}`,
+        "Content-Type": "application/json",
+        ...optionen.headers,
+      },
+    });
+
+    if (!antwort.ok) {
+      throw new Error(`Gitea antwortet mit ${antwort.status} auf ${pfad}: ${await antwort.text()}`);
+    }
+    return (await antwort.json()) as T;
+  }
+
+  labels() {
+    return this.anfrage<{ id: number; name: string }[]>("/labels?limit=100");
+  }
+
+  labelAnlegen(name: string) {
+    return this.anfrage<{ id: number; name: string }>("/labels", {
+      method: "POST",
+      body: JSON.stringify({ name, color: LABEL_FARBEN[name] ?? "#6c757d" }),
+    });
+  }
+
+  meilensteine() {
+    return this.anfrage<{ id: number; title: string }[]>("/milestones?state=all&limit=100");
+  }
+
+  meilensteinAnlegen(title: string) {
+    return this.anfrage<{ id: number; title: string }>("/milestones", {
+      method: "POST",
+      body: JSON.stringify({ title }),
+    });
+  }
+
+  issues() {
+    return this.anfrage<{ number: number; title: string; state: string }[]>("/issues?state=all&limit=200");
+  }
+
+  issueAnlegen(daten: Record<string, unknown>) {
+    return this.anfrage<{ number: number }>("/issues", { method: "POST", body: JSON.stringify(daten) });
+  }
+
+  issueAendern(nummer: number, daten: Record<string, unknown>) {
+    return this.anfrage<{ number: number }>(`/issues/${nummer}`, {
+      method: "PATCH",
+      body: JSON.stringify(daten),
+    });
+  }
+}
+
+/**
+ * Ermittelt Serveradresse und Repo aus dem Git-Remote, damit beides nicht doppelt gepflegt werden muss.
+ * Beispiel: https://git.example.de/benutzer/ProxLedger.git → { basis, repo }
+ */
+function ausRemote(): { basis: string; repo: string } | null {
+  try {
+    const url = execFileSync("git", ["remote", "get-url", "origin"], { encoding: "utf8" }).trim();
+    const treffer = /^https?:\/\/(?:[^@/]*@)?([^/]+)\/(.+?)(?:\.git)?$/.exec(url);
+    if (!treffer) return null;
+    return { basis: `https://${treffer[1]}`, repo: treffer[2] };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Holt den Token aus den Git-Zugangsdaten (Schlüsselbund oder `~/.git-credentials`).
+ * So genügt ein einziger Token für Push und API – er muss nicht zusätzlich in der .env stehen.
+ */
+function tokenAusGitCredentials(basis: string): string | null {
+  const host = new URL(basis).host;
+
+  // Erst die eingerichteten Helfer (z. B. Schlüsselbund), dann zusätzlich die Datei
+  // ~/.git-credentials – je nach Rechner ist mal das eine, mal das andere gefüllt.
+  for (const zusatz of [[], ["-c", "credential.helper=store"]]) {
+    try {
+      const antwort = execFileSync("git", [...zusatz, "credential", "fill"], {
+        input: `protocol=https\nhost=${host}\n\n`,
+        encoding: "utf8",
+        // Keine Rückfrage im Terminal: Wenn nichts hinterlegt ist, soll der Aufruf scheitern.
+        env: { ...process.env, GIT_TERMINAL_PROMPT: "0" },
+        stdio: ["pipe", "pipe", "ignore"],
+      });
+      const passwort = /^password=(.*)$/m.exec(antwort);
+      if (passwort?.[1]) return passwort[1];
+    } catch {
+      // Nächste Möglichkeit versuchen.
+    }
+  }
+
+  return null;
+}
+
+/** Titel in Gitea, z. B. „#004 Agent-Skript“ – daran werden vorhandene Issues wiedererkannt. */
+function giteaTitel(issue: IssueDatei): string {
+  return `#${String(issue.nummer).padStart(3, "0")} ${issue.titel}`;
+}
+
+async function main() {
+  const trockenlauf = process.argv.includes("--dry-run");
+  const remote = ausRemote();
+  const basis = (process.env.GITEA_URL ?? remote?.basis ?? "").replace(/\/$/, "");
+  const repo = process.env.GITEA_REPO ?? remote?.repo ?? "";
+  const token = process.env.GITEA_TOKEN || (basis ? (tokenAusGitCredentials(basis) ?? "") : "");
+  const tokenQuelle = process.env.GITEA_TOKEN ? "Umgebungsvariable" : "Git-Zugangsdaten";
+
+  const verzeichnis = path.join(process.cwd(), "docs", "issues");
+  const issues = await dateienLesen(verzeichnis);
+  console.log(`${issues.length} Issue-Dateien gelesen.`);
+
+  if (trockenlauf || !basis || !repo || !token) {
+    if (!trockenlauf) {
+      console.log(
+        "\nAdresse, Repo oder Token nicht ermittelbar – es läuft nur ein Trockenlauf.\n" +
+          "Entweder GITEA_TOKEN setzen oder einmal `git push` ausführen, damit der Token hinterlegt wird.\n",
+      );
+    }
+    for (const issue of issues) {
+      console.log(
+        `  ${giteaTitel(issue)}  [${issue.status}]  Meilenstein ${issue.meilenstein ?? "–"}  Labels: ${
+          issue.labels.join(", ") || "–"
+        }`,
+      );
+    }
+    console.log(
+      `\nZiel wäre: ${basis || "?"}/${repo || "?"} – Token ${token ? "vorhanden" : "fehlt"}.` +
+        "\nDer Token wird aus den Git-Zugangsdaten gelesen; er braucht zusätzlich das Recht „issue:write“.",
+    );
+    return;
+  }
+
+  console.log(`Ziel: ${basis}/${repo} (Token aus: ${tokenQuelle})`);
+  const gitea = new Gitea(basis, repo, token);
+
+  const vorhandeneLabels = new Map((await gitea.labels()).map((l) => [l.name.toLowerCase(), l.id]));
+  const benoetigteLabels = [...new Set(issues.flatMap((issue) => issue.labels))];
+  for (const name of benoetigteLabels) {
+    if (!vorhandeneLabels.has(name)) {
+      const neu = await gitea.labelAnlegen(name);
+      vorhandeneLabels.set(name, neu.id);
+      console.log(`Label angelegt: ${name}`);
+    }
+  }
+
+  const vorhandeneMeilensteine = new Map((await gitea.meilensteine()).map((m) => [m.title, m.id]));
+  const benoetigteMeilensteine = [
+    ...new Set(issues.map((issue) => issue.meilenstein).filter((m): m is string => Boolean(m))),
+  ].sort();
+  for (const titel of benoetigteMeilensteine) {
+    if (!vorhandeneMeilensteine.has(titel)) {
+      const neu = await gitea.meilensteinAnlegen(titel);
+      vorhandeneMeilensteine.set(titel, neu.id);
+      console.log(`Meilenstein angelegt: ${titel}`);
+    }
+  }
+
+  const vorhandeneIssues = new Map((await gitea.issues()).map((i) => [i.title, i]));
+
+  for (const issue of issues) {
+    const titel = giteaTitel(issue);
+    const daten = {
+      title: titel,
+      body: `${issue.koerper}\n\n---\nQuelle: \`docs/issues/${issue.dateiname}\` – dort wird dieses Issue gepflegt.`,
+      labels: issue.labels
+        .map((name) => vorhandeneLabels.get(name))
+        .filter((id): id is number => Boolean(id)),
+      milestone: issue.meilenstein ? vorhandeneMeilensteine.get(issue.meilenstein) : undefined,
+    };
+
+    const vorhanden = vorhandeneIssues.get(titel);
+    const zustand = issue.status.startsWith("erledigt") ? "closed" : "open";
+
+    if (vorhanden) {
+      await gitea.issueAendern(vorhanden.number, { ...daten, state: zustand });
+      console.log(`Aktualisiert: ${titel} (${zustand})`);
+    } else {
+      const neu = await gitea.issueAnlegen(daten);
+      if (zustand === "closed") await gitea.issueAendern(neu.number, { state: "closed" });
+      console.log(`Angelegt: ${titel} (${zustand})`);
+    }
+  }
+
+  console.log("\nAbgleich abgeschlossen.");
+}
+
+main().catch((fehler) => {
+  console.error(fehler instanceof Error ? fehler.message : fehler);
+  process.exit(1);
+});

src/app/(dashboard)/hosts/[id]/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import { HostNotizen } from "@/components/hosts/HostNotizen";
 import { ContentHeader } from "@/components/layout/ContentHeader";
 import {
   AblaufBadge,
@@ -12,21 +13,18 @@ import {
 import { Card } from "@/components/ui/Card";
 import { CopyableCode } from "@/components/ui/CopyableCode";
 import { Tabs } from "@/components/ui/Tabs";
+import { PRODUKT_TEXT } from "@/lib/anzeige";
+import { prisma } from "@/lib/db";
 import { formatDatum, formatDatumZeit, formatEuro, formatUptime, formatZahl } from "@/lib/format";
-import { HEUTE } from "@/mock/data";
+import { hostKundeSetzen } from "@/server/actions/host-detail";
-import {
+import { hostTokenWiderrufen } from "@/server/actions/tokens";
-  PRODUKT_NAME,
+import { hostMitDetails } from "@/server/queries/hostliste";
-  alertsVonHost,
+import { meldungsGrenze } from "@/server/queries/hosts";
-  getHost,
-  getKunde,
-  hostMeldetNicht,
-  laufzeitenVonHost,
-  reportsVonHost,
-} from "@/mock/queries";
 
 export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  return { title: getHost(id)?.hostname ?? "Host" };
+  const host = await prisma.host.findUnique({ where: { id }, select: { hostname: true } });
+  return { title: host?.hostname ?? "Host" };
 }
 
 function Zeile({ bezeichnung, children }: { bezeichnung: string; children: React.ReactNode }) {
@@ -40,51 +38,52 @@ function Zeile({ bezeichnung, children }: { bezeichnung: string; children: React
 
 export default async function HostDetailSeite({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
-  const host = getHost(id);
+  const host = await hostMitDetails(id);
   if (!host) notFound();
 
-  const kunde = getKunde(host.kundeId);
+  const kunden = await prisma.kunde.findMany({
-  const standort = kunde?.standorte.find((s) => s.id === host.standortId);
+    orderBy: { name: "asc" },
-  const laufzeiten = laufzeitenVonHost(host.id);
+    select: { id: true, name: true },
-  const reports = reportsVonHost(host.id);
+  });
-  const alerts = alertsVonHost(host.id);
+
-  const keys = [...new Set(laufzeiten.map((l) => l.key))];
+  const jetzt = new Date();
+  const meldetNicht = !host.letzterReportAm || host.letzterReportAm < meldungsGrenze(jetzt);
+  const socketAbweichung =
+    host.subLizenzierteSockets !== null &&
+    host.sockets !== null &&
+    host.subLizenzierteSockets !== host.sockets;
 
   return (
     <>
       <ContentHeader
         titel={host.hostname}
         brotkrumen={[{ titel: "Hosts", href: "/hosts" }, { titel: host.hostname }]}
-        aktion={<StatusBadge status={host.subscription.status} />}
+        aktion={<StatusBadge status={host.subStatus} />}
       />
 
       <div className="app-content">
         <div className="container-fluid">
-          {alerts.length > 0 ? (
+          {host.alerts.length > 0 ? (
-            <div className="row">
+            <Card titel={`Offene Warnungen (${host.alerts.length})`} rahmen="danger">
-              <div className="col-12">
+              <ul className="list-unstyled mb-0">
-                <Card titel="Offene Warnungen" rahmen="danger">
+                {host.alerts.map((alert) => (
-                  <ul className="list-unstyled mb-0">
+                  <li key={alert.id} className="mb-2">
-                    {alerts.map((alert) => (
+                    <Badge
-                      <li key={alert.id} className="mb-2">
+                      farbe={
-                        <Badge
+                        alert.schwere === "GEFAHR"
-                          farbe={
+                          ? "danger"
-                            alert.schwere === "gefahr"
+                          : alert.schwere === "WARNUNG"
-                              ? "danger"
+                            ? "warning"
-                              : alert.schwere === "warnung"
+                            : "info"
-                                ? "warning"
+                      }
-                                : "info"
+                    >
-                          }
+                      {alert.titel}
-                        >
+                    </Badge>{" "}
-                          {alert.titel}
+                    <span className="small text-body-secondary">{alert.beschreibung}</span>
-                        </Badge>{" "}
+                  </li>
-                        <span className="small text-body-secondary">{alert.beschreibung}</span>
+                ))}
-                      </li>
+              </ul>
-                    ))}
+            </Card>
-                  </ul>
-                </Card>
-              </div>
-            </div>
           ) : null}
 
           <div className="row">
@@ -94,40 +93,69 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                   <i className="bi bi-hdd-rack fs-1 text-body-secondary" aria-hidden="true" />
                   <h2 className="h5 mt-2 mb-1">{host.hostname}</h2>
                   <div className="text-body-secondary small">{host.fqdn ?? "Kein FQDN gemeldet"}</div>
-                  {hostMeldetNicht(host) ? <KeineMeldungBadge /> : null}
+                  {meldetNicht ? <KeineMeldungBadge /> : null}
                 </div>
 
                 <Zeile bezeichnung="Kunde">
-                  {kunde ? (
+                  {host.kunde ? (
-                    <Link href={`/kunden/${kunde.id}`}>{kunde.name}</Link>
+                    <Link href={`/kunden/${host.kunde.id}`}>{host.kunde.name}</Link>
                   ) : (
-                    <Link href="/hosts/nicht-zugeordnet" className="badge pl-bg-neutral text-decoration-none">
+                    <span className="badge pl-bg-neutral">Nicht zugeordnet</span>
-                      Nicht zugeordnet
-                    </Link>
                   )}
                 </Zeile>
-                <Zeile bezeichnung="Standort">{standort?.name ?? "–"}</Zeile>
+                <Zeile bezeichnung="Standort">{host.standort?.name ?? "–"}</Zeile>
-                <Zeile bezeichnung="Produkt">{PRODUKT_NAME[host.produkt]}</Zeile>
+                <Zeile bezeichnung="Produkt">{PRODUKT_TEXT[host.produkt]}</Zeile>
                 <Zeile bezeichnung="Version">{host.produktVersion ?? "–"}</Zeile>
                 <Zeile bezeichnung="Kernel">{host.kernel ?? "–"}</Zeile>
                 <Zeile bezeichnung="Server-ID">
                   <CopyableCode wert={host.serverId} />
                 </Zeile>
                 <Zeile bezeichnung="Cluster / Node">
-                  {host.clusterName ? `${host.clusterName} / ${host.nodeName}` : "–"}
+                  {host.clusterName ? `${host.clusterName} / ${host.nodeName ?? "?"}` : "–"}
                 </Zeile>
-                <Zeile bezeichnung="IP-Adressen">{host.ips.join(", ")}</Zeile>
+                <Zeile bezeichnung="IP-Adressen">{host.ips.join(", ") || "–"}</Zeile>
                 <Zeile bezeichnung="CPU">{host.cpuModell ?? "–"}</Zeile>
                 <Zeile bezeichnung="Sockets (lizenziert / physisch)">
-                  {host.subscription.lizenzierteSockets ?? "–"} / {host.sockets ?? "–"}
+                  {host.subLizenzierteSockets ?? "–"} / {host.sockets ?? "–"}
+                  {socketAbweichung ? (
+                    <i
+                      className="bi bi-exclamation-triangle-fill pl-text-warning ms-2"
+                      title="Lizenzierte und physische Sockets weichen ab"
+                    />
+                  ) : null}
+                </Zeile>
+                <Zeile bezeichnung="Uptime">
+                  {formatUptime(host.uptimeSekunden === null ? null : Number(host.uptimeSekunden))}
                 </Zeile>
-                <Zeile bezeichnung="Uptime">{formatUptime(host.uptimeSekunden)}</Zeile>
                 <Zeile bezeichnung="Paket-Updates">{formatZahl(host.paketUpdates)}</Zeile>
-                <Zeile bezeichnung="Agent-Version">{host.agentVersion}</Zeile>
+                <Zeile bezeichnung="Agent-Version">{host.agentVersion ?? "–"}</Zeile>
-                <Zeile bezeichnung="Letzte Meldung">{formatDatumZeit(host.letzterReport)}</Zeile>
+                <Zeile bezeichnung="Erstmals gesehen">{formatDatum(host.erstmalsGesehenAm)}</Zeile>
-                <div className="d-grid gap-2 mt-3">
+                <Zeile bezeichnung="Letzte Meldung">{formatDatumZeit(host.letzterReportAm)}</Zeile>
-                  <span className="btn btn-outline-secondary disabled">Kunde ändern (ab #006)</span>
+
-                </div>
+                <form action={hostKundeSetzen} className="mt-3">
+                  <input type="hidden" name="hostId" value={host.id} />
+                  <label className="form-label small" htmlFor="kundeId">
+                    Kunde ändern
+                  </label>
+                  <div className="input-group input-group-sm">
+                    <select
+                      id="kundeId"
+                      name="kundeId"
+                      className="form-select"
+                      defaultValue={host.kundeId ?? ""}
+                    >
+                      <option value="">– nicht zugeordnet –</option>
+                      {kunden.map((kunde) => (
+                        <option key={kunde.id} value={kunde.id}>
+                          {kunde.name}
+                        </option>
+                      ))}
+                    </select>
+                    <button type="submit" className="btn btn-outline-primary">
+                      Setzen
+                    </button>
+                  </div>
+                </form>
               </Card>
             </div>
 
@@ -141,93 +169,150 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                     inhalt: (
                       <>
                         <Zeile bezeichnung="Subscription-Key">
-                          <CopyableCode wert={host.subscription.key} />
+                          <CopyableCode wert={host.subKey} />
                         </Zeile>
                         <Zeile bezeichnung="Status">
-                          <StatusBadge status={host.subscription.status} />
+                          <StatusBadge status={host.subStatus} />
                         </Zeile>
-                        <Zeile bezeichnung="Produktname">{host.subscription.produktname ?? "–"}</Zeile>
+                        <Zeile bezeichnung="Produktname">{host.subProduktname ?? "–"}</Zeile>
-                        <Zeile bezeichnung="Level">{host.subscription.level ?? "–"}</Zeile>
+                        <Zeile bezeichnung="Level">{host.subLevel ?? "–"}</Zeile>
-                        <Zeile bezeichnung="Registriert am">{formatDatum(host.subscription.regdate)}</Zeile>
+                        <Zeile bezeichnung="Registriert am">{formatDatum(host.subRegdate)}</Zeile>
                         <Zeile bezeichnung="Läuft ab am">
-                          <AblaufBadge datum={host.subscription.nextduedate} heute={HEUTE} />
+                          <AblaufBadge datum={host.subNextduedate?.toISOString() ?? null} heute={jetzt} />
                         </Zeile>
                         <Zeile bezeichnung="Letzte Prüfung durch Proxmox">
-                          {formatDatumZeit(host.subscription.checktime)}
+                          {formatDatumZeit(host.subChecktime)}
                         </Zeile>
                         <div className="mt-3">
-                          {host.tags.map((tag) => (
+                          {host.tags.length === 0 ? (
-                            <span key={tag} className="badge pl-bg-neutral me-1">
+                            <span className="text-body-secondary small">Keine Tags</span>
-                              {tag}
+                          ) : (
-                            </span>
+                            host.tags.map((tag) => (
-                          ))}
+                              <span key={tag.id} className="badge pl-bg-neutral me-1">
+                                {tag.name}
+                              </span>
+                            ))
+                          )}
                         </div>
                       </>
                     ),
                   },
                   {
-                    id: "keys",
+                    id: "historie",
                     titel: "Subscription-Historie",
                     icon: "bi-key",
                     inhalt: (
-                      <table className="table table-striped align-middle mb-0">
+                      <>
-                        <thead>
+                        <h3 className="h6">Keys</h3>
-                          <tr>
+                        <table className="table table-striped align-middle mb-4">
-                            <th scope="col">Key</th>
+                          <thead>
-                            <th scope="col">Erste Laufzeit</th>
+                            <tr>
-                            <th scope="col">Letzte Laufzeit</th>
+                              <th scope="col">Key</th>
-                          </tr>
+                              <th scope="col">Erstmals gemeldet</th>
-                        </thead>
+                              <th scope="col">Zuletzt gemeldet</th>
-                        <tbody>
+                            </tr>
-                          {keys.map((key) => {
+                          </thead>
-                            const zugehoerig = laufzeiten.filter((l) => l.key === key);
+                          <tbody>
-                            return (
+                            {host.keyHistorie.map((eintrag) => (
-                              <tr key={key}>
+                              <tr key={eintrag.id}>
                                 <td>
-                                  <CopyableCode wert={key} />
+                                  <CopyableCode wert={eintrag.key} />
                                 </td>
-                                <td>{formatDatum(zugehoerig[zugehoerig.length - 1]?.start)}</td>
+                                <td>{formatDatum(eintrag.ersteMeldung)}</td>
-                                <td>{formatDatum(zugehoerig[0]?.ende)}</td>
+                                <td>{formatDatum(eintrag.letzteMeldung)}</td>
                               </tr>
-                            );
+                            ))}
-                          })}
+                            {host.keyHistorie.length === 0 ? (
-                        </tbody>
+                              <tr>
-                      </table>
+                                <td colSpan={3} className="text-body-secondary">
+                                  Noch kein Key gemeldet.
+                                </td>
+                              </tr>
+                            ) : null}
+                          </tbody>
+                        </table>
+
+                        <h3 className="h6">Server-IDs</h3>
+                        <table className="table table-striped align-middle mb-0">
+                          <thead>
+                            <tr>
+                              <th scope="col">Server-ID</th>
+                              <th scope="col">Erstmals gemeldet</th>
+                              <th scope="col">Zuletzt gemeldet</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {host.serverIdHistorie.map((eintrag) => (
+                              <tr key={eintrag.id}>
+                                <td>
+                                  <CopyableCode wert={eintrag.serverId} />
+                                </td>
+                                <td>{formatDatum(eintrag.ersteMeldung)}</td>
+                                <td>{formatDatum(eintrag.letzteMeldung)}</td>
+                              </tr>
+                            ))}
+                            {host.serverIdHistorie.length === 0 ? (
+                              <tr>
+                                <td colSpan={3} className="text-body-secondary">
+                                  Noch keine Server-ID gemeldet.
+                                </td>
+                              </tr>
+                            ) : null}
+                          </tbody>
+                        </table>
+                        {host.serverIdHistorie.length > 1 ? (
+                          <p className="small pl-text-warning mt-2 mb-0">
+                            Mehrere Server-IDs bedeuten Hardwaretausch oder Neuinstallation – der Key muss
+                            dann bei Proxmox neu zugewiesen werden.
+                          </p>
+                        ) : null}
+                      </>
                     ),
                   },
                   {
                     id: "reports",
-                    titel: "Reports",
+                    titel: `Reports (${host.reports.length})`,
                     icon: "bi-clock-history",
                     inhalt: (
-                      <table className="table table-striped align-middle mb-0">
+                      <div className="table-responsive">
-                        <thead>
+                        <table className="table table-striped align-middle mb-0">
-                          <tr>
+                          <thead>
-                            <th scope="col">Zeitpunkt</th>
+                            <tr>
-                            <th scope="col">Status</th>
+                              <th scope="col">Erhoben</th>
-                            <th scope="col">Key</th>
+                              <th scope="col">Empfangen</th>
-                            <th scope="col">Ablauf</th>
+                              <th scope="col">Status</th>
-                            <th scope="col">Updates</th>
+                              <th scope="col">Key</th>
-                            <th scope="col">Agent</th>
+                              <th scope="col">Ablauf</th>
-                          </tr>
+                              <th scope="col">Updates</th>
-                        </thead>
+                              <th scope="col">Agent</th>
-                        <tbody>
-                          {reports.map((report) => (
-                            <tr key={report.id}>
-                              <td>{formatDatumZeit(report.zeitpunkt)}</td>
-                              <td>
-                                <StatusBadge status={report.status} />
-                              </td>
-                              <td>
-                                <span className="pl-mono">{report.key ?? "–"}</span>
-                              </td>
-                              <td>{formatDatum(report.nextduedate)}</td>
-                              <td>{formatZahl(report.paketUpdates)}</td>
-                              <td>{report.agentVersion}</td>
                             </tr>
-                          ))}
+                          </thead>
-                        </tbody>
+                          <tbody>
-                      </table>
+                            {host.reports.map((report) => (
+                              <tr key={report.id}>
+                                <td>{formatDatumZeit(report.erhobenAm)}</td>
+                                <td className="small text-body-secondary">
+                                  {formatDatumZeit(report.empfangenAm)}
+                                </td>
+                                <td>
+                                  <StatusBadge status={report.subStatus} />
+                                </td>
+                                <td className="pl-mono">{report.subKey ?? "–"}</td>
+                                <td>{formatDatum(report.subNextduedate)}</td>
+                                <td>{formatZahl(report.paketUpdates)}</td>
+                                <td>{report.agentVersion ?? "–"}</td>
+                              </tr>
+                            ))}
+                            {host.reports.length === 0 ? (
+                              <tr>
+                                <td colSpan={7} className="text-body-secondary">
+                                  Noch kein Report eingegangen.
+                                </td>
+                              </tr>
+                            ) : null}
+                          </tbody>
+                        </table>
+                      </div>
                     ),
                   },
                   {
@@ -235,69 +320,141 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                     titel: "Rechnungen",
                     icon: "bi-receipt",
                     inhalt: (
-                      <table className="table table-striped align-middle mb-0">
+                      <div className="table-responsive">
-                        <thead>
+                        <table className="table table-striped align-middle mb-0">
-                          <tr>
+                          <thead>
-                            <th scope="col">Laufzeit</th>
+                            <tr>
-                            <th scope="col">Proxmox-Rechnung</th>
+                              <th scope="col">Laufzeit</th>
-                            <th scope="col">Einkauf</th>
+                              <th scope="col">Proxmox-Rechnung</th>
-                            <th scope="col">Kundenrechnung</th>
+                              <th scope="col">Einkauf</th>
-                            <th scope="col">Verkauf</th>
+                              <th scope="col">Kundenrechnung</th>
-                            <th scope="col">Marge</th>
+                              <th scope="col">Verkauf</th>
-                          </tr>
+                              <th scope="col">Marge</th>
-                        </thead>
-                        <tbody>
-                          {laufzeiten.map((laufzeit) => (
-                            <tr key={laufzeit.id}>
-                              <td>
-                                {formatDatum(laufzeit.start)} – {formatDatum(laufzeit.ende)}
-                                {laufzeit.vorschlag ? (
-                                  <span className="badge pl-bg-info ms-2">Vorschlag</span>
-                                ) : null}
-                              </td>
-                              <td>
-                                <CopyableCode wert={laufzeit.einkauf?.nummer ?? null} />
-                                <div>
-                                  <EinkaufBadge
-                                    bezahlt={laufzeit.einkauf ? laufzeit.einkauf.bezahlt : null}
-                                  />
-                                </div>
-                              </td>
-                              <td>{formatEuro(laufzeit.einkauf?.nettoBetrag)}</td>
-                              <td>
-                                <CopyableCode wert={laufzeit.verkauf?.nummer ?? null} />
-                                <div>
-                                  <VerkaufBadge
-                                    erstellt={laufzeit.verkauf?.erstellt ?? false}
-                                    bezahlt={laufzeit.verkauf?.bezahlt ?? false}
-                                  />
-                                </div>
-                              </td>
-                              <td>{formatEuro(laufzeit.verkauf?.nettoBetrag)}</td>
-                              <td>
-                                {laufzeit.einkauf && laufzeit.verkauf?.nettoBetrag
-                                  ? formatEuro(
-                                      (laufzeit.verkauf.nettoBetrag ?? 0) -
-                                        (laufzeit.einkauf.nettoBetrag ?? 0),
-                                    )
-                                  : "–"}
-                              </td>
                             </tr>
-                          ))}
+                          </thead>
-                        </tbody>
+                          <tbody>
-                      </table>
+                            {host.laufzeiten.map((laufzeit) => {
+                              const einkauf = laufzeit.proxmoxPosition
+                                ? Number(laufzeit.proxmoxPosition.nettoBetrag)
+                                : null;
+                              const verkauf = laufzeit.kundenPosition
+                                ? Number(laufzeit.kundenPosition.nettoBetrag)
+                                : null;
+                              return (
+                                <tr key={laufzeit.id}>
+                                  <td>
+                                    {formatDatum(laufzeit.start)} – {formatDatum(laufzeit.ende)}
+                                    {laufzeit.status === "VORSCHLAG" ? (
+                                      <span className="badge pl-bg-info ms-2">Vorschlag</span>
+                                    ) : null}
+                                  </td>
+                                  <td>
+                                    <CopyableCode wert={laufzeit.proxmoxPosition?.rechnung.nummer ?? null} />
+                                    <div>
+                                      <EinkaufBadge
+                                        bezahlt={
+                                          laufzeit.proxmoxPosition
+                                            ? laufzeit.proxmoxPosition.rechnung.bezahlt
+                                            : null
+                                        }
+                                      />
+                                    </div>
+                                  </td>
+                                  <td>{formatEuro(einkauf)}</td>
+                                  <td>
+                                    <CopyableCode wert={laufzeit.kundenPosition?.rechnung.nummer ?? null} />
+                                    <div>
+                                      <VerkaufBadge
+                                        erstellt={laufzeit.kundenPosition?.rechnung.erstellt ?? false}
+                                        bezahlt={laufzeit.kundenPosition?.rechnung.bezahlt ?? false}
+                                      />
+                                    </div>
+                                  </td>
+                                  <td>{formatEuro(verkauf)}</td>
+                                  <td>
+                                    {einkauf !== null && verkauf !== null
+                                      ? formatEuro(verkauf - einkauf)
+                                      : "–"}
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                            {host.laufzeiten.length === 0 ? (
+                              <tr>
+                                <td colSpan={6} className="text-body-secondary">
+                                  Noch keine Laufzeit erfasst.
+                                </td>
+                              </tr>
+                            ) : null}
+                          </tbody>
+                        </table>
+                      </div>
                     ),
                   },
                   {
                     id: "notizen",
-                    titel: "Notizen",
+                    titel: "Notizen und Tags",
                     icon: "bi-journal-text",
                     inhalt: (
-                      <p className="mb-0">
+                      <HostNotizen
-                        {host.notizen ?? (
+                        hostId={host.id}
-                          <span className="text-body-secondary">Keine Notizen hinterlegt.</span>
+                        notizen={host.notizen}
-                        )}
+                        tags={host.tags.map((tag) => tag.name)}
-                      </p>
+                      />
+                    ),
+                  },
+                  {
+                    id: "tokens",
+                    titel: "Tokens",
+                    icon: "bi-key-fill",
+                    inhalt: (
+                      <table className="table table-striped align-middle mb-0">
+                        <thead>
+                          <tr>
+                            <th scope="col">Anfang</th>
+                            <th scope="col">Erstellt</th>
+                            <th scope="col">Zuletzt benutzt</th>
+                            <th scope="col">Zustand</th>
+                            <th scope="col" className="text-end">
+                              Aktion
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {host.tokens.map((token) => (
+                            <tr key={token.id}>
+                              <td className="pl-mono">{token.praefix}…</td>
+                              <td>{formatDatum(token.erstelltAm)}</td>
+                              <td>{formatDatumZeit(token.letzteNutzungAm)}</td>
+                              <td>
+                                {token.widerrufenAm ? (
+                                  <Badge farbe="neutral">Widerrufen</Badge>
+                                ) : (
+                                  <Badge farbe="success">Aktiv</Badge>
+                                )}
+                              </td>
+                              <td className="text-end">
+                                {token.widerrufenAm ? null : (
+                                  <form action={hostTokenWiderrufen}>
+                                    <input type="hidden" name="id" value={token.id} />
+                                    <input type="hidden" name="hostId" value={host.id} />
+                                    <button type="submit" className="btn btn-sm btn-outline-danger">
+                                      Widerrufen
+                                    </button>
+                                  </form>
+                                )}
+                              </td>
+                            </tr>
+                          ))}
+                          {host.tokens.length === 0 ? (
+                            <tr>
+                              <td colSpan={5} className="text-body-secondary">
+                                Kein Token vorhanden – dieser Host stammt aus den Demo-Daten.
+                              </td>
+                            </tr>
+                          ) : null}
+                        </tbody>
+                      </table>
                     ),
                   },
                 ]}

src/app/(dashboard)/hosts/export/route.ts

@@ -0,0 +1,69 @@
+import { PRODUKT_TEXT, STATUS_TEXT, statusAusDatenbank } from "@/lib/anzeige";
+import { csvAntwort, csvDatei } from "@/lib/csv";
+import { hostListe, type HostFilter } from "@/server/queries/hostliste";
+
+export const dynamic = "force-dynamic";
+
+/** CSV-Export der Host-Tabelle; übernimmt die Filter aus der Adresse. */
+export async function GET(request: Request) {
+  const parameter = new URL(request.url).searchParams;
+  const filter: HostFilter = {
+    q: parameter.get("q") ?? undefined,
+    kunde: parameter.get("kunde") ?? undefined,
+    status: parameter.get("status") ?? undefined,
+    produkt: parameter.get("produkt") ?? undefined,
+    ablauf: (parameter.get("ablauf") as HostFilter["ablauf"]) ?? undefined,
+    rechnung: (parameter.get("rechnung") as HostFilter["rechnung"]) ?? undefined,
+    sortierung: parameter.get("sortierung") ?? undefined,
+    // Der Export enthält alle Treffer, nicht nur die aktuelle Seite.
+    seite: 1,
+  };
+
+  const { gesamt } = await hostListe({ ...filter }, new Date());
+  const alle = [];
+  for (let seite = 1; alle.length < gesamt; seite++) {
+    const teil = await hostListe({ ...filter, seite }, new Date());
+    if (teil.hosts.length === 0) break;
+    alle.push(...teil.hosts);
+  }
+
+  const inhalt = csvDatei(
+    [
+      "Hostname",
+      "FQDN",
+      "Kunde",
+      "Standort",
+      "Produkt",
+      "Version",
+      "Status",
+      "Subscription-Key",
+      "Server-ID",
+      "Sockets lizenziert",
+      "Sockets physisch",
+      "Ablauf",
+      "Letzte Meldung",
+      "IP-Adressen",
+      "Agent-Version",
+    ],
+    alle.map((host) => [
+      host.hostname,
+      host.fqdn,
+      host.kunde?.name ?? "Nicht zugeordnet",
+      host.standort?.name ?? "",
+      PRODUKT_TEXT[host.produkt],
+      host.produktVersion,
+      STATUS_TEXT[statusAusDatenbank(host.subStatus)],
+      host.subKey,
+      host.serverId,
+      host.subLizenzierteSockets,
+      host.sockets,
+      host.subNextduedate,
+      host.letzterReportAm,
+      host.ips.join(", "),
+      host.agentVersion,
+    ]),
+  );
+
+  const datum = new Date().toISOString().slice(0, 10);
+  return csvAntwort(inhalt, `proxledger-hosts-${datum}.csv`);
+}

src/app/(dashboard)/hosts/page.tsx

@@ -1,23 +1,96 @@
 import Link from "next/link";
 import { ContentHeader } from "@/components/layout/ContentHeader";
+import { HostFilterLeiste } from "@/components/hosts/HostFilterLeiste";
 import { AblaufBadge, KeineMeldungBadge, StatusBadge } from "@/components/ui/Badges";
 import { Card } from "@/components/ui/Card";
 import { CopyableCode } from "@/components/ui/CopyableCode";
-import { HEUTE, hosts } from "@/mock/data";
+import { PRODUKT_TEXT } from "@/lib/anzeige";
-import { PRODUKT_NAME, getKunde, hostMeldetNicht, suche } from "@/mock/queries";
+import { formatDatumZeit } from "@/lib/format";
+import { filterOptionen, hostListe, type HostFilter } from "@/server/queries/hostliste";
 
 export const metadata = { title: "Hosts" };
 
-export default async function HostsSeite({
+type SuchParameter = Promise<Record<string, string | string[] | undefined>>;
-  searchParams,
-}: {
-  searchParams: Promise<{ q?: string; status?: string; kunde?: string }>;
-}) {
-  const { q, status, kunde } = await searchParams;
 
-  let liste = q ? suche(q).hosts : hosts;
+function einzeln(wert: string | string[] | undefined): string | undefined {
-  if (status) liste = liste.filter((h) => h.subscription.status === status);
+  const text = Array.isArray(wert) ? wert[0] : wert;
-  if (kunde) liste = liste.filter((h) => h.kundeId === kunde);
+  return text && text.length > 0 ? text : undefined;
+}
+
+/** Baut eine Adresse mit geänderten Parametern – für Sortierung, Blättern und Export. */
+function mitParametern(
+  basis: Record<string, string | undefined>,
+  aenderung: Record<string, string | undefined> = {},
+  pfad = "/hosts",
+) {
+  const params = new URLSearchParams();
+  for (const [schluessel, wert] of Object.entries({ ...basis, ...aenderung })) {
+    if (wert) params.set(schluessel, wert);
+  }
+  const text = params.toString();
+  return text ? `${pfad}?${text}` : pfad;
+}
+
+/** Spaltenkopf, der beim Klick die Sortierung umschaltet. */
+function SortierKopf({
+  titel,
+  feld,
+  basis,
+  sortierung,
+}: {
+  titel: string;
+  feld: string;
+  basis: Record<string, string | undefined>;
+  sortierung: string | undefined;
+}) {
+  const aktiv = (sortierung ?? "hostname").startsWith(feld);
+  const absteigend = sortierung === `${feld}-ab`;
+  return (
+    <th scope="col">
+      <Link
+        href={mitParametern(basis, { sortierung: absteigend ? feld : `${feld}-ab`, seite: undefined })}
+        className="text-decoration-none text-body d-inline-flex align-items-center gap-1"
+      >
+        {titel}
+        {aktiv ? (
+          <i
+            className={`bi ${absteigend ? "bi-caret-down-fill" : "bi-caret-up-fill"} small`}
+            aria-hidden="true"
+          />
+        ) : null}
+      </Link>
+    </th>
+  );
+}
+
+export default async function HostsSeite({ searchParams }: { searchParams: SuchParameter }) {
+  const roh = await searchParams;
+  const filter: HostFilter = {
+    q: einzeln(roh.q),
+    kunde: einzeln(roh.kunde),
+    status: einzeln(roh.status),
+    produkt: einzeln(roh.produkt),
+    ablauf: einzeln(roh.ablauf) as HostFilter["ablauf"],
+    rechnung: einzeln(roh.rechnung) as HostFilter["rechnung"],
+    sortierung: einzeln(roh.sortierung),
+    seite: Number(einzeln(roh.seite) ?? 1),
+  };
+
+  const jetzt = new Date();
+  const [{ hosts, gesamt, seite, seiten }, optionen] = await Promise.all([
+    hostListe(filter, jetzt),
+    filterOptionen(),
+  ]);
+
+  const basis: Record<string, string | undefined> = {
+    q: filter.q,
+    kunde: filter.kunde,
+    status: filter.status,
+    produkt: filter.produkt,
+    ablauf: filter.ablauf,
+    rechnung: filter.rechnung,
+    sortierung: filter.sortierung,
+  };
 
   return (
     <>
@@ -26,7 +99,7 @@ export default async function HostsSeite({
       <div className="app-content">
         <div className="container-fluid">
           <Card
-            titel={`${liste.length} von ${hosts.length} Hosts`}
+            titel={`${gesamt} Host${gesamt === 1 ? "" : "s"}${gesamt !== hosts.length ? ` · Seite ${seite} von ${seiten}` : ""}`}
             rahmen="primary"
             tabelle
             werkzeuge={
@@ -34,106 +107,120 @@ export default async function HostsSeite({
                 <Link href="/hosts/nicht-zugeordnet" className="btn btn-sm btn-outline-primary">
                   Nicht zugeordnete
                 </Link>
-                <span className="btn btn-sm btn-outline-secondary disabled">CSV-Export (ab #007)</span>
+                <a
+                  href={mitParametern(basis, {}, "/hosts/export")}
+                  className="btn btn-sm btn-outline-secondary"
+                >
+                  <i className="bi bi-filetype-csv me-1" aria-hidden="true" />
+                  CSV
+                </a>
               </>
             }
           >
-            <form className="p-3 border-bottom row g-2" role="search">
+            <HostFilterLeiste kunden={optionen.kunden} werte={basis} />
-              <div className="col-md-5">
-                <input
-                  type="search"
-                  name="q"
-                  defaultValue={q ?? ""}
-                  className="form-control"
-                  placeholder="Hostname, Key, Server-ID oder IP …"
-                  aria-label="Hosts durchsuchen"
-                />
-              </div>
-              <div className="col-md-3">
-                <select name="status" defaultValue={status ?? ""} className="form-select" aria-label="Status">
-                  <option value="">Alle Status</option>
-                  <option value="active">Aktiv</option>
-                  <option value="expired">Abgelaufen</option>
-                  <option value="notfound">Keine Subscription</option>
-                </select>
-              </div>
-              <div className="col-md-2">
-                <button type="submit" className="btn btn-primary w-100">
-                  Filtern
-                </button>
-              </div>
-            </form>
 
             <div className="table-responsive">
               <table className="table table-striped align-middle">
                 <thead>
                   <tr>
-                    <th scope="col">Host</th>
+                    <SortierKopf titel="Host" feld="hostname" basis={basis} sortierung={filter.sortierung} />
-                    <th scope="col">Kunde</th>
+                    <SortierKopf titel="Kunde" feld="kunde" basis={basis} sortierung={filter.sortierung} />
                     <th scope="col">Produkt</th>
-                    <th scope="col">Status</th>
+                    <SortierKopf titel="Status" feld="status" basis={basis} sortierung={filter.sortierung} />
                     <th scope="col">Key</th>
-                    <th scope="col">Ablauf</th>
+                    <SortierKopf titel="Ablauf" feld="ablauf" basis={basis} sortierung={filter.sortierung} />
                     <th scope="col">Sockets</th>
+                    <SortierKopf
+                      titel="Letzte Meldung"
+                      feld="meldung"
+                      basis={basis}
+                      sortierung={filter.sortierung}
+                    />
                   </tr>
                 </thead>
                 <tbody>
-                  {liste.map((host) => {
+                  {hosts.map((host) => (
-                    const kundeDesHosts = getKunde(host.kundeId);
+                    <tr key={host.id}>
-                    const socketAbweichung =
+                      <td>
-                      host.subscription.lizenzierteSockets !== null &&
+                        <Link href={`/hosts/${host.id}`} className="fw-semibold text-decoration-none">
-                      host.sockets !== null &&
+                          {host.hostname}
-                      host.subscription.lizenzierteSockets !== host.sockets;
+                        </Link>
-                    return (
+                        {host.meldetNicht ? <KeineMeldungBadge /> : null}
-                      <tr key={host.id}>
+                        <div className="small text-body-secondary">{host.ips.join(", ") || "–"}</div>
-                        <td>
+                      </td>
-                          <Link href={`/hosts/${host.id}`} className="fw-semibold text-decoration-none">
+                      <td>
-                            {host.hostname}
+                        {host.kunde ? (
+                          <Link href={`/kunden/${host.kunde.id}`} className="text-decoration-none">
+                            {host.kunde.name}
                           </Link>
-                          {hostMeldetNicht(host) ? <KeineMeldungBadge /> : null}
+                        ) : (
-                          <div className="small text-body-secondary">{host.ips.join(", ")}</div>
+                          <Link
-                        </td>
+                            href="/hosts/nicht-zugeordnet"
-                        <td>
+                            className="badge pl-bg-neutral text-decoration-none"
-                          {kundeDesHosts ? (
+                          >
-                            <Link href={`/kunden/${kundeDesHosts.id}`} className="text-decoration-none">
+                            Nicht zugeordnet
-                              {kundeDesHosts.name}
+                          </Link>
-                            </Link>
+                        )}
-                          ) : (
+                        {host.standort ? (
-                            <span className="badge pl-bg-neutral">Nicht zugeordnet</span>
+                          <div className="small text-body-secondary">{host.standort.name}</div>
-                          )}
+                        ) : null}
-                        </td>
+                      </td>
-                        <td>{PRODUKT_NAME[host.produkt]}</td>
+                      <td>{PRODUKT_TEXT[host.produkt]}</td>
-                        <td>
+                      <td>
-                          <StatusBadge status={host.subscription.status} />
+                        <StatusBadge status={host.subStatus} />
-                        </td>
+                      </td>
-                        <td>
+                      <td>
-                          <CopyableCode wert={host.subscription.key} />
+                        <CopyableCode wert={host.subKey} />
-                        </td>
+                      </td>
-                        <td>
+                      <td>
-                          <AblaufBadge datum={host.subscription.nextduedate} heute={HEUTE} />
+                        <AblaufBadge datum={host.subNextduedate?.toISOString() ?? null} heute={jetzt} />
-                        </td>
+                      </td>
-                        <td>
+                      <td>
-                          {host.subscription.lizenzierteSockets ?? "–"} / {host.sockets ?? "–"}
+                        {host.subLizenzierteSockets ?? "–"} / {host.sockets ?? "–"}
-                          {socketAbweichung ? (
+                        {host.socketAbweichung ? (
-                            <i
+                          <i
-                              className="bi bi-exclamation-triangle-fill pl-text-warning ms-2"
+                            className="bi bi-exclamation-triangle-fill pl-text-warning ms-2"
-                              title="Lizenzierte und physische Sockets weichen ab"
+                            title="Lizenzierte und physische Sockets weichen ab"
-                            />
+                          />
-                          ) : null}
+                        ) : null}
-                        </td>
+                      </td>
-                      </tr>
+                      <td className="small">{formatDatumZeit(host.letzterReportAm)}</td>
-                    );
+                    </tr>
-                  })}
+                  ))}
-                  {liste.length === 0 ? (
+                  {hosts.length === 0 ? (
                     <tr>
-                      <td colSpan={7} className="text-center text-body-secondary py-4">
+                      <td colSpan={8} className="text-center text-body-secondary py-4">
-                        Keine Hosts gefunden.
+                        Keine Hosts gefunden. <Link href="/hosts">Filter zurücksetzen</Link>
                       </td>
                     </tr>
                   ) : null}
                 </tbody>
               </table>
             </div>
+
+            {seiten > 1 ? (
+              <nav className="p-3 border-top" aria-label="Seiten">
+                <ul className="pagination pagination-sm mb-0">
+                  <li className={`page-item ${seite <= 1 ? "disabled" : ""}`}>
+                    <Link className="page-link" href={mitParametern(basis, { seite: String(seite - 1) })}>
+                      Zurück
+                    </Link>
+                  </li>
+                  {Array.from({ length: seiten }, (_, i) => i + 1).map((nummer) => (
+                    <li key={nummer} className={`page-item ${nummer === seite ? "active" : ""}`}>
+                      <Link className="page-link" href={mitParametern(basis, { seite: String(nummer) })}>
+                        {nummer}
+                      </Link>
+                    </li>
+                  ))}
+                  <li className={`page-item ${seite >= seiten ? "disabled" : ""}`}>
+                    <Link className="page-link" href={mitParametern(basis, { seite: String(seite + 1) })}>
+                      Weiter
+                    </Link>
+                  </li>
+                </ul>
+              </nav>
+            ) : null}
           </Card>
         </div>
       </div>

src/components/hosts/HostFilterLeiste.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+/**
+ * Filterleiste der Host-Tabelle. Alle Filter stehen in der Adresse, damit sich eine
+ * gefilterte Liste teilen lässt und der Zurück-Knopf funktioniert.
+ */
+export function HostFilterLeiste({
+  kunden,
+  werte,
+}: {
+  kunden: { id: string; name: string }[];
+  werte: Record<string, string | undefined>;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const parameter = useSearchParams();
+
+  function setzen(schluessel: string, wert: string) {
+    const neu = new URLSearchParams(parameter.toString());
+    if (wert) neu.set(schluessel, wert);
+    else neu.delete(schluessel);
+    neu.delete("seite");
+    router.push(`${pathname}?${neu.toString()}`);
+  }
+
+  const aktiveFilter = ["kunde", "status", "produkt", "ablauf", "rechnung", "q"].filter(
+    (schluessel) => werte[schluessel],
+  ).length;
+
+  return (
+    <form
+      className="row g-2 p-3 border-bottom"
+      role="search"
+      onSubmit={(e) => {
+        e.preventDefault();
+        const eingabe = new FormData(e.currentTarget).get("q")?.toString() ?? "";
+        setzen("q", eingabe);
+      }}
+    >
+      <div className="col-md-4">
+        <label className="visually-hidden" htmlFor="q">
+          Suche
+        </label>
+        <div className="input-group">
+          <input
+            id="q"
+            name="q"
+            type="search"
+            defaultValue={werte.q ?? ""}
+            className="form-control"
+            placeholder="Hostname, Key, Server-ID, IP oder Rechnungsnummer …"
+          />
+          <button type="submit" className="btn btn-primary" aria-label="Suchen">
+            <i className="bi bi-search" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      <div className="col-6 col-md-2">
+        <select
+          className="form-select"
+          aria-label="Kunde"
+          value={werte.kunde ?? ""}
+          onChange={(e) => setzen("kunde", e.target.value)}
+        >
+          <option value="">Alle Kunden</option>
+          <option value="ohne">Nicht zugeordnet</option>
+          {kunden.map((kunde) => (
+            <option key={kunde.id} value={kunde.id}>
+              {kunde.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="col-6 col-md-2">
+        <select
+          className="form-select"
+          aria-label="Status"
+          value={werte.status ?? ""}
+          onChange={(e) => setzen("status", e.target.value)}
+        >
+          <option value="">Alle Status</option>
+          <option value="ACTIVE">Aktiv</option>
+          <option value="EXPIRED">Abgelaufen</option>
+          <option value="NOTFOUND">Keine Subscription</option>
+          <option value="INVALID">Ungültig</option>
+          <option value="SUSPENDED">Ausgesetzt</option>
+          <option value="UNKNOWN">Unbekannt</option>
+          <option value="keine-meldung">Meldet sich nicht</option>
+        </select>
+      </div>
+
+      <div className="col-6 col-md-2">
+        <select
+          className="form-select"
+          aria-label="Produkt"
+          value={werte.produkt ?? ""}
+          onChange={(e) => setzen("produkt", e.target.value)}
+        >
+          <option value="">Alle Produkte</option>
+          <option value="PVE">Proxmox VE</option>
+          <option value="PBS">Backup Server</option>
+          <option value="PMG">Mail Gateway</option>
+        </select>
+      </div>
+
+      <div className="col-6 col-md-2">
+        <select
+          className="form-select"
+          aria-label="Ablauf"
+          value={werte.ablauf ?? ""}
+          onChange={(e) => setzen("ablauf", e.target.value)}
+        >
+          <option value="">Jeder Ablauf</option>
+          <option value="14">Läuft in 14 Tagen ab</option>
+          <option value="30">Läuft in 30 Tagen ab</option>
+          <option value="abgelaufen">Abgelaufen</option>
+        </select>
+      </div>
+
+      <div className="col-12 d-flex align-items-center gap-3">
+        <div className="form-check">
+          <input
+            className="form-check-input"
+            type="checkbox"
+            id="rechnung"
+            checked={werte.rechnung === "offen"}
+            onChange={(e) => setzen("rechnung", e.target.checked ? "offen" : "")}
+          />
+          <label className="form-check-label small" htmlFor="rechnung">
+            nur mit offenen Rechnungspunkten
+          </label>
+        </div>
+        {aktiveFilter > 0 ? (
+          <Link href="/hosts" className="small">
+            Filter zurücksetzen ({aktiveFilter})
+          </Link>
+        ) : null}
+      </div>
+    </form>
+  );
+}

src/components/hosts/HostNotizen.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useActionState } from "react";
+import { hostNotizenSpeichern } from "@/server/actions/host-detail";
+import type { AktionsErgebnis } from "@/server/actions/kunden";
+
+const LEER: AktionsErgebnis = {};
+
+export function HostNotizen({
+  hostId,
+  notizen,
+  tags,
+}: {
+  hostId: string;
+  notizen: string | null;
+  tags: string[];
+}) {
+  const [ergebnis, aktion, laeuft] = useActionState(hostNotizenSpeichern, LEER);
+
+  return (
+    <form action={aktion}>
+      <input type="hidden" name="hostId" value={hostId} />
+
+      {ergebnis.erfolg ? <div className="alert alert-success py-2">{ergebnis.erfolg}</div> : null}
+      {ergebnis.fehler ? <div className="alert alert-danger py-2">{ergebnis.fehler}</div> : null}
+
+      <div className="mb-3">
+        <label className="form-label" htmlFor="notizen">
+          Notizen
+        </label>
+        <textarea
+          id="notizen"
+          name="notizen"
+          rows={5}
+          className="form-control"
+          defaultValue={notizen ?? ""}
+          placeholder="z. B. Verlängerung mit Kundin besprochen"
+        />
+      </div>
+
+      <div className="mb-3">
+        <label className="form-label" htmlFor="tags">
+          Tags
+        </label>
+        <input
+          id="tags"
+          name="tags"
+          className="form-control"
+          defaultValue={tags.join(", ")}
+          placeholder="produktiv, cluster, backup"
+        />
+        <div className="form-text">Mehrere Tags mit Komma trennen.</div>
+      </div>
+
+      <button type="submit" className="btn btn-primary pl-touch-target" disabled={laeuft}>
+        {laeuft ? "Speichert …" : "Speichern"}
+      </button>
+    </form>
+  );
+}

src/lib/csv.ts

@@ -0,0 +1,41 @@
+/** CSV für deutsche Tabellenkalkulationen: Semikolon, UTF-8 mit BOM, Komma als Dezimaltrennzeichen. */
+
+const datumFormat = new Intl.DateTimeFormat("de-DE", {
+  timeZone: "Europe/Berlin",
+  day: "2-digit",
+  month: "2-digit",
+  year: "numeric",
+});
+
+export function csvZelle(wert: string | number | Date | null | undefined): string {
+  if (wert === null || wert === undefined) return "";
+  if (wert instanceof Date) return datumFormat.format(wert);
+  if (typeof wert === "number") {
+    // Ganze Zahlen (z. B. Sockets) ohne Nachkommastellen, Beträge mit zwei.
+    return Number.isInteger(wert)
+      ? wert.toLocaleString("de-DE")
+      : wert.toLocaleString("de-DE", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }
+
+  const text = String(wert);
+  return /[";\n]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
+}
+
+export function csvDatei(
+  kopfzeile: string[],
+  zeilen: (string | number | Date | null | undefined)[][],
+): string {
+  const inhalt = [kopfzeile, ...zeilen].map((zeile) => zeile.map(csvZelle).join(";")).join("\r\n");
+  // Das BOM sorgt dafür, dass Excel die Umlaute richtig liest.
+  return `\uFEFF${inhalt}\r\n`;
+}
+
+export function csvAntwort(inhalt: string, dateiname: string): Response {
+  return new Response(inhalt, {
+    headers: {
+      "Content-Type": "text/csv; charset=utf-8",
+      "Content-Disposition": `attachment; filename="${dateiname}"`,
+      "Cache-Control": "no-store",
+    },
+  });
+}

src/server/actions/host-detail.ts

@@ -0,0 +1,61 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { prisma } from "@/lib/db";
+import { protokolliere } from "@/server/audit";
+import type { AktionsErgebnis } from "./kunden";
+
+/** Speichert Notizen und Tags eines Hosts. */
+export async function hostNotizenSpeichern(
+  _vorher: AktionsErgebnis,
+  formular: FormData,
+): Promise<AktionsErgebnis> {
+  const hostId = formular.get("hostId")?.toString();
+  if (!hostId) return { fehler: "Host nicht gefunden." };
+
+  const notizen = formular.get("notizen")?.toString().trim() || null;
+  const tags = (formular.get("tags")?.toString() ?? "")
+    .split(",")
+    .map((tag) => tag.trim().toLowerCase())
+    .filter(Boolean)
+    .slice(0, 12);
+
+  await prisma.host.update({
+    where: { id: hostId },
+    data: {
+      notizen,
+      tags: {
+        set: [],
+        connectOrCreate: tags.map((name) => ({ where: { name }, create: { name } })),
+      },
+    },
+  });
+
+  await protokolliere("host.notizen_geaendert", "Host", hostId, { notizen, tags });
+  revalidatePath(`/hosts/${hostId}`);
+
+  return { erfolg: "Gespeichert." };
+}
+
+/** Ordnet einen einzelnen Host einem Kunden zu (aus der Detailansicht heraus). */
+export async function hostKundeSetzen(formular: FormData) {
+  const hostId = formular.get("hostId")?.toString();
+  const kundeId = formular.get("kundeId")?.toString() || null;
+  const standortId = formular.get("standortId")?.toString() || null;
+  if (!hostId) return;
+
+  await prisma.host.update({ where: { id: hostId }, data: { kundeId, standortId } });
+  await protokolliere("host.zugewiesen", "Host", hostId, { kundeId, standortId });
+
+  if (kundeId) {
+    await prisma.alert.updateMany({
+      where: { regel: "host-ohne-kunde", hostId, erledigtAm: null },
+      data: { erledigtAm: new Date() },
+    });
+  }
+
+  revalidatePath(`/hosts/${hostId}`);
+  revalidatePath("/hosts");
+  revalidatePath("/hosts/nicht-zugeordnet");
+  revalidatePath("/");
+}

src/server/queries/hostliste.ts

@@ -0,0 +1,169 @@
+import type { Prisma } from "@/generated/prisma/client";
+import { prisma } from "@/lib/db";
+import { meldungsGrenze } from "./hosts";
+
+export interface HostFilter {
+  q?: string;
+  kunde?: string;
+  status?: string;
+  produkt?: string;
+  ablauf?: "30" | "14" | "abgelaufen";
+  rechnung?: "offen";
+  sortierung?: string;
+  seite?: number;
+}
+
+export const SEITENGROESSE = 25;
+
+/** Baut die Where-Bedingung aus den Filtern der Host-Tabelle. */
+function bedingung(filter: HostFilter, jetzt: Date): Prisma.HostWhereInput {
+  const und: Prisma.HostWhereInput[] = [];
+
+  if (filter.q && filter.q.trim().length > 0) {
+    const suche = filter.q.trim();
+    und.push({
+      OR: [
+        { hostname: { contains: suche, mode: "insensitive" } },
+        { fqdn: { contains: suche, mode: "insensitive" } },
+        { serverId: { contains: suche, mode: "insensitive" } },
+        { subKey: { contains: suche, mode: "insensitive" } },
+        { ips: { has: suche } },
+        { kunde: { name: { contains: suche, mode: "insensitive" } } },
+        // Suche nach einer Proxmox-Rechnungsnummer führt ebenfalls zum Host.
+        {
+          laufzeiten: {
+            some: {
+              OR: [
+                { proxmoxPosition: { rechnung: { nummer: { contains: suche, mode: "insensitive" } } } },
+                { kundenPosition: { rechnung: { nummer: { contains: suche, mode: "insensitive" } } } },
+              ],
+            },
+          },
+        },
+      ],
+    });
+  }
+
+  if (filter.kunde === "ohne") und.push({ kundeId: null });
+  else if (filter.kunde) und.push({ kundeId: filter.kunde });
+
+  if (filter.status === "keine-meldung") {
+    und.push({
+      OR: [{ letzterReportAm: null }, { letzterReportAm: { lt: meldungsGrenze(jetzt) } }],
+    });
+  } else if (filter.status) {
+    und.push({ subStatus: filter.status as Prisma.EnumSubscriptionStatusFilter["equals"] });
+  }
+
+  if (filter.produkt) und.push({ produkt: filter.produkt as Prisma.EnumProduktFilter["equals"] });
+
+  if (filter.ablauf === "30") {
+    und.push({ subNextduedate: { gte: jetzt, lte: new Date(jetzt.getTime() + 30 * 86_400_000) } });
+  } else if (filter.ablauf === "14") {
+    und.push({ subNextduedate: { gte: jetzt, lte: new Date(jetzt.getTime() + 14 * 86_400_000) } });
+  } else if (filter.ablauf === "abgelaufen") {
+    und.push({ subNextduedate: { lt: jetzt } });
+  }
+
+  if (filter.rechnung === "offen") {
+    und.push({
+      laufzeiten: {
+        some: {
+          status: "BESTAETIGT",
+          OR: [
+            { proxmoxPosition: { rechnung: { bezahlt: false } } },
+            { kundenPosition: null },
+            { kundenPosition: { rechnung: { erstellt: false } } },
+          ],
+        },
+      },
+    });
+  }
+
+  return und.length > 0 ? { AND: und } : {};
+}
+
+// Hosts ohne Ablaufdatum bzw. ohne Meldung stehen immer am Ende, egal in welche Richtung sortiert wird.
+const SORTIERUNGEN: Record<string, Prisma.HostOrderByWithRelationInput> = {
+  hostname: { hostname: "asc" },
+  "hostname-ab": { hostname: "desc" },
+  ablauf: { subNextduedate: { sort: "asc", nulls: "last" } },
+  "ablauf-ab": { subNextduedate: { sort: "desc", nulls: "last" } },
+  kunde: { kunde: { name: "asc" } },
+  "kunde-ab": { kunde: { name: "desc" } },
+  status: { subStatus: "asc" },
+  "status-ab": { subStatus: "desc" },
+  meldung: { letzterReportAm: { sort: "desc", nulls: "last" } },
+  "meldung-ab": { letzterReportAm: { sort: "asc", nulls: "last" } },
+};
+
+export async function hostListe(filter: HostFilter, jetzt: Date = new Date()) {
+  const where = bedingung(filter, jetzt);
+  const seite = Math.max(1, filter.seite ?? 1);
+  const orderBy = SORTIERUNGEN[filter.sortierung ?? "hostname"] ?? SORTIERUNGEN.hostname;
+
+  const [gesamt, hosts] = await Promise.all([
+    prisma.host.count({ where }),
+    prisma.host.findMany({
+      where,
+      orderBy,
+      skip: (seite - 1) * SEITENGROESSE,
+      take: SEITENGROESSE,
+      include: {
+        kunde: { select: { id: true, name: true } },
+        standort: { select: { name: true } },
+      },
+    }),
+  ]);
+
+  const grenze = meldungsGrenze(jetzt);
+
+  return {
+    gesamt,
+    seite,
+    seiten: Math.max(1, Math.ceil(gesamt / SEITENGROESSE)),
+    hosts: hosts.map((host) => ({
+      ...host,
+      meldetNicht: !host.letzterReportAm || host.letzterReportAm < grenze,
+      socketAbweichung:
+        host.subLizenzierteSockets !== null &&
+        host.sockets !== null &&
+        host.subLizenzierteSockets !== host.sockets,
+    })),
+  };
+}
+
+/** Alle Daten der Host-Detailansicht in einem Rutsch. */
+export async function hostMitDetails(id: string) {
+  return prisma.host.findUnique({
+    where: { id },
+    include: {
+      kunde: { select: { id: true, name: true } },
+      standort: { select: { id: true, name: true, ort: true } },
+      tags: true,
+      alerts: { where: { erledigtAm: null }, orderBy: { geoeffnetAm: "desc" } },
+      keyHistorie: { orderBy: { letzteMeldung: "desc" } },
+      serverIdHistorie: { orderBy: { letzteMeldung: "desc" } },
+      tokens: { orderBy: { erstelltAm: "desc" } },
+      reports: { orderBy: { erhobenAm: "desc" }, take: 30 },
+      laufzeiten: {
+        orderBy: { start: "desc" },
+        include: {
+          proxmoxPosition: { include: { rechnung: true } },
+          kundenPosition: { include: { rechnung: true } },
+        },
+      },
+    },
+  });
+}
+
+export type HostDetail = NonNullable<Awaited<ReturnType<typeof hostMitDetails>>>;
+
+/** Auswahllisten für die Filterleiste. */
+export async function filterOptionen() {
+  const kunden = await prisma.kunde.findMany({
+    orderBy: { name: "asc" },
+    select: { id: true, name: true },
+  });
+  return { kunden };
+}

tests/csv.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { csvDatei, csvZelle } from "@/lib/csv";
+
+describe("CSV-Export", () => {
+  it("formatiert Werte deutsch", () => {
+    expect(csvZelle(new Date("2027-03-02T00:00:00Z"))).toBe("02.03.2027");
+    expect(csvZelle(1)).toBe("1");
+    expect(csvZelle(1234.5)).toBe("1.234,50");
+    expect(csvZelle(null)).toBe("");
+    expect(csvZelle(undefined)).toBe("");
+  });
+
+  it("maskiert Semikolon, Anführungszeichen und Zeilenumbrüche", () => {
+    expect(csvZelle("Firma; GmbH")).toBe('"Firma; GmbH"');
+    expect(csvZelle('Er sagte "hallo"')).toBe('"Er sagte ""hallo"""');
+    expect(csvZelle("Zeile1\nZeile2")).toBe('"Zeile1\nZeile2"');
+  });
+
+  it("schreibt BOM und Zeilenenden für Excel", () => {
+    const datei = csvDatei(["A", "B"], [["x", 2]]);
+    expect(datei.startsWith("")).toBe(true);
+    expect(datei).toContain("A;B\r\nx;2\r\n");
+  });
+});

tests/hostliste.test.ts

@@ -0,0 +1,164 @@
+import { afterAll, beforeEach, describe, expect, it } from "vitest";
+import { hostListe } from "@/server/queries/hostliste";
+import { datenbankLeeren, datenbankVerfuegbar, testPrisma } from "./helpers/db";
+
+const JETZT = new Date("2026-09-17T12:00:00Z");
+
+async function beispielDaten() {
+  const kunde = await testPrisma.kunde.create({
+    data: { name: "Brandl Elektrotechnik GmbH", kundennummer: "K-1001" },
+  });
+  const anderer = await testPrisma.kunde.create({
+    data: { name: "Huber Logistik AG", kundennummer: "K-1002" },
+  });
+
+  const brandl = await testPrisma.host.create({
+    data: {
+      agentId: "agent-brandl",
+      hostname: "pve-brandl-01",
+      fqdn: "pve-brandl-01.brandl.local",
+      produkt: "PVE",
+      kundeId: kunde.id,
+      serverId: "A1B2C3D4E5F60718",
+      subKey: "pve1c-a6bd21fcb6",
+      subStatus: "ACTIVE",
+      subNextduedate: new Date("2026-09-24"),
+      subLizenzierteSockets: 1,
+      sockets: 1,
+      ips: ["192.168.10.11"],
+      letzterReportAm: new Date("2026-09-17T03:00:00Z"),
+    },
+  });
+
+  await testPrisma.host.create({
+    data: {
+      agentId: "agent-huber",
+      hostname: "pve-huber-01",
+      produkt: "PVE",
+      kundeId: anderer.id,
+      subKey: "pve1c-77c0ea1b93",
+      subStatus: "ACTIVE",
+      subNextduedate: new Date("2026-12-01"),
+      subLizenzierteSockets: 1,
+      sockets: 2,
+      ips: ["10.8.0.5"],
+      letzterReportAm: new Date("2026-09-17T02:00:00Z"),
+    },
+  });
+
+  await testPrisma.host.create({
+    data: {
+      agentId: "agent-pbs",
+      hostname: "pbs-backup",
+      produkt: "PBS",
+      subStatus: "NOTFOUND",
+      letzterReportAm: new Date("2026-09-10T02:00:00Z"),
+    },
+  });
+
+  const rechnung = await testPrisma.proxmoxRechnung.create({
+    data: {
+      nummer: "PX-2026-14790",
+      datum: new Date("2026-09-10"),
+      nettoBetrag: 115,
+      bezahlt: false,
+      positionen: { create: [{ bezeichnung: "pve1c-a6bd21fcb6", nettoBetrag: 115 }] },
+    },
+    include: { positionen: true },
+  });
+
+  await testPrisma.laufzeit.create({
+    data: {
+      hostId: brandl.id,
+      key: "pve1c-a6bd21fcb6",
+      start: new Date("2026-09-24"),
+      ende: new Date("2027-09-23"),
+      status: "BESTAETIGT",
+      proxmoxPositionId: rechnung.positionen[0].id,
+    },
+  });
+
+  return { kunde, anderer, brandl };
+}
+
+describe.runIf(datenbankVerfuegbar)("Host-Tabelle", () => {
+  beforeEach(async () => {
+    await datenbankLeeren();
+    await beispielDaten();
+  });
+
+  afterAll(async () => {
+    await testPrisma.$disconnect();
+  });
+
+  it("findet einen Host über seinen Subscription-Key", async () => {
+    const { hosts, gesamt } = await hostListe({ q: "pve1c-a6bd21fcb6" }, JETZT);
+    expect(gesamt).toBe(1);
+    expect(hosts[0].hostname).toBe("pve-brandl-01");
+    expect(hosts[0].kunde?.name).toBe("Brandl Elektrotechnik GmbH");
+  });
+
+  it("findet Hosts über Server-ID, IP, FQDN und Kundenname", async () => {
+    for (const suche of ["A1B2C3D4E5F60718", "192.168.10.11", "brandl.local", "Brandl Elektro"]) {
+      const { hosts } = await hostListe({ q: suche }, JETZT);
+      expect(hosts.map((h) => h.hostname), `Suche nach ${suche}`).toContain("pve-brandl-01");
+    }
+  });
+
+  it("findet den Host über die Proxmox-Rechnungsnummer", async () => {
+    const { hosts, gesamt } = await hostListe({ q: "PX-2026-14790" }, JETZT);
+    expect(gesamt).toBe(1);
+    expect(hosts[0].hostname).toBe("pve-brandl-01");
+  });
+
+  it("ignoriert Groß- und Kleinschreibung", async () => {
+    const { gesamt } = await hostListe({ q: "PVE-BRANDL-01" }, JETZT);
+    expect(gesamt).toBe(1);
+  });
+
+  it("filtert nach Kunde, Status und Produkt", async () => {
+    const { kunde } = { kunde: await testPrisma.kunde.findFirstOrThrow({ where: { kundennummer: "K-1001" } }) };
+
+    expect((await hostListe({ kunde: kunde.id }, JETZT)).gesamt).toBe(1);
+    expect((await hostListe({ kunde: "ohne" }, JETZT)).gesamt).toBe(1);
+    expect((await hostListe({ status: "ACTIVE" }, JETZT)).gesamt).toBe(2);
+    expect((await hostListe({ status: "NOTFOUND" }, JETZT)).gesamt).toBe(1);
+    expect((await hostListe({ produkt: "PBS" }, JETZT)).gesamt).toBe(1);
+  });
+
+  it("filtert nach Hosts, die sich länger als 48 Stunden nicht gemeldet haben", async () => {
+    const { hosts } = await hostListe({ status: "keine-meldung" }, JETZT);
+    expect(hosts.map((h) => h.hostname)).toEqual(["pbs-backup"]);
+    expect(hosts[0].meldetNicht).toBe(true);
+  });
+
+  it("filtert nach baldigem Ablauf", async () => {
+    expect((await hostListe({ ablauf: "14" }, JETZT)).gesamt).toBe(1);
+    expect((await hostListe({ ablauf: "30" }, JETZT)).gesamt).toBe(1);
+    expect((await hostListe({ ablauf: "abgelaufen" }, JETZT)).gesamt).toBe(0);
+  });
+
+  it("filtert nach offenen Rechnungspunkten", async () => {
+    const { hosts } = await hostListe({ rechnung: "offen" }, JETZT);
+    expect(hosts.map((h) => h.hostname)).toEqual(["pve-brandl-01"]);
+  });
+
+  it("erkennt abweichende Sockets", async () => {
+    const { hosts } = await hostListe({ q: "pve-huber-01" }, JETZT);
+    expect(hosts[0].socketAbweichung).toBe(true);
+  });
+
+  it("sortiert nach Ablaufdatum in beide Richtungen", async () => {
+    const aufsteigend = await hostListe({ sortierung: "ablauf" }, JETZT);
+    expect(aufsteigend.hosts[0].hostname).toBe("pve-brandl-01");
+
+    const absteigend = await hostListe({ sortierung: "ablauf-ab" }, JETZT);
+    expect(absteigend.hosts[0].subNextduedate).not.toBeNull();
+    expect(absteigend.hosts[0].hostname).toBe("pve-huber-01");
+  });
+
+  it("kombiniert mehrere Filter", async () => {
+    const { gesamt } = await hostListe({ status: "ACTIVE", produkt: "PVE", ablauf: "30" }, JETZT);
+    expect(gesamt).toBe(1);
+  });
+});