Phase 2 abgeschlossen: nachträgliche Änderungen, Grabstein, Richtlinie

Der Kern von harter Regel 2. Jede Änderung an einem Verlaufseintrag schreibt
den vorherigen Stand nach CaseEntryVersion und erhöht die Versionsnummer.
Autor und Entstehungszeit bleiben unangetastet, geprüft gegen die Datenbank.

Die Karenzzeit wird serverseitig aus AppSetting gelesen, nie aus dem Request.
Eine Änderung darin wird versioniert und protokolliert, aber nicht sichtbar
markiert — ein Tippfehler, zwei Minuten später korrigiert, soll die Akte nicht
mit "bearbeitet"-Marken zupflastern. Alles danach ist markiert und verlangt
eine Begründung, ebenso jede Änderung an einem fremden Eintrag.

Die Stelle, an der eine naive Umsetzung leckt, hat einen eigenen Test: wird
minClearance eines Eintrags angehoben, erben alle bestehenden Versionen den
neuen Wert. Sonst liest jemand mit niedrigerer Stufe den ursprünglichen Text
einfach in der Historie.

Zurückziehen setzt einen Grabstein mit Pflichtbegründung, der Text bleibt in
der Datenbank. Rückgängig machen geht und wird wiederum protokolliert.
Systemeinträge sind von jeder Änderung ausgenommen.

Dazu die Änderungsübersicht als Reiter an der Akte — sichtbar für alle, die
die Akte lesen dürfen, nicht nur für die Leitung — und die Adminseite für die
Änderungsrichtlinie.

Zwei Testprobleme dabei behoben: AppSetting ist eine einzige Zeile für die
ganze Anwendung, deshalb laufen die Web-Tests jetzt nacheinander, und die
Testdatenbank startet bei jedem Lauf im Auslieferungszustand. Vorher hing das
Ergebnis davon ab, was der vorige Lauf hinterlassen hatte.

63 Tests, zweimal hintereinander grün. Bündel bei 110,5 kB von 120.

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

