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

fix(helpdesk): simplify team dashboard visuals — remove bars and colors

Browse Source 
Remove progress bars (meaningless without a defined per-agent limit),
remove deterministic hue coloring (too noisy), and fix spacing by using
gap on a container grid instead of border-bottom on items. Avatars now
use a single neutral style. Count badges remain as the key indicator
(warning-colored when critical tickets exist). Cleaner, quieter layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-05 19:16:42 +02:00
parent 2c2b9c17a3
commit a58c870561
2 changed files with 32 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
modules/helpdesk/web/js/helpdesk-team.js
View File

@@ -45,17 +45,6 @@ if (container) {
return name.substring(0, 2).toUpperCase();
}
/**
* Deterministic hue from string — consistent color per agent.
*/
function nameHue(name) {
let hash = 0;
for (let i = 0; i < name.length; i++) {
hash = name.charCodeAt(i) + ((hash << 5) - hash);
}
return Math.abs(hash) % 360;
}
function formatAge(hours) {
if (hours < 24) return hours + 'h';
return Math.floor(hours / 24) + 'd';
@@ -101,18 +90,13 @@ if (container) {
}
/**
* Build an agent card with avatar, load bar, and ticket pills.
* Build an agent card with avatar and ticket pills.
*/
function buildAgentCard(m, maxOpen) {
const pct = maxOpen > 0 ? Math.round((m.open_tickets / maxOpen) * 100) : 0;
const hue = nameHue(m.display_name);
function buildAgentCard(m) {
const card = h('article', 'helpdesk-team-agent');
// Avatar
const avatar = h('div', 'helpdesk-team-avatar', initials(m.display_name));
avatar.style.setProperty('--agent-hue', hue);
card.appendChild(avatar);
card.appendChild(h('div', 'helpdesk-team-avatar', initials(m.display_name)));
// Content area
const content = h('div', 'helpdesk-team-agent-content');
@@ -125,14 +109,6 @@ if (container) {
nameRow.appendChild(countBadge);
content.appendChild(nameRow);
// Load bar
const barTrack = h('div', 'helpdesk-team-agent-bar-track');
const barFill = h('div', 'helpdesk-team-agent-bar-fill');
barFill.style.width = pct + '%';
barFill.style.setProperty('--agent-hue', hue);
barTrack.appendChild(barFill);
content.appendChild(barTrack);
// Ticket pills
const tickets = m.open_ticket_details || [];
if (tickets.length > 0) {
@@ -146,31 +122,23 @@ if (container) {
}
/**
* Build a compact performance card with avatar and resolved bar.
* Build a compact performance card with avatar and resolved count.
*/
function buildPerformanceCard(m, maxResolved) {
const pct = maxResolved > 0 ? Math.round((m.resolved_in_period / maxResolved) * 100) : 0;
const hue = nameHue(m.display_name || 'queue');
function buildPerformanceCard(m) {
const isQueue = m.support_user === '';
const card = h('article', 'helpdesk-team-agent helpdesk-team-agent-compact');
const avatar = h('div', 'helpdesk-team-avatar helpdesk-team-avatar-sm', m.support_user === '' ? '?' : initials(m.display_name));
avatar.style.setProperty('--agent-hue', m.support_user === '' ? 0 : hue);
if (m.support_user === '') avatar.classList.add('helpdesk-team-avatar-muted');
const avatar = h('div', 'helpdesk-team-avatar helpdesk-team-avatar-sm', isQueue ? '?' : initials(m.display_name));
if (isQueue) avatar.classList.add('helpdesk-team-avatar-muted');
card.appendChild(avatar);
const content = h('div', 'helpdesk-team-agent-content');
const nameRow = h('div', 'helpdesk-team-agent-header');
nameRow.appendChild(h('span', 'helpdesk-team-agent-name', m.support_user === '' ? labelQueue : m.display_name));
nameRow.appendChild(h('span', 'helpdesk-team-agent-name', isQueue ? labelQueue : m.display_name));
nameRow.appendChild(h('span', 'helpdesk-team-agent-count helpdesk-team-agent-count-success', String(m.resolved_in_period)));
content.appendChild(nameRow);
const barTrack = h('div', 'helpdesk-team-agent-bar-track');
const barFill = h('div', 'helpdesk-team-agent-bar-fill helpdesk-team-agent-bar-success');
barFill.style.width = pct + '%';
barTrack.appendChild(barFill);
content.appendChild(barTrack);
card.appendChild(content);
return card;
}
@@ -181,10 +149,12 @@ if (container) {
const queue = members.find(m => m.support_user === '' && m.open_tickets > 0);
const agents = members.filter(m => m.support_user !== '' && (m.open_tickets > 0 || m.critical_tickets > 0));
const maxOpen = Math.max(1, ...agents.map(m => m.open_tickets));
if (queue) elCurrentCards.appendChild(buildQueueSection(queue));
for (const m of agents) elCurrentCards.appendChild(buildAgentCard(m, maxOpen));
const grid = h('div', 'helpdesk-team-agents');
for (const m of agents) grid.appendChild(buildAgentCard(m));
elCurrentCards.appendChild(grid);
}
function renderPerformanceTab(members) {
@@ -199,8 +169,9 @@ if (container) {
return b.resolved_in_period - a.resolved_in_period;
});
const maxResolved = Math.max(1, ...sorted.map(m => m.resolved_in_period));
for (const m of sorted) elPerformanceCards.appendChild(buildPerformanceCard(m, maxResolved));
const grid = h('div', 'helpdesk-team-agents');
for (const m of sorted) grid.appendChild(buildPerformanceCard(m));
elPerformanceCards.appendChild(grid);
}
async function fetchData(refresh = false) {