Harlekin
d2a7910861
Akte, Beteiligte, Dokumente, Änderungen, Export - als eigene Seiten unter einem gemeinsamen Layout, nicht als umgeschaltete Blöcke. Ein Reiter, der im Client nur ein- und ausgeblendet wird, kostet dasselbe wie vorher; nur eigene Seiten trennen den Code wirklich. Der Schnitt folgt der Fachlichkeit: die drei Ebenen aus docs/05 - Kopfdaten, Abschnitte, Verlauf - bleiben zusammen, samt Aktenchat. Das Umfeld der Akte braucht man selten gleichzeitig mit dem Sachstand. Kopf, Stempel und die Knöpfe für Status und Umklassifizierung stehen im Layout und damit auf jedem Reiter. Grösste Route 116,2 statt 119,8 von 120 kB, die neuen Reiter bei 110,7 und 110,9. Damit ist wieder Luft für Phase 9. 48 e2e-Tests, 178 im Web-Paket unverändert grün.
101 lines
3.9 KiB
TypeScript
101 lines
3.9 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
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 { de } from '@/lib/i18n/de'
|
|
import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
|
|
import { allowedTargets, type CaseStatusName } from '@/lib/cases/lifecycle'
|
|
import { CaseActions } from './CaseActions'
|
|
|
|
export const dynamic = 'force-dynamic'
|
|
|
|
/**
|
|
* Kopf und Reiter einer Fallakte.
|
|
*
|
|
* Die Akte ist in Reiter geteilt, und zwar in **eigene Seiten**, nicht in
|
|
* umgeschaltete Blöcke: nur so wird der Code getrennt geladen. Die Fallakte
|
|
* war die dichteste Seite der Anwendung und hatte das Bündelbudget aus
|
|
* docs/09-performance-und-ux.md aufgebraucht — Beteiligte, Verknüpfungen,
|
|
* Dokumente und Anhänge lagen mit auf der Seite, obwohl man sie selten
|
|
* gleichzeitig braucht.
|
|
*
|
|
* Fachlich passt der Schnitt ohnehin: die drei Ebenen aus
|
|
* docs/05-akten-und-vorlagen.md — Kopfdaten, Abschnitte, Verlauf — bleiben
|
|
* zusammen, das Umfeld der Akte bekommt seinen eigenen Platz.
|
|
*/
|
|
export default async function CaseLayout({
|
|
children,
|
|
params,
|
|
}: {
|
|
children: ReactNode
|
|
params: Promise<{ caseNumber: string }>
|
|
}) {
|
|
const user = await requireUser()
|
|
const { caseNumber } = await params
|
|
|
|
const akte = await loadVisibleCase(user.permissions, caseNumber)
|
|
// Kein Zugriff heisst 404, nicht 403: die Existenz ist selbst eine Information.
|
|
if (!akte) notFound()
|
|
|
|
const levels = await db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } })
|
|
const level = levels.find((l) => l.level === akte.classification)
|
|
|
|
const reiter = [
|
|
{ href: '', label: de.case.tabFile },
|
|
{ href: '/beteiligte', label: de.case.tabRelations },
|
|
{ href: '/dokumente', label: de.case.tabDocuments },
|
|
{ href: '/aenderungen', label: de.case.changes },
|
|
{ href: '/export', label: de.export.heading },
|
|
]
|
|
|
|
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-mono text-xs text-text-dim">{akte.caseNumber}</span>
|
|
<StampMark level={akte.classification} name={level?.name ?? de.common.unknown} />
|
|
</div>
|
|
<h1 className="mt-2 font-condensed">{akte.title}</h1>
|
|
<dl className="mt-3 flex flex-wrap gap-x-8 gap-y-1 text-xs text-text-dim">
|
|
<div className="flex gap-2">
|
|
<dt className="font-condensed">{de.case.status}</dt>
|
|
<dd>{de.case.statusNames[akte.status]}</dd>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<dt className="font-condensed">{de.case.type}</dt>
|
|
<dd>{akte.templateKey}</dd>
|
|
</div>
|
|
{akte.dueAt ? (
|
|
<div className="flex gap-2">
|
|
<dt className="font-condensed">{de.case.dueAt}</dt>
|
|
<dd>{akte.dueAt.toLocaleDateString('de-DE')}</dd>
|
|
</div>
|
|
) : null}
|
|
</dl>
|
|
|
|
{/* Statuswechsel und Umklassifizierung gehören zum Kopf und stehen
|
|
deshalb auf jedem Reiter zur Verfügung. */}
|
|
<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>
|
|
|
|
<nav className="mt-8 flex flex-wrap gap-4 border-b border-line pb-2 font-condensed text-xs">
|
|
{reiter.map((eintrag) => (
|
|
<Link key={eintrag.href} href={`/faelle/${akte.caseNumber}${eintrag.href}`}>
|
|
{eintrag.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="mt-8">{children}</div>
|
|
</main>
|
|
)
|
|
}
|