Add detailed statistics help

frontend/src/help-content.ts

@@ -234,6 +234,144 @@ export const helpSections: HelpSection[] = [
       "Organisationen, Typen und Ticket-Hotspots helfen dabei, Auffälligkeiten im Monat schnell zu finden."
     ]
   },
+  {
+    id: "statistik-getrackt",
+    title: "Statistik: Getrackt",
+    description: "Diese Kennzahl zeigt die gesamte erfasste Session-Zeit im gewählten Monat.",
+    quickItems: [
+      "Summe aller getrackten und nachgetragenen Sessions.",
+      "Zeigt zusätzlich Session- und Ticketanzahl.",
+      "Basiswert für den Vergleich mit Teamspace."
+    ],
+    details: [
+      "Getrackt umfasst alle Sessions des angemeldeten Benutzers im gewählten Monat.",
+      "Dabei ist egal, ob die Session bereits bewertet wurde oder noch offen ist.",
+      "Auch automatisch erzeugte Sessions aus fixen Abrechnungen zählen hier mit.",
+      "Die Ticketanzahl zeigt, auf wie viele unterschiedliche Tickets sich die Sessions verteilen.",
+      "Dieser Wert ist die Ausgangsbasis für Teamspace-Differenzen: Teamspace minus getrackte Session-Zeit ergibt die Differenz."
+    ]
+  },
+  {
+    id: "statistik-teamspace",
+    title: "Statistik: Teamspace",
+    description: "Diese Kennzahl zeigt, wie viele Stunden für die Ticket-Tage im CRM beziehungsweise Teamspace eingetragen wurden.",
+    quickItems: [
+      "Summe aller Teamspace-Tageswerte im Monat.",
+      "Positive oder gleiche Differenz ist grün.",
+      "Negative Differenz ist rot."
+    ],
+    details: [
+      "Teamspace-Werte werden pro Ticket und Tag gepflegt, nicht pro einzelner Session.",
+      "Die Statistik summiert alle Teamspace-Werte des Monats für den angemeldeten Benutzer.",
+      "Eine positive Differenz bedeutet, dass in Teamspace mehr Zeit steht als in den Sessions getrackt wurde.",
+      "Eine negative Differenz bedeutet, dass in Teamspace weniger Zeit steht als getrackt wurde.",
+      "Fehlende Teamspace-Werte können im Monatsabschluss geprüft und bei Bedarf zur Kenntnis genommen werden."
+    ]
+  },
+  {
+    id: "statistik-bewertet",
+    title: "Statistik: Bewertet",
+    description: "Diese Kennzahl zeigt, wie viel der erfassten Arbeit bereits fachlich eingeordnet wurde.",
+    quickItems: [
+      "Abgerechnet und Nicht abrechenbar zählen beide als bewertet.",
+      "Der Prozentwert bezieht sich auf die Sessionanzahl.",
+      "Bewertete Sessions blockieren den Monatsabschluss nicht."
+    ],
+    details: [
+      "Bewertet ist die Summe aus Abgerechnet und Nicht abrechenbar.",
+      "Nicht abrechenbare Sessions fallen also nicht aus der Qualität heraus, sondern gelten als bewusst entschieden.",
+      "Die Zeit zeigt die Summe der bewerteten Session-Minuten.",
+      "Die Prozentwerte werden zusammen mit den offenen Sessions gerundet, sodass bewertet und offen zusammen 100 Prozent ergeben.",
+      "Wenn eine Bewertung zurückgenommen wird, wandert die Session wieder in Offen."
+    ]
+  },
+  {
+    id: "statistik-offen",
+    title: "Statistik: Offen",
+    description: "Diese Kennzahl zeigt Sessions, die noch keine Bewertung haben.",
+    quickItems: [
+      "Offen bedeutet: weder Abgerechnet noch Nicht abrechenbar.",
+      "Offene Sessions blockieren den Monatsabschluss.",
+      "Die Klärung erfolgt in der Ticketdetailansicht."
+    ],
+    details: [
+      "Offen umfasst alle Sessions des Monats ohne Bewertung.",
+      "Diese Sessions müssen vor dem Monatsabschluss entweder als Abgerechnet oder Nicht abrechenbar markiert werden.",
+      "Die offene Zeit zeigt, wie viele Minuten noch bewertet werden müssen.",
+      "Der Monatsabschluss listet offene Bewertungen gruppiert nach Ticket, damit du direkt in die passende Ticketdetailansicht springen kannst.",
+      "Wird eine Bewertung zurückgenommen, steigt die offene Anzahl wieder."
+    ]
+  },
+  {
+    id: "statistik-verlauf",
+    title: "Statistik: Monatsverlauf und Qualität",
+    description: "Diese Card verbindet Tagesverlauf, Teamspace-Linie, Bewertungsstand und Qualitätswerte.",
+    quickItems: [
+      "Balken zeigen getrackte Sessions.",
+      "Die Linie zeigt Teamspace-Werte.",
+      "Der rechte Bereich zeigt Bewertung und Teamspace-Abgleich."
+    ],
+    details: [
+      "Der Monatsverlauf zeigt jeden Tag des Monats. Tage ohne Sessions bleiben leer, damit die Monatsstruktur sichtbar bleibt.",
+      "Die blauen Balken stehen für getrackte Session-Zeit.",
+      "Die grüne Linie steht für Teamspace-Zeit, sofern für den Tag Werte gepflegt wurden.",
+      "Der Bewertungsstand vergleicht bewertete und offene Sessions.",
+      "Der Teamspace-Abgleich zeigt die Gesamtdifferenz zwischen CRM-Werten und getrackter Session-Zeit.",
+      "Manuell und Fix trennen selbst erfasste Sessions von automatisch erzeugten Sessions aus fixen Abrechnungen."
+    ]
+  },
+  {
+    id: "statistik-organisationen",
+    title: "Statistik pro Organisation",
+    description: "Diese Card zeigt Aufwand und Teamspace-Abgleich je Kunde beziehungsweise Organisation.",
+    quickItems: [
+      "Gruppiert nach Organisation.",
+      "Zeigt Sessions, Zeiten und Differenz.",
+      "Die Liste ist paginiert."
+    ],
+    details: [
+      "Die Organisationsstatistik fasst alle Tickets und Sessions einer Organisation im gewählten Monat zusammen.",
+      "Sessions zeigt die Anzahl der einzelnen Arbeitseinträge.",
+      "Zeiten vergleicht getrackte Session-Zeit mit Teamspace-Zeit.",
+      "Die Differenz wird als Teamspace minus Sessions berechnet.",
+      "Der Anteil am Monat zeigt, wie groß der getrackte Aufwand dieser Organisation im Verhältnis zur größten Organisation im Monat ist.",
+      "Bei vielen Organisationen wird die Liste paginiert, damit die Seite kompakt bleibt."
+    ]
+  },
+  {
+    id: "statistik-typen",
+    title: "Statistik: Typen",
+    description: "Diese Card trennt den Monatsaufwand nach Support und Consulting.",
+    quickItems: [
+      "Vergleicht Support und Consulting.",
+      "Zeigt Sessions, Zeiten und Teamspace-Differenz.",
+      "Zeigt zusätzlich Bewertungsstatus je Typ."
+    ],
+    details: [
+      "Die Typenstatistik gruppiert Sessions nach Art.",
+      "Support und Consulting werden getrennt summiert.",
+      "Die Zeitwerte zeigen getrackte Sessions und Teamspace für den jeweiligen Typ.",
+      "Die Differenz folgt derselben Logik wie überall: Teamspace minus getrackte Sessions.",
+      "Die Zeile Abr., Nicht und Offen zeigt, wie viele Sessions dieses Typs bereits bewertet oder noch offen sind."
+    ]
+  },
+  {
+    id: "statistik-hotspots",
+    title: "Ticket-Hotspots",
+    description: "Diese Card zeigt die größten Zeitblöcke des Monats nach Ticket.",
+    quickItems: [
+      "Sortiert nach größtem Zeitaufwand.",
+      "Zeigt Sessions, Teamspace und Differenz.",
+      "Öffnen führt direkt zur Ticketdetailansicht."
+    ],
+    details: [
+      "Ticket-Hotspots helfen, die größten Aufwandstreiber im Monat schnell zu erkennen.",
+      "Die Liste zeigt die wichtigsten Tickets nach getrackter Zeit.",
+      "Pro Ticket siehst du Organisation, Sessionanzahl, aktive Tage, getrackte Zeit, Teamspace-Zeit und Differenz.",
+      "Offene Tickets werden mit einem Warnstatus angezeigt, damit Bewertungen nachgezogen werden können.",
+      "Über Öffnen gelangst du direkt in die Ticketdetailansicht des Monats."
+    ]
+  },
   {
     id: "profil",
     title: "Profil",

frontend/src/views/StatisticsPage.tsx

@@ -304,17 +304,22 @@ function MetricCard({
   value,
   detail,
   icon: Icon,
-  valueClassName = ""
+  valueClassName = "",
+  helpAnchor,
+  helpLabel
 }: {
   label: string;
   value: string | number;
   detail?: ReactNode;
   icon: LucideIcon;
   valueClassName?: string;
+  helpAnchor?: string;
+  helpLabel?: string;
 }) {
   return (
-    <Card>
+    <Card className="relative">
-      <CardContent className="flex items-center gap-3 p-3">
+      {helpAnchor ? <HelpLink anchor={helpAnchor} label={helpLabel ?? `Hilfe zu ${label}`} className="absolute right-2 top-2" /> : null}
+      <CardContent className="flex items-center gap-3 p-3 pr-10">
         <div className="grid size-8 shrink-0 place-items-center rounded-lg border bg-muted/40 text-muted-foreground">
           <Icon className="size-3.5" />
         </div>
@@ -496,6 +501,8 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
           detail={`${totals?.sessions ?? 0} Session(s), ${totals?.tickets ?? 0} Ticket(s)`}
           icon={Clock3}
           valueClassName={trackedTextClass}
+          helpAnchor="statistik-getrackt"
+          helpLabel="Hilfe zur Kennzahl Getrackt"
         />
         <MetricCard
           label="Teamspace"
@@ -503,6 +510,8 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
           detail={<span className={deltaTextClass(totals?.crmDeltaMinutes ?? 0)}>Differenz {formatTeamspaceDelta(totals?.crmDeltaMinutes ?? 0)}</span>}
           icon={TrendingUp}
           valueClassName={teamspaceTextClass}
+          helpAnchor="statistik-teamspace"
+          helpLabel="Hilfe zur Kennzahl Teamspace"
         />
         <MetricCard
           label="Bewertet"
@@ -515,6 +524,8 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
           }
           icon={ListChecks}
           valueClassName={evaluatedTextClass}
+          helpAnchor="statistik-bewertet"
+          helpLabel="Hilfe zur Kennzahl Bewertet"
         />
         <MetricCard
           label="Offen"
@@ -527,18 +538,20 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
           }
           icon={CircleAlert}
           valueClassName={openTextClass}
+          helpAnchor="statistik-offen"
+          helpLabel="Hilfe zur Kennzahl Offen"
         />
       </div>
 
       <Card>
-        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
           <div>
             <CardTitle>Monatsverlauf und Abrechnungsqualität</CardTitle>
             <CardDescription>Getrackter Aufwand pro Tag, Teamspace-Linie und Bewertungsstand in einem Überblick.</CardDescription>
           </div>
           <div className="flex items-center gap-2">
             <Badge variant="outline">{crmCoverage}% Teamspace-Abdeckung</Badge>
-            <HelpLink anchor="statistiken" label="Hilfe zu Statistiken" />
+            <HelpLink anchor="statistik-verlauf" label="Hilfe zu Monatsverlauf und Abrechnungsqualität" />
           </div>
         </CardHeader>
         <CardContent className="grid gap-4 px-4 pb-4 xl:grid-cols-[1.55fr_1fr]">
@@ -612,7 +625,7 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
 
       <div className="grid gap-3 xl:grid-cols-[1.45fr_0.8fr]">
         <Card>
-          <CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+          <CardHeader className="gap-3 p-4 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
             <div>
               <CardTitle>Statistik pro Organisation</CardTitle>
               <CardDescription>Kundenaufwand inklusive Teamspace-Differenz und Anteil am getrackten Monatsaufwand.</CardDescription>
@@ -621,7 +634,7 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
               <Badge variant="outline">
                 {organizationRangeStart}-{organizationRangeEnd} von {stats?.organizations.length ?? 0}
               </Badge>
-              <HelpLink anchor="statistiken" label="Hilfe zur Organisationsstatistik" />
+              <HelpLink anchor="statistik-organisationen" label="Hilfe zur Organisationsstatistik" />
             </div>
           </CardHeader>
           <CardContent className="px-4 pb-4">
@@ -714,7 +727,7 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
                 <CardTitle>Typen</CardTitle>
                 <CardDescription>Support und Consulting im direkten Vergleich.</CardDescription>
               </div>
-              <HelpLink anchor="statistiken" label="Hilfe zu Typenstatistiken" />
+              <HelpLink anchor="statistik-typen" label="Hilfe zu Typenstatistiken" />
             </div>
           </CardHeader>
           <CardContent className="space-y-3 px-4 pb-4">
@@ -745,17 +758,17 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
       </div>
 
       <Card>
-        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
           <div>
             <CardTitle>Ticket-Hotspots</CardTitle>
             <CardDescription>Die größten Zeitblöcke im Monat.</CardDescription>
           </div>
           <div className="flex items-center gap-2">
-            <HelpLink anchor="statistiken" label="Hilfe zu Ticket-Hotspots" />
             <Button variant="secondary" size="sm" onClick={() => onNavigate("/analysis")}>
               Auswertung öffnen
               <ExternalLink className="size-4" />
             </Button>
+            <HelpLink anchor="statistik-hotspots" label="Hilfe zu Ticket-Hotspots" />
           </div>
         </CardHeader>
         <CardContent className="space-y-2 px-4 pb-4">

frontend/src/views/TicketDetailPage.tsx

@@ -550,7 +550,6 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate }: T
             <CardDescription>Wähle für jede Session genau eine Bewertung aus oder lösche falsche Einträge.</CardDescription>
           </div>
           <div className="flex flex-wrap items-center gap-2">
-            <HelpLink anchor="ticketdetail" label="Hilfe zur Ticketdetailansicht" />
             <div className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-2 text-sm">
               <span className="text-muted-foreground">{periodLabel} gesamt</span>
               <span className="font-semibold">{formatMinutes(periodTotalMinutes)}</span>
@@ -559,6 +558,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate }: T
               <span className="text-muted-foreground">{periodType === "month" ? "Teamspace gesamt" : "Teamspace Tag"}</span>
               <span className="font-semibold">{formatMinutes(periodTeamspaceMinutes)}</span>
             </div>
+            <HelpLink anchor="ticketdetail" label="Hilfe zur Ticketdetailansicht" />
           </div>
         </CardHeader>
         <CardContent className="px-4 pb-4">