web/app/(app)/faelle/[caseNumber]/CaseActions.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { de } from '@/lib/i18n/de'
+import { changeStatusAction, reclassifyAction } from '../actions'
+
+/**
+ * Statuswechsel und Umklassifizierung.
+ *
+ * Bewusst **nicht** optimistisch: beides ist folgenreich und teils nicht
+ * umkehrbar. Stattdessen ein sofortiger Wartezustand am Knopf und eine klare
+ * Rückmeldung. Siehe docs/09-performance-und-ux.md.
+ */
+export function CaseActions({
+  caseNumber,
+  classification,
+  statusTargets,
+  levels,
+  maxLevel,
+}: {
+  caseNumber: string
+  classification: number
+  statusTargets: string[]
+  levels: { level: number; name: string }[]
+  maxLevel: number
+}) {
+  const [nextStatus, setNextStatus] = useState(statusTargets[0] ?? '')
+  const [statusReason, setStatusReason] = useState('')
+  const [nextLevel, setNextLevel] = useState(classification)
+  const [levelReason, setLevelReason] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [pending, startTransition] = useTransition()
+
+  const lowering = nextLevel < classification
+
+  function run(action: () => Promise<{ ok: boolean; error?: string }>, confirmText: string) {
+    if (!confirm(confirmText)) return
+    setError(null)
+    startTransition(async () => {
+      const result = await action()
+      if (!result.ok) setError(result.error ?? de.case.errors.default!)
+    })
+  }
+
+  return (
+    <div className="mt-6 flex flex-wrap gap-x-10 gap-y-5 border-t border-line pt-5 text-xs">
+      {statusTargets.length > 0 ? (
+        <div>
+          <p className="font-condensed text-text-dim">{de.case.statusChange}</p>
+          <div className="mt-1.5 flex flex-wrap items-center gap-2">
+            <select
+              value={nextStatus}
+              onChange={(event) => setNextStatus(event.target.value)}
+              className="border border-line bg-raised px-2 py-1"
+            >
+              {statusTargets.map((target) => (
+                <option key={target} value={target}>
+                  {de.case.statusNames[target] ?? target}
+                </option>
+              ))}
+            </select>
+            <input
+              value={statusReason}
+              onChange={(event) => setStatusReason(event.target.value)}
+              placeholder={de.entry.changeReason}
+              className="w-56 border border-line bg-raised px-2 py-1"
+            />
+            <button
+              type="button"
+              disabled={pending || !nextStatus}
+              onClick={() =>
+                run(
+                  () =>
+                    changeStatusAction({
+                      caseNumber,
+                      to: nextStatus,
+                      reason: statusReason || undefined,
+                    }),
+                  `${de.case.statusChange}: ${de.case.statusNames[nextStatus] ?? nextStatus}?`,
+                )
+              }
+              className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
+            >
+              {pending ? de.case.saving : de.common.save}
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      <div>
+        <p className="font-condensed text-text-dim">{de.case.reclassify}</p>
+        <div className="mt-1.5 flex flex-wrap items-center gap-2">
+          <select
+            value={nextLevel}
+            onChange={(event) => setNextLevel(Number(event.target.value))}
+            className="border border-line bg-raised px-2 py-1"
+          >
+            {levels
+              .filter((level) => level.level <= maxLevel)
+              .map((level) => (
+                <option key={level.level} value={level.level}>
+                  {level.level} · {level.name}
+                </option>
+              ))}
+          </select>
+          {/* Eine Herabstufung macht Inhalte für Leute sichtbar, die sie vorher
+              nicht sehen durften. Deshalb ist die Begründung Pflicht. */}
+          {lowering ? (
+            <input
+              value={levelReason}
+              onChange={(event) => setLevelReason(event.target.value)}
+              placeholder={de.case.reclassifyReason}
+              className="w-64 border border-line bg-raised px-2 py-1"
+            />
+          ) : null}
+          <button
+            type="button"
+            disabled={pending || nextLevel === classification}
+            onClick={() =>
+              run(
+                () =>
+                  reclassifyAction({
+                    caseNumber,
+                    to: nextLevel,
+                    reason: levelReason || undefined,
+                  }),
+                `${de.case.reclassify}: ${nextLevel}?`,
+              )
+            }
+            className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
+          >
+            {pending ? de.case.saving : de.common.save}
+          </button>
+        </div>
+      </div>
+
+      {error ? <p className="w-full font-condensed text-2xs text-stamp-4">{error}</p> : null}
+    </div>
+  )
+}

web/app/(app)/faelle/[caseNumber]/EntryActions.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { de } from '@/lib/i18n/de'
+import { editEntryAction, restoreEntryAction, retractEntryAction } from '../actions'
+
+/**
+ * Ändern und Zurückziehen eines Verlaufseintrags.
+ *
+ * Nicht optimistisch: die Begründung gehört erst abgeschickt und bestätigt,
+ * bevor der neue Text steht. Siehe docs/09-performance-und-ux.md.
+ */
+export function EntryActions({
+  entryId,
+  caseNumber,
+  body,
+  retracted,
+  canEdit,
+  canRetract,
+}: {
+  entryId: string
+  caseNumber: string
+  body: string
+  retracted: boolean
+  canEdit: boolean
+  canRetract: boolean
+}) {
+  const [mode, setMode] = useState<'idle' | 'edit' | 'retract'>('idle')
+  const [draft, setDraft] = useState(body)
+  const [reason, setReason] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [pending, startTransition] = useTransition()
+
+  function run(action: () => Promise<{ ok: boolean; error?: string }>) {
+    setError(null)
+    startTransition(async () => {
+      const result = await action()
+      if (result.ok) {
+        setMode('idle')
+        setReason('')
+      } else {
+        setError(result.error ?? de.case.errors.default!)
+      }
+    })
+  }
+
+  if (retracted) {
+    if (!canRetract) return null
+    return (
+      <div className="mt-2 flex flex-wrap items-center gap-2 text-2xs">
+        <input
+          value={reason}
+          onChange={(event) => setReason(event.target.value)}
+          placeholder={de.entry.retractReason}
+          className="w-64 border border-line bg-raised px-2 py-1"
+        />
+        <button
+          type="button"
+          disabled={pending}
+          onClick={() => run(() => restoreEntryAction({ entryId, caseNumber, reason }))}
+          className="font-condensed text-accent disabled:text-text-dim"
+        >
+          {de.entry.restore}
+        </button>
+        {error ? <span className="text-stamp-4">{error}</span> : null}
+      </div>
+    )
+  }
+
+  if (mode === 'idle') {
+    if (!canEdit && !canRetract) return null
+    return (
+      <div className="mt-1.5 flex gap-3 text-2xs">
+        {canEdit ? (
+          <button type="button" onClick={() => setMode('edit')} className="font-condensed text-accent">
+            {de.entry.edit}
+          </button>
+        ) : null}
+        {canRetract ? (
+          <button
+            type="button"
+            onClick={() => setMode('retract')}
+            className="font-condensed text-accent"
+          >
+            {de.entry.retract}
+          </button>
+        ) : null}
+      </div>
+    )
+  }
+
+  return (
+    <div className="mt-2 max-w-(--container-measure) text-2xs">
+      {mode === 'edit' ? (
+        <textarea
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          rows={4}
+          className="block w-full border border-line bg-raised px-3 py-2 text-sm"
+        />
+      ) : null}
+
+      <input
+        value={reason}
+        onChange={(event) => setReason(event.target.value)}
+        placeholder={mode === 'edit' ? de.entry.changeReason : de.entry.retractReason}
+        className="mt-2 block w-full border border-line bg-raised px-2 py-1"
+      />
+
+      <div className="mt-2 flex items-center gap-3">
+        <button
+          type="button"
+          disabled={pending}
+          onClick={() =>
+            run(() =>
+              mode === 'edit'
+                ? editEntryAction({ entryId, caseNumber, body: draft, changeReason: reason })
+                : retractEntryAction({ entryId, caseNumber, reason }),
+            )
+          }
+          className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
+        >
+          {pending ? de.case.saving : mode === 'edit' ? de.entry.editSave : de.entry.retract}
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            setMode('idle')
+            setDraft(body)
+            setReason('')
+            setError(null)
+          }}
+          className="font-condensed text-text-dim"
+        >
+          {de.entry.cancel}
+        </button>
+        {error ? <span className="text-stamp-4">{error}</span> : null}
+      </div>
+    </div>
+  )
+}

