269 lines
9.2 KiB
JavaScript
269 lines
9.2 KiB
JavaScript
/**
|
|
* Risk Radar — customer portfolio risk view.
|
|
*/
|
|
import { getJson } from '/js/core/app-http.js';
|
|
import { resolveHost } from '/js/core/app-dom.js';
|
|
|
|
const EMPTY_API = Object.freeze({ destroy: () => {} });
|
|
|
|
const resolveContainer = (root) => {
|
|
const host = resolveHost(root);
|
|
if (host instanceof HTMLElement && host.matches('.app-details-container[data-app-component="helpdesk-risk-radar"]')) {
|
|
return host;
|
|
}
|
|
return host.querySelector('.app-details-container[data-app-component="helpdesk-risk-radar"]');
|
|
};
|
|
|
|
export function initHelpdeskRiskRadar(root = document) {
|
|
const container = resolveContainer(root);
|
|
if (!container) {
|
|
return EMPTY_API;
|
|
}
|
|
|
|
const listenerController = new AbortController();
|
|
const requestController = new AbortController();
|
|
const on = (target, type, handler, options = {}) => {
|
|
if (!target || typeof target.addEventListener !== 'function') {
|
|
return;
|
|
}
|
|
target.addEventListener(type, handler, { ...options, signal: listenerController.signal });
|
|
};
|
|
|
|
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 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('.close') : null;
|
|
|
|
let currentPeriod = 90;
|
|
|
|
const 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';
|
|
};
|
|
|
|
const h = (tag, cls, text) => {
|
|
const element = document.createElement(tag);
|
|
if (cls) element.className = cls;
|
|
if (text !== undefined) element.textContent = text;
|
|
return element;
|
|
};
|
|
|
|
const levelClass = (level) => `helpdesk-risk-level-${level}`;
|
|
|
|
const formatAge = (hours) => {
|
|
if (hours < 24) return `${hours}h`;
|
|
return `${Math.floor(hours / 24)}d`;
|
|
};
|
|
|
|
const dimLabel = (id) => {
|
|
const map = {
|
|
'open_pressure': d('labelOpenPressure', 'Open pressure'),
|
|
'trend': d('labelTrend', 'Trend'),
|
|
'sla_overdue': d('labelSla', 'SLA overdue'),
|
|
'inactivity': d('labelInactivity', 'Inactivity'),
|
|
};
|
|
return map[id] || id;
|
|
};
|
|
|
|
const openDetail = (customer) => {
|
|
if (!dialog || !dialogTitle || !dialogBody) {
|
|
return;
|
|
}
|
|
|
|
dialogTitle.textContent = `${customer.customer_name || customer.customer_no} — ${customer.risk_score}/100`;
|
|
dialogBody.replaceChildren();
|
|
|
|
const dims = customer.dimensions || [];
|
|
const dimTable = h('table', 'helpdesk-risk-detail-tickets');
|
|
const dimHead = h('thead');
|
|
const dimHeadRow = h('tr');
|
|
dimHeadRow.appendChild(h('th', '', 'Dimension'));
|
|
dimHeadRow.appendChild(h('th', '', d('labelScore', 'Score')));
|
|
dimHead.appendChild(dimHeadRow);
|
|
dimTable.appendChild(dimHead);
|
|
const dimBody = h('tbody');
|
|
for (const dim of dims) {
|
|
const tr = h('tr');
|
|
tr.appendChild(h('td', '', dimLabel(dim.id)));
|
|
const points = Math.round(dim.weighted_points || 0);
|
|
tr.appendChild(h('td', '', `${points} / ${dim.weight}`));
|
|
dimBody.appendChild(tr);
|
|
}
|
|
const totalTr = h('tr');
|
|
const totalLabel = h('td', '');
|
|
totalLabel.style.fontWeight = '700';
|
|
totalLabel.textContent = 'Total';
|
|
totalTr.appendChild(totalLabel);
|
|
const totalVal = h('td', '');
|
|
totalVal.style.fontWeight = '700';
|
|
totalVal.textContent = `${customer.risk_score} / 100`;
|
|
totalTr.appendChild(totalVal);
|
|
dimBody.appendChild(totalTr);
|
|
dimTable.appendChild(dimBody);
|
|
dialogBody.appendChild(dimTable);
|
|
|
|
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', '', d('labelTicket', 'Ticket')));
|
|
headRow.appendChild(h('th', '', d('labelSla', 'SLA')));
|
|
headRow.appendChild(h('th', '', d('labelStatus', 'Status')));
|
|
headRow.appendChild(h('th', '', d('labelAge', 'Age')));
|
|
thead.appendChild(headRow);
|
|
table.appendChild(thead);
|
|
const tbody = h('tbody');
|
|
for (const ticket of tickets) {
|
|
const tr = h('tr', ticket.age_hours > 48 ? 'helpdesk-risk-detail-ticket-critical' : '');
|
|
tr.appendChild(h('td', '', ticket.no));
|
|
tr.appendChild(h('td', '', ticket.escalation_code || '—'));
|
|
tr.appendChild(h('td', '', ticket.state));
|
|
tr.appendChild(h('td', '', formatAge(ticket.age_hours)));
|
|
tbody.appendChild(tr);
|
|
}
|
|
table.appendChild(tbody);
|
|
dialogBody.appendChild(table);
|
|
}
|
|
|
|
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();
|
|
};
|
|
|
|
const buildCard = (customer) => {
|
|
const card = h('article', `helpdesk-risk-card ${levelClass(customer.risk_level)}`);
|
|
card.setAttribute('aria-label', customer.customer_name || customer.customer_no);
|
|
|
|
const header = h('div', 'helpdesk-risk-card-header');
|
|
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', levelLabels[customer.risk_level] || ''));
|
|
header.appendChild(info);
|
|
const scoreEl = h('span', `helpdesk-risk-card-score ${levelClass(customer.risk_level)}`, String(customer.risk_score));
|
|
header.appendChild(scoreEl);
|
|
card.appendChild(header);
|
|
|
|
const kpis = customer.kpis || {};
|
|
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 (parts.length > 0) {
|
|
card.appendChild(h('p', 'helpdesk-risk-card-facts', parts.join(' · ')));
|
|
}
|
|
|
|
card.tabIndex = 0;
|
|
on(card, 'click', () => openDetail(customer));
|
|
on(card, 'keydown', (event) => {
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
event.preventDefault();
|
|
openDetail(customer);
|
|
}
|
|
});
|
|
|
|
return card;
|
|
};
|
|
|
|
on(dialogClose, 'click', () => {
|
|
dialog?.close();
|
|
});
|
|
on(dialog, 'click', (event) => {
|
|
if (event.target === dialog) {
|
|
dialog.close();
|
|
}
|
|
});
|
|
|
|
const renderCards = (customers) => {
|
|
if (!elCards) {
|
|
return;
|
|
}
|
|
elCards.replaceChildren();
|
|
for (const customer of customers) {
|
|
elCards.appendChild(buildCard(customer));
|
|
}
|
|
};
|
|
|
|
const fetchData = async (refresh = false) => {
|
|
showState('loading');
|
|
if (elTruncated) elTruncated.hidden = true;
|
|
|
|
const params = new URLSearchParams({ periodDays: String(currentPeriod) });
|
|
if (refresh) params.set('refresh', '1');
|
|
|
|
try {
|
|
const json = await getJson(`${dataUrl}?${params.toString()}`, {
|
|
signal: requestController.signal,
|
|
});
|
|
if (!json.ok) { showState('error'); return; }
|
|
if (!json.customers || json.customers.length === 0) { showState('empty'); return; }
|
|
|
|
renderCards(json.customers);
|
|
showState('success');
|
|
|
|
if (json.meta && json.meta.truncated && elTruncated) {
|
|
elTruncated.hidden = false;
|
|
}
|
|
} catch (error) {
|
|
if (error instanceof Error && error.name === 'AbortError') {
|
|
return;
|
|
}
|
|
showState('error');
|
|
}
|
|
};
|
|
|
|
on(periodSelector, 'change', (event) => {
|
|
const radio = event.target.closest('input[name="radar-period"]');
|
|
if (!radio) return;
|
|
const period = parseInt(radio.value, 10);
|
|
if (!period || period === currentPeriod) return;
|
|
currentPeriod = period;
|
|
void fetchData();
|
|
});
|
|
|
|
on(elRefresh, 'click', () => {
|
|
void fetchData(true);
|
|
});
|
|
|
|
void fetchData();
|
|
|
|
return {
|
|
destroy: () => {
|
|
listenerController.abort();
|
|
requestController.abort();
|
|
if (dialog?.open) {
|
|
dialog.close();
|
|
}
|
|
},
|
|
};
|
|
}
|