Files
certvia/src/app/(app)/settings/page.tsx
T
msolarczekandClaude Opus 4.8 73c98137ea Benutzerverwaltung als Popup (Einstellungen + Admin), Tabelle nur Anzeige
Anlegen/Bearbeiten von Nutzern erfolgt jetzt wie bei Assets über URL-gesteuerte
Popups (?new/?edit, modal.tsx) statt Inline in der Tabelle.

- Neue generische Komponenten: user-table.tsx (reine Anzeige-Tabelle, Zeilen
  verlinken auf ?edit, Button auf ?new) und user-forms.tsx (UserCreateForm /
  UserEditForm; Name/E-Mail + Rollen + Status + Passwort-Reset; Einmal-Passwort
  im Popup). Actions werden als gebundene Props übergeben — dieselben Formulare
  für Plattform- und Mandanten-Verwaltung.
- /settings/users und /admin/[id] rendern die Tabelle + Modals; die alten
  Inline-Komponenten (platform-tenant-users, tenant-users-manager) entfernt.
- Einstellungen: „Benutzer & Rollen"-Kachel ist als Ganzes klickbar (Link).

Browser-verifiziert: Anlegen im Popup (Einmal-Passwort + Fertig), Zeilenklick
öffnet Bearbeiten-Popup vorbefüllt; Admin-Portal analog. tsc + lint + build +
Guard-Check grün.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 11:24:37 +02:00

131 lines
7.3 KiB
TypeScript

