feat(helpdesk): align module with core list/drawer standards

- add helpdesk module pages, services, settings and tests - standardize debtor list on drawer/grid contracts and robust filter drawer behavior - add helpdesk aside panel navigation and settings visibility provider - switch primary list slug to helpdesk/debitor and remove helpdesk/search compatibility - include required core contract updates for list contracts and detail/drawer integration
2026-04-02 17:48:27 +02:00
parent 5d07236758
commit a0d7670dd7
55 changed files with 5977 additions and 11 deletions
--- a/modules/helpdesk/web/css/helpdesk.css
+++ b/modules/helpdesk/web/css/helpdesk.css
@@ -0,0 +1,137 @@
+@layer pages {
+  /* Clickable rows — shared between search results and ticket list */
+  .app-clickable-row {
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .app-clickable-row:hover,
+  .app-clickable-row:focus-visible {
+    background: color-mix(in srgb, var(--app-contrast, #000) 4%, transparent);
+  }
+
+  .app-clickable-row:focus-visible {
+    outline: 2px solid var(--app-primary, #0d6efd);
+    outline-offset: -2px;
+  }
+
+  /* Async loading spinner */
+  .helpdesk-tab-loading {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 2rem;
+    color: var(--app-muted, #6c757d);
+    font-size: 0.875rem;
+  }
+
+  .helpdesk-spinner {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid var(--app-border, #dee2e6);
+    border-top-color: var(--app-primary, #0d6efd);
+    border-radius: 50%;
+    animation: helpdesk-spin 0.6s linear infinite;
+  }
+
+  @keyframes helpdesk-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  /* Overview tab — header links */
+  .app-stats-table-header .helpdesk-tab-link {
+    float: right;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    text-decoration: none;
+  }
+
+  .app-stats-table-header .helpdesk-tab-link:hover {
+    text-decoration: underline;
+  }
+
+  /* KPI tile wrappers — ensure data-kpi spans don't break flex layout */
+  .app-tiles > [data-kpi] {
+    display: contents;
+  }
+
+  /* Activity timeline */
+  .helpdesk-timeline {
+    padding: 0.75rem 1rem;
+  }
+
+  .helpdesk-timeline-date {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--app-muted, #6c757d);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    padding: 0.75rem 0 0.375rem;
+    border-bottom: 1px solid var(--app-border, #dee2e6);
+    margin-bottom: 0.5rem;
+  }
+
+  .helpdesk-timeline-date:first-child {
+    padding-top: 0;
+  }
+
+  .helpdesk-timeline-entry {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.625rem;
+    padding: 0.375rem 0;
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+
+  .helpdesk-timeline-icon {
+    flex: 0 0 1.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    font-size: 0.75rem;
+  }
+
+  .helpdesk-timeline-entry[data-variant="message"] .helpdesk-timeline-icon {
+    background: #d9e8fb;
+    color: #1a56db;
+  }
+
+  .helpdesk-timeline-entry[data-variant="status"] .helpdesk-timeline-icon {
+    background: #fde8d8;
+    color: #b35c14;
+  }
+
+  .helpdesk-timeline-entry[data-variant="forward"] .helpdesk-timeline-icon {
+    background: #f3e8ff;
+    color: #7c3aed;
+  }
+
+  .helpdesk-timeline-entry[data-variant="file"] .helpdesk-timeline-icon {
+    background: #d9f2e6;
+    color: #1f6a3a;
+  }
+
+  .helpdesk-timeline-entry[data-variant="other"] .helpdesk-timeline-icon {
+    background: var(--app-border, #dee2e6);
+    color: var(--app-muted, #6c757d);
+  }
+
+  .helpdesk-timeline-body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .helpdesk-timeline-body strong {
+    font-weight: 600;
+  }
+
+  .helpdesk-timeline-time {
+    margin-left: 0.5rem;
+    color: var(--app-muted, #6c757d);
+    font-size: 0.8125rem;
+  }
+}