feat: Stammdaten, Ersteinrichtung, Zweitfaktor und Protokollansicht

Damit ist Etappe 1 fachlich vollstaendig.

Ersteinrichtung in drei Schritten, bewusst ausserhalb des
Anwendungsrahmens: der setzt Benutzer, zweiten Faktor UND eine betreute
Person voraus - beim allerersten Start gibt es nichts davon. Die Aktion
fuer den ersten Zugang sperrt sich selbst, sobald ein Benutzer existiert.

Zweiter Faktor: Das Geheimnis wird zuerst nur abgelegt, ohne
totpAktiviertAm. Erst ein echter Code aus der App schaltet ihn scharf.
Wer sich beim Abtippen vertut oder die falsche App nimmt, wuerde sich
sonst dauerhaft aussperren. Erst danach gibt es die
Wiederherstellungscodes - einmal angezeigt, danach nur noch als Hash.

Betreuungsjahr (src/lib/stammdaten/betreuungsjahr.ts): laeuft ab dem Tag
der Bestellung, nicht ab dem Kalenderjahr. Schrittweise vorwaerts
gerechnet statt ueber eine Differenz, damit Schaltjahre und der
29. Februar von selbst stimmen. Daran haengen Jahresbericht,
Rechnungslegung und die Ausschlussfrist der Aufwandspauschale.

Aendert sich das Bestellungsdatum, werden die Pflichtfristen neu
abgeleitet - ueber einen dynamischen Import, damit die Stammdaten auch
dann speicherbar bleiben, wenn das Fristenmodul fehlt.

Protokollansicht zeigt je Eintrag die geaenderten Felder als alt -> neu.
Die Aenderungen liegen verschluesselt, weil dort Diagnosen und
Kontostaende stehen koennen.

Seed legt bewusst keine echten Personendaten an, nur den ersten Zugang.
Mit SEED_DEMO=true kommt ein vollstaendiger Beispielfall dazu - Erika
Musterfrau, COPD GOLD III, Pflegegrad 3, Heimeinzug Januar 2026,
leerstehendes Haus, zwei Versicherungen, laufender Antrag beim Bezirk
mit acht Nachforderungen. Nur ausserhalb der Produktion.

Docker Compose ohne Reverse Proxy - der ist auf dem Zielserver
vorhanden. Die Datenbank hat keine Portfreigabe und ist nur ueber das
interne Netz erreichbar; die Anwendung horcht auf 127.0.0.1.

Etappe: 1
Phase: Fundament

src/components/kontakte/protokoll-erfassung.tsx

