Files
AfiS-Aktensystem/web/app/(app)/admin/protokoll/page.tsx
T
Harlekin d49edeed18 Abstand zur Beschriftung folgt aus der Polsterung des Feldes
„Zwischen der Auswahl und dem Text ist kaum Platz" - und das stimmte überall,
nicht nur an der einen Stelle. Der Grund war messbar: der Abstand zur
Beschriftung betrug 8 px, die Polsterung innerhalb des Feldes 11,2 px. Das Wort
stand also näher am Rahmen als der Inhalt des Rahmens an demselben Rahmen, und
genau daran erkennt das Auge einen zu engen Satz.

Die Regel heisst jetzt: der Abstand nach aussen ist grösser als die Polsterung
nach innen. Sie steht einmal in globals.css als .field-label, .field-row und
.field-hint - vorher war sie ein Dutzend Mal als mt-1, mt-1.5 oder gap-2 an den
Aufrufstellen verteilt, mit drei verschiedenen Werten, von denen keiner
reichte. 33 Stellen umgestellt.

Der Test prüft die Regel und nicht die Zahl: er liest die Polsterung von .field
aus dem CSS und verlangt, dass beide Abstände darüber liegen. Gegengeprobt mit
einem zu kleinen Wert, dann schlägt er an.

Nachgemessen im Browser mit dem gebauten CSS: 8 px senkrecht gegen 5,6 px
Innenpolsterung, 13,6 px waagerecht gegen 11,2 px.
2026-09-03 20:28:42 +02:00

243 lines
8.1 KiB
TypeScript

