Florian Wilde
6b4df4c9cb
Das Dashboard beantwortet die Frage, was heute ansteht - nicht, welche Daten es gibt. Jede Kachel endet in einer Handlung: Fristen-Ampel, wartet auf andere (mit Tagen seit dem letzten Kontakt), offene Nachforderungen des Bezirks mit Fortschrittsbalken, ungepruefter Posteingang, unverbuchte Belege, Kennzahlen. Zwoelf Abfragen in einem Promise.all, kein N+1. Cent-Betraege werden beim Verlassen der Serverseite gewandelt. Kacheln zu Modulen, die ein Mitleser nicht freigegeben bekommen hat, entfallen ganz - sie zeigen nicht "0", denn das waere eine Aussage ueber Daten, die er nicht sehen darf. Kontaktprotokoll als Schnellerfassung: Datum vorbelegt, Art als grosse Knopfreihe, Dauer als Schnellwahl, ein Freitextfeld. Alles andere eingeklappt. Ziel sind unter 20 Sekunden am Handy. Das Haekchen "persoenlicher Kontakt zur betreuten Person" ist bewusst NICHT vorbelegt - es wandert in den Jahresbericht nach § 1863 BGB, und ein versehentlich gesetztes Haekchen waere dort eine falsche Angabe gegenueber dem Gericht. Aus demselben Grund gilt der Textbaustein "regelmaessiger persoenlicher Kontakt" erst ab persoenlichem Kontakt in mindestens 75 Prozent der Monate. Sonst schreibt die Auswertung ausdruecklich, dass kein persoenlicher Kontakt dokumentiert ist. Ein geschoenter Bericht hilft niemandem. Protokolldaten werden als 12:00 UTC gespeichert und durchgaengig in UTC gerechnet, sonst kippt die Zeitzone einzelne Besuchstage. 51 Tests. Etappe: 2 Phase: Alltag
369 lines
12 KiB
TypeScript
369 lines
12 KiB
TypeScript
'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 ?? false)
|
||
|
||
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>
|
||
)
|
||
}
|