Phase 9 abgeschlossen: Übersicht, Beobachtungsliste, helles Thema, Messung

Die Übersicht beantwortet vier Fragen, die man morgens hat: woran arbeite ich,
was ist fällig, wo hat jemand geschrieben, was hat sich getan. Jede Liste
läuft durch visibleCaseWhere - das ist der Ort, an dem eine unachtsame
Abfrage am ehesten eine Akte verrät. Ein Test prüft jede einzeln gegen eine zu
hoch eingestufte Akte. Der bisherige Inhalt ("Dein Zugang") steht jetzt unter
/zugang.

Beobachten ist eine Merkliste, kein Recht: nur was sichtbar ist, lässt sich
merken, und steigt eine Akte später über die eigene Stufe, verschwindet sie
aus der Liste, ohne dass jemand aufräumt.

Das helle Thema tauscht nur die semantische Ebene; die Grundpalette bleibt.
Die Klassifizierungsfarben sind für hellen Grund eine Spur dunkler, im Farbton
aber dieselben - eine Stufe muss in beiden Themen wiedererkennbar sein. Drei
Zustände, "wie das System" ist der Auslieferungszustand, und ein Skript im
Kopf setzt die Wahl, bevor das erste Mal gemalt wird.

Die Messung misst nicht den Nutzer. web-vitals schickt Zahlen und das
Routenmuster, keine Kennung und keinen konkreten Pfad: wer wann welche Akte
geöffnet hat, steht im Zugriffsprotokoll, und eine zweite Spur daneben wäre
eine Überwachungsfunktion ohne Auftrag. Ausgewertet wird Median und 75.
Perzentil, nicht der Mittelwert.

Mobil: die breiten Tabellen scrollen in sich, statt die Seite breiter zu
machen. Ein e2e-Test hält fest, dass keine Seite waagerecht überläuft.

scripts/restore-test.sh spielt eine Sicherung in eine Wegwerf-Datenbank und
prüft ausdrücklich, dass Regeln und Trigger mitkommen: eine Wiederherstellung
ohne entry_no_delete wäre eine Datenbank ohne die Zusicherung, um derentwillen
das System gebaut wird. Einmal durchgespielt, alles angekommen.

186 Tests im Web-Paket, 17 in der Datenbank, 7 im Worker, 54 e2e.
Grösste Route 116,2 von 120 kB.

web/app/(app)/uebersicht/page.tsx

@@ -1,48 +1,47 @@
 import type { Metadata } from 'next'
+import Link from 'next/link'
 import { db } from '@/lib/db'
 import { requireUser } from '@/lib/auth/current'
-import { de } from '@/lib/i18n/de'
-import { PERMISSIONS } from '@/lib/auth/permissions'
-import { StampMark } from '@/components/StampMark'
+import { loadDashboard } from '@/lib/dashboard/load'
 import { pendingApprovals } from '@/lib/export/service'
+import { de } from '@/lib/i18n/de'
+import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
 import { Approvals } from '../export/Approvals'
 
-export const metadata: Metadata = { title: de.overview.heading }
+export const metadata: Metadata = { title: de.dashboard.heading }
 export const dynamic = 'force-dynamic'
 
 /**
- * Zwischenstand aus TASKS.md Phase 1: zeigt Name, Rollen, errechnete Stufe und
- * Rechte. Das ist die Seite, an der die Abteilungsleitung nachvollziehen kann,
- * warum jemand etwas sieht oder eben nicht.
+ * Die Übersicht: vier Fragen, die man morgens hat.
+ *
+ * Woran arbeite ich, was ist fällig, wo hat jemand geschrieben, was hat sich
+ * getan. Jede Liste läuft durch dieselbe Sichtbarkeitsprüfung wie die
+ * Fallliste — das ist der Ort, an dem eine unachtsame Abfrage am ehesten eine
+ * Akte verrät, die man nicht sehen darf.
  */
