From 82266fb289677d863f690a881afc4559afd5868b Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Sun, 5 Apr 2026 20:13:26 +0200
Subject: [PATCH] fix(helpdesk): unify resolution time layout with ranked list
 pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the custom Ø/Min/Max column layout with the same ranked list
component used for top customers and categories. All three columns
now use identical markup and styling for visual consistency.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 modules/helpdesk/web/css/helpdesk.css    | 30 ++++++----------------
 modules/helpdesk/web/js/helpdesk-team.js | 32 +++++++++++-------------
 2 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/modules/helpdesk/web/css/helpdesk.css b/modules/helpdesk/web/css/helpdesk.css
index 4cf7758..6237e8b 100644
--- a/modules/helpdesk/web/css/helpdesk.css
+++ b/modules/helpdesk/web/css/helpdesk.css
@@ -328,28 +328,6 @@
     margin-bottom: calc(var(--app-spacing) * 0.3);
   }
 
-  .helpdesk-team-perf-times {
-    display: flex;
-    gap: calc(var(--app-spacing) * 0.75);
-  }
-
-  .helpdesk-team-perf-time {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .helpdesk-team-perf-time-value {
-    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    line-height: 1.2;
-  }
-
-  .helpdesk-team-perf-time-label {
-    font-size: var(--text-xs, 0.75rem);
-    color: var(--app-muted-color);
-  }
-
   .helpdesk-team-perf-ranked {
     list-style: none;
     margin: 0;
@@ -374,6 +352,14 @@
     min-width: 1.5ch;
   }
 
+  .helpdesk-team-perf-ranked-plain {
+    counter-reset: none;
+  }
+
+  .helpdesk-team-perf-ranked-plain li::before {
+    display: none;
+  }
+
   .helpdesk-team-perf-ranked-name {
     flex: 1;
     overflow: hidden;
diff --git a/modules/helpdesk/web/js/helpdesk-team.js b/modules/helpdesk/web/js/helpdesk-team.js
index 9b39c57..6f76654 100644
--- a/modules/helpdesk/web/js/helpdesk-team.js
+++ b/modules/helpdesk/web/js/helpdesk-team.js
@@ -208,27 +208,23 @@ if (container) {
     // Stats grid
     const grid = h('div', 'helpdesk-team-perf-grid');
 
-    // Resolution time KPIs
+    // Resolution time as ranked list (same pattern as top customers/categories)
     const timeStats = h('div', 'helpdesk-team-perf-stat');
     timeStats.appendChild(h('span', 'helpdesk-team-perf-stat-label', container.dataset.labelResolutionTime || 'Resolution time'));
 
-    const times = h('div', 'helpdesk-team-perf-times');
-    const avgEl = h('div', 'helpdesk-team-perf-time');
-    avgEl.appendChild(h('span', 'helpdesk-team-perf-time-value', formatResolution(perf.avg_resolution_hours)));
-    avgEl.appendChild(h('span', 'helpdesk-team-perf-time-label', 'Ø'));
-    times.appendChild(avgEl);
-
-    const minEl = h('div', 'helpdesk-team-perf-time');
-    minEl.appendChild(h('span', 'helpdesk-team-perf-time-value', formatResolution(perf.min_resolution_hours)));
-    minEl.appendChild(h('span', 'helpdesk-team-perf-time-label', 'Min'));
-    times.appendChild(minEl);
-
-    const maxEl = h('div', 'helpdesk-team-perf-time');
-    maxEl.appendChild(h('span', 'helpdesk-team-perf-time-value', formatResolution(perf.max_resolution_hours)));
-    maxEl.appendChild(h('span', 'helpdesk-team-perf-time-label', 'Max'));
-    times.appendChild(maxEl);
-
-    timeStats.appendChild(times);
+    const timeList = h('ol', 'helpdesk-team-perf-ranked helpdesk-team-perf-ranked-plain');
+    const timeItems = [
+      ['Ø', formatResolution(perf.avg_resolution_hours)],
+      ['Min', formatResolution(perf.min_resolution_hours)],
+      ['Max', formatResolution(perf.max_resolution_hours)],
+    ];
+    for (const [label, value] of timeItems) {
+      const li = h('li');
+      li.appendChild(h('span', 'helpdesk-team-perf-ranked-name', label));
+      li.appendChild(h('span', 'helpdesk-team-perf-ranked-count', value));
+      timeList.appendChild(li);
+    }
+    timeStats.appendChild(timeList);
     grid.appendChild(timeStats);
 
     // Top customers