fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(helpdesk): unify resolution time layout with ranked list pattern

Browse Source 
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>
This commit is contained in:
Felix Schneider
2026-04-05 20:13:26 +02:00
parent 4ce7a32bfc
commit 82266fb289
2 changed files with 22 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
modules/helpdesk/web/css/helpdesk.css
View File

@@ -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;

32
modules/helpdesk/web/js/helpdesk-team.js
View File

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