-export default async function OverviewPage() {
+export default async function DashboardPage() {
   const user = await requireUser()
 
-  const [roles, level] = await Promise.all([
-    db.userRole.findMany({
-      where: { userId: user.id },
-      select: { discordRoleId: true },
-    }),
-    db.clearanceLevelConfig.findUnique({ where: { level: user.permissions.clearanceLevel } }),
+  const [daten, levels, offen] = await Promise.all([
+    loadDashboard(user.permissions),
+    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
+    pendingApprovals(user.permissions),
   ])
-
-  const mappings = await db.roleMapping.findMany({
-    where: { discordRoleId: { in: roles.map((r) => r.discordRoleId) } },
-    orderBy: [{ category: 'asc' }, { sortOrder: 'desc' }],
-  })
-  const byId = new Map(mappings.map((m) => [m.discordRoleId, m]))
-
-  const granted = [...user.permissions.permissions].sort()
-
-  // Offene Exportfreigaben stehen hier, weil die Leitung diese Seite ohnehin
-  // öffnet. Eine Anfrage, die niemand sieht, ist keine Freigabe.
-  const offen = await pendingApprovals(user.permissions)
+  const levelName = new Map(levels.map((l) => [l.level, l.name]))
   const beschriftet = await beschrifte(offen)
+  const heute = new Date()
 
   return (
-    <main className="mx-auto max-w-(--container-measure) px-6 py-10">
+    <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.dashboard.heading}</h1>
+        <Link href="/zugang" className="font-condensed text-xs">
+          {de.dashboard.access}
+        </Link>
+      </div>
+
       {beschriftet.length > 0 ? (
-        <section className="mb-10 border border-stamp-3 p-4">
+        <section className="mt-8 border border-stamp-3 p-4">
           <h2 className="font-condensed text-stamp-3">{de.export.approvals}</h2>
           <div className="mt-3">
             <Approvals jobs={beschriftet} />
@@ -50,63 +49,152 @@ export default async function OverviewPage() {
         </section>
       ) : null}
 
-      <h1 className="font-condensed">{de.overview.heading}</h1>
-      <p className="mt-2 text-text-dim">{de.overview.intro}</p>
+      <div className="mt-10 grid gap-10 md:grid-cols-2">
+        <Block titel={de.dashboard.mine} leer={de.dashboard.mineEmpty} eintraege={daten.meine}>
+          {(akte) => <Akte akte={akte} levelName={levelName} />}
+        </Block>
 
-      <dl className="mt-8 grid grid-cols-[auto_1fr] gap-x-6 gap-y-3 text-sm">
-        <dt className="font-condensed text-text-dim">{de.overview.person}</dt>
-        <dd>{user.displayName}</dd>
+        <Block titel={de.dashboard.due} leer={de.dashboard.dueEmpty} eintraege={daten.fristen}>
+          {(akte) => (
+            <Akte
+              akte={akte}
+              levelName={levelName}
+              zusatz={
+                akte.dueAt
+                  ? akte.dueAt < heute
+                    ? de.dashboard.overdue
+                    : de.dashboard.dueAt(akte.dueAt.toLocaleDateString('de-DE'))
+                  : undefined
+              }
+              dringend={Boolean(akte.dueAt && akte.dueAt < heute)}
+            />
+          )}
+        </Block>
 
-        <dt className="font-condensed text-text-dim">{de.overview.discordId}</dt>
-        <dd className="font-mono text-xs">{user.id}</dd>
+        <section>
+          <h2 className="font-condensed">{de.dashboard.unread}</h2>
+          {daten.ungelesen.length === 0 ? (
+            <p className="mt-4 text-text-dim">{de.dashboard.unreadEmpty}</p>
+          ) : (
+            <ul className="mt-4 border-t border-line">
+              {daten.ungelesen.map((eintrag) => (
+                <li key={`${eintrag.scopeType}:${eintrag.scopeId}`} className="border-b border-line">
+                  <Link
+                    href={eintrag.href}
+                    prefetch
+                    className="flex items-baseline gap-4 py-2 text-text no-underline"
+                  >
+                    <span className="font-mono text-xs text-text-dim">{eintrag.label}</span>
+                    <span className="grow font-condensed text-2xs text-accent">
+                      {de.dashboard.unreadCount(eintrag.count)}
+                    </span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
 
-        <dt className="font-condensed text-text-dim">{de.overview.clearance}</dt>
-        <dd>
-          <StampMark
-            level={user.permissions.clearanceLevel}
-            name={level?.name ?? de.common.unknown}
-          />
-        </dd>
-      </dl>
+        <Block
+          titel={de.dashboard.watched}
+          leer={de.dashboard.watchedEmpty}
+          eintraege={daten.beobachtet}
+        >
+          {(akte) => <Akte akte={akte} levelName={levelName} />}
+        </Block>
 
-      {user.permissions.isAdmin ? (
-        <p className="mt-6 border-l-(length:--spacing-edge) border-stamp-5 pl-3 text-xs text-text-dim">
-          {de.overview.bootstrapAdmin}
-        </p>
-      ) : null}
+        <section className="md:col-span-2">
+          <h2 className="font-condensed">{de.dashboard.recent}</h2>
+          {daten.zuletzt.length === 0 ? (
+            <p className="mt-4 text-text-dim">{de.dashboard.recentEmpty}</p>
+          ) : (
+            <ul className="mt-4 border-t border-line">
+              {daten.zuletzt.map((akte) => (
+                <li key={akte.id} className="border-b border-line">
+                  <Akte
+                    akte={akte}
+                    levelName={levelName}
+                    zusatz={akte.updatedAt.toLocaleDateString('de-DE')}
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      </div>
+    </main>
+  )
+}
 
-      <h2 className="mt-10 font-condensed">{de.overview.roles}</h2>
-      {roles.length === 0 ? (
-        <p className="mt-2 text-text-dim">{de.overview.noRoles}</p>
+type Fall = {
+  id: string
+  caseNumber: string
+  title: string
+  status: string
+  classification: number
+  updatedAt: Date
+  dueAt?: Date | null
+}
+
+function Block({
+  titel,
+  leer,
+  eintraege,
+  children,
+}: {
+  titel: string
+  leer: string
+  eintraege: Fall[]
+  children: (akte: Fall) => React.ReactNode
+}) {
+  return (
+    <section>
+      <h2 className="font-condensed">{titel}</h2>
+      {eintraege.length === 0 ? (
+        <p className="mt-4 text-text-dim">{leer}</p>
       ) : (
-        <ul className="mt-3 space-y-1.5 text-sm">
-          {roles.map((role) => {
-            const mapping = byId.get(role.discordRoleId)
-            return (
-              <li key={role.discordRoleId} className="flex flex-wrap items-baseline gap-2">
-                <span>{mapping?.label ?? role.discordRoleId}</span>
-                <span className="font-condensed text-2xs text-text-dim">
-                  {mapping
-                    ? `${de.roleAdmin.categories[mapping.category]} · ${de.clearance.level(mapping.clearanceLevel)}`
-                    : de.overview.unmapped}
-                </span>
-              </li>
-            )
-          })}
-        </ul>
-      )}
-
-      <h2 className="mt-10 font-condensed">{de.overview.permissions}</h2>
-      {granted.length === 0 ? (
-        <p className="mt-2 text-text-dim">{de.overview.noPermissions}</p>
-      ) : (
-        <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 font-mono text-xs">
-          {PERMISSIONS.filter((p) => granted.includes(p)).map((permission) => (
-            <li key={permission}>{permission}</li>
+        <ul className="mt-4 border-t border-line">
+          {eintraege.map((akte) => (
+            <li key={akte.id} className="border-b border-line">
+              {children(akte)}
+            </li>
           ))}
         </ul>
       )}
-    </main>
+    </section>
+  )
+}
+
+function Akte({
+  akte,
+  levelName,
+  zusatz,
+  dringend,
+}: {
+  akte: Fall
+  levelName: Map<number, string>
+  zusatz?: string
+  dringend?: boolean
+}) {
+  return (
+    <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>
+      {zusatz ? (
+        <span className={`font-condensed text-2xs ${dringend ? 'text-stamp-4' : 'text-text-dim'}`}>
+          {zusatz}
+        </span>
+      ) : null}
+      <StampMark
+        level={akte.classification}
+        name={levelName.get(akte.classification) ?? de.common.unknown}
+      />
+    </Link>
   )
 }
 
@@ -118,7 +206,14 @@ export default async function OverviewPage() {
 async function beschrifte(
   jobs: Awaited<ReturnType<typeof pendingApprovals>>,
 ): Promise<
-  { id: string; kind: string; label: string; requestedBy: string; clearanceAtTime: number; createdAt: string }[]
+  {
+    id: string
+    kind: string
+    label: string
+    requestedBy: string
+    clearanceAtTime: number
+    createdAt: string
+  }[]
 > {
   if (jobs.length === 0) return []