@@ -0,0 +1,368 @@
+'use client'
+
+import * as React from 'react'
+import { useActionState } from 'react'
+import { useFormStatus } from 'react-dom'
+import { AlertCircle, ChevronDown } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { Select } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { Feld } from '@/components/feld'
+import {
+  DAUER_SCHNELLWAHL,
+  KONTAKT_ARTEN,
+  KONTAKT_ARTEN_SCHNELLWAHL,
+  KONTAKT_ART_BESCHRIFTUNG,
+} from '@/lib/validierung/kontakte'
+import { protokollSpeichern, type KontaktZustand } from '@/server/actions/kontakte'
+import { cn } from '@/lib/utils'
+
+/**
+ * Die Schnellerfassung.
+ *
+ * Sie muss am Handy in unter 20 Sekunden zu bedienen sein - im Flur des
+ * Pflegeheims, direkt nach dem Besuch, mit einer Hand. Deshalb:
+ *
+ * - Das Datum ist auf heute vorbelegt.
+ * - Die Art ist eine Knopfreihe, kein Auswahlmenue.
+ * - Die Dauer hat vier Schnellwahlen und daneben ein freies Feld.
+ * - Ein Haekchen fuer den persoenlichen Kontakt - die Angabe, auf die es
+ *   im Jahresbericht nach § 1863 BGB ankommt.
+ * - Ein grosses Freitextfeld.
+ *
+ * Alles Weitere steckt eingeklappt in "Weitere Angaben". Speichern ist der
+ * einzige auffaellige Knopf auf der Seite.
+ */
+
+export type ProtokollWerte = {
+  id: string
+  datum: string
+  art: string
+  dauerMinuten: number | null
+  gespraechspartner: string | null
+  mitBetreuter: boolean
+  kontaktId: string | null
+  vorgangId: string | null
+  inhalt: string | null
+  wuensche: string | null
+  folgeaufgaben: string | null
+}
+
+export type Auswahleintrag = { id: string; bezeichnung: string }
+
+const ANFANG: KontaktZustand = {}
+
+/** Die uebrigen Arten, die nicht in der grossen Reihe stehen. */
+const WEITERE_ARTEN = KONTAKT_ARTEN.filter(
+  (art) => !(KONTAKT_ARTEN_SCHNELLWAHL as readonly string[]).includes(art),
+)
+
+export function ProtokollErfassung({
+  betreuteId,
+  heute,
+  kontakte,
+  vorgaenge,
+  protokoll,
+  weiter,
+}: {
+  betreuteId: string
+  /** Vorbelegung fuer das Datumsfeld im Format JJJJ-MM-TT. */
+  heute: string
+  kontakte: Auswahleintrag[]
+  vorgaenge: Auswahleintrag[]
+  protokoll?: ProtokollWerte
+  /** Wohin nach dem Speichern? Muss ein Pfad dieser Anwendung sein. */
+  weiter?: string
+}) {
+  const [zustand, aktion] = useActionState(protokollSpeichern, ANFANG)
+
+  const vorgabeDauer =
+    zustand.werte?.dauerMinuten ??
+    (protokoll?.dauerMinuten !== null && protokoll?.dauerMinuten !== undefined
+      ? String(protokoll.dauerMinuten)
+      : '')
+
+  const [dauer, setDauer] = React.useState<string>(vorgabeDauer)
+
+  const vorgabeArt = zustand.werte?.art ?? protokoll?.art ?? 'BESUCH'
+  const vorgabeDatum = zustand.werte?.datum ?? protokoll?.datum ?? heute
+  const vorgabeMitBetreuter =
+    zustand.werte !== undefined
+      ? zustand.werte.mitBetreuter === 'on'
+      : (protokoll?.mitBetreuter ?? true)
+
+  const mehrOffen = Boolean(
+    protokoll?.gespraechspartner ||
+      protokoll?.kontaktId ||
+      protokoll?.vorgangId ||
+      protokoll?.wuensche ||
+      protokoll?.folgeaufgaben ||
+      zustand.felder?.gespraechspartner ||
+      zustand.felder?.kontaktId ||
+      zustand.felder?.vorgangId,
+  )
+
+  return (
+    <form action={aktion} className="space-y-6">
+      <input type="hidden" name="betreuteId" value={betreuteId} />
+      {protokoll && <input type="hidden" name="id" value={protokoll.id} />}
+      {weiter && <input type="hidden" name="weiter" value={weiter} />}
+
+      {zustand.fehler && (
+        <Alert variant="fehler">
+          <AlertCircle aria-hidden="true" />
+          <AlertTitle>Das hat noch nicht geklappt</AlertTitle>
+          <AlertDescription>{zustand.fehler}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* --- Datum ---------------------------------------------------------- */}
+      <Feld id="datum" beschriftung="Wann war das?" pflicht fehler={zustand.felder?.datum}>
+        <Input name="datum" type="date" defaultValue={vorgabeDatum} required max={heute} />
+      </Feld>
+
+      {/* --- Art als Knopfreihe --------------------------------------------- */}
+      <fieldset>
+        <legend className="mb-2 text-sm font-medium">Wie fand der Kontakt statt?</legend>
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-5">
+          {KONTAKT_ARTEN_SCHNELLWAHL.map((art) => (
+            <ArtKnopf key={art} art={art} gross vorgabe={vorgabeArt} />
+          ))}
+        </div>
+        <div className="mt-2 flex flex-wrap gap-2">
+          {WEITERE_ARTEN.map((art) => (
+            <ArtKnopf key={art} art={art} vorgabe={vorgabeArt} />
+          ))}
+        </div>
+        {zustand.felder?.art && (
+          <p className="mt-2 text-sm font-medium text-destructive">{zustand.felder.art}</p>
+        )}
+      </fieldset>
+
+      {/* --- Dauer ---------------------------------------------------------- */}
+      <fieldset>
+        <legend className="mb-2 text-sm font-medium">Wie lange? (optional)</legend>
+        <div className="flex flex-wrap items-center gap-2">
+          {DAUER_SCHNELLWAHL.map((minuten) => {
+            const gewaehlt = dauer === String(minuten)
+            return (
+              <button
+                key={minuten}
+                type="button"
+                aria-pressed={gewaehlt}
+                onClick={() => setDauer(gewaehlt ? '' : String(minuten))}
+                className={cn(
+                  'min-h-11 min-w-16 rounded-md border px-4 text-base font-medium transition-colors',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  gewaehlt
+                    ? 'border-primary bg-primary text-primary-foreground'
+                    : 'border-input bg-background hover:bg-accent',
+                )}
+              >
+                {minuten} min
+              </button>
+            )
+          })}
+          <label htmlFor="dauerMinuten" className="sr-only">
+            Dauer in Minuten
+          </label>
+          <Input
+            id="dauerMinuten"
+            name="dauerMinuten"
+            type="number"
+            inputMode="numeric"
+            min={1}
+            max={1440}
+            step={1}
+            placeholder="frei"
+            className="w-28"
+            value={dauer}
+            onChange={(e) => setDauer(e.target.value)}
+            aria-invalid={zustand.felder?.dauerMinuten ? true : undefined}
+          />
+        </div>
+        {zustand.felder?.dauerMinuten && (
+          <p className="mt-2 text-sm font-medium text-destructive">
+            {zustand.felder.dauerMinuten}
+          </p>
+        )}
+      </fieldset>
+
+      {/* --- Persoenlicher Kontakt ------------------------------------------ */}
+      <label
+        htmlFor="mitBetreuter"
+        className={cn(
+          'flex min-h-14 cursor-pointer items-center gap-3 rounded-md border border-input',
+          'bg-background px-4 py-3 hover:bg-accent',
+        )}
+      >
+        <Checkbox
+          id="mitBetreuter"
+          name="mitBetreuter"
+          defaultChecked={vorgabeMitBetreuter}
+          className="size-6"
+        />
+        <span>
+          <span className="block font-medium">Persönlicher Kontakt zur betreuten Person</span>
+          <span className="block text-sm text-muted-foreground">
+            Zählt für den Jahresbericht nach § 1863 BGB.
+          </span>
+        </span>
+      </label>
+
+      {/* --- Freitext -------------------------------------------------------- */}
+      <Feld
+        id="inhalt"
+        beschriftung="Was war?"
+        erklaerung="Ein oder zwei Sätze reichen. Wird verschlüsselt gespeichert."
+        fehler={zustand.felder?.inhalt}
+      >
+        <Textarea
+          name="inhalt"
+          rows={6}
+          className="min-h-36"
+          defaultValue={zustand.werte?.inhalt ?? protokoll?.inhalt ?? ''}
+          placeholder="Besuch im Heim, Mutter war wach und hat gegessen. Sauerstoff läuft. Pflegedienstleitung will sich wegen der Höherstufung melden."
+        />
+      </Feld>
+
+      {/* --- Alles Weitere, eingeklappt -------------------------------------- */}
+      <details className="rounded-md border" open={mehrOffen}>
+        <summary
+          className={cn(
+            'flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 px-4 py-3',
+            'text-sm font-medium marker:content-none hover:bg-accent',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          )}
+        >
+          Weitere Angaben (optional)
+          <ChevronDown className="size-4 shrink-0" aria-hidden="true" />
+        </summary>
+
+        <div className="space-y-5 border-t p-4">
+          <Feld
+            id="gespraechspartner"
+            beschriftung="Mit wem gesprochen?"
+            fehler={zustand.felder?.gespraechspartner}
+          >
+            <Input
+              name="gespraechspartner"
+              defaultValue={
+                zustand.werte?.gespraechspartner ?? protokoll?.gespraechspartner ?? ''
+              }
+            />
+          </Feld>
+
+          <Feld
+            id="kontaktId"
+            beschriftung="Zu welchem Kontakt gehört das?"
+            fehler={zustand.felder?.kontaktId}
+          >
+            <Select
+              name="kontaktId"
+              defaultValue={zustand.werte?.kontaktId ?? protokoll?.kontaktId ?? ''}
+            >
+              <option value="">– keinem bestimmten –</option>
+              {kontakte.map((k) => (
+                <option key={k.id} value={k.id}>
+                  {k.bezeichnung}
+                </option>
+              ))}
+            </Select>
+          </Feld>
+
+          <Feld
+            id="vorgangId"
+            beschriftung="Zu welchem Vorgang gehört das?"
+            fehler={zustand.felder?.vorgangId}
+          >
+            <Select
+              name="vorgangId"
+              defaultValue={zustand.werte?.vorgangId ?? protokoll?.vorgangId ?? ''}
+            >
+              <option value="">– keinem bestimmten –</option>
+              {vorgaenge.map((v) => (
+                <option key={v.id} value={v.id}>
+                  {v.bezeichnung}
+                </option>
+              ))}
+            </Select>
+          </Feld>
+
+          <Feld
+            id="wuensche"
+            beschriftung="Geäußerte Wünsche"
+            erklaerung="Der Wille der betreuten Person ist seit 2023 Leitschnur des Betreuerhandelns (§ 1821 BGB). Was hier steht, gehört in den Jahresbericht."
+            fehler={zustand.felder?.wuensche}
+          >
+            <Textarea
+              name="wuensche"
+              rows={3}
+              defaultValue={zustand.werte?.wuensche ?? protokoll?.wuensche ?? ''}
+            />
+          </Feld>
+
+          <Feld
+            id="folgeaufgaben"
+            beschriftung="Was folgt daraus?"
+            erklaerung="Wird nicht automatisch zu einer Aufgabe – für eine Frist bitte zusätzlich eine anlegen."
+            fehler={zustand.felder?.folgeaufgaben}
+          >
+            <Textarea
+              name="folgeaufgaben"
+              rows={3}
+              defaultValue={zustand.werte?.folgeaufgaben ?? protokoll?.folgeaufgaben ?? ''}
+            />
+          </Feld>
+        </div>
+      </details>
+
+      <SpeichernKnopf neu={!protokoll} />
+    </form>
+  )
+}
+
+function ArtKnopf({
+  art,
+  vorgabe,
+  gross,
+}: {
+  art: string
+  vorgabe: string
+  gross?: boolean
+}) {
+  return (
+    <label className="block cursor-pointer">
+      <input
+        type="radio"
+        name="art"
+        value={art}
+        defaultChecked={vorgabe === art}
+        className="peer sr-only"
+      />
+      <span
+        className={cn(
+          'flex items-center justify-center rounded-md border border-input bg-background',
+          'text-center font-medium transition-colors hover:bg-accent',
+          'peer-checked:border-primary peer-checked:bg-primary peer-checked:text-primary-foreground',
+          'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2',
+          gross ? 'min-h-14 px-3 text-base' : 'min-h-11 px-3 text-sm',
+        )}
+      >
+        {KONTAKT_ART_BESCHRIFTUNG[art as keyof typeof KONTAKT_ART_BESCHRIFTUNG] ?? art}
+      </span>
+    </label>
+  )
+}
+
+function SpeichernKnopf({ neu }: { neu: boolean }) {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" size="lg" className="w-full text-base" disabled={pending}>
+      {pending ? 'Wird gespeichert …' : neu ? 'Speichern' : 'Änderungen speichern'}
+    </Button>
+  )
+}