Merge branch 'phase/002-prototyp'
This commit is contained in:
@@ -11,6 +11,9 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
|
||||
- Projektorganisation: Devlog, Changelog, Issue-Übersicht und Issues pro Phase (#001)
|
||||
- Architektur- und Umsetzungsplan in `docs/architektur.md` (#001)
|
||||
- Next.js-Grundgerüst mit AdminLTE-CSS, Bootstrap Icons, zod, ESLint, Prettier und Vitest (#001)
|
||||
- Klickbarer Prototyp mit Beispieldaten: Dashboard, Kunden- und Host-Ansichten, Rechnungen, Jahresbahn (#002)
|
||||
- ProxLedger-Logo als SVG-Komponente, Farbschema nach Vorgabe inklusive Dark-Mode (#002)
|
||||
- Globale Suche über Key, Host, Kunde und Rechnungsnummer mit Strg+K (#002)
|
||||
|
||||
### Geändert
|
||||
|
||||
|
||||
@@ -2,20 +2,21 @@
|
||||
|
||||
## Zeitübersicht
|
||||
|
||||
**Gesamt:** 0 h 08 min
|
||||
**Gesamt:** 0 h 28 min
|
||||
|
||||
| Issue | Zeit |
|
||||
|---|---|
|
||||
| #001 Projekt-Setup | 0 h 08 min |
|
||||
| #002 Klickbarer Prototyp | 0 h 20 min |
|
||||
|
||||
| Meilenstein | Zeit |
|
||||
|---|---|
|
||||
| v0.1.0 | 0 h 08 min |
|
||||
| v0.1.0 | 0 h 28 min |
|
||||
|
||||
---
|
||||
|
||||
## 2026-09-17 · Sitzung 1 · 19:36–laufend
|
||||
**Issue:** #001 Projekt-Setup
|
||||
**Issue:** #001 Projekt-Setup, #002 Klickbarer Prototyp
|
||||
**Version:** 0.1.0-dev
|
||||
|
||||
### Erledigt
|
||||
@@ -24,8 +25,12 @@
|
||||
- Repository-Rechte korrigiert (Verzeichnis gehörte root), Branch `master` → `main`, Git-Identität lokal gesetzt
|
||||
- `.gitignore`, `CHANGELOG.md`, `DEVLOG.md`, Architekturplan und 15 Issues angelegt
|
||||
- #001 abgeschlossen: Next.js 16 (App Router, TypeScript strict), AdminLTE-CSS, Bootstrap Icons, zod, ESLint/Prettier/Vitest; Lint, Typecheck, Test und Build grün
|
||||
- #002 abgeschlossen: Prototyp mit Beispieldaten – Layout (Sidebar, Kopfleiste, Inhaltskopf, Footer), Logo als SVG-Komponente, Theme mit Farbvorgaben und Dark-Mode, Dashboard, Kunden (Liste und Detail), Hosts (Liste, Detail, nicht zugeordnet), Rechnungen, Jahresbahn, Einstellungsseiten, globale Suche mit Strg+K
|
||||
- Screenshots aller Seiten aufgenommen und in `docs/anleitung/bilder/` abgelegt
|
||||
|
||||
### 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).
|
||||
- **Kennzahlen werden berechnet, nicht hinterlegt:** auch im Prototyp kommen alle Zahlen aus den Beispieldaten, damit Tabellen und Kacheln nie widersprüchlich sind.
|
||||
- **AdminLTE 4.9.1 nur als CSS:** stabil, Bootstrap 5.3.8, kein jQuery; die JS-Plugins manipulieren das DOM und werden daher als React-Komponenten nachgebaut.
|
||||
- **Host-Identität über Agent-Token statt Server-ID:** Die Server-ID ändert sich bei Hardwaretausch und soll dann eine Warnung auslösen, statt einen neuen Host zu erzeugen.
|
||||
- **Rechnungen mit Positionen:** Proxmox-Sammelbestellungen und Sammelrechnungen an Kunden sollen ohne doppelte Rechnungsnummern abbildbar sein.
|
||||
@@ -33,8 +38,9 @@
|
||||
- **Prototyp direkt im Next.js-Projekt**, damit die Komponenten weiterverwendet werden.
|
||||
|
||||
### Probleme / offene Fragen
|
||||
- Docker ist nicht installiert und `sudo` erfordert ein Passwort → Installation muss manuell erfolgen (benötigt ab #003).
|
||||
- Docker ist nicht installiert und `sudo` erfordert ein Passwort → Installation muss manuell erfolgen (wird ab #003 gebraucht).
|
||||
- Favicon-Dateien (.ico/PNG) fehlen noch, weil kein SVG-Konverter installiert ist.
|
||||
- Offen: Rolle „readonly“ zusätzlich zu Admin? (vorläufig vorgesehen)
|
||||
|
||||
### Nächster Schritt
|
||||
- Next.js-Grundgerüst (#001), danach Prototyp (#002)
|
||||
- Rückmeldung zum Prototyp abwarten, dann #003 Datenmodell (braucht PostgreSQL per Docker)
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
+19
-16
@@ -1,31 +1,34 @@
|
||||
# #002 Klickbarer Prototyp
|
||||
**Status:** offen
|
||||
**Status:** erledigt
|
||||
**Meilenstein:** v0.1.0
|
||||
**Labels:** ui, prototyp
|
||||
**Geschätzt:** 8 h **Tatsächlich:** –
|
||||
**Geschätzt:** 8 h **Tatsächlich:** 0 h 20 min
|
||||
|
||||
## Ziel
|
||||
Klickbarer UI-Prototyp der Seiten „Dashboard“, „Kunden-Detail“ und „Host-Detail“ mit realistischen Beispieldaten und ohne Backend, als Abstimmungsgrundlage für Look & Feel. Die Komponenten werden in den späteren Phasen weiterverwendet.
|
||||
|
||||
## Aufgaben
|
||||
- [ ] Logo-Komponente (Standard, Sidebar-Variante, einfarbig, Favicon 32/16) + `favicon.svg`, `favicon.ico`, PNGs, `apple-touch-icon`
|
||||
- [ ] Theme: Farb-Tokens (abgedunkelte Info/Erfolg), Source Sans 3 (16 px), Monospace-Klasse mit Kopier-Button
|
||||
- [ ] Layout: Sidebar (250 px, einklappbar, Overlay mobil), Kopfleiste, Inhaltskopf mit Breadcrumb, Footer mit Version
|
||||
- [ ] Komponenten: SmallBox, InfoBox, Card, Badge, Callout, TodoList, ProgressBar, Tabs, CopyableCode
|
||||
- [ ] Beispieldaten (`src/mock/`): 4 Kunden, ~8 Hosts (PVE/PBS/PMG), Laufzeiten, Rechnungen, Alerts
|
||||
- [ ] Dashboard: 4 Small Boxes, Callout „Nicht zugeordnete Hosts“, Card „Subscriptions nach Ablauf“, Card „Aufgaben“, Card „Rechnungsstatus je Kunde“
|
||||
- [ ] Kunden-Detail: Info-Boxen (Hosts, Einkauf, Verkauf, Marge), Host-Tabelle, Laufzeiten-Tabelle, Summen pro Jahr, Ansprechpartner, Notizen
|
||||
- [ ] Host-Detail: Profil-Card + Tabs Übersicht, Subscription-Historie, Reports, Rechnungen, Notizen
|
||||
- [ ] Warnglocke mit Dropdown, Strg+K-Suchdialog (clientseitig über Mock-Daten)
|
||||
- [ ] Dark-Mode-Umschalter (Grundfunktion)
|
||||
- [x] Logo-Komponente (Standard, Sidebar-Variante, einfarbig, Favicon 32/16) + `favicon.svg`, `favicon.ico`, PNGs, `apple-touch-icon`
|
||||
- [x] Theme: Farb-Tokens (abgedunkelte Info/Erfolg), Source Sans 3 (16 px), Monospace-Klasse mit Kopier-Button
|
||||
- [x] Layout: Sidebar (250 px, einklappbar, Overlay mobil), Kopfleiste, Inhaltskopf mit Breadcrumb, Footer mit Version
|
||||
- [x] Komponenten: SmallBox, InfoBox, Card, Badge, Callout, TodoList, ProgressBar, Tabs, CopyableCode
|
||||
- [x] Beispieldaten (`src/mock/`): 4 Kunden, ~8 Hosts (PVE/PBS/PMG), Laufzeiten, Rechnungen, Alerts
|
||||
- [x] Dashboard: 4 Small Boxes, Callout „Nicht zugeordnete Hosts“, Card „Subscriptions nach Ablauf“, Card „Aufgaben“, Card „Rechnungsstatus je Kunde“
|
||||
- [x] Kunden-Detail: Info-Boxen (Hosts, Einkauf, Verkauf, Marge), Host-Tabelle, Laufzeiten-Tabelle, Summen pro Jahr, Ansprechpartner, Notizen
|
||||
- [x] Host-Detail: Profil-Card + Tabs Übersicht, Subscription-Historie, Reports, Rechnungen, Notizen
|
||||
- [x] Warnglocke mit Dropdown, Strg+K-Suchdialog (clientseitig über Mock-Daten)
|
||||
- [x] Dark-Mode-Umschalter (Grundfunktion)
|
||||
|
||||
## Akzeptanzkriterien
|
||||
- [ ] Alle drei Seiten sind über Sidebar/Links erreichbar und klickbar
|
||||
- [ ] Suche nach `pve1c-a6bd21fcb6` findet Host und Kunde
|
||||
- [ ] Mobil (375 px) benutzbar: Sidebar als Overlay, Tabellen scrollbar
|
||||
- [ ] Weiße Schrift auf Info/Erfolg erfüllt 4,5:1
|
||||
- [x] Alle drei Seiten sind über Sidebar/Links erreichbar und klickbar
|
||||
- [x] Suche nach `pve1c-a6bd21fcb6` findet Host und Kunde
|
||||
- [x] Mobil (375 px) benutzbar: Sidebar als Overlay, Tabellen scrollbar
|
||||
- [x] Weiße Schrift auf Info/Erfolg erfüllt 4,5:1
|
||||
|
||||
## Abhängigkeiten
|
||||
#001
|
||||
|
||||
## Notizen / Entscheidungen
|
||||
- Favicon-Dateien (`favicon.ico`, PNG-Größen, `apple-touch-icon`) fehlen noch; das Logo liegt als React-Komponente vor. Nachziehen in #007.
|
||||
- Screenshots des Prototyps liegen in `docs/anleitung/bilder/` und dienen als Grundlage für #016.
|
||||
- Auf dem Dashboard zeigt die Spalte „Proxmox“ bewusst die Rechnung der Verlängerung (Laufzeit, die am `nextduedate` beginnt), nicht die der laufenden Periode.
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
# #016 Benutzerhandbuch mit Screenshots
|
||||
**Status:** offen
|
||||
**Meilenstein:** v0.10.0
|
||||
**Labels:** docs
|
||||
**Geschätzt:** 5 h **Tatsächlich:** –
|
||||
|
||||
## Ziel
|
||||
Bebildertes Handbuch auf Deutsch, das den kompletten Weg zeigt: Dashboard installieren, Enrollment-Token erzeugen,
|
||||
Agent auf einem Host ausrollen, Host einem Kunden zuweisen, Laufzeit und Rechnungen pflegen, Warnungen und
|
||||
Benachrichtigungen einrichten.
|
||||
|
||||
## Aufgaben
|
||||
- [ ] Gliederung `docs/anleitung/README.md` (Installation, Erste Schritte, Agent ausrollen, Kunden und Hosts, Rechnungen, Warnungen, Benachrichtigungen, Backup)
|
||||
- [ ] Screenshots automatisiert erzeugen (`npm run screenshots`): Seiten anfahren, Aufnahmen nach `docs/anleitung/bilder/` schreiben
|
||||
- [ ] Aufnahmen in Hell und Dunkel, dazu eine Mobilansicht
|
||||
- [ ] Bilder mit Bildunterschriften und Alternativtexten einbinden
|
||||
- [ ] Screenshots vor jedem Release auffrischen (Hinweis in der Release-Checkliste)
|
||||
- [ ] Verweise aus README und Dashboard-Hilfe auf das Handbuch
|
||||
|
||||
## Akzeptanzkriterien
|
||||
- [ ] Jemand ohne Vorkenntnisse kann anhand des Handbuchs Dashboard und Agent installieren
|
||||
- [ ] Jeder Arbeitsschritt hat mindestens ein Bild
|
||||
- [ ] Bilder zeigen Beispieldaten, keine echten Kundendaten
|
||||
|
||||
## Abhängigkeiten
|
||||
#014
|
||||
|
||||
## Notizen / Entscheidungen
|
||||
- Aufnahmen laufen über Firefox im Headless-Modus (`firefox --profile <profil> --headless --screenshot`),
|
||||
weil Firefox auf dem Entwicklungsrechner ohnehin vorhanden ist und kein Browser nachinstalliert werden muss.
|
||||
Das Profil braucht `user_pref("layout.css.prefers-color-scheme.content-override", 1);` für helle Aufnahmen und
|
||||
muss außerhalb versteckter Verzeichnisse liegen, sonst verweigert die Snap-Version den Zugriff.
|
||||
- Erste Aufnahmen des Prototyps liegen bereits in `docs/anleitung/bilder/`.
|
||||
@@ -5,8 +5,8 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
|
||||
| Nr. | Titel | Status | Meilenstein | Geschätzt | Tatsächlich |
|
||||
|---|---|---|---|---|---|
|
||||
| [#001](001-projekt-setup.md) | Projekt-Setup | erledigt | v0.1.0 | 3 h | 0 h 08 min |
|
||||
| [#002](002-prototyp.md) | Klickbarer Prototyp | in Arbeit | v0.1.0 | 8 h | – |
|
||||
| [#003](003-datenmodell.md) | Datenmodell und Migrationen | offen | v0.1.0 | 5 h | – |
|
||||
| [#002](002-prototyp.md) | Klickbarer Prototyp | erledigt | v0.1.0 | 8 h | 0 h 20 min |
|
||||
| [#003](003-datenmodell.md) | Datenmodell und Migrationen | in Arbeit | v0.1.0 | 5 h | – |
|
||||
| [#004](004-agent-api.md) | Agent-API | offen | v0.1.0 | 6 h | – |
|
||||
| [#005](005-agent-skript.md) | Agent-Skript | offen | v0.2.0 | 8 h | – |
|
||||
| [#006](006-kunden-hostzuweisung.md) | Kunden, Standorte und Hostzuweisung | offen | v0.3.0 | 6 h | – |
|
||||
@@ -19,4 +19,5 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
|
||||
| [#013](013-authentifizierung.md) | Authentifizierung und Audit-Log | offen | v0.9.0 | 6 h | – |
|
||||
| [#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 | – |
|
||||
| | **Summe** | | | **101 h** | **0 h 08 min** |
|
||||
| [#016](016-anleitung-screenshots.md) | Benutzerhandbuch mit Screenshots | offen | v0.10.0 | 5 h | – |
|
||||
| | **Summe** | | | **106 h** | **0 h 28 min** |
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
|
||||
export const metadata = { title: "Benachrichtigungen" };
|
||||
|
||||
export default function BenachrichtigungenSeite() {
|
||||
return (
|
||||
<>
|
||||
<ContentHeader
|
||||
titel="Benachrichtigungen"
|
||||
brotkrumen={[{ titel: "Einstellungen" }, { titel: "Benachrichtigungen" }]}
|
||||
/>
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<Card titel="E-Mail und Webhook" rahmen="primary">
|
||||
<p className="text-body-secondary mb-0">
|
||||
SMTP (Microsoft 365), Webhooks und die tägliche Zusammenfassung werden in #012 umgesetzt.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { APP_VERSION } from "@/lib/version";
|
||||
|
||||
export const metadata = { title: "System" };
|
||||
|
||||
export default function SystemSeite() {
|
||||
return (
|
||||
<>
|
||||
<ContentHeader titel="System" brotkrumen={[{ titel: "Einstellungen" }, { titel: "System" }]} />
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<Card titel="Systeminformationen" rahmen="primary">
|
||||
<dl className="row mb-0">
|
||||
<dt className="col-4 fw-normal text-body-secondary">Version</dt>
|
||||
<dd className="col-8">{APP_VERSION}</dd>
|
||||
<dt className="col-4 fw-normal text-body-secondary">Datenquelle</dt>
|
||||
<dd className="col-8">Beispieldaten (Prototyp, #002)</dd>
|
||||
<dt className="col-4 fw-normal text-body-secondary">Warnregeln</dt>
|
||||
<dd className="col-8">Konfigurierbar ab #011</dd>
|
||||
</dl>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { CopyableCode } from "@/components/ui/CopyableCode";
|
||||
|
||||
export const metadata = { title: "Agent-Tokens" };
|
||||
|
||||
export default function TokensSeite() {
|
||||
return (
|
||||
<>
|
||||
<ContentHeader
|
||||
titel="Agent-Tokens"
|
||||
brotkrumen={[{ titel: "Einstellungen" }, { titel: "Agent-Tokens" }]}
|
||||
/>
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<Card titel="Agent installieren" rahmen="primary">
|
||||
<p>
|
||||
Auf dem Proxmox-Host als root ausführen. Der Enrollment-Token gilt bis zum angegebenen Datum und
|
||||
kann mehrfach verwendet werden.
|
||||
</p>
|
||||
<pre className="bg-body-secondary p-3 rounded">
|
||||
<code className="pl-mono">
|
||||
curl -fsSL https://proxledger.example.de/install.sh | bash -s -- --token plx_e_BEISPIEL
|
||||
</code>
|
||||
</pre>
|
||||
<CopyableCode wert="plx_e_BEISPIEL" />
|
||||
</Card>
|
||||
<Card titel="Vorhandene Tokens" rahmen="info">
|
||||
<p className="text-body-secondary mb-0">
|
||||
Ausgabe, Ablauf und Widerruf von Enrollment- und Host-Tokens folgen in #006.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,315 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import {
|
||||
AblaufBadge,
|
||||
Badge,
|
||||
EinkaufBadge,
|
||||
KeineMeldungBadge,
|
||||
StatusBadge,
|
||||
VerkaufBadge,
|
||||
} from "@/components/ui/Badges";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { CopyableCode } from "@/components/ui/CopyableCode";
|
||||
import { Tabs } from "@/components/ui/Tabs";
|
||||
import { formatDatum, formatDatumZeit, formatEuro, formatUptime, formatZahl } from "@/lib/format";
|
||||
import { HEUTE, hosts } from "@/mock/data";
|
||||
import {
|
||||
PRODUKT_NAME,
|
||||
alertsVonHost,
|
||||
getHost,
|
||||
getKunde,
|
||||
hostMeldetNicht,
|
||||
laufzeitenVonHost,
|
||||
reportsVonHost,
|
||||
} from "@/mock/queries";
|
||||
|
||||
export function generateStaticParams() {
|
||||
return hosts.map((host) => ({ id: host.id }));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
return { title: getHost(id)?.hostname ?? "Host" };
|
||||
}
|
||||
|
||||
function Zeile({ bezeichnung, children }: { bezeichnung: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="d-flex justify-content-between gap-3 py-2 border-bottom">
|
||||
<span className="text-body-secondary">{bezeichnung}</span>
|
||||
<span className="text-end">{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function HostDetailSeite({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const host = getHost(id);
|
||||
if (!host) notFound();
|
||||
|
||||
const kunde = getKunde(host.kundeId);
|
||||
const standort = kunde?.standorte.find((s) => s.id === host.standortId);
|
||||
const laufzeiten = laufzeitenVonHost(host.id);
|
||||
const reports = reportsVonHost(host.id);
|
||||
const alerts = alertsVonHost(host.id);
|
||||
const keys = [...new Set(laufzeiten.map((l) => l.key))];
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentHeader
|
||||
titel={host.hostname}
|
||||
brotkrumen={[{ titel: "Hosts", href: "/hosts" }, { titel: host.hostname }]}
|
||||
aktion={<StatusBadge status={host.subscription.status} />}
|
||||
/>
|
||||
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
{alerts.length > 0 ? (
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<Card titel="Offene Warnungen" rahmen="danger">
|
||||
<ul className="list-unstyled mb-0">
|
||||
{alerts.map((alert) => (
|
||||
<li key={alert.id} className="mb-2">
|
||||
<Badge
|
||||
farbe={
|
||||
alert.schwere === "gefahr"
|
||||
? "danger"
|
||||
: alert.schwere === "warnung"
|
||||
? "warning"
|
||||
: "info"
|
||||
}
|
||||
>
|
||||
{alert.titel}
|
||||
</Badge>{" "}
|
||||
<span className="small text-body-secondary">{alert.beschreibung}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<Card titel="Host" rahmen="primary">
|
||||
<div className="text-center mb-3">
|
||||
<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}
|
||||
</div>
|
||||
|
||||
<Zeile bezeichnung="Kunde">
|
||||
{kunde ? (
|
||||
<Link href={`/kunden/${kunde.id}`}>{kunde.name}</Link>
|
||||
) : (
|
||||
<Link href="/hosts/nicht-zugeordnet" className="badge pl-bg-neutral text-decoration-none">
|
||||
Nicht zugeordnet
|
||||
</Link>
|
||||
)}
|
||||
</Zeile>
|
||||
<Zeile bezeichnung="Standort">{standort?.name ?? "–"}</Zeile>
|
||||
<Zeile bezeichnung="Produkt">{PRODUKT_NAME[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}` : "–"}
|
||||
</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 ?? "–"}
|
||||
</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="Letzte Meldung">{formatDatumZeit(host.letzterReport)}</Zeile>
|
||||
<div className="d-grid gap-2 mt-3">
|
||||
<span className="btn btn-outline-secondary disabled">Kunde ändern (ab #006)</span>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-8">
|
||||
<Tabs
|
||||
tabs={[
|
||||
{
|
||||
id: "uebersicht",
|
||||
titel: "Übersicht",
|
||||
icon: "bi-info-circle",
|
||||
inhalt: (
|
||||
<>
|
||||
<Zeile bezeichnung="Subscription-Key">
|
||||
<CopyableCode wert={host.subscription.key} />
|
||||
</Zeile>
|
||||
<Zeile bezeichnung="Status">
|
||||
<StatusBadge status={host.subscription.status} />
|
||||
</Zeile>
|
||||
<Zeile bezeichnung="Produktname">{host.subscription.produktname ?? "–"}</Zeile>
|
||||
<Zeile bezeichnung="Level">{host.subscription.level ?? "–"}</Zeile>
|
||||
<Zeile bezeichnung="Registriert am">{formatDatum(host.subscription.regdate)}</Zeile>
|
||||
<Zeile bezeichnung="Läuft ab am">
|
||||
<AblaufBadge datum={host.subscription.nextduedate} heute={HEUTE} />
|
||||
</Zeile>
|
||||
<Zeile bezeichnung="Letzte Prüfung durch Proxmox">
|
||||
{formatDatumZeit(host.subscription.checktime)}
|
||||
</Zeile>
|
||||
<div className="mt-3">
|
||||
{host.tags.map((tag) => (
|
||||
<span key={tag} className="badge pl-bg-neutral me-1">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "keys",
|
||||
titel: "Subscription-Historie",
|
||||
icon: "bi-key",
|
||||
inhalt: (
|
||||
<table className="table table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Key</th>
|
||||
<th scope="col">Erste Laufzeit</th>
|
||||
<th scope="col">Letzte Laufzeit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{keys.map((key) => {
|
||||
const zugehoerig = laufzeiten.filter((l) => l.key === key);
|
||||
return (
|
||||
<tr key={key}>
|
||||
<td>
|
||||
<CopyableCode wert={key} />
|
||||
</td>
|
||||
<td>{formatDatum(zugehoerig[zugehoerig.length - 1]?.start)}</td>
|
||||
<td>{formatDatum(zugehoerig[0]?.ende)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "reports",
|
||||
titel: "Reports",
|
||||
icon: "bi-clock-history",
|
||||
inhalt: (
|
||||
<table className="table table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Zeitpunkt</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Key</th>
|
||||
<th scope="col">Ablauf</th>
|
||||
<th scope="col">Updates</th>
|
||||
<th scope="col">Agent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "rechnungen",
|
||||
titel: "Rechnungen",
|
||||
icon: "bi-receipt",
|
||||
inhalt: (
|
||||
<table className="table table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Laufzeit</th>
|
||||
<th scope="col">Proxmox-Rechnung</th>
|
||||
<th scope="col">Einkauf</th>
|
||||
<th scope="col">Kundenrechnung</th>
|
||||
<th scope="col">Verkauf</th>
|
||||
<th scope="col">Marge</th>
|
||||
</tr>
|
||||
</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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "notizen",
|
||||
titel: "Notizen",
|
||||
icon: "bi-journal-text",
|
||||
inhalt: (
|
||||
<p className="mb-0">
|
||||
{host.notizen ?? (
|
||||
<span className="text-body-secondary">Keine Notizen hinterlegt.</span>
|
||||
)}
|
||||
</p>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { Callout } from "@/components/ui/Callout";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { CopyableCode } from "@/components/ui/CopyableCode";
|
||||
import { formatDatumZeit } from "@/lib/format";
|
||||
import { kunden } from "@/mock/data";
|
||||
import { PRODUKT_NAME, nichtZugeordneteHosts } from "@/mock/queries";
|
||||
|
||||
export const metadata = { title: "Nicht zugeordnete Hosts" };
|
||||
|
||||
export default function NichtZugeordnetSeite() {
|
||||
const liste = nichtZugeordneteHosts();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentHeader
|
||||
titel="Nicht zugeordnete Hosts"
|
||||
brotkrumen={[{ titel: "Hosts", href: "/hosts" }, { titel: "Nicht zugeordnet" }]}
|
||||
/>
|
||||
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<Callout titel="Schnellzuweisung" farbe="info">
|
||||
Mehrere Hosts auswählen und gemeinsam einem Kunden zuweisen. Im Prototyp ist das Formular noch
|
||||
ohne Funktion – die Zuweisung folgt in #006.
|
||||
</Callout>
|
||||
|
||||
<Card titel={`${liste.length} Hosts ohne Kunde`} rahmen="warning" tabelle>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<input type="checkbox" className="form-check-input" aria-label="Alle auswählen" />
|
||||
</th>
|
||||
<th scope="col">Host</th>
|
||||
<th scope="col">Produkt</th>
|
||||
<th scope="col">Server-ID</th>
|
||||
<th scope="col">Key</th>
|
||||
<th scope="col">Erste Meldung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{liste.map((host) => (
|
||||
<tr key={host.id}>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
aria-label={`${host.hostname} auswählen`}
|
||||
defaultChecked
|
||||
/>
|
||||
</td>
|
||||
<td className="fw-semibold">{host.hostname}</td>
|
||||
<td>{PRODUKT_NAME[host.produkt]}</td>
|
||||
<td>
|
||||
<CopyableCode wert={host.serverId} />
|
||||
</td>
|
||||
<td>
|
||||
<CopyableCode wert={host.subscription.key} />
|
||||
</td>
|
||||
<td>{formatDatumZeit(host.letzterReport)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card titel="Ausgewählte Hosts zuweisen">
|
||||
<div className="row g-2 align-items-end">
|
||||
<div className="col-md-5">
|
||||
<label className="form-label" htmlFor="kunde">
|
||||
Kunde
|
||||
</label>
|
||||
<select id="kunde" className="form-select">
|
||||
{kunden.map((kunde) => (
|
||||
<option key={kunde.id}>{kunde.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-5">
|
||||
<label className="form-label" htmlFor="standort">
|
||||
Standort (optional)
|
||||
</label>
|
||||
<select id="standort" className="form-select">
|
||||
<option>– kein Standort –</option>
|
||||
{kunden[0].standorte.map((standort) => (
|
||||
<option key={standort.id}>{standort.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<button type="button" className="btn btn-primary w-100" disabled>
|
||||
Zuweisen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import Link from "next/link";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
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_NAME, getKunde, hostMeldetNicht, suche } from "@/mock/queries";
|
||||
|
||||
export const metadata = { title: "Hosts" };
|
||||
|
||||
export default async function HostsSeite({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ q?: string; status?: string; kunde?: string }>;
|
||||
}) {
|
||||
const { q, status, kunde } = await searchParams;
|
||||
|
||||
let liste = q ? suche(q).hosts : hosts;
|
||||
if (status) liste = liste.filter((h) => h.subscription.status === status);
|
||||
if (kunde) liste = liste.filter((h) => h.kundeId === kunde);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentHeader titel="Hosts" brotkrumen={[{ titel: "Hosts" }]} />
|
||||
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<Card
|
||||
titel={`${liste.length} von ${hosts.length} Hosts`}
|
||||
rahmen="primary"
|
||||
tabelle
|
||||
werkzeuge={
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form className="p-3 border-bottom row g-2" role="search">
|
||||
<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>
|
||||
<th scope="col">Kunde</th>
|
||||
<th scope="col">Produkt</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Key</th>
|
||||
<th scope="col">Ablauf</th>
|
||||
<th scope="col">Sockets</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{liste.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}
|
||||
<div className="small text-body-secondary">{host.ips.join(", ")}</div>
|
||||
</td>
|
||||
<td>
|
||||
{kundeDesHosts ? (
|
||||
<Link href={`/kunden/${kundeDesHosts.id}`} className="text-decoration-none">
|
||||
{kundeDesHosts.name}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="badge pl-bg-neutral">Nicht zugeordnet</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{PRODUKT_NAME[host.produkt]}</td>
|
||||
<td>
|
||||
<StatusBadge status={host.subscription.status} />
|
||||
</td>
|
||||
<td>
|
||||
<CopyableCode wert={host.subscription.key} />
|
||||
</td>
|
||||
<td>
|
||||
<AblaufBadge datum={host.subscription.nextduedate} heute={HEUTE} />
|
||||
</td>
|
||||
<td>
|
||||
{host.subscription.lizenzierteSockets ?? "–"} / {host.sockets ?? "–"}
|
||||
{socketAbweichung ? (
|
||||
<i
|
||||
className="bi bi-exclamation-triangle-fill pl-text-warning ms-2"
|
||||
title="Lizenzierte und physische Sockets weichen ab"
|
||||
/>
|
||||
) : null}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{liste.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="text-center text-body-secondary py-4">
|
||||
Keine Hosts gefunden.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import Link from "next/link";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { formatDatum, tageBis } from "@/lib/format";
|
||||
import { HEUTE, hosts, kunden } from "@/mock/data";
|
||||
|
||||
export const metadata = { title: "Jahresbahn" };
|
||||
|
||||
const MONATE = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
|
||||
|
||||
export default function JahresbahnSeite() {
|
||||
const start = new Date(Date.UTC(HEUTE.getUTCFullYear(), HEUTE.getUTCMonth(), 1));
|
||||
const gesamtTage = 365;
|
||||
|
||||
function position(datum: string): number | null {
|
||||
const tage = Math.round((new Date(datum).getTime() - start.getTime()) / 86_400_000);
|
||||
if (tage < 0 || tage > gesamtTage) return null;
|
||||
return (tage / gesamtTage) * 100;
|
||||
}
|
||||
|
||||
const heutePosition = position(HEUTE.toISOString().slice(0, 10)) ?? 0;
|
||||
|
||||
const monatsBeschriftung = Array.from({ length: 12 }, (_, i) => {
|
||||
const datum = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth() + i, 1));
|
||||
return `${MONATE[datum.getUTCMonth()]} ${String(datum.getUTCFullYear()).slice(2)}`;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentHeader titel="Jahresbahn" brotkrumen={[{ titel: "Jahresbahn" }]} />
|
||||
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<Card titel="Abläufe der nächsten 12 Monate" rahmen="primary">
|
||||
<div className="table-responsive">
|
||||
<div style={{ minWidth: "760px" }}>
|
||||
<div className="d-flex text-body-secondary small mb-2" style={{ marginLeft: "12rem" }}>
|
||||
{monatsBeschriftung.map((monat) => (
|
||||
<div key={monat} style={{ width: `${100 / 12}%` }}>
|
||||
{monat}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{kunden.map((kunde) => {
|
||||
const eigene = hosts.filter(
|
||||
(h) => h.kundeId === kunde.id && h.subscription.nextduedate !== null,
|
||||
);
|
||||
if (eigene.length === 0) return null;
|
||||
return (
|
||||
<div key={kunde.id} className="mb-3">
|
||||
<div className="fw-semibold small mb-1">
|
||||
<Link href={`/kunden/${kunde.id}`} className="text-decoration-none">
|
||||
{kunde.name}
|
||||
</Link>
|
||||
</div>
|
||||
{eigene.map((host) => {
|
||||
const datum = host.subscription.nextduedate!;
|
||||
const links = position(datum.slice(0, 10));
|
||||
const tage = tageBis(datum, HEUTE);
|
||||
const farbe =
|
||||
tage === null || tage < 14
|
||||
? "var(--pl-danger)"
|
||||
: tage < 30
|
||||
? "var(--pl-warning)"
|
||||
: "var(--pl-info)";
|
||||
return (
|
||||
<div key={host.id} className="d-flex align-items-center mb-1">
|
||||
<div className="small text-truncate" style={{ width: "12rem" }}>
|
||||
<Link href={`/hosts/${host.id}`} className="text-decoration-none">
|
||||
{host.hostname}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pl-timeline-row flex-grow-1 position-relative">
|
||||
<div className="pl-timeline-heute" style={{ left: `${heutePosition}%` }} />
|
||||
{links === null ? (
|
||||
<span className="small text-body-secondary ms-2">
|
||||
außerhalb des Zeitraums ({formatDatum(datum)})
|
||||
</span>
|
||||
) : (
|
||||
<div
|
||||
className="pl-timeline-bar"
|
||||
style={{
|
||||
left: `${Math.max(0, links - 6)}%`,
|
||||
backgroundColor: farbe,
|
||||
color: farbe === "var(--pl-warning)" ? "var(--pl-warning-text)" : "#fff",
|
||||
}}
|
||||
title={`${host.hostname} läuft am ${formatDatum(datum)} ab`}
|
||||
>
|
||||
{formatDatum(datum)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<p className="small text-body-secondary mb-0">
|
||||
Die rote Linie markiert heute ({formatDatum(HEUTE)}). Farbe der Balken: rot unter 14 Tagen, gelb
|
||||
unter 30 Tagen, sonst blau.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import {
|
||||
AblaufBadge,
|
||||
EinkaufBadge,
|
||||
KeineMeldungBadge,
|
||||
StatusBadge,
|
||||
VerkaufBadge,
|
||||
} from "@/components/ui/Badges";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { CopyableCode } from "@/components/ui/CopyableCode";
|
||||
import { InfoBox } from "@/components/ui/SmallBox";
|
||||
import { formatDatum, formatEuro } from "@/lib/format";
|
||||
import { HEUTE, kunden } from "@/mock/data";
|
||||
import {
|
||||
PRODUKT_NAME,
|
||||
alertsVonKunde,
|
||||
getKunde,
|
||||
hostMeldetNicht,
|
||||
hostsVonKunde,
|
||||
laufzeitenVonKunde,
|
||||
summenProJahr,
|
||||
summenVonKunde,
|
||||
} from "@/mock/queries";
|
||||
|
||||
export function generateStaticParams() {
|
||||
return kunden.map((kunde) => ({ id: kunde.id }));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
return { title: getKunde(id)?.name ?? "Kunde" };
|
||||
}
|
||||
|
||||
export default async function KundenDetailSeite({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const kunde = getKunde(id);
|
||||
if (!kunde) notFound();
|
||||
|
||||
const eigeneHosts = hostsVonKunde(kunde.id);
|
||||
const laufzeiten = laufzeitenVonKunde(kunde.id);
|
||||
const summen = summenVonKunde(kunde.id);
|
||||
const proJahr = summenProJahr(laufzeiten);
|
||||
const alerts = alertsVonKunde(kunde.id);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentHeader
|
||||
titel={kunde.name}
|
||||
brotkrumen={[{ titel: "Kunden", href: "/kunden" }, { titel: kunde.name }]}
|
||||
/>
|
||||
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-6 col-lg-3">
|
||||
<InfoBox text="Hosts" wert={String(eigeneHosts.length)} icon="bi-hdd-stack" farbe="info" />
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<InfoBox
|
||||
text="Einkauf netto"
|
||||
wert={formatEuro(summen.einkauf)}
|
||||
icon="bi-cart"
|
||||
farbe="neutral"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<InfoBox
|
||||
text="Verkauf netto"
|
||||
wert={formatEuro(summen.verkauf)}
|
||||
icon="bi-receipt"
|
||||
farbe="primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<InfoBox
|
||||
text="Marge"
|
||||
wert={formatEuro(summen.marge)}
|
||||
icon="bi-graph-up-arrow"
|
||||
farbe="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<Card titel="Stammdaten" rahmen="primary">
|
||||
<dl className="row mb-0">
|
||||
<dt className="col-5 fw-normal text-body-secondary">Kundennummer</dt>
|
||||
<dd className="col-7 pl-mono">{kunde.kundennummer}</dd>
|
||||
<dt className="col-5 fw-normal text-body-secondary">Ansprechpartner</dt>
|
||||
<dd className="col-7">{kunde.ansprechpartner ?? "–"}</dd>
|
||||
<dt className="col-5 fw-normal text-body-secondary">E-Mail</dt>
|
||||
<dd className="col-7">
|
||||
{kunde.email ? <a href={`mailto:${kunde.email}`}>{kunde.email}</a> : "–"}
|
||||
</dd>
|
||||
<dt className="col-5 fw-normal text-body-secondary">Telefon</dt>
|
||||
<dd className="col-7">{kunde.telefon ?? "–"}</dd>
|
||||
<dt className="col-5 fw-normal text-body-secondary">Standorte</dt>
|
||||
<dd className="col-7">
|
||||
{kunde.standorte.map((s) => (
|
||||
<div key={s.id}>
|
||||
{s.name}
|
||||
{s.ort ? <span className="text-body-secondary"> · {s.ort}</span> : null}
|
||||
</div>
|
||||
))}
|
||||
</dd>
|
||||
</dl>
|
||||
<hr />
|
||||
<h4 className="h6">Notizen</h4>
|
||||
<p className="mb-0 small">
|
||||
{kunde.notizen ?? <span className="text-body-secondary">Keine Notizen hinterlegt.</span>}
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card titel="Offene Warnungen" rahmen={alerts.length > 0 ? "danger" : "info"}>
|
||||
{alerts.length === 0 ? (
|
||||
<p className="mb-0 text-body-secondary">Keine offenen Warnungen.</p>
|
||||
) : (
|
||||
<ul className="list-unstyled mb-0 small">
|
||||
{alerts.map((alert) => (
|
||||
<li key={alert.id} className="mb-2">
|
||||
<strong>{alert.titel}</strong>
|
||||
<div className="text-body-secondary">{alert.beschreibung}</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-8">
|
||||
<Card titel="Hosts" rahmen="primary" tabelle>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Host</th>
|
||||
<th scope="col">Produkt</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Key</th>
|
||||
<th scope="col">Ablauf</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{eigeneHosts.map((host) => (
|
||||
<tr key={host.id}>
|
||||
<td>
|
||||
<Link href={`/hosts/${host.id}`} className="fw-semibold text-decoration-none">
|
||||
{host.hostname}
|
||||
</Link>
|
||||
{hostMeldetNicht(host) ? <KeineMeldungBadge /> : null}
|
||||
</td>
|
||||
<td>{PRODUKT_NAME[host.produkt]}</td>
|
||||
<td>
|
||||
<StatusBadge status={host.subscription.status} />
|
||||
</td>
|
||||
<td>
|
||||
<CopyableCode wert={host.subscription.key} />
|
||||
</td>
|
||||
<td>
|
||||
<AblaufBadge datum={host.subscription.nextduedate} heute={HEUTE} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card titel="Laufzeiten und Rechnungen" rahmen="info" tabelle>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Laufzeit</th>
|
||||
<th scope="col">Host</th>
|
||||
<th scope="col">Proxmox</th>
|
||||
<th scope="col">Einkauf</th>
|
||||
<th scope="col">Kundenrechnung</th>
|
||||
<th scope="col">Verkauf</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{laufzeiten.map((laufzeit) => {
|
||||
const host = eigeneHosts.find((h) => h.id === laufzeit.hostId);
|
||||
return (
|
||||
<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>{host?.hostname ?? "–"}</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>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card titel="Summen pro Jahr" rahmen="info" tabelle>
|
||||
<table className="table table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Jahr</th>
|
||||
<th scope="col">Einkauf netto</th>
|
||||
<th scope="col">Verkauf netto</th>
|
||||
<th scope="col">Marge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{proJahr.map((jahr) => (
|
||||
<tr key={jahr.jahr}>
|
||||
<td>{jahr.jahr}</td>
|
||||
<td>{formatEuro(jahr.einkauf)}</td>
|
||||
<td>{formatEuro(jahr.verkauf)}</td>
|
||||
<td className={jahr.marge >= 0 ? "pl-text-success" : "pl-text-danger"}>
|
||||
{formatEuro(jahr.marge)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import Link from "next/link";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { AblaufBadge, Badge } from "@/components/ui/Badges";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { formatEuro } from "@/lib/format";
|
||||
import { HEUTE } from "@/mock/data";
|
||||
import { kundenUebersicht, summenVonKunde } from "@/mock/queries";
|
||||
|
||||
export const metadata = { title: "Kunden" };
|
||||
|
||||
export default function KundenSeite() {
|
||||
const uebersicht = kundenUebersicht();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentHeader titel="Kunden" brotkrumen={[{ titel: "Kunden" }]} />
|
||||
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<Card
|
||||
titel={`${uebersicht.length} Kunden`}
|
||||
rahmen="primary"
|
||||
tabelle
|
||||
werkzeuge={<span className="btn btn-sm btn-primary disabled">Kunde anlegen (ab #006)</span>}
|
||||
>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Kunde</th>
|
||||
<th scope="col">Kundennummer</th>
|
||||
<th scope="col">Hosts</th>
|
||||
<th scope="col">Aktiv</th>
|
||||
<th scope="col">Nächster Ablauf</th>
|
||||
<th scope="col">Warnungen</th>
|
||||
<th scope="col">Rechnungen</th>
|
||||
<th scope="col">Marge (netto)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{uebersicht.map((eintrag) => {
|
||||
const summen = summenVonKunde(eintrag.kunde.id);
|
||||
return (
|
||||
<tr key={eintrag.kunde.id}>
|
||||
<td>
|
||||
<Link
|
||||
href={`/kunden/${eintrag.kunde.id}`}
|
||||
className="fw-semibold text-decoration-none"
|
||||
>
|
||||
{eintrag.kunde.name}
|
||||
</Link>
|
||||
<div className="small text-body-secondary">
|
||||
{eintrag.kunde.ansprechpartner ?? "–"}
|
||||
</div>
|
||||
</td>
|
||||
<td className="pl-mono">{eintrag.kunde.kundennummer}</td>
|
||||
<td>{eintrag.hosts}</td>
|
||||
<td>{eintrag.aktiv}</td>
|
||||
<td>
|
||||
<AblaufBadge datum={eintrag.naechsterAblauf} heute={HEUTE} />
|
||||
</td>
|
||||
<td>
|
||||
{eintrag.offeneAlerts > 0 ? (
|
||||
<Badge farbe="warning">{eintrag.offeneAlerts} offen</Badge>
|
||||
) : (
|
||||
<Badge farbe="success">keine</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{eintrag.offeneRechnungspunkte > 0 ? (
|
||||
<Badge farbe="danger">{eintrag.offeneRechnungspunkte} offen</Badge>
|
||||
) : (
|
||||
<Badge farbe="success">erledigt</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td>{formatEuro(summen.marge)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Footer } from "@/components/layout/Footer";
|
||||
import { Header } from "@/components/layout/Header";
|
||||
import { Sidebar } from "@/components/layout/Sidebar";
|
||||
import { hosts } from "@/mock/data";
|
||||
import { dashboardKennzahlen, offeneAlerts } from "@/mock/queries";
|
||||
import { suchIndex } from "@/mock/suchindex";
|
||||
|
||||
const BENUTZER = "Florian";
|
||||
|
||||
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||
const kennzahlen = dashboardKennzahlen();
|
||||
|
||||
return (
|
||||
<div className="app-wrapper">
|
||||
<Header alerts={offeneAlerts()} suchEintraege={suchIndex()} benutzer={BENUTZER} />
|
||||
<Sidebar
|
||||
hostsAnzahl={hosts.length}
|
||||
offeneRechnungspunkte={kennzahlen.offeneRechnungspunkte}
|
||||
benutzer={BENUTZER}
|
||||
/>
|
||||
<main className="app-main">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
import Link from "next/link";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { AblaufBadge, EinkaufBadge, KeineMeldungBadge, VerkaufBadge } from "@/components/ui/Badges";
|
||||
import { Callout, ProgressBar } from "@/components/ui/Callout";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { CopyableCode } from "@/components/ui/CopyableCode";
|
||||
import { SmallBox } from "@/components/ui/SmallBox";
|
||||
import { TodoList, type Aufgabe } from "@/components/ui/TodoList";
|
||||
import { formatDatum, formatEuro } from "@/lib/format";
|
||||
import { HEUTE } from "@/mock/data";
|
||||
import {
|
||||
laufzeitZuAblauf,
|
||||
dashboardKennzahlen,
|
||||
getKunde,
|
||||
hostMeldetNicht,
|
||||
hostsNachAblauf,
|
||||
nichtZugeordneteHosts,
|
||||
offeneRechnungsLaufzeiten,
|
||||
rechnungsFortschrittProKunde,
|
||||
} from "@/mock/queries";
|
||||
|
||||
export const metadata = { title: "Dashboard" };
|
||||
|
||||
function aufgabenliste(): Aufgabe[] {
|
||||
return offeneRechnungsLaufzeiten().flatMap((laufzeit) => {
|
||||
const host = hostsNachAblauf().find((h) => h.id === laufzeit.hostId);
|
||||
const kunde = getKunde(host?.kundeId ?? null);
|
||||
const basis = `${host?.hostname ?? "?"} · ${kunde?.name ?? "Nicht zugeordnet"}`;
|
||||
const aufgaben: Aufgabe[] = [];
|
||||
|
||||
if (laufzeit.einkauf && !laufzeit.einkauf.bezahlt) {
|
||||
aufgaben.push({
|
||||
id: `${laufzeit.id}-einkauf`,
|
||||
titel: `Proxmox-Rechnung ${laufzeit.einkauf.nummer} bezahlen`,
|
||||
detail: `${basis} · ${formatEuro(laufzeit.einkauf.nettoBetrag)} netto · fällig am ${formatDatum(
|
||||
laufzeit.einkauf.faelligAm,
|
||||
)}`,
|
||||
dringlichkeit: "gefahr",
|
||||
badgeText: "Einkauf",
|
||||
href: `/hosts/${laufzeit.hostId}`,
|
||||
});
|
||||
}
|
||||
|
||||
if (laufzeit.einkauf && (!laufzeit.verkauf || !laufzeit.verkauf.erstellt)) {
|
||||
aufgaben.push({
|
||||
id: `${laufzeit.id}-verkauf`,
|
||||
titel: "Kundenrechnung erstellen",
|
||||
detail: `${basis} · Laufzeit ${formatDatum(laufzeit.start)} – ${formatDatum(laufzeit.ende)}`,
|
||||
dringlichkeit: "warnung",
|
||||
badgeText: "Verkauf",
|
||||
href: `/rechnungen`,
|
||||
});
|
||||
}
|
||||
|
||||
return aufgaben;
|
||||
});
|
||||
}
|
||||
|
||||
export default function DashboardSeite() {
|
||||
const kennzahlen = dashboardKennzahlen();
|
||||
const ohneKunde = nichtZugeordneteHosts();
|
||||
const fortschritt = rechnungsFortschrittProKunde();
|
||||
const aufgaben = aufgabenliste();
|
||||
|
||||
const nichtZugeordnetAufgaben: Aufgabe[] = ohneKunde.map((host) => ({
|
||||
id: `zuweisen-${host.id}`,
|
||||
titel: `${host.hostname} einem Kunden zuweisen`,
|
||||
detail: `Server-ID ${host.serverId} · seit ${formatDatum(host.letzterReport)} gemeldet`,
|
||||
dringlichkeit: "info",
|
||||
badgeText: "Zuweisen",
|
||||
href: "/hosts/nicht-zugeordnet",
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentHeader titel="Dashboard" brotkrumen={[{ titel: "Dashboard" }]} />
|
||||
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
{ohneKunde.length > 0 ? (
|
||||
<Callout
|
||||
titel={`${ohneKunde.length} Host${ohneKunde.length === 1 ? "" : "s"} ohne Kunde`}
|
||||
aktion={
|
||||
<Link href="/hosts/nicht-zugeordnet" className="btn btn-primary pl-touch-target">
|
||||
Jetzt zuweisen
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
Neu registrierte Hosts erscheinen hier, bis sie einem Kunden zugewiesen sind:{" "}
|
||||
{ohneKunde.map((h) => h.hostname).join(", ")}
|
||||
</Callout>
|
||||
) : null}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-6 col-lg-3">
|
||||
<SmallBox
|
||||
wert={kennzahlen.hostsGesamt}
|
||||
text="Hosts gemeldet"
|
||||
zusatz={`${kennzahlen.ohneMeldung} ohne Meldung`}
|
||||
icon="bi-hdd-stack"
|
||||
farbe="info"
|
||||
href="/hosts"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<SmallBox
|
||||
wert={kennzahlen.aktivLizenziert}
|
||||
text="Aktiv lizenziert"
|
||||
zusatz={`${kennzahlen.ohneSubscription} ohne gültige Subscription`}
|
||||
icon="bi-patch-check"
|
||||
farbe="success"
|
||||
href="/hosts?status=active"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<SmallBox
|
||||
wert={kennzahlen.baldAblaufend}
|
||||
text="Läuft in 30 Tagen ab"
|
||||
zusatz="Verlängerung vorbereiten"
|
||||
icon="bi-hourglass-split"
|
||||
farbe="warning"
|
||||
href="/jahresbahn"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<SmallBox
|
||||
wert={kennzahlen.offeneRechnungspunkte}
|
||||
text="Offene Rechnungspunkte"
|
||||
zusatz={`${kennzahlen.offeneEinkaufsrechnungen} Einkauf · ${kennzahlen.fehlendeKundenrechnungen} Verkauf`}
|
||||
icon="bi-receipt"
|
||||
farbe="danger"
|
||||
href="/rechnungen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<Card titel="Subscriptions nach Ablaufdatum" rahmen="primary" tabelle>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Host</th>
|
||||
<th scope="col">Kunde</th>
|
||||
<th scope="col">Key</th>
|
||||
<th scope="col">Ablauf</th>
|
||||
<th scope="col">Proxmox</th>
|
||||
<th scope="col">Kundenrechnung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{hostsNachAblauf().map((host) => {
|
||||
const kunde = getKunde(host.kundeId);
|
||||
const laufzeit = laufzeitZuAblauf(host);
|
||||
return (
|
||||
<tr key={host.id}>
|
||||
<td>
|
||||
<Link href={`/hosts/${host.id}`} className="fw-semibold text-decoration-none">
|
||||
{host.hostname}
|
||||
</Link>
|
||||
{hostMeldetNicht(host) ? <KeineMeldungBadge /> : null}
|
||||
</td>
|
||||
<td>
|
||||
{kunde ? (
|
||||
<Link href={`/kunden/${kunde.id}`} className="text-decoration-none">
|
||||
{kunde.name}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="badge pl-bg-neutral">Nicht zugeordnet</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<CopyableCode wert={host.subscription.key} />
|
||||
</td>
|
||||
<td>
|
||||
<AblaufBadge datum={host.subscription.nextduedate} heute={HEUTE} />
|
||||
</td>
|
||||
<td>
|
||||
<EinkaufBadge bezahlt={laufzeit?.einkauf ? laufzeit.einkauf.bezahlt : null} />
|
||||
</td>
|
||||
<td>
|
||||
<VerkaufBadge
|
||||
erstellt={laufzeit?.verkauf?.erstellt ?? false}
|
||||
bezahlt={laufzeit?.verkauf?.bezahlt ?? false}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-4">
|
||||
<Card
|
||||
titel="Aufgaben"
|
||||
rahmen="warning"
|
||||
werkzeuge={
|
||||
<span className="badge pl-bg-warning">
|
||||
{aufgaben.length + nichtZugeordnetAufgaben.length}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<TodoList aufgaben={[...aufgaben, ...nichtZugeordnetAufgaben]} />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<Card titel="Rechnungsstatus je Kunde" rahmen="info">
|
||||
{fortschritt.map((eintrag) => (
|
||||
<div className="mb-3" key={eintrag.kunde.id}>
|
||||
<div className="d-flex justify-content-between small mb-1">
|
||||
<Link href={`/kunden/${eintrag.kunde.id}`} className="text-decoration-none">
|
||||
{eintrag.kunde.name}
|
||||
</Link>
|
||||
<span className="text-body-secondary">
|
||||
{eintrag.erledigt} von {eintrag.gesamt} Punkten erledigt
|
||||
</span>
|
||||
</div>
|
||||
<ProgressBar
|
||||
prozent={eintrag.prozent}
|
||||
beschriftung={`Rechnungsstatus ${eintrag.kunde.name}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<Card titel="Nächste Schritte" rahmen="info">
|
||||
<ul className="list-unstyled mb-0 small">
|
||||
<li className="mb-2">
|
||||
<i className="bi bi-arrow-right-short" aria-hidden="true" />{" "}
|
||||
<Link href="/kunden">Kundenübersicht öffnen</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="bi bi-arrow-right-short" aria-hidden="true" />{" "}
|
||||
<Link href="/rechnungen">Rechnungen pflegen</Link>
|
||||
</li>
|
||||
<li>
|
||||
<i className="bi bi-arrow-right-short" aria-hidden="true" />{" "}
|
||||
<Link href="/jahresbahn">Abläufe der nächsten 12 Monate ansehen</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import Link from "next/link";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { CopyableCode } from "@/components/ui/CopyableCode";
|
||||
import { formatDatum, formatEuro } from "@/lib/format";
|
||||
import { hosts, laufzeiten } from "@/mock/data";
|
||||
import { getKunde, istAbgeschlossen } from "@/mock/queries";
|
||||
|
||||
export const metadata = { title: "Rechnungen" };
|
||||
|
||||
export default async function RechnungenSeite({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ filter?: string }>;
|
||||
}) {
|
||||
const { filter = "offen" } = await searchParams;
|
||||
const alle = laufzeiten.filter((l) => !l.vorschlag);
|
||||
const liste =
|
||||
filter === "erledigt"
|
||||
? alle.filter(istAbgeschlossen)
|
||||
: filter === "alle"
|
||||
? alle
|
||||
: alle.filter((l) => !istAbgeschlossen(l));
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentHeader titel="Rechnungen" brotkrumen={[{ titel: "Rechnungen" }]} />
|
||||
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<Card
|
||||
titel={`${liste.length} Laufzeiten`}
|
||||
rahmen="primary"
|
||||
tabelle
|
||||
werkzeuge={
|
||||
<div className="btn-group btn-group-sm" role="group" aria-label="Filter">
|
||||
{[
|
||||
["offen", "Offen"],
|
||||
["erledigt", "Erledigt"],
|
||||
["alle", "Alle"],
|
||||
].map(([wert, text]) => (
|
||||
<Link
|
||||
key={wert}
|
||||
href={`/rechnungen?filter=${wert}`}
|
||||
className={`btn ${filter === wert ? "btn-primary" : "btn-outline-primary"}`}
|
||||
>
|
||||
{text}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Kunde</th>
|
||||
<th scope="col">Host</th>
|
||||
<th scope="col">Laufzeit</th>
|
||||
<th scope="col">Proxmox-Rechnung</th>
|
||||
<th scope="col">Netto</th>
|
||||
<th scope="col" className="text-center">
|
||||
Proxmox bezahlt
|
||||
</th>
|
||||
<th scope="col">Kundenrechnung</th>
|
||||
<th scope="col">Netto</th>
|
||||
<th scope="col" className="text-center">
|
||||
Kundenrechnung erstellt
|
||||
</th>
|
||||
<th scope="col">Marge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{liste.map((laufzeit) => {
|
||||
const host = hosts.find((h) => h.id === laufzeit.hostId);
|
||||
const kunde = getKunde(host?.kundeId ?? null);
|
||||
const marge = (laufzeit.verkauf?.nettoBetrag ?? 0) - (laufzeit.einkauf?.nettoBetrag ?? 0);
|
||||
return (
|
||||
<tr key={laufzeit.id}>
|
||||
<td>
|
||||
{kunde ? (
|
||||
<Link href={`/kunden/${kunde.id}`} className="text-decoration-none">
|
||||
{kunde.name}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="badge pl-bg-neutral">Nicht zugeordnet</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<Link href={`/hosts/${laufzeit.hostId}`} className="text-decoration-none">
|
||||
{host?.hostname}
|
||||
</Link>
|
||||
</td>
|
||||
<td>
|
||||
{formatDatum(laufzeit.start)} – {formatDatum(laufzeit.ende)}
|
||||
</td>
|
||||
<td>
|
||||
<CopyableCode wert={laufzeit.einkauf?.nummer ?? null} />
|
||||
</td>
|
||||
<td>{formatEuro(laufzeit.einkauf?.nettoBetrag)}</td>
|
||||
<td className="text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input pl-touch-target"
|
||||
defaultChecked={laufzeit.einkauf?.bezahlt ?? false}
|
||||
aria-label="Proxmox-Rechnung bezahlt"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<CopyableCode wert={laufzeit.verkauf?.nummer ?? null} />
|
||||
</td>
|
||||
<td>{formatEuro(laufzeit.verkauf?.nettoBetrag)}</td>
|
||||
<td className="text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input pl-touch-target"
|
||||
defaultChecked={laufzeit.verkauf?.erstellt ?? false}
|
||||
aria-label="Kundenrechnung erstellt"
|
||||
/>
|
||||
</td>
|
||||
<td className={marge >= 0 ? "pl-text-success" : "pl-text-danger"}>
|
||||
{laufzeit.verkauf?.nettoBetrag ? formatEuro(marge) : "–"}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
<p className="small text-body-secondary">
|
||||
Im Prototyp sind die Häkchen noch ohne Wirkung. Ab #008 setzen sie den Status direkt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
+366
-1
@@ -1 +1,366 @@
|
||||
/* Wird in #002 durch das ProxLedger-Theme ersetzt. */
|
||||
/*
|
||||
* ProxLedger-Theme auf Basis von AdminLTE 4 (nur CSS) und Bootstrap 5.3.
|
||||
* Farben laut Vorgabe; Info und Erfolg sind gegenüber AdminLTE abgedunkelt,
|
||||
* damit weiße Schrift den Kontrast 4,5:1 erreicht.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--pl-navy: #1e2a44;
|
||||
--pl-primary: #007bff;
|
||||
--pl-primary-dark: #0062cc;
|
||||
--pl-info: #138496;
|
||||
--pl-success: #1e7e34;
|
||||
--pl-warning: #ffc107;
|
||||
--pl-warning-text: #1f2d3d;
|
||||
--pl-danger: #c82333;
|
||||
--pl-neutral: #6c757d;
|
||||
--pl-content-bg: #f4f6f9;
|
||||
--pl-sidebar-bg: #343a40;
|
||||
--pl-sidebar-text: #c2c7d0;
|
||||
--pl-sidebar-divider: #4b545c;
|
||||
--pl-font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
|
||||
|
||||
--bs-primary: var(--pl-primary);
|
||||
--bs-primary-rgb: 0, 123, 255;
|
||||
--bs-link-color: var(--pl-primary);
|
||||
--bs-link-color-rgb: 0, 123, 255;
|
||||
--bs-link-hover-color: var(--pl-primary-dark);
|
||||
--bs-link-hover-color-rgb: 0, 98, 204;
|
||||
--bs-body-font-size: 1rem;
|
||||
--lte-sidebar-width: 250px;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] {
|
||||
--pl-content-bg: #1b1f24;
|
||||
--pl-sidebar-bg: #22272d;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--pl-content-bg);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* ---------- Buttons und Links in Primärfarbe ---------- */
|
||||
|
||||
.btn-primary {
|
||||
--bs-btn-bg: var(--pl-primary);
|
||||
--bs-btn-border-color: var(--pl-primary);
|
||||
--bs-btn-hover-bg: var(--pl-primary-dark);
|
||||
--bs-btn-hover-border-color: var(--pl-primary-dark);
|
||||
--bs-btn-active-bg: var(--pl-primary-dark);
|
||||
--bs-btn-active-border-color: var(--pl-primary-dark);
|
||||
--bs-btn-disabled-bg: var(--pl-primary);
|
||||
--bs-btn-disabled-border-color: var(--pl-primary);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--bs-btn-color: var(--pl-primary);
|
||||
--bs-btn-border-color: var(--pl-primary);
|
||||
--bs-btn-hover-bg: var(--pl-primary);
|
||||
--bs-btn-hover-border-color: var(--pl-primary);
|
||||
--bs-btn-active-bg: var(--pl-primary);
|
||||
--bs-btn-active-border-color: var(--pl-primary);
|
||||
}
|
||||
|
||||
/* ---------- Statusfarben (eigene Klassen wegen abgedunkelter Töne) ---------- */
|
||||
|
||||
.pl-bg-info,
|
||||
.pl-bg-success,
|
||||
.pl-bg-danger,
|
||||
.pl-bg-neutral,
|
||||
.pl-bg-primary {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pl-bg-info {
|
||||
background-color: var(--pl-info);
|
||||
}
|
||||
.pl-bg-success {
|
||||
background-color: var(--pl-success);
|
||||
}
|
||||
.pl-bg-danger {
|
||||
background-color: var(--pl-danger);
|
||||
}
|
||||
.pl-bg-neutral {
|
||||
background-color: var(--pl-neutral);
|
||||
}
|
||||
.pl-bg-primary {
|
||||
background-color: var(--pl-primary);
|
||||
}
|
||||
.pl-bg-warning {
|
||||
color: var(--pl-warning-text);
|
||||
background-color: var(--pl-warning);
|
||||
}
|
||||
|
||||
.pl-text-danger {
|
||||
color: var(--pl-danger) !important;
|
||||
}
|
||||
.pl-text-success {
|
||||
color: var(--pl-success) !important;
|
||||
}
|
||||
.pl-text-warning {
|
||||
color: #9a7400 !important;
|
||||
}
|
||||
:root[data-bs-theme="dark"] .pl-text-warning {
|
||||
color: var(--pl-warning) !important;
|
||||
}
|
||||
|
||||
/* ---------- Sidebar ---------- */
|
||||
|
||||
.app-sidebar {
|
||||
background-color: var(--pl-sidebar-bg);
|
||||
--lte-sidebar-color: var(--pl-sidebar-text);
|
||||
--lte-sidebar-hover-color: #fff;
|
||||
--lte-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
|
||||
--lte-sidebar-menu-active-color: #fff;
|
||||
--lte-sidebar-menu-active-bg: var(--pl-primary);
|
||||
--lte-sidebar-header-color: #8a93a0;
|
||||
--lte-sidebar-submenu-color: var(--pl-sidebar-text);
|
||||
--lte-sidebar-submenu-hover-color: #fff;
|
||||
--lte-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.08);
|
||||
--bs-border-color: var(--pl-sidebar-divider);
|
||||
}
|
||||
|
||||
.app-sidebar .sidebar-brand {
|
||||
background-color: var(--pl-sidebar-bg);
|
||||
}
|
||||
|
||||
.app-sidebar .brand-text {
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.app-sidebar .nav-link {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.app-sidebar .nav-header {
|
||||
padding-top: 1rem;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.pl-sidebar-user {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 0.85rem 0.9rem;
|
||||
border-bottom: 1px solid var(--pl-sidebar-divider);
|
||||
color: var(--pl-sidebar-text);
|
||||
}
|
||||
|
||||
.pl-sidebar-user-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: var(--pl-info);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pl-sidebar-search {
|
||||
padding: 0.75rem 0.9rem;
|
||||
}
|
||||
|
||||
/* Im eingeklappten Zustand nur Icons zeigen */
|
||||
.sidebar-collapse .pl-sidebar-user span,
|
||||
.sidebar-collapse .pl-sidebar-search,
|
||||
.sidebar-collapse .app-sidebar .brand-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---------- Inhaltsbereich ---------- */
|
||||
|
||||
.app-content-header {
|
||||
padding: 1rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
background-color: var(--pl-content-bg);
|
||||
}
|
||||
|
||||
.pl-page-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ---------- Small Box ---------- */
|
||||
|
||||
.small-box {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.small-box > .inner {
|
||||
padding: 1rem 1rem 0.25rem;
|
||||
}
|
||||
|
||||
.small-box h3 {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.small-box .small-box-icon {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 1rem;
|
||||
font-size: 3.25rem;
|
||||
line-height: 1;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.small-box .small-box-footer {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.small-box .small-box-footer:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ---------- Karten ---------- */
|
||||
|
||||
.pl-card-outline-primary {
|
||||
border-top: 3px solid var(--pl-primary);
|
||||
}
|
||||
.pl-card-outline-warning {
|
||||
border-top: 3px solid var(--pl-warning);
|
||||
}
|
||||
.pl-card-outline-danger {
|
||||
border-top: 3px solid var(--pl-danger);
|
||||
}
|
||||
.pl-card-outline-info {
|
||||
border-top: 3px solid var(--pl-info);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ---------- Aufgabenliste (AdminLTE-Todo) ---------- */
|
||||
|
||||
.pl-todo-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.pl-todo-list > li {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
padding: 0.65rem 0.75rem;
|
||||
margin-bottom: 0.4rem;
|
||||
border-radius: 0.25rem;
|
||||
border-left: 3px solid var(--pl-neutral);
|
||||
background-color: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
.pl-todo-list > li.pl-todo-gefahr {
|
||||
border-left-color: var(--pl-danger);
|
||||
}
|
||||
.pl-todo-list > li.pl-todo-warnung {
|
||||
border-left-color: var(--pl-warning);
|
||||
}
|
||||
.pl-todo-list > li.pl-todo-info {
|
||||
border-left-color: var(--pl-info);
|
||||
}
|
||||
|
||||
.pl-todo-erledigt .pl-todo-text {
|
||||
text-decoration: line-through;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ---------- Monospace-Werte mit Kopierfunktion ---------- */
|
||||
|
||||
.pl-mono {
|
||||
font-family: var(--pl-font-mono);
|
||||
font-size: 0.9375em;
|
||||
}
|
||||
|
||||
.pl-copy-button {
|
||||
padding: 0 0.25rem;
|
||||
font-size: 0.85em;
|
||||
line-height: 1;
|
||||
color: var(--bs-secondary-color);
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.pl-copy-button:hover {
|
||||
color: var(--pl-primary);
|
||||
}
|
||||
|
||||
/* ---------- Tabellen ---------- */
|
||||
|
||||
.pl-table-card .table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pl-table-card .table > :not(caption) > * > * {
|
||||
padding: 0.6rem 0.75rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ---------- Jahresbahn ---------- */
|
||||
|
||||
.pl-timeline-row {
|
||||
position: relative;
|
||||
height: 2rem;
|
||||
background: linear-gradient(to right, var(--bs-secondary-bg) 1px, transparent 1px) repeat-x;
|
||||
background-size: calc(100% / 12) 100%;
|
||||
}
|
||||
|
||||
.pl-timeline-bar {
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
height: 1.2rem;
|
||||
border-radius: 0.6rem;
|
||||
color: #fff;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.2rem;
|
||||
padding: 0 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pl-timeline-heute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background-color: var(--pl-danger);
|
||||
}
|
||||
|
||||
/* ---------- Suchdialog (Strg+K) ---------- */
|
||||
|
||||
.pl-search-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1080;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.pl-search-dialog {
|
||||
position: fixed;
|
||||
top: 12vh;
|
||||
left: 50%;
|
||||
z-index: 1085;
|
||||
width: min(680px, 92vw);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* ---------- Mobil ---------- */
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.pl-touch-target {
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
+27
-5
@@ -1,17 +1,39 @@
|
||||
import type { Metadata } from "next";
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Source_Sans_3 } from "next/font/google";
|
||||
import "admin-lte/dist/css/adminlte.css";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import "./globals.css";
|
||||
|
||||
const sourceSans = Source_Sans_3({
|
||||
subsets: ["latin"],
|
||||
weight: ["300", "400", "600", "700"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "ProxLedger",
|
||||
description: "Proxmox Subscription Dashboard",
|
||||
title: { default: "ProxLedger", template: "%s · ProxLedger" },
|
||||
description: "Dashboard für den Subscription-Status aller Proxmox-Hosts",
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
themeColor: "#1E2A44",
|
||||
};
|
||||
|
||||
/**
|
||||
* Setzt das gespeicherte Farbschema, bevor der Browser zeichnet
|
||||
* (verhindert Aufblitzen des hellen Designs).
|
||||
*/
|
||||
const THEMA_SKRIPT = `(function(){try{var t=localStorage.getItem("pl-theme");if(!t){t=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";}document.documentElement.dataset.bsTheme=t;}catch(e){document.documentElement.dataset.bsTheme="light";}})();`;
|
||||
|
||||
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
||||
return (
|
||||
<html lang="de">
|
||||
<body>{children}</body>
|
||||
<html lang="de" data-bs-theme="light" suppressHydrationWarning>
|
||||
<head>
|
||||
<script dangerouslySetInnerHTML={{ __html: THEMA_SKRIPT }} />
|
||||
</head>
|
||||
<body className={`${sourceSans.className} layout-fixed sidebar-expand-lg`}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import Link from "next/link";
|
||||
import { Logo } from "@/components/Logo";
|
||||
|
||||
export default function NichtGefunden() {
|
||||
return (
|
||||
<main className="container py-5 text-center">
|
||||
<Logo groesse={64} titel="ProxLedger" />
|
||||
<h1 className="h3 mt-3">Seite nicht gefunden</h1>
|
||||
<p className="text-body-secondary">Die aufgerufene Adresse gibt es nicht.</p>
|
||||
<Link href="/" className="btn btn-primary">
|
||||
Zum Dashboard
|
||||
</Link>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { APP_VERSION } from "@/lib/version";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="container py-5">
|
||||
<h1>ProxLedger</h1>
|
||||
<p className="text-body-secondary">Proxmox Subscription Dashboard · Version {APP_VERSION}</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* ProxLedger-Monogramm: ein P auf zwei Buchungslinien.
|
||||
* Varianten: "standard" (heller Grund), "sidebar" (dunkler Grund), "mono" (einfarbig für PDF/Rechnungen).
|
||||
*/
|
||||
|
||||
export type LogoVariante = "standard" | "sidebar" | "mono";
|
||||
|
||||
interface LogoProps {
|
||||
variante?: LogoVariante;
|
||||
groesse?: number;
|
||||
className?: string;
|
||||
/** Für dekorative Verwendung neben dem Schriftzug. */
|
||||
titel?: string;
|
||||
}
|
||||
|
||||
const FARBEN: Record<LogoVariante, { p: string; linien: string }> = {
|
||||
standard: { p: "#1E2A44", linien: "#17A2B8" },
|
||||
sidebar: { p: "#FFFFFF", linien: "#17A2B8" },
|
||||
mono: { p: "#1E2A44", linien: "#1E2A44" },
|
||||
};
|
||||
|
||||
export function Logo({ variante = "standard", groesse = 40, className, titel }: LogoProps) {
|
||||
const farben = FARBEN[variante];
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
width={groesse}
|
||||
height={groesse}
|
||||
className={className}
|
||||
role={titel ? "img" : "presentation"}
|
||||
aria-label={titel}
|
||||
aria-hidden={titel ? undefined : true}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{titel ? <title>{titel}</title> : null}
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M8 4h19a12 12 0 0 1 0 24H16v16H8zM16 11h10a5 5 0 0 1 0 10H16z"
|
||||
fill={farben.p}
|
||||
/>
|
||||
<path d="M22 36h20M22 43h14" stroke={farben.linien} strokeWidth="3.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/** Logo mit Schriftzug, wie in Sidebar und Login verwendet. */
|
||||
export function LogoMitSchriftzug({
|
||||
variante = "standard",
|
||||
groesse = 36,
|
||||
}: {
|
||||
variante?: LogoVariante;
|
||||
groesse?: number;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Logo variante={variante} groesse={groesse} className="brand-image opacity-100" titel="ProxLedger" />
|
||||
<span className="brand-text ms-2">ProxLedger</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import Link from "next/link";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export interface Brotkrume {
|
||||
titel: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
/** Inhaltskopf: Seitentitel links, Breadcrumb rechts (AdminLTE-Standard). */
|
||||
export function ContentHeader({
|
||||
titel,
|
||||
brotkrumen = [],
|
||||
aktion,
|
||||
}: {
|
||||
titel: string;
|
||||
brotkrumen?: Brotkrume[];
|
||||
aktion?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="app-content-header">
|
||||
<div className="container-fluid">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-sm-6 d-flex align-items-center gap-3">
|
||||
<h1 className="pl-page-title">{titel}</h1>
|
||||
{aktion}
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<nav aria-label="Brotkrumen">
|
||||
<ol className="breadcrumb float-sm-end mb-0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link href="/">Start</Link>
|
||||
</li>
|
||||
{brotkrumen.map((k, i) => (
|
||||
<li
|
||||
key={`${k.titel}-${i}`}
|
||||
className={`breadcrumb-item ${i === brotkrumen.length - 1 ? "active" : ""}`}
|
||||
aria-current={i === brotkrumen.length - 1 ? "page" : undefined}
|
||||
>
|
||||
{k.href ? <Link href={k.href}>{k.titel}</Link> : k.titel}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { APP_VERSION } from "@/lib/version";
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="app-footer bg-body">
|
||||
<div className="float-end d-none d-sm-inline">Prototyp mit Beispieldaten (#002)</div>
|
||||
<strong>ProxLedger</strong> · Version {APP_VERSION}
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
|
||||
import type { SuchEintrag } from "@/mock/suchindex";
|
||||
import type { Alert } from "@/mock/types";
|
||||
import { SearchDialog } from "./SearchDialog";
|
||||
|
||||
const SCHWERE_ICON: Record<Alert["schwere"], string> = {
|
||||
gefahr: "bi-exclamation-octagon-fill pl-text-danger",
|
||||
warnung: "bi-exclamation-triangle-fill pl-text-warning",
|
||||
info: "bi-info-circle-fill text-body-secondary",
|
||||
};
|
||||
|
||||
/** Farbschema aus dem <html>-Attribut lesen, damit Server und Client übereinstimmen. */
|
||||
function themaIstDunkel() {
|
||||
return document.documentElement.dataset.bsTheme === "dark";
|
||||
}
|
||||
|
||||
function themaAbonnieren(aenderung: () => void) {
|
||||
const beobachter = new MutationObserver(aenderung);
|
||||
beobachter.observe(document.documentElement, { attributes: true, attributeFilter: ["data-bs-theme"] });
|
||||
return () => beobachter.disconnect();
|
||||
}
|
||||
|
||||
export function Header({
|
||||
alerts,
|
||||
suchEintraege,
|
||||
benutzer,
|
||||
}: {
|
||||
alerts: Alert[];
|
||||
suchEintraege: SuchEintrag[];
|
||||
benutzer: string;
|
||||
}) {
|
||||
const [sucheOffen, setSucheOffen] = useState(false);
|
||||
const [glockeOffen, setGlockeOffen] = useState(false);
|
||||
const [benutzerOffen, setBenutzerOffen] = useState(false);
|
||||
const dunkel = useSyncExternalStore(themaAbonnieren, themaIstDunkel, () => false);
|
||||
|
||||
useEffect(() => {
|
||||
function tasten(event: KeyboardEvent) {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
|
||||
event.preventDefault();
|
||||
setSucheOffen(true);
|
||||
}
|
||||
}
|
||||
window.addEventListener("keydown", tasten);
|
||||
return () => window.removeEventListener("keydown", tasten);
|
||||
}, []);
|
||||
|
||||
/** Sidebar umschalten: auf schmalen Bildschirmen als Overlay, sonst eingeklappt. */
|
||||
const sidebarUmschalten = useCallback(() => {
|
||||
const body = document.body;
|
||||
if (window.innerWidth < 992) {
|
||||
body.classList.toggle("sidebar-open");
|
||||
body.classList.remove("sidebar-collapse");
|
||||
} else {
|
||||
body.classList.toggle("sidebar-collapse");
|
||||
body.classList.remove("sidebar-open");
|
||||
}
|
||||
}, []);
|
||||
|
||||
function themaUmschalten() {
|
||||
const neu = dunkel ? "light" : "dark";
|
||||
document.documentElement.dataset.bsTheme = neu;
|
||||
try {
|
||||
localStorage.setItem("pl-theme", neu);
|
||||
} catch {
|
||||
// Speicherzugriff kann blockiert sein; das Thema gilt dann nur für diese Sitzung.
|
||||
}
|
||||
}
|
||||
|
||||
function vollbild() {
|
||||
if (document.fullscreenElement) {
|
||||
void document.exitFullscreen();
|
||||
} else {
|
||||
void document.documentElement.requestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="app-header navbar navbar-expand bg-body shadow-sm">
|
||||
<div className="container-fluid">
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link btn btn-link pl-touch-target"
|
||||
onClick={sidebarUmschalten}
|
||||
aria-label="Menü ein- oder ausklappen"
|
||||
>
|
||||
<i className="bi bi-list fs-5" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item d-none d-md-block">
|
||||
<Link href="/" className="nav-link">
|
||||
Start
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav-item d-none d-md-block">
|
||||
<Link href="/einstellungen/tokens" className="nav-link">
|
||||
Agent installieren
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul className="navbar-nav ms-auto align-items-center">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link btn btn-link pl-touch-target"
|
||||
onClick={() => setSucheOffen(true)}
|
||||
aria-label="Globale Suche öffnen (Strg+K)"
|
||||
title="Suche (Strg+K)"
|
||||
>
|
||||
<i className="bi bi-search" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li className="nav-item dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link btn btn-link position-relative pl-touch-target"
|
||||
onClick={() => {
|
||||
setGlockeOffen((o) => !o);
|
||||
setBenutzerOffen(false);
|
||||
}}
|
||||
aria-label={`${alerts.length} offene Warnungen anzeigen`}
|
||||
aria-expanded={glockeOffen}
|
||||
>
|
||||
<i className="bi bi-bell-fill" aria-hidden="true" />
|
||||
{alerts.length > 0 ? (
|
||||
<span className="badge pl-bg-danger position-absolute top-0 start-100 translate-middle rounded-pill">
|
||||
{alerts.length}
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
<div
|
||||
className={`dropdown-menu dropdown-menu-end shadow ${glockeOffen ? "show" : ""}`}
|
||||
style={{ width: "22rem" }}
|
||||
>
|
||||
<span className="dropdown-header">{alerts.length} offene Warnungen</span>
|
||||
<div className="dropdown-divider" />
|
||||
{alerts.slice(0, 6).map((alert) => (
|
||||
<Link
|
||||
key={alert.id}
|
||||
href={alert.hostId ? `/hosts/${alert.hostId}` : "/hosts"}
|
||||
className="dropdown-item d-flex gap-2 py-2"
|
||||
onClick={() => setGlockeOffen(false)}
|
||||
>
|
||||
<i className={`bi ${SCHWERE_ICON[alert.schwere]} mt-1`} aria-hidden="true" />
|
||||
<span className="text-wrap">
|
||||
<span className="d-block fw-semibold">{alert.titel}</span>
|
||||
<span className="d-block small text-body-secondary">{alert.beschreibung}</span>
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
<div className="dropdown-divider" />
|
||||
<Link href="/hosts" className="dropdown-item text-center" onClick={() => setGlockeOffen(false)}>
|
||||
Alle Warnungen ansehen
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link btn btn-link pl-touch-target"
|
||||
onClick={themaUmschalten}
|
||||
aria-label={dunkel ? "Helles Design verwenden" : "Dunkles Design verwenden"}
|
||||
title={dunkel ? "Helles Design" : "Dunkles Design"}
|
||||
>
|
||||
<i className={`bi ${dunkel ? "bi-sun" : "bi-moon-stars"}`} aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li className="nav-item d-none d-md-block">
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link btn btn-link pl-touch-target"
|
||||
onClick={vollbild}
|
||||
aria-label="Vollbild umschalten"
|
||||
>
|
||||
<i className="bi bi-arrows-fullscreen" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li className="nav-item dropdown">
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link btn btn-link d-flex align-items-center gap-2 pl-touch-target"
|
||||
onClick={() => {
|
||||
setBenutzerOffen((o) => !o);
|
||||
setGlockeOffen(false);
|
||||
}}
|
||||
aria-expanded={benutzerOffen}
|
||||
>
|
||||
<i className="bi bi-person-circle" aria-hidden="true" />
|
||||
<span className="d-none d-sm-inline">{benutzer}</span>
|
||||
</button>
|
||||
<div className={`dropdown-menu dropdown-menu-end shadow ${benutzerOffen ? "show" : ""}`}>
|
||||
<span className="dropdown-header">Angemeldet als {benutzer}</span>
|
||||
<div className="dropdown-divider" />
|
||||
<Link href="/einstellungen/system" className="dropdown-item">
|
||||
Einstellungen
|
||||
</Link>
|
||||
<span className="dropdown-item text-body-secondary">Abmelden (ab #013)</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{sucheOffen ? (
|
||||
<SearchDialog eintraege={suchEintraege} onSchliessen={() => setSucheOffen(false)} />
|
||||
) : null}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMemo, useState } from "react";
|
||||
import type { SuchEintrag } from "@/mock/suchindex";
|
||||
|
||||
const TYP_FARBE: Record<SuchEintrag["typ"], string> = {
|
||||
Host: "pl-bg-info",
|
||||
Kunde: "pl-bg-primary",
|
||||
Rechnung: "pl-bg-neutral",
|
||||
};
|
||||
|
||||
/**
|
||||
* Globale Suche als Dialog, per Strg+K oder über die Kopfleiste.
|
||||
* Wird nur gerendert, solange er offen ist – dadurch startet er jedes Mal leer.
|
||||
*/
|
||||
export function SearchDialog({
|
||||
eintraege,
|
||||
onSchliessen,
|
||||
}: {
|
||||
eintraege: SuchEintrag[];
|
||||
onSchliessen: () => void;
|
||||
}) {
|
||||
const [begriff, setBegriff] = useState("");
|
||||
const [markiert, setMarkiert] = useState(0);
|
||||
const router = useRouter();
|
||||
|
||||
const treffer = useMemo(() => {
|
||||
const q = begriff.trim().toLowerCase();
|
||||
if (q.length < 2) return [];
|
||||
return eintraege.filter((e) => e.begriffe.some((b) => b.includes(q))).slice(0, 12);
|
||||
}, [begriff, eintraege]);
|
||||
|
||||
function oeffnen(eintrag: SuchEintrag) {
|
||||
onSchliessen();
|
||||
router.push(eintrag.href);
|
||||
}
|
||||
|
||||
function tasten(event: React.KeyboardEvent) {
|
||||
if (event.key === "Escape") onSchliessen();
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
setMarkiert((i) => Math.min(i + 1, treffer.length - 1));
|
||||
}
|
||||
if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
setMarkiert((i) => Math.max(i - 1, 0));
|
||||
}
|
||||
if (event.key === "Enter" && treffer[markiert]) {
|
||||
event.preventDefault();
|
||||
oeffnen(treffer[markiert]);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="pl-search-backdrop" onClick={onSchliessen} />
|
||||
<div className="pl-search-dialog" role="dialog" aria-modal="true" aria-label="Globale Suche">
|
||||
<div className="card shadow-lg mb-0">
|
||||
<div className="card-body p-2">
|
||||
<div className="input-group">
|
||||
<span className="input-group-text bg-body">
|
||||
<i className="bi bi-search" aria-hidden="true" />
|
||||
</span>
|
||||
<input
|
||||
autoFocus
|
||||
type="search"
|
||||
className="form-control form-control-lg"
|
||||
placeholder="Key, Host, Kunde oder Rechnungsnummer …"
|
||||
value={begriff}
|
||||
onChange={(e) => {
|
||||
setBegriff(e.target.value);
|
||||
setMarkiert(0);
|
||||
}}
|
||||
onKeyDown={tasten}
|
||||
aria-label="Suchbegriff"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{treffer.length > 0 ? (
|
||||
<ul className="list-group list-group-flush">
|
||||
{treffer.map((eintrag, index) => (
|
||||
<li key={`${eintrag.typ}-${eintrag.titel}-${index}`} className="list-group-item p-0">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-link w-100 text-start text-decoration-none d-flex align-items-center gap-2 py-2 ${
|
||||
index === markiert ? "bg-body-secondary" : ""
|
||||
}`}
|
||||
onMouseEnter={() => setMarkiert(index)}
|
||||
onClick={() => oeffnen(eintrag)}
|
||||
>
|
||||
<span className={`badge ${TYP_FARBE[eintrag.typ]}`}>{eintrag.typ}</span>
|
||||
<span className="flex-grow-1">
|
||||
<span className="d-block text-body fw-semibold">{eintrag.titel}</span>
|
||||
<span className="d-block small text-body-secondary">{eintrag.untertitel}</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="card-body pt-0 small text-body-secondary">
|
||||
Mindestens zwei Zeichen eingeben. Beispiel: <span className="pl-mono">pve1c-a6bd21fcb6</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { LogoMitSchriftzug } from "@/components/Logo";
|
||||
|
||||
interface MenuEintrag {
|
||||
href: string;
|
||||
titel: string;
|
||||
icon: string;
|
||||
badge?: { text: string; klasse: string };
|
||||
}
|
||||
|
||||
export function Sidebar({
|
||||
hostsAnzahl,
|
||||
offeneRechnungspunkte,
|
||||
benutzer,
|
||||
}: {
|
||||
hostsAnzahl: number;
|
||||
offeneRechnungspunkte: number;
|
||||
benutzer: string;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const [suche, setSuche] = useState("");
|
||||
|
||||
const haupt: MenuEintrag[] = [
|
||||
{ href: "/", titel: "Dashboard", icon: "bi-speedometer2" },
|
||||
{
|
||||
href: "/hosts",
|
||||
titel: "Hosts",
|
||||
icon: "bi-hdd-stack",
|
||||
badge: { text: String(hostsAnzahl), klasse: "pl-bg-info" },
|
||||
},
|
||||
{ href: "/kunden", titel: "Kunden", icon: "bi-people" },
|
||||
{
|
||||
href: "/rechnungen",
|
||||
titel: "Rechnungen",
|
||||
icon: "bi-receipt",
|
||||
badge:
|
||||
offeneRechnungspunkte > 0
|
||||
? { text: String(offeneRechnungspunkte), klasse: "pl-bg-danger" }
|
||||
: undefined,
|
||||
},
|
||||
{ href: "/jahresbahn", titel: "Jahresbahn", icon: "bi-calendar3-range" },
|
||||
];
|
||||
|
||||
const einstellungen: MenuEintrag[] = [
|
||||
{ href: "/einstellungen/tokens", titel: "Agent-Tokens", icon: "bi-key" },
|
||||
{ href: "/einstellungen/benachrichtigungen", titel: "Benachrichtigungen", icon: "bi-bell" },
|
||||
{ href: "/einstellungen/system", titel: "System", icon: "bi-sliders" },
|
||||
];
|
||||
|
||||
function istAktiv(href: string) {
|
||||
if (href === "/") return pathname === "/";
|
||||
return pathname === href || pathname.startsWith(`${href}/`);
|
||||
}
|
||||
|
||||
function sucheAbsenden(event: React.FormEvent) {
|
||||
event.preventDefault();
|
||||
if (suche.trim().length > 0) {
|
||||
router.push(`/hosts?q=${encodeURIComponent(suche.trim())}`);
|
||||
}
|
||||
}
|
||||
|
||||
function eintrag(item: MenuEintrag) {
|
||||
return (
|
||||
<li className="nav-item" key={item.href}>
|
||||
<Link href={item.href} className={`nav-link pl-touch-target ${istAktiv(item.href) ? "active" : ""}`}>
|
||||
<i className={`nav-icon bi ${item.icon}`} aria-hidden="true" />
|
||||
<p className="ms-2 mb-0 flex-grow-1">{item.titel}</p>
|
||||
{item.badge ? (
|
||||
<span className={`nav-badge badge ${item.badge.klasse}`}>{item.badge.text}</span>
|
||||
) : null}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className="app-sidebar shadow" data-bs-theme="dark">
|
||||
<div className="sidebar-brand">
|
||||
<Link href="/" className="brand-link">
|
||||
<LogoMitSchriftzug variante="sidebar" groesse={34} />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pl-sidebar-user">
|
||||
<span className="pl-sidebar-user-avatar" aria-hidden="true">
|
||||
{benutzer.slice(0, 1)}
|
||||
</span>
|
||||
<span>
|
||||
<span className="d-block small text-white">{benutzer}</span>
|
||||
<span className="d-block small opacity-75">Administrator</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<form className="pl-sidebar-search" role="search" onSubmit={sucheAbsenden}>
|
||||
<div className="input-group input-group-sm">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control"
|
||||
placeholder="Suchen …"
|
||||
aria-label="Hosts, Kunden oder Rechnungen suchen"
|
||||
value={suche}
|
||||
onChange={(e) => setSuche(e.target.value)}
|
||||
/>
|
||||
<button className="btn btn-primary" type="submit" aria-label="Suchen">
|
||||
<i className="bi bi-search" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="sidebar-wrapper">
|
||||
<nav className="mt-2">
|
||||
<ul className="nav sidebar-menu flex-column" role="menu">
|
||||
{haupt.map(eintrag)}
|
||||
<li className="nav-header">Einstellungen</li>
|
||||
{einstellungen.map(eintrag)}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { formatDatum, formatTageBis, tageBis } from "@/lib/format";
|
||||
import { STATUS_TEXT } from "@/mock/queries";
|
||||
import type { SubscriptionStatus } from "@/mock/types";
|
||||
import { FARB_KLASSE, type Farbton } from "./SmallBox";
|
||||
|
||||
export function Badge({ farbe, children }: { farbe: Farbton; children: React.ReactNode }) {
|
||||
return <span className={`badge ${FARB_KLASSE[farbe]}`}>{children}</span>;
|
||||
}
|
||||
|
||||
const STATUS_FARBE: Record<SubscriptionStatus, Farbton> = {
|
||||
active: "success",
|
||||
notfound: "neutral",
|
||||
invalid: "danger",
|
||||
expired: "danger",
|
||||
suspended: "warning",
|
||||
};
|
||||
|
||||
export function StatusBadge({ status }: { status: SubscriptionStatus }) {
|
||||
return <Badge farbe={STATUS_FARBE[status]}>{STATUS_TEXT[status]}</Badge>;
|
||||
}
|
||||
|
||||
/** Ablaufdatum mit Ampel: rot unter 14 Tagen, gelb unter 30 Tagen, sonst Info. */
|
||||
export function AblaufBadge({ datum, heute }: { datum: string | null; heute: Date }) {
|
||||
if (!datum) return <Badge farbe="neutral">–</Badge>;
|
||||
const tage = tageBis(datum, heute);
|
||||
const farbe: Farbton = tage === null || tage < 14 ? "danger" : tage < 30 ? "warning" : "info";
|
||||
return (
|
||||
<span className="d-inline-flex align-items-center gap-2">
|
||||
<Badge farbe={farbe}>{formatDatum(datum)}</Badge>
|
||||
<small className="text-body-secondary">{formatTageBis(tage)}</small>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function EinkaufBadge({ bezahlt }: { bezahlt: boolean | null }) {
|
||||
if (bezahlt === null) return <Badge farbe="neutral">Keine Rechnung</Badge>;
|
||||
return bezahlt ? <Badge farbe="success">Bezahlt</Badge> : <Badge farbe="danger">Offen</Badge>;
|
||||
}
|
||||
|
||||
export function VerkaufBadge({ erstellt, bezahlt }: { erstellt: boolean; bezahlt: boolean }) {
|
||||
if (!erstellt) return <Badge farbe="danger">Fehlt</Badge>;
|
||||
return bezahlt ? <Badge farbe="success">Bezahlt</Badge> : <Badge farbe="warning">Erstellt</Badge>;
|
||||
}
|
||||
|
||||
export function KeineMeldungBadge() {
|
||||
return (
|
||||
<span className="badge pl-bg-warning ms-2" title="Der Host hat sich länger als 48 Stunden nicht gemeldet">
|
||||
<i className="bi bi-wifi-off me-1" aria-hidden="true" />
|
||||
Keine Meldung
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
type CalloutFarbe = "warning" | "danger" | "info";
|
||||
|
||||
const STIL: Record<CalloutFarbe, { rand: string; icon: string }> = {
|
||||
warning: { rand: "var(--pl-warning)", icon: "bi-exclamation-triangle-fill" },
|
||||
danger: { rand: "var(--pl-danger)", icon: "bi-x-octagon-fill" },
|
||||
info: { rand: "var(--pl-info)", icon: "bi-info-circle-fill" },
|
||||
};
|
||||
|
||||
export function Callout({
|
||||
farbe = "warning",
|
||||
titel,
|
||||
children,
|
||||
aktion,
|
||||
}: {
|
||||
farbe?: CalloutFarbe;
|
||||
titel: string;
|
||||
children: ReactNode;
|
||||
aktion?: ReactNode;
|
||||
}) {
|
||||
const stil = STIL[farbe];
|
||||
return (
|
||||
<div
|
||||
className="card bg-body shadow-sm mb-4 d-flex flex-row align-items-center gap-3 p-3"
|
||||
style={{ borderLeft: `5px solid ${stil.rand}` }}
|
||||
role="note"
|
||||
>
|
||||
<i className={`bi ${stil.icon} fs-4`} style={{ color: stil.rand }} aria-hidden="true" />
|
||||
<div className="flex-grow-1">
|
||||
<strong>{titel}</strong>
|
||||
<div className="small text-body-secondary">{children}</div>
|
||||
</div>
|
||||
{aktion}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Fortschrittsbalken, z. B. für den Rechnungsstatus je Kunde. */
|
||||
export function ProgressBar({ prozent, beschriftung }: { prozent: number; beschriftung?: string }) {
|
||||
const farbe =
|
||||
prozent === 100 ? "var(--pl-success)" : prozent >= 50 ? "var(--pl-warning)" : "var(--pl-danger)";
|
||||
return (
|
||||
<div
|
||||
className="progress"
|
||||
role="progressbar"
|
||||
aria-valuenow={prozent}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-label={beschriftung}
|
||||
style={{ height: "0.75rem" }}
|
||||
>
|
||||
<div className="progress-bar" style={{ width: `${prozent}%`, backgroundColor: farbe }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
type Rahmen = "primary" | "info" | "warning" | "danger" | "keiner";
|
||||
|
||||
const RAHMEN_KLASSE: Record<Rahmen, string> = {
|
||||
primary: "pl-card-outline-primary",
|
||||
info: "pl-card-outline-info",
|
||||
warning: "pl-card-outline-warning",
|
||||
danger: "pl-card-outline-danger",
|
||||
keiner: "",
|
||||
};
|
||||
|
||||
interface CardProps {
|
||||
titel?: ReactNode;
|
||||
werkzeuge?: ReactNode;
|
||||
rahmen?: Rahmen;
|
||||
/** Ohne Innenabstand, z. B. für randlose Tabellen. */
|
||||
tabelle?: boolean;
|
||||
fuss?: ReactNode;
|
||||
className?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function Card({
|
||||
titel,
|
||||
werkzeuge,
|
||||
rahmen = "keiner",
|
||||
tabelle = false,
|
||||
fuss,
|
||||
className = "",
|
||||
children,
|
||||
}: CardProps) {
|
||||
return (
|
||||
<div className={`card mb-4 shadow-sm ${RAHMEN_KLASSE[rahmen]} ${className}`}>
|
||||
{titel ? (
|
||||
<div className="card-header d-flex align-items-center justify-content-between">
|
||||
<h3 className="card-title">{titel}</h3>
|
||||
{werkzeuge ? <div className="card-tools d-flex gap-2">{werkzeuge}</div> : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className={tabelle ? "card-body p-0 pl-table-card" : "card-body"}>{children}</div>
|
||||
{fuss ? <div className="card-footer">{fuss}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
/** Monospace-Wert (Key, Server-ID, Rechnungsnummer) mit Kopier-Button. */
|
||||
export function CopyableCode({ wert, className = "" }: { wert: string | null; className?: string }) {
|
||||
const [kopiert, setKopiert] = useState(false);
|
||||
|
||||
if (!wert) return <span className="text-body-secondary">–</span>;
|
||||
|
||||
async function kopieren() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(wert as string);
|
||||
setKopiert(true);
|
||||
setTimeout(() => setKopiert(false), 1500);
|
||||
} catch {
|
||||
// Zwischenablage nicht verfügbar (z. B. ohne HTTPS) – Wert bleibt markierbar.
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`d-inline-flex align-items-center gap-1 ${className}`}>
|
||||
<span className="pl-mono">{wert}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="pl-copy-button"
|
||||
onClick={kopieren}
|
||||
title={`${wert} kopieren`}
|
||||
aria-label={`${wert} kopieren`}
|
||||
>
|
||||
<i className={`bi ${kopiert ? "bi-check-lg" : "bi-clipboard"}`} aria-hidden="true" />
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export type Farbton = "info" | "success" | "warning" | "danger" | "neutral" | "primary";
|
||||
|
||||
export const FARB_KLASSE: Record<Farbton, string> = {
|
||||
info: "pl-bg-info",
|
||||
success: "pl-bg-success",
|
||||
warning: "pl-bg-warning",
|
||||
danger: "pl-bg-danger",
|
||||
neutral: "pl-bg-neutral",
|
||||
primary: "pl-bg-primary",
|
||||
};
|
||||
|
||||
interface SmallBoxProps {
|
||||
wert: number | string;
|
||||
text: string;
|
||||
zusatz?: string;
|
||||
icon: string;
|
||||
farbe: Farbton;
|
||||
href: string;
|
||||
linkText?: string;
|
||||
}
|
||||
|
||||
export function SmallBox({ wert, text, zusatz, icon, farbe, href, linkText = "Mehr Infos" }: SmallBoxProps) {
|
||||
return (
|
||||
<div className={`small-box ${FARB_KLASSE[farbe]}`}>
|
||||
<div className="inner">
|
||||
<h3>{wert}</h3>
|
||||
<p className="mb-2">
|
||||
{text}
|
||||
{zusatz ? <small className="d-block">{zusatz}</small> : null}
|
||||
</p>
|
||||
</div>
|
||||
<i className={`bi ${icon} small-box-icon`} aria-hidden="true" />
|
||||
<Link href={href} className="small-box-footer pl-touch-target">
|
||||
{linkText} <i className="bi bi-arrow-right-circle" aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface InfoBoxProps {
|
||||
text: string;
|
||||
wert: string;
|
||||
icon: string;
|
||||
farbe: Farbton;
|
||||
}
|
||||
|
||||
export function InfoBox({ text, wert, icon, farbe }: InfoBoxProps) {
|
||||
return (
|
||||
<div className="info-box shadow-sm mb-3 bg-body">
|
||||
<span className={`info-box-icon ${FARB_KLASSE[farbe]}`}>
|
||||
<i className={`bi ${icon}`} aria-hidden="true" />
|
||||
</span>
|
||||
<div className="info-box-content">
|
||||
<span className="info-box-text">{text}</span>
|
||||
<span className="info-box-number">{wert}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { useState, type ReactNode } from "react";
|
||||
|
||||
export interface Tab {
|
||||
id: string;
|
||||
titel: string;
|
||||
icon?: string;
|
||||
inhalt: ReactNode;
|
||||
}
|
||||
|
||||
/** Karten-Tabs im AdminLTE-Stil, ohne Bootstrap-JavaScript. */
|
||||
export function Tabs({ tabs }: { tabs: Tab[] }) {
|
||||
const [aktiv, setAktiv] = useState(tabs[0]?.id);
|
||||
|
||||
return (
|
||||
<div className="card shadow-sm mb-4">
|
||||
<div className="card-header p-0 border-bottom-0">
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
{tabs.map((tab) => (
|
||||
<li className="nav-item" key={tab.id} role="presentation">
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={aktiv === tab.id}
|
||||
className={`nav-link pl-touch-target ${aktiv === tab.id ? "active" : ""}`}
|
||||
onClick={() => setAktiv(tab.id)}
|
||||
>
|
||||
{tab.icon ? <i className={`bi ${tab.icon} me-1`} aria-hidden="true" /> : null}
|
||||
{tab.titel}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
{tabs.map((tab) => (
|
||||
<div key={tab.id} role="tabpanel" hidden={aktiv !== tab.id}>
|
||||
{aktiv === tab.id ? tab.inhalt : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { Badge } from "./Badges";
|
||||
import type { Farbton } from "./SmallBox";
|
||||
|
||||
export interface Aufgabe {
|
||||
id: string;
|
||||
titel: string;
|
||||
detail: string;
|
||||
dringlichkeit: "gefahr" | "warnung" | "info";
|
||||
badgeText: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const BADGE_FARBE: Record<Aufgabe["dringlichkeit"], Farbton> = {
|
||||
gefahr: "danger",
|
||||
warnung: "warning",
|
||||
info: "info",
|
||||
};
|
||||
|
||||
/**
|
||||
* Aufgabenliste im AdminLTE-Todo-Stil. Im Prototyp merkt sich das Abhaken den Zustand nur lokal;
|
||||
* ab #008 setzt es den Rechnungsstatus in der Datenbank.
|
||||
*/
|
||||
export function TodoList({ aufgaben }: { aufgaben: Aufgabe[] }) {
|
||||
const [erledigt, setErledigt] = useState<string[]>([]);
|
||||
|
||||
function umschalten(id: string) {
|
||||
setErledigt((alt) => (alt.includes(id) ? alt.filter((x) => x !== id) : [...alt, id]));
|
||||
}
|
||||
|
||||
if (aufgaben.length === 0) {
|
||||
return <p className="text-body-secondary mb-0">Nichts zu tun – alle Punkte erledigt.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="pl-todo-list">
|
||||
{aufgaben.map((aufgabe) => {
|
||||
const istErledigt = erledigt.includes(aufgabe.id);
|
||||
return (
|
||||
<li
|
||||
key={aufgabe.id}
|
||||
className={`pl-todo-${aufgabe.dringlichkeit} ${istErledigt ? "pl-todo-erledigt" : ""}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input mt-1 pl-touch-target"
|
||||
checked={istErledigt}
|
||||
onChange={() => umschalten(aufgabe.id)}
|
||||
aria-label={`${aufgabe.titel} erledigt`}
|
||||
/>
|
||||
<div className="flex-grow-1 pl-todo-text">
|
||||
<Link href={aufgabe.href} className="fw-semibold text-decoration-none">
|
||||
{aufgabe.titel}
|
||||
</Link>
|
||||
<div className="small text-body-secondary">{aufgabe.detail}</div>
|
||||
</div>
|
||||
<Badge farbe={BADGE_FARBE[aufgabe.dringlichkeit]}>{aufgabe.badgeText}</Badge>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/** Deutsche Formatierung für Datum, Währung und Zahlen. Anzeige-Zeitzone: Europe/Berlin. */
|
||||
|
||||
const ZEITZONE = "Europe/Berlin";
|
||||
|
||||
const datumFormat = new Intl.DateTimeFormat("de-DE", {
|
||||
timeZone: ZEITZONE,
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
const datumZeitFormat = new Intl.DateTimeFormat("de-DE", {
|
||||
timeZone: ZEITZONE,
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
|
||||
const waehrungFormat = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" });
|
||||
|
||||
export function formatDatum(wert: string | Date | null | undefined): string {
|
||||
if (!wert) return "–";
|
||||
return datumFormat.format(new Date(wert));
|
||||
}
|
||||
|
||||
export function formatDatumZeit(wert: string | Date | null | undefined): string {
|
||||
if (!wert) return "–";
|
||||
return `${datumZeitFormat.format(new Date(wert))} Uhr`;
|
||||
}
|
||||
|
||||
export function formatEuro(betrag: number | null | undefined): string {
|
||||
if (betrag === null || betrag === undefined) return "–";
|
||||
return waehrungFormat.format(betrag);
|
||||
}
|
||||
|
||||
export function formatZahl(wert: number | null | undefined): string {
|
||||
if (wert === null || wert === undefined) return "–";
|
||||
return new Intl.NumberFormat("de-DE").format(wert);
|
||||
}
|
||||
|
||||
/** Ganze Tage zwischen heute und einem Datum; negativ, wenn das Datum in der Vergangenheit liegt. */
|
||||
export function tageBis(datum: string | Date | null | undefined, heute: Date): number | null {
|
||||
if (!datum) return null;
|
||||
const tagMs = 24 * 60 * 60 * 1000;
|
||||
const ziel = Date.UTC(
|
||||
new Date(datum).getUTCFullYear(),
|
||||
new Date(datum).getUTCMonth(),
|
||||
new Date(datum).getUTCDate(),
|
||||
);
|
||||
const start = Date.UTC(heute.getUTCFullYear(), heute.getUTCMonth(), heute.getUTCDate());
|
||||
return Math.round((ziel - start) / tagMs);
|
||||
}
|
||||
|
||||
export function formatTageBis(tage: number | null): string {
|
||||
if (tage === null) return "–";
|
||||
if (tage === 0) return "heute";
|
||||
if (tage === 1) return "in 1 Tag";
|
||||
if (tage > 1) return `in ${tage} Tagen`;
|
||||
if (tage === -1) return "seit 1 Tag";
|
||||
return `seit ${Math.abs(tage)} Tagen`;
|
||||
}
|
||||
|
||||
export function formatUptime(sekunden: number | null | undefined): string {
|
||||
if (sekunden === null || sekunden === undefined) return "–";
|
||||
const tage = Math.floor(sekunden / 86400);
|
||||
const stunden = Math.floor((sekunden % 86400) / 3600);
|
||||
if (tage > 0) return `${formatZahl(tage)} Tage, ${stunden} h`;
|
||||
return `${stunden} h`;
|
||||
}
|
||||
|
||||
/** Stunden seit einem Zeitpunkt, für die Regel „keine Meldung seit 48 h“. */
|
||||
export function stundenSeit(zeitpunkt: string | Date | null | undefined, jetzt: Date): number | null {
|
||||
if (!zeitpunkt) return null;
|
||||
return (jetzt.getTime() - new Date(zeitpunkt).getTime()) / 3_600_000;
|
||||
}
|
||||
@@ -0,0 +1,727 @@
|
||||
import type { Alert, Host, Kunde, Laufzeit, Report } from "./types";
|
||||
|
||||
/**
|
||||
* Beispieldaten für den Prototyp (#002). Bezugsdatum ist HEUTE, damit Ablauffristen
|
||||
* und Badges realistisch aussehen. In #003 ersetzt die Datenbank diese Datei.
|
||||
*/
|
||||
export const HEUTE = new Date("2026-09-17T08:00:00Z");
|
||||
|
||||
export const kunden: Kunde[] = [
|
||||
{
|
||||
id: "k1",
|
||||
name: "Brandl Elektrotechnik GmbH",
|
||||
kundennummer: "K-1001",
|
||||
ansprechpartner: "Sabine Brandl",
|
||||
email: "it@brandl-elektro.de",
|
||||
telefon: "+49 871 998120",
|
||||
notizen: "Wartungsvertrag bis 12/2027. Rechnungen bitte gesammelt zum Quartalsende.",
|
||||
standorte: [
|
||||
{ id: "s1", kundeId: "k1", name: "Zentrale Landshut", ort: "Landshut" },
|
||||
{ id: "s2", kundeId: "k1", name: "Werk Ergolding", ort: "Ergolding" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "k2",
|
||||
name: "Huber Logistik AG",
|
||||
kundennummer: "K-1002",
|
||||
ansprechpartner: "Markus Huber",
|
||||
email: "edv@huber-logistik.de",
|
||||
telefon: "+49 89 4412300",
|
||||
notizen: null,
|
||||
standorte: [{ id: "s3", kundeId: "k2", name: "Hauptlager München", ort: "München" }],
|
||||
},
|
||||
{
|
||||
id: "k3",
|
||||
name: "Lehner Steuerberatung",
|
||||
kundennummer: "K-1003",
|
||||
ansprechpartner: "Dr. Eva Lehner",
|
||||
email: "kanzlei@lehner-stb.de",
|
||||
telefon: "+49 941 776540",
|
||||
notizen: "Nur Fernwartung nach Voranmeldung.",
|
||||
standorte: [{ id: "s4", kundeId: "k3", name: "Kanzlei Regensburg", ort: "Regensburg" }],
|
||||
},
|
||||
{
|
||||
id: "k4",
|
||||
name: "Systemhaus Nord GmbH",
|
||||
kundennummer: "K-1004",
|
||||
ansprechpartner: "Jens Petersen",
|
||||
email: "service@systemhaus-nord.de",
|
||||
telefon: "+49 431 220190",
|
||||
notizen: null,
|
||||
standorte: [{ id: "s5", kundeId: "k4", name: "Rechenzentrum Kiel", ort: "Kiel" }],
|
||||
},
|
||||
];
|
||||
|
||||
export const hosts: Host[] = [
|
||||
{
|
||||
id: "h1",
|
||||
hostname: "pve-brandl-01",
|
||||
fqdn: "pve-brandl-01.brandl.local",
|
||||
kundeId: "k1",
|
||||
standortId: "s1",
|
||||
produkt: "pve",
|
||||
produktVersion: "pve-manager/8.3.2/dc2b2f4e",
|
||||
kernel: "6.8.12-4-pve",
|
||||
serverId: "A1B2C3D4E5F60718",
|
||||
clusterName: "brandl-cluster",
|
||||
nodeName: "node01",
|
||||
ips: ["192.168.10.11", "10.20.0.11"],
|
||||
sockets: 1,
|
||||
cpuModell: "Intel(R) Xeon(R) E-2388G",
|
||||
uptimeSekunden: 4_233_600,
|
||||
paketUpdates: 3,
|
||||
agentVersion: "0.2.0",
|
||||
letzterReport: "2026-09-17T03:41:00Z",
|
||||
subscription: {
|
||||
key: "pve1c-a6bd21fcb6",
|
||||
status: "active",
|
||||
level: "c",
|
||||
produktname: "Proxmox VE Community Subscription 1 CPU/year",
|
||||
lizenzierteSockets: 1,
|
||||
regdate: "2025-09-24T00:00:00Z",
|
||||
nextduedate: "2026-09-24T00:00:00Z",
|
||||
checktime: "2026-09-17T03:40:00Z",
|
||||
},
|
||||
tags: ["produktiv", "cluster"],
|
||||
notizen: "Hauptvirtualisierung Zentrale.",
|
||||
},
|
||||
{
|
||||
id: "h2",
|
||||
hostname: "pve-brandl-02",
|
||||
fqdn: "pve-brandl-02.brandl.local",
|
||||
kundeId: "k1",
|
||||
standortId: "s2",
|
||||
produkt: "pve",
|
||||
produktVersion: "pve-manager/8.3.2/dc2b2f4e",
|
||||
kernel: "6.8.12-4-pve",
|
||||
serverId: "B2C3D4E5F6071829",
|
||||
clusterName: "brandl-cluster",
|
||||
nodeName: "node02",
|
||||
ips: ["192.168.10.12"],
|
||||
sockets: 2,
|
||||
cpuModell: "Intel(R) Xeon(R) Silver 4310",
|
||||
uptimeSekunden: 1_987_200,
|
||||
paketUpdates: 0,
|
||||
agentVersion: "0.2.0",
|
||||
letzterReport: "2026-09-17T03:52:00Z",
|
||||
subscription: {
|
||||
key: "pve2c-3f91ad77e2",
|
||||
status: "active",
|
||||
level: "c",
|
||||
produktname: "Proxmox VE Community Subscription 2 CPUs/year",
|
||||
lizenzierteSockets: 2,
|
||||
regdate: "2025-10-08T00:00:00Z",
|
||||
nextduedate: "2026-10-08T00:00:00Z",
|
||||
checktime: "2026-09-17T03:51:00Z",
|
||||
},
|
||||
tags: ["produktiv", "cluster"],
|
||||
notizen: null,
|
||||
},
|
||||
{
|
||||
id: "h3",
|
||||
hostname: "pbs-brandl-bak",
|
||||
fqdn: "pbs-brandl-bak.brandl.local",
|
||||
kundeId: "k1",
|
||||
standortId: "s2",
|
||||
produkt: "pbs",
|
||||
produktVersion: "proxmox-backup-server/3.2.7",
|
||||
kernel: "6.8.12-4-pve",
|
||||
serverId: "C3D4E5F607182A3B",
|
||||
clusterName: null,
|
||||
nodeName: null,
|
||||
ips: ["192.168.10.20"],
|
||||
sockets: 1,
|
||||
cpuModell: "AMD Ryzen 7 5700G",
|
||||
uptimeSekunden: 8_553_600,
|
||||
paketUpdates: 7,
|
||||
agentVersion: "0.2.0",
|
||||
letzterReport: "2026-09-17T04:10:00Z",
|
||||
subscription: {
|
||||
key: "pbsc-9d41be5507",
|
||||
status: "active",
|
||||
level: "c",
|
||||
produktname: "Proxmox Backup Server Community Subscription 1 CPU/year",
|
||||
lizenzierteSockets: 1,
|
||||
regdate: "2026-03-02T00:00:00Z",
|
||||
nextduedate: "2027-03-02T00:00:00Z",
|
||||
checktime: "2026-09-17T04:09:00Z",
|
||||
},
|
||||
tags: ["backup"],
|
||||
notizen: null,
|
||||
},
|
||||
{
|
||||
id: "h4",
|
||||
hostname: "pve-huber-01",
|
||||
fqdn: "pve-huber-01.huber.intern",
|
||||
kundeId: "k2",
|
||||
standortId: "s3",
|
||||
produkt: "pve",
|
||||
produktVersion: "pve-manager/8.2.4/faa83925",
|
||||
kernel: "6.8.4-2-pve",
|
||||
serverId: "D4E5F607182A3B4C",
|
||||
clusterName: null,
|
||||
nodeName: null,
|
||||
ips: ["10.8.0.5", "192.168.30.5"],
|
||||
sockets: 2,
|
||||
cpuModell: "Intel(R) Xeon(R) Gold 5318Y",
|
||||
uptimeSekunden: 15_120_000,
|
||||
paketUpdates: 24,
|
||||
agentVersion: "0.2.0",
|
||||
letzterReport: "2026-09-17T02:15:00Z",
|
||||
subscription: {
|
||||
key: "pve1c-77c0ea1b93",
|
||||
status: "active",
|
||||
level: "c",
|
||||
produktname: "Proxmox VE Community Subscription 1 CPU/year",
|
||||
lizenzierteSockets: 1,
|
||||
regdate: "2025-12-01T00:00:00Z",
|
||||
nextduedate: "2026-12-01T00:00:00Z",
|
||||
checktime: "2026-09-17T02:14:00Z",
|
||||
},
|
||||
tags: ["produktiv"],
|
||||
notizen: "Zweiter Sockel im Sommer nachgerüstet.",
|
||||
},
|
||||
{
|
||||
id: "h5",
|
||||
hostname: "pve-huber-02",
|
||||
fqdn: "pve-huber-02.huber.intern",
|
||||
kundeId: "k2",
|
||||
standortId: "s3",
|
||||
produkt: "pve",
|
||||
produktVersion: "pve-manager/8.2.4/faa83925",
|
||||
kernel: "6.8.4-2-pve",
|
||||
serverId: "E5F607182A3B4C5D",
|
||||
clusterName: null,
|
||||
nodeName: null,
|
||||
ips: ["192.168.30.6"],
|
||||
sockets: 1,
|
||||
cpuModell: "Intel(R) Core(TM) i7-13700",
|
||||
uptimeSekunden: 604_800,
|
||||
paketUpdates: 41,
|
||||
agentVersion: "0.2.0",
|
||||
letzterReport: "2026-09-17T02:22:00Z",
|
||||
subscription: {
|
||||
key: null,
|
||||
status: "notfound",
|
||||
level: null,
|
||||
produktname: null,
|
||||
lizenzierteSockets: null,
|
||||
regdate: null,
|
||||
nextduedate: null,
|
||||
checktime: "2026-09-17T02:21:00Z",
|
||||
},
|
||||
tags: ["test"],
|
||||
notizen: "Testumgebung, Lizenzierung noch offen.",
|
||||
},
|
||||
{
|
||||
id: "h6",
|
||||
hostname: "pmg-lehner-mail",
|
||||
fqdn: "mail.lehner-stb.de",
|
||||
kundeId: "k3",
|
||||
standortId: "s4",
|
||||
produkt: "pmg",
|
||||
produktVersion: "pmg/8.1.2",
|
||||
kernel: "6.8.12-2-pve",
|
||||
serverId: "F607182A3B4C5D6E",
|
||||
clusterName: null,
|
||||
nodeName: null,
|
||||
ips: ["81.21.44.18", "192.168.5.10"],
|
||||
sockets: 1,
|
||||
cpuModell: "Intel(R) Xeon(R) E-2124",
|
||||
uptimeSekunden: 20_736_000,
|
||||
paketUpdates: 2,
|
||||
agentVersion: "0.2.0",
|
||||
letzterReport: "2026-09-17T01:30:00Z",
|
||||
subscription: {
|
||||
key: "pmgc-2be0f41a88",
|
||||
status: "active",
|
||||
level: "c",
|
||||
produktname: "Proxmox Mail Gateway Community Subscription 1 CPU/year",
|
||||
lizenzierteSockets: 1,
|
||||
regdate: "2025-11-15T00:00:00Z",
|
||||
nextduedate: "2026-11-15T00:00:00Z",
|
||||
checktime: "2026-09-17T01:29:00Z",
|
||||
},
|
||||
tags: ["mail"],
|
||||
notizen: null,
|
||||
},
|
||||
{
|
||||
id: "h7",
|
||||
hostname: "pve-lehner-01",
|
||||
fqdn: "pve-lehner-01.lehner.local",
|
||||
kundeId: "k3",
|
||||
standortId: "s4",
|
||||
produkt: "pve",
|
||||
produktVersion: "pve-manager/8.1.10/4b06efb5",
|
||||
kernel: "6.5.13-5-pve",
|
||||
serverId: "07182A3B4C5D6E7F",
|
||||
clusterName: null,
|
||||
nodeName: null,
|
||||
ips: ["192.168.5.20"],
|
||||
sockets: 1,
|
||||
cpuModell: "Intel(R) Xeon(R) E-2226G",
|
||||
uptimeSekunden: 3_110_400,
|
||||
paketUpdates: 63,
|
||||
agentVersion: "0.2.0",
|
||||
letzterReport: "2026-09-17T01:45:00Z",
|
||||
subscription: {
|
||||
key: "pve1c-11ffa3c209",
|
||||
status: "expired",
|
||||
level: "c",
|
||||
produktname: "Proxmox VE Community Subscription 1 CPU/year",
|
||||
lizenzierteSockets: 1,
|
||||
regdate: "2024-08-30T00:00:00Z",
|
||||
nextduedate: "2026-08-30T00:00:00Z",
|
||||
checktime: "2026-09-17T01:44:00Z",
|
||||
},
|
||||
tags: ["produktiv"],
|
||||
notizen: "Verlängerung mit Kundin besprochen, Bestellung offen.",
|
||||
},
|
||||
{
|
||||
id: "h8",
|
||||
hostname: "pve-nord-01",
|
||||
fqdn: "pve-nord-01.nord.intern",
|
||||
kundeId: "k4",
|
||||
standortId: "s5",
|
||||
produkt: "pve",
|
||||
produktVersion: "pve-manager/9.0.3/ab12cd34",
|
||||
kernel: "6.14.5-1-pve",
|
||||
serverId: "182A3B4C5D6E7F80",
|
||||
clusterName: "nord-cluster",
|
||||
nodeName: "kiel01",
|
||||
ips: ["172.16.4.11"],
|
||||
sockets: 2,
|
||||
cpuModell: "AMD EPYC 7313P",
|
||||
uptimeSekunden: 11_059_200,
|
||||
paketUpdates: null,
|
||||
agentVersion: "0.1.0",
|
||||
letzterReport: "2026-09-14T03:12:00Z",
|
||||
subscription: {
|
||||
key: "pve2c-85d37ae041",
|
||||
status: "active",
|
||||
level: "c",
|
||||
produktname: "Proxmox VE Community Subscription 2 CPUs/year",
|
||||
lizenzierteSockets: 2,
|
||||
regdate: "2026-01-20T00:00:00Z",
|
||||
nextduedate: "2027-01-20T00:00:00Z",
|
||||
checktime: "2026-09-14T03:11:00Z",
|
||||
},
|
||||
tags: ["produktiv", "cluster"],
|
||||
notizen: null,
|
||||
},
|
||||
{
|
||||
id: "h9",
|
||||
hostname: "pve-demo-neu",
|
||||
fqdn: null,
|
||||
kundeId: null,
|
||||
standortId: null,
|
||||
produkt: "pve",
|
||||
produktVersion: "pve-manager/9.0.3/ab12cd34",
|
||||
kernel: "6.14.5-1-pve",
|
||||
serverId: "2A3B4C5D6E7F8091",
|
||||
clusterName: null,
|
||||
nodeName: null,
|
||||
ips: ["203.0.113.44"],
|
||||
sockets: 1,
|
||||
cpuModell: "Intel(R) Core(TM) i5-14500",
|
||||
uptimeSekunden: 86_400,
|
||||
paketUpdates: 12,
|
||||
agentVersion: "0.2.0",
|
||||
letzterReport: "2026-09-17T06:05:00Z",
|
||||
subscription: {
|
||||
key: "pve1c-5c72db90aa",
|
||||
status: "active",
|
||||
level: "c",
|
||||
produktname: "Proxmox VE Community Subscription 1 CPU/year",
|
||||
lizenzierteSockets: 1,
|
||||
regdate: "2026-06-05T00:00:00Z",
|
||||
nextduedate: "2027-06-05T00:00:00Z",
|
||||
checktime: "2026-09-17T06:04:00Z",
|
||||
},
|
||||
tags: [],
|
||||
notizen: null,
|
||||
},
|
||||
];
|
||||
|
||||
export const laufzeiten: Laufzeit[] = [
|
||||
{
|
||||
id: "l1",
|
||||
hostId: "h1",
|
||||
key: "pve1c-a6bd21fcb6",
|
||||
start: "2025-09-24",
|
||||
ende: "2026-09-23",
|
||||
vorschlag: false,
|
||||
einkauf: {
|
||||
nummer: "PX-2025-88213",
|
||||
datum: "2025-09-22",
|
||||
faelligAm: "2025-10-06",
|
||||
nettoBetrag: 110,
|
||||
ustSatz: 19,
|
||||
rabatt: 0,
|
||||
zahlungsart: "Überweisung",
|
||||
bezahlt: true,
|
||||
bezahltAm: "2025-09-30",
|
||||
pdfDateiname: "proxmox-PX-2025-88213.pdf",
|
||||
},
|
||||
verkauf: {
|
||||
erstellt: true,
|
||||
nummer: "RE-2025-0412",
|
||||
datum: "2025-10-01",
|
||||
nettoBetrag: 165,
|
||||
ustSatz: 19,
|
||||
bezahlt: true,
|
||||
bezahltAm: "2025-10-14",
|
||||
pdfDateiname: "RE-2025-0412.pdf",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "l2",
|
||||
hostId: "h1",
|
||||
key: "pve1c-a6bd21fcb6",
|
||||
start: "2026-09-24",
|
||||
ende: "2027-09-23",
|
||||
vorschlag: false,
|
||||
einkauf: {
|
||||
nummer: "PX-2026-14790",
|
||||
datum: "2026-09-10",
|
||||
faelligAm: "2026-09-24",
|
||||
nettoBetrag: 115,
|
||||
ustSatz: 19,
|
||||
rabatt: 0,
|
||||
zahlungsart: "Überweisung",
|
||||
bezahlt: false,
|
||||
bezahltAm: null,
|
||||
pdfDateiname: "proxmox-PX-2026-14790.pdf",
|
||||
},
|
||||
verkauf: null,
|
||||
},
|
||||
{
|
||||
id: "l3",
|
||||
hostId: "h2",
|
||||
key: "pve2c-3f91ad77e2",
|
||||
start: "2025-10-08",
|
||||
ende: "2026-10-07",
|
||||
vorschlag: false,
|
||||
einkauf: {
|
||||
nummer: "PX-2025-88213",
|
||||
datum: "2025-09-22",
|
||||
faelligAm: "2025-10-06",
|
||||
nettoBetrag: 220,
|
||||
ustSatz: 19,
|
||||
rabatt: 0,
|
||||
zahlungsart: "Überweisung",
|
||||
bezahlt: true,
|
||||
bezahltAm: "2025-09-30",
|
||||
pdfDateiname: "proxmox-PX-2025-88213.pdf",
|
||||
},
|
||||
verkauf: {
|
||||
erstellt: true,
|
||||
nummer: "RE-2025-0412",
|
||||
datum: "2025-10-01",
|
||||
nettoBetrag: 320,
|
||||
ustSatz: 19,
|
||||
bezahlt: true,
|
||||
bezahltAm: "2025-10-14",
|
||||
pdfDateiname: "RE-2025-0412.pdf",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "l4",
|
||||
hostId: "h2",
|
||||
key: "pve2c-3f91ad77e2",
|
||||
start: "2026-10-08",
|
||||
ende: "2027-10-07",
|
||||
vorschlag: true,
|
||||
einkauf: null,
|
||||
verkauf: null,
|
||||
},
|
||||
{
|
||||
id: "l5",
|
||||
hostId: "h3",
|
||||
key: "pbsc-9d41be5507",
|
||||
start: "2026-03-02",
|
||||
ende: "2027-03-01",
|
||||
vorschlag: false,
|
||||
einkauf: {
|
||||
nummer: "PX-2026-09114",
|
||||
datum: "2026-02-26",
|
||||
faelligAm: "2026-03-12",
|
||||
nettoBetrag: 95,
|
||||
ustSatz: 19,
|
||||
rabatt: 0,
|
||||
zahlungsart: "Kreditkarte",
|
||||
bezahlt: true,
|
||||
bezahltAm: "2026-02-26",
|
||||
pdfDateiname: "proxmox-PX-2026-09114.pdf",
|
||||
},
|
||||
verkauf: {
|
||||
erstellt: true,
|
||||
nummer: "RE-2026-0188",
|
||||
datum: "2026-03-03",
|
||||
nettoBetrag: 140,
|
||||
ustSatz: 19,
|
||||
bezahlt: true,
|
||||
bezahltAm: "2026-03-20",
|
||||
pdfDateiname: "RE-2026-0188.pdf",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "l6",
|
||||
hostId: "h4",
|
||||
key: "pve1c-77c0ea1b93",
|
||||
start: "2025-12-01",
|
||||
ende: "2026-11-30",
|
||||
vorschlag: false,
|
||||
einkauf: {
|
||||
nummer: "PX-2025-91002",
|
||||
datum: "2025-11-27",
|
||||
faelligAm: "2025-12-11",
|
||||
nettoBetrag: 110,
|
||||
ustSatz: 19,
|
||||
rabatt: 0,
|
||||
zahlungsart: "Überweisung",
|
||||
bezahlt: true,
|
||||
bezahltAm: "2025-12-02",
|
||||
pdfDateiname: null,
|
||||
},
|
||||
verkauf: {
|
||||
erstellt: true,
|
||||
nummer: "RE-2025-0501",
|
||||
datum: "2025-12-03",
|
||||
nettoBetrag: 170,
|
||||
ustSatz: 19,
|
||||
bezahlt: false,
|
||||
bezahltAm: null,
|
||||
pdfDateiname: "RE-2025-0501.pdf",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "l7",
|
||||
hostId: "h6",
|
||||
key: "pmgc-2be0f41a88",
|
||||
start: "2025-11-15",
|
||||
ende: "2026-11-14",
|
||||
vorschlag: false,
|
||||
einkauf: {
|
||||
nummer: "PX-2025-90455",
|
||||
datum: "2025-11-11",
|
||||
faelligAm: "2025-11-25",
|
||||
nettoBetrag: 90,
|
||||
ustSatz: 19,
|
||||
rabatt: 5,
|
||||
zahlungsart: "Überweisung",
|
||||
bezahlt: true,
|
||||
bezahltAm: "2025-11-18",
|
||||
pdfDateiname: "proxmox-PX-2025-90455.pdf",
|
||||
},
|
||||
verkauf: {
|
||||
erstellt: true,
|
||||
nummer: "RE-2025-0489",
|
||||
datum: "2025-11-20",
|
||||
nettoBetrag: 135,
|
||||
ustSatz: 19,
|
||||
bezahlt: true,
|
||||
bezahltAm: "2025-12-01",
|
||||
pdfDateiname: "RE-2025-0489.pdf",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "l8",
|
||||
hostId: "h7",
|
||||
key: "pve1c-11ffa3c209",
|
||||
start: "2025-08-30",
|
||||
ende: "2026-08-29",
|
||||
vorschlag: false,
|
||||
einkauf: {
|
||||
nummer: "PX-2025-85110",
|
||||
datum: "2025-08-26",
|
||||
faelligAm: "2025-09-09",
|
||||
nettoBetrag: 110,
|
||||
ustSatz: 19,
|
||||
rabatt: 0,
|
||||
zahlungsart: "Überweisung",
|
||||
bezahlt: true,
|
||||
bezahltAm: "2025-08-28",
|
||||
pdfDateiname: "proxmox-PX-2025-85110.pdf",
|
||||
},
|
||||
verkauf: {
|
||||
erstellt: true,
|
||||
nummer: "RE-2025-0377",
|
||||
datum: "2025-09-01",
|
||||
nettoBetrag: 165,
|
||||
ustSatz: 19,
|
||||
bezahlt: true,
|
||||
bezahltAm: "2025-09-15",
|
||||
pdfDateiname: "RE-2025-0377.pdf",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "l9",
|
||||
hostId: "h8",
|
||||
key: "pve2c-85d37ae041",
|
||||
start: "2026-01-20",
|
||||
ende: "2027-01-19",
|
||||
vorschlag: false,
|
||||
einkauf: {
|
||||
nummer: "PX-2026-03998",
|
||||
datum: "2026-01-16",
|
||||
faelligAm: "2026-01-30",
|
||||
nettoBetrag: 220,
|
||||
ustSatz: 19,
|
||||
rabatt: 0,
|
||||
zahlungsart: "Überweisung",
|
||||
bezahlt: true,
|
||||
bezahltAm: "2026-01-19",
|
||||
pdfDateiname: "proxmox-PX-2026-03998.pdf",
|
||||
},
|
||||
verkauf: {
|
||||
erstellt: false,
|
||||
nummer: null,
|
||||
datum: null,
|
||||
nettoBetrag: null,
|
||||
ustSatz: 19,
|
||||
bezahlt: false,
|
||||
bezahltAm: null,
|
||||
pdfDateiname: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "l10",
|
||||
hostId: "h9",
|
||||
key: "pve1c-5c72db90aa",
|
||||
start: "2026-06-05",
|
||||
ende: "2027-06-04",
|
||||
vorschlag: false,
|
||||
einkauf: {
|
||||
nummer: "PX-2026-11233",
|
||||
datum: "2026-06-02",
|
||||
faelligAm: "2026-06-16",
|
||||
nettoBetrag: 115,
|
||||
ustSatz: 19,
|
||||
rabatt: 0,
|
||||
zahlungsart: "Überweisung",
|
||||
bezahlt: true,
|
||||
bezahltAm: "2026-06-04",
|
||||
pdfDateiname: null,
|
||||
},
|
||||
verkauf: null,
|
||||
},
|
||||
];
|
||||
|
||||
export const alerts: Alert[] = [
|
||||
{
|
||||
id: "a1",
|
||||
typ: "ablauf-7",
|
||||
titel: "Subscription läuft in 7 Tagen ab",
|
||||
beschreibung: "pve-brandl-01 · Brandl Elektrotechnik GmbH · 24.09.2026",
|
||||
schwere: "gefahr",
|
||||
hostId: "h1",
|
||||
kundeId: "k1",
|
||||
laufzeitId: "l2",
|
||||
seit: "2026-09-17T06:00:00Z",
|
||||
erledigt: false,
|
||||
},
|
||||
{
|
||||
id: "a2",
|
||||
typ: "status",
|
||||
titel: "Subscription abgelaufen",
|
||||
beschreibung: "pve-lehner-01 · Lehner Steuerberatung · Status expired seit 30.08.2026",
|
||||
schwere: "gefahr",
|
||||
hostId: "h7",
|
||||
kundeId: "k3",
|
||||
laufzeitId: null,
|
||||
seit: "2026-08-30T04:00:00Z",
|
||||
erledigt: false,
|
||||
},
|
||||
{
|
||||
id: "a3",
|
||||
typ: "sockets",
|
||||
titel: "Lizenzierte Sockets weichen ab",
|
||||
beschreibung: "pve-huber-01 · 1 lizenziert, 2 physisch vorhanden",
|
||||
schwere: "warnung",
|
||||
hostId: "h4",
|
||||
kundeId: "k2",
|
||||
laufzeitId: null,
|
||||
seit: "2026-09-02T03:00:00Z",
|
||||
erledigt: false,
|
||||
},
|
||||
{
|
||||
id: "a4",
|
||||
typ: "keine-meldung",
|
||||
titel: "Host meldet sich nicht",
|
||||
beschreibung: "pve-nord-01 · letzte Meldung am 14.09.2026",
|
||||
schwere: "warnung",
|
||||
hostId: "h8",
|
||||
kundeId: "k4",
|
||||
laufzeitId: null,
|
||||
seit: "2026-09-16T03:12:00Z",
|
||||
erledigt: false,
|
||||
},
|
||||
{
|
||||
id: "a5",
|
||||
typ: "ohne-kunde",
|
||||
titel: "Host ist keinem Kunden zugewiesen",
|
||||
beschreibung: "pve-demo-neu · seit heute registriert",
|
||||
schwere: "info",
|
||||
hostId: "h9",
|
||||
kundeId: null,
|
||||
laufzeitId: null,
|
||||
seit: "2026-09-17T06:05:00Z",
|
||||
erledigt: false,
|
||||
},
|
||||
{
|
||||
id: "a6",
|
||||
typ: "rechnung-offen",
|
||||
titel: "Proxmox-Rechnung fällig",
|
||||
beschreibung: "PX-2026-14790 · 115,00 € · fällig am 24.09.2026",
|
||||
schwere: "warnung",
|
||||
hostId: "h1",
|
||||
kundeId: "k1",
|
||||
laufzeitId: "l2",
|
||||
seit: "2026-09-17T06:00:00Z",
|
||||
erledigt: false,
|
||||
},
|
||||
{
|
||||
id: "a7",
|
||||
typ: "kundenrechnung-fehlt",
|
||||
titel: "Kundenrechnung noch nicht erstellt",
|
||||
beschreibung: "pve-nord-01 · Systemhaus Nord GmbH · Einkauf bezahlt am 19.01.2026",
|
||||
schwere: "warnung",
|
||||
hostId: "h8",
|
||||
kundeId: "k4",
|
||||
laufzeitId: "l9",
|
||||
seit: "2026-01-19T08:00:00Z",
|
||||
erledigt: false,
|
||||
},
|
||||
{
|
||||
id: "a8",
|
||||
typ: "kundenrechnung-unbezahlt",
|
||||
titel: "Kundenrechnung seit über 30 Tagen offen",
|
||||
beschreibung: "RE-2025-0501 · Huber Logistik AG · 170,00 € netto",
|
||||
schwere: "warnung",
|
||||
hostId: "h4",
|
||||
kundeId: "k2",
|
||||
laufzeitId: "l6",
|
||||
seit: "2026-01-05T08:00:00Z",
|
||||
erledigt: false,
|
||||
},
|
||||
];
|
||||
|
||||
/** Report-Historie (gekürzt) für die Host-Detailansicht. */
|
||||
export const reports: Report[] = hosts.flatMap((host) =>
|
||||
Array.from({ length: 6 }, (_, i) => {
|
||||
const zeitpunkt = new Date(
|
||||
new Date(host.letzterReport ?? HEUTE).getTime() - i * 24 * 60 * 60 * 1000,
|
||||
).toISOString();
|
||||
return {
|
||||
id: `${host.id}-r${i}`,
|
||||
hostId: host.id,
|
||||
zeitpunkt,
|
||||
status: host.subscription.status,
|
||||
key: host.subscription.key,
|
||||
nextduedate: host.subscription.nextduedate,
|
||||
agentVersion: host.agentVersion,
|
||||
paketUpdates: host.paketUpdates === null ? null : Math.max(0, host.paketUpdates - i),
|
||||
};
|
||||
}),
|
||||
);
|
||||
@@ -0,0 +1,218 @@
|
||||
import { stundenSeit, tageBis } from "@/lib/format";
|
||||
import { HEUTE, alerts, hosts, kunden, laufzeiten, reports } from "./data";
|
||||
import type { Host, Kunde, Laufzeit } from "./types";
|
||||
|
||||
export const MELDUNG_FRIST_STUNDEN = 48;
|
||||
export const ABLAUF_FENSTER_TAGE = 30;
|
||||
|
||||
export function getKunde(id: string | null): Kunde | undefined {
|
||||
if (!id) return undefined;
|
||||
return kunden.find((k) => k.id === id);
|
||||
}
|
||||
|
||||
export function getHost(id: string): Host | undefined {
|
||||
return hosts.find((h) => h.id === id);
|
||||
}
|
||||
|
||||
export function hostsVonKunde(kundeId: string): Host[] {
|
||||
return hosts.filter((h) => h.kundeId === kundeId);
|
||||
}
|
||||
|
||||
export function laufzeitenVonHost(hostId: string): Laufzeit[] {
|
||||
return laufzeiten.filter((l) => l.hostId === hostId).sort((a, b) => b.start.localeCompare(a.start));
|
||||
}
|
||||
|
||||
export function laufzeitenVonKunde(kundeId: string): Laufzeit[] {
|
||||
const hostIds = new Set(hostsVonKunde(kundeId).map((h) => h.id));
|
||||
return laufzeiten.filter((l) => hostIds.has(l.hostId)).sort((a, b) => b.start.localeCompare(a.start));
|
||||
}
|
||||
|
||||
/**
|
||||
* Laufzeit, die zum gemeldeten Ablaufdatum gehört: bevorzugt die Verlängerung, die am
|
||||
* `nextduedate` beginnt, sonst die laufende Laufzeit. Für das Dashboard ist die Verlängerung
|
||||
* der interessante Fall, weil deren Rechnungen noch offen sind.
|
||||
*/
|
||||
export function laufzeitZuAblauf(host: Host, jetzt: Date = HEUTE): Laufzeit | undefined {
|
||||
const eigene = laufzeitenVonHost(host.id).filter((l) => !l.vorschlag);
|
||||
const ablauf = host.subscription.nextduedate?.slice(0, 10);
|
||||
return eigene.find((l) => l.start === ablauf) ?? aktuelleLaufzeit(host.id, jetzt);
|
||||
}
|
||||
|
||||
/** Laufende bzw. zuletzt gekaufte Laufzeit eines Hosts. */
|
||||
export function aktuelleLaufzeit(hostId: string, jetzt: Date = HEUTE): Laufzeit | undefined {
|
||||
const eigene = laufzeitenVonHost(hostId).filter((l) => !l.vorschlag);
|
||||
const heuteIso = jetzt.toISOString().slice(0, 10);
|
||||
return eigene.find((l) => l.start <= heuteIso && l.ende >= heuteIso) ?? eigene[0];
|
||||
}
|
||||
|
||||
export function reportsVonHost(hostId: string) {
|
||||
return reports.filter((r) => r.hostId === hostId).sort((a, b) => b.zeitpunkt.localeCompare(a.zeitpunkt));
|
||||
}
|
||||
|
||||
export function alertsVonHost(hostId: string) {
|
||||
return alerts.filter((a) => a.hostId === hostId && !a.erledigt);
|
||||
}
|
||||
|
||||
export function alertsVonKunde(kundeId: string) {
|
||||
return alerts.filter((a) => a.kundeId === kundeId && !a.erledigt);
|
||||
}
|
||||
|
||||
export function offeneAlerts() {
|
||||
return alerts.filter((a) => !a.erledigt);
|
||||
}
|
||||
|
||||
export function hostMeldetNicht(host: Host, jetzt: Date = HEUTE): boolean {
|
||||
const stunden = stundenSeit(host.letzterReport, jetzt);
|
||||
return stunden === null || stunden > MELDUNG_FRIST_STUNDEN;
|
||||
}
|
||||
|
||||
export function nichtZugeordneteHosts(): Host[] {
|
||||
return hosts.filter((h) => h.kundeId === null);
|
||||
}
|
||||
|
||||
/** Offene Punkte einer Laufzeit: Proxmox-Rechnung unbezahlt bzw. Kundenrechnung fehlt. */
|
||||
export function offenePunkte(laufzeit: Laufzeit): { einkaufOffen: boolean; verkaufOffen: boolean } {
|
||||
const einkaufOffen = laufzeit.einkauf !== null && !laufzeit.einkauf.bezahlt;
|
||||
const verkaufOffen = laufzeit.verkauf === null || !laufzeit.verkauf.erstellt;
|
||||
return { einkaufOffen, verkaufOffen };
|
||||
}
|
||||
|
||||
export function istAbgeschlossen(laufzeit: Laufzeit): boolean {
|
||||
const { einkaufOffen, verkaufOffen } = offenePunkte(laufzeit);
|
||||
return !einkaufOffen && !verkaufOffen;
|
||||
}
|
||||
|
||||
/** Laufzeiten, für die noch etwas zu tun ist (Vorschläge zählen ebenfalls). */
|
||||
export function offeneRechnungsLaufzeiten(): Laufzeit[] {
|
||||
return laufzeiten.filter((l) => !l.vorschlag && !istAbgeschlossen(l));
|
||||
}
|
||||
|
||||
export function dashboardKennzahlen(jetzt: Date = HEUTE) {
|
||||
const aktiv = hosts.filter((h) => h.subscription.status === "active");
|
||||
const bald = hosts.filter((h) => {
|
||||
const tage = tageBis(h.subscription.nextduedate, jetzt);
|
||||
return tage !== null && tage >= 0 && tage <= ABLAUF_FENSTER_TAGE;
|
||||
});
|
||||
const offeneEinkaufsrechnungen = laufzeiten.filter((l) => offenePunkte(l).einkaufOffen);
|
||||
const fehlendeKundenrechnungen = laufzeiten.filter(
|
||||
(l) => !l.vorschlag && l.einkauf !== null && offenePunkte(l).verkaufOffen,
|
||||
);
|
||||
|
||||
return {
|
||||
hostsGesamt: hosts.length,
|
||||
aktivLizenziert: aktiv.length,
|
||||
ohneSubscription: hosts.filter((h) => h.subscription.status !== "active").length,
|
||||
baldAblaufend: bald.length,
|
||||
ohneMeldung: hosts.filter((h) => hostMeldetNicht(h, jetzt)).length,
|
||||
ohneKunde: nichtZugeordneteHosts().length,
|
||||
offeneEinkaufsrechnungen: offeneEinkaufsrechnungen.length,
|
||||
fehlendeKundenrechnungen: fehlendeKundenrechnungen.length,
|
||||
offeneRechnungspunkte: offeneEinkaufsrechnungen.length + fehlendeKundenrechnungen.length,
|
||||
offeneAlerts: offeneAlerts().length,
|
||||
};
|
||||
}
|
||||
|
||||
/** Hosts nach Ablaufdatum der Subscription, ohne Hosts ganz ohne Subscription. */
|
||||
export function hostsNachAblauf(): Host[] {
|
||||
return [...hosts]
|
||||
.filter((h) => h.subscription.nextduedate !== null)
|
||||
.sort((a, b) => (a.subscription.nextduedate ?? "").localeCompare(b.subscription.nextduedate ?? ""));
|
||||
}
|
||||
|
||||
export function summenVonKunde(kundeId: string) {
|
||||
const eigene = laufzeitenVonKunde(kundeId);
|
||||
const einkauf = eigene.reduce((s, l) => s + (l.einkauf?.nettoBetrag ?? 0), 0);
|
||||
const verkauf = eigene.reduce((s, l) => s + (l.verkauf?.nettoBetrag ?? 0), 0);
|
||||
return { einkauf, verkauf, marge: verkauf - einkauf };
|
||||
}
|
||||
|
||||
export function summenProJahr(laufzeitenListe: Laufzeit[]) {
|
||||
const proJahr = new Map<string, { einkauf: number; verkauf: number }>();
|
||||
for (const l of laufzeitenListe) {
|
||||
const jahr = l.start.slice(0, 4);
|
||||
const eintrag = proJahr.get(jahr) ?? { einkauf: 0, verkauf: 0 };
|
||||
eintrag.einkauf += l.einkauf?.nettoBetrag ?? 0;
|
||||
eintrag.verkauf += l.verkauf?.nettoBetrag ?? 0;
|
||||
proJahr.set(jahr, eintrag);
|
||||
}
|
||||
return [...proJahr.entries()]
|
||||
.sort((a, b) => b[0].localeCompare(a[0]))
|
||||
.map(([jahr, werte]) => ({ jahr, ...werte, marge: werte.verkauf - werte.einkauf }));
|
||||
}
|
||||
|
||||
/** Fortschritt „erledigte Rechnungspunkte“ je Kunde für die Dashboard-Card. */
|
||||
export function rechnungsFortschrittProKunde() {
|
||||
return kunden.map((kunde) => {
|
||||
const eigene = laufzeitenVonKunde(kunde.id).filter((l) => !l.vorschlag);
|
||||
const gesamt = eigene.length * 2;
|
||||
const erledigt = eigene.reduce((summe, l) => {
|
||||
const { einkaufOffen, verkaufOffen } = offenePunkte(l);
|
||||
return summe + (einkaufOffen ? 0 : 1) + (verkaufOffen ? 0 : 1);
|
||||
}, 0);
|
||||
return {
|
||||
kunde,
|
||||
gesamt,
|
||||
erledigt,
|
||||
prozent: gesamt === 0 ? 100 : Math.round((erledigt / gesamt) * 100),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export function kundenUebersicht(jetzt: Date = HEUTE) {
|
||||
return kunden.map((kunde) => {
|
||||
const eigeneHosts = hostsVonKunde(kunde.id);
|
||||
const naechsterAblauf = eigeneHosts
|
||||
.map((h) => h.subscription.nextduedate)
|
||||
.filter((d): d is string => d !== null)
|
||||
.sort()[0];
|
||||
const eigeneLaufzeiten = laufzeitenVonKunde(kunde.id).filter((l) => !l.vorschlag);
|
||||
const offen = eigeneLaufzeiten.filter((l) => !istAbgeschlossen(l)).length;
|
||||
return {
|
||||
kunde,
|
||||
hosts: eigeneHosts.length,
|
||||
aktiv: eigeneHosts.filter((h) => h.subscription.status === "active").length,
|
||||
naechsterAblauf: naechsterAblauf ?? null,
|
||||
tageBisAblauf: tageBis(naechsterAblauf ?? null, jetzt),
|
||||
offeneAlerts: alertsVonKunde(kunde.id).length,
|
||||
offeneRechnungspunkte: offen,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/** Einfache Volltextsuche über Hosts, Kunden und Rechnungsnummern (Strg+K). */
|
||||
export function suche(begriff: string) {
|
||||
const q = begriff.trim().toLowerCase();
|
||||
if (q.length < 2) return { hosts: [], kunden: [], rechnungen: [] };
|
||||
|
||||
const trefferHosts = hosts.filter((h) =>
|
||||
[h.hostname, h.fqdn, h.serverId, h.subscription.key, ...h.ips]
|
||||
.filter(Boolean)
|
||||
.some((wert) => String(wert).toLowerCase().includes(q)),
|
||||
);
|
||||
const trefferKunden = kunden.filter((k) =>
|
||||
[k.name, k.kundennummer, k.ansprechpartner, k.email]
|
||||
.filter(Boolean)
|
||||
.some((wert) => String(wert).toLowerCase().includes(q)),
|
||||
);
|
||||
const trefferRechnungen = laufzeiten.filter((l) =>
|
||||
[l.einkauf?.nummer, l.verkauf?.nummer]
|
||||
.filter(Boolean)
|
||||
.some((wert) => String(wert).toLowerCase().includes(q)),
|
||||
);
|
||||
|
||||
return { hosts: trefferHosts, kunden: trefferKunden, rechnungen: trefferRechnungen };
|
||||
}
|
||||
|
||||
export const PRODUKT_NAME: Record<Host["produkt"], string> = {
|
||||
pve: "Proxmox VE",
|
||||
pbs: "Proxmox Backup Server",
|
||||
pmg: "Proxmox Mail Gateway",
|
||||
};
|
||||
|
||||
export const STATUS_TEXT: Record<Host["subscription"]["status"], string> = {
|
||||
active: "Aktiv",
|
||||
notfound: "Keine Subscription",
|
||||
invalid: "Ungültig",
|
||||
expired: "Abgelaufen",
|
||||
suspended: "Ausgesetzt",
|
||||
};
|
||||
@@ -0,0 +1,63 @@
|
||||
import { hosts, kunden, laufzeiten } from "./data";
|
||||
import { PRODUKT_NAME, getKunde } from "./queries";
|
||||
|
||||
export interface SuchEintrag {
|
||||
typ: "Host" | "Kunde" | "Rechnung";
|
||||
titel: string;
|
||||
untertitel: string;
|
||||
href: string;
|
||||
/** Alle durchsuchbaren Werte in Kleinschreibung. */
|
||||
begriffe: string[];
|
||||
}
|
||||
|
||||
/** Flacher Suchindex für die globale Suche (Strg+K) im Prototyp. */
|
||||
export function suchIndex(): SuchEintrag[] {
|
||||
const eintraege: SuchEintrag[] = [];
|
||||
|
||||
for (const host of hosts) {
|
||||
const kunde = getKunde(host.kundeId);
|
||||
eintraege.push({
|
||||
typ: "Host",
|
||||
titel: host.hostname,
|
||||
untertitel: `${PRODUKT_NAME[host.produkt]} · ${kunde?.name ?? "Nicht zugeordnet"}${
|
||||
host.subscription.key ? ` · ${host.subscription.key}` : ""
|
||||
}`,
|
||||
href: `/hosts/${host.id}`,
|
||||
begriffe: [host.hostname, host.fqdn, host.serverId, host.subscription.key, ...host.ips]
|
||||
.filter((w): w is string => Boolean(w))
|
||||
.map((w) => w.toLowerCase()),
|
||||
});
|
||||
}
|
||||
|
||||
for (const kunde of kunden) {
|
||||
eintraege.push({
|
||||
typ: "Kunde",
|
||||
titel: kunde.name,
|
||||
untertitel: `${kunde.kundennummer}${kunde.ansprechpartner ? ` · ${kunde.ansprechpartner}` : ""}`,
|
||||
href: `/kunden/${kunde.id}`,
|
||||
begriffe: [kunde.name, kunde.kundennummer, kunde.ansprechpartner, kunde.email]
|
||||
.filter((w): w is string => Boolean(w))
|
||||
.map((w) => w.toLowerCase()),
|
||||
});
|
||||
}
|
||||
|
||||
for (const laufzeit of laufzeiten) {
|
||||
const host = hosts.find((h) => h.id === laufzeit.hostId);
|
||||
const kunde = getKunde(host?.kundeId ?? null);
|
||||
for (const [art, rechnung] of [
|
||||
["Proxmox-Rechnung", laufzeit.einkauf],
|
||||
["Kundenrechnung", laufzeit.verkauf],
|
||||
] as const) {
|
||||
if (!rechnung?.nummer) continue;
|
||||
eintraege.push({
|
||||
typ: "Rechnung",
|
||||
titel: rechnung.nummer,
|
||||
untertitel: `${art} · ${host?.hostname ?? "?"} · ${kunde?.name ?? "Nicht zugeordnet"}`,
|
||||
href: `/hosts/${laufzeit.hostId}`,
|
||||
begriffe: [rechnung.nummer.toLowerCase()],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return eintraege;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
/**
|
||||
* Typen für die Beispieldaten des Prototyps (#002).
|
||||
* Sie bilden das geplante Datenmodell (docs/architektur.md) vereinfacht ab und werden
|
||||
* in #003 durch die von Prisma erzeugten Typen ersetzt.
|
||||
*/
|
||||
|
||||
export type Produkt = "pve" | "pbs" | "pmg";
|
||||
|
||||
export type SubscriptionStatus = "active" | "notfound" | "invalid" | "expired" | "suspended";
|
||||
|
||||
export type AlertSchwere = "info" | "warnung" | "gefahr";
|
||||
|
||||
export interface Kunde {
|
||||
id: string;
|
||||
name: string;
|
||||
kundennummer: string;
|
||||
ansprechpartner: string | null;
|
||||
email: string | null;
|
||||
telefon: string | null;
|
||||
notizen: string | null;
|
||||
standorte: Standort[];
|
||||
}
|
||||
|
||||
export interface Standort {
|
||||
id: string;
|
||||
kundeId: string;
|
||||
name: string;
|
||||
ort: string | null;
|
||||
}
|
||||
|
||||
export interface Host {
|
||||
id: string;
|
||||
hostname: string;
|
||||
fqdn: string | null;
|
||||
kundeId: string | null;
|
||||
standortId: string | null;
|
||||
produkt: Produkt;
|
||||
produktVersion: string | null;
|
||||
kernel: string | null;
|
||||
serverId: string;
|
||||
clusterName: string | null;
|
||||
nodeName: string | null;
|
||||
ips: string[];
|
||||
sockets: number | null;
|
||||
cpuModell: string | null;
|
||||
uptimeSekunden: number | null;
|
||||
paketUpdates: number | null;
|
||||
agentVersion: string;
|
||||
letzterReport: string | null;
|
||||
subscription: {
|
||||
key: string | null;
|
||||
status: SubscriptionStatus;
|
||||
level: string | null;
|
||||
produktname: string | null;
|
||||
lizenzierteSockets: number | null;
|
||||
regdate: string | null;
|
||||
nextduedate: string | null;
|
||||
checktime: string | null;
|
||||
};
|
||||
tags: string[];
|
||||
notizen: string | null;
|
||||
}
|
||||
|
||||
export interface Rechnung {
|
||||
nummer: string | null;
|
||||
datum: string | null;
|
||||
faelligAm?: string | null;
|
||||
nettoBetrag: number | null;
|
||||
ustSatz: number;
|
||||
rabatt?: number | null;
|
||||
zahlungsart?: string | null;
|
||||
bezahlt: boolean;
|
||||
bezahltAm: string | null;
|
||||
pdfDateiname: string | null;
|
||||
}
|
||||
|
||||
export interface Laufzeit {
|
||||
id: string;
|
||||
hostId: string;
|
||||
key: string;
|
||||
start: string;
|
||||
ende: string;
|
||||
/** Vom Agent vorgeschlagen und noch nicht bestätigt. */
|
||||
vorschlag: boolean;
|
||||
/** Proxmox-Rechnung (Einkauf). */
|
||||
einkauf: Rechnung | null;
|
||||
/** Kundenrechnung (Verkauf); `erstellt = false`, solange sie noch fehlt. */
|
||||
verkauf: (Rechnung & { erstellt: boolean }) | null;
|
||||
}
|
||||
|
||||
export interface Alert {
|
||||
id: string;
|
||||
typ: string;
|
||||
titel: string;
|
||||
beschreibung: string;
|
||||
schwere: AlertSchwere;
|
||||
hostId: string | null;
|
||||
kundeId: string | null;
|
||||
laufzeitId: string | null;
|
||||
seit: string;
|
||||
erledigt: boolean;
|
||||
}
|
||||
|
||||
export interface Report {
|
||||
id: string;
|
||||
hostId: string;
|
||||
zeitpunkt: string;
|
||||
status: SubscriptionStatus;
|
||||
key: string | null;
|
||||
nextduedate: string | null;
|
||||
agentVersion: string;
|
||||
paketUpdates: number | null;
|
||||
}
|
||||
Reference in New Issue
Block a user