Abteilungen als Ebene über der Personalakte

Punkt 3 der Wünsche.

Die Abteilung stand als Freitext in der Personalakte. Damit liess sich nichts
fragen: „SHD", „Shd" und „Sicherheitsdienst" waren drei Abteilungen. Sie ist
jetzt ein eigenes Modell, im Adminbereich verwaltbar, und die drei vorhandenen
Freitexte sind in der Migration zu Abteilungen geworden.

**Eine Fallakte trägt keine Abteilung.** Sie gehört zu einer, wenn eine
beteiligte Person ihr angehört — abgeleitet über CaseParticipant und die
Personalakte. Eine eingetragene Zuordnung wäre nach zwei Wochen falsch: Leute
wechseln, Beteiligte kommen dazu, und niemand pflegt das nach. Dasselbe gilt
für die Dokumente: ein Dokument unmittelbar an der Abteilung wäre halb
verdrahtet, weil die Vorlagen über TemplateUse nur Fall- und Personalakte
kennen.

Die Abteilungsseite zeigt Mitglieder, abgeleitete Fälle und Dokumente,
Vermerke, Chat und ein Kreisdiagramm der Fallarten; die Übersicht eines über
alle Abteilungen. Das Diagramm ist serverseitig gerendertes SVG — eine
Bibliothek wäre das Teuerste auf der Seite gewesen. Die Segmente sind
Abstufungen von --steel und nicht die Stufenfarben: ein Tortenstück in Oxidrot
würde als „streng geheim" gelesen.

Die Zusammenfassung ist die gefährliche Stelle. Eine Abteilungsseite fasst
zusammen, was einzeln längst geschützt ist, und eine Zusammenfassung, die nicht
filtert, verrät mehr als jede Einzelansicht. Deshalb läuft hier jede Liste und
jede Zahl durch dieselben Fragmente wie überall; ein Test prüft, dass die Summe
der Diagrammanteile mit der Länge der Liste übereinstimmt. Wo jemand
Personalakten gar nicht sehen darf, steht null und keine Null.

Vermerke erben Regel 2 unverändert: kein DELETE, Version bei jeder Änderung,
Grabstein bei jeder Zurücknahme, als Regel und Trigger in der Datenbank. Ohne
Korrekturkette, Anhänge und Karenzzeit — was Beweiswert hat, gehört in eine
Fallakte.

Nebenbei: das Zugriffsprotokoll hängt jetzt am dafür vorgesehenen Recht
audit.read statt an admin.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/components/PieChart.tsx

