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

feat(helpdesk): split team dashboard into Current and Performance tabs

Browse Source 
Current tab: snapshot KPIs (open, unassigned, avg age) and per-agent
table with open/critical/age columns. No period filter needed.

Performance tab: period-filtered KPI (resolved) with segment control
(30/90/180/365d) and per-agent table sorted by resolved count.

Separates the two core questions: "Who needs help now?" vs.
"How did the team perform over time?"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-05 18:53:39 +02:00
parent cfb399b12a
commit 5ab4380a63
4 changed files with 144 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
modules/helpdesk/i18n/default_de.json
View File

@@ -294,5 +294,7 @@
"Resolved in period": "Gelöst im Zeitraum",
"Not assigned": "Nicht zugewiesen",
"Could not load team dashboard.": "Team-Dashboard konnte nicht geladen werden.",
"No team data available.": "Keine Team-Daten verfügbar."
"No team data available.": "Keine Team-Daten verfügbar.",
"Current": "Aktuell",
"Performance": "Leistung"
}

4
modules/helpdesk/i18n/default_en.json
View File

@@ -294,5 +294,7 @@
"Resolved in period": "Resolved in period",
"Not assigned": "Not assigned",
"Could not load team dashboard.": "Could not load team dashboard.",
"No team data available.": "No team data available."
"No team data available.": "No team data available.",
"Current": "Current",
"Performance": "Performance"
}

149
modules/helpdesk/pages/helpdesk/team/index(default).phtml
View File

