Personalakte als Aktenblatt, Status als Etiketten, Verknüpfen von beiden Seiten

Das Formular der Personalabteilung ist übernommen, nicht durch eine
Bildschirmansicht ersetzt: schwarzer Rahmen, Kopf mit Kennung und
Klassifizierungsbalken, Raster aus fünf Spalten, Unterschriftenzeilen,
Fußzeile. Es steht bewusst außerhalb des Design-Systems — es wird gedruckt und
muss auf Papier aussehen wie das Blatt daneben.

Datengetrieben bleibt es trotzdem. Kein Feld steht im Programm: sheetTitle und
sheetSubtitle an der Vorlage, span für die Zellbreite, rows für das Lichtbild,
dateKey für das Datum unter einer Unterschrift, slot für den
Klassifizierungsbalken. Eine weitere Dokumentart mit layout = DOSSIER braucht
keine Zeile Code.

Der Balken zeigt die Foundation-Stufe aus der neuen Tabelle
FoundationClearance. Sie ist Inhalt, kein Zugriff — was jemand sehen darf,
entscheidet weiterhin allein die interne Stufe. Ohne Auswahl bleibt der Balken
neutral, statt eine Einstufung zu behaupten.

Die Dienstnummer ist entfallen, es gibt sie nicht. Der Status ist zu mehreren
Etiketten geworden: "Gekündigt" und "Verhaftet" schließen einander nicht aus.
Unbekannte Schlüssel werden verworfen und die Reihenfolge kommt aus der
Konfiguration, nicht aus der Eingabe.

PersonnelAssignment hängt AfiS-Mitglieder an eine Person — Aktenführung,
Ermittler, Ansprechpartner — und ist zugleich der ausnahmsweise Zugang, wie
CaseParticipant bei der Fallakte. Betroffen zu sein gibt weiterhin keinen
Zugang: das ist eine Eigenschaft der Person, die Zuordnung eine Entscheidung
der Abteilung.

Fall und Person lassen sich von beiden Seiten verknüpfen und schon beim
Anlegen einer Fallakte. Alle drei Wege laufen in addParticipant zusammen.

Noch offen: das Lichtbild. Feldtyp und Platz stehen, hochladen kommt mit der
Prüfkette in Phase 5 — ein Bild als Data-URL im Abschnittswert verstiesse
gegen harte Regel 4.

102 Tests im Web-Paket, davon sechs auf dem gerenderten Blatt selbst.

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

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

@@ -2,6 +2,7 @@
 
 import { useActionState, useState, useTransition } from 'react'
 import { de } from '@/lib/i18n/de'
+import { StatusTags } from '@/components/StatusTags'
 import {
   reclassifyPersonnelAction,
   updatePersonnelAction,
@@ -11,10 +12,9 @@ import {
 type File = {
   id: string
   displayName: string
-  serviceNumber: string | null
   rank: string | null
   department: string | null
-  status: string | null
+  statusTags: string[]
   note: string | null
   classification: number
   userId: string | null
@@ -31,10 +31,12 @@ export function PersonnelHead({
   file,
   canEdit,
   levels,
+  statusTags,
 }: {
   file: File
   canEdit: boolean
   levels: { level: number; name: string }[]
+  statusTags: { key: string; name: string; colorToken: string }[]
 }) {
   const [editing, setEditing] = useState(false)
   const [state, action, pending] = useActionState<ActionResult | null, FormData>(
@@ -46,10 +48,8 @@ export function PersonnelHead({
     return (
       <div>
         <dl className="grid gap-x-8 gap-y-2 text-sm sm:grid-cols-2">
-          <Zeile label={de.personnel.serviceNumber} value={file.serviceNumber} mono />
           <Zeile label={de.personnel.rank} value={file.rank} />
           <Zeile label={de.personnel.department} value={file.department} />
-          <Zeile label={de.personnel.status} value={file.status} />
           <Zeile
             label={de.personnel.linkedAccount}
             value={file.userId ? file.userId : de.personnel.noAccount}
@@ -57,6 +57,15 @@ export function PersonnelHead({
           />
         </dl>
 
+        <div className="mt-3 flex flex-wrap items-baseline gap-3">
+          <span className="font-condensed text-xs text-text-dim">{de.personnel.status}</span>
+          {file.statusTags.length > 0 ? (
+            <StatusTags tags={file.statusTags} known={statusTags} />
+          ) : (
+            <span className="text-sm text-text-dim">{de.personnel.statusNone}</span>
+          )}
+        </div>
+
         {file.note ? (
           <p className="mt-4 max-w-(--container-measure) border-l-(length:--spacing-edge) border-line pl-3 text-sm whitespace-pre-wrap">
             {file.note}
@@ -88,15 +97,27 @@ export function PersonnelHead({
       <input type="hidden" name="id" value={file.id} />
       <Feld id="displayName" label={de.personnel.name} defaultValue={file.displayName} required />
       <div className="grid gap-4 sm:grid-cols-2">
-        <Feld
-          id="serviceNumber"
-          label={de.personnel.serviceNumber}
-          defaultValue={file.serviceNumber}
-        />
         <Feld id="rank" label={de.personnel.rank} defaultValue={file.rank} />
         <Feld id="department" label={de.personnel.department} defaultValue={file.department} />
-        <Feld id="status" label={de.personnel.status} defaultValue={file.status} />
       </div>
+
+      <fieldset>
+        <legend className="font-condensed text-2xs text-text-dim">{de.personnel.status}</legend>
+        <div className="mt-2 flex flex-wrap gap-x-6 gap-y-2">
+          {statusTags.map((tag) => (
+            <label key={tag.key} className="flex items-center gap-2 text-sm">
+              <input
+                type="checkbox"
+                name="statusTags"
+                value={tag.key}
+                defaultChecked={file.statusTags.includes(tag.key)}
+              />
+              {tag.name}
+            </label>
+          ))}
+        </div>
+        <p className="mt-1 text-2xs text-text-dim">{de.personnel.statusHint}</p>
+      </fieldset>
       <div>
         <label htmlFor="note" className="font-condensed text-2xs text-text-dim">
           {de.personnel.note}