fix(helpdesk): remove double bullets, replace dialog bars with score table

- Remove '• ' prefix from reason list items (CSS list-style handles it)
- Replace abstract dimension bars in dialog with a clear table showing
  dimension name, score (0-100), and weighted contribution per row
- Total row shows final risk score

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-06 00:39:35 +02:00
parent e279e469da
commit caa1e430a3

View File

@@ -131,7 +131,7 @@ if (container) {
if (reasons.length > 0) { if (reasons.length > 0) {
const reasonList = h('ul', 'helpdesk-risk-card-reasons'); const reasonList = h('ul', 'helpdesk-risk-card-reasons');
for (const r of reasons) { for (const r of reasons) {
reasonList.appendChild(h('li', '', '• ' + r)); reasonList.appendChild(h('li', '', r));
} }
card.appendChild(reasonList); card.appendChild(reasonList);
} }
@@ -153,23 +153,35 @@ if (container) {
dialogTitle.textContent = (customer.customer_name || customer.customer_no) + ' — ' + customer.risk_score + '/100'; dialogTitle.textContent = (customer.customer_name || customer.customer_no) + ' — ' + customer.risk_score + '/100';
dialogBody.replaceChildren(); dialogBody.replaceChildren();
// All 5 dimensions // All 5 dimensions as table with raw value, score, weight
const dims = customer.dimensions || []; const dims = customer.dimensions || [];
const dimSection = h('div', 'helpdesk-risk-detail-dimensions'); const dimTable = h('table', 'helpdesk-risk-detail-tickets');
const dimHead = h('thead');
const dimHeadRow = h('tr');
dimHeadRow.appendChild(h('th', '', d('labelScore', 'Dimension')));
dimHeadRow.appendChild(h('th', '', d('labelScore', 'Score')));
dimHeadRow.appendChild(h('th', '', '%'));
dimHead.appendChild(dimHeadRow);
dimTable.appendChild(dimHead);
const dimBody = h('tbody');
for (const dim of dims) { for (const dim of dims) {
const row = h('div', 'helpdesk-risk-detail-dim'); const tr = h('tr');
row.appendChild(h('span', 'helpdesk-risk-detail-dim-label', dimLabel(dim.id))); tr.appendChild(h('td', '', dimLabel(dim.id)));
const bar = h('div', 'helpdesk-risk-card-driver-bar'); tr.appendChild(h('td', '', dim.dimension_score !== null ? String(dim.dimension_score) : '—'));
const fill = h('div', 'helpdesk-risk-card-driver-fill'); tr.appendChild(h('td', '', dim.weighted_points > 0 ? dim.weighted_points.toFixed(1) : '—'));
fill.style.width = (dim.dimension_score !== null ? Math.min(100, dim.dimension_score) : 0) + '%'; dimBody.appendChild(tr);
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); // Total row
const totalTr = h('tr');
totalTr.appendChild(h('td', '', 'Total'));
const totalTd = h('td', '');
totalTd.style.fontWeight = '700';
totalTd.textContent = String(customer.risk_score);
totalTr.appendChild(totalTd);
totalTr.appendChild(h('td', '', ''));
dimBody.appendChild(totalTr);
dimTable.appendChild(dimBody);
dialogBody.appendChild(dimTable);
// Open tickets list // Open tickets list
const tickets = customer.open_tickets || []; const tickets = customer.open_tickets || [];