import Link from "next/link";
import { redirect } from "next/navigation";
import { requireSession } from "@/server/auth";
import { dbForTenant } from "@/server/db";
import { hasPermission } from "@/server/rbac";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { PageHead, Pill } from "@/components/mockup-ui";
import { MODULES } from "@/lib/modules";
import { updateTenantSettings } from "@/server/actions/tenant-settings";
const inputCls = "h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm";
export default async function SettingsPage() {
const session = await requireSession();
if (!hasPermission(session, "tenant:manage")) redirect("/dashboard");
const db = dbForTenant(session.user.tenantId);
const [s, moduleRows] = await Promise.all([
db.tenantSettings.findUnique({ where: { tenantId: session.user.tenantId } }),
db.tenantModule.findMany(),
]);
const enabled = new Set(moduleRows.filter((m) => m.enabled).map((m) => m.moduleKey));
const v = (x?: string | null) => x ?? "";
return (
<main className="flex-1 p-6">
<PageHead crumb="Organisation" title="Einstellungen" sub="Unternehmensdaten, Branding, Sicherheits-Policy — Stammdaten speisen die ISMS-Variablen" />
{(hasPermission(session, "user:manage") || hasPermission(session, "role:manage")) && (
<Link href="/settings/users" className="shadow-card mt-4 flex items-center justify-between rounded-xl border bg-card p-5 transition-colors hover:bg-muted/40">
<div>
<p className="font-heading text-sm font-semibold">Benutzer &amp; Rollen</p>
<p className="text-[12px] text-muted-foreground">Benutzer anlegen/verwalten, Rollen und Berechtigungen pflegen (mandantenintern).</p>
</div>
<span className="text-[13px] font-semibold text-[var(--primary)]">Öffnen </span>
</Link>
)}
<form action={updateTenantSettings} className="mt-4 grid gap-5 lg:grid-cols-[1fr_320px]">
<div className="space-y-5">
{/* Unternehmensdaten */}
<div className="shadow-card rounded-xl border bg-card p-5">
<p className="mb-1 font-heading text-sm font-semibold">Unternehmensdaten</p>
<p className="mb-3 text-[12px] text-muted-foreground">Diese Werte füttern automatisch die Template-Variablen des Richtlinienmoduls (eine Pflegestelle).</p>
<div className="grid gap-4 md:grid-cols-2">
<div className="md:col-span-2">
<Label htmlFor="orgName">Unternehmensname *</Label>
<Input id="orgName" name="orgName" required defaultValue={v(s?.orgName)} className="mt-1" />
</div>
<div>
<Label htmlFor="orgShort">Kurzname</Label>
<Input id="orgShort" name="orgShort" defaultValue={v(s?.orgShort)} className="mt-1" />
</div>
<div>
<Label htmlFor="sector">Sektor</Label>
<Input id="sector" name="sector" defaultValue={v(s?.sector)} className="mt-1" />
</div>
<div>
<Label htmlFor="address">Adresse</Label>
<Input id="address" name="address" defaultValue={v(s?.address)} className="mt-1" />
</div>
<div>
<Label htmlFor="duns">D-U-N-S</Label>
<Input id="duns" name="duns" defaultValue={v(s?.duns)} className="mt-1" />
</div>
<div>
<Label htmlFor="ismsScope">ISMS-Geltungsbereich (Kurz)</Label>
<Input id="ismsScope" name="ismsScope" defaultValue={v(s?.ismsScope)} className="mt-1" />
</div>
<div>
<Label htmlFor="ismsScopeDescription">Geltungsbereich (Beschreibung)</Label>
<Textarea id="ismsScopeDescription" name="ismsScopeDescription" rows={2} defaultValue={v(s?.ismsScopeDescription)} className="mt-1" />
</div>
</div>
</div>
{/* Verantwortliche Rollen */}
<div className="shadow-card rounded-xl border bg-card p-5">
<p className="mb-3 font-heading text-sm font-semibold">Verantwortliche Rollen ( ISMS-Variablen)</p>
<div className="grid gap-4 md:grid-cols-2">
<div><Label htmlFor="roleManagement">Oberste Leitung (ROLE_MANAGEMENT)</Label><Input id="roleManagement" name="roleManagement" defaultValue={v(s?.roleManagement)} className="mt-1" /></div>
<div><Label htmlFor="roleIsb">ISB / CISO (ROLE_ISB)</Label><Input id="roleIsb" name="roleIsb" defaultValue={v(s?.roleIsb)} className="mt-1" /></div>
<div><Label htmlFor="roleItLead">IT-Leitung (ROLE_IT_LEAD)</Label><Input id="roleItLead" name="roleItLead" defaultValue={v(s?.roleItLead)} className="mt-1" /></div>
<div><Label htmlFor="roleDpo">Datenschutz (ROLE_DPO)</Label><Input id="roleDpo" name="roleDpo" defaultValue={v(s?.roleDpo)} className="mt-1" /></div>
</div>
</div>
</div>
<div className="space-y-5">
{/* Branding & Regionales */}
<div className="shadow-card rounded-xl border bg-card p-5">
<p className="mb-3 font-heading text-sm font-semibold">Branding & Regionales</p>
<div className="space-y-3">
<div><Label htmlFor="accent">Akzentfarbe (Hex)</Label><Input id="accent" name="accent" defaultValue={v(s?.accent)} placeholder="#7d6fd6" className="mt-1" /></div>
<div>
<Label htmlFor="locale">Sprache</Label>
<select id="locale" name="locale" defaultValue={s?.locale ?? "de"} className={`${inputCls} mt-1`}><option value="de">Deutsch</option><option value="en">English</option></select>
</div>
<div><Label htmlFor="timezone">Zeitzone</Label><Input id="timezone" name="timezone" defaultValue={s?.timezone ?? "Europe/Berlin"} className="mt-1" /></div>
<p className="text-[11px] text-muted-foreground">Logo-Upload (PNG/SVG) folgt in Phase 2 (Objektspeicher).</p>
</div>
</div>
{/* Schutzbedarf / TISAX (Kern-Einstellung: nur Betreiber) */}
<div className="shadow-card rounded-xl border bg-card p-5">
<p className="mb-1 font-heading text-sm font-semibold">Schutzbedarf / TISAX-Tiefe</p>
<p className="text-sm">Aktuell: <span className="font-semibold">{s?.tisaxLevel ?? "AL2"}</span></p>
<p className="mt-2 text-[11px] text-muted-foreground">Diese Kern-Einstellung wird vom Plattform-Betreiber gesteuert und ist hier nicht änderbar.</p>
</div>
<Button type="submit" className="w-full justify-center">Speichern</Button>
</div>
</form>
{/* Module (Übersicht, Freischaltung durch Plattform-Admin) */}
<div className="shadow-card mt-5 rounded-xl border bg-card p-5">
<p className="mb-3 font-heading text-sm font-semibold">Freigeschaltete Module</p>
<div className="flex flex-wrap gap-2">
{MODULES.map((m) => (
<Pill key={m.key} tone={enabled.has(m.key) ? "ok" : "mut"}>{m.name}</Pill>
))}
</div>
<p className="mt-3 text-[11px] text-muted-foreground">Die Modul-Freischaltung erfolgt durch den Plattform-Betreiber.</p>
</div>
</main>
);
}