feat(helpdesk): redesign team dashboard with avatar cards and ticket pills
Replace card-with-ticket-list layout with a GitHub/Stripe-inspired design: - Avatar initials circles with deterministic colors per agent (name → hue) - Horizontal agent rows: avatar | name + count badge | load bar | ticket pills - Ticket pills showing No · Customer · Age (description on hover/title) - Critical tickets highlighted with warning color in pills - Queue section at top with uppercase header and ticket pills directly - Performance tab with smaller avatars and success-colored bars - Agent load bars colored per-agent (matching avatar hue) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -126,134 +126,185 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Team workload dashboard — agent cards */
|
||||
.helpdesk-team-card {
|
||||
border: 1px solid var(--app-muted-border-color);
|
||||
/* 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.65) calc(var(--app-spacing) * 0.75);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.5);
|
||||
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-card-queue {
|
||||
border-style: dashed;
|
||||
background: color-mix(in srgb, var(--app-muted-border-color) 15%, transparent);
|
||||
.helpdesk-team-queue-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: calc(var(--app-spacing) * 0.4);
|
||||
}
|
||||
|
||||
.helpdesk-team-card-header {
|
||||
.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 card with avatar */
|
||||
.helpdesk-team-agent {
|
||||
display: flex;
|
||||
gap: calc(var(--app-spacing) * 0.65);
|
||||
padding: calc(var(--app-spacing) * 0.6) 0;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--app-muted-border-color) 50%, transparent);
|
||||
}
|
||||
|
||||
.helpdesk-team-agent:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.helpdesk-team-avatar {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
flex-shrink: 0;
|
||||
background: hsl(var(--agent-hue, 210) 55% 92%);
|
||||
color: hsl(var(--agent-hue, 210) 50% 35%);
|
||||
}
|
||||
|
||||
.helpdesk-team-avatar-sm {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.helpdesk-team-avatar-muted {
|
||||
background: var(--app-muted-border-color);
|
||||
color: var(--app-muted-color);
|
||||
}
|
||||
|
||||
.helpdesk-team-agent-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.helpdesk-team-agent-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);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.25);
|
||||
}
|
||||
|
||||
.helpdesk-team-card-name {
|
||||
.helpdesk-team-agent-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);
|
||||
}
|
||||
|
||||
.helpdesk-team-card-count {
|
||||
.helpdesk-team-agent-count {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 600;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
padding: 0.1em 0.55em;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.1em 0.5em;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--app-primary, #0d6efd) 12%, transparent);
|
||||
color: var(--app-primary, #0d6efd);
|
||||
}
|
||||
|
||||
.helpdesk-team-card-count-warning {
|
||||
.helpdesk-team-agent-count-warning {
|
||||
background: color-mix(in srgb, var(--app-warning, #f59e0b) 15%, transparent);
|
||||
color: var(--app-warning, #f59e0b);
|
||||
}
|
||||
|
||||
.helpdesk-team-card-count-success {
|
||||
.helpdesk-team-agent-count-success {
|
||||
background: color-mix(in srgb, var(--app-success, #198754) 12%, transparent);
|
||||
color: var(--app-success, #198754);
|
||||
}
|
||||
|
||||
.helpdesk-team-card-bar-track {
|
||||
height: 4px;
|
||||
/* Load bar */
|
||||
.helpdesk-team-agent-bar-track {
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--app-muted-border-color) 60%, transparent);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.4);
|
||||
background: color-mix(in srgb, var(--app-muted-border-color) 50%, transparent);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.35);
|
||||
}
|
||||
|
||||
.helpdesk-team-card-bar-fill {
|
||||
.helpdesk-team-agent-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: var(--app-primary, #0d6efd);
|
||||
background: hsl(var(--agent-hue, 210) 55% 55%);
|
||||
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 {
|
||||
.helpdesk-team-agent-bar-success {
|
||||
background: var(--app-success, #198754);
|
||||
}
|
||||
|
||||
.helpdesk-team-card-tickets {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.helpdesk-team-card-ticket {
|
||||
/* Ticket pills */
|
||||
.helpdesk-team-pills {
|
||||
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);
|
||||
flex-wrap: wrap;
|
||||
gap: calc(var(--app-spacing) * 0.25);
|
||||
}
|
||||
|
||||
.helpdesk-team-card-ticket:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.helpdesk-team-card-ticket-no {
|
||||
.helpdesk-team-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
font-size: 0.75rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 500;
|
||||
color: var(--app-muted-color);
|
||||
flex-shrink: 0;
|
||||
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-card-ticket-desc {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.helpdesk-team-pill-critical {
|
||||
background: color-mix(in srgb, var(--app-warning, #f59e0b) 12%, transparent);
|
||||
}
|
||||
|
||||
.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);
|
||||
.helpdesk-team-pill-no {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.helpdesk-team-card-ticket-critical .helpdesk-team-card-ticket-no {
|
||||
.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;
|
||||
}
|
||||
|
||||
.helpdesk-team-card-compact {
|
||||
padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.75);
|
||||
/* Compact variant for performance tab */
|
||||
.helpdesk-team-agent-compact {
|
||||
padding: calc(var(--app-spacing) * 0.4) 0;
|
||||
}
|
||||
|
||||
.helpdesk-team-card-compact .helpdesk-team-card-bar-track {
|
||||
.helpdesk-team-agent-compact .helpdesk-team-agent-bar-track {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user