feat(hosts): Host-Tabelle mit Filtern, CSV-Export und Detailansicht (#007)

Suche ueber Hostname, Key, Server-ID, IP und Rechnungsnummer, fuenf Filter,
Sortierung mit nulls-last, Seitenblaettern und CSV-Export. Detailansicht mit
sechs Tabs, Notizen, Tags und Token-Widerruf. 59 Tests.

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

CHANGELOG.md

@@ -17,6 +17,18 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
 
 ### Sicherheit
 
+## [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 38 min
 
 | Issue | Zeit |
 |---|---|
@@ -12,18 +12,20 @@
 | #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 |
 
 | 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**
 
 ---
 
 ## 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.0
 
 ### Erledigt
 - Auftrag gelesen, Rückfragen gestellt
@@ -41,6 +43,9 @@
 - #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
 
 ### 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 +72,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

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/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 | – |
@@ -23,4 +23,4 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
 | [#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 | – |
-| | **Summe** | | | **112 h** | **2 h 13 min** |
+| | **Summe** | | | **112 h** | **2 h 38 min** |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "proxledger",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

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,38 +38,41 @@ 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">
-                <Card titel="Offene Warnungen" rahmen="danger">
               <ul className="list-unstyled mb-0">
-                    {alerts.map((alert) => (
+                {host.alerts.map((alert) => (
                   <li key={alert.id} className="mb-2">
                     <Badge
                       farbe={
-                            alert.schwere === "gefahr"
+                        alert.schwere === "GEFAHR"
                           ? "danger"
-                              : alert.schwere === "warnung"
+                          : alert.schwere === "WARNUNG"
                             ? "warning"
                             : "info"
                       }
@@ -83,8 +84,6 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                 ))}
               </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>
+
+                <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,69 +169,117 @@ 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}
+                          ) : (
+                            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">
+                      <>
+                        <h3 className="h6">Keys</h3>
+                        <table className="table table-striped align-middle mb-4">
                           <thead>
                             <tr>
                               <th scope="col">Key</th>
-                            <th scope="col">Erste Laufzeit</th>
+                              <th scope="col">Erstmals gemeldet</th>
-                            <th scope="col">Letzte Laufzeit</th>
+                              <th scope="col">Zuletzt gemeldet</th>
                             </tr>
                           </thead>
                           <tbody>
-                          {keys.map((key) => {
+                            {host.keyHistorie.map((eintrag) => (
-                            const zugehoerig = laufzeiten.filter((l) => l.key === key);
+                              <tr key={eintrag.id}>
-                            return (
-                              <tr key={key}>
                                 <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 ? (
+                              <tr>
+                                <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: (
+                      <div className="table-responsive">
                         <table className="table table-striped align-middle mb-0">
                           <thead>
                             <tr>
-                            <th scope="col">Zeitpunkt</th>
+                              <th scope="col">Erhoben</th>
+                              <th scope="col">Empfangen</th>
                               <th scope="col">Status</th>
                               <th scope="col">Key</th>
                               <th scope="col">Ablauf</th>
@@ -212,22 +288,31 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                             </tr>
                           </thead>
                           <tbody>
-                          {reports.map((report) => (
+                            {host.reports.map((report) => (
                               <tr key={report.id}>
-                              <td>{formatDatumZeit(report.zeitpunkt)}</td>
+                                <td>{formatDatumZeit(report.erhobenAm)}</td>
-                              <td>
+                                <td className="small text-body-secondary">
-                                <StatusBadge status={report.status} />
+                                  {formatDatumZeit(report.empfangenAm)}
                                 </td>
                                 <td>
-                                <span className="pl-mono">{report.key ?? "–"}</span>
+                                  <StatusBadge status={report.subStatus} />
                                 </td>
-                              <td>{formatDatum(report.nextduedate)}</td>
+                                <td className="pl-mono">{report.subKey ?? "–"}</td>
+                                <td>{formatDatum(report.subNextduedate)}</td>
                                 <td>{formatZahl(report.paketUpdates)}</td>
-                              <td>{report.agentVersion}</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,6 +320,7 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                     titel: "Rechnungen",
                     icon: "bi-receipt",
                     inhalt: (
+                      <div className="table-responsive">
                         <table className="table table-striped align-middle mb-0">
                           <thead>
                             <tr>
@@ -247,57 +333,128 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                             </tr>
                           </thead>
                           <tbody>
-                          {laufzeiten.map((laufzeit) => (
+                            {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.vorschlag ? (
+                                    {laufzeit.status === "VORSCHLAG" ? (
                                       <span className="badge pl-bg-info ms-2">Vorschlag</span>
                                     ) : null}
                                   </td>
                                   <td>
-                                <CopyableCode wert={laufzeit.einkauf?.nummer ?? null} />
+                                    <CopyableCode wert={laufzeit.proxmoxPosition?.rechnung.nummer ?? null} />
                                     <div>
                                       <EinkaufBadge
-                                    bezahlt={laufzeit.einkauf ? laufzeit.einkauf.bezahlt : null}
+                                        bezahlt={
+                                          laufzeit.proxmoxPosition
+                                            ? laufzeit.proxmoxPosition.rechnung.bezahlt
+                                            : null
+                                        }
                                       />
                                     </div>
                                   </td>
-                              <td>{formatEuro(laufzeit.einkauf?.nettoBetrag)}</td>
+                                  <td>{formatEuro(einkauf)}</td>
                                   <td>
-                                <CopyableCode wert={laufzeit.verkauf?.nummer ?? null} />
+                                    <CopyableCode wert={laufzeit.kundenPosition?.rechnung.nummer ?? null} />
                                     <div>
                                       <VerkaufBadge
-                                    erstellt={laufzeit.verkauf?.erstellt ?? false}
+                                        erstellt={laufzeit.kundenPosition?.rechnung.erstellt ?? false}
-                                    bezahlt={laufzeit.verkauf?.bezahlt ?? false}
+                                        bezahlt={laufzeit.kundenPosition?.rechnung.bezahlt ?? false}
                                       />
                                     </div>
                                   </td>
-                              <td>{formatEuro(laufzeit.verkauf?.nettoBetrag)}</td>
+                                  <td>{formatEuro(verkauf)}</td>
                                   <td>
-                                {laufzeit.einkauf && laufzeit.verkauf?.nettoBetrag
+                                    {einkauf !== null && verkauf !== null
-                                  ? formatEuro(
+                                      ? formatEuro(verkauf - einkauf)
-                                      (laufzeit.verkauf.nettoBetrag ?? 0) -
-                                        (laufzeit.einkauf.nettoBetrag ?? 0),
-                                    )
                                       : "–"}
                                   </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)}
+                      />
+                    ),
+                  },
+                  {
+                    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>
                                 )}
-                      </p>
+                              </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);
-                    const socketAbweichung =
-                      host.subscription.lizenzierteSockets !== null &&
-                      host.sockets !== null &&
-                      host.subscription.lizenzierteSockets !== host.sockets;
-                    return (
                     <tr key={host.id}>
                       <td>
                         <Link href={`/hosts/${host.id}`} className="fw-semibold text-decoration-none">
                           {host.hostname}
                         </Link>
-                          {hostMeldetNicht(host) ? <KeineMeldungBadge /> : null}
+                        {host.meldetNicht ? <KeineMeldungBadge /> : null}
-                          <div className="small text-body-secondary">{host.ips.join(", ")}</div>
+                        <div className="small text-body-secondary">{host.ips.join(", ") || "–"}</div>
                       </td>
                       <td>
-                          {kundeDesHosts ? (
+                        {host.kunde ? (
-                            <Link href={`/kunden/${kundeDesHosts.id}`} className="text-decoration-none">
+                          <Link href={`/kunden/${host.kunde.id}`} className="text-decoration-none">
-                              {kundeDesHosts.name}
+                            {host.kunde.name}
                           </Link>
                         ) : (
-                            <span className="badge pl-bg-neutral">Nicht zugeordnet</span>
+                          <Link
+                            href="/hosts/nicht-zugeordnet"
+                            className="badge pl-bg-neutral text-decoration-none"
+                          >
+                            Nicht zugeordnet
+                          </Link>
                         )}
+                        {host.standort ? (
+                          <div className="small text-body-secondary">{host.standort.name}</div>
+                        ) : null}
                       </td>
-                        <td>{PRODUKT_NAME[host.produkt]}</td>
+                      <td>{PRODUKT_TEXT[host.produkt]}</td>
                       <td>
-                          <StatusBadge status={host.subscription.status} />
+                        <StatusBadge status={host.subStatus} />
                       </td>
                       <td>
-                          <CopyableCode wert={host.subscription.key} />
+                        <CopyableCode wert={host.subKey} />
                       </td>
                       <td>
-                          <AblaufBadge datum={host.subscription.nextduedate} heute={HEUTE} />
+                        <AblaufBadge datum={host.subNextduedate?.toISOString() ?? null} heute={jetzt} />
                       </td>
                       <td>
-                          {host.subscription.lizenzierteSockets ?? "–"} / {host.sockets ?? "–"}
+                        {host.subLizenzierteSockets ?? "–"} / {host.sockets ?? "–"}
-                          {socketAbweichung ? (
+                        {host.socketAbweichung ? (
                           <i
                             className="bi bi-exclamation-triangle-fill pl-text-warning ms-2"
                             title="Lizenzierte und physische Sockets weichen ab"
                           />
                         ) : null}
                       </td>
+                      <td className="small">{formatDatumZeit(host.letzterReportAm)}</td>
                     </tr>
-                    );
+                  ))}
-                  })}
+                  {hosts.length === 0 ? (
-                  {liste.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);
+  });
+});