„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.
243 lines
8.1 KiB
TypeScript
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'
|
|
}
|