(product?.status ?? "online");
+
+ return (
+ <>
+
+
+ Produkt *
+
+
+
+ Kategorie
+
+
+
+
+ Link / Adresse
+
+
+
+
+ Status
+
+
+
+ Uptime 30 Tage (%)
+
+ Nur für nicht prüfbare Produkte. Bei Web-Adressen wird die Uptime gemessen.
+
+
+
+ Statusmeldung
+
+ Leer lassen für den Standardtext „{DEFAULT_STATUS_MESSAGES[status]}“.
+
+
+ );
+}
+
+export function TaskDialog({ profileId, task }: { profileId: string; task?: Task }) {
+ return (
+
+
+ Vorgang *
+
+
+
+ Beschreibung
+
+
+
+
+ Status
+
+
+
+ Seit / ab
+
+
+
+
+ „In Arbeit“ zeigt „seit …“, „Geplant“ zeigt „ab …“. „Erledigt“ blendet den Vorgang aus.
+
+
+ );
+}
+
+export function DeleteInfoDialog({
+ kind,
+ profileId,
+ id,
+ label,
+}: {
+ kind: "product" | "task" | "note";
+ profileId: string;
+ id: string;
+ label: string;
+}) {
+ const [open, setOpen] = useState(false);
+ const [pending, setPending] = useState(false);
+ const [error, setError] = useState(null);
+
+ async function handleDelete() {
+ setPending(true);
+ setError(null);
+ const result = await deleteInfoEntry(kind, profileId, id);
+ setPending(false);
+
+ if (result && "error" in result) {
+ setError(result.error);
+ return;
+ }
+ setOpen(false);
+ }
+
+ return (
+
+ );
+}
diff --git a/modules/shared/ui/components/internal-notes.tsx b/modules/shared/ui/components/internal-notes.tsx
new file mode 100644
index 0000000..7c5bbf3
--- /dev/null
+++ b/modules/shared/ui/components/internal-notes.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { useActionState, useState } from "react";
+import { EyeOffIcon, PencilIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { saveNote, type InfoActionState } from "@/modules/shared/actions/info";
+import type { InternalNote } from "@/modules/shared/schemas/info";
+import { formatDateTime } from "@/modules/shared/lib/info-format";
+import { DeleteInfoDialog } from "./info-dialogs";
+
+function NoteForm({
+ profileId,
+ note,
+ onDone,
+ onCancel,
+}: {
+ profileId: string;
+ note?: InternalNote;
+ onDone: () => void;
+ onCancel?: () => void;
+}) {
+ async function run(prev: InfoActionState, formData: FormData) {
+ const result = await saveNote(prev, formData);
+ if (result && "success" in result) onDone();
+ return result;
+ }
+
+ const [state, formAction, pending] = useActionState(run, undefined);
+
+ return (
+
+ );
+}
+
+function NoteItem({ profileId, note }: { profileId: string; note: InternalNote }) {
+ const [editing, setEditing] = useState(false);
+
+ return (
+
+ {editing ? (
+ setEditing(false)} onCancel={() => setEditing(false)} />
+ ) : (
+
+
{note.body}
+
+
+
+
+
+ Zuletzt bearbeitet von {note.editorName ?? "unbekannt"} · {formatDateTime(note.updatedAt)}
+
+
+ );
+}
+
+export function InternalNotes({ profileId, notes }: { profileId: string; notes: InternalNote[] }) {
+ const [formKey, setFormKey] = useState(0);
+
+ return (
+
+
+
Interne Notiz
+
+ Kunde sieht das nicht
+
+
+ setFormKey((key) => key + 1)} />
+ {notes.length > 0 && (
+
+ {notes.map((note) => (
+
+ ))}
+
+ )}
+
+ );
+}
diff --git a/modules/shared/ui/components/product-check.tsx b/modules/shared/ui/components/product-check.tsx
new file mode 100644
index 0000000..f0ac62f
--- /dev/null
+++ b/modules/shared/ui/components/product-check.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useRef, useState, useTransition } from "react";
+import { LoaderCircleIcon, RefreshCwIcon } from "lucide-react";
+import { cn } from "cn";
+import { Button } from "@/components/ui/button";
+import { checkProduct, checkStaleProducts } from "@/modules/shared/actions/product-checks";
+import { formatDateTime } from "@/modules/shared/lib/info-format";
+import type { Product } from "@/modules/shared/schemas/info";
+
+export function ProductCheckLine({
+ profileId,
+ productId,
+ lastCheck,
+}: {
+ profileId: string;
+ productId: string;
+ lastCheck: Product["lastCheck"];
+}) {
+ const [pending, startTransition] = useTransition();
+ const [error, setError] = useState(null);
+
+ function handleCheck() {
+ setError(null);
+ startTransition(async () => {
+ const response = await checkProduct(profileId, productId);
+ if ("error" in response) setError(response.error);
+ });
+ }
+
+ return (
+
+
+ {pending
+ ? "Wird geprüft..."
+ : error ??
+ (lastCheck
+ ? `${lastCheck.ok ? "Erreichbar" : lastCheck.error ?? "Nicht erreichbar"}${
+ lastCheck.ok && lastCheck.responseMs !== null ? ` · ${lastCheck.responseMs} ms` : ""
+ } · geprüft ${formatDateTime(lastCheck.checkedAt)}`
+ : "Noch nicht geprüft")}
+
+
+
+ );
+}
+
+export function AutoCheck({ profileId }: { profileId: string }) {
+ const [running, setRunning] = useState(true);
+ const started = useRef(false);
+
+ useEffect(() => {
+ if (started.current) return;
+ started.current = true;
+ checkStaleProducts(profileId)
+ .catch(() => undefined)
+ .finally(() => setRunning(false));
+ }, [profileId]);
+
+ if (!running) return null;
+
+ return (
+
+ Erreichbarkeit wird geprüft...
+
+ );
+}
diff --git a/modules/shared/ui/views/info-panel.tsx b/modules/shared/ui/views/info-panel.tsx
new file mode 100644
index 0000000..36604a9
--- /dev/null
+++ b/modules/shared/ui/views/info-panel.tsx
@@ -0,0 +1,269 @@
+import { AlertTriangleIcon, CheckCircle2Icon, XCircleIcon } from "lucide-react"
+import { cn } from "cn"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { getClientId } from "@/modules/shared/queries/profile"
+import { getInternalNotes, getOpenTasks, getProducts } from "@/modules/shared/queries/info"
+import {
+ CATEGORY_LABELS,
+ DEFAULT_STATUS_MESSAGES,
+ PRODUCT_STATUS_LABELS,
+ TASK_STATUS_LABELS,
+ type Product,
+ type ProductStatus,
+} from "@/modules/shared/schemas/info"
+import { berlinToday, formatDateTime, formatTaskTiming, formatUptime } from "@/modules/shared/lib/info-format"
+import { DeleteInfoDialog, ProductDialog, TaskDialog } from "@/modules/shared/ui/components/info-dialogs"
+import { InternalNotes } from "@/modules/shared/ui/components/internal-notes"
+import { AutoCheck, ProductCheckLine } from "@/modules/shared/ui/components/product-check"
+
+const DOT_CLASSES: Record = {
+ online: "bg-signal-success",
+ maintenance: "bg-signal-warning",
+ offline: "bg-signal-error",
+}
+
+function statusBanner(products: Product[]) {
+ const offline = products.filter((product) => product.status === "offline")
+ const maintenance = products.filter((product) => product.status === "maintenance")
+ const names = (list: Product[]) => list.map((product) => product.name).join(", ")
+
+ if (offline.length > 0) {
+ return {
+ icon: XCircleIcon,
+ className: "border-signal-error/30 bg-signal-error/10 text-signal-error",
+ text: `Störung: ${names(offline)} ${offline.length === 1 ? "ist" : "sind"} aktuell nicht erreichbar`,
+ }
+ }
+ if (maintenance.length > 0) {
+ return {
+ icon: AlertTriangleIcon,
+ className: "border-signal-warning/30 bg-signal-warning/10 text-signal-warning",
+ text: `Wartungsarbeiten: ${names(maintenance)}`,
+ }
+ }
+ return {
+ icon: CheckCircle2Icon,
+ className: "border-signal-success/30 bg-signal-success/10 text-signal-success",
+ text: "Alle Systeme funktionieren normal",
+ }
+}
+
+// Gemessene Uptime hat Vorrang; der manuell eingetragene Wert ist nur Fallback für nicht prüfbare Produkte.
+function displayedUptime(product: Product) {
+ return product.checks30d > 0 ? product.measuredUptime30d : product.uptime30d
+}
+
+function UptimeValue({ value }: { value: number | null }) {
+ if (value === null) return –
+ return (
+ <>
+ {formatUptime(value)}
+ · 30 Tage
+
+ )
+}
+
+function ProductLink({ value }: { value: string }) {
+ if (/^(https?:\/\/|www\.)/i.test(value)) {
+ const href = /^https?:\/\//i.test(value) ? value : `https://${value}`
+ return (
+
+ {value}
+
+ )
+ }
+ return <>{value}
+}
+
+function SectionHeader({ title, meta, action }: { title: React.ReactNode; meta?: React.ReactNode; action?: React.ReactNode }) {
+ return (
+
+
+
{title}
+ {meta &&
{meta}
}
+
+ {action}
+
{children}
+ )
+}
+
+const InfoPanel = async ({ profileId, isAdmin }: { profileId: string; isAdmin: boolean }) => {
+ const clientId = await getClientId(profileId)
+ const [products, tasks, notes] = clientId
+ ? await Promise.all([
+ getProducts(clientId),
+ getOpenTasks(clientId),
+ isAdmin ? getInternalNotes(clientId) : Promise.resolve([]),
+ ])
+ : [[], [], []]
+
+ const updateTimes = products.flatMap((product) =>
+ [product.updatedAt, product.lastCheck?.checkedAt].filter((value): value is string => Boolean(value))
+ )
+ const lastUpdated = updateTimes.length > 0
+ ? updateTimes.reduce((latest, value) => (Date.parse(value) > Date.parse(latest) ? value : latest))
+ : null
+ const hasStaleChecks = products.some((product) => product.checkDue)
+ const banner = statusBanner(products)
+ const today = berlinToday()
+
+ return (
+
+
+
Info
+
Status eurer Systeme und laufende Arbeiten auf einen Blick.
+
+
+ {!clientId ? (
+
+ {isAdmin
+ ? "Für diesen Client sind noch keine Stammdaten hinterlegt. Bitte zuerst die Stammdaten ausfüllen."
+ : "Sobald eure Stammdaten hinterlegt sind, seht ihr hier den Status eurer Systeme."}
+
+ ) : (
+ <>
+
+
+ {lastUpdated && Zuletzt aktualisiert: {formatDateTime(lastUpdated)}}
+ {hasStaleChecks && }
+
+ ) : undefined
+ }
+ action={isAdmin ? : undefined}
+ />
+
+ {products.length === 0 ? (
+ Noch keine Systeme hinterlegt.
+ ) : (
+ <>
+
+
+ {banner.text}
+
+
+
+
+
+
+ Produkt
+ Status
+ Uptime
+ {isAdmin && }
+
+
+
+ {products.map((product) => (
+
+
+
+
+
+
{product.name}
+
+ {product.url ? : CATEGORY_LABELS[product.category]}
+
+
+
+
+ {product.statusMessage ?? DEFAULT_STATUS_MESSAGES[product.status]}
+
+ {product.checkable && (
+
+ )}
+
+
+
+
+
+ Woran wir gerade arbeiten
+ {tasks.length}
+
+ }
+ action={isAdmin ? : undefined}
+ />
+
+ {tasks.length === 0 ? (
+ Aktuell laufen keine Vorgänge.
+ ) : (
+
+ )}
+
+
+ {isAdmin &&
}
+
+ )}
+