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

fix(helpdesk): consolidate card content into compact fact pills

Browse Source 
Remove duplicate metrics row and reason list. Replace with a single
row of compact pills: '5 open', '2 critical' (orange), '1 SLA' (orange),
'↑3' (orange) or '↓2'. No bullet points — pills as flex-wrap row.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-06 00:43:35 +02:00
parent caa1e430a3
commit d5d1e22e87
2 changed files with 32 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -609,36 +609,28 @@
background: var(--app-success, #198754); background: var(--app-success, #198754);
} }
.helpdesk-risk-card-metrics {
display: flex;
flex-wrap: wrap;
gap: calc(var(--app-spacing) * 0.3);
margin-bottom: calc(var(--app-spacing) * 0.35);
font-size: var(--text-xs, 0.75rem);
}
.helpdesk-risk-card-metric {
padding: 0.1em 0.45em;
border-radius: var(--app-border-radius, 0.25rem);
background: color-mix(in srgb, var(--app-muted-border-color) 40%, transparent);
color: var(--app-muted-color);
}
.helpdesk-risk-card-metric-warn {
background: color-mix(in srgb, var(--app-warning, #f59e0b) 15%, transparent);
color: var(--app-warning, #f59e0b);
font-weight: 600;
}
.helpdesk-risk-card-reasons { .helpdesk-risk-card-reasons {
list-style: none; list-style: none;
margin: 0; margin: calc(var(--app-spacing) * 0.25) 0 0;
padding: 0; padding: 0;
font-size: var(--text-xs, 0.75rem); font-size: var(--text-xs, 0.75rem);
color: var(--app-muted-color); color: var(--app-muted-color);
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
gap: 0.15em; gap: calc(var(--app-spacing) * 0.25);
}
.helpdesk-risk-card-reasons li {
padding: 0.1em 0.4em;
border-radius: var(--app-border-radius, 0.25rem);
background: color-mix(in srgb, var(--app-muted-border-color) 30%, transparent);
}
.helpdesk-risk-card-reason-warn {
background: color-mix(in srgb, var(--app-warning, #f59e0b) 15%, transparent);
color: var(--app-warning, #f59e0b);
font-weight: 600;
} }
.helpdesk-risk-card-driver-bar { .helpdesk-risk-card-driver-bar {

62
modules/helpdesk/web/js/helpdesk-risk-radar.js
View File

@@ -83,58 +83,30 @@ if (container) {
header.appendChild(scoreBadge); header.appendChild(scoreBadge);
card.appendChild(header); card.appendChild(header);
// Core metrics row // Key facts as compact pills
const metrics = h('div', 'helpdesk-risk-card-metrics');
const kpis = customer.kpis || {}; const kpis = customer.kpis || {};
const pills = h('ul', 'helpdesk-risk-card-reasons');
if (kpis.sla_overdue > 0) { if (kpis.open > 0) {
const m = h('span', 'helpdesk-risk-card-metric helpdesk-risk-card-metric-warn'); const li = h('li', '', kpis.open + ' ' + d('labelOpen', 'open'));
m.textContent = kpis.sla_overdue + ' ' + d('labelOverdue', 'overdue'); pills.appendChild(li);
metrics.appendChild(m);
} }
if (kpis.critical > 0) { if (kpis.critical > 0) {
const m = h('span', 'helpdesk-risk-card-metric helpdesk-risk-card-metric-warn'); const li = h('li', 'helpdesk-risk-card-reason-warn', kpis.critical + ' ' + d('labelCritical', 'critical'));
m.textContent = kpis.critical + ' ' + d('labelCritical', 'critical'); pills.appendChild(li);
metrics.appendChild(m);
} }
const openM = h('span', 'helpdesk-risk-card-metric'); if (kpis.sla_overdue > 0) {
openM.textContent = kpis.open + ' ' + d('labelOpen', 'open'); const li = h('li', 'helpdesk-risk-card-reason-warn', kpis.sla_overdue + ' ' + d('labelSlaBreaches', 'SLA'));
metrics.appendChild(openM); pills.appendChild(li);
}
if (kpis.net_flow !== 0) { if (kpis.net_flow > 0) {
const flowM = h('span', 'helpdesk-risk-card-metric'); const li = h('li', 'helpdesk-risk-card-reason-warn', '↑' + kpis.net_flow);
const arrow = kpis.net_flow > 0 ? '↑' : '↓'; pills.appendChild(li);
flowM.textContent = arrow + Math.abs(kpis.net_flow); } else if (kpis.net_flow < 0) {
if (kpis.net_flow > 0) flowM.classList.add('helpdesk-risk-card-metric-warn'); pills.appendChild(h('li', '', '↓' + Math.abs(kpis.net_flow)));
metrics.appendChild(flowM);
} }
card.appendChild(metrics); card.appendChild(pills);
// Why at risk — concrete facts
const kpiOpen = kpis.open || 0;
const kpiCritical = kpis.critical || 0;
const kpiSla = kpis.sla_overdue || 0;
const kpiNet = kpis.net_flow || 0;
const kpiOldest = kpis.oldest_open_hours || 0;
const reasons = [];
if (kpiOpen > 0) {
let text = kpiOpen + ' ' + d('labelOpen', 'open');
if (kpiCritical > 0) text += ', ' + kpiCritical + ' ' + d('labelCritical', 'critical');
reasons.push(text);
}
if (kpiNet > 0) reasons.push('↑' + kpiNet + ' ' + d('labelMoreThanResolved', 'more than resolved'));
if (kpiSla > 0) reasons.push(kpiSla + ' ' + d('labelSlaBreaches', 'SLA breaches'));
if (kpiOldest > 168) reasons.push(d('labelOldestTicket', 'Oldest ticket') + ' ' + formatAge(kpiOldest));
if (reasons.length > 0) {
const reasonList = h('ul', 'helpdesk-risk-card-reasons');
for (const r of reasons) {
reasonList.appendChild(h('li', '', r));
}
card.appendChild(reasonList);
}
// Click/keyboard to open detail // Click/keyboard to open detail
card.tabIndex = 0; card.tabIndex = 0;