import type { Metadata } from 'next'
import Link from 'next/link'
import { requirePermission } from '@/lib/auth/current'
import { auditActions, auditActors, queryAuditLog, type AuditRow } from '@/lib/audit/query'
import { de } from '@/lib/i18n/de'
export const metadata: Metadata = { title: de.audit.heading }
export const dynamic = 'force-dynamic'
type Params = Record<string, string | string[] | undefined>
/**
* Das Zugriffsprotokoll.
*
* Es beantwortet die eine Frage, die eine Abteilungsleitung an ein Aktensystem
* hat: **wer hat was wo getan.** Nach harter Regel 3 aus CLAUDE.md entsteht
* die Spur bei jeder schreibenden Aktion und bei jedem Lesezugriff ab Stufe 3,
* ohne Ausnahme und ohne Möglichkeit, sie zu unterdrücken.
*
* 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.
*
* Der Zustand steht in der Adresse, wie bei der Suche: teilbar, und der
* Zurück-Knopf tut das Richtige.
*/
export default async function AuditLogPage({
searchParams,
}: {
searchParams: Promise<Params>
}) {
await requirePermission('audit.read')
const params = await searchParams
const wert = (name: string): string | undefined => {
const roh = params[name]
const text = (Array.isArray(roh) ? roh[0] : roh)?.trim()
return text ? text : undefined
}
const filter = {
actorId: wert('wer'),
action: wert('was'),
targetType: wert('art'),
targetId: wert('ziel'),
from: datum(wert('ab')),
to: datum(wert('bis'), true),
before: wert('vor') ? BigInt(wert('vor')!) : undefined,
}
const [{ rows, more }, akteure, aktionen] = await Promise.all([
queryAuditLog(filter),
auditActors(),
auditActions(),
])
const arten = [...new Set(rows.map((zeile) => zeile.targetType))].sort()
const gefiltert = Boolean(
filter.actorId || filter.action || filter.targetType || filter.targetId || filter.from || filter.to,
)
return (
<section>
<h2 className="font-condensed">{de.audit.heading}</h2>
<p className="mt-1 max-w-(--container-measure) text-2xs text-text-dim">{de.audit.intro}</p>
<form method="get" className="mt-6 flex flex-wrap items-end gap-3">
<label className="block">
<span className="field-label">{de.audit.filterActor}</span>
<select name="wer" defaultValue={filter.actorId ?? ''} className="field text-2xs">
<option value="">{de.audit.all}</option>
{akteure.map((akteur) => (
<option key={akteur.id} value={akteur.id}>
{akteur.name}
</option>
))}
</select>
</label>
<label className="block">
<span className="field-label">{de.audit.filterAction}</span>
<select name="was" defaultValue={filter.action ?? ''} className="field text-2xs">
<option value="">{de.audit.all}</option>
{aktionen.map((aktion) => (
<option key={aktion} value={aktion}>
{de.audit.actions[aktion] ?? aktion}
</option>
))}
</select>
</label>
<label className="block">
<span className="field-label">{de.audit.filterFrom}</span>
<input
type="date"
name="ab"
defaultValue={wert('ab') ?? ''}
className="field font-mono text-2xs"
/>
</label>
<label className="block">
<span className="field-label">{de.audit.filterTo}</span>
<input
type="date"
name="bis"
defaultValue={wert('bis') ?? ''}
className="field font-mono text-2xs"
/>
</label>
{filter.targetType ? (
<input type="hidden" name="art" value={filter.targetType} />
) : null}
{filter.targetId ? <input type="hidden" name="ziel" value={filter.targetId} /> : null}
<button type="submit" className="btn btn-sm btn-primary">
{de.audit.apply}
</button>
{gefiltert ? (
<Link href="/admin/protokoll" className="btn btn-sm">
{de.audit.reset}
</Link>
) : null}
</form>
{arten.length > 1 || filter.targetType ? (
<div className="mt-3 flex flex-wrap gap-2">
<Link
href={adresse(params, { art: undefined, vor: undefined })}
aria-current={filter.targetType ? undefined : 'page'}
className="btn btn-sm"
>
{de.audit.all}
</Link>
{arten.map((art) => (
<Link
key={art}
href={adresse(params, { art, vor: undefined })}
aria-current={filter.targetType === art ? 'page' : undefined}
className="btn btn-sm"
>
{de.audit.targets[art] ?? art}
</Link>
))}
</div>
) : null}
{rows.length === 0 ? (
<p className="mt-8 text-text-dim">{de.audit.empty}</p>
) : (
<div className="mt-6 overflow-x-auto">
<table className="w-full border-collapse text-2xs">
<thead>
<tr className="border-b border-line text-left">
<th className="py-2 pr-4">{de.audit.when}</th>
<th className="py-2 pr-4">{de.audit.who}</th>
<th className="py-2 pr-4">{de.audit.what}</th>
<th className="py-2 pr-4">{de.audit.where}</th>
<th className="py-2">{de.audit.clearance}</th>
</tr>
</thead>
<tbody>
{rows.map((zeile) => (
<Zeile key={zeile.id} zeile={zeile} params={params} />
))}
</tbody>
</table>
</div>
)}
{more && rows.length > 0 ? (
<div className="mt-6">
<Link
href={adresse(params, { vor: rows[rows.length - 1]!.id })}
className="btn btn-sm"
>
{de.audit.older}
</Link>
</div>
) : null}
</section>
)
}
function Zeile({ zeile, params }: { zeile: AuditRow; params: Params }) {
return (
<tr className="border-b border-line align-baseline">
<td className="py-2 pr-4 font-mono whitespace-nowrap text-text-dim">
{zeile.at.toLocaleString('de-DE')}
</td>
<td className="py-2 pr-4">
<Link
href={adresse(params, { wer: zeile.actorId, vor: undefined })}
title={de.audit.ofUser}
className="no-underline"
>
{zeile.actorName}
</Link>
</td>
<td className="py-2 pr-4">{de.audit.actions[zeile.action] ?? zeile.action}</td>
<td className="py-2 pr-4">
<span className="text-text-dim">
{de.audit.targets[zeile.targetType] ?? zeile.targetType}
</span>{' '}
{zeile.targetHref ? (
<Link href={zeile.targetHref} className="font-mono">
{zeile.targetLabel}
</Link>
) : (
<span className="font-mono text-text-dim">{zeile.targetLabel ?? de.audit.gone}</span>
)}
</td>
<td className="py-2 font-mono text-text-dim">{zeile.clearanceAtTime}</td>
</tr>
)
}
/** Datum aus dem Formular. „Bis" meint den ganzen Tag, nicht Mitternacht. */
function datum(text: string | undefined, endeDesTages = false): Date | undefined {
if (!text) return undefined
const wert = new Date(text)
if (Number.isNaN(wert.getTime())) return undefined
if (endeDesTages) wert.setHours(23, 59, 59, 999)
return wert
}
/** Die eigene Adresse mit geänderten Parametern. */
function adresse(params: Params, aenderungen: Record<string, string | undefined>): string {
const such = new URLSearchParams()
for (const [name, roh] of Object.entries(params)) {
const text = Array.isArray(roh) ? roh[0] : roh
if (text) such.set(name, text)
}
for (const [name, wert] of Object.entries(aenderungen)) {
if (wert === undefined) such.delete(name)
else such.set(name, wert)
}
const rest = such.toString()
return rest ? `/admin/protokoll?${rest}` : '/admin/protokoll'
}