@@ -0,0 +1,127 @@
+/**
+ * Ein Kreisdiagramm.
+ *
+ * **Serverseitig gerendertes SVG, kein Skript.** Eine Diagrammbibliothek wäre
+ * hier das Teuerste auf der Seite; die Rechnung ist ein Dutzend Zeilen
+ * Trigonometrie, und das Ergebnis lädt ohne ein Byte JavaScript.
+ *
+ * Die Farben kommen **nicht** aus dem Stufensystem. Die sechs
+ * Klassifizierungsfarben sind das einzige Buntsystem der Anwendung und
+ * bedeuten dort etwas Bestimmtes; ein Tortenstück in Oxidrot würde als
+ * „streng geheim" gelesen. Die Segmente sind deshalb Abstufungen von
+ * `--steel`, von kräftig nach blass.
+ *
+ * Die Beschriftung steht daneben als Liste mit Zahlen, nicht nur als Farbe im
+ * Kreis: Farbe allein darf keine Angabe tragen, siehe docs/10-design-system.md.
+ * Damit ist das Diagramm der Schmuck und die Liste die Auskunft.
+ */
+export type Slice = { label: string; value: number }
+
+const GROESSE = 160
+const RADIUS = 70
+
+export function PieChart({
+  slices,
+  emptyLabel,
+  totalLabel,
+}: {
+  slices: Slice[]
+  emptyLabel: string
+  /** „12 Fälle" — steht in der Mitte und sagt, worauf sich die Anteile beziehen. */
+  totalLabel: (total: number) => string
+}) {
+  const gesamt = slices.reduce((summe, stueck) => summe + stueck.value, 0)
+  if (gesamt === 0) return <p className="text-text-dim">{emptyLabel}</p>
+
+  let begonnen = 0
+  const segmente = slices.map((stueck, index) => {
+    const anteil = stueck.value / gesamt
+    const start = begonnen
+    begonnen += anteil
+    return {
+      ...stueck,
+      anteil,
+      farbe: farbeFuer(index, slices.length),
+      pfad: kreisAusschnitt(start, begonnen),
+    }
+  })
+
+  return (
+    <div className="flex flex-wrap items-center gap-8">
+      <svg
+        width={GROESSE}
+        height={GROESSE}
+        viewBox={`0 0 ${GROESSE} ${GROESSE}`}
+        role="img"
+        aria-hidden
+        className="flex-none"
+      >
+        {segmente.length === 1 ? (
+          // Ein einziger Anteil ist ein voller Kreis. Als Pfad gezeichnet
+          // würde er zu einer Linie zusammenfallen.
+          <circle
+            cx={GROESSE / 2}
+            cy={GROESSE / 2}
+            r={RADIUS}
+            fill={segmente[0]!.farbe}
+            stroke="var(--color-surface)"
+          />
+        ) : (
+          segmente.map((segment) => (
+            <path
+              key={segment.label}
+              d={segment.pfad}
+              fill={segment.farbe}
+              stroke="var(--color-surface)"
+              strokeWidth={1}
+            />
+          ))
+        )}
+      </svg>
+
+      <dl className="min-w-0 grow space-y-1">
+        <div className="mb-2 font-condensed text-2xs text-text-dim">{totalLabel(gesamt)}</div>
+        {segmente.map((segment) => (
+          <div key={segment.label} className="flex items-baseline gap-3">
+            <span
+              aria-hidden
+              className="inline-block h-2.5 w-2.5 flex-none rounded-full"
+              style={{ backgroundColor: segment.farbe }}
+            />
+            <dt className="min-w-0 grow truncate text-sm">{segment.label}</dt>
+            <dd className="font-mono text-2xs text-text-dim">
+              {segment.value} · {Math.round(segment.anteil * 100)}%
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  )
+}
+
+/**
+ * Abstufungen von `--steel`, gleichmässig verteilt. Bei einem einzigen
+ * Segment die volle Farbe, sonst von kräftig nach blass — so bleibt die
+ * Reihenfolge der Liste auch im Kreis ablesbar.
+ */
+function farbeFuer(index: number, anzahl: number): string {
+  if (anzahl === 1) return 'var(--color-accent)'
+  const anteil = 100 - Math.round((index / (anzahl - 1)) * 65)
+  return `color-mix(in srgb, var(--color-accent) ${anteil}%, var(--color-panel))`
+}
+
+/** Ein Kreisausschnitt von `start` bis `ende`, beide als Anteil von 0 bis 1. */
+function kreisAusschnitt(start: number, ende: number): string {
+  const mitte = GROESSE / 2
+  const [x1, y1] = punkt(start)
+  const [x2, y2] = punkt(ende)
+  const grosserBogen = ende - start > 0.5 ? 1 : 0
+  return `M ${mitte} ${mitte} L ${x1} ${y1} A ${RADIUS} ${RADIUS} 0 ${grosserBogen} 1 ${x2} ${y2} Z`
+}
+
+function punkt(anteil: number): [number, number] {
+  // Bei zwölf Uhr anfangen, im Uhrzeigersinn.
+  const winkel = anteil * 2 * Math.PI - Math.PI / 2
+  const mitte = GROESSE / 2
+  return [mitte + RADIUS * Math.cos(winkel), mitte + RADIUS * Math.sin(winkel)]
+}

web/components/chat/Chat.tsx

@@ -20,6 +20,7 @@ import type { ChatMessageView } from '@/lib/chat/view'
 export type ChatScopeView =
   | { kind: 'case'; caseNumber: string; caseId: string }
   | { kind: 'personnel'; fileId: string }
+  | { kind: 'department'; departmentId: string }
 
 type Reaktion = { messageId: string; userId: string; key: string }
 
@@ -104,7 +105,12 @@ export function Chat({
   // Beim Verlassen der Seite die Lesemarke setzen, nicht beim Öffnen: sonst
   // wäre die Trennlinie beim Neuladen sofort weg.
   useEffect(() => {
-    const scopeId = scope.kind === 'case' ? scope.caseId : scope.fileId
+    const scopeId =
+      scope.kind === 'case'
+        ? scope.caseId
+        : scope.kind === 'personnel'
+          ? scope.fileId
+          : scope.departmentId
     return () => {
       void markReadAction({ scopeType: scope.kind, scopeId })
     }
@@ -139,7 +145,9 @@ export function Chat({
         scope:
           scope.kind === 'case'
             ? { kind: 'case', caseNumber: scope.caseNumber }
-            : { kind: 'personnel', fileId: scope.fileId },
+            : scope.kind === 'personnel'
+              ? { kind: 'personnel', fileId: scope.fileId }
+              : { kind: 'department', departmentId: scope.departmentId },
         body: inhalt,
         replyToId: optimistisch.replyToId,
       })