From 0325631d02835ecc9c673d97036ef2cb57bbb228 Mon Sep 17 00:00:00 2001
From: mboehmlaender <mboehmlaender@gmx.net>
Date: Wed, 5 Aug 2026 11:38:28 +0200
Subject: [PATCH] Improve analysis group headings

---
 frontend/src/views/AnalysisPage.tsx | 40 ++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/AnalysisPage.tsx b/frontend/src/views/AnalysisPage.tsx
index f834d2e..1c2265b 100644
--- a/frontend/src/views/AnalysisPage.tsx
+++ b/frontend/src/views/AnalysisPage.tsx
@@ -856,16 +856,21 @@ export function AnalysisPage({ onNavigate }: AnalysisPageProps) {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {ticketSections.map((section) => (
+                {ticketSections.map((section, sectionIndex) => (
                   <Fragment key={section.key}>
                     {ticketViewSettings.groupBy !== "none" ? (
-                      <TableRow className="bg-muted/40 hover:bg-muted/40">
-                        <TableCell colSpan={9}>
-                          <div className="flex flex-wrap items-center gap-2">
-                            <span className="font-semibold">{section.label}</span>
-                            <Badge variant="outline">{section.ticketCount} Ticket(s)</Badge>
-                            <Badge variant="outline">{formatMinutes(section.totalMinutes)}</Badge>
-                            {section.openCount > 0 ? <Badge variant="warning">{section.openCount} offen</Badge> : <Badge variant="success">bewertet</Badge>}
+                      <TableRow className={`${sectionIndex > 0 ? "border-t-[12px] border-t-background" : ""} border-b-2 border-border bg-muted/70 hover:bg-muted/70`}>
+                        <TableCell colSpan={9} className="py-0">
+                          <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border/80 bg-card px-3 py-2 shadow-sm">
+                            <div className="flex min-w-0 items-center gap-2">
+                              <span className="rounded-sm bg-primary px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-foreground">Gruppe</span>
+                              <span className="truncate text-base font-semibold">{section.label}</span>
+                            </div>
+                            <div className="flex flex-wrap items-center gap-2">
+                              <Badge variant="outline">{section.ticketCount} Ticket(s)</Badge>
+                              <Badge variant="outline">{formatMinutes(section.totalMinutes)}</Badge>
+                              {section.openCount > 0 ? <Badge variant="warning">{section.openCount} offen</Badge> : <Badge variant="success">bewertet</Badge>}
+                            </div>
                           </div>
                         </TableCell>
                       </TableRow>
@@ -902,14 +907,19 @@ export function AnalysisPage({ onNavigate }: AnalysisPageProps) {
           </div>
 
           <div className="space-y-2 md:hidden">
-            {ticketSections.map((section) => (
-              <div key={section.key} className="space-y-2">
+            {ticketSections.map((section, sectionIndex) => (
+              <div key={section.key} className={`space-y-2 ${ticketViewSettings.groupBy !== "none" && sectionIndex > 0 ? "pt-3" : ""}`}>
                 {ticketViewSettings.groupBy !== "none" ? (
-                  <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/40 px-3 py-2">
-                    <span className="font-semibold">{section.label}</span>
-                    <Badge variant="outline">{section.ticketCount} Ticket(s)</Badge>
-                    <Badge variant="outline">{formatMinutes(section.totalMinutes)}</Badge>
-                    {section.openCount > 0 ? <Badge variant="warning">{section.openCount} offen</Badge> : <Badge variant="success">bewertet</Badge>}
+                  <div className="rounded-md border-2 border-border bg-card px-3 py-2 shadow-sm">
+                    <div className="mb-2 flex min-w-0 items-center gap-2">
+                      <span className="rounded-sm bg-primary px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-foreground">Gruppe</span>
+                      <span className="truncate text-base font-semibold">{section.label}</span>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <Badge variant="outline">{section.ticketCount} Ticket(s)</Badge>
+                      <Badge variant="outline">{formatMinutes(section.totalMinutes)}</Badge>
+                      {section.openCount > 0 ? <Badge variant="warning">{section.openCount} offen</Badge> : <Badge variant="success">bewertet</Badge>}
+                    </div>
                   </div>
                 ) : null}
                 {section.tickets.map((ticket) => (