From ad0bcaf8c15502cd8709dd188dae41941a41541e Mon Sep 17 00:00:00 2001 From: CCS Admin Date: Fri, 27 Feb 2026 16:12:59 +0000 Subject: [PATCH] feat: add tooltips and explanatory text for DAK-Mitarbeiter pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add contextual tooltips on table headers, KPI cards, status badges, and action buttons across Dashboard, Cases, Wochenübersicht, Reports, and My Disclosures pages. Wrap global TooltipProvider in App.tsx. Co-Authored-By: Claude Opus 4.6 --- frontend/src/App.tsx | 3 + frontend/src/pages/AdminInvitationsPage.tsx | 4 +- frontend/src/pages/CasesPage.tsx | 144 +++++++++++++++++--- frontend/src/pages/DashboardPage.tsx | 27 +++- frontend/src/pages/MyDisclosuresPage.tsx | 115 +++++++++++----- frontend/src/pages/ReportsPage.tsx | 41 +++++- frontend/src/pages/WochenuebersichtPage.tsx | 80 ++++++++++- 7 files changed, 347 insertions(+), 67 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index fac4bcf..7d32f83 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,5 +1,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom' +import { TooltipProvider } from '@/components/ui/tooltip' import { AuthProvider } from '@/context/AuthContext' import { ProtectedRoute } from '@/components/layout/ProtectedRoute' import { AppLayout } from '@/components/layout/AppLayout' @@ -33,6 +34,7 @@ const queryClient = new QueryClient({ function App() { return ( + @@ -58,6 +60,7 @@ function App() { + ) } diff --git a/frontend/src/pages/AdminInvitationsPage.tsx b/frontend/src/pages/AdminInvitationsPage.tsx index 6f09ee1..1803444 100644 --- a/frontend/src/pages/AdminInvitationsPage.tsx +++ b/frontend/src/pages/AdminInvitationsPage.tsx @@ -18,7 +18,7 @@ import { import { Skeleton } from '@/components/ui/skeleton' import { Alert, AlertDescription } from '@/components/ui/alert' import { - Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, + Tooltip, TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip' export function AdminInvitationsPage() { @@ -120,7 +120,6 @@ export function AdminInvitationsPage() { ))} ) : invitations.length > 0 ? ( - @@ -177,7 +176,6 @@ export function AdminInvitationsPage() { })}
- ) : (

Keine Einladungen vorhanden. diff --git a/frontend/src/pages/CasesPage.tsx b/frontend/src/pages/CasesPage.tsx index 98d9647..37ef15d 100644 --- a/frontend/src/pages/CasesPage.tsx +++ b/frontend/src/pages/CasesPage.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useCallback, useRef } from 'react' import { - Search, ChevronLeft, ChevronRight, Save, CheckCircle, XCircle, Pencil, X, + Search, ChevronLeft, ChevronRight, Save, CheckCircle, XCircle, Pencil, X, Info, } from 'lucide-react' import type { Case } from '@/types' import { useAuth } from '@/context/AuthContext' @@ -19,6 +19,9 @@ import { } from '@/components/ui/sheet' import { Skeleton } from '@/components/ui/skeleton' import { Alert, AlertDescription } from '@/components/ui/alert' +import { + Tooltip, TooltipContent, TooltipTrigger, +} from '@/components/ui/tooltip' import { CASE_SECTIONS } from './cases/fieldConfig' import { useInlineEdit } from './cases/useInlineEdit' import { EditableField } from './cases/EditableField' @@ -107,9 +110,16 @@ export function CasesPage({ pendingIcdOnly = false }: CasesPageProps) { return (

-

- {pendingIcdOnly ? 'ICD-Eingabe' : 'Fälle'} -

+
+

+ {pendingIcdOnly ? 'ICD-Eingabe' : 'Fälle'} +

+ {pendingIcdOnly && ( +

+ Fälle, die noch einen ICD-10-Diagnosecode benötigen. Klicken Sie auf einen Fall, um den Code einzugeben. +

+ )} +
{/* Filter bar */} {!pendingIcdOnly && ( @@ -169,15 +179,65 @@ export function CasesPage({ pendingIcdOnly = false }: CasesPageProps) { - Fall-ID + + + + + Fall-ID + + + + Eindeutige Kennung: Jahr-KW-Fallgruppe-KVNR + + Datum {isAdmin && Nachname} {isAdmin && Vorname} - KVNR + + + + + KVNR + + + + Krankenversichertennummer des Versicherten + + Fallgruppe - ICD - Gutachten - Status + + + + + ICD + + + + Internationale Klassifikation der Krankheiten (Diagnosecode) + + + + + + + Gutachten + + + + Schriftliche medizinische Stellungnahme vorhanden + + + + + + + Status + + + + Aktueller Bearbeitungsstatus des Falls + + @@ -272,11 +332,46 @@ export function CasesPage({ pendingIcdOnly = false }: CasesPageProps) { function StatusBadges({ c }: { c: Case }) { return (
- {c.unterlagen && Unterlagen} - {c.gutachten && Gutachten} - {c.abgerechnet && Abgerechnet} - {c.ablehnung && Abgelehnt} - {c.abbruch && Abbruch} + {c.unterlagen && ( + + + Unterlagen + + Patientenunterlagen wurden eingereicht + + )} + {c.gutachten && ( + + + Gutachten + + Medizinisches Gutachten wurde erstellt + + )} + {c.abgerechnet && ( + + + Abgerechnet + + Fall wurde abgerechnet + + )} + {c.ablehnung && ( + + + Abgelehnt + + Leistung wurde abgelehnt + + )} + {c.abbruch && ( + + + Abbruch + + Verfahren wurde abgebrochen + + )}
) } @@ -410,7 +505,15 @@ function CaseDetail({ caseData }: { caseData: Case }) { {/* ICD section — own endpoint with validation */}
- + + + + + ICD-10-GM Diagnoseschlüssel, z.B. C50.9 für bösartige Neubildung der Brustdrüse +
- + + + + + Zeitlich begrenzte Freigabe (24h) der Personendaten beantragen + {open && (

diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx index 91d3910..8ab4f4d 100644 --- a/frontend/src/pages/DashboardPage.tsx +++ b/frontend/src/pages/DashboardPage.tsx @@ -4,7 +4,7 @@ import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, PieChart, Pie, Cell, ResponsiveContainer, } from 'recharts' -import { FileText, Clock, Code, Stethoscope } from 'lucide-react' +import { FileText, Clock, Code, Stethoscope, Info } from 'lucide-react' import { useAuth } from '@/context/AuthContext' import { useDashboard } from '@/hooks/useDashboard' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' @@ -12,6 +12,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select' import { Skeleton } from '@/components/ui/skeleton' +import { + Tooltip as UiTooltip, TooltipContent, TooltipTrigger, +} from '@/components/ui/tooltip' const FALLGRUPPEN_LABELS: Record = { onko: 'Onkologie', @@ -81,24 +84,28 @@ export function DashboardPage() {

} href="/cases" /> } href="/icd" /> } href={isAdmin ? '/coding' : undefined} /> } href="/gutachten-statistik" @@ -115,6 +122,7 @@ export function DashboardPage() { Wöchentliche Übersicht +

Ablehnungen, fehlende Rückmeldungen und Gutachten pro Kalenderwoche

 @@ -165,6 +173,7 @@ export function DashboardPage() { Fallgruppen +

Verteilung der Fälle nach medizinischer Fachgruppe

 @@ -212,11 +221,23 @@ export function DashboardPage() { ) } -function KpiCard({ title, value, icon, href }: { title: string; value: number; icon: React.ReactNode; href?: string }) { +function KpiCard({ title, tooltip, value, icon, href }: { title: string; tooltip?: string; value: number; icon: React.ReactNode; href?: string }) { const card = ( - {title} + + {tooltip ? ( + + + + {title} + + + + {tooltip} + + ) : title} + {icon} diff --git a/frontend/src/pages/MyDisclosuresPage.tsx b/frontend/src/pages/MyDisclosuresPage.tsx index 3569ed4..38ebd6c 100644 --- a/frontend/src/pages/MyDisclosuresPage.tsx +++ b/frontend/src/pages/MyDisclosuresPage.tsx @@ -14,21 +14,52 @@ import { useMyDisclosures, useRevokeDisclosure, useDeleteDisclosure, useRequestDisclosure, } from '@/hooks/useDisclosures' +import { + Tooltip, TooltipContent, TooltipTrigger, +} from '@/components/ui/tooltip' import type { DisclosureRequest } from '@/types' function statusBadge(dr: DisclosureRequest) { const now = new Date() if (dr.status === 'pending') { - return Ausstehend + return ( + + + Ausstehend + + Ihre Anfrage wird vom Administrator geprüft + + ) } if (dr.status === 'rejected') { - return Abgelehnt + return ( + + + Abgelehnt + + Der Administrator hat Ihre Anfrage abgelehnt + + ) } // approved if (dr.expires_at && new Date(dr.expires_at) <= now) { - return Abgelaufen + return ( + + + Abgelaufen + + Die Freigabe ist nicht mehr gültig + + ) } - return Genehmigt + return ( + + + Genehmigt + + Personendaten sind bis zum Ablaufdatum sichtbar + + ) } function isActive(dr: DisclosureRequest): boolean { @@ -67,7 +98,12 @@ export function MyDisclosuresPage() { return (
-

Meine Freigaben

+
+

Meine Freigaben

+

+ Übersicht Ihrer Freigabe-Anfragen für Personendaten. Genehmigte Freigaben sind 24 Stunden gültig. +

+
{isLoading ? (
@@ -105,36 +141,51 @@ export function MyDisclosuresPage() {
{isActive(dr) && ( - + + + + + Freigabe vorzeitig beenden — Personendaten werden wieder ausgeblendet + )} {isInactive(dr) && ( <> - - + + + + + Neue Freigabe mit gleicher oder geänderter Begründung beantragen + + + + + + Diese Freigabe-Anfrage aus Ihrer Liste entfernen + )}
diff --git a/frontend/src/pages/ReportsPage.tsx b/frontend/src/pages/ReportsPage.tsx index 3c76a8e..3f1af40 100644 --- a/frontend/src/pages/ReportsPage.tsx +++ b/frontend/src/pages/ReportsPage.tsx @@ -1,5 +1,5 @@ import { Fragment, useState } from 'react' -import { ChevronDown, ChevronRight, Download, FileSpreadsheet, Loader2, Plus, Trash2 } from 'lucide-react' +import { ChevronDown, ChevronRight, Download, FileSpreadsheet, Info, Loader2, Plus, Trash2 } from 'lucide-react' import api from '@/services/api' import { useAuth } from '@/context/AuthContext' import { useReports, useGenerateReport, useDeleteReports, useReportData } from '@/hooks/useReports' @@ -17,6 +17,9 @@ import { } from '@/components/ui/select' import { Skeleton } from '@/components/ui/skeleton' import { Alert, AlertDescription } from '@/components/ui/alert' +import { + Tooltip, TooltipContent, TooltipTrigger, +} from '@/components/ui/tooltip' const REPORT_TYPES = [ { value: 'gesamt', label: 'Gesamt' }, @@ -253,10 +256,40 @@ export function ReportsPage() { /> )} - Berichtsdatum + + + + + Berichtsdatum + + + + Stichtag des Berichts + + Jahr - KW - Typ + + + + + KW + + + + Kalenderwoche des Berichtszeitraums + + + + + + + Typ + + + + Berichtstyp: Gesamt, Onko-Intensiv oder Galle-Schild + + Erstellt am Aktion diff --git a/frontend/src/pages/WochenuebersichtPage.tsx b/frontend/src/pages/WochenuebersichtPage.tsx index b9f9501..e3f0132 100644 --- a/frontend/src/pages/WochenuebersichtPage.tsx +++ b/frontend/src/pages/WochenuebersichtPage.tsx @@ -1,5 +1,5 @@ import { Fragment, useCallback, useState } from 'react' -import { ChevronDown, ChevronRight, Download, FileSpreadsheet, Loader2, Plus, Upload } from 'lucide-react' +import { ChevronDown, ChevronRight, Download, FileSpreadsheet, Info, Loader2, Plus, Upload } from 'lucide-react' import api from '@/services/api' import { useAuth } from '@/context/AuthContext' import { @@ -21,6 +21,9 @@ import { } from '@/components/ui/table' import { Skeleton } from '@/components/ui/skeleton' import { Alert, AlertDescription } from '@/components/ui/alert' +import { + Tooltip, TooltipContent, TooltipTrigger, +} from '@/components/ui/tooltip' const EXPORT_TYPES = [ { value: 'c2s', label: 'Onko-Intensiv (c2s)' }, @@ -390,6 +393,9 @@ export function WochenuebersichtPage() { Laden Sie die ausgefüllte Wochenübersicht mit den ergänzten ICD-Codes hoch. Die ICD-Codes werden automatisch den Fällen anhand der KVNR zugeordnet.

+

+ Unterstützte Formate: .xlsx, .xls — Die KVNR wird zum Abgleich der Fälle verwendet. +

}) {
- KVNR + + + + + KVNR + + + + Krankenversichertennummer + + Datum - Erstgespräch - Abbruch - Unterlagen - Gutachten + + + + + Erstgespräch + + + + Initialkontakt mit dem Versicherten erfolgt + + + + + + + Abbruch + + + + Zweitmeinung/Vorbereitung bei Ablehnung oder Abbruch + + + + + + + Unterlagen + + + + Zweitmeinung/Vorbereitung mit Erteilung + + + + + + + Gutachten + + + + Schriftliche Dokumentation (Gutachten) erstellt + + {fg1Label} {fg2Label} - ICD-10 + + + + + ICD-10 + + + + Internationale Klassifikation der Krankheiten + +