tbh/breadcrumb-the-shire
1
0
Fork 0
forked from fa/breadcrumb-the-shire
Code Pull Requests 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

201
modules/helpdesk/web/css/helpdesk.css
View File

@@ -126,114 +126,141 @@
}
}
/* Team workload dashboard */
.helpdesk-team-table {
width: 100%;
margin-top: calc(var(--app-spacing) * 0.75);
border-collapse: separate;
border-spacing: 0;
/* Team workload dashboard — agent cards */
.helpdesk-team-card {
border: 1px solid var(--app-muted-border-color);
border-radius: var(--app-radius, 0.375rem);
padding: calc(var(--app-spacing) * 0.65) calc(var(--app-spacing) * 0.75);
margin-bottom: calc(var(--app-spacing) * 0.5);
}
.helpdesk-team-table th {
text-align: left;
padding: calc(var(--app-spacing) * 0.3) calc(var(--app-spacing) * 0.5);
.helpdesk-team-card-queue {
border-style: dashed;
background: color-mix(in srgb, var(--app-muted-border-color) 15%, transparent);
}
.helpdesk-team-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--app-spacing) * 0.5);
margin-bottom: calc(var(--app-spacing) * 0.35);
}
.helpdesk-team-card-name {
font-weight: 600;
font-size: var(--text-sm, 0.875rem);
}
.helpdesk-team-card-queue .helpdesk-team-card-name {
font-weight: 500;
color: var(--app-muted-color);
border-bottom: 1px solid var(--app-muted-border-color);
}
.helpdesk-team-table td {
text-align: left;
padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.5);
border-bottom: 1px solid color-mix(in srgb, var(--app-muted-border-color) 50%, transparent);
.helpdesk-team-card-count {
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: var(--text-sm, 0.875rem);
padding: 0.1em 0.55em;
border-radius: 999px;
background: color-mix(in srgb, var(--app-primary, #0d6efd) 12%, transparent);
color: var(--app-primary, #0d6efd);
}
.helpdesk-team-table th:not(:first-child),
.helpdesk-team-table td:not(:first-child) {
text-align: right;
.helpdesk-team-card-count-warning {
background: color-mix(in srgb, var(--app-warning, #f59e0b) 15%, transparent);
color: var(--app-warning, #f59e0b);
}
.helpdesk-team-table tbody tr:last-child td {
border-bottom: none;
.helpdesk-team-card-count-success {
background: color-mix(in srgb, var(--app-success, #198754) 12%, transparent);
color: var(--app-success, #198754);
}
.helpdesk-team-agent-name {
.helpdesk-team-card-bar-track {
height: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--app-muted-border-color) 60%, transparent);
margin-bottom: calc(var(--app-spacing) * 0.4);
}
.helpdesk-team-card-bar-fill {
height: 100%;
border-radius: 999px;
background: var(--app-primary, #0d6efd);
transition: width 0.3s ease;
min-width: 2px;
}
.helpdesk-team-card-bar-muted {
background: var(--app-muted-color);
opacity: 0.4;
}
.helpdesk-team-card-bar-success {
background: var(--app-success, #198754);
}
.helpdesk-team-card-tickets {
list-style: none;
margin: 0;
padding: 0;
}
.helpdesk-team-card-ticket {
display: flex;
align-items: baseline;
gap: calc(var(--app-spacing) * 0.4);
padding: calc(var(--app-spacing) * 0.2) 0;
font-size: var(--text-sm, 0.875rem);
border-top: 1px solid color-mix(in srgb, var(--app-muted-border-color) 40%, transparent);
}
.helpdesk-team-card-ticket:first-child {
border-top: none;
}
.helpdesk-team-card-ticket-no {
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.helpdesk-team-row-unassigned {
font-style: italic;
}
.helpdesk-team-row-unassigned .helpdesk-team-agent-name {
font-weight: 400;
color: var(--app-muted-color);
flex-shrink: 0;
}
.helpdesk-team-card-ticket-desc {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.helpdesk-team-card-ticket-age {
flex-shrink: 0;
font-variant-numeric: tabular-nums;
color: var(--app-muted-color);
}
.helpdesk-team-card-ticket-critical .helpdesk-team-card-ticket-age {
color: var(--app-warning, #f59e0b);
font-weight: 600;
}
.helpdesk-team-card-ticket-critical .helpdesk-team-card-ticket-no {
color: var(--app-warning, #f59e0b);
}
.helpdesk-team-card-compact {
padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.75);
}
.helpdesk-team-card-compact .helpdesk-team-card-bar-track {
margin-bottom: 0;
}
.helpdesk-team-performance-panel > .helpdesk-segment-control {
margin-bottom: calc(var(--app-spacing) * 0.75);
}
/* Muted zero values — de-emphasize non-information */
.helpdesk-team-muted {
color: var(--app-muted-color);
opacity: 0.5;
}
/* Inline proportional bar — Stripe-style visual comparison */
.helpdesk-team-bar-cell {
display: inline-flex;
align-items: center;
gap: calc(var(--app-spacing) * 0.35);
min-width: 5rem;
justify-content: flex-end;
}
.helpdesk-team-bar {
height: 0.5rem;
border-radius: 999px;
flex-shrink: 0;
min-width: 2px;
width: 0;
transition: width 0.3s ease;
}
.helpdesk-team-bar-primary {
background: var(--app-primary, #0d6efd);
}
.helpdesk-team-bar-success {
background: var(--app-success, #198754);
}
.helpdesk-team-bar-muted {
background: var(--app-muted-color);
opacity: 0.35;
}
.helpdesk-team-bar-value {
font-variant-numeric: tabular-nums;
min-width: 2ch;
text-align: right;
}
/* Critical badge — draws attention to non-zero values */
.helpdesk-team-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5em;
padding: 0.1em 0.45em;
font-size: var(--text-sm, 0.875rem);
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1.3;
border-radius: 999px;
background: color-mix(in srgb, var(--app-warning, #f59e0b) 15%, transparent);
color: var(--app-warning, #f59e0b);
}
/* Clickable rows — shared between search results and ticket list */
.app-clickable-row {
cursor: pointer;