Document monthly workflow in FAQ

frontend/src/help-content.ts

@@ -4,6 +4,8 @@ export type HelpSection = {
   description: string;
   quickItems: string[];
   details: string[];
+  workflow?: string[];
+  diagram?: string[];
 };
 
 export const helpSections: HelpSection[] = [
@@ -25,6 +27,60 @@ export const helpSections: HelpSection[] = [
       "Der Monatsabschluss sperrt den Monat gegen versehentliche Änderungen. Muss doch noch etwas korrigiert werden, kann der Monat wieder geöffnet werden."
     ]
   },
+  {
+    id: "monatsworkflow",
+    title: "Monatsworkflow",
+    description: "Der empfohlene Ablauf vom Start einer Arbeitssession bis zum sauberen Monatsabschluss.",
+    quickItems: [
+      "Während des Monats: Ticketnummer eingeben, Timer starten, Session beenden und Tätigkeit dokumentieren.",
+      "Vergessene Zeiten: Session manuell auf dem Ticket oder als neues Ticket nachtragen.",
+      "Am Monatsende: offene Bewertungen bearbeiten, Teamspace-Tageswerte pflegen, Kontrolle durchführen und Monat schließen."
+    ],
+    details: [
+      "Der normale Einstieg ist das Ticketfeld im Kopfbereich oder die Seite Session starten. Dort gibst du die Ticketnummer ein und startest den Timer mit Timer starten.",
+      "Während der Arbeit läuft genau ein Timer aktiv. Wechselst du zu einem anderen Timer, pausiert TicketTracker die übrigen Timer automatisch.",
+      "Wenn die Arbeit erledigt ist, beendest du den Timer. Die Zeit stoppt sofort beim Klick auf Beenden; das anschließende Ausfüllen der Tätigkeit zählt nicht mehr zur Sessionzeit.",
+      "Im Beenden-Dialog trägst du die Tätigkeit ein. Wenn das Ticket bereits bekannt ist, übernimmt TicketTracker Organisation und Art automatisch. Bei neuen Tickets wählst du Organisation und Art zusätzlich aus.",
+      "Vergessene Sessions trägst du auf der Seite Session starten im Bereich Session nachtragen nach. Wenn das Ticket bereits in der Auswertung geöffnet ist, nutzt du in der Ticketdetailansicht ebenfalls Session nachtragen; dann ist die Zuordnung zum Ticket bereits vorbelegt.",
+      "Unter Auswertung wählst du Monat oder Tag, öffnest ein Ticket über Öffnen und siehst dort alle Sessions nach Tag gruppiert.",
+      "Im Ticket bewertest du jede Session mit Abgerechnet oder Nicht abrechenbar. Ein erneuter Klick auf den aktiven Status nimmt die Bewertung zurück.",
+      "Im Ticket steht pro Tag das Feld Teamspace. Dort trägst du die Stunden ein, die du für genau dieses Ticket an genau diesem Tag wirklich im CRM beziehungsweise Teamspace erfasst hast. Nach einer Änderung erscheint der Speichern-Button.",
+      "Die Teamspace-Zeit ist ein Tageswert pro Ticket und Benutzer. Monats- und Tagesansicht zeigen denselben Wert; er muss also nur einmal gepflegt werden.",
+      "Am Monatsende öffnest du Monatsabschluss. Dort findest du offene Bewertungen gruppiert nach Ticket, Tage ohne Teamspace-Wert und die Schaltfläche Monat abschließen.",
+      "Offene Bewertungen sind Pflicht: Öffne das Ticket aus der Liste, bewerte die Sessions und kehre zum Monatsabschluss zurück.",
+      "Tage ohne Teamspace-Wert sind eine Prüfliste. Wenn die Arbeit wirklich nicht in Teamspace eingetragen werden soll, nutzt du Zur Kenntnis. Mit Zur Kenntnis anzeigen blendest du solche Einträge wieder ein und kannst die Kenntnisnahme zurücknehmen.",
+      "Kontrolliere vor dem Abschluss die Kennzahl Teamspace im Monatsabschluss. Idealerweise entspricht dieser Wert der Summe, die du im CRM beziehungsweise Teamspace für den Monat eingetragen hast.",
+      "Wenn alle Sessions bewertet sind und die Teamspace-Kontrolle passt, schließt du den Monat mit Monat abschließen. Danach sind Bewertungen und Änderungen für den Monat geschützt, bis der Monat wieder geöffnet wird."
+    ],
+    workflow: [
+      "Ticketfeld im Kopfbereich oder Session starten öffnen.",
+      "Ticketnummer eingeben und Timer starten.",
+      "Arbeit erledigen; bei Bedarf zwischen vorbereiteten Timern wechseln.",
+      "Timer beenden und Tätigkeit speichern.",
+      "Vergessene Zeiten über Session nachtragen ergänzen.",
+      "Auswertung öffnen, Monat wählen und Tickets prüfen.",
+      "Ticket öffnen, Sessions pro Tag bewerten und Teamspace-Tageswerte speichern.",
+      "Monatsabschluss öffnen, offene Bewertungen und Teamspace-Prüfpunkte abarbeiten.",
+      "Teamspace-Summe mit dem CRM vergleichen.",
+      "Monat abschließen."
+    ],
+    diagram: [
+      "Ticketnummer eingeben",
+      "Timer starten",
+      "Arbeit am Ticket erledigen",
+      "Timer beenden",
+      "Tätigkeit eintragen",
+      "Session wird dem Ticket und Benutzer gespeichert",
+      "Optional: vergessene Session nachtragen",
+      "Auswertung öffnen und Ticket prüfen",
+      "Sessions bewerten",
+      "Teamspace pro Ticket-Tag eintragen",
+      "Monatsabschluss öffnen",
+      "Offene Bewertungen und Teamspace-Prüfpunkte klären",
+      "Teamspace-Summe mit CRM vergleichen",
+      "Monat abschließen"
+    ]
+  },
   {
     id: "timer",
     title: "Timer",

frontend/src/views/FaqPage.tsx

@@ -5,6 +5,40 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { helpSections } from "../help-content";
 
+function WorkflowList({ items }: { items: string[] }) {
+  return (
+    <div>
+      <p className="mb-2 text-sm font-medium">Empfohlener Ablauf</p>
+      <ol className="space-y-2 text-sm text-muted-foreground">
+        {items.map((item, index) => (
+          <li key={item} className="flex gap-2">
+            <span className="grid size-5 shrink-0 place-items-center rounded-full bg-primary/10 text-xs font-semibold text-primary">{index + 1}</span>
+            <span>{item}</span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+function FlowDiagram({ items }: { items: string[] }) {
+  return (
+    <div>
+      <p className="mb-2 text-sm font-medium">Ablaufdiagramm</p>
+      <div className="overflow-x-auto rounded-md border bg-muted/20 p-3">
+        <div className="flex min-w-[520px] flex-col items-center gap-2 text-center text-xs text-muted-foreground">
+          {items.map((item, index) => (
+            <div key={item} className="contents">
+              <div className="w-full max-w-[360px] rounded-md border bg-background px-3 py-2 font-medium text-foreground">{item}</div>
+              {index < items.length - 1 ? <div className="text-muted-foreground">↓</div> : null}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function FaqPage() {
   return (
     <div id="top" className="space-y-5">
@@ -63,6 +97,8 @@ export function FaqPage() {
                   ))}
                 </ul>
               </div>
+              {section.workflow ? <WorkflowList items={section.workflow} /> : null}
+              {section.diagram ? <FlowDiagram items={section.diagram} /> : null}
               <div className="flex justify-end">
                 <Button asChild variant="ghost" size="sm">
                   <a href="#top">