feat(helpdesk): add Risk Radar dashboard with customer risk scoring
New portfolio view scoring customers 0-100 across five dimensions: - Open pressure (30%): open + critical ticket count - Trend (25%): net ticket flow (created - closed) in period - SLA overdue (20%): tickets exceeding escalation targets - Resolution time (15%): median hours to close (null = neutral) - Inactivity (10%): age of oldest open ticket Card grid with score badges (color-coded high/medium/low), metric pills, driver bars. Click opens detail dialog with all dimensions and open ticket list. Clientside search filter. PBI_LV_Tickets with client-driven paging ($skip/$top, hardcap 5000). Escalation definitions cached separately (30min TTL). Truncated banner when data is capped. New: RiskRadarService, getTicketsForRiskRadar(), 13 PHPUnit tests, permission helpdesk.risk-radar.view, 2 routes, i18n de+en. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -520,6 +520,219 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Risk Radar --- */
|
||||
.helpdesk-risk-radar-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.75);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-risk-radar-search {
|
||||
flex: 1;
|
||||
min-width: 12rem;
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.helpdesk-risk-radar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: calc(var(--app-spacing) * 0.6);
|
||||
margin-top: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card {
|
||||
border: 1px solid 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);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.helpdesk-risk-card:hover {
|
||||
border-color: var(--app-primary, #0d6efd);
|
||||
box-shadow: 0 1px 4px color-mix(in srgb, var(--app-primary, #0d6efd) 15%, transparent);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card.helpdesk-risk-level-high {
|
||||
border-left: 3px solid var(--app-danger, #dc3545);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card.helpdesk-risk-level-medium {
|
||||
border-left: 3px solid var(--app-warning, #f59e0b);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card.helpdesk-risk-level-low {
|
||||
border-left: 3px solid var(--app-success, #198754);
|
||||
}
|
||||
|
||||
.helpdesk-risk-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.3);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-name {
|
||||
font-weight: 600;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-score {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
min-width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-score.helpdesk-risk-level-high {
|
||||
background: var(--app-danger, #dc3545);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-score.helpdesk-risk-level-medium {
|
||||
background: var(--app-warning, #f59e0b);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-score.helpdesk-risk-level-low {
|
||||
background: var(--app-success, #198754);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-metrics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: calc(var(--app-spacing) * 0.3);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.35);
|
||||
font-size: var(--text-xs, 0.75rem);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-metric {
|
||||
padding: 0.1em 0.45em;
|
||||
border-radius: var(--app-border-radius, 0.25rem);
|
||||
background: color-mix(in srgb, var(--app-muted-border-color) 40%, transparent);
|
||||
color: var(--app-muted-color);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-metric-warn {
|
||||
background: color-mix(in srgb, var(--app-warning, #f59e0b) 15%, transparent);
|
||||
color: var(--app-warning, #f59e0b);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-drivers {
|
||||
display: grid;
|
||||
gap: calc(var(--app-spacing) * 0.2);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-driver {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.35);
|
||||
font-size: var(--text-xs, 0.75rem);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-driver-label {
|
||||
min-width: 7ch;
|
||||
color: var(--app-muted-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-driver-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--app-muted-border-color) 50%, transparent);
|
||||
}
|
||||
|
||||
.helpdesk-risk-card-driver-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: var(--app-primary, #0d6efd);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-dimensions {
|
||||
display: grid;
|
||||
gap: calc(var(--app-spacing) * 0.4);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-dim {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.5);
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-dim-label {
|
||||
min-width: 10ch;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-dim-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
color: var(--app-muted-color);
|
||||
min-width: 5ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-tickets {
|
||||
width: 100%;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
border: 1px solid var(--app-muted-border-color);
|
||||
border-radius: var(--app-radius, 0.375rem);
|
||||
border-spacing: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-tickets th {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
color: var(--app-muted-color);
|
||||
padding: calc(var(--app-spacing) * 0.3) calc(var(--app-spacing) * 0.5);
|
||||
border-bottom: 1px solid var(--app-muted-border-color);
|
||||
background: color-mix(in srgb, var(--app-muted-border-color) 20%, transparent);
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-tickets td {
|
||||
padding: calc(var(--app-spacing) * 0.3) calc(var(--app-spacing) * 0.5);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--app-muted-border-color) 40%, transparent);
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-tickets tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-ticket-critical td:first-child {
|
||||
color: var(--app-warning, #f59e0b);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-link {
|
||||
display: inline-block;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
color: var(--app-primary, #0d6efd);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.helpdesk-risk-detail-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Clickable rows — shared between search results and ticket list */
|
||||
.app-clickable-row {
|
||||
cursor: pointer;
|
||||
|
||||
Reference in New Issue
Block a user