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

feat(helpdesk): redesign risk cards with dominant score and clear hierarchy

Browse Source 
Stripe-style layout: large colored score circle on the left, customer
name + risk level label on the right. One-line key facts below
separated by middot (e.g. '5 open · 2 critical · 1 SLA · ↑3').
Removed border-left color accent, pill list, and metric row.
Three visual levels: score (eye-catching), name+level (context),
facts (detail). Clean scannable layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-06 00:52:23 +02:00
parent 1128197022
commit 4d23feb555
2 changed files with 60 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -68,45 +68,35 @@ if (container) {
}
/**
* Build a single customer risk card.
* Build a single customer risk card — Stripe-style: score dominant, one-line facts.
*/
function buildCard(customer) {
const card = h('article', 'helpdesk-risk-card ' + levelClass(customer.risk_level));
card.setAttribute('aria-label', customer.customer_name || customer.customer_no);
// Header: name + score badge
// Row 1: Score (large, colored) + Name + Level
const header = h('div', 'helpdesk-risk-card-header');
const nameEl = h('span', 'helpdesk-risk-card-name', customer.customer_name || customer.customer_no);
const scoreBadge = h('span', 'helpdesk-risk-card-score ' + levelClass(customer.risk_level), String(customer.risk_score));
scoreBadge.setAttribute('aria-label', d('labelScore', 'Risk score') + ': ' + customer.risk_score);
header.appendChild(nameEl);
header.appendChild(scoreBadge);
const scoreEl = h('span', 'helpdesk-risk-card-score ' + levelClass(customer.risk_level), String(customer.risk_score));
header.appendChild(scoreEl);
const info = h('div', 'helpdesk-risk-card-info');
info.appendChild(h('span', 'helpdesk-risk-card-name', customer.customer_name || customer.customer_no));
const levelLabels = { high: d('labelHigh', 'High risk'), medium: d('labelMedium', 'Medium risk'), low: d('labelLow', 'Low risk') };
info.appendChild(h('span', 'helpdesk-risk-card-level ' + levelClass(customer.risk_level), levelLabels[customer.risk_level] || ''));
header.appendChild(info);
card.appendChild(header);
// Key facts as compact pills
// Row 2: One-line key facts separated by ·
const kpis = customer.kpis || {};
const pills = h('ul', 'helpdesk-risk-card-reasons');
const parts = [];
if (kpis.open > 0) parts.push(kpis.open + ' ' + d('labelOpen', 'open'));
if (kpis.critical > 0) parts.push(kpis.critical + ' ' + d('labelCritical', 'critical'));
if (kpis.sla_overdue > 0) parts.push(kpis.sla_overdue + ' SLA');
if (kpis.net_flow > 0) parts.push('↑' + kpis.net_flow);
else if (kpis.net_flow < 0) parts.push('↓' + Math.abs(kpis.net_flow));
if (kpis.open > 0) {
const li = h('li', '', kpis.open + ' ' + d('labelOpen', 'open'));
pills.appendChild(li);
if (parts.length > 0) {
card.appendChild(h('p', 'helpdesk-risk-card-facts', parts.join(' · ')));
}
if (kpis.critical > 0) {
const li = h('li', 'helpdesk-risk-card-reason-warn', kpis.critical + ' ' + d('labelCritical', 'critical'));
pills.appendChild(li);
}
if (kpis.sla_overdue > 0) {
const li = h('li', 'helpdesk-risk-card-reason-warn', kpis.sla_overdue + ' ' + d('labelSlaBreaches', 'SLA'));
pills.appendChild(li);
}
if (kpis.net_flow > 0) {
const li = h('li', 'helpdesk-risk-card-reason-warn', '↑' + kpis.net_flow);
pills.appendChild(li);
} else if (kpis.net_flow < 0) {
pills.appendChild(h('li', '', '↓' + Math.abs(kpis.net_flow)));
}
card.appendChild(pills);
// Click/keyboard to open detail
card.tabIndex = 0;