feat(helpdesk): add Risk Radar dashboard with customer risk scoring
New portfolio view scoring customers 0-100 across five dimensions: - Open pressure (30%): open + critical ticket count - Trend (25%): net ticket flow (created - closed) in period - SLA overdue (20%): tickets exceeding escalation targets - Resolution time (15%): median hours to close (null = neutral) - Inactivity (10%): age of oldest open ticket Card grid with score badges (color-coded high/medium/low), metric pills, driver bars. Click opens detail dialog with all dimensions and open ticket list. Clientside search filter. PBI_LV_Tickets with client-driven paging ($skip/$top, hardcap 5000). Escalation definitions cached separately (30min TTL). Truncated banner when data is capped. New: RiskRadarService, getTicketsForRiskRadar(), 13 PHPUnit tests, permission helpdesk.risk-radar.view, 2 routes, i18n de+en. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -520,6 +520,219 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Risk Radar --- */
|
||||
.helpdesk-risk-radar-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.75);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-risk-radar-search {
|
||||
flex: 1;
|
||||
min-width: 12rem;
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.helpdesk-risk-radar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: calc(var(--app-spacing) * 0.6);
|
||||
margin-top: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card {
|
||||
border: 1px solid var(--app-muted-border-color);
|
||||
border-radius: var(--app-radius, 0.375rem);
|
||||
padding: calc(var(--app-spacing) * 0.6) calc(var(--app-spacing) * 0.75);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.helpdesk-risk-card:hover {
|
||||
border-color: var(--app-primary, #0d6efd);
|
||||
box-shadow: 0 1px 4px color-mix(in srgb, var(--app-primary, #0d6efd) 15%, transparent);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card.helpdesk-risk-level-high {
|
||||
border-left: 3px solid var(--app-danger, #dc3545);
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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 {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
min-width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-score.helpdesk-risk-level-high {
|
||||
background: var(--app-danger, #dc3545);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-score.helpdesk-risk-level-medium {
|
||||
background: var(--app-warning, #f59e0b);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-score.helpdesk-risk-level-low {
|
||||
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-drivers {
|
||||
display: grid;
|
||||
gap: calc(var(--app-spacing) * 0.2);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-driver {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.35);
|
||||
font-size: var(--text-xs, 0.75rem);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-driver-label {
|
||||
min-width: 7ch;
|
||||
color: var(--app-muted-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-driver-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--app-muted-border-color) 50%, transparent);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-driver-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: var(--app-primary, #0d6efd);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-dimensions {
|
||||
display: grid;
|
||||
gap: calc(var(--app-spacing) * 0.4);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-dim {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.5);
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-dim-label {
|
||||
min-width: 10ch;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-dim-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
color: var(--app-muted-color);
|
||||
min-width: 5ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-tickets {
|
||||
width: 100%;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
border: 1px solid var(--app-muted-border-color);
|
||||
border-radius: var(--app-radius, 0.375rem);
|
||||
border-spacing: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-tickets th {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
color: var(--app-muted-color);
|
||||
padding: calc(var(--app-spacing) * 0.3) calc(var(--app-spacing) * 0.5);
|
||||
border-bottom: 1px solid var(--app-muted-border-color);
|
||||
background: color-mix(in srgb, var(--app-muted-border-color) 20%, transparent);
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-tickets td {
|
||||
padding: calc(var(--app-spacing) * 0.3) calc(var(--app-spacing) * 0.5);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--app-muted-border-color) 40%, transparent);
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-tickets tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-ticket-critical td:first-child {
|
||||
color: var(--app-warning, #f59e0b);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-link {
|
||||
display: inline-block;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
color: var(--app-primary, #0d6efd);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Clickable rows — shared between search results and ticket list */
|
||||
.app-clickable-row {
|
||||
cursor: pointer;
|
||||
|
||||
276
modules/helpdesk/web/js/helpdesk-risk-radar.js
Normal file
276
modules/helpdesk/web/js/helpdesk-risk-radar.js
Normal file
@@ -0,0 +1,276 @@
|
||||
/**
|
||||
* Risk Radar — customer portfolio risk view.
|
||||
*/
|
||||
|
||||
const container = document.querySelector('.app-details-container[data-risk-radar-url]');
|
||||
if (container) {
|
||||
const dataUrl = container.dataset.riskRadarUrl;
|
||||
const debitorBaseUrl = container.dataset.debitorBaseUrl || '';
|
||||
const d = (key, fallback) => container.dataset[key] || fallback;
|
||||
|
||||
const elLoading = document.getElementById('radar-loading');
|
||||
const elError = document.getElementById('radar-error');
|
||||
const elEmpty = document.getElementById('radar-empty');
|
||||
const elTruncated = document.getElementById('radar-truncated');
|
||||
const elContent = document.getElementById('radar-content');
|
||||
const elCards = document.getElementById('radar-cards');
|
||||
const elRefresh = container.querySelector('button[name="radar-refresh"]');
|
||||
const periodSelector = document.getElementById('radar-period-selector');
|
||||
const searchInput = document.getElementById('radar-search');
|
||||
const dialog = document.getElementById('radar-detail-dialog');
|
||||
const dialogTitle = document.getElementById('radar-detail-title');
|
||||
const dialogBody = document.getElementById('radar-detail-body');
|
||||
const dialogClose = dialog ? dialog.querySelector('.app-dialog-close') : null;
|
||||
|
||||
let currentPeriod = 90;
|
||||
let lastData = null;
|
||||
|
||||
function showState(state) {
|
||||
if (elLoading) elLoading.hidden = state !== 'loading';
|
||||
if (elError) elError.hidden = state !== 'error';
|
||||
if (elEmpty) elEmpty.hidden = state !== 'empty';
|
||||
if (elContent) elContent.hidden = state !== 'success';
|
||||
}
|
||||
|
||||
function setText(id, value) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = value;
|
||||
}
|
||||
|
||||
function h(tag, cls, text) {
|
||||
const e = document.createElement(tag);
|
||||
if (cls) e.className = cls;
|
||||
if (text !== undefined) e.textContent = text;
|
||||
return e;
|
||||
}
|
||||
|
||||
function levelClass(level) {
|
||||
return 'helpdesk-risk-level-' + level;
|
||||
}
|
||||
|
||||
function formatAge(hours) {
|
||||
if (hours < 24) return hours + 'h';
|
||||
return Math.floor(hours / 24) + 'd';
|
||||
}
|
||||
|
||||
/**
|
||||
* Dimension label lookup from data attributes.
|
||||
*/
|
||||
function dimLabel(id) {
|
||||
const map = {
|
||||
'open_pressure': d('labelOpenPressure', 'Open pressure'),
|
||||
'trend': d('labelTrend', 'Trend'),
|
||||
'sla_overdue': d('labelSla', 'SLA overdue'),
|
||||
'resolution': d('labelResolution', 'Resolution time'),
|
||||
'inactivity': d('labelInactivity', 'Inactivity'),
|
||||
};
|
||||
return map[id] || id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a single customer risk card.
|
||||
*/
|
||||
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
|
||||
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);
|
||||
card.appendChild(header);
|
||||
|
||||
// Core metrics row
|
||||
const metrics = h('div', 'helpdesk-risk-card-metrics');
|
||||
const kpis = customer.kpis || {};
|
||||
|
||||
if (kpis.sla_overdue > 0) {
|
||||
const m = h('span', 'helpdesk-risk-card-metric helpdesk-risk-card-metric-warn');
|
||||
m.textContent = kpis.sla_overdue + ' ' + d('labelOverdue', 'overdue');
|
||||
metrics.appendChild(m);
|
||||
}
|
||||
if (kpis.critical > 0) {
|
||||
const m = h('span', 'helpdesk-risk-card-metric helpdesk-risk-card-metric-warn');
|
||||
m.textContent = kpis.critical + ' critical';
|
||||
metrics.appendChild(m);
|
||||
}
|
||||
const openM = h('span', 'helpdesk-risk-card-metric');
|
||||
openM.textContent = kpis.open + ' ' + d('labelOpen', 'open');
|
||||
metrics.appendChild(openM);
|
||||
|
||||
if (kpis.net_flow !== 0) {
|
||||
const flowM = h('span', 'helpdesk-risk-card-metric');
|
||||
flowM.textContent = (kpis.net_flow > 0 ? '+' : '') + kpis.net_flow + ' ' + d('labelNet', 'net');
|
||||
if (kpis.net_flow > 0) flowM.classList.add('helpdesk-risk-card-metric-warn');
|
||||
metrics.appendChild(flowM);
|
||||
}
|
||||
|
||||
card.appendChild(metrics);
|
||||
|
||||
// Top drivers
|
||||
const drivers = customer.drivers || [];
|
||||
if (drivers.length > 0) {
|
||||
const driverSection = h('div', 'helpdesk-risk-card-drivers');
|
||||
for (const dr of drivers) {
|
||||
if (dr.dimension_score === null || dr.weighted_points <= 0) continue;
|
||||
const row = h('div', 'helpdesk-risk-card-driver');
|
||||
row.appendChild(h('span', 'helpdesk-risk-card-driver-label', dimLabel(dr.id)));
|
||||
const bar = h('div', 'helpdesk-risk-card-driver-bar');
|
||||
const fill = h('div', 'helpdesk-risk-card-driver-fill');
|
||||
fill.style.width = Math.min(100, dr.dimension_score) + '%';
|
||||
bar.appendChild(fill);
|
||||
row.appendChild(bar);
|
||||
driverSection.appendChild(row);
|
||||
}
|
||||
card.appendChild(driverSection);
|
||||
}
|
||||
|
||||
// Click to open detail
|
||||
card.style.cursor = 'pointer';
|
||||
card.addEventListener('click', () => openDetail(customer));
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open detail dialog for a customer.
|
||||
*/
|
||||
function openDetail(customer) {
|
||||
if (!dialog || !dialogTitle || !dialogBody) return;
|
||||
|
||||
dialogTitle.textContent = (customer.customer_name || customer.customer_no) + ' — ' + customer.risk_score + '/100';
|
||||
dialogBody.replaceChildren();
|
||||
|
||||
// All 5 dimensions
|
||||
const dims = customer.dimensions || [];
|
||||
const dimSection = h('div', 'helpdesk-risk-detail-dimensions');
|
||||
for (const dim of dims) {
|
||||
const row = h('div', 'helpdesk-risk-detail-dim');
|
||||
row.appendChild(h('span', 'helpdesk-risk-detail-dim-label', dimLabel(dim.id)));
|
||||
const bar = h('div', 'helpdesk-risk-card-driver-bar');
|
||||
const fill = h('div', 'helpdesk-risk-card-driver-fill');
|
||||
fill.style.width = (dim.dimension_score !== null ? Math.min(100, dim.dimension_score) : 0) + '%';
|
||||
bar.appendChild(fill);
|
||||
row.appendChild(bar);
|
||||
const val = h('span', 'helpdesk-risk-detail-dim-value');
|
||||
val.textContent = dim.dimension_score !== null ? dim.dimension_score + '/100' : '—';
|
||||
row.appendChild(val);
|
||||
dimSection.appendChild(row);
|
||||
}
|
||||
dialogBody.appendChild(dimSection);
|
||||
|
||||
// Open tickets list
|
||||
const tickets = customer.open_tickets || [];
|
||||
if (tickets.length > 0) {
|
||||
dialogBody.appendChild(h('h3', 'helpdesk-support-section-title', d('labelTickets', 'Tickets') + ' (' + tickets.length + ')'));
|
||||
const table = h('table', 'helpdesk-risk-detail-tickets');
|
||||
const thead = h('thead');
|
||||
const headRow = h('tr');
|
||||
headRow.appendChild(h('th', '', 'Ticket'));
|
||||
headRow.appendChild(h('th', '', d('labelSla', 'SLA')));
|
||||
headRow.appendChild(h('th', '', 'Status'));
|
||||
headRow.appendChild(h('th', '', d('labelInactivity', 'Age')));
|
||||
thead.appendChild(headRow);
|
||||
table.appendChild(thead);
|
||||
const tbody = h('tbody');
|
||||
for (const t of tickets) {
|
||||
const tr = h('tr', t.age_hours > 48 ? 'helpdesk-risk-detail-ticket-critical' : '');
|
||||
tr.appendChild(h('td', '', t.no));
|
||||
tr.appendChild(h('td', '', t.escalation_code || '—'));
|
||||
tr.appendChild(h('td', '', t.state));
|
||||
tr.appendChild(h('td', '', formatAge(t.age_hours)));
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
table.appendChild(tbody);
|
||||
dialogBody.appendChild(table);
|
||||
}
|
||||
|
||||
// Link to debitor
|
||||
if (debitorBaseUrl && customer.customer_no) {
|
||||
const link = h('a', 'helpdesk-risk-detail-link', customer.customer_name || customer.customer_no);
|
||||
link.href = debitorBaseUrl + encodeURIComponent(customer.customer_no);
|
||||
link.target = '_blank';
|
||||
link.rel = 'noopener noreferrer';
|
||||
dialogBody.appendChild(link);
|
||||
}
|
||||
|
||||
dialog.showModal();
|
||||
}
|
||||
|
||||
// Dialog close handlers
|
||||
if (dialogClose) dialogClose.addEventListener('click', () => dialog.close());
|
||||
if (dialog) dialog.addEventListener('click', (e) => { if (e.target === dialog) dialog.close(); });
|
||||
|
||||
function renderKpis(summary) {
|
||||
setText('radar-kpi-total', summary.total ?? 0);
|
||||
setText('radar-kpi-high', summary.high ?? 0);
|
||||
setText('radar-kpi-medium', summary.medium ?? 0);
|
||||
setText('radar-kpi-low', summary.low ?? 0);
|
||||
}
|
||||
|
||||
function renderCards(customers) {
|
||||
if (!elCards) return;
|
||||
elCards.replaceChildren();
|
||||
for (const c of customers) elCards.appendChild(buildCard(c));
|
||||
}
|
||||
|
||||
function filterCards(query) {
|
||||
if (!lastData) return;
|
||||
const q = query.toLowerCase().trim();
|
||||
const filtered = q === ''
|
||||
? lastData.customers
|
||||
: lastData.customers.filter(c => (c.customer_name || '').toLowerCase().includes(q) || c.customer_no.toLowerCase().includes(q));
|
||||
renderCards(filtered);
|
||||
}
|
||||
|
||||
async function fetchData(refresh = false) {
|
||||
showState('loading');
|
||||
if (elTruncated) elTruncated.hidden = true;
|
||||
|
||||
const params = new URLSearchParams({ periodDays: String(currentPeriod) });
|
||||
if (refresh) params.set('refresh', '1');
|
||||
|
||||
try {
|
||||
const res = await fetch(dataUrl + '?' + params.toString(), { credentials: 'same-origin' });
|
||||
const json = await res.json();
|
||||
|
||||
if (!json.ok) { showState('error'); return; }
|
||||
if (!json.customers || json.customers.length === 0) { showState('empty'); return; }
|
||||
|
||||
lastData = json;
|
||||
renderKpis(json.summary);
|
||||
renderCards(json.customers);
|
||||
showState('success');
|
||||
|
||||
if (json.meta && json.meta.truncated && elTruncated) {
|
||||
elTruncated.hidden = false;
|
||||
}
|
||||
} catch {
|
||||
showState('error');
|
||||
}
|
||||
}
|
||||
|
||||
if (periodSelector) {
|
||||
periodSelector.addEventListener('change', (e) => {
|
||||
const radio = e.target.closest('input[name="radar-period"]');
|
||||
if (!radio) return;
|
||||
const period = parseInt(radio.value, 10);
|
||||
if (!period || period === currentPeriod) return;
|
||||
currentPeriod = period;
|
||||
fetchData();
|
||||
});
|
||||
}
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', () => filterCards(searchInput.value));
|
||||
}
|
||||
|
||||
if (elRefresh) {
|
||||
elRefresh.addEventListener('click', () => fetchData(true));
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}
|
||||
Reference in New Issue
Block a user