feat(helpdesk): add dashboards, communication feed, settings UI and fix routing
Add support/sales/controlling dashboards with KPIs, trend charts and risk indicators. Add debitor communication timeline, contact filters, system recommendations engine, and configurable controlling risk rules. Rename search→index to fix query-string preservation on back navigation. Remove fake escalation rate metric, add KPI info tooltips, and switch trend chart colors to red (created) / green (closed) for clarity. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,31 @@
|
||||
@layer pages {
|
||||
/* Helpdesk settings */
|
||||
.helpdesk-settings-panel {
|
||||
display: grid;
|
||||
gap: calc(var(--app-spacing) * 0.75);
|
||||
margin-top: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-settings-test-result {
|
||||
margin-top: calc(var(--app-spacing) * 0.6);
|
||||
}
|
||||
|
||||
.helpdesk-settings-rule-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: calc(var(--app-spacing) * 0.65);
|
||||
}
|
||||
|
||||
.helpdesk-settings-rule-grid-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.helpdesk-settings-rule-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Clickable rows — shared between search results and ticket list */
|
||||
.app-clickable-row {
|
||||
cursor: pointer;
|
||||
@@ -15,21 +42,360 @@
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* Overview tab — header links */
|
||||
.app-stats-table-header .helpdesk-tab-link {
|
||||
float: right;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
/* Support dashboard */
|
||||
.helpdesk-support-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: calc(var(--app-spacing) * 0.75);
|
||||
margin-bottom: calc(var(--app-spacing) * 1);
|
||||
}
|
||||
|
||||
.app-stats-table-header .helpdesk-tab-link:hover {
|
||||
text-decoration: underline;
|
||||
.helpdesk-support-metric {
|
||||
margin: 0;
|
||||
padding: calc(var(--app-spacing) * 0.75) calc(var(--app-spacing) * 0.9);
|
||||
border: 1px solid var(--app-border, #d0d7de);
|
||||
border-radius: var(--app-border-radius);
|
||||
background: var(--app-card-background-color, #fff);
|
||||
}
|
||||
|
||||
/* KPI tile wrappers — ensure data-kpi spans don't break flex layout */
|
||||
.app-tiles > [data-kpi] {
|
||||
display: contents;
|
||||
.helpdesk-support-metric-label {
|
||||
margin: 0;
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.35;
|
||||
color: var(--app-muted, #6c757d);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.helpdesk-kpi-info {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--app-border-color, #dee2e6);
|
||||
font-size: 9px;
|
||||
font-weight: var(--font-semibold, 600);
|
||||
font-style: italic;
|
||||
line-height: 1;
|
||||
color: var(--app-muted, #6c757d);
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
cursor: help;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.15rem;
|
||||
transition: border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.helpdesk-kpi-info:hover,
|
||||
.helpdesk-kpi-info:focus-visible {
|
||||
border-color: var(--app-primary, #0d6efd);
|
||||
color: var(--app-primary, #0d6efd);
|
||||
}
|
||||
|
||||
.helpdesk-kpi-info::after {
|
||||
white-space: normal;
|
||||
max-width: 220px;
|
||||
text-align: left;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.helpdesk-support-metric-value {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: clamp(1.15rem, 1rem + 0.45vw, 1.45rem);
|
||||
line-height: 1.2;
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--app-contrast, #1f2937);
|
||||
}
|
||||
|
||||
.helpdesk-support-metric-trend {
|
||||
margin: 0.3rem 0 0;
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.35;
|
||||
min-height: 1.1em;
|
||||
}
|
||||
|
||||
.helpdesk-kpi-trend-positive {
|
||||
color: var(--app-success, #198754);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.helpdesk-kpi-trend-negative {
|
||||
color: var(--app-danger, #dc3545);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.helpdesk-kpi-trend-neutral {
|
||||
color: var(--app-muted, #6c757d);
|
||||
}
|
||||
|
||||
.helpdesk-kpi-clickable {
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.helpdesk-kpi-clickable:hover {
|
||||
border-color: var(--app-primary, #0d6efd);
|
||||
box-shadow: 0 1px 4px rgb(0 0 0 / 0.06);
|
||||
}
|
||||
|
||||
#support-escalation-wrapper {
|
||||
margin-top: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-support-ticket-list {
|
||||
margin-top: calc(var(--app-spacing) * 1);
|
||||
}
|
||||
|
||||
.helpdesk-support-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.75);
|
||||
margin: 0 0 calc(var(--app-spacing) * 0.75);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--app-contrast, #1f2937);
|
||||
}
|
||||
|
||||
.helpdesk-support-section-title::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--app-border, #dee2e6);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.helpdesk-support-metrics {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.helpdesk-support-metrics {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Sales dashboard — Stripe-style contract cards */
|
||||
.helpdesk-contract-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
|
||||
gap: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-contract-card {
|
||||
--card-accent: var(--app-muted, #6c757d);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
padding: calc(var(--app-spacing) * 1) calc(var(--app-spacing) * 1.1);
|
||||
border: 1px solid var(--app-border, #d0d7de);
|
||||
border-left: 3px solid var(--card-accent);
|
||||
border-radius: var(--app-border-radius);
|
||||
background: var(--app-card-background-color, #fff);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
transition: box-shadow 0.15s ease;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.helpdesk-contract-card:hover {
|
||||
box-shadow:
|
||||
0 1px 3px rgb(0 0 0 / 0.04),
|
||||
0 4px 12px rgb(0 0 0 / 0.06);
|
||||
}
|
||||
|
||||
.helpdesk-contract-card:focus-visible {
|
||||
outline: 2px solid var(--app-primary, #0d6efd);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.helpdesk-contract-card.state-ended {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.helpdesk-contract-card.state-ended:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Accent color palette — assigned per unique contract type */
|
||||
.helpdesk-contract-card.accent-0 {
|
||||
--card-accent: #e08614;
|
||||
}
|
||||
.helpdesk-contract-card.accent-1 {
|
||||
--card-accent: #16a34a;
|
||||
}
|
||||
.helpdesk-contract-card.accent-2 {
|
||||
--card-accent: #7c3aed;
|
||||
}
|
||||
.helpdesk-contract-card.accent-3 {
|
||||
--card-accent: #0ea5e9;
|
||||
}
|
||||
.helpdesk-contract-card.accent-4 {
|
||||
--card-accent: #0d6efd;
|
||||
}
|
||||
.helpdesk-contract-card.accent-5 {
|
||||
--card-accent: #d946ef;
|
||||
}
|
||||
.helpdesk-contract-card.accent-6 {
|
||||
--card-accent: #dc2626;
|
||||
}
|
||||
.helpdesk-contract-card.accent-7 {
|
||||
--card-accent: #059669;
|
||||
}
|
||||
|
||||
/* Type label — uppercase, accent-colored */
|
||||
.helpdesk-contract-card-type {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-semibold);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--card-accent);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Amount — hero number */
|
||||
.helpdesk-contract-card-amount {
|
||||
font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.65rem);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--app-contrast, #1f2937);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.helpdesk-contract-card-amount-muted {
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--app-muted, #6c757d);
|
||||
}
|
||||
|
||||
.helpdesk-contract-card-period {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-normal);
|
||||
color: var(--app-muted, #6c757d);
|
||||
margin-top: -0.1rem;
|
||||
}
|
||||
|
||||
/* Status badge — top-right corner */
|
||||
.helpdesk-contract-card-status {
|
||||
position: absolute;
|
||||
top: calc(var(--app-spacing) * 0.65);
|
||||
right: calc(var(--app-spacing) * 0.75);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--app-muted, #6c757d);
|
||||
}
|
||||
|
||||
.helpdesk-contract-card-dot {
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: var(--app-muted, #6c757d);
|
||||
}
|
||||
|
||||
.helpdesk-contract-card.state-active .helpdesk-contract-card-dot {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.helpdesk-contract-card.state-prep .helpdesk-contract-card-dot {
|
||||
background: #e08614;
|
||||
}
|
||||
|
||||
/* Contract detail dialog */
|
||||
.helpdesk-contract-dialog-article {
|
||||
max-height: min(80vh, 40rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.helpdesk-contract-dialog-article > header {
|
||||
position: relative;
|
||||
padding-inline-end: 2.5rem;
|
||||
}
|
||||
|
||||
.helpdesk-contract-dialog-article > header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.helpdesk-contract-dialog-article > header h2 small {
|
||||
font-weight: var(--font-normal, 400);
|
||||
color: var(--app-muted, #6c757d);
|
||||
margin-left: 0.35rem;
|
||||
}
|
||||
|
||||
.helpdesk-contract-dialog-article > header .close {
|
||||
position: absolute;
|
||||
inset-inline-end: 1rem;
|
||||
inset-block-start: 1rem;
|
||||
float: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.helpdesk-contract-dialog-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
gap: calc(var(--app-spacing) * 0.65);
|
||||
padding-bottom: calc(var(--app-spacing) * 0.75);
|
||||
border-bottom: 1px solid var(--app-border, #dee2e6);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-contract-dialog-meta > span {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--app-contrast, #1f2937);
|
||||
}
|
||||
|
||||
.helpdesk-contract-dialog-meta strong {
|
||||
display: block;
|
||||
font-size: var(--text-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-wide);
|
||||
color: var(--app-muted, #6c757d);
|
||||
font-weight: var(--font-medium);
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.helpdesk-contract-dialog-section-title {
|
||||
margin: 0 0 calc(var(--app-spacing) * 0.35);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-wide);
|
||||
color: var(--app-muted, #6c757d);
|
||||
}
|
||||
|
||||
.helpdesk-contract-dialog-lines {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.helpdesk-contract-dialog-lines table {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
#sales-contacts-section {
|
||||
margin-top: calc(var(--app-spacing) * 1.5);
|
||||
}
|
||||
|
||||
#helpdesk-contacts-grid .gridjs-wrapper,
|
||||
#helpdesk-tickets-grid .gridjs-wrapper {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.helpdesk-contract-cards {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity timeline */
|
||||
@@ -428,4 +794,236 @@
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Controlling dashboard --- */
|
||||
|
||||
/* Segment control — radio + label (no button CSS bleed) */
|
||||
.helpdesk-segment-control {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--app-border, #dee2e6);
|
||||
border-radius: var(--app-radius, 0.375rem);
|
||||
overflow: hidden;
|
||||
margin-bottom: calc(var(--app-spacing) * 1);
|
||||
}
|
||||
|
||||
.helpdesk-segment-control input[type="radio"] {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.helpdesk-segment-control label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.375rem 0.875rem;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
line-height: 1.4;
|
||||
color: var(--app-contrast, #1f2937);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
border-right: 1px solid var(--app-border, #dee2e6);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.helpdesk-segment-control label:last-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.helpdesk-segment-control input[type="radio"]:checked + label {
|
||||
background: var(--app-primary, #0d6efd);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.helpdesk-segment-control input[type="radio"]:focus-visible + label {
|
||||
outline: 2px solid var(--app-primary, #0d6efd);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.helpdesk-segment-control label:hover {
|
||||
background: var(--app-background-muted, #f8f9fa);
|
||||
}
|
||||
|
||||
.helpdesk-segment-control input[type="radio"]:checked + label:hover {
|
||||
background: var(--app-primary, #0d6efd);
|
||||
}
|
||||
|
||||
/* Horizontal bar chart */
|
||||
.helpdesk-controlling-chart {
|
||||
padding: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.helpdesk-hbar-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--app-spacing) * 0.5);
|
||||
}
|
||||
|
||||
.helpdesk-hbar-row {
|
||||
display: grid;
|
||||
grid-template-columns: 3.5rem 1fr;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.5);
|
||||
}
|
||||
|
||||
.helpdesk-hbar-label {
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
color: var(--app-muted, #6c757d);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.helpdesk-hbar-track {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.helpdesk-hbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 2px;
|
||||
height: 16px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.helpdesk-hbar-created {
|
||||
background: hsl(0 65% 60% / 0.5);
|
||||
}
|
||||
|
||||
.helpdesk-hbar-closed {
|
||||
background: hsl(152 50% 48% / 0.5);
|
||||
}
|
||||
|
||||
.helpdesk-hbar-value {
|
||||
position: absolute;
|
||||
right: -0.25rem;
|
||||
transform: translateX(100%);
|
||||
font-size: var(--text-xs, 0.75rem);
|
||||
font-weight: var(--font-medium, 500);
|
||||
color: var(--app-muted, #6c757d);
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
padding-left: 0.375rem;
|
||||
}
|
||||
|
||||
.helpdesk-hbar-legend {
|
||||
display: flex;
|
||||
gap: calc(var(--app-spacing) * 1);
|
||||
margin-top: calc(var(--app-spacing) * 0.75);
|
||||
font-size: var(--text-xs, 0.75rem);
|
||||
color: var(--app-muted, #6c757d);
|
||||
}
|
||||
|
||||
.helpdesk-hbar-legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.helpdesk-hbar-legend-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.helpdesk-hbar-legend-dot.helpdesk-hbar-created {
|
||||
background: hsl(0 65% 60% / 0.5);
|
||||
}
|
||||
|
||||
.helpdesk-hbar-legend-dot.helpdesk-hbar-closed {
|
||||
background: hsl(152 50% 48% / 0.5);
|
||||
}
|
||||
|
||||
/* Key-value tables (efficiency, contract metrics) */
|
||||
.helpdesk-controlling-kv-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
}
|
||||
|
||||
.helpdesk-controlling-kv-table td {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-bottom: 1px solid var(--app-border-subtle, #e9ecef);
|
||||
}
|
||||
|
||||
.helpdesk-controlling-kv-table td:last-child {
|
||||
text-align: right;
|
||||
font-weight: var(--font-medium, 500);
|
||||
color: var(--app-contrast, #1f2937);
|
||||
}
|
||||
|
||||
.helpdesk-controlling-kv-table td:first-child {
|
||||
color: var(--app-muted, #6c757d);
|
||||
}
|
||||
|
||||
/* Risk indicators */
|
||||
.helpdesk-controlling-risk-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--app-border, #dee2e6);
|
||||
font-weight: var(--font-medium, 500);
|
||||
}
|
||||
|
||||
.helpdesk-controlling-risk-summary-count {
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
color: var(--app-muted, #6c757d);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.helpdesk-controlling-risk-list {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.helpdesk-controlling-risk-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.5);
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--app-border-subtle, #e9ecef);
|
||||
}
|
||||
|
||||
.helpdesk-controlling-risk-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.helpdesk-controlling-risk-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.helpdesk-controlling-risk-dot-triggered {
|
||||
background: var(--app-danger, #dc3545);
|
||||
}
|
||||
|
||||
.helpdesk-controlling-risk-dot-ok {
|
||||
background: var(--app-success, #198754);
|
||||
}
|
||||
|
||||
.helpdesk-controlling-risk-label {
|
||||
flex: 1;
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
}
|
||||
|
||||
.helpdesk-controlling-risk-value {
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
color: var(--app-muted, #6c757d);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { renderEmptyState } from './helpdesk-empty-state.js';
|
||||
|
||||
function esc(str) {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = String(str ?? '');
|
||||
@@ -72,9 +74,12 @@ export function renderCommunicationFeed(entries, options = {}) {
|
||||
|
||||
const list = Array.isArray(entries) ? entries : [];
|
||||
if (list.length === 0) {
|
||||
return `<div class="app-empty-state app-empty-state-compact">
|
||||
<p class="app-empty-state-message">${esc(t(emptyMessage))}</p>
|
||||
</div>`;
|
||||
return renderEmptyState({
|
||||
message: t(emptyMessage),
|
||||
size: 'compact',
|
||||
align: 'center',
|
||||
icon: false,
|
||||
});
|
||||
}
|
||||
|
||||
let html = '<ol class="helpdesk-comm-feed" role="list">';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
32
modules/helpdesk/web/js/helpdesk-empty-state.js
Normal file
32
modules/helpdesk/web/js/helpdesk-empty-state.js
Normal file
@@ -0,0 +1,32 @@
|
||||
function esc(str) {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = String(str ?? '');
|
||||
return d.innerHTML;
|
||||
}
|
||||
|
||||
const EMPTY_ICON_SVG = `
|
||||
<svg class="app-empty-state-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
|
||||
<path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
export function renderEmptyState(options = {}) {
|
||||
const message = String(options.message || '').trim();
|
||||
if (!message) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const hint = String(options.hint || '').trim();
|
||||
const sizeRaw = String(options.size || 'compact').trim().toLowerCase();
|
||||
const size = ['default', 'compact', 'small'].includes(sizeRaw) ? sizeRaw : 'compact';
|
||||
const alignRaw = String(options.align || 'center').trim().toLowerCase();
|
||||
const align = ['center', 'left'].includes(alignRaw) ? alignRaw : 'center';
|
||||
const icon = options.icon === true;
|
||||
|
||||
return `<div class="app-empty-state" data-size="${esc(size)}" data-align="${esc(align)}">
|
||||
${icon ? EMPTY_ICON_SVG : ''}
|
||||
<p class="app-empty-state-message">${esc(message)}</p>
|
||||
${hint ? `<small class="app-empty-state-hint">${esc(hint)}</small>` : ''}
|
||||
</div>`;
|
||||
}
|
||||
@@ -3,6 +3,16 @@
|
||||
*/
|
||||
import { showAsyncFlash } from '/js/components/app-async-flash.js';
|
||||
|
||||
const settingsForm = document.getElementById('helpdesk-settings-form');
|
||||
|
||||
const getMessage = (key, fallback) => {
|
||||
if (!settingsForm || !settingsForm.dataset) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
return settingsForm.dataset[key] || fallback;
|
||||
};
|
||||
|
||||
// Toggle OAuth2 vs Basic Auth field visibility
|
||||
const authModeSelect = document.getElementById('auth_mode');
|
||||
const basicFields = document.getElementById('helpdesk-basic-auth-fields');
|
||||
@@ -12,9 +22,10 @@ const toggleAuthFields = () => {
|
||||
if (!authModeSelect || !basicFields || !oauth2Fields) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isOAuth2 = authModeSelect.value === 'oauth2';
|
||||
basicFields.style.display = isOAuth2 ? 'none' : '';
|
||||
oauth2Fields.style.display = isOAuth2 ? '' : 'none';
|
||||
basicFields.toggleAttribute('hidden', isOAuth2);
|
||||
oauth2Fields.toggleAttribute('hidden', !isOAuth2);
|
||||
};
|
||||
|
||||
if (authModeSelect) {
|
||||
@@ -24,11 +35,43 @@ if (authModeSelect) {
|
||||
|
||||
// Connection test button
|
||||
const testButton = document.getElementById('helpdesk-test-connection-button');
|
||||
const testResult = document.getElementById('helpdesk-connection-test-result');
|
||||
|
||||
const setTestResult = (variant, message) => {
|
||||
if (!testResult) {
|
||||
return;
|
||||
}
|
||||
|
||||
testResult.textContent = message;
|
||||
testResult.dataset.variant = variant;
|
||||
testResult.hidden = !message;
|
||||
};
|
||||
|
||||
const setButtonLoadingState = (isLoading) => {
|
||||
if (!testButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
const defaultLabel = testButton.dataset.labelDefault || getMessage('testDefaultLabel', 'Test connection');
|
||||
const loadingLabel = testButton.dataset.labelLoading || getMessage('testLoadingLabel', 'Testing...');
|
||||
|
||||
testButton.disabled = isLoading;
|
||||
testButton.toggleAttribute('aria-busy', isLoading);
|
||||
testButton.textContent = isLoading ? loadingLabel : defaultLabel;
|
||||
};
|
||||
|
||||
const parseJsonSafely = async (response) => {
|
||||
try {
|
||||
return await response.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
if (testButton) {
|
||||
testButton.addEventListener('click', async () => {
|
||||
testButton.disabled = true;
|
||||
testButton.setAttribute('aria-busy', 'true');
|
||||
setButtonLoadingState(true);
|
||||
setTestResult('info', getMessage('testLoadingLabel', 'Testing...'));
|
||||
|
||||
try {
|
||||
const csrfMeta = document.querySelector('meta[name="csrf-token"]');
|
||||
@@ -49,22 +92,35 @@ if (testButton) {
|
||||
},
|
||||
);
|
||||
|
||||
const data = await response.json();
|
||||
const data = await parseJsonSafely(response);
|
||||
const successMessage = getMessage('testSuccessMessage', 'Connection successful');
|
||||
const defaultErrorMessage = getMessage('testErrorMessage', 'Connection failed');
|
||||
|
||||
if (data.ok) {
|
||||
showAsyncFlash('success', data.message || 'Connection successful');
|
||||
if (response.ok && data?.ok) {
|
||||
const message = data.message || successMessage;
|
||||
setTestResult('success', message);
|
||||
showAsyncFlash('success', message);
|
||||
} else {
|
||||
let msg = data.error || 'Connection failed';
|
||||
if (data.debug?.http_code) {
|
||||
msg += ' (HTTP ' + data.debug.http_code + ')';
|
||||
let message = defaultErrorMessage;
|
||||
if (data?.error) {
|
||||
message = data.error;
|
||||
} else if (!response.ok) {
|
||||
message = `${defaultErrorMessage} (HTTP ${response.status})`;
|
||||
}
|
||||
showAsyncFlash('error', msg);
|
||||
|
||||
if (data?.debug?.http_code) {
|
||||
message += ` (HTTP ${data.debug.http_code})`;
|
||||
}
|
||||
|
||||
setTestResult('warning', message);
|
||||
showAsyncFlash('error', message);
|
||||
}
|
||||
} catch {
|
||||
showAsyncFlash('error', 'Connection failed');
|
||||
const message = getMessage('testErrorMessage', 'Connection failed');
|
||||
setTestResult('warning', message);
|
||||
showAsyncFlash('error', message);
|
||||
} finally {
|
||||
testButton.disabled = false;
|
||||
testButton.removeAttribute('aria-busy');
|
||||
setButtonLoadingState(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
renderCommunicationFeed,
|
||||
renderCommunicationHint,
|
||||
} from './helpdesk-communication.js';
|
||||
import { renderEmptyState } from './helpdesk-empty-state.js';
|
||||
|
||||
const container = document.querySelector('.app-details-container[data-ticket-no]');
|
||||
if (container) {
|
||||
@@ -95,9 +96,12 @@ function init(container) {
|
||||
|
||||
function renderTimeline(entries) {
|
||||
if (entries.length === 0) {
|
||||
return `<div class="app-empty-state app-empty-state-compact">
|
||||
<p class="app-empty-state-message">${esc(t('No activity found.'))}</p>
|
||||
</div>`;
|
||||
return renderEmptyState({
|
||||
message: t('No activity found.'),
|
||||
size: 'compact',
|
||||
align: 'center',
|
||||
icon: false,
|
||||
});
|
||||
}
|
||||
|
||||
let html = '<div class="helpdesk-timeline">';
|
||||
|
||||
Reference in New Issue
Block a user