CFG-04: benachrichtigungs-einstellungen-oberflaeche (handler+tests fuer notifyprefs, web/notifications next.js-frontend auf shl-01)

2026-08-28 23:50:54 +02:00
parent 81ff8c18c3
commit b27a640116
11 changed files with 656 additions and 0 deletions
@@ -0,0 +1,30 @@
+import { ThemeProvider, I18nProvider, ToastProvider, typography } from "@nexarch/shl";
+
+export const metadata = {
+  title: "NEXARCH Benachrichtigungen",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="de">
+      <body
+        style={{
+          fontFamily: typography.fontFamily,
+          margin: 0,
+          background: "var(--shl-color-background, #ffffff)",
+          color: "var(--shl-color-text-primary, #14181f)",
+        }}
+      >
+        <ThemeProvider>
+          <I18nProvider initialLocale="de">
+            <ToastProvider>{children}</ToastProvider>
+          </I18nProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Table } from "@nexarch/shl";
+import type { TableColumn } from "@nexarch/shl";
+import { Preference, fetchTenantOverview } from "../../lib/api";
+
+// Akzeptanzkriterium 3: Tenant-Admin sieht eine Übersicht der
+// Benachrichtigungs-Konfiguration seines Tenants. Zugriffsbeschränkung
+// (nur Tenant-Admin) ist RBAC-02s Aufgabe vor diesem Endpunkt, siehe
+// internal/notifyprefs/handler.go.
+export default function OverviewPage() {
+  const [prefs, setPrefs] = useState<Preference[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchTenantOverview()
+      .then(setPrefs)
+      .catch(() => setError("Übersicht konnte nicht geladen werden. Nur Tenant-Admins haben Zugriff."));
+  }, []);
+
+  const columns: TableColumn<Preference>[] = [
+    { key: "user", header: "Benutzer-ID", render: (p) => p.UserID },
+    { key: "event", header: "Ereignistyp", render: (p) => p.EventType },
+    { key: "channel", header: "Kanal", render: (p) => p.Channel },
+    { key: "enabled", header: "Aktiviert", render: (p) => (p.Enabled ? "Ja" : "Nein") },
+  ];
+
+  return (
+    <main style={{ maxWidth: 800, margin: "40px auto", padding: "0 16px" }}>
+      <h1>Benachrichtigungs-Übersicht (Mandant)</h1>
+      {error && <p role="alert">{error}</p>}
+      {prefs && (
+        <Table
+          columns={columns}
+          rows={prefs}
+          rowKey={(p) => `${p.UserID}-${p.EventType}-${p.Channel}`}
+          caption="Von der Standardeinstellung abweichende Benachrichtigungspräferenzen aller Benutzer"
+        />
+      )}
+    </main>
+  );
+}
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function IndexPage() {
+  redirect("/settings");
+}
@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { CheckboxField, useToast } from "@nexarch/shl";
+import {
+  ApiError,
+  KNOWN_CHANNELS,
+  KNOWN_EVENT_TYPES,
+  Preference,
+  fetchMyPreferences,
+  setPreference,
+} from "../../lib/api";
+
+const EVENT_LABELS: Record<string, string> = {
+  welcome: "Willkommen",
+  invoice_ready: "Rechnung verfügbar",
+  password_reset: "Passwort-Zurücksetzung",
+  security_alert: "Sicherheitshinweis",
+};
+
+const CHANNEL_LABELS: Record<string, string> = {
+  email: "E-Mail",
+  in_app: "In-App",
+};
+
+export default function SettingsPage() {
+  const { push } = useToast();
+  const [prefs, setPrefs] = useState<Preference[] | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [pending, setPending] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchMyPreferences()
+      .then(setPrefs)
+      .catch(() => setLoadError("Einstellungen konnten nicht geladen werden. Bitte melden Sie sich an."));
+  }, []);
+
+  // Default: aktiviert, solange keine explizite Praeferenz existiert
+  // (Akzeptanzkriterium 1) — gleicher Opt-out-Default wie im Backend.
+  function isEnabled(eventType: string, channel: string): boolean {
+    const explicit = prefs?.find((p) => p.EventType === eventType && p.Channel === channel);
+    return explicit ? explicit.Enabled : true;
+  }
+
+  async function onToggle(eventType: string, channel: string, nextEnabled: boolean) {
+    const key = `${eventType}:${channel}`;
+    setPending(key);
+    try {
+      // Akzeptanzkriterium 2: sofort speichern, kein Sammel-Speichern-Button —
+      // wirkt unmittelbar auf künftige Zustellungen (EnqueueIfAllowed prüft
+      // bei jedem Aufruf live, kein Cache dazwischen).
+      await setPreference(eventType, channel, nextEnabled);
+      setPrefs((current) => {
+        const withoutThis = (current ?? []).filter((p) => !(p.EventType === eventType && p.Channel === channel));
+        return [...withoutThis, { TenantSlug: "", UserID: "", EventType: eventType, Channel: channel, Enabled: nextEnabled }];
+      });
+      push(nextEnabled ? "Benachrichtigung aktiviert." : "Benachrichtigung deaktiviert.", "success");
+    } catch (err) {
+      push(err instanceof ApiError ? err.message : "Einstellung konnte nicht gespeichert werden.", "danger");
+    } finally {
+      setPending(null);
+    }
+  }
+
+  if (loadError) {
+    return (
+      <main style={{ maxWidth: 640, margin: "40px auto", padding: "0 16px" }}>
+        <p role="alert">{loadError}</p>
+      </main>
+    );
+  }
+
+  return (
+    <main style={{ maxWidth: 640, margin: "40px auto", padding: "0 16px" }}>
+      <h1>Benachrichtigungseinstellungen</h1>
+      <p>Wählen Sie je Ereignis, über welche Kanäle Sie benachrichtigt werden möchten.</p>
+
+      {KNOWN_EVENT_TYPES.map((eventType) => (
+        <fieldset key={eventType} style={{ marginBottom: 16 }}>
+          <legend>{EVENT_LABELS[eventType] ?? eventType}</legend>
+          {KNOWN_CHANNELS.map((channel) => {
+            const key = `${eventType}:${channel}`;
+            return (
+              <CheckboxField
+                key={key}
+                label={CHANNEL_LABELS[channel] ?? channel}
+                checked={isEnabled(eventType, channel)}
+                disabled={pending === key}
+                onChange={(e) => onToggle(eventType, channel, e.target.checked)}
+              />
+            );
+          })}
+        </fieldset>
+      ))}
+    </main>
+  );
+}