web/app/(app)/faelle/[caseNumber]/aenderungen/page.tsx

@@ -0,0 +1,95 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { loadVisibleCase } from '@/lib/cases/service'
+import { loadChangeHistory } from '@/lib/cases/entryService'
+import { de } from '@/lib/i18n/de'
+
+export const metadata: Metadata = { title: de.entry.changesHeading }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Änderungsübersicht als eigener Reiter an der Akte.
+ *
+ * Für die Abteilungsleitung ist das die Ansicht, mit der sie im Zweifel prüft,
+ * ob an einer Akte nachträglich gedreht wurde. Sichtbar für alle, die die Akte
+ * lesen dürfen — nicht nur für die Leitung. Das ist der ganze Sinn der Sache.
+ */
+export default async function ChangesPage({
+  params,
+}: {
+  params: Promise<{ caseNumber: string }>
+}) {
+  const user = await requireUser()
+  const { caseNumber } = await params
+
+  const akte = await loadVisibleCase(user.permissions, caseNumber)
+  if (!akte) notFound()
+
+  const versionen = await loadChangeHistory(user.permissions, akte.id)
+
+  const namen = new Map(
+    (
+      await db.user.findMany({
+        where: { id: { in: [...new Set(versionen.map((v) => v.editedById))] } },
+        select: { id: true, displayName: true },
+      })
+    ).map((u) => [u.id, u.displayName]),
+  )
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-10">
+      <p className="font-mono text-xs text-text-dim">
+        <Link href={`/faelle/${akte.caseNumber}`}>{akte.caseNumber}</Link>
+      </p>
+      <h1 className="mt-2 font-condensed">{de.entry.changesHeading}</h1>
+      <p className="mt-2 max-w-(--container-measure) text-text-dim">{de.entry.changesIntro}</p>
+
+      {versionen.length === 0 ? (
+        <p className="mt-8 text-text-dim">{de.entry.changesEmpty}</p>
+      ) : (
+        <ol className="mt-8 border-t border-line">
+          {versionen.map((version) => (
+            <li key={version.id} className="border-b border-line py-5">
+              <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 text-2xs text-text-dim">
+                <span className="font-condensed">
+                  {de.entry.versionLabel(version.version)} → {version.version + 1}
+                </span>
+                <span className="font-mono">
+                  {namen.get(version.editedById) ?? version.editedById}
+                </span>
+                <time dateTime={version.editedAt.toISOString()}>
+                  {version.editedAt.toLocaleString('de-DE')}
+                </time>
+              </div>
+
+              {version.changeReason ? (
+                <p className="mt-1.5 text-sm">
+                  <span className="font-condensed text-text-dim">{de.entry.changeReason}: </span>
+                  {version.changeReason}
+                </p>
+              ) : null}
+
+              <div className="mt-3 grid gap-4 md:grid-cols-2">
+                <div>
+                  <p className="font-condensed text-2xs text-text-dim">{de.entry.before}</p>
+                  <p className="mt-1 border-l-(length:--spacing-edge) border-line pl-3 text-sm whitespace-pre-wrap">
+                    {version.body}
+                  </p>
+                </div>
+                <div>
+                  <p className="font-condensed text-2xs text-text-dim">{de.entry.after}</p>
+                  <p className="mt-1 border-l-(length:--spacing-edge) border-steel pl-3 text-sm whitespace-pre-wrap">
+                    {version.entry.body}
+                  </p>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ol>
+      )}
+    </main>
+  )
+}

web/app/(app)/faelle/[caseNumber]/page.tsx

@@ -10,6 +10,12 @@ import { de } from '@/lib/i18n/de'
 import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
 import { SkeletonLine } from '@/components/Skeleton'
 import { EntryComposer } from './EntryComposer'
+import { CaseActions } from './CaseActions'
+import { EntryActions } from './EntryActions'
+import { allowedTargets, type CaseStatusName } from '@/lib/cases/lifecycle'
+import { evaluateEntryEdit, canRetract } from '@/lib/cases/entryPolicy'
+import Link from 'next/link'
+import type { EffectivePermissions } from '@/lib/auth/permissions'
 
 export const dynamic = 'force-dynamic'
 
@@ -27,25 +33,27 @@ export async function generateMetadata({
  * Kopfdaten stehen sofort, der Nutzer liest schon, während der Rest lädt.
  * Siehe docs/09-performance-und-ux.md.
  */
-async function Timeline({ caseId, userId, clearanceLevel, isAdmin }: {
+async function Timeline({
+  caseId,
+  caseNumber,
+  permissions,
+}: {
   caseId: string
-  userId: string
-  clearanceLevel: number
-  isAdmin: boolean
+  caseNumber: string
+  permissions: EffectivePermissions
 }) {
+  const settings = await db.appSetting.findUnique({ where: { id: 1 } })
+  const policy = {
+    entryEditPolicy: (settings?.entryEditPolicy ?? 'GRACE_WINDOW') as
+      | 'APPEND_ONLY'
+      | 'GRACE_WINDOW'
+      | 'OPEN',
+    entryEditGraceMinutes: settings?.entryEditGraceMinutes ?? 15,
+    entryEditMarkGrace: settings?.entryEditMarkGrace ?? false,
+  }
+
   const entries = await db.caseEntry.findMany({
-    where: {
-      AND: [
-        visibleEntryWhere({
-          userId,
-          clearanceLevel,
-          isAdmin,
-          permissions: new Set(),
-          hasMembership: true,
-        }),
-        { caseId },
-      ],
-    },
+    where: { AND: [visibleEntryWhere(permissions), { caseId }] },
     orderBy: [{ createdAt: 'desc' }, { id: 'desc' }],
     take: 100,
     select: {
@@ -84,7 +92,12 @@ async function Timeline({ caseId, userId, clearanceLevel, isAdmin }: {
               {entry.createdAt.toLocaleString('de-DE')}
             </time>
             {entry.editVisible && entry.editedAt ? (
-              <span className="font-condensed">{de.entry.edited(entry.version)}</span>
+              <Link
+                href={`/faelle/${caseNumber}/aenderungen`}
+                className="font-condensed"
+              >
+                {de.entry.edited(entry.version)}
+              </Link>
             ) : null}
           </div>
 
@@ -101,6 +114,15 @@ async function Timeline({ caseId, userId, clearanceLevel, isAdmin }: {
               {entry.body}
             </p>
           )}
+
+          <EntryActions
+            entryId={entry.id}
+            caseNumber={caseNumber}
+            body={entry.body}
+            retracted={entry.retractedAt !== null}
+            canEdit={evaluateEntryEdit(permissions, entry, policy).ok}
+            canRetract={canRetract(permissions, entry)}
+          />
         </li>
       ))}
     </ol>
@@ -131,9 +153,8 @@ export default async function CasePage({
     })
   }
 
-  const level = await db.clearanceLevelConfig.findUnique({
-    where: { level: akte.classification },
-  })
+  const levels = await db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } })
+  const level = levels.find((l) => l.level === akte.classification)
 
   return (
     <main className="mx-auto max-w-5xl px-6 py-10">
@@ -162,11 +183,21 @@ export default async function CasePage({
             </div>
           ) : null}
         </dl>
+        <CaseActions
+          caseNumber={akte.caseNumber}
+          classification={akte.classification}
+          statusTargets={allowedTargets(akte.status as CaseStatusName)}
+          levels={levels.map((l) => ({ level: l.level, name: l.name }))}
+          maxLevel={user.permissions.clearanceLevel}
+        />
       </header>
 
-      <section className="mt-10">
-        <h2 className="font-condensed">{de.case.timeline}</h2>
+      <nav className="mt-8 flex gap-4 border-b border-line pb-2 font-condensed text-xs">
+        <span className="text-text-dim">{de.case.timeline}</span>
+        <Link href={`/faelle/${akte.caseNumber}/aenderungen`}>{de.case.changes}</Link>
+      </nav>
 
+      <section className="mt-6">
         <div className="mt-4">
           <EntryComposer caseNumber={akte.caseNumber} />
         </div>
@@ -186,9 +217,8 @@ export default async function CasePage({
           >
             <Timeline
               caseId={akte.id}
-              userId={user.id}
-              clearanceLevel={user.permissions.clearanceLevel}
-              isAdmin={user.permissions.isAdmin}
+              caseNumber={akte.caseNumber}
+              permissions={user.permissions}
             />
           </Suspense>
         </div>