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>
This commit is contained in:
Harlekin
co-authored by
Claude Opus 5
Claude Opus 5
parent
d65cc95eb2
commit
68ad0debd3
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Status einer Person als Etiketten.
|
||||
*
|
||||
* Mehrere zugleich: „Gekündigt" und „Verhaftet" schließen einander nicht aus.
|
||||
* Die Namen und Farben kommen aus `PersonnelStatusTag` und sind im
|
||||
* Adminbereich pflegbar — deshalb werden sie hereingereicht und nicht aus
|
||||
* `lib/i18n/de.ts` gelesen. Siehe CLAUDE.md, Sprachkonvention.
|
||||
*/
|
||||
export function StatusTags({
|
||||
tags,
|
||||
known,
|
||||
}: {
|
||||
tags: string[]
|
||||
known: { key: string; name: string; colorToken: string }[]
|
||||
}) {
|
||||
if (tags.length === 0) return null
|
||||
const byKey = new Map(known.map((tag) => [tag.key, tag]))
|
||||
|
||||
return (
|
||||
<ul className="flex flex-wrap gap-1.5">
|
||||
{tags.map((key) => {
|
||||
const tag = byKey.get(key)
|
||||
const color = `var(--color-${tag?.colorToken ?? 'stamp-0'})`
|
||||
return (
|
||||
<li
|
||||
key={key}
|
||||
className="border px-1.5 py-0.5 font-condensed text-2xs"
|
||||
style={{ borderColor: color, color }}
|
||||
>
|
||||
{tag?.name ?? key}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* Das Zeichen der Foundation im Kopf des Aktenblatts.
|
||||
*
|
||||
* Als SVG im Markup, nicht als Bilddatei von einem fremden Host: die
|
||||
* Inhaltsrichtlinie der Anwendung lässt keine externen Bilder zu, und ein
|
||||
* Formular, das nur mit Internetverbindung vollständig aussieht, ist auf einem
|
||||
* Heimserver die falsche Bauart. Wer das Original einsetzen will, legt es als
|
||||
* `public/foundation.svg` ab und tauscht diese Komponente gegen ein `img`.
|
||||
*/
|
||||
export function FoundationMark({ size = 70 }: { size?: number }) {
|
||||
// Drei nach innen zeigende Pfeile, um 120 Grad versetzt.
|
||||
const pfeile = [0, 120, 240]
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 100 100"
|
||||
role="img"
|
||||
aria-label="Zeichen der Foundation"
|
||||
style={{ background: '#ffffff' }}
|
||||
>
|
||||
<circle cx="50" cy="50" r="46" fill="none" stroke="#000" strokeWidth="4" />
|
||||
<circle cx="50" cy="50" r="38" fill="none" stroke="#000" strokeWidth="2" />
|
||||
{pfeile.map((winkel) => (
|
||||
<g key={winkel} transform={`rotate(${winkel} 50 50)`}>
|
||||
<path d="M50 14 L68 44 L56 44 L56 62 L44 62 L44 44 L32 44 Z" fill="#000" />
|
||||
</g>
|
||||
))}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
import { de } from '@/lib/i18n/de'
|
||||
import {
|
||||
dossierRows,
|
||||
dossierSpan,
|
||||
fillPlaceholders,
|
||||
isInputField,
|
||||
type TemplateField,
|
||||
} from '@/lib/templates/fields'
|
||||
import { RedactedText } from '@/components/Redacted'
|
||||
import { FoundationMark } from './FoundationMark'
|
||||
import type { RenderedSection } from '@/lib/sections/render'
|
||||
|
||||
/**
|
||||
* Das Aktenblatt: ein Formular, kein Bildschirmelement.
|
||||
*
|
||||
* Nachgebaut nach dem Blatt, das die Personalabteilung bislang von Hand
|
||||
* ausgefüllt hat — Raster, Rahmenstärken und Beschriftungen entsprechen ihm.
|
||||
* Es steht bewusst außerhalb des Design-Systems der Oberfläche, weil es
|
||||
* gedruckt weitergereicht wird und auf Papier gleich aussehen muss.
|
||||
*
|
||||
* Welche Felder wo stehen, kommt aus der Vorlage, nicht von hier. Damit trägt
|
||||
* dieselbe Bauform später einen Vorfallsbericht oder einen Bußgeldbescheid.
|
||||
* Siehe docs/13-entscheidungen.md.
|
||||
*/
|
||||
export function Sheet({
|
||||
sections,
|
||||
title,
|
||||
subtitle,
|
||||
documentNumber,
|
||||
issuedAt,
|
||||
foundationLevels,
|
||||
footerNote,
|
||||
}: {
|
||||
sections: RenderedSection[]
|
||||
title: string
|
||||
subtitle: string
|
||||
documentNumber: string
|
||||
issuedAt: Date
|
||||
/** Aus FoundationClearance. Steuert keinen Zugriff, nur den Balken. */
|
||||
foundationLevels: { level: number; name: string; colorHex: string }[]
|
||||
footerNote: string
|
||||
}) {
|
||||
const fields = sections.map((section) => section.field)
|
||||
const byKey = new Map(sections.map((section) => [section.fieldKey, section]))
|
||||
const werte = Object.fromEntries(
|
||||
sections.filter((s) => s.visible).map((s) => [s.fieldKey, s.value]),
|
||||
)
|
||||
const { photo, photoRows, rows } = dossierRows(fields)
|
||||
|
||||
const klassifikation = sections.find(
|
||||
(section) => isInputField(section.field) && section.field.slot === 'classbar',
|
||||
)
|
||||
const stufe = klassifikation?.visible ? Number(klassifikation.value) : NaN
|
||||
const balken = foundationLevels.find((l) => l.level === stufe)
|
||||
|
||||
return (
|
||||
<div className="sheet-scroll">
|
||||
<article className="sheet">
|
||||
<div className="sheet-frame">
|
||||
<header className="sheet-head">
|
||||
<div>
|
||||
<h1>{title}</h1>
|
||||
<h2>{subtitle}</h2>
|
||||
</div>
|
||||
<div className="sheet-mark">
|
||||
<FoundationMark />
|
||||
<span className="sheet-barcode" aria-hidden />
|
||||
<span style={{ fontFamily: 'var(--font-mono, monospace)', fontSize: 10, fontWeight: 700 }}>
|
||||
{de.document.number}: {documentNumber}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
className="sheet-classbar"
|
||||
// Ohne gesetzte Stufe bleibt der Balken neutral dunkel, statt zu
|
||||
// behaupten, das Blatt sei eingestuft.
|
||||
style={{ backgroundColor: balken?.colorHex ?? '#333333' }}
|
||||
>
|
||||
<span>
|
||||
{subtitle} — {balken ? `${balken.name} [Level ${balken.level}]` : de.document.unclassified}
|
||||
</span>
|
||||
<span>
|
||||
{de.document.issuedAt}: {formatiereDatum(issuedAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<table className="sheet-grid">
|
||||
<tbody>
|
||||
{rows.map((row, rowIndex) => {
|
||||
const inPhotoRows = rowIndex < photoRows
|
||||
return (
|
||||
<tr key={rowIndex}>
|
||||
{photo && rowIndex === 0 ? (
|
||||
<td rowSpan={photoRows} style={{ width: 150, textAlign: 'center' }}>
|
||||
<div className="sheet-label" style={{ textAlign: 'center' }}>
|
||||
{photo.label}
|
||||
</div>
|
||||
<PhotoBox section={byKey.get(photo.key)} />
|
||||
</td>
|
||||
) : null}
|
||||
|
||||
{row.map((field) => (
|
||||
<Cell
|
||||
key={field.key}
|
||||
field={field}
|
||||
section={byKey.get(field.key)}
|
||||
dateSection={
|
||||
isInputField(field) && field.dateKey
|
||||
? byKey.get(field.dateKey)
|
||||
: undefined
|
||||
}
|
||||
span={dossierSpan(field, inPhotoRows)}
|
||||
werte={werte}
|
||||
/>
|
||||
))}
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<footer className="sheet-foot">
|
||||
<span>{footerNote}</span>
|
||||
<span>{documentNumber}</span>
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PhotoBox({ section }: { section: RenderedSection | undefined }) {
|
||||
if (section && !section.visible) {
|
||||
return (
|
||||
<div className="sheet-photo">
|
||||
<span>{de.section.redacted}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Der Wert eines Lichtbildfeldes ist die Kennung eines geprüften Anhangs,
|
||||
// nie das Bild selbst. Die Prüfkette dafür baut Phase 5, siehe docs/07.
|
||||
return (
|
||||
<div className="sheet-photo">
|
||||
<span>{de.document.photoEmpty}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Cell({
|
||||
field,
|
||||
section,
|
||||
dateSection,
|
||||
span,
|
||||
werte,
|
||||
}: {
|
||||
field: TemplateField
|
||||
section: RenderedSection | undefined
|
||||
dateSection: RenderedSection | undefined
|
||||
span: number
|
||||
werte: Record<string, unknown>
|
||||
}) {
|
||||
if (!isInputField(field)) {
|
||||
const text = fillPlaceholders(field.text ?? '', werte)
|
||||
return (
|
||||
<td colSpan={span}>
|
||||
{field.type === 'heading' ? (
|
||||
<div className="sheet-label">{text || field.label}</div>
|
||||
) : (
|
||||
<div className="sheet-value" style={{ whiteSpace: 'pre-wrap' }}>
|
||||
{text}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
)
|
||||
}
|
||||
|
||||
// Serverseitig ersetzt: der echte Wert ist gar nicht erst hier.
|
||||
if (section && !section.visible) {
|
||||
return (
|
||||
<td colSpan={span}>
|
||||
<div className="sheet-label">{field.label}</div>
|
||||
<div className="sheet-value">
|
||||
<span className="redaction inline-block h-[1.1rem] w-40" aria-hidden />
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
}
|
||||
|
||||
if (field.type === 'signature') {
|
||||
return (
|
||||
<td colSpan={span} style={{ paddingBottom: 20 }}>
|
||||
<div className="sheet-label">{fillPlaceholders(field.label, werte)}</div>
|
||||
<div className="sheet-signature">{asText(section?.value)}</div>
|
||||
{field.dateKey ? (
|
||||
<div className="sheet-label" style={{ marginTop: 5 }}>
|
||||
{de.document.signedOn}: {asText(dateSection?.value) || '—'}
|
||||
</div>
|
||||
) : null}
|
||||
</td>
|
||||
)
|
||||
}
|
||||
|
||||
const lang = field.type === 'longtext'
|
||||
|
||||
return (
|
||||
<td colSpan={span}>
|
||||
<div className="sheet-label">{field.label}</div>
|
||||
<div
|
||||
className={`sheet-value${field.emphasis ? ' sheet-value-emphasis' : ''}`}
|
||||
style={lang ? { minHeight: 220, whiteSpace: 'pre-wrap' } : undefined}
|
||||
>
|
||||
{section?.segments ? (
|
||||
<RedactedText segments={section.segments} />
|
||||
) : (
|
||||
asText(section?.value) || '---'
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Zweistellig, wie auf dem Formular: `14.03.2026`, nicht `14.3.2026`. Die
|
||||
* deutsche Voreinstellung kürzt, ein Formular tut das nicht.
|
||||
*/
|
||||
function formatiereDatum(value: Date): string {
|
||||
return value.toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
function asText(value: unknown): string {
|
||||
if (value === null || value === undefined) return ''
|
||||
if (Array.isArray(value)) return value.join(', ')
|
||||
return String(value)
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
'use client'
|
||||
|
||||
import { useState, type ReactNode } from 'react'
|
||||
import { de } from '@/lib/i18n/de'
|
||||
|
||||
/**
|
||||
* Umschalter zwischen Aktenblatt und Bearbeitung.
|
||||
*
|
||||
* Beide Bäume kommen fertig gerendert vom Server herein; hier wird nur
|
||||
* umgeschaltet. Das Blatt bleibt damit das, was es ist — ein Formular —, ohne
|
||||
* dass die Bearbeitung es mit Eingabefeldern zerlegt.
|
||||
*/
|
||||
export function SheetSwitch({
|
||||
sheet,
|
||||
editor,
|
||||
canEdit,
|
||||
}: {
|
||||
sheet: ReactNode
|
||||
editor: ReactNode
|
||||
canEdit: boolean
|
||||
}) {
|
||||
const [modus, setModus] = useState<'blatt' | 'bearbeiten'>('blatt')
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="no-print mb-6 flex flex-wrap items-center gap-4 border-b border-line pb-2 font-condensed text-xs">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setModus('blatt')}
|
||||
aria-current={modus === 'blatt'}
|
||||
className={modus === 'blatt' ? 'text-accent' : 'text-text-dim'}
|
||||
>
|
||||
{de.document.sheet}
|
||||
</button>
|
||||
{canEdit ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setModus('bearbeiten')}
|
||||
aria-current={modus === 'bearbeiten'}
|
||||
className={modus === 'bearbeiten' ? 'text-accent' : 'text-text-dim'}
|
||||
>
|
||||
{de.document.edit}
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setModus('blatt')
|
||||
// Ein Bild vom Bildschirm ist kein Export. Der PDF-Export mit
|
||||
// Wasserzeichen und Protokolleintrag kommt in Phase 8.
|
||||
requestAnimationFrame(() => window.print())
|
||||
}}
|
||||
className="ml-auto text-text-dim"
|
||||
>
|
||||
{de.document.print}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{modus === 'blatt' ? sheet : <div className="no-print">{editor}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -40,16 +40,6 @@ export function Sections({
|
||||
// Feste Bausteine der Vorlage.
|
||||
if (!isInputField(field)) {
|
||||
if (field.type === 'pagebreak') return <hr key={field.key} className="border-line" />
|
||||
if (field.type === 'signature') {
|
||||
return (
|
||||
<div key={field.key} className="pt-8">
|
||||
<div className="w-64 border-t border-line" />
|
||||
<p className="mt-1 text-2xs text-text-dim">
|
||||
{fillPlaceholders(field.label, werte)}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const text = fillPlaceholders(field.text ?? '', werte)
|
||||
return field.type === 'heading' ? (
|
||||
<h3 key={field.key} className="font-condensed">
|
||||
@@ -62,6 +52,15 @@ export function Sections({
|
||||
)
|
||||
}
|
||||
|
||||
if (field.type === 'photo') {
|
||||
return (
|
||||
<div key={field.key}>
|
||||
<dt className="font-condensed text-xs text-text-dim">{field.label}</dt>
|
||||
<dd className="mt-1 text-2xs text-text-dim">{de.document.photoLater}</dd>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={field.key}>
|
||||
<dt className="flex flex-wrap items-baseline gap-x-3">
|
||||
|
||||
Reference in New Issue
Block a user