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.

web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx

@@ -0,0 +1,326 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { uuidv7 } from '@/lib/uuidv7'
+import { departmentEntryText, departmentText } from '@/lib/i18n/departments'
+import { commonText } from '@/lib/i18n/common'
+import { createEntryAction, editEntryAction, retractEntryAction } from './actions'
+
+export type EntryView = {
+  id: string
+  body: string
+  minClearance: number
+  authorId: string
+  authorName: string
+  createdAt: string
+  version: number
+  editedAt: string | null
+  retractedAt: string | null
+  retractedByName: string | null
+  retractionReason: string | null
+}
+
+/**
+ * Die Vermerke einer Abteilung.
+ *
+ * Dieselbe Zusicherung wie im Verlauf einer Akte, und sie steht auch so da:
+ * ein geänderter Vermerk trägt seine Fassungsnummer, ein zurückgezogener
+ * bleibt als Grabstein mit Grund und Namen stehen. Nichts verschwindet.
+ */
+export function DepartmentEntries({
+  departmentKey,
+  entries,
+  currentUserId,
+  canWrite,
+  canRetract,
+  canEditAny,
+  canEditOwn,
+  levels,
+}: {
+  departmentKey: string
+  entries: EntryView[]
+  currentUserId: string
+  canWrite: boolean
+  canRetract: boolean
+  canEditAny: boolean
+  canEditOwn: boolean
+  levels: { level: number; name: string }[]
+}) {
+  const [liste, setListe] = useState(entries)
+  const [text, setText] = useState('')
+  const [stufe, setStufe] = useState(0)
+  const [fehler, setFehler] = useState<string | null>(null)
+  const [pending, startTransition] = useTransition()
+
+  function schreiben() {
+    const inhalt = text.trim()
+    if (!inhalt) return
+
+    const id = uuidv7()
+    setFehler(null)
+
+    startTransition(async () => {
+      const ergebnis = await createEntryAction({
+        id,
+        departmentKey,
+        body: inhalt,
+        minClearance: stufe,
+      })
+      if (!ergebnis.ok) {
+        setFehler(ergebnis.error)
+        return
+      }
+      setListe((bisher) => [
+        {
+          id,
+          body: inhalt,
+          minClearance: stufe,
+          authorId: currentUserId,
+          authorName: '',
+          createdAt: new Date().toISOString(),
+          version: 1,
+          editedAt: null,
+          retractedAt: null,
+          retractedByName: null,
+          retractionReason: null,
+        },
+        ...bisher,
+      ])
+      setText('')
+    })
+  }
+
+  return (
+    <div>
+      {canWrite ? (
+        <div className="mb-8 border border-line p-4">
+          <label className="block">
+            <span className="font-condensed text-2xs text-text-dim">
+              {departmentEntryText.body}
+            </span>
+            <textarea
+              value={text}
+              onChange={(event) => setText(event.target.value)}
+              rows={3}
+              className="field mt-1.5 w-full"
+            />
+          </label>
+
+          <div className="mt-3 flex flex-wrap items-center gap-4">
+            <label className="flex items-center gap-2 text-2xs text-text-dim">
+              {departmentEntryText.minClearance}
+              <select
+                value={stufe}
+                onChange={(event) => setStufe(Number(event.target.value))}
+                className="field"
+              >
+                {levels.map((level) => (
+                  <option key={level.level} value={level.level}>
+                    {level.level} · {level.name}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <button
+              type="button"
+              onClick={schreiben}
+              disabled={pending || text.trim().length === 0}
+              aria-busy={pending}
+              className="btn btn-primary"
+            >
+              {pending ? departmentEntryText.saving : departmentEntryText.save}
+            </button>
+            {fehler ? <span className="font-condensed text-2xs text-stamp-4">{fehler}</span> : null}
+          </div>
+
+          <p className="mt-3 text-2xs text-text-dim">{departmentEntryText.hint}</p>
+        </div>
+      ) : null}
+
+      {liste.length === 0 ? <p className="text-text-dim">{departmentText.entriesEmpty}</p> : null}
+
+      <ul className="timeline space-y-6">
+        {liste.map((vermerk) => (
+          <Vermerk
+            key={vermerk.id}
+            vermerk={vermerk}
+            departmentKey={departmentKey}
+            canEdit={
+              canEditAny || (canEditOwn && vermerk.authorId === currentUserId)
+            }
+            canRetract={canRetract}
+            onChange={(neu) =>
+              setListe((bisher) => bisher.map((v) => (v.id === neu.id ? neu : v)))
+            }
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function Vermerk({
+  vermerk,
+  departmentKey,
+  canEdit,
+  canRetract,
+  onChange,
+}: {
+  vermerk: EntryView
+  departmentKey: string
+  canEdit: boolean
+  canRetract: boolean
+  onChange: (neu: EntryView) => void
+}) {
+  const [modus, setModus] = useState<'lesen' | 'aendern' | 'zurueckziehen'>('lesen')
+  const [text, setText] = useState(vermerk.body)
+  const [grund, setGrund] = useState('')
+  const [fehler, setFehler] = useState<string | null>(null)
+  const [pending, startTransition] = useTransition()
+  const zurueckgezogen = vermerk.retractedAt !== null
+
+  return (
+    <li>
+      <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
+        <span className="font-condensed text-2xs text-text-dim">{vermerk.authorName}</span>
+        <time className="text-2xs text-text-dim">
+          {new Date(vermerk.createdAt).toLocaleString('de-DE')}
+        </time>
+        {vermerk.editedAt ? (
+          <span className="font-condensed text-2xs text-text-dim">
+            {departmentEntryText.edited(vermerk.version)}
+          </span>
+        ) : null}
+        {vermerk.minClearance > 0 ? (
+          <span className="font-mono text-2xs text-text-dim">
+            {departmentEntryText.minClearance} {vermerk.minClearance}
+          </span>
+        ) : null}
+      </div>
+
+      {zurueckgezogen ? (
+        <p className="mt-1 border-l-(length:--spacing-edge) border-stamp-4 pl-3 text-sm text-text-dim">
+          {departmentEntryText.retractedBy(
+            vermerk.retractedByName ?? '',
+            vermerk.retractionReason ?? '',
+          )}
+        </p>
+      ) : modus === 'aendern' ? (
+        <div className="mt-2">
+          <textarea
+            value={text}
+            onChange={(event) => setText(event.target.value)}
+            rows={4}
+            className="field w-full"
+          />
+          <div className="mt-2 flex flex-wrap items-center gap-3">
+            <button
+              type="button"
+              disabled={pending}
+              aria-busy={pending}
+              className="btn btn-sm btn-primary"
+              onClick={() =>
+                startTransition(async () => {
+                  const ergebnis = await editEntryAction({
+                    id: vermerk.id,
+                    departmentKey,
+                    body: text,
+                  })
+                  if (!ergebnis.ok) {
+                    setFehler(ergebnis.error)
+                    return
+                  }
+                  onChange({
+                    ...vermerk,
+                    body: text,
+                    version: vermerk.version + 1,
+                    editedAt: new Date().toISOString(),
+                  })
+                  setModus('lesen')
+                })
+              }
+            >
+              {departmentEntryText.editSave}
+            </button>
+            <button type="button" onClick={() => setModus('lesen')} className="btn btn-sm">
+              {departmentEntryText.cancel}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <p className="mt-1 text-sm whitespace-pre-wrap">{vermerk.body}</p>
+      )}
+
+      {modus === 'zurueckziehen' ? (
+        <div className="mt-2">
+          <label className="block">
+            <span className="font-condensed text-2xs text-text-dim">
+              {departmentEntryText.retractReason}
+            </span>
+            <input
+              value={grund}
+              onChange={(event) => setGrund(event.target.value)}
+              className="field mt-1.5 w-full max-w-sm"
+            />
+          </label>
+          <div className="mt-2 flex flex-wrap items-center gap-3">
+            <button
+              type="button"
+              disabled={pending || grund.trim().length < 10}
+              aria-busy={pending}
+              className="btn btn-sm text-stamp-4"
+              onClick={() =>
+                startTransition(async () => {
+                  const ergebnis = await retractEntryAction({
+                    id: vermerk.id,
+                    departmentKey,
+                    reason: grund,
+                  })
+                  if (!ergebnis.ok) {
+                    setFehler(ergebnis.error)
+                    return
+                  }
+                  onChange({
+                    ...vermerk,
+                    retractedAt: new Date().toISOString(),
+                    retractionReason: grund,
+                  })
+                  setModus('lesen')
+                })
+              }
+            >
+              {departmentEntryText.retract}
+            </button>
+            <button type="button" onClick={() => setModus('lesen')} className="btn btn-sm">
+              {departmentEntryText.cancel}
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      {!zurueckgezogen && modus === 'lesen' ? (
+        <div className="mt-2 flex flex-wrap gap-3">
+          {canEdit ? (
+            <button type="button" onClick={() => setModus('aendern')} className="btn btn-sm">
+              {departmentEntryText.edit}
+            </button>
+          ) : null}
+          {canRetract ? (
+            <button
+              type="button"
+              onClick={() => setModus('zurueckziehen')}
+              className="btn btn-sm text-stamp-4"
+            >
+              {departmentEntryText.retract}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+
+      {fehler ? (
+        <p className="mt-2 font-condensed text-2xs text-stamp-4">{fehler || commonText.unknown}</p>
+      ) : null}
+    </li>
+  )
+}

web/app/(app)/abteilungen/[key]/actions.ts

@@ -0,0 +1,79 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { z } from 'zod'
+import { requireUser } from '@/lib/auth/current'
+import { AccessError } from '@/lib/errors'
+import { createEntry, editEntry, retractEntry } from '@/lib/departments/entries'
+import { de } from '@/lib/i18n/de'
+
+export type ActionResult = { ok: true } | { ok: false; error: string }
+
+function toMessage(error: unknown): string {
+  if (error instanceof AccessError) {
+    return de.actionErrors[error.code] ?? de.actionErrors.default!
+  }
+  console.error('[abteilungsvermerk] unerwartet', error)
+  return de.actionErrors.default!
+}
+
+const createSchema = z.object({
+  id: z.string().min(1).max(64),
+  departmentKey: z.string().min(1).max(21),
+  body: z.string().min(1).max(20_000),
+  minClearance: z.coerce.number().int().min(0).max(5),
+})
+
+export async function createEntryAction(input: unknown): Promise<ActionResult> {
+  const user = await requireUser()
+  const parsed = createSchema.safeParse(input)
+  if (!parsed.success) return { ok: false, error: de.actionErrors['entry-empty']! }
+
+  try {
+    await createEntry(user.permissions, parsed.data)
+    revalidatePath(`/abteilungen/${parsed.data.departmentKey}`)
+    return { ok: true }
+  } catch (error) {
+    return { ok: false, error: toMessage(error) }
+  }
+}
+
+const editSchema = z.object({
+  id: z.string().min(1).max(64),
+  departmentKey: z.string().min(1).max(21),
+  body: z.string().min(1).max(20_000),
+})
+
+export async function editEntryAction(input: unknown): Promise<ActionResult> {
+  const user = await requireUser()
+  const parsed = editSchema.safeParse(input)
+  if (!parsed.success) return { ok: false, error: de.actionErrors['entry-empty']! }
+
+  try {
+    await editEntry(user.permissions, parsed.data)
+    revalidatePath(`/abteilungen/${parsed.data.departmentKey}`)
+    return { ok: true }
+  } catch (error) {
+    return { ok: false, error: toMessage(error) }
+  }
+}
+
+const retractSchema = z.object({
+  id: z.string().min(1).max(64),
+  departmentKey: z.string().min(1).max(21),
+  reason: z.string().min(10).max(500),
+})
+
+export async function retractEntryAction(input: unknown): Promise<ActionResult> {
+  const user = await requireUser()
+  const parsed = retractSchema.safeParse(input)
+  if (!parsed.success) return { ok: false, error: de.actionErrors['reason-required']! }
+
+  try {
+    await retractEntry(user.permissions, parsed.data)
+    revalidatePath(`/abteilungen/${parsed.data.departmentKey}`)
+    return { ok: true }
+  } catch (error) {
+    return { ok: false, error: toMessage(error) }
+  }
+}

web/app/(app)/abteilungen/[key]/page.tsx

@@ -0,0 +1,328 @@
+import type { Metadata } from 'next'
+import { Suspense } from 'react'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import {
+  caseTypesOfDepartment,
+  listDepartmentCases,
+  listDepartmentDocuments,
+  listMembers,
+  loadVisibleDepartment,
+} from '@/lib/departments/service'
+import { listEntries } from '@/lib/departments/entries'
+import { loadChatView } from '@/lib/chat/load'
+import { de } from '@/lib/i18n/de'
+import { PieChart } from '@/components/PieChart'
+import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
+import { SkeletonLine } from '@/components/Skeleton'
+import { ChatLazy } from '@/components/chat/ChatLazy'
+import { DepartmentEntries } from './DepartmentEntries'
+import type { EffectivePermissions } from '@/lib/auth/permissions'
+
+export const dynamic = 'force-dynamic'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ key: string }>
+}): Promise<Metadata> {
+  const user = await requireUser()
+  const { key } = await params
+  const abteilung = await loadVisibleDepartment(user.permissions, key)
+  return { title: abteilung?.name ?? de.department.one }
+}
+
+/**
+ * Eine Abteilung.
+ *
+ * Dasselbe Bild wie eine Personalakte, eine Stufe höher: wer gehört dazu, was
+ * ist dazu aktenkundig, was ist dazu vermerkt, und worüber wird geredet. Der
+ * Unterschied ist, dass hier **nichts eingetragen** wird — die Fälle ergeben
+ * sich aus den Beteiligten und deren Personalakten.
+ */
+export default async function DepartmentPage({ params }: { params: Promise<{ key: string }> }) {
+  const user = await requireUser()
+  const { key } = await params
+
+  const abteilung = await loadVisibleDepartment(user.permissions, key)
+  // Kein Zugriff heisst 404, nicht 403.
+  if (!abteilung) notFound()
+
+  const [levels, verteilung] = await Promise.all([
+    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
+    caseTypesOfDepartment(user.permissions, abteilung.id),
+  ])
+  const levelName = new Map(levels.map((l) => [l.level, l.name]))
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-10">
+      <header>
+        <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
+          <span className="font-mono text-xs text-text-dim">{abteilung.key}</span>
+          <span className="font-condensed text-2xs text-text-dim">{de.department.one}</span>
+          {abteilung.isArchived ? (
+            <span className="font-condensed text-2xs text-text-dim">
+              {de.department.archived}
+            </span>
+          ) : null}
+        </div>
+        <h1 className="mt-2 font-condensed">{abteilung.name}</h1>
+        {abteilung.description ? (
+          <p className="mt-2 max-w-(--container-measure) text-sm text-text-dim">
+            {abteilung.description}
+          </p>
+        ) : null}
+      </header>
+
+      <section className="mt-8 border border-line p-5">
+        <h2 className="font-condensed text-xs text-text-dim">{de.department.chart}</h2>
+        <div className="mt-4">
+          <PieChart
+            slices={verteilung}
+            emptyLabel={de.department.chartEmpty}
+            totalLabel={de.department.chartTotal}
+          />
+        </div>
+        <p className="mt-4 max-w-(--container-measure) text-2xs text-text-dim">
+          {de.department.derivedHint}
+        </p>
+      </section>
+
+      <section className="mt-10">
+        <h2 className="font-condensed">{de.department.members}</h2>
+        <div className="mt-4">
+          <Suspense fallback={<SkeletonLine width="50%" />}>
+            <Members
+              departmentId={abteilung.id}
+              permissions={user.permissions}
+              levelName={levelName}
+            />
+          </Suspense>
+        </div>
+      </section>
+
+      <section className="mt-10">
+        <h2 className="font-condensed">{de.department.cases}</h2>
+        <div className="mt-4">
+          <Suspense fallback={<SkeletonLine width="60%" />}>
+            <Cases
+              departmentId={abteilung.id}
+              permissions={user.permissions}
+              levelName={levelName}
+            />
+          </Suspense>
+        </div>
+      </section>
+
+      <section className="mt-10">
+        <h2 className="font-condensed">{de.department.documents}</h2>
+        <div className="mt-4">
+          <Suspense fallback={<SkeletonLine width="55%" />}>
+            <Documents departmentId={abteilung.id} permissions={user.permissions} />
+          </Suspense>
+        </div>
+      </section>
+
+      <section className="mt-10">
+        <h2 className="font-condensed">{de.departmentEntry.heading}</h2>
+        <div className="mt-4">
+          <Suspense fallback={<SkeletonLine width="60%" />}>
+            <Entries
+              departmentKey={abteilung.key}
+              departmentId={abteilung.id}
+              user={user}
+              levels={levels}
+            />
+          </Suspense>
+        </div>
+      </section>
+
+      <section className="mt-10">
+        <h2 className="font-condensed">{de.chat.heading}</h2>
+        <div className="mt-4">
+          <Suspense fallback={<SkeletonLine width="60%" />}>
+            <ChatBlock departmentId={abteilung.id} user={user} />
+          </Suspense>
+        </div>
+      </section>
+    </main>
+  )
+}
+
+async function Members({
+  departmentId,
+  permissions,
+  levelName,
+}: {
+  departmentId: string
+  permissions: EffectivePermissions
+  levelName: Map<number, string>
+}) {
+  const mitglieder = await listMembers(permissions, departmentId)
+  if (mitglieder.length === 0) {
+    return <p className="text-text-dim">{de.department.membersEmpty}</p>
+  }
+
+  return (
+    <ul className="border-t border-line">
+      {mitglieder.map((person) => (
+        <li key={person.id} className="border-b border-line">
+          <Link
+            href={`/personalakten/${person.id}`}
+            className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
+            style={classificationEdgeStyle(person.classification)}
+          >
+            <span className="grow">{person.displayName}</span>
+            {person.rank ? (
+              <span className="font-condensed text-2xs text-text-dim">{person.rank}</span>
+            ) : null}
+            <StampMark
+              level={person.classification}
+              name={levelName.get(person.classification) ?? de.common.unknown}
+            />
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+async function Cases({
+  departmentId,
+  permissions,
+  levelName,
+}: {
+  departmentId: string
+  permissions: EffectivePermissions
+  levelName: Map<number, string>
+}) {
+  const faelle = await listDepartmentCases(permissions, departmentId)
+  if (faelle.length === 0) return <p className="text-text-dim">{de.department.casesEmpty}</p>
+
+  return (
+    <ul className="border-t border-line">
+      {faelle.map((akte) => (
+        <li key={akte.id} className="border-b border-line">
+          <Link
+            href={`/faelle/${akte.caseNumber}`}
+            className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
+            style={classificationEdgeStyle(akte.classification)}
+          >
+            <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
+            <span className="grow">{akte.title}</span>
+            <span className="font-condensed text-2xs text-text-dim">
+              {de.case.statusNames[akte.status] ?? akte.status}
+            </span>
+            <StampMark
+              level={akte.classification}
+              name={levelName.get(akte.classification) ?? de.common.unknown}
+            />
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+async function Documents({
+  departmentId,
+  permissions,
+}: {
+  departmentId: string
+  permissions: EffectivePermissions
+}) {
+  const dokumente = await listDepartmentDocuments(permissions, departmentId)
+  if (dokumente.length === 0) {
+    return <p className="text-text-dim">{de.department.documentsEmpty}</p>
+  }
+
+  return (
+    <ul className="border-t border-line">
+      {dokumente.map((dokument) => (
+        <li key={dokument.id} className="border-b border-line">
+          <Link
+            href={`/dokumente/${dokument.documentNumber}`}
+            className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 text-text no-underline"
+          >
+            <span className="font-mono text-xs text-text-dim">{dokument.documentNumber}</span>
+            <span className="grow">{dokument.title}</span>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+async function Entries({
+  departmentKey,
+  departmentId,
+  user,
+  levels,
+}: {
+  departmentKey: string
+  departmentId: string
+  user: { id: string; permissions: EffectivePermissions }
+  levels: { level: number; name: string }[]
+}) {
+  const vermerke = await listEntries(user.permissions, departmentId)
+  const autoren = await db.user.findMany({
+    where: { id: { in: [...new Set(vermerke.flatMap((v) => [v.authorId, v.retractedById ?? ''])) ].filter(Boolean) } },
+    select: { id: true, displayName: true },
+  })
+  const nameVon = new Map(autoren.map((a) => [a.id, a.displayName]))
+
+  return (
+    <DepartmentEntries
+      departmentKey={departmentKey}
+      currentUserId={user.id}
+      canWrite={user.permissions.isAdmin || user.permissions.permissions.has('entry.create')}
+      canRetract={user.permissions.isAdmin || user.permissions.permissions.has('entry.retract')}
+      canEditAny={user.permissions.isAdmin || user.permissions.permissions.has('entry.edit_any')}
+      canEditOwn={user.permissions.isAdmin || user.permissions.permissions.has('entry.edit_own')}
+      levels={levels.filter((l) => l.level <= user.permissions.clearanceLevel)}
+      entries={vermerke.map((vermerk) => ({
+        id: vermerk.id,
+        body: vermerk.body,
+        minClearance: vermerk.minClearance,
+        authorId: vermerk.authorId,
+        authorName: nameVon.get(vermerk.authorId) ?? vermerk.authorId,
+        createdAt: vermerk.createdAt.toISOString(),
+        version: vermerk.version,
+        editedAt: vermerk.editedAt?.toISOString() ?? null,
+        retractedAt: vermerk.retractedAt?.toISOString() ?? null,
+        retractedByName: vermerk.retractedById
+          ? (nameVon.get(vermerk.retractedById) ?? vermerk.retractedById)
+          : null,
+        retractionReason: vermerk.retractionReason,
+      }))}
+    />
+  )
+}
+
+async function ChatBlock({
+  departmentId,
+  user,
+}: {
+  departmentId: string
+  user: { id: string; permissions: EffectivePermissions }
+}) {
+  const ansicht = await loadChatView(user.permissions, {
+    kind: 'department',
+    departmentId,
+  })
+
+  return (
+    <ChatLazy
+      scope={{ kind: 'department', departmentId }}
+      topic={`department:${departmentId}`}
+      initial={ansicht.messages}
+      initialReactions={ansicht.reactions}
+      currentUserId={user.id}
+      lastReadAt={ansicht.lastReadAt}
+      canAdopt={false}
+      mentionNames={ansicht.mentionNames}
+    />
+  )
+}

web/app/(app)/abteilungen/loading.tsx

@@ -0,0 +1,15 @@
+import { SkeletonLine } from '@/components/Skeleton'
+
+/** Skelett statt Spinner, siehe docs/09-performance-und-ux.md. */
+export default function Loading() {
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-10">
+      <SkeletonLine width="12rem" />
+      <div className="mt-8 space-y-3">
+        <SkeletonLine />
+        <SkeletonLine width="70%" />
+        <SkeletonLine width="55%" />
+      </div>
+    </main>
+  )
+}

web/app/(app)/abteilungen/page.tsx

@@ -0,0 +1,75 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { requireUser } from '@/lib/auth/current'
+import { casesPerDepartment, listDepartments } from '@/lib/departments/service'
+import { de } from '@/lib/i18n/de'
+import { PieChart } from '@/components/PieChart'
+
+export const metadata: Metadata = { title: de.department.heading }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Alle Abteilungen, und wo sich etwas häuft.
+ *
+ * Das Diagramm beantwortet die Frage, mit der man auf diese Seite kommt: zu
+ * welcher Abteilung gibt es die meisten Fälle. Gezählt wird nur, was der
+ * Fragende auch sehen darf — eine Zahl, die mehr zählt als seine Liste
+ * hergibt, wäre selbst eine Auskunft.
+ */
+export default async function DepartmentsPage() {
+  const user = await requireUser()
+  const [abteilungen, verteilung] = await Promise.all([
+    listDepartments(user.permissions),
+    casesPerDepartment(user.permissions),
+  ])
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-10">
+      <h1 className="font-condensed">{de.department.heading}</h1>
+      <p className="mt-1 max-w-(--container-measure) text-2xs text-text-dim">
+        {de.department.intro}
+      </p>
+
+      {abteilungen.length === 0 ? (
+        <p className="mt-10 text-text-dim">{de.department.empty}</p>
+      ) : (
+        <>
+          <section className="mt-8 border border-line p-5">
+            <h2 className="font-condensed text-xs text-text-dim">{de.department.chartAll}</h2>
+            <div className="mt-4">
+              <PieChart
+                slices={verteilung}
+                emptyLabel={de.department.chartEmpty}
+                totalLabel={de.department.chartTotal}
+              />
+            </div>
+          </section>
+
+          <ul className="mt-10 border-t border-line">
+            {abteilungen.map((abteilung) => (
+              <li key={abteilung.id} className="border-b border-line">
+                <Link
+                  href={`/abteilungen/${abteilung.key}`}
+                  className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 text-text no-underline"
+                >
+                  <span className="font-mono text-xs text-text-dim">{abteilung.key}</span>
+                  <span className="grow">{abteilung.name}</span>
+                  {abteilung.description ? (
+                    <span className="w-full text-2xs text-text-dim sm:w-auto sm:grow-[2]">
+                      {abteilung.description}
+                    </span>
+                  ) : null}
+                  {abteilung.memberCount === null ? null : (
+                    <span className="font-condensed text-2xs text-text-dim">
+                      {de.department.memberCount(abteilung.memberCount)}
+                    </span>
+                  )}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </main>
+  )
+}

web/app/(app)/admin/abteilungen/DepartmentForm.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+import { useActionState, useState } from 'react'
+import { departmentAdminText } from '@/lib/i18n/departments'
+import {
+  createDepartmentAction,
+  updateDepartmentAction,
+  type ActionResult,
+} from './actions'
+
+type Existing = {
+  id: string
+  key: string
+  name: string
+  description: string | null
+  minClearance: number
+  isArchived: boolean
+  memberCount: number | null
+}
+
+/**
+ * Anlegen und Ändern in einem Formular.
+ *
+ * Das Kürzel steht nach dem Anlegen fest: es steckt in der Adresse jeder
+ * Abteilungsseite, und ein wandernder Bezeichner macht geteilte Links wertlos.
+ * Wer sich vertan hat, legt neu an und archiviert die alte — archivieren
+ * statt löschen, weil an einer Abteilung Vermerke und Zuordnungen hängen.
+ */
+export function DepartmentForm({
+  levels,
+  existing,
+}: {
+  levels: { level: number; name: string }[]
+  existing?: Existing
+}) {
+  const [state, action, pending] = useActionState<ActionResult | null, FormData>(
+    existing ? updateDepartmentAction : createDepartmentAction,
+    null,
+  )
+  const [offen, setOffen] = useState(!existing)
+
+  if (existing && !offen) {
+    return (
+      <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
+        <span className="font-mono text-xs text-text-dim">{existing.key}</span>
+        <span className="grow">{existing.name}</span>
+        {existing.memberCount === null ? null : (
+          <span className="font-condensed text-2xs text-text-dim">
+            {departmentAdminText.members} {existing.memberCount}
+          </span>
+        )}
+        {existing.isArchived ? (
+          <span className="font-condensed text-2xs text-text-dim">
+            {departmentAdminText.archived}
+          </span>
+        ) : null}
+        <button type="button" onClick={() => setOffen(true)} className="btn btn-sm">
+          {departmentAdminText.edit}
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <form action={action} className="max-w-(--container-measure) space-y-4">
+      {existing ? <input type="hidden" name="id" value={existing.id} /> : null}
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="block">
+          <span className="font-condensed text-2xs text-text-dim">
+            {departmentAdminText.key}
+          </span>
+          {existing ? (
+            <p className="mt-1.5 font-mono text-sm">{existing.key}</p>
+          ) : (
+            <>
+              <input name="key" required maxLength={21} className="field mt-1.5 w-full font-mono" />
+              <span className="mt-1 block text-2xs text-text-dim">
+                {departmentAdminText.keyHint}
+              </span>
+            </>
+          )}
+        </label>
+
+        <label className="block">
+          <span className="font-condensed text-2xs text-text-dim">
+            {departmentAdminText.name}
+          </span>
+          <input
+            name="name"
+            required
+            maxLength={120}
+            defaultValue={existing?.name}
+            className="field mt-1.5 w-full"
+          />
+        </label>
+      </div>
+
+      <label className="block">
+        <span className="font-condensed text-2xs text-text-dim">
+          {departmentAdminText.description}
+        </span>
+        <textarea
+          name="description"
+          rows={2}
+          maxLength={500}
+          defaultValue={existing?.description ?? ''}
+          className="field mt-1.5 w-full"
+        />
+      </label>
+
+      <div className="flex flex-wrap items-end gap-6">
+        <label className="block">
+          <span className="font-condensed text-2xs text-text-dim">
+            {departmentAdminText.minClearance}
+          </span>
+          <select
+            name="minClearance"
+            defaultValue={existing?.minClearance ?? 0}
+            className="field mt-1.5"
+          >
+            {levels.map((level) => (
+              <option key={level.level} value={level.level}>
+                {level.level} · {level.name}
+              </option>
+            ))}
+          </select>
+          <span className="mt-1 block text-2xs text-text-dim">
+            {departmentAdminText.minClearanceHint}
+          </span>
+        </label>
+
+        {existing ? (
+          <label className="flex items-center gap-2 pb-2 text-sm">
+            <input type="checkbox" name="isArchived" defaultChecked={existing.isArchived} />
+            {departmentAdminText.archived}
+          </label>
+        ) : null}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-4">
+        <button type="submit" disabled={pending} aria-busy={pending} className="btn btn-primary">
+          {existing ? departmentAdminText.save : departmentAdminText.create}
+        </button>
+        {existing ? (
+          <button type="button" onClick={() => setOffen(false)} className="btn btn-sm">
+            {departmentAdminText.cancel}
+          </button>
+        ) : null}
+        {state?.ok ? (
+          <span className="font-condensed text-2xs text-text-dim">
+            {existing ? departmentAdminText.saved : departmentAdminText.created}
+          </span>
+        ) : null}
+        {state && !state.ok ? (
+          <span className="font-condensed text-2xs text-stamp-4">{state.error}</span>
+        ) : null}
+      </div>
+    </form>
+  )
+}

web/app/(app)/admin/abteilungen/actions.ts

@@ -0,0 +1,69 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { z } from 'zod'
+import { requireUser } from '@/lib/auth/current'
+import { AccessError } from '@/lib/errors'
+import { createDepartment, updateDepartment } from '@/lib/departments/service'
+import { de } from '@/lib/i18n/de'
+
+export type ActionResult = { ok: true } | { ok: false; error: string }
+
+function toMessage(error: unknown): string {
+  if (error instanceof AccessError) {
+    return de.actionErrors[error.code] ?? de.actionErrors.default!
+  }
+  console.error('[abteilungen] unerwartet', error)
+  return de.actionErrors.default!
+}
+
+const createSchema = z.object({
+  key: z.string().min(1).max(21),
+  name: z.string().min(1).max(120),
+  description: z.string().max(500).optional(),
+  minClearance: z.coerce.number().int().min(0).max(5),
+})
+
+export async function createDepartmentAction(
+  _prev: ActionResult | null,
+  formData: FormData,
+): Promise<ActionResult> {
+  const user = await requireUser()
+  const parsed = createSchema.safeParse(Object.fromEntries(formData))
+  if (!parsed.success) return { ok: false, error: de.actionErrors.default! }
+
+  try {
+    await createDepartment(user.permissions, parsed.data)
+    revalidatePath('/admin/abteilungen')
+    revalidatePath('/abteilungen')
+    return { ok: true }
+  } catch (error) {
+    return { ok: false, error: toMessage(error) }
+  }
+}
+
+const updateSchema = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1).max(120),
+  description: z.string().max(500).optional(),
+  minClearance: z.coerce.number().int().min(0).max(5),
+  isArchived: z.union([z.literal('on'), z.undefined()]).transform((wert) => wert === 'on'),
+})
+
+export async function updateDepartmentAction(
+  _prev: ActionResult | null,
+  formData: FormData,
+): Promise<ActionResult> {
+  const user = await requireUser()
+  const parsed = updateSchema.safeParse(Object.fromEntries(formData))
+  if (!parsed.success) return { ok: false, error: de.actionErrors.default! }
+
+  try {
+    await updateDepartment(user.permissions, parsed.data)
+    revalidatePath('/admin/abteilungen')
+    revalidatePath('/abteilungen')
+    return { ok: true }
+  } catch (error) {
+    return { ok: false, error: toMessage(error) }
+  }
+}

web/app/(app)/admin/abteilungen/page.tsx

@@ -0,0 +1,69 @@
+import type { Metadata } from 'next'
+import { requireUser } from '@/lib/auth/current'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { listDepartments } from '@/lib/departments/service'
+import { de } from '@/lib/i18n/de'
+import { DepartmentForm } from './DepartmentForm'
+
+export const metadata: Metadata = { title: de.departmentAdmin.heading }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Abteilungen verwalten.
+ *
+ * Angelegt wird hier, zugeordnet in der Personalakte: die Zugehörigkeit ist
+ * eine Angabe über die Person und gehört in ihre Akte, nicht in eine Liste im
+ * Adminbereich.
+ */
+export default async function DepartmentAdminPage() {
+  const user = await requireUser()
+  if (!user.permissions.isAdmin && !user.permissions.permissions.has('roles.manage')) {
+    notFound()
+  }
+
+  const [abteilungen, levels] = await Promise.all([
+    listDepartments(user.permissions, { includeArchived: true }),
+    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
+  ])
+
+  const erlaubteStufen = levels.filter(
+    (level) => user.permissions.isAdmin || level.level <= user.permissions.clearanceLevel,
+  )
+
+  return (
+    <section>
+      <h2 className="font-condensed">{de.departmentAdmin.heading}</h2>
+      <p className="mt-1 max-w-(--container-measure) text-2xs text-text-dim">
+        {de.departmentAdmin.intro}
+      </p>
+
+      <div className="mt-6">
+        <DepartmentForm levels={erlaubteStufen} />
+      </div>
+
+      {abteilungen.length === 0 ? (
+        <p className="mt-10 text-text-dim">{de.departmentAdmin.empty}</p>
+      ) : (
+        <ul className="mt-10 border-t border-line">
+          {abteilungen.map((abteilung) => (
+            <li key={abteilung.id} className="border-b border-line py-4">
+              <DepartmentForm
+                levels={erlaubteStufen}
+                existing={{
+                  id: abteilung.id,
+                  key: abteilung.key,
+                  name: abteilung.name,
+                  description: abteilung.description,
+                  minClearance: abteilung.minClearance,
+                  isArchived: abteilung.isArchived,
+                  memberCount: abteilung.memberCount,
+                }}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}

web/app/(app)/admin/protokoll/page.tsx

@@ -17,7 +17,7 @@ type Params = Record<string, string | string[] | undefined>
  * die Spur bei jeder schreibenden Aktion und bei jedem Lesezugriff ab Stufe 3,
  * ohne Ausnahme und ohne Möglichkeit, sie zu unterdrücken.
  *
- * Nur für die Leitung. Das folgt aus dem, was drinsteht: eine Zeile nennt
+ * Nur mit dem Recht `audit.read`. Das folgt aus dem, was drinsteht: eine Zeile nennt
  * Aktenzeichen und Namen, und schon die Existenz einer Zeile verrät, dass es
  * einen Vorgang gibt. Ein „gefiltertes Protokoll für alle" wäre ein Weg, die
  * Sichtbarkeitsregeln von hinten aufzurollen.
@@ -30,7 +30,7 @@ export default async function AuditLogPage({
 }: {
   searchParams: Promise<Params>
 }) {
-  await requirePermission('admin')
+  await requirePermission('audit.read')
   const params = await searchParams
 
   const wert = (name: string): string | undefined => {

web/app/(app)/admin/sections.ts

@@ -21,11 +21,17 @@ export type AdminSection = {
 }
 
 export function adminSections(p: EffectivePermissions): AdminSection[] {
-  const darf = (recht: 'roles.manage' | 'template.manage' | 'admin'): boolean =>
+  const darf = (recht: 'roles.manage' | 'template.manage' | 'audit.read' | 'admin'): boolean =>
     p.isAdmin || (recht !== 'admin' && p.permissions.has(recht))
 
   const alle: (AdminSection & { sichtbar: boolean })[] = [
     { key: 'roles', href: '/admin/rollen', sichtbar: darf('roles.manage'), ...text('roles') },
+    {
+      key: 'departments',
+      href: '/admin/abteilungen',
+      sichtbar: darf('roles.manage'),
+      ...text('departments'),
+    },
     {
       key: 'templates',
       href: '/admin/vorlagen',
@@ -33,7 +39,7 @@ export function adminSections(p: EffectivePermissions): AdminSection[] {
       ...text('templates'),
     },
     { key: 'policy', href: '/admin/richtlinie', sichtbar: darf('admin'), ...text('policy') },
-    { key: 'log', href: '/admin/protokoll', sichtbar: darf('admin'), ...text('log') },
+    { key: 'log', href: '/admin/protokoll', sichtbar: darf('audit.read'), ...text('log') },
     { key: 'system', href: '/admin/system', sichtbar: darf('admin'), ...text('system') },
   ]
 
@@ -49,5 +55,10 @@ function text(key: string): { label: string; description: string } {
 
 /** Ob jemand die Verwaltung überhaupt sieht. Für die Kopfzeile. */
 export function hasAdminAccess(p: EffectivePermissions): boolean {
-  return p.isAdmin || p.permissions.has('roles.manage') || p.permissions.has('template.manage')
+  return (
+    p.isAdmin ||
+    p.permissions.has('roles.manage') ||
+    p.permissions.has('template.manage') ||
+    p.permissions.has('audit.read')
+  )
 }

web/app/(app)/chat/actions.ts

@@ -28,6 +28,7 @@ function toMessage(error: unknown): string {
 const scope = z.union([
   z.object({ kind: z.literal('case'), caseNumber: z.string().min(1) }),
   z.object({ kind: z.literal('personnel'), fileId: z.string().min(1) }),
+  z.object({ kind: z.literal('department'), departmentId: z.string().min(1) }),
 ])
 
 const sendSchema = z.object({
@@ -114,7 +115,7 @@ export async function adoptAsEntryAction(input: unknown): Promise<ActionResult>
 }
 
 const readSchema = z.object({
-  scopeType: z.enum(['case', 'personnel']),
+  scopeType: z.enum(['case', 'personnel', 'department']),
   scopeId: z.string().min(1),
 })
 

web/app/(app)/layout.tsx

@@ -44,6 +44,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
             <Link href="/uebersicht">{de.nav.dashboard}</Link>
             <Link href="/faelle">{de.nav.cases}</Link>
             {darfPersonal ? <Link href="/personalakten">{de.nav.personnel}</Link> : null}
+            <Link href="/abteilungen">{de.nav.departments}</Link>
             {hasAdminAccess(user.permissions) ? (
               <Link href="/admin">{de.nav.admin}</Link>
             ) : null}

web/app/(app)/personalakten/[id]/PersonnelHead.tsx

@@ -15,7 +15,8 @@ type File = {
   id: string
   displayName: string
   rank: string | null
-  department: string | null
+  departmentId: string | null
+  department: { id: string; key: string; name: string } | null
   statusTags: string[]
   note: string | null
   classification: number
@@ -34,11 +35,16 @@ export function PersonnelHead({
   canEdit,
   levels,
   statusTags,
+  departments,
 }: {
   file: File
   canEdit: boolean
   levels: { level: number; name: string }[]
   statusTags: { key: string; name: string; colorToken: string }[]
+  /** Die Abteilungen zur Auswahl. Freitext gibt es hier nicht mehr: sonst wäre
+      jede Schreibweise eine eigene Abteilung, und genau das war der Grund für
+      das Modell. */
+  departments: { id: string; key: string; name: string }[]
 }) {
   const [editing, setEditing] = useState(false)
   const [state, action, pending] = useActionState<ActionResult | null, FormData>(
@@ -51,7 +57,7 @@ export function PersonnelHead({
       <div>
         <dl className="grid gap-x-8 gap-y-2 text-sm sm:grid-cols-2">
           <Zeile label={personnelText.rank} value={file.rank} />
-          <Zeile label={personnelText.department} value={file.department} />
+          <Zeile label={personnelText.department} value={file.department?.name ?? null} />
           <Zeile
             label={personnelText.linkedAccount}
             value={file.userId ? file.userId : personnelText.noAccount}
@@ -100,7 +106,23 @@ export function PersonnelHead({
       <Feld id="displayName" label={personnelText.name} defaultValue={file.displayName} required />
       <div className="grid gap-4 sm:grid-cols-2">
         <Feld id="rank" label={personnelText.rank} defaultValue={file.rank} />
-        <Feld id="department" label={personnelText.department} defaultValue={file.department} />
+        <label className="block">
+          <span className="font-condensed text-2xs text-text-dim">
+            {personnelText.department}
+          </span>
+          <select
+            name="departmentId"
+            defaultValue={file.departmentId ?? ''}
+            className="field mt-1.5 w-full"
+          >
+            <option value="">{personnelText.noDepartment}</option>
+            {departments.map((abteilung) => (
+              <option key={abteilung.id} value={abteilung.id}>
+                {abteilung.name}
+              </option>
+            ))}
+          </select>
+        </label>
       </div>
 
       <fieldset>

web/app/(app)/personalakten/[id]/page.tsx

@@ -14,6 +14,7 @@ import {
 import { listDocuments, listTemplatesFor } from '@/lib/documents/service'
 import { canWritePersonnel } from '@/lib/access/documentWrite'
 import { trackOpen } from '@/lib/recent/track'
+import { listDepartments } from '@/lib/departments/service'
 import { loadChatView } from '@/lib/chat/load'
 import { ChatLazy } from '@/components/chat/ChatLazy'
 import { de } from '@/lib/i18n/de'
@@ -218,9 +219,10 @@ export default async function PersonnelPage({ params }: { params: Promise<{ id:
 
   await trackOpen(user.id, 'PERSONNEL', akte.id)
 
-  const [levels, statusTags] = await Promise.all([
+  const [levels, statusTags, abteilungen] = await Promise.all([
     db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
     listStatusTags(),
+    listDepartments(user.permissions),
   ])
   const level = levels.find((l) => l.level === akte.classification)
   const canEdit = canWritePersonnel(user.permissions, akte.classification).ok
@@ -243,6 +245,7 @@ export default async function PersonnelPage({ params }: { params: Promise<{ id:
             canEdit={canEdit}
             levels={levels.filter((l) => l.level <= user.permissions.clearanceLevel)}
             statusTags={statusTags}
+            departments={abteilungen}
           />
         </div>
       </section>

web/app/(app)/personalakten/actions.ts

@@ -32,7 +32,7 @@ function toMessage(error: unknown): string {
 const kopfdaten = {
   displayName: z.string().min(2).max(120),
   rank: z.string().max(60).optional(),
-  department: z.string().max(60).optional(),
+  departmentId: z.string().max(64).optional(),
   note: z.string().max(2000).optional(),
 }
 

web/app/(app)/personalakten/neu/NewPersonnelForm.tsx

@@ -16,11 +16,13 @@ export function NewPersonnelForm({
   members,
   levels,
   statusTags,
+  departments,
   defaultLevel,
 }: {
   members: { id: string; displayName: string }[]
   levels: { level: number; name: string }[]
   statusTags: { key: string; name: string }[]
+  departments: { id: string; key: string; name: string }[]
   defaultLevel: number
 }) {
   const [state, action, pending] = useActionState<ActionResult | null, FormData>(
@@ -53,7 +55,19 @@ export function NewPersonnelForm({
 
       <div className="grid gap-5 sm:grid-cols-2">
         <Feld id="rank" label={personnelText.rank} />
-        <Feld id="department" label={personnelText.department} />
+        <label className="block">
+          <span className="font-condensed text-2xs text-text-dim">
+            {personnelText.department}
+          </span>
+          <select name="departmentId" defaultValue="" className="field mt-1.5 w-full">
+            <option value="">{personnelText.noDepartment}</option>
+            {departments.map((abteilung) => (
+              <option key={abteilung.id} value={abteilung.id}>
+                {abteilung.name}
+              </option>
+            ))}
+          </select>
+        </label>
       </div>
 
       <fieldset>

web/app/(app)/personalakten/neu/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { db } from '@/lib/db'
 import { requirePermission } from '@/lib/auth/current'
 import { listStatusTags } from '@/lib/personnel/service'
+import { listDepartments } from '@/lib/departments/service'
 import { de } from '@/lib/i18n/de'
 import { NewPersonnelForm } from './NewPersonnelForm'
 
@@ -11,7 +12,7 @@ export const dynamic = 'force-dynamic'
 export default async function NewPersonnelPage() {
   const user = await requirePermission('personnel.edit')
 
-  const [levels, members, statusTags] = await Promise.all([
+  const [levels, members, statusTags, abteilungen] = await Promise.all([
     db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
     // Nur Konten, für die es noch keine Akte gibt: zwei Akten zu einer Person
     // wären zwei Wahrheiten.
@@ -22,6 +23,7 @@ export default async function NewPersonnelPage() {
       select: { id: true, displayName: true },
     }),
     listStatusTags(),
+    listDepartments(user.permissions),
   ])
 
   return (
@@ -34,6 +36,7 @@ export default async function NewPersonnelPage() {
         members={members}
         levels={levels.filter((level) => level.level <= user.permissions.clearanceLevel)}
         statusTags={statusTags}
+        departments={abteilungen}
         defaultLevel={Math.min(1, user.permissions.clearanceLevel)}
       />
     </main>