diff --git a/docs/plans/2026-02-28-anleitung-page-design.md b/docs/plans/2026-02-28-anleitung-page-design.md new file mode 100644 index 0000000..3bdb97e --- /dev/null +++ b/docs/plans/2026-02-28-anleitung-page-design.md @@ -0,0 +1,39 @@ +# Design: Anleitungsseite für DAK-Portal + +## Zusammenfassung + +Statische Anleitungsseite (`/anleitung`) mit Akkordeon-basierten Schritt-für-Schritt-Anleitungen für alle wichtigen Funktionen des DAK-Portals. Sichtbar für alle eingeloggten Benutzer. + +## Dateien + +| Datei | Änderung | +|-------|----------| +| `frontend/src/pages/AnleitungPage.tsx` | Neue Seite | +| `frontend/src/components/layout/Sidebar.tsx` | Neuer NavItem-Eintrag | +| `frontend/src/App.tsx` | Route hinzufügen | + +## Sidebar-Eintrag + +- Position: In `accountNavItems`, nach "Meine Freigaben" +- Icon: `BookOpen` (lucide-react) +- Kein `adminOnly`/`mitarbeiterOnly` — für alle sichtbar + +## Seitenstruktur + +Header + 8 Akkordeon-Abschnitte: + +1. Dashboard verstehen +2. Fälle suchen und filtern +3. Falldetails anzeigen +4. ICD-Codes eingeben +5. Personendaten anfordern (Freigaben) +6. Berichte herunterladen +7. Wochenübersicht & ICD-Upload +8. Konto & Sicherheit + +## Komponenten + +- shadcn/ui `Accordion` (bereits vorhanden) +- shadcn/ui `Card` als Container +- shadcn/ui `Badge` für Fachbegriffe +- lucide-react Icons als visuelle Orientierung diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7d32f83..89d92fe 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -20,6 +20,7 @@ import { AccountPage } from '@/pages/AccountPage' import { GutachtenStatistikPage } from '@/pages/GutachtenStatistikPage' import { MyDisclosuresPage } from '@/pages/MyDisclosuresPage' import { WochenuebersichtPage } from '@/pages/WochenuebersichtPage' +import { AnleitungPage } from '@/pages/AnleitungPage' const queryClient = new QueryClient({ defaultOptions: { @@ -52,6 +53,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx index 84138bf..47a4b63 100644 --- a/frontend/src/components/layout/Sidebar.tsx +++ b/frontend/src/components/layout/Sidebar.tsx @@ -20,6 +20,7 @@ import { History, UserCog, ShieldCheck, + BookOpen, Scale, ShieldAlert, } from 'lucide-react' @@ -45,6 +46,7 @@ const mainNavItems: NavItem[] = [ const accountNavItems: NavItem[] = [ { label: 'Kontoverwaltung', to: '/account', icon: UserCog }, { label: 'Meine Freigaben', to: '/disclosures', icon: ShieldCheck, mitarbeiterOnly: true }, + { label: 'Anleitung', to: '/anleitung', icon: BookOpen }, ] const adminNavItems: NavItem[] = [ diff --git a/frontend/src/components/ui/accordion.tsx b/frontend/src/components/ui/accordion.tsx new file mode 100644 index 0000000..9024907 --- /dev/null +++ b/frontend/src/components/ui/accordion.tsx @@ -0,0 +1,64 @@ +import * as React from "react" +import { ChevronDownIcon } from "lucide-react" +import { Accordion as AccordionPrimitive } from "radix-ui" + +import { cn } from "@/lib/utils" + +function Accordion({ + ...props +}: React.ComponentProps) { + return +} + +function AccordionItem({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AccordionTrigger({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + + ) +} + +function AccordionContent({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + +
{children}
+
+ ) +} + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/frontend/src/pages/AnleitungPage.tsx b/frontend/src/pages/AnleitungPage.tsx new file mode 100644 index 0000000..8e5750f --- /dev/null +++ b/frontend/src/pages/AnleitungPage.tsx @@ -0,0 +1,376 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from '@/components/ui/accordion' +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { Badge } from '@/components/ui/badge' +import { + LayoutDashboard, + Search, + FileText, + Stethoscope, + ShieldCheck, + FileBarChart, + FileOutput, + UserCog, +} from 'lucide-react' + +function Term({ children }: { children: React.ReactNode }) { + return {children} +} + +function StepList({ children }: { children: React.ReactNode }) { + return
    {children}
+} + +export function AnleitungPage() { + return ( +
+
+

Anleitung

+

+ So nutzen Sie das DAK-Portal — Schritt-für-Schritt-Anleitungen für die wichtigsten Funktionen. +

+
+ + + + Funktionsübersicht + + + + {/* 1. Dashboard */} + + + + + Dashboard verstehen + + + +

+ Das Dashboard zeigt Ihnen eine Übersicht der wichtigsten Kennzahlen und Trends + auf einen Blick. +

+

Kennzahlen (KPI-Karten)

+
    +
  • Fälle gesamt — Gesamtzahl aller erfassten Fälle im gewählten Jahr. Klicken Sie darauf, um zur Fallliste zu navigieren.
  • +
  • Offene ICD — Fälle, denen noch ein ICD-10 Diagnosecode zugewiesen werden muss. Klick führt zur ICD-Eingabe.
  • +
  • Gutachten gesamt — Anzahl der Fälle mit erstelltem medizinischem Gutachten.
  • +
+

Diagramme

+
    +
  • Wöchentliche Übersicht — Balkendiagramm mit Ablehnungen, fehlenden Rückmeldungen und Gutachten pro Kalenderwoche.
  • +
  • Fallgruppen — Kreisdiagramm mit der Verteilung der Fälle nach medizinischer Fachgruppe (Onkologie, Kardiologie, Intensivmedizin, Gallenblase, Schilddrüse).
  • +
+

Jahresfilter

+

+ Über das Dropdown oben rechts können Sie das Jahr wechseln. Alle Kennzahlen und Diagramme + passen sich automatisch an. +

+
+
+ + {/* 2. Fälle suchen */} + + + + + Fälle suchen und filtern + + + +

+ Auf der Seite Fälle sehen Sie alle erfassten Fälle in einer Tabelle. + Nutzen Sie die Filter, um gezielt Fälle zu finden. +

+

Verfügbare Filter

+
    +
  • Suchfeld — Suche nach Fall-ID oder KVNR (Krankenversichertennummer).
  • +
  • Jahr — Filtert Fälle nach Erfassungsjahr.
  • +
  • Fallgruppe — Filtert nach medizinischer Fachgruppe (z.B. Onkologie, Kardiologie).
  • +
  • ICD-Filter — Zeigt alle Fälle, nur Fälle mit ICD-Code oder nur Fälle ohne ICD-Code.
  • +
+

Tabellenspalten

+
    +
  • Fall-ID — Eindeutige Kennung im Format Jahr-KW-Fallgruppe-KVNR (z.B. 2026-06-onko-A123456789).
  • +
  • KVNR — Krankenversichertennummer des Versicherten.
  • +
  • ICD — ICD-10-Diagnosecode, falls bereits zugewiesen.
  • +
  • Gutachten — Grüner Haken wenn ein Gutachten vorliegt, graues X wenn nicht.
  • +
  • Status — Farbige Badges zeigen den Bearbeitungsstatus (Unterlagen, Gutachten, Abgerechnet, Abgelehnt, Abbruch).
  • +
+ +
  • Geben Sie einen Suchbegriff ein oder wählen Sie einen Filter aus.
  • +
  • Die Tabelle aktualisiert sich automatisch.
  • +
  • Blättern Sie mit Zurück / Weiter durch die Seiten.
  • +
  • Klicken Sie auf eine Zeile, um die Falldetails zu öffnen.
  • +
    +
    +
    + + {/* 3. Falldetails */} + + + + + Falldetails anzeigen + + + +

    + Wenn Sie auf einen Fall klicken, öffnet sich ein Detail-Panel auf der rechten Seite + mit allen verfügbaren Informationen zum Fall. +

    +

    Sichtbare Informationen

    +
      +
    • Fall-ID und CRM-Ticket-ID — Eindeutige Kennungen.
    • +
    • Datum, Kalenderwoche und Jahr — Zeitliche Einordnung.
    • +
    • Status-Badges — Aktueller Bearbeitungsstatus mit farbigen Markierungen.
    • +
    • ICD-Code — Eingabefeld zum Zuweisen eines Diagnosecodes.
    • +
    +

    Personendaten

    +

    + Aus Datenschutzgründen sind Personendaten (Name, Geburtsdatum, Adresse) standardmäßig + nicht sichtbar. Sie können eine zeitlich begrenzte Freigabe beantragen + (siehe Abschnitt „Personendaten anfordern"). +

    +

    KVNR bearbeiten

    + +
  • Klicken Sie auf Bearbeiten im Detail-Panel.
  • +
  • Ändern Sie die KVNR im entsprechenden Feld.
  • +
  • Klicken Sie auf Speichern. Die Fall-ID wird automatisch aktualisiert.
  • +
    +
    +
    + + {/* 4. ICD-Codes */} + + + + + ICD-Codes eingeben + + + +

    + Die Seite ICD-Eingabe zeigt nur Fälle, denen noch kein + ICD-10 Diagnosecode zugewiesen wurde. Hier können Sie + effizient alle offenen Fälle abarbeiten. +

    +

    Was ist ein ICD-Code?

    +

    + ICD-10-GM ist die „Internationale statistische Klassifikation der Krankheiten + und verwandter Gesundheitsprobleme". Beispiele: C50.9 (Bösartige Neubildung + der Brustdrüse), I25.1 (Atherosklerotische Herzkrankheit). +

    +

    ICD-Code zuweisen

    + +
  • Öffnen Sie die Seite ICD-Eingabe über die Sidebar.
  • +
  • Klicken Sie auf einen Fall in der Liste.
  • +
  • Im Detail-Panel finden Sie das Feld ICD-Code.
  • +
  • Geben Sie den Diagnosecode ein (z.B. C50.9).
  • +
  • Klicken Sie auf Speichern. Der Fall verschwindet aus der offenen Liste.
  • +
    +

    Alternativer Weg: ICD-Upload

    +

    + Wenn Sie viele ICD-Codes auf einmal einpflegen möchten, nutzen Sie den + Upload-Bereich auf der Seite Wochenübersicht (siehe Abschnitt weiter unten). +

    +
    +
    + + {/* 5. Freigaben */} + + + + + Personendaten anfordern (Freigaben) + + + +

    + Zum Schutz der Patientendaten sind Personendaten (Name, Geburtsdatum, Kontaktdaten) + standardmäßig ausgeblendet. Wenn Sie diese Daten benötigen, können Sie eine + zeitlich begrenzte Freigabe beantragen. +

    +

    Freigabe beantragen

    + +
  • Öffnen Sie die Falldetails eines Falls.
  • +
  • Klicken Sie auf Personendaten anfordern.
  • +
  • Geben Sie eine Begründung an (z.B. „KVNR-Fehler, Identifikation nötig").
  • +
  • Senden Sie die Anfrage ab. Ein Administrator prüft Ihre Anfrage.
  • +
    +

    Status Ihrer Freigaben

    +

    + Auf der Seite Meine Freigaben in der Sidebar sehen Sie alle Ihre Anfragen: +

    +
      +
    • Ausstehend — Ihre Anfrage wird vom Administrator geprüft.
    • +
    • Genehmigt — Personendaten sind 24 Stunden sichtbar.
    • +
    • Abgelehnt — Der Administrator hat Ihre Anfrage abgelehnt.
    • +
    • Abgelaufen — Die 24-Stunden-Frist ist abgelaufen.
    • +
    +

    Weitere Aktionen

    +
      +
    • Als erledigt markieren — Freigabe vorzeitig beenden, Personendaten werden wieder ausgeblendet.
    • +
    • Erneute Anfrage — Bei Ablehnung oder Ablauf können Sie eine neue Anfrage mit geänderter Begründung stellen.
    • +
    • Verwerfen — Abgelehnte oder abgelaufene Anfragen aus Ihrer Liste entfernen.
    • +
    +
    +
    + + {/* 6. Berichte */} + + + + + Berichte herunterladen + + + +

    + Auf der Seite Berichte finden Sie fertige Auswertungen, die als + Excel-Datei heruntergeladen werden können. +

    +

    Verfügbare Berichtstypen

    +
      +
    • Gesamt — Gesamtauswertung über alle Fallgruppen.
    • +
    • Onko-Intensiv — Auswertung für Onkologie und Intensivmedizin.
    • +
    • Galle-Schild — Auswertung für Gallenblase und Schilddrüse.
    • +
    +

    Bericht herunterladen

    + +
  • Öffnen Sie die Seite Berichte über die Sidebar.
  • +
  • Finden Sie den gewünschten Bericht in der Tabelle (nach Datum, KW und Typ).
  • +
  • Klicken Sie auf das Download-Symbol rechts in der Zeile.
  • +
  • Die Excel-Datei (.xlsx) wird heruntergeladen.
  • +
    +

    Vorschau

    +

    + Klicken Sie auf eine Zeile, um eine Vorschau der Berichtsdaten direkt im Browser anzuzeigen, + ohne die Datei herunterladen zu müssen. +

    +
    +
    + + {/* 7. Wochenübersicht */} + + + + + Wochenübersicht & ICD-Upload + + + +

    + Die Wochenübersicht dient dem Austausch von Falldaten zwischen dem + Portal und der DAK. Excel-Dateien mit Falldaten pro Kalenderwoche können heruntergeladen + und nach Ergänzung der ICD-Codes wieder hochgeladen werden. +

    +

    Wochenübersicht herunterladen

    + +
  • Öffnen Sie Wochenübersicht in der Sidebar.
  • +
  • Finden Sie die gewünschte Übersicht in der Tabelle.
  • +
  • Klicken Sie auf das Download-Symbol.
  • +
  • Die Excel-Datei enthält Fälle mit KVNR, Datum, Status-Flags und eine leere ICD-Spalte.
  • +
    +

    ICD-Codes per Upload einpflegen

    +

    + Wenn Sie die heruntergeladene Datei mit ICD-Codes ergänzt haben, können Sie sie wieder + hochladen. Das System ordnet die Codes automatisch anhand der KVNR zu. +

    + +
  • Scrollen Sie zum Bereich ICD-Codes importieren.
  • +
  • Ziehen Sie die Excel-Datei in den Upload-Bereich oder klicken Sie auf Datei auswählen.
  • +
  • Unterstützte Formate: .xlsx und .xls.
  • +
  • Klicken Sie auf Hochladen.
  • +
  • Nach dem Upload sehen Sie eine Zusammenfassung: Anzahl aktualisierter Codes und eventuelle Fehler.
  • +
    +

    Fehlerbehandlung

    +

    + Falls einzelne Zeilen nicht zugeordnet werden können (z.B. unbekannte KVNR), wird eine + Fehlerliste angezeigt. Klicken Sie auf Details, um die einzelnen Fehlermeldungen + einzusehen. +

    +
    +
    + + {/* 8. Konto */} + + + + + Konto & Sicherheit + + + +

    + Unter Kontoverwaltung in der Sidebar können Sie Ihr Profil, + Ihr Passwort und die Zwei-Faktor-Authentifizierung verwalten. +

    +

    Profil bearbeiten

    + +
  • Öffnen Sie Kontoverwaltung und wählen Sie den Tab Profil.
  • +
  • Ändern Sie Name, Anzeigename, Benutzername oder E-Mail.
  • +
  • Optional: Laden Sie ein Profilbild hoch (JPEG oder PNG).
  • +
  • Klicken Sie auf Speichern.
  • +
    +

    Passwort ändern

    + +
  • Wechseln Sie zum Tab Sicherheit.
  • +
  • Geben Sie Ihr aktuelles Passwort ein.
  • +
  • Geben Sie das neue Passwort ein und bestätigen Sie es. Mindestlänge: 8 Zeichen.
  • +
  • Klicken Sie auf Passwort ändern.
  • +
    +

    Zwei-Faktor-Authentifizierung (2FA)

    +

    + 2FA bietet zusätzlichen Schutz für Ihr Konto. Nach der Aktivierung benötigen Sie + neben Ihrem Passwort einen 6-stelligen Code aus einer Authenticator-App. +

    + +
  • Wechseln Sie zum Tab Zwei-Faktor.
  • +
  • Klicken Sie auf 2FA aktivieren.
  • +
  • Scannen Sie den angezeigten QR-Code mit Ihrer Authenticator-App (z.B. Google Authenticator, Authy).
  • +
  • Geben Sie den 6-stelligen Code aus der App ein und klicken Sie auf Bestätigen.
  • +
    +
    +
    +
    +
    +
    + + {/* Glossary */} + + + Glossar — Wichtige Begriffe + + +
    +
    Fall-ID
    +
    Eindeutige Kennung eines Falls im Format Jahr-KW-Fallgruppe-KVNR.
    + +
    KVNR
    +
    Krankenversichertennummer — die eindeutige Nummer des Versicherten bei der DAK.
    + +
    ICD-10
    +
    Internationale Klassifikation der Krankheiten, 10. Revision, German Modification. Beispiel: C50.9.
    + +
    Fallgruppe
    +
    Medizinische Fachgruppe: Onkologie, Kardiologie, Intensivmedizin, Gallenblase oder Schilddrüse.
    + +
    Gutachten
    +
    Schriftliche medizinische Stellungnahme eines Facharztes zu einem Fall.
    + +
    KW
    +
    Kalenderwoche — ISO-Wochennummer (1–53) zur zeitlichen Einordnung von Fällen.
    + +
    Freigabe
    +
    Zeitlich begrenzte (24h) Genehmigung zur Einsicht in Personendaten eines Falls.
    +
    +
    +
    +
    + ) +}