@@ -2,6 +2,8 @@
/**
* Team workload dashboard — shows support agent metrics aggregated from BC tickets.
* Tab 1 "Current": snapshot of open tickets per agent (no period filter).
* Tab 2 "Performance": resolved tickets per agent in a selectable period.
*/
$periods = [30, 90, 180, 365];
@@ -38,75 +40,98 @@ $periodLabels = [
?>
<div class="helpdesk-team-dashboard">
<div class="helpdesk-segment-control" id="team-period-selector">
<?php foreach ($periods as $p): ?>
<input type="radio" name="team-period" id="team-period-<?php e($p); ?>" value="<?php e($p); ?>"<?php if ($p === 90): ?> checked<?php endif; ?>>
<label for="team-period-<?php e($p); ?>"><?php e($periodLabels[$p]); ?></label>
<?php endforeach; ?>
</div>
<div id="team-loading" aria-busy="true">
<div class="helpdesk-support-metrics">
<div id="team-loading" aria-busy="true">
<div class="helpdesk-support-metrics">
<?php for ($i = 0; $i < 3; $i++): ?>
<div class="helpdesk-skeleton-kpi">
<div class="helpdesk-skeleton helpdesk-skeleton-kpi-label"></div>
<div class="helpdesk-skeleton helpdesk-skeleton-kpi-value"></div>
</div>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 4; $i++): ?>
<div class="helpdesk-skeleton-kpi">
<div class="helpdesk-skeleton helpdesk-skeleton-kpi-label"></div>
<div class="helpdesk-skeleton helpdesk-skeleton-kpi-value"></div>
<div class="helpdesk-skeleton-row">
<div class="helpdesk-skeleton helpdesk-skeleton-cell"></div>
<div class="helpdesk-skeleton helpdesk-skeleton-cell helpdesk-skeleton-cell-narrow"></div>
<div class="helpdesk-skeleton helpdesk-skeleton-cell helpdesk-skeleton-cell-narrow"></div>
<div class="helpdesk-skeleton helpdesk-skeleton-cell helpdesk-skeleton-cell-narrow"></div>
</div>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 4; $i++): ?>
<div class="helpdesk-skeleton-row">
<div class="helpdesk-skeleton helpdesk-skeleton-cell"></div>
<div class="helpdesk-skeleton helpdesk-skeleton-cell helpdesk-skeleton-cell-narrow"></div>
<div class="helpdesk-skeleton helpdesk-skeleton-cell helpdesk-skeleton-cell-narrow"></div>
<div class="helpdesk-skeleton helpdesk-skeleton-cell helpdesk-skeleton-cell-narrow"></div>
<div class="helpdesk-skeleton helpdesk-skeleton-cell helpdesk-skeleton-cell-narrow"></div>
</div>
<?php endfor; ?>
</div>
<div id="team-error" class="notice" data-variant="error" role="alert" hidden>
<p><?php e(t('Could not load team dashboard.')); ?></p>
</div>
<div id="team-empty" class="notice" data-variant="info" role="status" hidden>
<p><?php e(t('No team data available.')); ?></p>
</div>
<div id="team-content" hidden>
<div class="helpdesk-support-metrics" id="team-kpis">
<article class="helpdesk-support-metric">
<p class="helpdesk-support-metric-label"><?php e(t('Open tickets')); ?></p>
<p class="helpdesk-support-metric-value" id="team-kpi-open">—</p>
</article>
<article class="helpdesk-support-metric">
<p class="helpdesk-support-metric-label"><?php e(t('Unassigned')); ?></p>
<p class="helpdesk-support-metric-value" id="team-kpi-unassigned">—</p>
</article>
<article class="helpdesk-support-metric">
<p class="helpdesk-support-metric-label"><?php e(t('Avg. age (h)')); ?></p>
<p class="helpdesk-support-metric-value" id="team-kpi-avg-age">—</p>
</article>
<article class="helpdesk-support-metric">
<p class="helpdesk-support-metric-label"><?php e(t('Resolved in period')); ?></p>
<p class="helpdesk-support-metric-value" id="team-kpi-resolved">—</p>
</article>
<div id="team-error" class="notice" data-variant="error" role="alert" hidden>
<p><?php e(t('Could not load team dashboard.')); ?></p>
</div>
<table class="helpdesk-team-table">
<thead>
<tr>
<th scope="col"><?php e(t('Support agent')); ?></th>
<th scope="col"><?php e(t('Open')); ?></th>
<th scope="col"><?php e(t('Critical (>48h open)')); ?></th>
<th scope="col"><?php e(t('Avg. age (h)')); ?></th>
<th scope="col"><?php e(t('Resolved in period')); ?></th>
</tr>
</thead>
<tbody id="team-table-body">
</tbody>
</table>
</div>
<div id="team-empty" class="notice" data-variant="info" role="status" hidden>
<p><?php e(t('No team data available.')); ?></p>
</div>
<div id="team-content" hidden>
<div class="app-tabs" data-tabs data-app-component="tabs" data-tabs-param="tab" data-tabs-storage-key="helpdesk-team-tabs-v1">
<div class="app-tabs-nav">
<button type="button" data-tab="current" data-tab-default><?php e(t('Current')); ?></button>
<button type="button" data-tab="performance"><?php e(t('Performance')); ?></button>
</div>
<div data-tab-panel="current">
<div class="helpdesk-support-metrics" id="team-kpis-current">
<article class="helpdesk-support-metric">
<p class="helpdesk-support-metric-label"><?php e(t('Open tickets')); ?></p>
<p class="helpdesk-support-metric-value" id="team-kpi-open">—</p>
</article>
<article class="helpdesk-support-metric">
<p class="helpdesk-support-metric-label"><?php e(t('Unassigned')); ?></p>
<p class="helpdesk-support-metric-value" id="team-kpi-unassigned">—</p>
</article>
<article class="helpdesk-support-metric">
<p class="helpdesk-support-metric-label"><?php e(t('Avg. age (h)')); ?></p>
<p class="helpdesk-support-metric-value" id="team-kpi-avg-age">—</p>
</article>
</div>
<table class="helpdesk-team-table">
<thead>
<tr>
<th scope="col"><?php e(t('Support agent')); ?></th>
<th scope="col"><?php e(t('Open')); ?></th>
<th scope="col"><?php e(t('Critical (>48h open)')); ?></th>
<th scope="col"><?php e(t('Avg. age (h)')); ?></th>
</tr>
</thead>
<tbody id="team-table-current">
</tbody>
</table>
</div>
<div data-tab-panel="performance">
<div class="helpdesk-segment-control" id="team-period-selector">
<?php foreach ($periods as $p): ?>
<input type="radio" name="team-period" id="team-period-<?php e($p); ?>" value="<?php e($p); ?>"<?php if ($p === 90): ?> checked<?php endif; ?>>
<label for="team-period-<?php e($p); ?>"><?php e($periodLabels[$p]); ?></label>
<?php endforeach; ?>
</div>
<div class="helpdesk-support-metrics" id="team-kpis-performance">
<article class="helpdesk-support-metric">
<p class="helpdesk-support-metric-label"><?php e(t('Resolved in period')); ?></p>
<p class="helpdesk-support-metric-value" id="team-kpi-resolved">—</p>
</article>
</div>
<table class="helpdesk-team-table">
<thead>
<tr>
<th scope="col"><?php e(t('Support agent')); ?></th>
<th scope="col"><?php e(t('Resolved in period')); ?></th>
</tr>
</thead>
<tbody id="team-table-performance">
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>

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

