fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 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

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

@@ -544,7 +544,7 @@
.helpdesk-risk-card { .helpdesk-risk-card {
border: 1px solid var(--app-muted-border-color); border: 1px solid var(--app-muted-border-color);
border-radius: var(--app-radius, 0.375rem); border-radius: var(--app-radius, 0.375rem);
padding: calc(var(--app-spacing) * 0.6) calc(var(--app-spacing) * 0.75); padding: calc(var(--app-spacing) * 0.65) calc(var(--app-spacing) * 0.75);
transition: border-color 0.15s ease, box-shadow 0.15s ease; transition: border-color 0.15s ease, box-shadow 0.15s ease;
cursor: pointer; cursor: pointer;
} }
@@ -554,47 +554,30 @@
box-shadow: 0 1px 4px color-mix(in srgb, var(--app-primary, #0d6efd) 15%, transparent); box-shadow: 0 1px 4px color-mix(in srgb, var(--app-primary, #0d6efd) 15%, transparent);
} }
.helpdesk-risk-card.helpdesk-risk-level-high { .helpdesk-risk-card:focus-visible {
border-left: 3px solid var(--app-danger, #dc3545); outline: 2px solid var(--app-primary, #0d6efd);
} outline-offset: -2px;
.helpdesk-risk-card.helpdesk-risk-level-medium {
border-left: 3px solid var(--app-warning, #f59e0b);
}
.helpdesk-risk-card.helpdesk-risk-level-low {
border-left: 3px solid var(--app-success, #198754);
} }
.helpdesk-risk-card-header { .helpdesk-risk-card-header {
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: space-between; gap: calc(var(--app-spacing) * 0.6);
gap: calc(var(--app-spacing) * 0.5);
margin-bottom: calc(var(--app-spacing) * 0.3);
}
.helpdesk-risk-card-name {
font-weight: 600;
font-size: var(--text-sm, 0.875rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
} }
.helpdesk-risk-card-score { .helpdesk-risk-card-score {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-weight: 700; font-weight: 700;
font-size: 0.8rem; font-size: 1.25rem;
min-width: 2.2rem; min-width: 2.6rem;
height: 2.2rem; height: 2.6rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
color: #fff; color: #fff;
line-height: 1;
} }
.helpdesk-risk-card-score.helpdesk-risk-level-high { .helpdesk-risk-card-score.helpdesk-risk-level-high {
@@ -609,28 +592,41 @@
background: var(--app-success, #198754); background: var(--app-success, #198754);
} }
.helpdesk-risk-card-info {
flex: 1;
min-width: 0;
}
.helpdesk-risk-card-reasons { .helpdesk-risk-card-name {
list-style: none; font-weight: 600;
margin: calc(var(--app-spacing) * 0.25) 0 0; font-size: var(--text-sm, 0.875rem);
padding: 0; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.helpdesk-risk-card-level {
font-size: var(--text-xs, 0.75rem);
font-weight: 500;
}
.helpdesk-risk-card-level.helpdesk-risk-level-high {
color: var(--app-danger, #dc3545);
}
.helpdesk-risk-card-level.helpdesk-risk-level-medium {
color: var(--app-warning, #f59e0b);
}
.helpdesk-risk-card-level.helpdesk-risk-level-low {
color: var(--app-success, #198754);
}
.helpdesk-risk-card-facts {
margin: calc(var(--app-spacing) * 0.35) 0 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;
flex-wrap: wrap;
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 {

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) { function buildCard(customer) {
const card = h('article', 'helpdesk-risk-card ' + levelClass(customer.risk_level)); const card = h('article', 'helpdesk-risk-card ' + levelClass(customer.risk_level));
card.setAttribute('aria-label', customer.customer_name || customer.customer_no); 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 header = h('div', 'helpdesk-risk-card-header');
const nameEl = h('span', 'helpdesk-risk-card-name', customer.customer_name || customer.customer_no); const scoreEl = h('span', 'helpdesk-risk-card-score ' + levelClass(customer.risk_level), String(customer.risk_score));
const scoreBadge = h('span', 'helpdesk-risk-card-score ' + levelClass(customer.risk_level), String(customer.risk_score)); header.appendChild(scoreEl);
scoreBadge.setAttribute('aria-label', d('labelScore', 'Risk score') + ': ' + customer.risk_score); const info = h('div', 'helpdesk-risk-card-info');
header.appendChild(nameEl); info.appendChild(h('span', 'helpdesk-risk-card-name', customer.customer_name || customer.customer_no));
header.appendChild(scoreBadge); 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); card.appendChild(header);
// Key facts as compact pills // Row 2: One-line key facts separated by ·
const kpis = customer.kpis || {}; 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) { if (parts.length > 0) {
const li = h('li', '', kpis.open + ' ' + d('labelOpen', 'open')); card.appendChild(h('p', 'helpdesk-risk-card-facts', parts.join(' · ')));
pills.appendChild(li);
} }
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 // Click/keyboard to open detail
card.tabIndex = 0; card.tabIndex = 0;