docs: README, Datenschutztexte, Dockerfile und Sicherungsskripte
Damit ist Etappe 1 abgeschlossen und betriebsfertig dokumentiert. README mit beiden Betriebswegen. Docker Compose auf eigenem Server ist der Hauptweg; Vercel und Neon sind vollstaendig beschrieben, aber mit einer klaren Begruendung, warum ich davon abrate: beide Anbieter sind US-Unternehmen und unterliegen auch bei EU-Region potenziell dem CLOUD-Act. Bei Gesundheitsdaten einer nicht entscheidungsfaehigen Person ist das eine Abwaegung, die man bewusst treffen muss. Reverse-Proxy-Beispiele fuer Caddy, nginx und Traefik - der Proxy selbst ist nicht Teil des Compose-Setups, weil er auf dem Zielserver schon steht. Die Datenbank hat keine Portfreigabe. Sicherung: pg_dump schreibt direkt in die Verschluesselung, der Klartext landet nie auf der Platte. Danach eine Selbstpruefung - laesst sich die Datei nicht wieder entschluesseln, endet der Lauf mit Fehler statt mit einem stillen Scheinerfolg. Der jeweils erste Stand eines Monats bleibt dauerhaft stehen. Die README sagt ausdruecklich, was das Backup NICHT enthaelt: den Schluessel ENC_KEY_V1 und die Dateien im Objektspeicher. Dazu eine Anleitung, die Wiederherstellung einmal im Jahr zu ueben - mit dem letzten Schritt, in der Anwendung nachzusehen, ob die Diagnosen im Klartext erscheinen. Erst dann stimmt nicht nur die Datenbank, sondern auch der Schluessel. Verarbeitungsverzeichnis und Datenschutzhinweise als ausfuellbare Textbausteine. Die Hinweise sind in einfacher Sprache geschrieben - sie sollen der betreuten Person vorgelesen werden koennen. Die Seite /datenschutz liest denselben Text aus docs/, damit es nicht zwei Fassungen gibt, die auseinanderlaufen. Dockerfile in drei Stufen mit Tesseract, deutschen Sprachdaten und poppler-utils. Zeitzone Europe/Berlin ist gesetzt - ohne sie rechnet der Server in UTC und verschiebt Fristen um einen Tag. Etappe: 1 Phase: Fundament
This commit is contained in:
Florian Wilde
@@ -0,0 +1,111 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { FolderArchive } from 'lucide-react'
|
||||
import { Feld } from '@/components/feld'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Select } from '@/components/ui/select'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Meldung } from '@/components/berichte/meldung'
|
||||
import { belegmappeAnlegen, type Aktionszustand } from '@/server/actions/berichte'
|
||||
|
||||
function Absenden() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
<FolderArchive aria-hidden="true" />
|
||||
{pending ? 'Belege werden zusammengelegt …' : 'Belegmappe erzeugen'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Auswahlmaske fuer die Belegmappe.
|
||||
*
|
||||
* Zwei Wege fuehren zu einer Mappe: ein Zeitraum (fuer die Rechnungslegung
|
||||
* gegenueber dem Gericht) oder ein einzelner Vorgang (wenn der Bezirk
|
||||
* fragt, was es mit einer bestimmten Sache auf sich hat). Das eigentliche
|
||||
* Zusammenlegen der Belege macht das Dokumentenmodul - dort sitzt das
|
||||
* Wissen darueber, welcher Beleg zu welcher Buchung gehoert.
|
||||
*/
|
||||
export function BelegmappeFormular({
|
||||
betreuteId,
|
||||
vorgaenge,
|
||||
vorschlagVon,
|
||||
vorschlagBis,
|
||||
}: {
|
||||
betreuteId: string
|
||||
vorgaenge: { id: string; titel: string }[]
|
||||
vorschlagVon: string
|
||||
vorschlagBis: string
|
||||
}) {
|
||||
const [zustand, aktion] = useActionState<Aktionszustand, FormData>(belegmappeAnlegen, {})
|
||||
const [quelle, setQuelle] = React.useState<'zeitraum' | 'vorgang'>('zeitraum')
|
||||
|
||||
return (
|
||||
<form action={aktion} className="space-y-4">
|
||||
<input type="hidden" name="betreuteId" value={betreuteId} />
|
||||
|
||||
<Meldung fehler={zustand.fehler} erfolg={zustand.erfolg} />
|
||||
|
||||
<Feld
|
||||
id="quelle"
|
||||
beschriftung="Woraus soll die Mappe entstehen?"
|
||||
erklaerung="Ein Zeitraum liefert die Belege zur Rechnungslegung, ein Vorgang die Belege zu einer einzelnen Sache."
|
||||
pflicht
|
||||
>
|
||||
<Select
|
||||
name="quelle"
|
||||
value={quelle}
|
||||
onChange={(ereignis) => setQuelle(ereignis.target.value as 'zeitraum' | 'vorgang')}
|
||||
>
|
||||
<option value="zeitraum">Alle Belege eines Zeitraums</option>
|
||||
<option value="vorgang">Alle Belege zu einem Vorgang</option>
|
||||
</Select>
|
||||
</Feld>
|
||||
|
||||
{quelle === 'zeitraum' ? (
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Feld id="zeitraumVon" beschriftung="Von" fehler={zustand.felder?.zeitraumVon} pflicht>
|
||||
<Input type="date" name="zeitraumVon" defaultValue={vorschlagVon} required />
|
||||
</Feld>
|
||||
<Feld id="zeitraumBis" beschriftung="Bis" fehler={zustand.felder?.zeitraumBis} pflicht>
|
||||
<Input type="date" name="zeitraumBis" defaultValue={vorschlagBis} required />
|
||||
</Feld>
|
||||
</div>
|
||||
) : (
|
||||
<Feld
|
||||
id="vorgangId"
|
||||
beschriftung="Vorgang"
|
||||
erklaerung="Es werden alle Dokumente aufgenommen, die mit diesem Vorgang verknüpft sind."
|
||||
fehler={zustand.felder?.vorgangId}
|
||||
pflicht
|
||||
>
|
||||
<Select name="vorgangId" required defaultValue="">
|
||||
<option value="" disabled>
|
||||
Bitte wählen
|
||||
</option>
|
||||
{vorgaenge.map((vorgang) => (
|
||||
<option key={vorgang.id} value={vorgang.id}>
|
||||
{vorgang.titel}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</Feld>
|
||||
)}
|
||||
|
||||
<Feld
|
||||
id="titel"
|
||||
beschriftung="Überschrift der Mappe"
|
||||
erklaerung="Steht auf dem Deckblatt. Leer lassen genügt meistens."
|
||||
fehler={zustand.felder?.titel}
|
||||
>
|
||||
<Input name="titel" placeholder="Belegmappe zur Rechnungslegung" maxLength={200} />
|
||||
</Feld>
|
||||
|
||||
<Absenden />
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { FileDown, FileType2, RefreshCcw, Save } from 'lucide-react'
|
||||
import { Feld } from '@/components/feld'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||||
import { Meldung } from '@/components/berichte/meldung'
|
||||
import {
|
||||
entwurfNeuBerechnen,
|
||||
entwurfSpeichern,
|
||||
jahresberichtAusgeben,
|
||||
type Aktionszustand,
|
||||
} from '@/server/actions/berichte'
|
||||
|
||||
/** Wie oft der Entwurf im Hintergrund gesichert wird, wenn sich etwas ändert. */
|
||||
const AUTOSPEICHERN_MS = 60_000
|
||||
|
||||
function Knopf({
|
||||
children,
|
||||
variante = 'default',
|
||||
laeuftText,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
variante?: 'default' | 'outline' | 'secondary'
|
||||
laeuftText: string
|
||||
}) {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" variant={variante} disabled={pending}>
|
||||
{pending ? laeuftText : children}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Der Editor fuer den Jahresberichtsentwurf.
|
||||
*
|
||||
* Der wichtigste Satz dieser Seite steht oben im Kasten: Das ist ein
|
||||
* Entwurf. Die Anwendung hat zusammengetragen, was sie weiss - aber sie
|
||||
* war nicht dabei. Was das Gericht liest, muss der Betreuer verantworten,
|
||||
* deshalb wird hier geschrieben und nicht nur bestaetigt.
|
||||
*
|
||||
* Zwischenspeichern geht jederzeit von Hand und laeuft zusaetzlich alle
|
||||
* sechzig Sekunden von allein - ein verlorener Nachmittag Schreibarbeit
|
||||
* waere die teuerste Art, Speicherplatz zu sparen.
|
||||
*/
|
||||
export function EntwurfEditor({
|
||||
berichtId,
|
||||
entwurf,
|
||||
offeneStellen,
|
||||
ergaenzenMarke,
|
||||
hatPdf,
|
||||
}: {
|
||||
berichtId: string
|
||||
entwurf: string
|
||||
offeneStellen: number
|
||||
ergaenzenMarke: string
|
||||
hatPdf: boolean
|
||||
}) {
|
||||
const [text, setText] = React.useState(entwurf)
|
||||
const [gesichert, setGesichert] = React.useState(entwurf)
|
||||
const geaendert = text !== gesichert
|
||||
|
||||
const [speicherstand, speichern] = useActionState<Aktionszustand, FormData>(entwurfSpeichern, {})
|
||||
const [ausgabestand, ausgeben] = useActionState<Aktionszustand, FormData>(jahresberichtAusgeben, {})
|
||||
const [neustand, neuBerechnen] = useActionState<Aktionszustand, FormData>(entwurfNeuBerechnen, {})
|
||||
|
||||
const formular = React.useRef<HTMLFormElement>(null)
|
||||
|
||||
// Nach erfolgreichem Speichern gilt der aktuelle Text als gesichert.
|
||||
React.useEffect(() => {
|
||||
if (speicherstand.erfolg) setGesichert((alt) => (alt === text ? alt : text))
|
||||
// Absichtlich nur am Erfolg haengend: Waehrend des Tippens soll nichts passieren.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [speicherstand.erfolg])
|
||||
|
||||
// Regelmaessiges Sichern im Hintergrund.
|
||||
React.useEffect(() => {
|
||||
if (!geaendert) return
|
||||
const uhr = setTimeout(() => formular.current?.requestSubmit(), AUTOSPEICHERN_MS)
|
||||
return () => clearTimeout(uhr)
|
||||
}, [geaendert, text])
|
||||
|
||||
// Warnung beim Verlassen mit ungesicherten Aenderungen.
|
||||
React.useEffect(() => {
|
||||
if (!geaendert) return
|
||||
const beimVerlassen = (ereignis: BeforeUnloadEvent) => ereignis.preventDefault()
|
||||
window.addEventListener('beforeunload', beimVerlassen)
|
||||
return () => window.removeEventListener('beforeunload', beimVerlassen)
|
||||
}, [geaendert])
|
||||
|
||||
const restlicheStellen = text.split(ergaenzenMarke).length - 1
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<Alert variant="warnung">
|
||||
<AlertTitle>Das ist ein Entwurf, kein fertiger Bericht</AlertTitle>
|
||||
<AlertDescription>
|
||||
<p>
|
||||
Zusammengestellt wurde er aus deinen Kontaktprotokollen, den Gesundheitsereignissen und
|
||||
den Vorgängen. Lies ihn durch, streiche, was nicht stimmt, und schreib in deinen eigenen
|
||||
Worten, was nur du weißt. Abgegeben wird nichts von allein – du erzeugst das PDF, wenn
|
||||
du zufrieden bist.
|
||||
</p>
|
||||
{restlicheStellen > 0 && (
|
||||
<p className="mt-2 font-medium">
|
||||
Im Text stehen noch {restlicheStellen}{' '}
|
||||
{restlicheStellen === 1 ? 'Stelle' : 'Stellen'} mit „{ergaenzenMarke}“, die auf dich
|
||||
warten.
|
||||
</p>
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<Meldung fehler={speicherstand.fehler} erfolg={speicherstand.erfolg} />
|
||||
<Meldung fehler={ausgabestand.fehler} erfolg={ausgabestand.erfolg} />
|
||||
<Meldung fehler={neustand.fehler} erfolg={neustand.erfolg} />
|
||||
|
||||
<form action={speichern} ref={formular} className="space-y-4">
|
||||
<input type="hidden" name="berichtId" value={berichtId} />
|
||||
<input type="hidden" name="entwurf" value={text} />
|
||||
|
||||
<Feld
|
||||
id="entwurf"
|
||||
beschriftung="Berichtstext"
|
||||
erklaerung="Überschriften beginnen mit ihrer Nummer („3. Wünsche …“), Aufzählungen mit einem Punkt (•). Daran erkennt die Anwendung sie später beim Setzen von PDF und Word-Datei."
|
||||
fehler={speicherstand.felder?.entwurf}
|
||||
>
|
||||
<Textarea
|
||||
value={text}
|
||||
onChange={(ereignis) => setText(ereignis.target.value)}
|
||||
rows={30}
|
||||
spellCheck
|
||||
className="font-normal leading-relaxed"
|
||||
/>
|
||||
</Feld>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Knopf laeuftText="Wird gespeichert …">
|
||||
<Save aria-hidden="true" />
|
||||
Zwischenspeichern
|
||||
</Knopf>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{geaendert
|
||||
? 'Nicht gespeicherte Änderungen – es wird spätestens in einer Minute automatisch gesichert.'
|
||||
: 'Alles gespeichert.'}
|
||||
{offeneStellen > 0 && ' '}
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="flex flex-wrap gap-3 border-t pt-5">
|
||||
<form action={ausgeben}>
|
||||
<input type="hidden" name="berichtId" value={berichtId} />
|
||||
<input type="hidden" name="format" value="pdf" />
|
||||
<Knopf laeuftText="PDF wird gesetzt …">
|
||||
<FileDown aria-hidden="true" />
|
||||
{hatPdf ? 'PDF neu erzeugen' : 'PDF erzeugen'}
|
||||
</Knopf>
|
||||
</form>
|
||||
|
||||
<form action={ausgeben}>
|
||||
<input type="hidden" name="berichtId" value={berichtId} />
|
||||
<input type="hidden" name="format" value="docx" />
|
||||
<Knopf variante="outline" laeuftText="Word-Datei wird gebaut …">
|
||||
<FileType2 aria-hidden="true" />
|
||||
Als Word-Datei
|
||||
</Knopf>
|
||||
</form>
|
||||
|
||||
<form
|
||||
action={neuBerechnen}
|
||||
onSubmit={(ereignis) => {
|
||||
const sicher = window.confirm(
|
||||
'Der Entwurf wird aus den aktuellen Daten neu aufgebaut. Alles, was du selbst ' +
|
||||
'geschrieben hast, geht dabei verloren. Fortfahren?',
|
||||
)
|
||||
if (!sicher) ereignis.preventDefault()
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="berichtId" value={berichtId} />
|
||||
<Knopf variante="secondary" laeuftText="Wird neu aufgebaut …">
|
||||
<RefreshCcw aria-hidden="true" />
|
||||
Entwurf neu aufbauen
|
||||
</Knopf>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { FileText } from 'lucide-react'
|
||||
import { Feld } from '@/components/feld'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Meldung } from '@/components/berichte/meldung'
|
||||
import { jahresberichtAnlegen, type Aktionszustand } from '@/server/actions/berichte'
|
||||
|
||||
function Absenden() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
<FileText aria-hidden="true" />
|
||||
{pending ? 'Entwurf wird gebaut …' : 'Entwurf erzeugen'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Startet einen Jahresbericht fuer einen Berichtszeitraum.
|
||||
*
|
||||
* Vorbelegt ist das laufende Betreuungsjahr - es beginnt am Tag der
|
||||
* Bestellung, nicht am 1. Januar. Wer einen anderen Zeitraum braucht (etwa
|
||||
* fuer eine Nachforderung des Gerichts), aendert die beiden Felder.
|
||||
*/
|
||||
export function JahresberichtFormular({
|
||||
betreuteId,
|
||||
vorschlagVon,
|
||||
vorschlagBis,
|
||||
}: {
|
||||
betreuteId: string
|
||||
/** ISO-Tag, z.B. "2025-10-01". */
|
||||
vorschlagVon: string
|
||||
vorschlagBis: string
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const [zustand, aktion] = useActionState<Aktionszustand, FormData>(jahresberichtAnlegen, {})
|
||||
|
||||
React.useEffect(() => {
|
||||
if (zustand.berichtId) router.push(`/berichte/jahresbericht/${zustand.berichtId}`)
|
||||
}, [zustand.berichtId, router])
|
||||
|
||||
return (
|
||||
<form action={aktion} className="space-y-4">
|
||||
<input type="hidden" name="betreuteId" value={betreuteId} />
|
||||
|
||||
<Meldung fehler={zustand.fehler} erfolg={zustand.erfolg} />
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Feld
|
||||
id="zeitraumVon"
|
||||
beschriftung="Berichtszeitraum von"
|
||||
erklaerung="In der Regel der Tag, an dem das laufende Betreuungsjahr begonnen hat."
|
||||
fehler={zustand.felder?.zeitraumVon}
|
||||
pflicht
|
||||
>
|
||||
<Input type="date" name="zeitraumVon" defaultValue={vorschlagVon} required />
|
||||
</Feld>
|
||||
|
||||
<Feld
|
||||
id="zeitraumBis"
|
||||
beschriftung="Berichtszeitraum bis"
|
||||
erklaerung="Meist der Tag vor dem nächsten Jahrestag der Bestellung."
|
||||
fehler={zustand.felder?.zeitraumBis}
|
||||
pflicht
|
||||
>
|
||||
<Input type="date" name="zeitraumBis" defaultValue={vorschlagBis} required />
|
||||
</Feld>
|
||||
</div>
|
||||
|
||||
<Absenden />
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client'
|
||||
|
||||
import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
|
||||
/**
|
||||
* Die Rueckmeldung einer Server Action - Fehler, Erfolg, Warnung.
|
||||
*
|
||||
* Eigene Komponente, weil sie in jedem Berichtsformular gebraucht wird und
|
||||
* weil sie "aria-live" tragen muss: Wer mit Screenreader arbeitet, soll
|
||||
* mitbekommen, dass etwas passiert ist, ohne die Seite abzusuchen.
|
||||
*/
|
||||
export function Meldung({
|
||||
fehler,
|
||||
erfolg,
|
||||
warnung,
|
||||
}: {
|
||||
fehler?: string
|
||||
erfolg?: string
|
||||
warnung?: string
|
||||
}) {
|
||||
if (!fehler && !erfolg && !warnung) return null
|
||||
|
||||
return (
|
||||
<div aria-live="polite" className="space-y-2">
|
||||
{fehler && (
|
||||
<Alert variant="fehler">
|
||||
<AlertTriangle aria-hidden="true" />
|
||||
<AlertDescription>{fehler}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{warnung && (
|
||||
<Alert variant="warnung">
|
||||
<Info aria-hidden="true" />
|
||||
<AlertDescription>{warnung}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{erfolg && (
|
||||
<Alert variant="erfolg">
|
||||
<CheckCircle2 aria-hidden="true" />
|
||||
<AlertDescription>{erfolg}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user