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

feat(helpdesk): redesign team dashboard with agent cards and ticket details

Browse Source 
Replace KPI tiles + table with visual agent cards showing workload at a
glance. Each card has the agent name, ticket count badge (warning-colored
when critical), a proportional load bar, and the actual open tickets
listed underneath (number, description, age). Critical tickets are
highlighted with warning color. Queue (unassigned) shown as dashed card
at top. Performance tab uses compact cards with success-colored bars.
Backend now returns open_ticket_details per member (sorted: critical
first, then by age descending).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-05 19:09:15 +02:00
parent 82c76d6119
commit 397f9fe659
6 changed files with 243 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
<?php
/**
* 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.
* Team workload dashboard — visual workload map for support team leads.
* Tab "Current": agent cards with open tickets, queue at top.
* Tab "Performance": resolved per agent in a selectable period.
*/
$periods = [30, 90, 180, 365];
@@ -17,6 +17,8 @@ $periodLabels = [
<div class="app-details-container"
data-team-workload-url="<?php e(lurl('helpdesk/team-workload-data')); ?>"
data-label-not-assigned="<?php e(t('Not assigned')); ?>"
data-label-queue="<?php e(t('Queue')); ?>"
data-label-tickets="<?php e(t('Tickets')); ?>"
data-label-error="<?php e(t('Could not load team dashboard.')); ?>"
data-label-empty="<?php e(t('No team data available.')); ?>"
>
@@ -41,21 +43,8 @@ $periodLabels = [
<div class="helpdesk-team-dashboard">
<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-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 for ($i = 0; $i < 3; $i++): ?>
<div class="helpdesk-skeleton" style="height: 5rem; margin-bottom: 0.75rem; border-radius: var(--app-radius, 0.375rem);"></div>
<?php endfor; ?>
</div>
@@ -75,33 +64,7 @@ $periodLabels = [
</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 id="team-current-cards"></div>
</div>
<div data-tab-panel="performance" class="helpdesk-team-performance-panel">
@@ -112,23 +75,7 @@ $periodLabels = [
<?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 id="team-performance-cards"></div>
</div>
</div>
</div>