Document monthly workflow in FAQ

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">