Phase 4 abgeschlossen: Personalakten, Dokumente, Beteiligte, Verknüpfungen

Die Dokumentebene aus docs/13 ist gebaut, additiv: Document, DocumentSection
und DocumentSectionVersion neben Case, CaseSection und CaseEntry. Ein Dokument
hängt an einer Fallakte, an einer Personalakte oder an nichts, höchstens an
einem — gesichert durch eine CHECK-Bedingung. Es gibt kein DELETE; eine
Zurücknahme lässt einen Grabstein stehen, der auch für den Admin zu ist.

Eine neue Dokumentart ist damit ein Datensatz, kein Deployment. Im Seed stehen
vier: vermerk, vorfallsbericht, sonderarbeitsvertrag (mehrseitiger Vertragstext
mit Platzhaltern und Unterschriftenzeilen) und bussgeld.

Zwei Umbenennungen, beide von Hand migriert, damit die vorhandenen Zeilen und
Zählerstände stehen bleiben:
- CaseTemplate -> DocumentTemplate, plus uses[] und layout
- CaseCounter -> NumberSeries, ein Nummernkreis je Präfix für Aktenzeichen
  und Dokumentnummern

Die Regeln für Abschnitte stehen jetzt einmal in lib/sections/render.ts und
gelten für Fallakten und Dokumente gleichermaßen. Die Frage aus docs/13, ob
CaseSection langfristig in die Dokumentebene wandert, ist damit verneint und
begründet.

Rückverweise auf der Personalakte laufen durch visibleCaseWhere, die Zahl
daneben entsteht aus dem gefilterten Ergebnis. Auch die Rollengruppe
verschwindet mit, sonst verriete "Betroffener" ohne Eintrag die Ermittlung.
Die eigene Personalakte ist keine Ausnahme von der Freigabestufe.

Vier neue Rechte: document.create, .edit, .finalize, .retract. Das letzte
steht bei den zurückgehaltenen, es greift in Geschriebenes ein.

