feat: Jahresbericht, Vollexport, Wissensbasis und Mitleser-Freigaben
Etappe 7. Die Ausgabeschicht - alles, was diese Anwendung nach aussen abgibt. Der Jahresbericht nach § 1863 BGB ist ein ENTWURF zum Ueberarbeiten, kein fertiger Text. Er zieht sich die fuenf Gliederungspunkte aus Kontaktprotokollen, Gesundheitsereignissen und Vorgangsstatus zusammen; was davor abgegeben wird, entscheidet der Betreuer. Das sagt auch die Oberflaeche. Ausgabe als PDF und als DOCX, damit sich weiterschreiben laesst. Vollexport als ZIP-Strom mit Gegendruck, damit auch grosse Bestaende ohne Speicherausbruch durchgehen: Originaldateien nach Jahren sortiert, alle Tabellen als entschluesseltes JSON, die erzeugten Berichte, ein LIESMICH und SHA-256 je Datei. Damit laesst sich die Anwendung verlassen - kein Datensilo. Der Export ist eine sensible Aktion: nur BETREUER und ADMIN, nur nach frischer Anmeldung, immer mit Audit-Eintrag. Ein Mitleser kommt nicht heran. 37 Hinweiskarten in daten/hinweise.json, Zod-geprueft und ohne Neustart pflegbar. Jede mit Rechtsgrundlage, Link und dem stehenden Vermerk, dass sie keine Rechtsberatung ersetzt. Modulweise Freigaben fuer Mitleser, mit ausdruecklicher Warnung bei Gesundheit, Finanzen und Sozialhilfe. Rollen- und Freigabeaenderungen erfordern eine frische Anmeldung und stehen im Audit-Log. Nebenbei geloest: Webpack loest .tsx vor .ts auf, TypeScript und Vitest umgekehrt. Ein Modul, das beide Endungen traegt, importiert sich unter einem der beiden Werkzeuge selbst. Deshalb heissen die Bausteine jetzt eindeutig (jahresbericht.entwurf.ts, .inhalt.tsx, .ausgabe.ts) und werden ueber eine gemeinsame Fassade weitergereicht. 41 Tests. Etappe: 7 Phase: Ausgabe
This commit is contained in:
Florian Wilde
@@ -0,0 +1,226 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { Download, Pencil, Trash2 } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Feld } from '@/components/feld'
|
||||
import { Leerzustand } from '@/components/seiten-kopf'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { Meldung } from '@/components/berichte/meldung'
|
||||
import { abgabeVermerken, berichtLoeschen, type Aktionszustand } from '@/server/actions/berichte'
|
||||
import { formatDatum, formatDatumZeit } from '@/lib/utils'
|
||||
|
||||
export type BerichtsZeile = {
|
||||
id: string
|
||||
art: string
|
||||
artBeschriftung: string
|
||||
titel: string
|
||||
zeitraum: string | null
|
||||
erstelltAm: string
|
||||
erstelltVon: string | null
|
||||
dateiname: string | null
|
||||
/** Kurzlebige, signierte URL - serverseitig erzeugt. */
|
||||
downloadUrl: string | null
|
||||
abgegebenAm: string | null
|
||||
abgegebenAn: string | null
|
||||
bearbeitbar: boolean
|
||||
}
|
||||
|
||||
function KleinerKnopf({
|
||||
children,
|
||||
variante = 'ghost',
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
variante?: 'ghost' | 'outline' | 'destructive'
|
||||
}) {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" size="sm" variant={variante} disabled={pending}>
|
||||
{children}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Was habe ich wann in welcher Fassung abgegeben?
|
||||
*
|
||||
* Diese Tabelle ist die Antwort darauf. Sie ist kein Archiv um des
|
||||
* Archivierens willen: Wenn das Gericht in zwei Jahren nachfragt, welche
|
||||
* Fassung des Jahresberichts vorgelegen hat, steht sie hier - mit Datum,
|
||||
* Empfaenger und der abgelegten Datei.
|
||||
*/
|
||||
export function BerichtsListe({
|
||||
zeilen,
|
||||
darfSchreiben,
|
||||
}: {
|
||||
zeilen: BerichtsZeile[]
|
||||
darfSchreiben: boolean
|
||||
}) {
|
||||
const [loeschstand, loeschen] = useActionState<Aktionszustand, FormData>(berichtLoeschen, {})
|
||||
const [abgabestand, abgeben] = useActionState<Aktionszustand, FormData>(abgabeVermerken, {})
|
||||
const [offeneAbgabe, setOffeneAbgabe] = React.useState<string | null>(null)
|
||||
|
||||
if (zeilen.length === 0) {
|
||||
return (
|
||||
<Leerzustand
|
||||
titel="Noch kein Bericht erzeugt"
|
||||
beschreibung="Sobald du einen Jahresbericht, eine Belegmappe oder ein Unterlagenpaket erzeugst, steht es hier – mit Datum, Fassung und der abgelegten Datei."
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Meldung fehler={loeschstand.fehler ?? abgabestand.fehler} erfolg={loeschstand.erfolg ?? abgabestand.erfolg} />
|
||||
|
||||
<div className="overflow-x-auto rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Bericht</TableHead>
|
||||
<TableHead>Zeitraum</TableHead>
|
||||
<TableHead>Erzeugt</TableHead>
|
||||
<TableHead>Abgegeben</TableHead>
|
||||
<TableHead className="text-right">Aktionen</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{zeilen.map((zeile) => (
|
||||
<React.Fragment key={zeile.id}>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<span className="block font-medium">{zeile.titel}</span>
|
||||
<Badge variant="outline" className="mt-1">
|
||||
{zeile.artBeschriftung}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap">{zeile.zeitraum ?? '–'}</TableCell>
|
||||
<TableCell className="whitespace-nowrap">
|
||||
<span className="block">{formatDatumZeit(zeile.erstelltAm)}</span>
|
||||
{zeile.erstelltVon && (
|
||||
<span className="text-sm text-muted-foreground">{zeile.erstelltVon}</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap">
|
||||
{zeile.abgegebenAm ? (
|
||||
<>
|
||||
<Badge variant="gruen">{formatDatum(zeile.abgegebenAm)}</Badge>
|
||||
{zeile.abgegebenAn && (
|
||||
<span className="mt-1 block text-sm text-muted-foreground">
|
||||
an {zeile.abgegebenAn}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Badge variant="gelb">noch nicht vermerkt</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap justify-end gap-1">
|
||||
{zeile.bearbeitbar && (
|
||||
<Button asChild size="sm" variant="ghost">
|
||||
<Link href={`/berichte/jahresbericht/${zeile.id}`}>
|
||||
<Pencil aria-hidden="true" />
|
||||
Bearbeiten
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
{zeile.downloadUrl && (
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<a href={zeile.downloadUrl} download={zeile.dateiname ?? undefined}>
|
||||
<Download aria-hidden="true" />
|
||||
Datei
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
{darfSchreiben && !zeile.abgegebenAm && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setOffeneAbgabe((alt) => (alt === zeile.id ? null : zeile.id))
|
||||
}
|
||||
aria-expanded={offeneAbgabe === zeile.id}
|
||||
>
|
||||
Abgabe vermerken
|
||||
</Button>
|
||||
)}
|
||||
{darfSchreiben && (
|
||||
<form
|
||||
action={loeschen}
|
||||
onSubmit={(ereignis) => {
|
||||
if (
|
||||
!window.confirm(
|
||||
`„${zeile.titel}“ in den Papierkorb verschieben? Dort liegt er 30 Tage.`,
|
||||
)
|
||||
) {
|
||||
ereignis.preventDefault()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="berichtId" value={zeile.id} />
|
||||
<KleinerKnopf variante="ghost">
|
||||
<Trash2 aria-hidden="true" />
|
||||
<span className="sr-only">Löschen</span>
|
||||
</KleinerKnopf>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
{offeneAbgabe === zeile.id && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="bg-muted/40">
|
||||
<form action={abgeben} className="flex flex-wrap items-end gap-3">
|
||||
<input type="hidden" name="berichtId" value={zeile.id} />
|
||||
<Feld
|
||||
id={`abgegebenAm-${zeile.id}`}
|
||||
beschriftung="Abgegeben am"
|
||||
fehler={abgabestand.felder?.abgegebenAm}
|
||||
className="w-44"
|
||||
pflicht
|
||||
>
|
||||
<Input
|
||||
type="date"
|
||||
name="abgegebenAm"
|
||||
defaultValue={new Date().toISOString().slice(0, 10)}
|
||||
required
|
||||
/>
|
||||
</Feld>
|
||||
<Feld
|
||||
id={`abgegebenAn-${zeile.id}`}
|
||||
beschriftung="Vorgelegt bei"
|
||||
erklaerung="Zum Beispiel „Amtsgericht Bayreuth“ oder „Bezirk Oberfranken“."
|
||||
fehler={abgabestand.felder?.abgegebenAn}
|
||||
className="min-w-64 flex-1"
|
||||
pflicht
|
||||
>
|
||||
<Input name="abgegebenAn" required maxLength={200} />
|
||||
</Feld>
|
||||
<KleinerKnopf variante="outline">Vermerken</KleinerKnopf>
|
||||
</form>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { Download, ShieldCheck } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||||
import { Meldung } from '@/components/berichte/meldung'
|
||||
import { exportVorbereiten, type Aktionszustand } from '@/server/actions/berichte'
|
||||
|
||||
function Bestaetigen() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" variant="secondary" disabled={pending}>
|
||||
<ShieldCheck aria-hidden="true" />
|
||||
{pending ? 'Wird geprüft …' : 'Export freischalten'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Vollexport anstossen.
|
||||
*
|
||||
* Zwei Schritte, mit Absicht: Erst wird die Anmeldung bestaetigt (die
|
||||
* Aktion leitet zur Bestaetigungsseite um, wenn sie zu lange her ist),
|
||||
* danach laedt der Browser das ZIP von einer eigenen Route. Ein Strom
|
||||
* laesst sich aus einer Server Action nicht zurueckgeben, und ein Bestand
|
||||
* aus hunderten Bescheiden soll nicht erst komplett in den Arbeitsspeicher.
|
||||
*/
|
||||
export function ExportFormular({ betreuteId }: { betreuteId: string }) {
|
||||
const [zustand, aktion] = useActionState<Aktionszustand, FormData>(exportVorbereiten, {})
|
||||
const [mitDokumenten, setMitDokumenten] = React.useState(true)
|
||||
const [mitAuditLog, setMitAuditLog] = React.useState(true)
|
||||
const [mitBerichten, setMitBerichten] = React.useState(true)
|
||||
|
||||
const abfrage = new URLSearchParams({
|
||||
betreute: betreuteId,
|
||||
dokumente: mitDokumenten ? 'ja' : 'nein',
|
||||
audit: mitAuditLog ? 'ja' : 'nein',
|
||||
berichte: mitBerichten ? 'ja' : 'nein',
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<Alert variant="warnung">
|
||||
<AlertTitle>Der Export enthält alles – unverschlüsselt</AlertTitle>
|
||||
<AlertDescription>
|
||||
Im Archiv stehen Diagnosen, Kontostände, Notizen und Bescheide im Klartext. Es ist die
|
||||
Sicherung, mit der du auch ohne diese Anwendung weiterarbeiten kannst – und zugleich die
|
||||
Datei, die niemals auf einem fremden Rechner oder in einer Cloud liegen sollte. Bewahre
|
||||
sie so auf wie den Aktenordner selbst.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<fieldset className="space-y-3">
|
||||
<legend className="text-base font-semibold">Was soll hinein?</legend>
|
||||
|
||||
<label className="flex min-h-11 items-center gap-3">
|
||||
<Checkbox
|
||||
checked={mitDokumenten}
|
||||
onChange={(ereignis) => setMitDokumenten(ereignis.target.checked)}
|
||||
/>
|
||||
<span>
|
||||
<span className="block font-medium">Alle Originaldateien</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Bescheide, Kontoauszüge, Fotos – nach Jahren sortiert unter <code>dokumente/</code>.
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label className="flex min-h-11 items-center gap-3">
|
||||
<Checkbox
|
||||
checked={mitBerichten}
|
||||
onChange={(ereignis) => setMitBerichten(ereignis.target.checked)}
|
||||
/>
|
||||
<span>
|
||||
<span className="block font-medium">Erzeugte Berichte</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Jahresberichte, Belegmappen, Unterlagenpakete als PDF.
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label className="flex min-h-11 items-center gap-3">
|
||||
<Checkbox
|
||||
checked={mitAuditLog}
|
||||
onChange={(ereignis) => setMitAuditLog(ereignis.target.checked)}
|
||||
/>
|
||||
<span>
|
||||
<span className="block font-medium">Audit-Log</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Wer hat wann was geändert. Dein Nachweis gegenüber Gericht und Miterben – lass es
|
||||
drin, wenn du keinen Grund dagegen hast.
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<form action={aktion} className="space-y-3">
|
||||
<input type="hidden" name="betreuteId" value={betreuteId} />
|
||||
<Meldung fehler={zustand.fehler} erfolg={zustand.erfolg} />
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Bestaetigen />
|
||||
<Button asChild variant="default">
|
||||
<a href={`/berichte/export/datei?${abfrage.toString()}`} download>
|
||||
<Download aria-hidden="true" />
|
||||
Archiv herunterladen
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Schalte den Export zuerst frei – dabei wird deine Anmeldung erneut bestätigt. Danach
|
||||
startet der Download. Bei vielen Dokumenten dauert es eine Weile, bis die erste Datei
|
||||
ankommt; das Archiv wird währenddessen schon geschrieben.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import 'server-only'
|
||||
import type { BerichtArt } from '@prisma/client'
|
||||
import { aktiveBetreute, erfordereBenutzer, erfordereZugang } from '@/lib/auth/sitzung'
|
||||
import { signierteUrl } from '@/lib/speicher'
|
||||
import { db, nichtGeloescht } from '@/lib/db'
|
||||
import { formatDatum } from '@/lib/utils'
|
||||
import type { BerichtsZeile } from '@/components/berichte/berichts-liste'
|
||||
|
||||
/**
|
||||
* Der gemeinsame Vorspann aller Berichtsseiten.
|
||||
*
|
||||
* Wie ueberall gilt: Die aktive betreute Person kommt aus dem Cookie, ob
|
||||
* sie angezeigt werden darf, entscheidet erfordereZugang() gegen die
|
||||
* Datenbank. Ein manipuliertes Cookie kaeme hoechstens bis hierher.
|
||||
*/
|
||||
export async function berichtskontext(art: 'lesen' | 'schreiben' = 'lesen') {
|
||||
const benutzer = await erfordereBenutzer('/berichte')
|
||||
const gewaehlt = await aktiveBetreute(benutzer)
|
||||
if (!gewaehlt) throw new Error('Es ist keine betreute Person ausgewählt.')
|
||||
|
||||
const kontext = await erfordereZugang(gewaehlt.id, 'BERICHTE', art)
|
||||
return {
|
||||
...kontext,
|
||||
betreuteId: gewaehlt.id,
|
||||
darfBerichteSchreiben: kontext.darfSchreiben('BERICHTE'),
|
||||
}
|
||||
}
|
||||
|
||||
export const BERICHTSART_BESCHRIFTUNG: Record<BerichtArt, string> = {
|
||||
VERMOEGENSVERZEICHNIS: 'Vermögensverzeichnis (§ 1835 BGB)',
|
||||
JAHRESBERICHT: 'Jahresbericht (§ 1863 BGB)',
|
||||
VERMOEGENSUEBERSICHT: 'Vermögensübersicht (§ 1859 BGB)',
|
||||
RECHNUNGSLEGUNG: 'Rechnungslegung (§ 1865 BGB)',
|
||||
BELEGMAPPE: 'Belegmappe',
|
||||
UNTERLAGENPAKET_BEZIRK: 'Unterlagenpaket für den Träger',
|
||||
VOLLEXPORT: 'Vollexport',
|
||||
}
|
||||
|
||||
/**
|
||||
* Laedt die protokollierten Berichte und erzeugt zu jeder abgelegten Datei
|
||||
* eine kurzlebige, signierte Adresse. Die Adresse wird bei jedem
|
||||
* Seitenaufbau neu erzeugt und laeuft nach fuenf Minuten ab - ein
|
||||
* versehentlich weitergegebener Link ist dann wertlos.
|
||||
*/
|
||||
export async function berichtsZeilenLaden(
|
||||
betreuteId: string,
|
||||
darfSchreiben: boolean,
|
||||
): Promise<BerichtsZeile[]> {
|
||||
const berichte = await db.bericht.findMany({
|
||||
where: { betreuteId, ...nichtGeloescht },
|
||||
include: { erstelltVon: { select: { name: true } } },
|
||||
orderBy: { erstelltAm: 'desc' },
|
||||
take: 200,
|
||||
})
|
||||
|
||||
return Promise.all(
|
||||
berichte.map(async (bericht) => ({
|
||||
id: bericht.id,
|
||||
art: bericht.art,
|
||||
artBeschriftung: BERICHTSART_BESCHRIFTUNG[bericht.art],
|
||||
titel: bericht.titel,
|
||||
zeitraum:
|
||||
bericht.zeitraumVon || bericht.zeitraumBis
|
||||
? `${formatDatum(bericht.zeitraumVon)} – ${formatDatum(bericht.zeitraumBis)}`
|
||||
: bericht.stichtag
|
||||
? `Stand ${formatDatum(bericht.stichtag)}`
|
||||
: null,
|
||||
erstelltAm: bericht.erstelltAm.toISOString(),
|
||||
erstelltVon: bericht.erstelltVon?.name ?? null,
|
||||
dateiname: bericht.dateiname,
|
||||
downloadUrl: bericht.objektSchluessel
|
||||
? await signierteUrl(bericht.objektSchluessel).catch(() => null)
|
||||
: null,
|
||||
abgegebenAm: bericht.abgegebenAm ? bericht.abgegebenAm.toISOString() : null,
|
||||
abgegebenAn: bericht.abgegebenAn,
|
||||
bearbeitbar: darfSchreiben && bericht.art === 'JAHRESBERICHT',
|
||||
})),
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { Paperclip } from 'lucide-react'
|
||||
import { Feld } from '@/components/feld'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Meldung } from '@/components/berichte/meldung'
|
||||
import { unterlagenpaketAnlegen, type Aktionszustand } from '@/server/actions/berichte'
|
||||
import { formatDatum } from '@/lib/utils'
|
||||
|
||||
export type NachforderungsAuswahl = {
|
||||
id: string
|
||||
bezeichnung: string
|
||||
status: string
|
||||
fristBis: string | null
|
||||
begruendungNichtVorhanden: string | null
|
||||
anzahlDokumente: number
|
||||
}
|
||||
|
||||
function Absenden({ anzahl }: { anzahl: number }) {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending || anzahl === 0}>
|
||||
<Paperclip aria-hidden="true" />
|
||||
{pending
|
||||
? 'Paket wird gebaut …'
|
||||
: anzahl === 0
|
||||
? 'Bitte mindestens eine Unterlage wählen'
|
||||
: `Paket mit ${anzahl} Positionen erzeugen`}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Auswahl der Unterlagen, die an den Sozialhilfetraeger gehen.
|
||||
*
|
||||
* Es koennen auch Positionen mitgeschickt werden, zu denen es kein
|
||||
* Dokument gibt - im Anschreiben erscheinen sie dann mit der hinterlegten
|
||||
* Begruendung. Das ist wichtig: Eine unbeantwortete Position gilt beim
|
||||
* Traeger als fehlende Mitwirkung, eine begruendete nicht.
|
||||
*/
|
||||
export function UnterlagenpaketFormular({
|
||||
betreuteId,
|
||||
antragId,
|
||||
traeger,
|
||||
nachforderungen,
|
||||
}: {
|
||||
betreuteId: string
|
||||
antragId: string
|
||||
traeger: string
|
||||
nachforderungen: NachforderungsAuswahl[]
|
||||
}) {
|
||||
const [zustand, aktion] = useActionState<Aktionszustand, FormData>(unterlagenpaketAnlegen, {})
|
||||
const [gewaehlt, setGewaehlt] = React.useState<string[]>(
|
||||
nachforderungen.filter((n) => n.anzahlDokumente > 0).map((n) => n.id),
|
||||
)
|
||||
|
||||
const umschalten = (id: string) =>
|
||||
setGewaehlt((alt) => (alt.includes(id) ? alt.filter((x) => x !== id) : [...alt, id]))
|
||||
|
||||
return (
|
||||
<form action={aktion} className="space-y-5">
|
||||
<input type="hidden" name="betreuteId" value={betreuteId} />
|
||||
<input type="hidden" name="antragId" value={antragId} />
|
||||
|
||||
<Meldung fehler={zustand.fehler} erfolg={zustand.erfolg} />
|
||||
|
||||
<fieldset className="space-y-2">
|
||||
<legend className="mb-2 text-base font-semibold">
|
||||
Welche Unterlagen sollen mitgehen?
|
||||
</legend>
|
||||
<p className="mb-3 text-sm text-muted-foreground">
|
||||
Empfänger ist {traeger}. Angehakt sind alle Positionen, zu denen bereits ein Dokument
|
||||
hinterlegt ist. Positionen ohne Dokument kannst du mitschicken – sie erscheinen im
|
||||
Anschreiben mit ihrer Begründung.
|
||||
</p>
|
||||
|
||||
<div className="max-h-[28rem] overflow-y-auto rounded-md border">
|
||||
<ul className="divide-y">
|
||||
{nachforderungen.map((eintrag) => (
|
||||
<li key={eintrag.id} className="flex items-start gap-3 p-3">
|
||||
<Checkbox
|
||||
id={`nf-${eintrag.id}`}
|
||||
name="nachforderungIds"
|
||||
value={eintrag.id}
|
||||
checked={gewaehlt.includes(eintrag.id)}
|
||||
onChange={() => umschalten(eintrag.id)}
|
||||
className="mt-1"
|
||||
/>
|
||||
<label htmlFor={`nf-${eintrag.id}`} className="min-w-0 flex-1 cursor-pointer">
|
||||
<span className="block font-medium">{eintrag.bezeichnung}</span>
|
||||
<span className="mt-1 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
{eintrag.anzahlDokumente > 0 ? (
|
||||
<Badge variant="gruen">
|
||||
{eintrag.anzahlDokumente === 1
|
||||
? '1 Dokument hinterlegt'
|
||||
: `${eintrag.anzahlDokumente} Dokumente hinterlegt`}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="orange">kein Dokument</Badge>
|
||||
)}
|
||||
{eintrag.fristBis && <span>Frist: {formatDatum(eintrag.fristBis)}</span>}
|
||||
{eintrag.anzahlDokumente === 0 && (
|
||||
<span>
|
||||
{eintrag.begruendungNichtVorhanden
|
||||
? `Begründung: ${eintrag.begruendungNichtVorhanden}`
|
||||
: 'Ohne Begründung – dann steht ein allgemeiner Satz im Anschreiben.'}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{zustand.felder?.nachforderungIds && (
|
||||
<p className="text-sm font-medium text-destructive">{zustand.felder.nachforderungIds}</p>
|
||||
)}
|
||||
</fieldset>
|
||||
|
||||
<Feld
|
||||
id="anschreibenZusatz"
|
||||
beschriftung="Ergänzende Hinweise im Anschreiben"
|
||||
erklaerung="Landet im Anschreiben unter einer eigenen Überschrift – zum Beispiel ein Hinweis auf eine noch laufende Anfrage bei der Bank."
|
||||
>
|
||||
<Textarea name="anschreibenZusatz" rows={4} maxLength={4000} />
|
||||
</Feld>
|
||||
|
||||
<Absenden anzahl={gewaehlt.length} />
|
||||
</form>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user