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

refactor(helpdesk): redesign team dashboard with section widgets and ticket tables

Browse Source 
Replace custom card layout with the existing debitor dashboard pattern:
each agent is a section with helpdesk-support-section-title (avatar
initials + name + count badge + line) and a ticket table underneath
(Ticket No, Customer, Description, Age). Critical rows highlighted.
Queue section uses same pattern without avatar. Performance tab uses
compact rows with avatar + name + resolved badge. No custom card or
pill styles — consistent with existing dashboard widgets.

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

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

@@ -126,160 +126,104 @@
}
}
/* Team workload — queue section */
.helpdesk-team-queue {
border: 1px dashed var(--app-muted-border-color);
border-radius: var(--app-radius, 0.375rem);
padding: calc(var(--app-spacing) * 0.6) calc(var(--app-spacing) * 0.75);
margin-bottom: calc(var(--app-spacing) * 0.75);
background: color-mix(in srgb, var(--app-muted-border-color) 10%, transparent);
}
.helpdesk-team-queue-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: calc(var(--app-spacing) * 0.4);
}
.helpdesk-team-queue-title {
font-weight: 600;
font-size: var(--text-sm, 0.875rem);
color: var(--app-muted-color);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.helpdesk-team-queue-count {
font-size: var(--text-sm, 0.875rem);
color: var(--app-muted-color);
}
/* Team workload — agent rows */
.helpdesk-team-agents {
display: grid;
gap: calc(var(--app-spacing) * 0.5);
}
.helpdesk-team-agent {
display: flex;
gap: calc(var(--app-spacing) * 0.65);
padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.6);
border: 1px solid var(--app-muted-border-color);
border-radius: var(--app-radius, 0.375rem);
}
.helpdesk-team-avatar {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
display: flex;
/* Team workload — inline avatar for section titles */
.helpdesk-team-avatar-inline {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
background: color-mix(in srgb, var(--app-muted-border-color) 80%, transparent);
color: var(--app-muted-color);
vertical-align: middle;
}
.helpdesk-team-avatar-sm {
width: 1.75rem;
height: 1.75rem;
font-size: 0.65rem;
}
.helpdesk-team-agent-content {
flex: 1;
min-width: 0;
}
.helpdesk-team-agent-header {
display: flex;
align-items: center;
gap: calc(var(--app-spacing) * 0.4);
margin-bottom: calc(var(--app-spacing) * 0.25);
}
.helpdesk-team-agent-name {
font-weight: 600;
font-size: var(--text-sm, 0.875rem);
}
.helpdesk-team-agent-count {
/* Count badge in section title */
.helpdesk-team-title-count {
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 0.7rem;
font-size: 0.75rem;
padding: 0.1em 0.5em;
border-radius: 999px;
background: color-mix(in srgb, var(--app-contrast, #000) 8%, transparent);
background: color-mix(in srgb, var(--app-contrast, #000) 7%, transparent);
color: var(--app-muted-color);
}
.helpdesk-team-agent-count-warning {
.helpdesk-team-title-count-warning {
background: color-mix(in srgb, var(--app-warning, #f59e0b) 15%, transparent);
color: var(--app-warning, #f59e0b);
}
.helpdesk-team-agent-count-success {
/* Ticket table inside agent widget */
.helpdesk-team-ticket-table {
width: 100%;
font-size: var(--text-sm, 0.875rem);
}
.helpdesk-team-ticket-table th {
text-align: left;
font-weight: 500;
color: var(--app-muted-color);
padding: calc(var(--app-spacing) * 0.25) calc(var(--app-spacing) * 0.4);
border-bottom: 1px solid var(--app-muted-border-color);
}
.helpdesk-team-ticket-table td {
padding: calc(var(--app-spacing) * 0.3) calc(var(--app-spacing) * 0.4);
border-bottom: 1px solid color-mix(in srgb, var(--app-muted-border-color) 40%, transparent);
}
.helpdesk-team-ticket-table tbody tr:last-child td {
border-bottom: none;
}
.helpdesk-team-ticket-no {
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.helpdesk-team-ticket-critical td {
color: var(--app-warning, #f59e0b);
}
.helpdesk-team-ticket-critical .helpdesk-team-ticket-no {
font-weight: 600;
}
/* Performance tab — compact rows */
.helpdesk-team-perf-row {
display: flex;
align-items: center;
gap: calc(var(--app-spacing) * 0.5);
padding: calc(var(--app-spacing) * 0.35) 0;
border-bottom: 1px solid color-mix(in srgb, var(--app-muted-border-color) 40%, transparent);
font-size: var(--text-sm, 0.875rem);
}
.helpdesk-team-perf-row:last-child {
border-bottom: none;
}
.helpdesk-team-perf-name {
flex: 1;
font-weight: 500;
}
.helpdesk-team-perf-count {
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 0.75rem;
padding: 0.1em 0.5em;
border-radius: 999px;
background: color-mix(in srgb, var(--app-success, #198754) 12%, transparent);
color: var(--app-success, #198754);
}
/* Ticket pills */
.helpdesk-team-pills {
display: flex;
flex-wrap: wrap;
gap: calc(var(--app-spacing) * 0.25);
}
.helpdesk-team-pill {
display: inline-flex;
align-items: center;
gap: 0.3em;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
padding: 0.15em 0.5em;
border-radius: var(--app-radius, 0.375rem);
background: color-mix(in srgb, var(--app-muted-border-color) 35%, transparent);
color: var(--app-color);
cursor: default;
line-height: 1.5;
}
.helpdesk-team-pill-critical {
background: color-mix(in srgb, var(--app-warning, #f59e0b) 12%, transparent);
}
.helpdesk-team-pill-no {
font-weight: 600;
}
.helpdesk-team-pill-sep {
opacity: 0.35;
}
.helpdesk-team-pill-customer {
opacity: 0.6;
}
.helpdesk-team-pill-age {
opacity: 0.6;
}
.helpdesk-team-pill-critical .helpdesk-team-pill-no,
.helpdesk-team-pill-critical .helpdesk-team-pill-age {
color: var(--app-warning, #f59e0b);
opacity: 1;
font-weight: 600;
}
/* Compact variant for performance tab */
.helpdesk-team-agent-compact {
padding: calc(var(--app-spacing) * 0.4) calc(var(--app-spacing) * 0.6);
}
.helpdesk-team-performance-panel > .helpdesk-segment-control {
margin-bottom: calc(var(--app-spacing) * 0.75);
}