@@ -1,5 +1,7 @@
/**
* Team workload dashboard — fetches and renders team metrics.
* Tab "Current": snapshot of open tickets per agent.
* Tab "Performance": resolved tickets per agent in a selectable period.
*/
const container = document.querySelector('.app-details-container[data-team-workload-url]');
@@ -11,11 +13,13 @@ if (container) {
const elError = document.getElementById('team-error');
const elEmpty = document.getElementById('team-empty');
const elContent = document.getElementById('team-content');
const elBody = document.getElementById('team-table-body');
const elCurrentBody = document.getElementById('team-table-current');
const elPerformanceBody = document.getElementById('team-table-performance');
const elRefresh = container.querySelector('button[name="team-refresh"]');
const periodSelector = document.getElementById('team-period-selector');
let currentPeriod = 90;
let lastData = null;
function showState(state) {
if (elLoading) elLoading.hidden = state !== 'loading';
@@ -30,45 +34,70 @@ if (container) {
if (el) el.textContent = value;
}
function renderKpis(kpis) {
setText('team-kpi-open', kpis.open_tickets ?? 0);
setText('team-kpi-unassigned', kpis.unassigned ?? 0);
setText('team-kpi-avg-age', kpis.avg_age_hours ?? 0);
setText('team-kpi-resolved', kpis.resolved_in_period ?? 0);
}
function createCell(text) {
const td = document.createElement('td');
td.textContent = text;
return td;
}
function renderTable(members) {
if (!elBody) return;
elBody.replaceChildren();
function agentName(m) {
return m.support_user === '' ? labelNotAssigned : m.display_name;
}
function renderCurrentTab(kpis, members) {
setText('team-kpi-open', kpis.open_tickets ?? 0);
setText('team-kpi-unassigned', kpis.unassigned ?? 0);
setText('team-kpi-avg-age', kpis.avg_age_hours ?? 0);
if (!elCurrentBody) return;
elCurrentBody.replaceChildren();
for (const m of members) {
const tr = document.createElement('tr');
const isUnassigned = m.support_user === '';
const name = isUnassigned ? labelNotAssigned : m.display_name;
const nameCell = document.createElement('td');
nameCell.textContent = name;
tr.appendChild(nameCell);
tr.appendChild(createCell(agentName(m)));
tr.appendChild(createCell(String(m.open_tickets)));
tr.appendChild(createCell(String(m.critical_tickets)));
tr.appendChild(createCell(String(m.avg_age_hours)));
tr.appendChild(createCell(String(m.resolved_in_period)));
if (isUnassigned) {
if (m.support_user === '') {
tr.classList.add('helpdesk-team-row-unassigned');
}
elBody.appendChild(tr);
elCurrentBody.appendChild(tr);
}
}
function renderPerformanceTab(kpis, members) {
setText('team-kpi-resolved', kpis.resolved_in_period ?? 0);
if (!elPerformanceBody) return;
elPerformanceBody.replaceChildren();
const sorted = [...members].sort((a, b) => {
if (a.support_user === '') return 1;
if (b.support_user === '') return -1;
return b.resolved_in_period - a.resolved_in_period;
});
for (const m of sorted) {
const tr = document.createElement('tr');
tr.appendChild(createCell(agentName(m)));
tr.appendChild(createCell(String(m.resolved_in_period)));
if (m.support_user === '') {
tr.classList.add('helpdesk-team-row-unassigned');
}
elPerformanceBody.appendChild(tr);
}
}
function renderAll(data) {
lastData = data;
renderCurrentTab(data.kpis, data.members);
renderPerformanceTab(data.kpis, data.members);
}
async function fetchData(refresh = false) {
showState('loading');
@@ -89,8 +118,7 @@ if (container) {
return;
}
renderKpis(json.kpis);
renderTable(json.members);
renderAll(json);
showState('success');
} catch {
showState('error');