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,298 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import {
|
||||
AlertCircle,
|
||||
Camera,
|
||||
CheckCircle2,
|
||||
FileUp,
|
||||
Loader2,
|
||||
Trash2,
|
||||
Upload,
|
||||
} from 'lucide-react'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Select } from '@/components/ui/select'
|
||||
import { Feld } from '@/components/feld'
|
||||
import { ACCEPT_ATTRIBUT, formatBytes } from '@/lib/speicher/dateityp'
|
||||
import { dokumenteHochladen, type Aktionszustand } from '@/server/actions/dokumente'
|
||||
import { ErkennungPanel } from '@/components/dokumente/erkennung-panel'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
/**
|
||||
* Dokumente aufnehmen: per Drag&Drop, per Dateiauswahl oder direkt mit der
|
||||
* Handykamera.
|
||||
*
|
||||
* Das Ziel dieser Seite in einem Satz: **Foto hochladen, in zwei Klicks
|
||||
* einem Vorgang zuordnen, daraus eine Frist erzeugen.** Alles andere ist
|
||||
* Beiwerk. Deshalb sind Titel, Art und Absender optional - was der Brief
|
||||
* hergibt, schlaegt die Erkennung anschliessend selbst vor.
|
||||
*/
|
||||
export function UploadFormular({
|
||||
vorgaenge,
|
||||
vorgangVorgewaehlt,
|
||||
kameraZuerst,
|
||||
}: {
|
||||
vorgaenge: { id: string; titel: string }[]
|
||||
vorgangVorgewaehlt?: string | null
|
||||
/** Aufruf aus der Schnellerfassung "Beleg fotografieren". */
|
||||
kameraZuerst?: boolean
|
||||
}) {
|
||||
const [zustand, aktion] = useActionState<Aktionszustand, FormData>(dokumenteHochladen, {})
|
||||
const [dateien, setDateien] = React.useState<File[]>([])
|
||||
const [ueberzogen, setUeberzogen] = React.useState(false)
|
||||
|
||||
const dateiFeld = React.useRef<HTMLInputElement>(null)
|
||||
const kameraFeld = React.useRef<HTMLInputElement>(null)
|
||||
|
||||
/**
|
||||
* Die ausgewaehlten Dateien werden in einem eigenen Zustand gehalten und
|
||||
* vor dem Absenden in das versteckte Feld gespiegelt. Nur so lassen sich
|
||||
* Dateiauswahl, Kamera und Drag&Drop zu einem Stapel zusammenfuehren.
|
||||
*/
|
||||
const uebernehmen = React.useCallback((neue: FileList | null) => {
|
||||
if (!neue || neue.length === 0) return
|
||||
setDateien((bisher) => {
|
||||
const zusammen = [...bisher]
|
||||
for (const datei of Array.from(neue)) {
|
||||
const schonDa = zusammen.some(
|
||||
(d) => d.name === datei.name && d.size === datei.size && d.lastModified === datei.lastModified,
|
||||
)
|
||||
if (!schonDa) zusammen.push(datei)
|
||||
}
|
||||
return zusammen.slice(0, 30)
|
||||
})
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!dateiFeld.current) return
|
||||
const behaelter = new DataTransfer()
|
||||
for (const datei of dateien) behaelter.items.add(datei)
|
||||
dateiFeld.current.files = behaelter.files
|
||||
}, [dateien])
|
||||
|
||||
// Nach einem erfolgreichen Stapel die Auswahl leeren.
|
||||
React.useEffect(() => {
|
||||
if (zustand.ergebnisse && zustand.ergebnisse.some((e) => e.dokumentId)) {
|
||||
setDateien([])
|
||||
}
|
||||
}, [zustand.ergebnisse])
|
||||
|
||||
const gesamt = dateien.reduce((summe, datei) => summe + datei.size, 0)
|
||||
const einzelnHochgeladen =
|
||||
zustand.ergebnisse?.filter((e) => e.dokumentId).length === 1
|
||||
? zustand.ergebnisse.find((e) => e.dokumentId)!.dokumentId!
|
||||
: null
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<form action={aktion} className="space-y-6" noValidate>
|
||||
<input
|
||||
ref={dateiFeld}
|
||||
type="file"
|
||||
name="dateien"
|
||||
multiple
|
||||
accept={ACCEPT_ATTRIBUT}
|
||||
className="sr-only"
|
||||
tabIndex={-1}
|
||||
aria-hidden="true"
|
||||
onChange={(ereignis) => uebernehmen(ereignis.target.files)}
|
||||
/>
|
||||
{/* Getrenntes Feld fuer die Kamera: capture darf nicht am Sammelfeld
|
||||
haengen, sonst bietet das Handy keine Dateiauswahl mehr an. */}
|
||||
<input
|
||||
ref={kameraFeld}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
className="sr-only"
|
||||
tabIndex={-1}
|
||||
aria-hidden="true"
|
||||
onChange={(ereignis) => {
|
||||
uebernehmen(ereignis.target.files)
|
||||
ereignis.target.value = ''
|
||||
}}
|
||||
/>
|
||||
|
||||
{zustand.fehler && (
|
||||
<Alert variant="fehler">
|
||||
<AlertCircle aria-hidden="true" />
|
||||
<AlertDescription>{zustand.fehler}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div
|
||||
onDragOver={(ereignis) => {
|
||||
ereignis.preventDefault()
|
||||
setUeberzogen(true)
|
||||
}}
|
||||
onDragLeave={() => setUeberzogen(false)}
|
||||
onDrop={(ereignis) => {
|
||||
ereignis.preventDefault()
|
||||
setUeberzogen(false)
|
||||
uebernehmen(ereignis.dataTransfer.files)
|
||||
}}
|
||||
className={cn(
|
||||
'rounded-lg border-2 border-dashed p-6 text-center transition-colors sm:p-10',
|
||||
ueberzogen ? 'border-primary bg-primary/5' : 'border-border',
|
||||
)}
|
||||
>
|
||||
<FileUp className="mx-auto mb-3 size-8 text-muted-foreground" aria-hidden="true" />
|
||||
<p className="font-medium">Dokumente hierher ziehen</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
PDF, JPEG, PNG, WEBP, TIFF oder HEIC. Mehrere auf einmal sind ausdrücklich erwünscht.
|
||||
</p>
|
||||
|
||||
<div className="mt-5 flex flex-col justify-center gap-2 sm:flex-row">
|
||||
<Button
|
||||
type="button"
|
||||
variant={kameraZuerst ? 'default' : 'outline'}
|
||||
size="lg"
|
||||
onClick={() => kameraFeld.current?.click()}
|
||||
>
|
||||
<Camera aria-hidden="true" />
|
||||
Foto aufnehmen
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={kameraZuerst ? 'outline' : 'default'}
|
||||
size="lg"
|
||||
onClick={() => dateiFeld.current?.click()}
|
||||
>
|
||||
<Upload aria-hidden="true" />
|
||||
Dateien auswählen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dateien.length > 0 && (
|
||||
<div className="rounded-lg border">
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 text-sm">
|
||||
<span className="font-medium">
|
||||
{dateien.length} {dateien.length === 1 ? 'Datei' : 'Dateien'} · {formatBytes(gesamt)}
|
||||
</span>
|
||||
<Button type="button" variant="ghost" size="sm" onClick={() => setDateien([])}>
|
||||
Auswahl leeren
|
||||
</Button>
|
||||
</div>
|
||||
<ul className="divide-y">
|
||||
{dateien.map((datei, i) => (
|
||||
<li key={`${datei.name}-${i}`} className="flex items-center gap-3 px-4 py-2.5">
|
||||
<span className="min-w-0 flex-1 truncate text-sm">{datei.name}</span>
|
||||
<span className="shrink-0 text-xs tabular-nums text-muted-foreground">
|
||||
{formatBytes(datei.size)}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setDateien((bisher) => bisher.filter((_, index) => index !== i))}
|
||||
aria-label={`${datei.name} aus der Auswahl entfernen`}
|
||||
>
|
||||
<Trash2 aria-hidden="true" />
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Feld
|
||||
id="titel"
|
||||
beschriftung="Titel"
|
||||
erklaerung="Nur bei einer einzelnen Datei. Leer lassen ist in Ordnung – die Erkennung schlägt gleich einen Titel vor."
|
||||
fehler={zustand.felder?.titel}
|
||||
>
|
||||
<Input name="titel" maxLength={200} />
|
||||
</Feld>
|
||||
|
||||
<Feld
|
||||
id="eingangAm"
|
||||
beschriftung="Eingegangen am"
|
||||
erklaerung="Maßgeblich für Rechtsbehelfsfristen – nicht das Datum auf dem Brief. Leer = heute."
|
||||
fehler={zustand.felder?.eingangAm}
|
||||
>
|
||||
<Input name="eingangAm" type="date" />
|
||||
</Feld>
|
||||
|
||||
<Feld id="vorgangId" beschriftung="Direkt einem Vorgang zuordnen">
|
||||
<Select name="vorgangId" defaultValue={vorgangVorgewaehlt ?? ''}>
|
||||
<option value="">Später zuordnen</option>
|
||||
{vorgaenge.map((vorgang) => (
|
||||
<option key={vorgang.id} value={vorgang.id}>
|
||||
{vorgang.titel}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</Feld>
|
||||
|
||||
<Feld
|
||||
id="ablageortPapier"
|
||||
beschriftung="Ablageort des Originals"
|
||||
erklaerung="Wo liegt das Blatt in Papier? z. B. „Ordner 2, Register Bezirk“. Papier bleibt Papier."
|
||||
>
|
||||
<Input name="ablageortPapier" maxLength={150} placeholder="Ordner 2, Register Bezirk" />
|
||||
</Feld>
|
||||
</div>
|
||||
|
||||
<Absendeknopf anzahl={dateien.length} />
|
||||
</form>
|
||||
|
||||
{zustand.ergebnisse && zustand.ergebnisse.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<Alert variant={zustand.ergebnisse.every((e) => e.dokumentId) ? 'erfolg' : 'warnung'}>
|
||||
<CheckCircle2 aria-hidden="true" />
|
||||
<AlertDescription>{zustand.hinweis ?? 'Verarbeitet.'}</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<ul className="divide-y rounded-lg border">
|
||||
{zustand.ergebnisse.map((ergebnis, i) => (
|
||||
<li key={i} className="flex flex-wrap items-center gap-2 px-4 py-2.5 text-sm">
|
||||
<span className="min-w-0 flex-1 truncate">{ergebnis.dateiname}</span>
|
||||
{ergebnis.dokumentId ? (
|
||||
<Link
|
||||
href={`/dokumente/${ergebnis.dokumentId}`}
|
||||
className="shrink-0 font-medium text-primary hover:underline"
|
||||
>
|
||||
Öffnen
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-destructive">{ergebnis.fehler}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{einzelnHochgeladen && (
|
||||
<ErkennungPanel dokumentId={einzelnHochgeladen} vorgaenge={vorgaenge} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Absendeknopf({ anzahl }: { anzahl: number }) {
|
||||
const { pending } = useFormStatus()
|
||||
|
||||
return (
|
||||
<Button type="submit" size="lg" className="w-full sm:w-auto" disabled={pending || anzahl === 0}>
|
||||
{pending ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" aria-hidden="true" />
|
||||
Wird übernommen …
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload aria-hidden="true" />
|
||||
{anzahl <= 1 ? 'In die Akte übernehmen' : `${anzahl} Dokumente übernehmen`}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user