91 Tests im Web-Paket, 15 in der Datenbank, 28 e2e. Größte Route 118 kB
gegen das Budget von 120 kB — die Luft wird knapp.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Harlekin
2026-09-02 14:15:16 +02:00
co-authored by Claude Opus 5
parent f5769ca58a
commit d65cc95eb2
62 changed files with 5312 additions and 225 deletions
@@ -0,0 +1,266 @@
'use client'
import { useActionState, useState, useTransition } from 'react'
import { de } from '@/lib/i18n/de'
import {
reclassifyPersonnelAction,
updatePersonnelAction,
type ActionResult,
} from '../actions'
type File = {
id: string
displayName: string
serviceNumber: string | null
rank: string | null
department: string | null
status: string | null
note: string | null
classification: number
userId: string | null
}
/**
* Kopfdaten einer Personalakte: lesen und ändern in derselben Ansicht.
*
* Die Klassifizierung steht bewusst getrennt. Sie ändert, wer die Akte
* überhaupt sieht, und eine Herabstufung braucht eine Begründung — das gehört
* nicht in dasselbe Formular wie eine Korrektur der Dienstnummer.
*/
export function PersonnelHead({
file,
canEdit,
levels,
}: {
file: File
canEdit: boolean
levels: { level: number; name: string }[]
}) {
const [editing, setEditing] = useState(false)
const [state, action, pending] = useActionState<ActionResult | null, FormData>(
updatePersonnelAction,
null,
)
if (!editing) {
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}
mono={Boolean(file.userId)}
/>
</dl>
{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}
</p>
) : null}
{canEdit ? (
<div className="mt-4 flex flex-wrap items-center gap-4">
<button
type="button"
onClick={() => setEditing(true)}
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
>
{de.personnel.edit}
</button>
<Reclassify id={file.id} current={file.classification} levels={levels} />
</div>
) : null}
</div>
)
}
return (
<form
action={action}
onSubmit={() => setEditing(false)}
className="max-w-(--container-measure) space-y-4"
>
<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>
<div>
<label htmlFor="note" className="font-condensed text-2xs text-text-dim">
{de.personnel.note}
</label>
<textarea
id="note"
name="note"
rows={3}
defaultValue={file.note ?? ''}
className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
/>
</div>
{state && !state.ok ? (
<p className="font-condensed text-2xs text-stamp-4">{state.error}</p>
) : null}
<div className="flex gap-3">
<button
type="submit"
disabled={pending}
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
>
{pending ? de.common.loading : de.common.save}
</button>
<button
type="button"
onClick={() => setEditing(false)}
className="font-condensed text-2xs text-text-dim"
>
{de.common.cancel}
</button>
</div>
</form>
)
}
function Reclassify({
id,
current,
levels,
}: {
id: string
current: number
levels: { level: number; name: string }[]
}) {
const [open, setOpen] = useState(false)
const [to, setTo] = useState(current)
const [reason, setReason] = useState('')
const [error, setError] = useState<string | null>(null)
const [pending, startTransition] = useTransition()
const lowering = to < current
if (!open) {
return (
<button
type="button"
onClick={() => setOpen(true)}
className="font-condensed text-2xs text-text-dim"
>
{de.personnel.reclassify}
</button>
)
}
return (
<div className="w-full border border-line p-3">
<div className="flex flex-wrap items-center gap-3">
<select
value={to}
onChange={(event) => setTo(Number(event.target.value))}
aria-label={de.clearance.classification}
className="border border-line bg-raised px-2 py-1 text-2xs"
>
{levels.map((level) => (
<option key={level.level} value={level.level}>
{level.level} · {level.name}
</option>
))}
</select>
<button
type="button"
disabled={pending || to === current}
onClick={() =>
startTransition(async () => {
const result = await reclassifyPersonnelAction({ id, to, reason })
if (result.ok) setOpen(false)
else setError(result.error)
})
}
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
>
{de.common.save}
</button>
<button
type="button"
onClick={() => setOpen(false)}
className="font-condensed text-2xs text-text-dim"
>
{de.common.cancel}
</button>
</div>
{/* Nur die Herabstufung braucht eine Begründung: sie macht die Akte für
Leute sichtbar, die sie vorher nicht sehen durften. */}
{lowering ? (
<textarea
value={reason}
onChange={(event) => setReason(event.target.value)}
rows={2}
placeholder={de.case.reclassifyReason}
aria-label={de.case.reclassifyReason}
className="mt-2 block w-full border border-line bg-raised px-3 py-2 text-2xs"
/>
) : null}
{error ? <p className="mt-2 font-condensed text-2xs text-stamp-4">{error}</p> : null}
</div>
)
}
function Zeile({
label,
value,
mono,
}: {
label: string
value: string | null
mono?: boolean
}) {
return (
<div className="flex gap-3">
<dt className="font-condensed text-xs text-text-dim">{label}</dt>
<dd className={mono ? 'font-mono text-xs' : ''}>{value || '—'}</dd>
</div>
)
}
function Feld({
id,
label,
defaultValue,
required,
}: {
id: string
label: string
defaultValue?: string | null
required?: boolean
}) {
return (
<div>
<label htmlFor={id} className="font-condensed text-2xs text-text-dim">
{label}
</label>
<input
id={id}
name={id}
required={required}
minLength={required ? 2 : undefined}
maxLength={120}
defaultValue={defaultValue ?? ''}
className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
/>
</div>
)
}
@@ -0,0 +1,23 @@
import { Skeleton, SkeletonLine } from '@/components/Skeleton'
export default function Loading() {
return (
<main className="mx-auto max-w-5xl px-6 py-10">
<div className="pl-3">
<Skeleton className="h-[0.9rem]" width="8rem" />
<div className="mt-2">
<Skeleton className="h-[1.6rem]" width="18rem" />
</div>
</div>
<div className="mt-8 space-y-3">
<Skeleton className="h-[1.1rem]" width="7rem" />
<SkeletonLine width="60%" />
<SkeletonLine width="45%" />
</div>
<div className="mt-10 space-y-3">
<Skeleton className="h-[1.1rem]" width="9rem" />
<SkeletonLine width="70%" />
</div>
</main>
)
}
+188
View File
@@ -0,0 +1,188 @@
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 { requirePermission } from '@/lib/auth/current'
import { recordRead, READ_AUDIT_FROM_LEVEL } from '@/lib/audit'
import { loadBacklinks, loadVisiblePersonnelFile } from '@/lib/personnel/service'
import { listDocuments, listTemplatesFor } from '@/lib/documents/service'
import { canWritePersonnel } from '@/lib/access/documentWrite'
import { de } from '@/lib/i18n/de'
import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
import { SkeletonLine } from '@/components/Skeleton'
import { DocumentList } from '@/components/documents/DocumentList'
import { NewDocument } from '@/components/documents/NewDocument'
import { PersonnelHead } from './PersonnelHead'
import type { EffectivePermissions } from '@/lib/auth/permissions'
export const dynamic = 'force-dynamic'
export async function generateMetadata({
params,
}: {
params: Promise<{ id: string }>
}): Promise<Metadata> {
const user = await requirePermission('personnel.read')
const { id } = await params
const akte = await loadVisiblePersonnelFile(user.permissions, id)
return { title: akte?.displayName ?? de.personnel.one }
}
/**
* Rückverweise: die Fälle, in denen diese Person vorkommt.
*
* Streamt in einer eigenen Suspense-Grenze nach, weil die Abfrage über die
* Sichtbarkeitsprüfung der Fallakten läuft und damit die teuerste auf dieser
* Seite ist. Die Kopfdaten stehen währenddessen schon.
*/
async function Backlinks({
file,
permissions,
}: {
file: { id: string; userId: string | null }
permissions: EffectivePermissions
}) {
const { total, byRole } = await loadBacklinks(permissions, file)
if (total === 0) {
return <p className="text-text-dim">{de.personnel.backlinksEmpty}</p>
}
return (
<div className="space-y-6">
{byRole.map(({ role, eintraege }) => (
<div key={role}>
<h3 className="font-condensed text-xs text-text-dim">
{de.participant.roles[role] ?? role}
</h3>
<ul className="mt-2 border-t border-line">
{eintraege.map(({ case: akte }) => (
<li key={`${role}:${akte.id}`} className="border-b border-line">
<Link
href={`/faelle/${akte.caseNumber}`}
prefetch
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]}
</span>
</Link>
</li>
))}
</ul>
</div>
))}
</div>
)
}
async function Documents({
file,
permissions,
canEdit,
}: {
file: { id: string; classification: number }
permissions: EffectivePermissions
canEdit: boolean
}) {
const [documents, templates, levels] = await Promise.all([
listDocuments(permissions, { personnelFileId: file.id }),
canEdit ? listTemplatesFor('PERSON_DOCUMENT') : Promise.resolve([]),
db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
])
return (
<div className="space-y-4">
<DocumentList
documents={documents}
levelName={new Map(levels.map((l) => [l.level, l.name]))}
/>
{canEdit ? (
<NewDocument
templates={templates}
levels={levels.filter((l) => l.level <= permissions.clearanceLevel)}
defaultLevel={Math.min(file.classification, permissions.clearanceLevel)}
personnelFileId={file.id}
/>
) : null}
</div>
)
}
export default async function PersonnelPage({ params }: { params: Promise<{ id: string }> }) {
const user = await requirePermission('personnel.read')
const { id } = await params
const akte = await loadVisiblePersonnelFile(user.permissions, id)
// Kein Zugriff heisst 404, nicht 403: die Existenz ist selbst eine Information.
if (!akte) notFound()
// Harte Regel 3: jeder Lesezugriff ab Stufe 3 wird protokolliert.
if (akte.classification >= READ_AUDIT_FROM_LEVEL) {
recordRead({
actorId: user.id,
action: 'personnel.read',
targetType: 'PersonnelFile',
targetId: akte.id,
clearanceAtTime: user.permissions.clearanceLevel,
meta: { displayName: akte.displayName, classification: akte.classification },
})
}
const levels = await db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } })
const level = levels.find((l) => l.level === akte.classification)
const canEdit = canWritePersonnel(user.permissions, akte.classification).ok
return (
<main className="mx-auto max-w-5xl px-6 py-10">
<header className="pl-3" style={classificationEdgeStyle(akte.classification)}>
<div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
<span className="font-condensed text-xs text-text-dim">{de.personnel.one}</span>
<StampMark level={akte.classification} name={level?.name ?? de.common.unknown} />
</div>
<h1 className="mt-2 font-condensed">{akte.displayName}</h1>
</header>
<section className="mt-8">
<h2 className="font-condensed">{de.personnel.headData}</h2>
<div className="mt-4">
<PersonnelHead
file={akte}
canEdit={canEdit}
levels={levels.filter((l) => l.level <= user.permissions.clearanceLevel)}
/>
</div>
</section>
<section className="mt-10">
<h2 className="font-condensed">{de.document.heading}</h2>
<div className="mt-4">
<Suspense fallback={<SkeletonLine width="60%" />}>
<Documents file={akte} permissions={user.permissions} canEdit={canEdit} />
</Suspense>
</div>
</section>
<section className="mt-10">
<h2 className="font-condensed">{de.personnel.backlinks}</h2>
<div className="mt-4">
<Suspense
fallback={
<div className="space-y-3">
<SkeletonLine width="8rem" />
<SkeletonLine width="70%" />
<SkeletonLine width="55%" />
</div>
}
>
<Backlinks file={akte} permissions={user.permissions} />
</Suspense>
</div>
</section>
</main>
)
}
+103
View File
@@ -0,0 +1,103 @@
'use server'
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'
import { z } from 'zod'
import { requireUser } from '@/lib/auth/current'
import { AccessError } from '@/lib/errors'
import {
createPersonnelFile,
reclassifyPersonnelFile,
updatePersonnelFile,
} from '@/lib/personnel/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('[personalakten] unerwartet', error)
return de.actionErrors.default!
}
const kopfdaten = {
displayName: z.string().min(2).max(120),
serviceNumber: z.string().max(60).optional(),
rank: z.string().max(60).optional(),
department: z.string().max(60).optional(),
status: z.string().max(60).optional(),
note: z.string().max(2000).optional(),
}
const createSchema = z.object({
...kopfdaten,
userId: z.string().max(64).optional(),
classification: z.coerce.number().int().min(0).max(5),
})
export async function createPersonnelAction(
_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['name-required']! }
let id: string
try {
const created = await createPersonnelFile(user.permissions, parsed.data)
id = created.id
} catch (error) {
return { ok: false, error: toMessage(error) }
}
// Nach dem Anlegen direkt in die Akte, nicht zurück in die Liste.
redirect(`/personalakten/${id}`)
}
const updateSchema = z.object({ id: z.string().min(1), ...kopfdaten })
export async function updatePersonnelAction(
_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['name-required']! }
try {
const { id, ...rest } = parsed.data
await updatePersonnelFile(user.permissions, id, rest)
revalidatePath(`/personalakten/${id}`)
return { ok: true }
} catch (error) {
return { ok: false, error: toMessage(error) }
}
}
const reclassifySchema = z.object({
id: z.string().min(1),
to: z.coerce.number().int().min(0).max(5),
reason: z.string().max(2000).optional(),
})
export async function reclassifyPersonnelAction(input: unknown): Promise<ActionResult> {
const user = await requireUser()
const parsed = reclassifySchema.safeParse(input)
if (!parsed.success) return { ok: false, error: de.actionErrors.default! }
try {
await reclassifyPersonnelFile(
user.permissions,
parsed.data.id,
parsed.data.to,
parsed.data.reason,
)
revalidatePath(`/personalakten/${parsed.data.id}`)
return { ok: true }
} catch (error) {
return { ok: false, error: toMessage(error) }
}
}
+19
View File
@@ -0,0 +1,19 @@
import { Skeleton, SkeletonLine } from '@/components/Skeleton'
export default function Loading() {
return (
<main className="mx-auto max-w-5xl px-6 py-10">
<Skeleton className="h-[1.5rem]" width="12rem" />
<div className="mt-4">
<Skeleton className="h-[2.4rem]" width="24rem" />
</div>
<div className="mt-6 border-t border-line">
{Array.from({ length: 8 }, (_, index) => (
<div key={index} className="border-b border-line py-3 pl-3">
<SkeletonLine width={`${45 + ((index * 11) % 40)}%`} />
</div>
))}
</div>
</main>
)
}
@@ -0,0 +1,131 @@
'use client'
import { useActionState } from 'react'
import { de } from '@/lib/i18n/de'
import { createPersonnelAction, type ActionResult } from '../actions'
/**
* Neue Personalakte.
*
* Das Discord-Konto ist **optional**. Personen ohne Konto — Zeugen, ehemalige
* Mitarbeiter, Externe — brauchen genauso eine Akte, und ihr Name ist dann das
* einzige, was sie identifiziert.
*/
export function NewPersonnelForm({
members,
levels,
defaultLevel,
}: {
members: { id: string; displayName: string }[]
levels: { level: number; name: string }[]
defaultLevel: number
}) {
const [state, action, pending] = useActionState<ActionResult | null, FormData>(
createPersonnelAction,
null,
)
return (
<form action={action} className="mt-6 space-y-5">
<Feld id="displayName" label={de.personnel.name} required minLength={2} />
<div>
<label htmlFor="userId" className="font-condensed text-xs text-text-dim">
{de.personnel.linkedAccount}
</label>
<select
id="userId"
name="userId"
defaultValue=""
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
>
<option value="">{de.personnel.noAccount}</option>
{members.map((member) => (
<option key={member.id} value={member.id}>
{member.displayName}
</option>
))}
</select>
</div>
<div className="grid gap-5 sm:grid-cols-2">
<Feld id="serviceNumber" label={de.personnel.serviceNumber} />
<Feld id="rank" label={de.personnel.rank} />
<Feld id="department" label={de.personnel.department} />
<Feld id="status" label={de.personnel.status} />
</div>
<div>
<label htmlFor="note" className="font-condensed text-xs text-text-dim">
{de.personnel.note}
</label>
<textarea
id="note"
name="note"
rows={3}
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
/>
<p className="mt-1 text-2xs text-text-dim">{de.personnel.noteHelp}</p>
</div>
<div>
<label htmlFor="classification" className="font-condensed text-xs text-text-dim">
{de.clearance.classification}
</label>
{/* Die Auswahl zeigt nur, was erlaubt ist. Geprüft wird trotzdem serverseitig. */}
<select
id="classification"
name="classification"
defaultValue={defaultLevel}
className="mt-1.5 block border border-line bg-raised px-3 py-2 text-sm"
>
{levels.map((level) => (
<option key={level.level} value={level.level}>
{level.level} · {level.name}
</option>
))}
</select>
</div>
{state && !state.ok ? (
<p className="font-condensed text-2xs text-stamp-4">{state.error}</p>
) : null}
<button
type="submit"
disabled={pending}
className="border border-line bg-raised px-4 py-2 font-condensed text-sm text-accent disabled:text-text-dim"
>
{pending ? de.common.loading : de.personnel.create}
</button>
</form>
)
}
function Feld({
id,
label,
required,
minLength,
}: {
id: string
label: string
required?: boolean
minLength?: number
}) {
return (
<div>
<label htmlFor={id} className="font-condensed text-xs text-text-dim">
{label}
</label>
<input
id={id}
name={id}
required={required}
minLength={minLength}
maxLength={120}
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
/>
</div>
)
}
+38
View File
@@ -0,0 +1,38 @@
import type { Metadata } from 'next'
import { db } from '@/lib/db'
import { requirePermission } from '@/lib/auth/current'
import { de } from '@/lib/i18n/de'
import { NewPersonnelForm } from './NewPersonnelForm'
export const metadata: Metadata = { title: de.personnel.createTitle }
export const dynamic = 'force-dynamic'
export default async function NewPersonnelPage() {
const user = await requirePermission('personnel.edit')
const [levels, members] = 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.
db.user.findMany({
where: { personnelFiles: { none: {} } },
orderBy: { displayName: 'asc' },
take: 200,
select: { id: true, displayName: true },
}),
])
return (
<main className="mx-auto max-w-(--container-measure) px-6 py-10">
<h1 className="font-condensed">{de.personnel.createTitle}</h1>
<p className="mt-2 max-w-(--container-measure) text-sm text-text-dim">
{de.personnel.createHint}
</p>
<NewPersonnelForm
members={members}
levels={levels.filter((level) => level.level <= user.permissions.clearanceLevel)}
defaultLevel={Math.min(1, user.permissions.clearanceLevel)}
/>
</main>
)
}
+91
View File
@@ -0,0 +1,91 @@
import type { Metadata } from 'next'
import Link from 'next/link'
import { db } from '@/lib/db'
import { requirePermission } from '@/lib/auth/current'
import { listPersonnelFiles } from '@/lib/personnel/service'
import { de } from '@/lib/i18n/de'
import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
export const metadata: Metadata = { title: de.personnel.listHeading }
export const dynamic = 'force-dynamic'
/**
* Liste der Personalakten.
*
* Wie bei den Fallakten: Suche, Sichtbarkeit und Zählung laufen über dieselbe
* Abfrage. Eine Akte über der Stufe des Lesers taucht weder auf noch in der
* Zahl daneben.
*/
export default async function PersonnelListPage({
searchParams,
}: {
searchParams: Promise<{ q?: string }>
}) {
// Ohne das Recht gibt es die Seite nicht — 404, nicht 403.
const user = await requirePermission('personnel.read')
const { q } = await searchParams
const [{ files, total }, levels] = await Promise.all([
listPersonnelFiles(user.permissions, { query: q }),
db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
])
const levelName = new Map(levels.map((l) => [l.level, l.name]))
const darfAnlegen =
user.permissions.isAdmin || user.permissions.permissions.has('personnel.edit')
return (
<main className="mx-auto max-w-5xl px-6 py-10">
<div className="flex flex-wrap items-baseline justify-between gap-4">
<h1 className="font-condensed">{de.personnel.listHeading}</h1>
<span className="font-mono text-xs text-text-dim">{de.personnel.countLabel(total)}</span>
</div>
<form method="get" className="mt-4 flex flex-wrap items-center gap-3">
<input
type="search"
name="q"
defaultValue={q ?? ''}
placeholder={de.personnel.search}
aria-label={de.personnel.search}
className="w-full max-w-sm border border-line bg-raised px-3 py-2 text-sm"
/>
{darfAnlegen ? (
<Link href="/personalakten/neu" className="ml-auto font-condensed text-xs">
{de.personnel.create}
</Link>
) : null}
</form>
{files.length === 0 ? (
<p className="mt-10 text-text-dim">
{q ? de.personnel.emptySearch : de.personnel.empty}
</p>
) : (
<ul className="mt-6 border-t border-line">
{files.map((akte) => (
<li key={akte.id} className="border-b border-line">
<Link
href={`/personalakten/${akte.id}`}
prefetch
className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
style={classificationEdgeStyle(akte.classification)}
>
<span className="grow">{akte.displayName}</span>
{akte.serviceNumber ? (
<span className="font-mono text-xs text-text-dim">{akte.serviceNumber}</span>
) : null}
{akte.rank ? (
<span className="font-condensed text-2xs text-text-dim">{akte.rank}</span>
) : null}
<StampMark
level={akte.classification}
name={levelName.get(akte.classification) ?? de.common.unknown}
/>
</Link>
</li>
))}
</ul>
)}
</main>
)
}