feat(helpdesk): add debitor meetings tab with upcoming/past meeting display

Adds a meetings section to the debitor detail page, fetching meeting data from BC OData API with cache control support. Includes timeline UI for upcoming and past meetings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-13 14:13:29 +02:00
parent 4e359fe659
commit 42efdb8102
12 changed files with 679 additions and 15 deletions
--- a/modules/helpdesk/web/css/helpdesk.css
+++ b/modules/helpdesk/web/css/helpdesk.css
@@ -2186,4 +2186,154 @@
    line-height: 1.45;
    color: var(--app-muted, #6c757d);
  }
+
+  /* ── Sales split layout (contacts 2/3 + meetings 1/3) ─ */
+
+  .helpdesk-sales-split {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: calc(var(--app-spacing) * 1.5);
+    align-items: start;
+  }
+
+  .helpdesk-sales-split-main {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .helpdesk-sales-split-aside {
+    padding-left: calc(var(--app-spacing) * 1.5);
+  }
+
+  @media (max-width: 860px) {
+    .helpdesk-sales-split {
+      grid-template-columns: 1fr;
+    }
+
+    .helpdesk-sales-split-aside {
+      padding-left: 0;
+      padding-top: calc(var(--app-spacing) * 1);
+    }
+  }
+
+  /* ── Meetings timeline ───────────────────────────────── */
+
+  .helpdesk-meetings-group-header {
+    font-size: var(--text-xs, 0.75rem);
+    font-weight: var(--font-semibold, 600);
+    letter-spacing: var(--tracking-wide, 0.025em);
+    text-transform: uppercase;
+    color: var(--app-muted, #6c757d);
+    padding-block: calc(var(--app-spacing) * 0.5);
+    margin-block-start: calc(var(--app-spacing) * 1.25);
+    border-bottom: 1px solid var(--app-border, #d0d7de);
+  }
+
+  .helpdesk-meetings-group-header:first-child {
+    margin-block-start: 0;
+  }
+
+  .helpdesk-meetings-group-header-past {
+    margin-block-start: calc(var(--app-spacing) * 1.5);
+  }
+
+  .helpdesk-meetings-month {
+    padding-block-start: calc(var(--app-spacing) * 0.75);
+  }
+
+  .helpdesk-meetings-month-label {
+    display: block;
+    font-size: var(--text-xs, 0.75rem);
+    font-weight: var(--font-medium, 500);
+    color: var(--app-muted, #6c757d);
+    padding-block-end: calc(var(--app-spacing) * 0.35);
+  }
+
+  .helpdesk-meetings-card {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--app-spacing) * 0.2);
+    padding: calc(var(--app-spacing) * 0.6) calc(var(--app-spacing) * 0.75);
+    border-left: 3px solid var(--app-border, #d0d7de);
+    border-radius: 0;
+    transition: background 0.15s ease;
+  }
+
+  .helpdesk-meetings-card-released {
+    border-left-color: var(--app-success, #198754);
+  }
+
+  .helpdesk-meetings-card-pending {
+    border-left-color: hsl(40 75% 55%);
+  }
+
+  .helpdesk-meetings-card:hover {
+    background: var(--app-hover-background, hsl(0 0% 0% / 0.03));
+  }
+
+  .helpdesk-meetings-card + .helpdesk-meetings-card {
+    margin-block-start: calc(var(--app-spacing) * 0.6);
+  }
+
+  .helpdesk-meetings-card-body {
+    min-width: 0;
+  }
+
+  .helpdesk-meetings-card-comment {
+    margin: 0;
+    font-size: var(--text-sm, 0.875rem);
+    font-weight: var(--font-medium, 500);
+    line-height: 1.4;
+    color: var(--app-contrast, #1f2937);
+  }
+
+  .helpdesk-meetings-card-secondary {
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--app-spacing) * 0.35);
+    font-size: var(--text-xs, 0.75rem);
+    color: var(--app-muted, #6c757d);
+  }
+
+  .helpdesk-meetings-card-context {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--app-spacing) * 0.25);
+  }
+
+  .helpdesk-meetings-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.1rem 0.45rem;
+    border-radius: 999px;
+    font-size: 0.6875rem;
+    font-weight: var(--font-medium, 500);
+    line-height: 1.4;
+  }
+
+  .helpdesk-meetings-badge-released {
+    background: hsl(142 64% 93%);
+    color: hsl(142 64% 28%);
+  }
+
+  .helpdesk-meetings-badge-pending {
+    background: hsl(40 80% 92%);
+    color: hsl(40 60% 30%);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .helpdesk-meetings-badge-released {
+      background: hsl(142 40% 18%);
+      color: hsl(142 60% 70%);
+    }
+
+    .helpdesk-meetings-badge-pending {
+      background: hsl(40 40% 18%);
+      color: hsl(40 60% 70%);
+    }
+  }
+
 }