feat(kunden): Kundenverwaltung, Hostzuweisung und Token-Verwaltung (#006)
Kunden und Standorte pflegen, nicht zugeordnete Hosts in einem Schritt zuweisen, Enrollment- und Host-Tokens verwalten, Audit-Log. Dashboard, Kundenseiten und globale Suche laufen jetzt auf der Datenbank. 45 Tests. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -1,34 +1,175 @@
|
||||
import Link from "next/link";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { TokenFormular } from "@/components/tokens/TokenFormular";
|
||||
import { Badge } from "@/components/ui/Badges";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { CopyableCode } from "@/components/ui/CopyableCode";
|
||||
import { formatDatum, formatDatumZeit } from "@/lib/format";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { enrollmentTokenWiderrufen, hostTokenWiderrufen } from "@/server/actions/tokens";
|
||||
|
||||
export const metadata = { title: "Agent-Tokens" };
|
||||
|
||||
export default function TokensSeite() {
|
||||
export default async function TokensSeite() {
|
||||
const dashboardUrl = (process.env.APP_URL ?? "https://dashboard.example.de").replace(/\/$/, "");
|
||||
|
||||
const [kunden, enrollmentTokens, hostTokens] = await Promise.all([
|
||||
prisma.kunde.findMany({ orderBy: { name: "asc" }, select: { id: true, name: true } }),
|
||||
prisma.enrollmentToken.findMany({
|
||||
orderBy: { erstelltAm: "desc" },
|
||||
include: { kunde: { select: { name: true } } },
|
||||
}),
|
||||
prisma.agentToken.findMany({
|
||||
orderBy: { erstelltAm: "desc" },
|
||||
include: { host: { select: { id: true, hostname: true } } },
|
||||
}),
|
||||
]);
|
||||
|
||||
const jetzt = new Date();
|
||||
|
||||
function zustand(token: {
|
||||
widerrufenAm: Date | null;
|
||||
gueltigBis: Date | null;
|
||||
maxNutzungen: number | null;
|
||||
nutzungen: number;
|
||||
}) {
|
||||
if (token.widerrufenAm) return { text: "Widerrufen", farbe: "neutral" as const };
|
||||
if (token.gueltigBis && token.gueltigBis < jetzt) return { text: "Abgelaufen", farbe: "danger" as const };
|
||||
if (token.maxNutzungen !== null && token.nutzungen >= token.maxNutzungen)
|
||||
return { text: "Aufgebraucht", farbe: "warning" as const };
|
||||
return { text: "Gültig", farbe: "success" as const };
|
||||
}
|
||||
|
||||
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.
|
||||
<Card titel="Neuen Enrollment-Token erzeugen" rahmen="primary">
|
||||
<p className="text-body-secondary">
|
||||
Mit einem Enrollment-Token registriert sich ein Agent einmalig und erhält dabei seinen eigenen
|
||||
Host-Token. Ist ein Kunde hinterlegt, sind neue Hosts sofort zugeordnet und tauchen nicht unter{" "}
|
||||
<Link href="/hosts/nicht-zugeordnet">Nicht zugeordnet</Link> auf.
|
||||
</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" />
|
||||
<TokenFormular kunden={kunden} dashboardUrl={dashboardUrl} />
|
||||
</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 titel={`Enrollment-Tokens (${enrollmentTokens.length})`} rahmen="info" tabelle>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Bezeichnung</th>
|
||||
<th scope="col">Anfang</th>
|
||||
<th scope="col">Kunde</th>
|
||||
<th scope="col">Gültig bis</th>
|
||||
<th scope="col">Nutzungen</th>
|
||||
<th scope="col">Zustand</th>
|
||||
<th scope="col" className="text-end">
|
||||
Aktion
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{enrollmentTokens.map((token) => {
|
||||
const status = zustand(token);
|
||||
return (
|
||||
<tr key={token.id}>
|
||||
<td>{token.bezeichnung ?? "–"}</td>
|
||||
<td className="pl-mono">{token.praefix}…</td>
|
||||
<td>{token.kunde?.name ?? "–"}</td>
|
||||
<td>{formatDatum(token.gueltigBis)}</td>
|
||||
<td>
|
||||
{token.nutzungen}
|
||||
{token.maxNutzungen !== null ? ` / ${token.maxNutzungen}` : ""}
|
||||
</td>
|
||||
<td>
|
||||
<Badge farbe={status.farbe}>{status.text}</Badge>
|
||||
</td>
|
||||
<td className="text-end">
|
||||
{token.widerrufenAm ? null : (
|
||||
<form action={enrollmentTokenWiderrufen}>
|
||||
<input type="hidden" name="id" value={token.id} />
|
||||
<button type="submit" className="btn btn-sm btn-outline-danger">
|
||||
Widerrufen
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{enrollmentTokens.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="text-center text-body-secondary py-4">
|
||||
Noch kein Enrollment-Token erzeugt.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card titel={`Host-Tokens (${hostTokens.length})`} rahmen="info" tabelle>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Host</th>
|
||||
<th scope="col">Anfang</th>
|
||||
<th scope="col">Erstellt</th>
|
||||
<th scope="col">Zuletzt benutzt</th>
|
||||
<th scope="col">Zustand</th>
|
||||
<th scope="col" className="text-end">
|
||||
Aktion
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{hostTokens.map((token) => (
|
||||
<tr key={token.id}>
|
||||
<td>
|
||||
<Link href={`/hosts/${token.host.id}`} className="text-decoration-none">
|
||||
{token.host.hostname}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="pl-mono">{token.praefix}…</td>
|
||||
<td>{formatDatum(token.erstelltAm)}</td>
|
||||
<td>{formatDatumZeit(token.letzteNutzungAm)}</td>
|
||||
<td>
|
||||
{token.widerrufenAm ? (
|
||||
<Badge farbe="neutral">Widerrufen</Badge>
|
||||
) : (
|
||||
<Badge farbe="success">Aktiv</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-end">
|
||||
{token.widerrufenAm ? null : (
|
||||
<form action={hostTokenWiderrufen}>
|
||||
<input type="hidden" name="id" value={token.id} />
|
||||
<input type="hidden" name="hostId" value={token.host.id} />
|
||||
<button type="submit" className="btn btn-sm btn-outline-danger">
|
||||
Widerrufen
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{hostTokens.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="text-center text-body-secondary py-4">
|
||||
Noch kein Host registriert.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@ 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 { HEUTE } from "@/mock/data";
|
||||
import {
|
||||
PRODUKT_NAME,
|
||||
alertsVonHost,
|
||||
@@ -24,10 +24,6 @@ import {
|
||||
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" };
|
||||
|
||||
@@ -1,15 +1,25 @@
|
||||
import Link from "next/link";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { ZuweisungsFormular } from "@/components/hosts/ZuweisungsFormular";
|
||||
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";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { hostsOhneKunde } from "@/server/queries/hosts";
|
||||
|
||||
export const metadata = { title: "Nicht zugeordnete Hosts" };
|
||||
|
||||
export default function NichtZugeordnetSeite() {
|
||||
const liste = nichtZugeordneteHosts();
|
||||
export default async function NichtZugeordnetSeite() {
|
||||
const [hosts, kunden] = await Promise.all([
|
||||
hostsOhneKunde(),
|
||||
prisma.kunde.findMany({
|
||||
orderBy: { name: "asc" },
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
standorte: { select: { id: true, name: true }, orderBy: { name: "asc" } },
|
||||
},
|
||||
}),
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -20,83 +30,40 @@ export default function NichtZugeordnetSeite() {
|
||||
|
||||
<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>
|
||||
{hosts.length === 0 ? (
|
||||
<Callout titel="Alles zugeordnet" farbe="info">
|
||||
Jeder gemeldete Host gehört zu einem Kunden. Neu registrierte Hosts erscheinen automatisch hier.
|
||||
</Callout>
|
||||
) : (
|
||||
<Callout titel="Schnellzuweisung" farbe="warning">
|
||||
Hosts auswählen, Kunde wählen und in einem Schritt zuweisen. Wer Hosts direkt vorzuordnen
|
||||
möchte, erzeugt unter <Link href="/einstellungen/tokens">Agent-Tokens</Link> einen
|
||||
Enrollment-Token mit Kundenbindung – damit landen neue Hosts sofort beim richtigen Kunden.
|
||||
</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>
|
||||
{kunden.length === 0 ? (
|
||||
<Callout titel="Noch kein Kunde vorhanden" farbe="danger">
|
||||
Zum Zuweisen wird mindestens ein Kunde benötigt.{" "}
|
||||
<Link href="/kunden/neu">Jetzt einen Kunden anlegen.</Link>
|
||||
</Callout>
|
||||
) : null}
|
||||
|
||||
<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>
|
||||
{hosts.length > 0 ? (
|
||||
<Card titel={`${hosts.length} Hosts ohne Kunde`} rahmen="warning" tabelle>
|
||||
<ZuweisungsFormular
|
||||
hosts={hosts.map((host) => ({
|
||||
id: host.id,
|
||||
hostname: host.hostname,
|
||||
produkt: host.produkt,
|
||||
serverId: host.serverId,
|
||||
subKey: host.subKey,
|
||||
erstmalsGesehenAm: host.erstmalsGesehenAm.toISOString(),
|
||||
}))}
|
||||
kunden={kunden}
|
||||
/>
|
||||
</Card>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { KundeFormular } from "@/components/kunden/KundeFormular";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { kundeLoeschen } from "@/server/actions/kunden";
|
||||
|
||||
export const metadata = { title: "Kunde bearbeiten" };
|
||||
|
||||
export default async function KundeBearbeitenSeite({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const kunde = await prisma.kunde.findUnique({
|
||||
where: { id },
|
||||
include: { _count: { select: { hosts: true } } },
|
||||
});
|
||||
if (!kunde) notFound();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentHeader
|
||||
titel={`${kunde.name} bearbeiten`}
|
||||
brotkrumen={[
|
||||
{ titel: "Kunden", href: "/kunden" },
|
||||
{ titel: kunde.name, href: `/kunden/${kunde.id}` },
|
||||
{ titel: "Bearbeiten" },
|
||||
]}
|
||||
/>
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<Card titel="Stammdaten" rahmen="primary">
|
||||
<KundeFormular
|
||||
werte={{
|
||||
id: kunde.id,
|
||||
name: kunde.name,
|
||||
kundennummer: kunde.kundennummer,
|
||||
ansprechpartner: kunde.ansprechpartner,
|
||||
email: kunde.email,
|
||||
telefon: kunde.telefon,
|
||||
notizen: kunde.notizen,
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card titel="Kunde löschen" rahmen="danger">
|
||||
<p>
|
||||
Der Kunde wird mit allen Standorten und Kundenrechnungen entfernt. Seine{" "}
|
||||
{kunde._count.hosts} Host(s) bleiben erhalten und erscheinen danach unter „Nicht
|
||||
zugeordnet“.
|
||||
</p>
|
||||
<form action={kundeLoeschen}>
|
||||
<input type="hidden" name="id" value={kunde.id} />
|
||||
<button type="submit" className="btn btn-danger pl-touch-target">
|
||||
Endgültig löschen
|
||||
</button>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { StandortVerwaltung } from "@/components/kunden/StandortVerwaltung";
|
||||
import {
|
||||
AblaufBadge,
|
||||
EinkaufBadge,
|
||||
@@ -12,55 +13,51 @@ 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 }));
|
||||
}
|
||||
import { hostZuordnungAufheben } from "@/server/actions/hosts";
|
||||
import { kundeMitDetails, laufzeitenVonKunde, summen, summenProJahr } from "@/server/queries/kunden";
|
||||
import { meldungsGrenze } from "@/server/queries/hosts";
|
||||
import { PRODUKT_TEXT, statusAusDatenbank } from "@/lib/anzeige";
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
return { title: getKunde(id)?.name ?? "Kunde" };
|
||||
const kunde = await kundeMitDetails(id);
|
||||
return { title: kunde?.name ?? "Kunde" };
|
||||
}
|
||||
|
||||
export default async function KundenDetailSeite({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const kunde = getKunde(id);
|
||||
const kunde = await kundeMitDetails(id);
|
||||
if (!kunde) notFound();
|
||||
|
||||
const eigeneHosts = hostsVonKunde(kunde.id);
|
||||
const laufzeiten = laufzeitenVonKunde(kunde.id);
|
||||
const summen = summenVonKunde(kunde.id);
|
||||
const laufzeiten = await laufzeitenVonKunde(kunde.id);
|
||||
const gesamt = summen(laufzeiten);
|
||||
const proJahr = summenProJahr(laufzeiten);
|
||||
const alerts = alertsVonKunde(kunde.id);
|
||||
const heute = new Date();
|
||||
const grenze = meldungsGrenze(heute);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentHeader
|
||||
titel={kunde.name}
|
||||
brotkrumen={[{ titel: "Kunden", href: "/kunden" }, { titel: kunde.name }]}
|
||||
aktion={
|
||||
<Link href={`/kunden/${kunde.id}/bearbeiten`} className="btn btn-sm btn-outline-primary">
|
||||
<i className="bi bi-pencil me-1" aria-hidden="true" />
|
||||
Bearbeiten
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
|
||||
<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" />
|
||||
<InfoBox text="Hosts" wert={String(kunde.hosts.length)} icon="bi-hdd-stack" farbe="info" />
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<InfoBox
|
||||
text="Einkauf netto"
|
||||
wert={formatEuro(summen.einkauf)}
|
||||
wert={formatEuro(gesamt.einkauf)}
|
||||
icon="bi-cart"
|
||||
farbe="neutral"
|
||||
/>
|
||||
@@ -68,7 +65,7 @@ export default async function KundenDetailSeite({ params }: { params: Promise<{
|
||||
<div className="col-6 col-lg-3">
|
||||
<InfoBox
|
||||
text="Verkauf netto"
|
||||
wert={formatEuro(summen.verkauf)}
|
||||
wert={formatEuro(gesamt.verkauf)}
|
||||
icon="bi-receipt"
|
||||
farbe="primary"
|
||||
/>
|
||||
@@ -76,7 +73,7 @@ export default async function KundenDetailSeite({ params }: { params: Promise<{
|
||||
<div className="col-6 col-lg-3">
|
||||
<InfoBox
|
||||
text="Marge"
|
||||
wert={formatEuro(summen.marge)}
|
||||
wert={formatEuro(gesamt.marge)}
|
||||
icon="bi-graph-up-arrow"
|
||||
farbe="success"
|
||||
/>
|
||||
@@ -97,15 +94,6 @@ export default async function KundenDetailSeite({ params }: { params: Promise<{
|
||||
</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>
|
||||
@@ -114,12 +102,26 @@ export default async function KundenDetailSeite({ params }: { params: Promise<{
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card titel="Offene Warnungen" rahmen={alerts.length > 0 ? "danger" : "info"}>
|
||||
{alerts.length === 0 ? (
|
||||
<Card titel="Standorte" rahmen="info">
|
||||
<StandortVerwaltung
|
||||
kundeId={kunde.id}
|
||||
standorte={kunde.standorte.map((standort) => ({
|
||||
id: standort.id,
|
||||
name: standort.name,
|
||||
strasse: standort.strasse,
|
||||
plz: standort.plz,
|
||||
ort: standort.ort,
|
||||
hosts: kunde.hosts.filter((host) => host.standortId === standort.id).length,
|
||||
}))}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card titel="Offene Warnungen" rahmen={kunde.alerts.length > 0 ? "danger" : "info"}>
|
||||
{kunde.alerts.length === 0 ? (
|
||||
<p className="mb-0 text-body-secondary">Keine offenen Warnungen.</p>
|
||||
) : (
|
||||
<ul className="list-unstyled mb-0 small">
|
||||
{alerts.map((alert) => (
|
||||
{kunde.alerts.map((alert) => (
|
||||
<li key={alert.id} className="mb-2">
|
||||
<strong>{alert.titel}</strong>
|
||||
<div className="text-body-secondary">{alert.beschreibung}</div>
|
||||
@@ -131,7 +133,7 @@ export default async function KundenDetailSeite({ params }: { params: Promise<{
|
||||
</div>
|
||||
|
||||
<div className="col-lg-8">
|
||||
<Card titel="Hosts" rahmen="primary" tabelle>
|
||||
<Card titel={`Hosts (${kunde.hosts.length})`} rahmen="primary" tabelle>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle">
|
||||
<thead>
|
||||
@@ -141,29 +143,54 @@ export default async function KundenDetailSeite({ params }: { params: Promise<{
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Key</th>
|
||||
<th scope="col">Ablauf</th>
|
||||
<th scope="col" className="text-end">
|
||||
Zuordnung
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{eigeneHosts.map((host) => (
|
||||
{kunde.hosts.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}
|
||||
{!host.letzterReportAm || host.letzterReportAm < grenze ? (
|
||||
<KeineMeldungBadge />
|
||||
) : null}
|
||||
</td>
|
||||
<td>{PRODUKT_NAME[host.produkt]}</td>
|
||||
<td>{PRODUKT_TEXT[host.produkt]}</td>
|
||||
<td>
|
||||
<StatusBadge status={host.subscription.status} />
|
||||
<StatusBadge status={statusAusDatenbank(host.subStatus)} />
|
||||
</td>
|
||||
<td>
|
||||
<CopyableCode wert={host.subscription.key} />
|
||||
<CopyableCode wert={host.subKey} />
|
||||
</td>
|
||||
<td>
|
||||
<AblaufBadge datum={host.subscription.nextduedate} heute={HEUTE} />
|
||||
<AblaufBadge datum={host.subNextduedate?.toISOString() ?? null} heute={heute} />
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<form action={hostZuordnungAufheben}>
|
||||
<input type="hidden" name="hostId" value={host.id} />
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
title="Zuordnung zu diesem Kunden aufheben"
|
||||
>
|
||||
Lösen
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{kunde.hosts.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="text-center text-body-secondary py-4">
|
||||
Diesem Kunden ist noch kein Host zugewiesen.{" "}
|
||||
<Link href="/hosts/nicht-zugeordnet">Jetzt zuweisen</Link>
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -183,66 +210,72 @@ export default async function KundenDetailSeite({ params }: { params: Promise<{
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
{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>{laufzeit.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>
|
||||
))}
|
||||
{laufzeiten.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="text-center text-body-secondary py-4">
|
||||
Noch keine Laufzeiten erfasst.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</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>
|
||||
{proJahr.length > 0 ? (
|
||||
<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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</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>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import { ContentHeader } from "@/components/layout/ContentHeader";
|
||||
import { KundeFormular } from "@/components/kunden/KundeFormular";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
|
||||
export const metadata = { title: "Kunde anlegen" };
|
||||
|
||||
export default function KundeNeuSeite() {
|
||||
return (
|
||||
<>
|
||||
<ContentHeader
|
||||
titel="Kunde anlegen"
|
||||
brotkrumen={[{ titel: "Kunden", href: "/kunden" }, { titel: "Neu" }]}
|
||||
/>
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<Card titel="Stammdaten" rahmen="primary">
|
||||
<KundeFormular />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -2,14 +2,13 @@ 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";
|
||||
import { kundenListe, offeneRechnungspunkteProKunde } from "@/server/queries/kunden";
|
||||
|
||||
export const metadata = { title: "Kunden" };
|
||||
|
||||
export default function KundenSeite() {
|
||||
const uebersicht = kundenUebersicht();
|
||||
export default async function KundenSeite() {
|
||||
const [kunden, rechnungspunkte] = await Promise.all([kundenListe(), offeneRechnungspunkteProKunde()]);
|
||||
const heute = new Date();
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -18,10 +17,15 @@ export default function KundenSeite() {
|
||||
<div className="app-content">
|
||||
<div className="container-fluid">
|
||||
<Card
|
||||
titel={`${uebersicht.length} Kunden`}
|
||||
titel={`${kunden.length} Kunden`}
|
||||
rahmen="primary"
|
||||
tabelle
|
||||
werkzeuge={<span className="btn btn-sm btn-primary disabled">Kunde anlegen (ab #006)</span>}
|
||||
werkzeuge={
|
||||
<Link href="/kunden/neu" className="btn btn-sm btn-primary">
|
||||
<i className="bi bi-plus-lg me-1" aria-hidden="true" />
|
||||
Kunde anlegen
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle">
|
||||
@@ -34,49 +38,50 @@ export default function KundenSeite() {
|
||||
<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);
|
||||
{kunden.map((kunde) => {
|
||||
const punkte = rechnungspunkte.get(kunde.id);
|
||||
return (
|
||||
<tr key={eintrag.kunde.id}>
|
||||
<tr key={kunde.id}>
|
||||
<td>
|
||||
<Link
|
||||
href={`/kunden/${eintrag.kunde.id}`}
|
||||
className="fw-semibold text-decoration-none"
|
||||
>
|
||||
{eintrag.kunde.name}
|
||||
<Link href={`/kunden/${kunde.id}`} className="fw-semibold text-decoration-none">
|
||||
{kunde.name}
|
||||
</Link>
|
||||
<div className="small text-body-secondary">
|
||||
{eintrag.kunde.ansprechpartner ?? "–"}
|
||||
</div>
|
||||
<div className="small text-body-secondary">{kunde.ansprechpartner ?? "–"}</div>
|
||||
</td>
|
||||
<td className="pl-mono">{eintrag.kunde.kundennummer}</td>
|
||||
<td>{eintrag.hosts}</td>
|
||||
<td>{eintrag.aktiv}</td>
|
||||
<td className="pl-mono">{kunde.kundennummer}</td>
|
||||
<td>{kunde.hosts}</td>
|
||||
<td>{kunde.aktiv}</td>
|
||||
<td>
|
||||
<AblaufBadge datum={eintrag.naechsterAblauf} heute={HEUTE} />
|
||||
<AblaufBadge datum={kunde.naechsterAblauf?.toISOString() ?? null} heute={heute} />
|
||||
</td>
|
||||
<td>
|
||||
{eintrag.offeneAlerts > 0 ? (
|
||||
<Badge farbe="warning">{eintrag.offeneAlerts} offen</Badge>
|
||||
{kunde.offeneAlerts > 0 ? (
|
||||
<Badge farbe="warning">{kunde.offeneAlerts} offen</Badge>
|
||||
) : (
|
||||
<Badge farbe="success">keine</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{eintrag.offeneRechnungspunkte > 0 ? (
|
||||
<Badge farbe="danger">{eintrag.offeneRechnungspunkte} offen</Badge>
|
||||
{punkte && punkte.offen > 0 ? (
|
||||
<Badge farbe="danger">{punkte.offen} offen</Badge>
|
||||
) : (
|
||||
<Badge farbe="success">erledigt</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td>{formatEuro(summen.marge)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{kunden.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="text-center text-body-secondary py-4">
|
||||
Noch keine Kunden angelegt.{" "}
|
||||
<Link href="/kunden/neu">Jetzt den ersten Kunden anlegen.</Link>
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,35 @@
|
||||
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";
|
||||
import { kennzahlen, offeneAlerts, suchIndex } from "@/server/queries/hosts";
|
||||
|
||||
/**
|
||||
* Das Dashboard zeigt immer den aktuellen Datenbankstand; beim Bauen darf nichts
|
||||
* vorgerendert werden (sonst öffnet jeder Build-Worker eigene Datenbankverbindungen).
|
||||
*/
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const BENUTZER = "Florian";
|
||||
|
||||
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||
const kennzahlen = dashboardKennzahlen();
|
||||
export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||
const [zahlen, alerts, suche] = await Promise.all([kennzahlen(), offeneAlerts(), suchIndex()]);
|
||||
|
||||
return (
|
||||
<div className="app-wrapper">
|
||||
<Header alerts={offeneAlerts()} suchEintraege={suchIndex()} benutzer={BENUTZER} />
|
||||
<Header
|
||||
alerts={alerts.map((alert) => ({
|
||||
id: alert.id,
|
||||
titel: alert.titel,
|
||||
beschreibung: alert.beschreibung,
|
||||
schwere: alert.schwere,
|
||||
hostId: alert.hostId,
|
||||
}))}
|
||||
suchEintraege={suche}
|
||||
benutzer={BENUTZER}
|
||||
/>
|
||||
<Sidebar
|
||||
hostsAnzahl={hosts.length}
|
||||
offeneRechnungspunkte={kennzahlen.offeneRechnungspunkte}
|
||||
hostsAnzahl={zahlen.hostsGesamt}
|
||||
offeneRechnungspunkte={zahlen.offeneRechnungspunkte}
|
||||
benutzer={BENUTZER}
|
||||
/>
|
||||
<main className="app-main">{children}</main>
|
||||
|
||||
+118
-130
@@ -7,69 +7,48 @@ 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";
|
||||
import { hostsNachAblauf, offeneAufgaben } from "@/server/queries/dashboard";
|
||||
import { hostsOhneKunde, kennzahlen } from "@/server/queries/hosts";
|
||||
import { kundenListe, offeneRechnungspunkteProKunde } from "@/server/queries/kunden";
|
||||
|
||||
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[] = [];
|
||||
export default async function DashboardSeite() {
|
||||
const heute = new Date();
|
||||
const [zahlen, ohneKunde, ablaufListe, aufgabenRoh, kunden, rechnungspunkte] = await Promise.all([
|
||||
kennzahlen(heute),
|
||||
hostsOhneKunde(),
|
||||
hostsNachAblauf(heute),
|
||||
offeneAufgaben(),
|
||||
kundenListe(),
|
||||
offeneRechnungspunkteProKunde(),
|
||||
]);
|
||||
|
||||
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",
|
||||
}));
|
||||
const aufgaben: Aufgabe[] = [
|
||||
...aufgabenRoh.map((aufgabe) => ({
|
||||
id: aufgabe.id,
|
||||
titel: aufgabe.titel,
|
||||
detail: [
|
||||
aufgabe.detail,
|
||||
aufgabe.betrag !== null ? `${formatEuro(aufgabe.betrag)} netto` : null,
|
||||
aufgabe.faelligAm ? `fällig am ${formatDatum(aufgabe.faelligAm)}` : null,
|
||||
`Laufzeit ${formatDatum(aufgabe.start)} – ${formatDatum(aufgabe.ende)}`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" · "),
|
||||
dringlichkeit: aufgabe.dringlichkeit,
|
||||
badgeText: aufgabe.badgeText,
|
||||
href: aufgabe.href,
|
||||
})),
|
||||
...ohneKunde.map((host) => ({
|
||||
id: `zuweisen-${host.id}`,
|
||||
titel: `${host.hostname} einem Kunden zuweisen`,
|
||||
detail: `Server-ID ${host.serverId ?? "unbekannt"} · seit ${formatDatum(host.erstmalsGesehenAm)} gemeldet`,
|
||||
dringlichkeit: "info" as const,
|
||||
badgeText: "Zuweisen",
|
||||
href: "/hosts/nicht-zugeordnet",
|
||||
})),
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -87,16 +66,16 @@ export default function DashboardSeite() {
|
||||
}
|
||||
>
|
||||
Neu registrierte Hosts erscheinen hier, bis sie einem Kunden zugewiesen sind:{" "}
|
||||
{ohneKunde.map((h) => h.hostname).join(", ")}
|
||||
{ohneKunde.map((host) => host.hostname).join(", ")}
|
||||
</Callout>
|
||||
) : null}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-6 col-lg-3">
|
||||
<SmallBox
|
||||
wert={kennzahlen.hostsGesamt}
|
||||
wert={zahlen.hostsGesamt}
|
||||
text="Hosts gemeldet"
|
||||
zusatz={`${kennzahlen.ohneMeldung} ohne Meldung`}
|
||||
zusatz={`${zahlen.ohneMeldung} ohne Meldung`}
|
||||
icon="bi-hdd-stack"
|
||||
farbe="info"
|
||||
href="/hosts"
|
||||
@@ -104,17 +83,17 @@ export default function DashboardSeite() {
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<SmallBox
|
||||
wert={kennzahlen.aktivLizenziert}
|
||||
wert={zahlen.aktivLizenziert}
|
||||
text="Aktiv lizenziert"
|
||||
zusatz={`${kennzahlen.ohneSubscription} ohne gültige Subscription`}
|
||||
zusatz={`${zahlen.ohneSubscription} ohne gültige Subscription`}
|
||||
icon="bi-patch-check"
|
||||
farbe="success"
|
||||
href="/hosts?status=active"
|
||||
href="/hosts?status=ACTIVE"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<SmallBox
|
||||
wert={kennzahlen.baldAblaufend}
|
||||
wert={zahlen.baldAblaufend}
|
||||
text="Läuft in 30 Tagen ab"
|
||||
zusatz="Verlängerung vorbereiten"
|
||||
icon="bi-hourglass-split"
|
||||
@@ -124,9 +103,9 @@ export default function DashboardSeite() {
|
||||
</div>
|
||||
<div className="col-6 col-lg-3">
|
||||
<SmallBox
|
||||
wert={kennzahlen.offeneRechnungspunkte}
|
||||
wert={zahlen.offeneRechnungspunkte}
|
||||
text="Offene Rechnungspunkte"
|
||||
zusatz={`${kennzahlen.offeneEinkaufsrechnungen} Einkauf · ${kennzahlen.fehlendeKundenrechnungen} Verkauf`}
|
||||
zusatz={`${zahlen.offeneEinkaufsrechnungen} Einkauf · ${zahlen.fehlendeKundenrechnungen} Verkauf`}
|
||||
icon="bi-receipt"
|
||||
farbe="danger"
|
||||
href="/rechnungen"
|
||||
@@ -150,44 +129,49 @@ export default function DashboardSeite() {
|
||||
</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}
|
||||
{ablaufListe.map((host) => (
|
||||
<tr key={host.id}>
|
||||
<td>
|
||||
<Link href={`/hosts/${host.id}`} className="fw-semibold text-decoration-none">
|
||||
{host.hostname}
|
||||
</Link>
|
||||
{host.meldetNicht ? <KeineMeldungBadge /> : null}
|
||||
</td>
|
||||
<td>
|
||||
{host.kunde ? (
|
||||
<Link href={`/kunden/${host.kunde.id}`} className="text-decoration-none">
|
||||
{host.kunde.name}
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
) : (
|
||||
<Link
|
||||
href="/hosts/nicht-zugeordnet"
|
||||
className="badge pl-bg-neutral text-decoration-none"
|
||||
>
|
||||
Nicht zugeordnet
|
||||
</Link>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<CopyableCode wert={host.subKey} />
|
||||
</td>
|
||||
<td>
|
||||
<AblaufBadge datum={host.nextduedate?.toISOString() ?? null} heute={heute} />
|
||||
</td>
|
||||
<td>
|
||||
<EinkaufBadge bezahlt={host.einkaufBezahlt} />
|
||||
</td>
|
||||
<td>
|
||||
<VerkaufBadge erstellt={host.verkaufErstellt} bezahlt={host.verkaufBezahlt} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{ablaufListe.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="text-center text-body-secondary py-4">
|
||||
Noch kein Host mit Subscription gemeldet.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -198,13 +182,9 @@ export default function DashboardSeite() {
|
||||
<Card
|
||||
titel="Aufgaben"
|
||||
rahmen="warning"
|
||||
werkzeuge={
|
||||
<span className="badge pl-bg-warning">
|
||||
{aufgaben.length + nichtZugeordnetAufgaben.length}
|
||||
</span>
|
||||
}
|
||||
werkzeuge={<span className="badge pl-bg-warning">{aufgaben.length}</span>}
|
||||
>
|
||||
<TodoList aufgaben={[...aufgaben, ...nichtZugeordnetAufgaben]} />
|
||||
<TodoList aufgaben={aufgaben} />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
@@ -212,22 +192,30 @@ export default function DashboardSeite() {
|
||||
<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>
|
||||
))}
|
||||
{kunden.length === 0 ? (
|
||||
<p className="mb-0 text-body-secondary">
|
||||
Noch keine Kunden angelegt. <Link href="/kunden/neu">Ersten Kunden anlegen</Link>
|
||||
</p>
|
||||
) : (
|
||||
kunden.map((kunde) => {
|
||||
const punkte = rechnungspunkte.get(kunde.id) ?? { offen: 0, gesamt: 0 };
|
||||
const erledigt = punkte.gesamt - punkte.offen;
|
||||
const prozent = punkte.gesamt === 0 ? 100 : Math.round((erledigt / punkte.gesamt) * 100);
|
||||
return (
|
||||
<div className="mb-3" key={kunde.id}>
|
||||
<div className="d-flex justify-content-between small mb-1">
|
||||
<Link href={`/kunden/${kunde.id}`} className="text-decoration-none">
|
||||
{kunde.name}
|
||||
</Link>
|
||||
<span className="text-body-secondary">
|
||||
{erledigt} von {punkte.gesamt} Punkten erledigt
|
||||
</span>
|
||||
</div>
|
||||
<ProgressBar prozent={prozent} beschriftung={`Rechnungsstatus ${kunde.name}`} />
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
@@ -235,15 +223,15 @@ export default function DashboardSeite() {
|
||||
<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>
|
||||
<Link href="/einstellungen/tokens">Agent auf einem Host ausrollen</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<i className="bi bi-arrow-right-short" aria-hidden="true" />{" "}
|
||||
<Link href="/rechnungen">Rechnungen pflegen</Link>
|
||||
<Link href="/kunden">Kundenübersicht öffnen</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>
|
||||
<Link href="/rechnungen">Rechnungen pflegen</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user