From 7965e8e753151d2966d627dd04861bb36967abce Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Mon, 22 Dec 2025 18:19:36 +0100
Subject: [PATCH] Revamps Journal and Activity UI with new components

Introduces comprehensive styling and interaction for:
- Journal mini-tabs and entry layouts
- New activity timeline and filtering
- Responsive and visually enhanced UI components

Improves customer detail page with modern design patterns
---
 wwwroot/poc-customer-detail.html | 1097 ++++++++++++++++++++++++++++--
 1 file changed, 1029 insertions(+), 68 deletions(-)

diff --git a/wwwroot/poc-customer-detail.html b/wwwroot/poc-customer-detail.html
index 20e1bf9..fce68e1 100644
--- a/wwwroot/poc-customer-detail.html
+++ b/wwwroot/poc-customer-detail.html
@@ -1281,6 +1281,559 @@
     swp-attendance-segment.noshow {
       background: var(--color-red);
     }
+
+    /* ==========================================
+       JOURNAL - NEW LAYOUT
+       ========================================== */
+
+    /* Journal Mini Tabs */
+    swp-journal-mini-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 20px;
+    }
+
+    swp-journal-mini-tab {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-journal-mini-tab:hover {
+      border-color: var(--color-text-secondary);
+    }
+
+    swp-journal-mini-tab.active {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 5%, white);
+    }
+
+    swp-journal-mini-tab .tab-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    swp-journal-mini-tab .tab-dot.blue { background: var(--color-blue); }
+    swp-journal-mini-tab .tab-dot.amber { background: var(--color-amber); }
+    swp-journal-mini-tab .tab-dot.purple { background: var(--color-purple); }
+
+    swp-journal-mini-tab .tab-count {
+      font-size: 11px;
+      padding: 2px 6px;
+      background: var(--color-background);
+      border-radius: 10px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Journal Columns */
+    swp-journal-columns {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+    }
+
+    swp-journal-column {
+      display: flex;
+      flex-direction: column;
+    }
+
+    swp-journal-column-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-journal-column-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-journal-column-title .col-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    swp-journal-column-title .col-dot.amber { background: var(--color-amber); }
+    swp-journal-column-title .col-dot.purple { background: var(--color-purple); }
+
+    swp-journal-column-add {
+      font-size: 12px;
+      color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-journal-column-add:hover {
+      text-decoration: underline;
+    }
+
+    /* Journal Entry - New Style */
+    swp-journal-entry-new {
+      display: block;
+      padding: 14px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      margin-bottom: 10px;
+      transition: border-color 150ms ease;
+    }
+
+    swp-journal-entry-new:hover {
+      border-color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-new:last-child {
+      margin-bottom: 0;
+    }
+
+    swp-journal-entry-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+
+    swp-journal-entry-type-new {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      border-radius: 4px;
+    }
+
+    swp-journal-entry-type-new.farveformel {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b8860b;
+    }
+
+    swp-journal-entry-type-new.analyse {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+      color: var(--color-purple);
+    }
+
+    swp-journal-entry-type-new.note {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-journal-entry-type-new.advarsel {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    swp-journal-entry-tags-new {
+      display: flex;
+      gap: 6px;
+    }
+
+    swp-journal-tag-new {
+      display: inline-block;
+      padding: 3px 8px;
+      font-size: 10px;
+      font-weight: 500;
+      border-radius: 4px;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-tag-new.sensitiv {
+      background: color-mix(in srgb, var(--color-purple) 12%, white);
+      color: var(--color-purple);
+    }
+
+    swp-journal-tag-new.allergi {
+      background: color-mix(in srgb, var(--color-red) 12%, white);
+      color: var(--color-red);
+    }
+
+    swp-journal-entry-delete-new {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 150ms ease;
+    }
+
+    swp-journal-entry-new:hover swp-journal-entry-delete-new {
+      opacity: 0.6;
+    }
+
+    swp-journal-entry-delete-new:hover {
+      opacity: 1;
+      color: var(--color-red);
+    }
+
+    swp-journal-entry-body {
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--color-text);
+    }
+
+    swp-journal-entry-body .mono {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      background: var(--color-background);
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+
+    swp-journal-entry-body .label {
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-footer-new {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 12px;
+      padding-top: 10px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-journal-entry-date-new {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-icons-new {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-journal-entry-icon {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-icon img {
+      width: 14px;
+      height: 14px;
+      opacity: 0.5;
+    }
+
+    swp-journal-entry-icon.warning {
+      color: var(--color-amber);
+    }
+
+    swp-journal-entry-icon.warning img {
+      opacity: 1;
+    }
+
+    /* Noter Section (full width above columns) */
+    swp-journal-noter-section {
+      display: block;
+      margin-bottom: 24px;
+    }
+
+    swp-journal-noter-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+
+    /* Kundeprofil i Journal */
+    swp-journal-profile {
+      display: block;
+      margin-top: 24px;
+      padding-top: 20px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-journal-profile-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      margin-bottom: 12px;
+      cursor: pointer;
+    }
+
+    swp-journal-profile-header .arrow {
+      transition: transform 150ms ease;
+    }
+
+    swp-journal-profile-header.collapsed .arrow {
+      transform: rotate(-90deg);
+    }
+
+    swp-journal-profile swp-profile-boxes {
+      transition: all 200ms ease;
+    }
+
+    swp-journal-profile swp-profile-boxes.collapsed {
+      display: none;
+    }
+
+    /* ==========================================
+       ACTIVITY / AUDIT LOG
+       ========================================== */
+
+    /* Activity Filters */
+    swp-activity-filters {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    swp-activity-filter {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 20px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-activity-filter:hover {
+      border-color: var(--color-text-secondary);
+    }
+
+    swp-activity-filter.active {
+      background: var(--color-teal);
+      color: white;
+      border-color: var(--color-teal);
+    }
+
+    swp-activity-filter .filter-icon {
+      font-size: 11px;
+    }
+
+    /* Activity Timeline */
+    swp-activity-timeline {
+      display: block;
+      position: relative;
+    }
+
+    /* Date Group */
+    swp-activity-date-group {
+      display: block;
+      margin-bottom: 24px;
+    }
+
+    swp-activity-date-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 12px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    swp-activity-date-header::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: var(--color-border);
+    }
+
+    /* Activity Item */
+    swp-activity-item {
+      display: flex;
+      gap: 12px;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-activity-item:last-child {
+      border-bottom: none;
+    }
+
+    swp-activity-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    swp-activity-icon.system {
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-activity-icon.customer {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-activity-icon.employee {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    swp-activity-icon.booking {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+      color: var(--color-purple);
+    }
+
+    swp-activity-icon.communication {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b8860b;
+    }
+
+    swp-activity-icon.payment {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-activity-icon.warning {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    swp-activity-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    swp-activity-title {
+      display: block;
+      font-size: 13px;
+      color: var(--color-text);
+      margin-bottom: 2px;
+    }
+
+    swp-activity-title strong {
+      font-weight: 600;
+    }
+
+    swp-activity-title .highlight {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    swp-activity-title .old-value {
+      color: var(--color-text-secondary);
+      text-decoration: line-through;
+    }
+
+    swp-activity-title .new-value {
+      color: var(--color-teal);
+    }
+
+    swp-activity-meta {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-activity-time {
+      font-family: var(--font-mono);
+    }
+
+    swp-activity-actor {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    swp-activity-actor::before {
+      content: '·';
+    }
+
+    swp-activity-badge {
+      display: inline-block;
+      padding: 2px 6px;
+      font-size: 9px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      border-radius: 3px;
+      margin-left: 6px;
+    }
+
+    swp-activity-badge.auto {
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-activity-badge.online {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-activity-badge.manual {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    /* Activity Details (expandable) */
+    swp-activity-details {
+      display: block;
+      margin-top: 8px;
+      padding: 10px 12px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-activity-details code {
+      font-family: var(--font-mono);
+      font-size: 11px;
+      background: var(--color-background);
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+
+    /* Load More */
+    swp-activity-load-more {
+      display: block;
+      text-align: center;
+      padding: 16px;
+      font-size: 13px;
+      color: var(--color-teal);
+      cursor: pointer;
+      border-top: 1px solid var(--color-border);
+      margin-top: 12px;
+    }
+
+    swp-activity-load-more:hover {
+      text-decoration: underline;
+    }
   </style>
 </head>
 <body>
@@ -1350,6 +1903,7 @@
     <swp-tab data-tab="journal">Journal</swp-tab>
     <swp-tab data-tab="appointments">Aftaler</swp-tab>
     <swp-tab data-tab="giftcards">Gavekort</swp-tab>
+    <swp-tab data-tab="activity">Aktivitet</swp-tab>
   </swp-tab-bar>
 
   <!-- Tab Contents -->
@@ -1729,82 +2283,224 @@
 
   <!-- JOURNAL TAB -->
   <swp-tab-content data-tab="journal">
-    <swp-add-btn>+ Tilføj note</swp-add-btn>
 
-    <!-- Farveformler Section -->
-    <swp-card>
-      <swp-section-label>Farveformler</swp-section-label>
+    <!-- Mini Tabs for quick filter -->
+    <swp-journal-mini-tabs>
+      <swp-journal-mini-tab class="active">
+        <span class="tab-dot blue"></span>
+        Alle
+        <span class="tab-count">5</span>
+      </swp-journal-mini-tab>
+      <swp-journal-mini-tab>
+        <span class="tab-dot blue"></span>
+        Noter
+        <span class="tab-count">2</span>
+      </swp-journal-mini-tab>
+      <swp-journal-mini-tab>
+        <span class="tab-dot amber"></span>
+        Farveformler
+        <span class="tab-count">2</span>
+      </swp-journal-mini-tab>
+      <swp-journal-mini-tab>
+        <span class="tab-dot purple"></span>
+        Analyser
+        <span class="tab-count">1</span>
+      </swp-journal-mini-tab>
+    </swp-journal-mini-tabs>
 
-      <swp-journal-entry>
-        <swp-journal-meta>
-          <swp-journal-type class="farveformel">Farveformel</swp-journal-type>
-          <swp-journal-date>12. nov 2025</swp-journal-date>
-        </swp-journal-meta>
-        <swp-journal-content>
-          <strong>Formel:</strong> 7/1 + 7/0 (1:1) · Oxidant 6% · Virketid 35 min<br>
-          <strong>Resultat:</strong> Flot ensartet farve, kunden meget tilfreds
-        </swp-journal-content>
-        <swp-journal-author>— Emma L.</swp-journal-author>
-      </swp-journal-entry>
+    <!-- Noter Section - full width -->
+    <swp-journal-noter-section>
+      <swp-card>
+        <swp-journal-column-header>
+          <swp-journal-column-title>
+            <span class="col-dot" style="background: var(--color-blue);"></span>
+            Noter
+          </swp-journal-column-title>
+          <swp-journal-column-add>+ Tilføj note</swp-journal-column-add>
+        </swp-journal-column-header>
 
-      <swp-journal-entry>
-        <swp-journal-meta>
-          <swp-journal-type class="farveformel">Farveformel</swp-journal-type>
-          <swp-journal-date>15. sep 2025</swp-journal-date>
-        </swp-journal-meta>
-        <swp-journal-content>
-          <strong>Formel:</strong> 8/0 + 7/1 (2:1) · Oxidant 6% · Virketid 30 min<br>
-          <strong>Resultat:</strong> Lidt for varm, juster næste gang
-        </swp-journal-content>
-        <swp-journal-author>— Emma L.</swp-journal-author>
-      </swp-journal-entry>
-    </swp-card>
+        <swp-journal-noter-grid>
+          <swp-journal-entry-new>
+            <swp-journal-entry-header>
+              <swp-journal-entry-type-new class="note">Note</swp-journal-entry-type-new>
+              <swp-journal-entry-delete-new>🗑</swp-journal-entry-delete-new>
+            </swp-journal-entry-header>
+            <swp-journal-entry-body>
+              Kunden foretrækker naturlige farver og ønsker lidt ekstra tid til konsultation. Husk at tjekke allergistatus inden farvebehandling.
+            </swp-journal-entry-body>
+            <swp-journal-entry-footer-new>
+              <swp-journal-entry-date-new>9. dec 2025 · Af: Emma</swp-journal-entry-date-new>
+              <swp-journal-entry-icons-new>
+                <swp-journal-entry-icon>
+                  <img src="icons/eye.svg" alt="">
+                  <span>Alle</span>
+                </swp-journal-entry-icon>
+              </swp-journal-entry-icons-new>
+            </swp-journal-entry-footer-new>
+          </swp-journal-entry-new>
 
-    <!-- Analyser Section -->
-    <swp-card>
-      <swp-section-label>Analyser</swp-section-label>
+          <swp-journal-entry-new>
+            <swp-journal-entry-header>
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <swp-journal-entry-type-new class="advarsel">Advarsel</swp-journal-entry-type-new>
+                <swp-journal-entry-tags-new>
+                  <swp-journal-tag-new class="allergi">Allergi</swp-journal-tag-new>
+                </swp-journal-entry-tags-new>
+              </div>
+              <swp-journal-entry-delete-new>🗑</swp-journal-entry-delete-new>
+            </swp-journal-entry-header>
+            <swp-journal-entry-body>
+              <strong>PARFUMEALLERGI</strong> — Brug kun uparfumerede produkter. Havde reaktion på standard shampoo ved første besøg.
+            </swp-journal-entry-body>
+            <swp-journal-entry-footer-new>
+              <swp-journal-entry-date-new>15. mar 2024 · Af: Nina</swp-journal-entry-date-new>
+              <swp-journal-entry-icons-new>
+                <swp-journal-entry-icon>
+                  <img src="icons/eye.svg" alt="">
+                  <span>Alle</span>
+                </swp-journal-entry-icon>
+                <swp-journal-entry-icon class="warning">
+                  <img src="icons/warning.svg" alt="">
+                  <span>Advarsel</span>
+                </swp-journal-entry-icon>
+              </swp-journal-entry-icons-new>
+            </swp-journal-entry-footer-new>
+          </swp-journal-entry-new>
+        </swp-journal-noter-grid>
+      </swp-card>
+    </swp-journal-noter-section>
 
-      <swp-journal-entry>
-        <swp-journal-meta>
-          <swp-journal-type class="analyse">Håranalyse</swp-journal-type>
-          <swp-journal-date>10. aug 2025</swp-journal-date>
-        </swp-journal-meta>
-        <swp-journal-content>
-          <strong>Porøsitet:</strong> Medium<br>
-          <strong>Elasticitet:</strong> Normal<br>
-          <strong>Tilstand:</strong> Let tørt i spidserne<br>
-          <strong>Anbefaling:</strong> Fugtgivende behandling hver 6. uge
-        </swp-journal-content>
-        <swp-journal-author>— Nina K.</swp-journal-author>
-      </swp-journal-entry>
-    </swp-card>
+    <!-- Two Column Layout: Farveformler + Analyser -->
+    <swp-journal-columns>
+      <!-- Farveformler Column -->
+      <swp-journal-column>
+        <swp-card style="height: 100%;">
+          <swp-journal-column-header>
+            <swp-journal-column-title>
+              <span class="col-dot amber"></span>
+              Farveformler
+            </swp-journal-column-title>
+            <swp-journal-column-add>+ Tilføj</swp-journal-column-add>
+          </swp-journal-column-header>
 
-    <!-- Noter Section -->
-    <swp-card>
-      <swp-section-label>Noter</swp-section-label>
+          <swp-journal-entry-new>
+            <swp-journal-entry-header>
+              <swp-journal-entry-type-new class="farveformel">Farveformel</swp-journal-entry-type-new>
+              <swp-journal-entry-delete-new>🗑</swp-journal-entry-delete-new>
+            </swp-journal-entry-header>
+            <swp-journal-entry-body>
+              <span class="label">Mål/tone:</span> Kold<br>
+              <span class="label">Oxidant:</span> <span class="mono">6%</span><br>
+              <span class="label">Formel:</span> <span class="mono">7/1 + 7/0 (1:1)</span><br>
+              <span class="label">Virketid:</span> <span class="mono">35 min</span><br>
+              <span class="label">Placering:</span> Hele håret<br><br>
+              Resultat: Flot ensartet farve, kunden meget tilfreds
+            </swp-journal-entry-body>
+            <swp-journal-entry-footer-new>
+              <swp-journal-entry-date-new>12. nov 2025 · Af: Emma</swp-journal-entry-date-new>
+              <swp-journal-entry-icons-new>
+                <swp-journal-entry-icon>
+                  <img src="icons/eye.svg" alt="">
+                  <span>Alle</span>
+                </swp-journal-entry-icon>
+              </swp-journal-entry-icons-new>
+            </swp-journal-entry-footer-new>
+          </swp-journal-entry-new>
 
-      <swp-journal-entry>
-        <swp-journal-meta>
-          <swp-journal-type class="note">Note</swp-journal-type>
-          <swp-journal-date>9. dec 2025</swp-journal-date>
-        </swp-journal-meta>
-        <swp-journal-content>
-          Kunden foretrækker naturlige farver og ønsker lidt ekstra tid til konsultation. Husk at tjekke allergistatus inden farvebehandling.
-        </swp-journal-content>
-        <swp-journal-author>— Emma L.</swp-journal-author>
-      </swp-journal-entry>
+          <swp-journal-entry-new>
+            <swp-journal-entry-header>
+              <swp-journal-entry-type-new class="farveformel">Farveformel</swp-journal-entry-type-new>
+              <swp-journal-entry-delete-new>🗑</swp-journal-entry-delete-new>
+            </swp-journal-entry-header>
+            <swp-journal-entry-body>
+              <span class="label">Mål/tone:</span> Varm<br>
+              <span class="label">Oxidant:</span> <span class="mono">6%</span><br>
+              <span class="label">Formel:</span> <span class="mono">8/0 + 7/1 (2:1)</span><br>
+              <span class="label">Virketid:</span> <span class="mono">30 min</span><br>
+              <span class="label">Placering:</span> Rødder<br><br>
+              Resultat: Lidt for varm, juster næste gang
+            </swp-journal-entry-body>
+            <swp-journal-entry-footer-new>
+              <swp-journal-entry-date-new>15. sep 2025 · Af: Emma</swp-journal-entry-date-new>
+              <swp-journal-entry-icons-new>
+                <swp-journal-entry-icon>
+                  <img src="icons/eye.svg" alt="">
+                  <span>Alle</span>
+                </swp-journal-entry-icon>
+              </swp-journal-entry-icons-new>
+            </swp-journal-entry-footer-new>
+          </swp-journal-entry-new>
+        </swp-card>
+      </swp-journal-column>
 
-      <swp-journal-entry>
-        <swp-journal-meta>
-          <swp-journal-type class="advarsel">Advarsel</swp-journal-type>
-          <swp-journal-date>15. mar 2024</swp-journal-date>
-        </swp-journal-meta>
-        <swp-journal-content>
-          <strong>PARFUMEALLERGI</strong> - Brug kun uparfumerede produkter. Havde reaktion på standard shampoo ved første besøg.
-        </swp-journal-content>
-        <swp-journal-author>— Nina K.</swp-journal-author>
-      </swp-journal-entry>
-    </swp-card>
+      <!-- Analyser Column -->
+      <swp-journal-column>
+        <swp-card style="height: 100%;">
+          <swp-journal-column-header>
+            <swp-journal-column-title>
+              <span class="col-dot purple"></span>
+              Hår & Hovedbund
+            </swp-journal-column-title>
+            <swp-journal-column-add>+ Tilføj</swp-journal-column-add>
+          </swp-journal-column-header>
+
+          <swp-journal-entry-new>
+            <swp-journal-entry-header>
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <swp-journal-entry-type-new class="analyse">Analyse</swp-journal-entry-type-new>
+                <swp-journal-entry-tags-new>
+                  <swp-journal-tag-new class="sensitiv">Sensitiv</swp-journal-tag-new>
+                </swp-journal-entry-tags-new>
+              </div>
+              <swp-journal-entry-delete-new>🗑</swp-journal-entry-delete-new>
+            </swp-journal-entry-header>
+            <swp-journal-entry-body>
+              <span class="label">Hovedbund:</span> Normal<br>
+              <span class="label">Hår:</span> <span class="mono">Medium · Bølget</span><br>
+              <span class="label">Porøsitet:</span> <span class="mono">Medium</span><br>
+              <span class="label">Elasticitet:</span> <span class="mono">Normal</span><br>
+              <span class="label">Tilstand:</span> Let tørt i spidserne<br><br>
+              Anbefaling: Fugtgivende behandling hver 6. uge
+            </swp-journal-entry-body>
+            <swp-journal-entry-footer-new>
+              <swp-journal-entry-date-new>10. aug 2025 · Af: Nina</swp-journal-entry-date-new>
+              <swp-journal-entry-icons-new>
+                <swp-journal-entry-icon>
+                  <img src="icons/eye.svg" alt="">
+                  <span>Alle</span>
+                </swp-journal-entry-icon>
+              </swp-journal-entry-icons-new>
+            </swp-journal-entry-footer-new>
+          </swp-journal-entry-new>
+        </swp-card>
+      </swp-journal-column>
+    </swp-journal-columns>
+
+    <!-- Kundeprofil Section -->
+    <swp-journal-profile>
+      <swp-journal-profile-header onclick="this.classList.toggle('collapsed'); this.nextElementSibling.classList.toggle('collapsed');">
+        <span class="arrow">▼</span>
+        Vis "Kundeprofil" (hurtige facts)
+      </swp-journal-profile-header>
+      <swp-profile-boxes id="journalProfileBoxes">
+        <swp-profile-box>
+          <swp-profile-box-label>Hårtype</swp-profile-box-label>
+          <swp-profile-box-value>Medium · Bølget</swp-profile-box-value>
+        </swp-profile-box>
+        <swp-profile-box>
+          <swp-profile-box-label>Porøsitet</swp-profile-box-label>
+          <swp-profile-box-value>Medium</swp-profile-box-value>
+        </swp-profile-box>
+        <swp-profile-box>
+          <swp-profile-box-label>Præference</swp-profile-box-label>
+          <swp-profile-box-value>Kold tone, ikke for mørk</swp-profile-box-value>
+        </swp-profile-box>
+        <swp-profile-box class="warning">
+          <swp-profile-box-label>Advarsler</swp-profile-box-label>
+          <swp-profile-box-value>Parfumeallergi · Sensitiv hovedbund</swp-profile-box-value>
+        </swp-profile-box>
+      </swp-profile-boxes>
+    </swp-journal-profile>
   </swp-tab-content>
 
   <!-- AFTALER TAB -->
@@ -1920,6 +2616,240 @@
     </swp-card>
   </swp-tab-content>
 
+  <!-- AKTIVITET TAB -->
+  <swp-tab-content data-tab="activity">
+    <!-- Filters -->
+    <swp-activity-filters>
+      <swp-activity-filter class="active">Alle</swp-activity-filter>
+      <swp-activity-filter><span class="filter-icon">📅</span> Bookinger</swp-activity-filter>
+      <swp-activity-filter><span class="filter-icon">💬</span> Kommunikation</swp-activity-filter>
+      <swp-activity-filter><span class="filter-icon">✏️</span> Ændringer</swp-activity-filter>
+      <swp-activity-filter><span class="filter-icon">💳</span> Betalinger</swp-activity-filter>
+      <swp-activity-filter><span class="filter-icon">🔐</span> Login</swp-activity-filter>
+    </swp-activity-filters>
+
+    <swp-card>
+      <swp-activity-timeline>
+
+        <!-- I dag -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>I dag</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="communication">💬</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>SMS påmindelse</strong> sendt om aftale i morgen
+                <swp-activity-badge class="auto">Auto</swp-activity-badge>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>14:00</swp-activity-time>
+                <swp-activity-actor>System</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="customer">👤</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                Kunde <strong>loggede ind</strong> via online booking
+                <swp-activity-badge class="online">Online</swp-activity-badge>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>11:23</swp-activity-time>
+                <swp-activity-actor>Sofie Nielsen</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+        <!-- 9. december -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>9. december 2025</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="payment">💳</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Betaling modtaget</strong> — <span class="highlight">1.799 kr</span> (Dankort)
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>12:45</swp-activity-time>
+                <swp-activity-actor>Emma L.</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="booking">📅</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Aftale gennemført</strong> — Klip + Farve hos Emma L.
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>12:30</swp-activity-time>
+                <swp-activity-actor>Emma L.</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="booking">📅</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Check-in</strong> — Kunden er ankommet
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>10:02</swp-activity-time>
+                <swp-activity-actor>Reception</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="employee">✏️</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Journal opdateret</strong> — Ny farveformel tilføjet
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>12:35</swp-activity-time>
+                <swp-activity-actor>Emma L.</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+        <!-- 5. december -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>5. december 2025</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="booking">📅</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Ny booking</strong> oprettet — 9. dec kl. 10:00, Klip + Farve
+                <swp-activity-badge class="online">Online</swp-activity-badge>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>19:42</swp-activity-time>
+                <swp-activity-actor>Sofie Nielsen</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="customer">👤</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                Kunde <strong>loggede ind</strong> via online booking
+                <swp-activity-badge class="online">Online</swp-activity-badge>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>19:40</swp-activity-time>
+                <swp-activity-actor>Sofie Nielsen</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+        <!-- 28. november -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>28. november 2025</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="employee">✏️</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Telefon ændret</strong> — <span class="old-value">+45 12 34 56 78</span> → <span class="new-value">+45 23 45 67 89</span>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>14:15</swp-activity-time>
+                <swp-activity-actor>Emma L.</swp-activity-actor>
+              </swp-activity-meta>
+              <swp-activity-details>
+                Kunden oplyste nyt nummer under besøg.
+              </swp-activity-details>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="employee">✏️</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Tag tilføjet</strong> — <span class="highlight">VIP</span>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>14:10</swp-activity-time>
+                <swp-activity-actor>Emma L.</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+        <!-- 12. november -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>12. november 2025</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="warning">⚠️</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Booking aflyst</strong> — Af kunden med 2 dages varsel
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>09:15</swp-activity-time>
+                <swp-activity-actor>Sofie Nielsen</swp-activity-actor>
+              </swp-activity-meta>
+              <swp-activity-details>
+                Årsag: "Kan desværre ikke den dag alligevel"
+              </swp-activity-details>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="communication">💬</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Email sendt</strong> — Booking bekræftelse
+                <swp-activity-badge class="auto">Auto</swp-activity-badge>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>08:00</swp-activity-time>
+                <swp-activity-actor>System</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+        <!-- Marts 2024 -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>15. marts 2024</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="system">✨</swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Kunde oprettet</strong>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>10:30</swp-activity-time>
+                <swp-activity-actor>Nina K.</swp-activity-actor>
+              </swp-activity-meta>
+              <swp-activity-details>
+                Oprettet manuelt ved første besøg. Kilde: Walk-in
+              </swp-activity-details>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+      </swp-activity-timeline>
+
+      <swp-activity-load-more>Indlæs ældre aktivitet...</swp-activity-load-more>
+    </swp-card>
+  </swp-tab-content>
+
   <script>
     // ==========================================
     // TAB SWITCHING
@@ -2087,6 +3017,37 @@
 
     // Load chart when Økonomi tab is shown
     document.querySelector('swp-tab[data-tab="economy"]').addEventListener('click', loadChart);
+
+    // ==========================================
+    // JOURNAL MINI TABS
+    // ==========================================
+    document.querySelectorAll('swp-journal-mini-tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        document.querySelectorAll('swp-journal-mini-tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        // In a real app, this would filter the entries
+      });
+    });
+
+    // ==========================================
+    // JOURNAL ENTRY DELETE
+    // ==========================================
+    document.querySelectorAll('swp-journal-entry-delete-new').forEach(btn => {
+      btn.addEventListener('click', () => {
+        btn.closest('swp-journal-entry-new').remove();
+      });
+    });
+
+    // ==========================================
+    // ACTIVITY FILTERS
+    // ==========================================
+    document.querySelectorAll('swp-activity-filter').forEach(filter => {
+      filter.addEventListener('click', () => {
+        document.querySelectorAll('swp-activity-filter').forEach(f => f.classList.remove('active'));
+        filter.classList.add('active');
+        // In a real app, this would filter the activity items
+      });
+    });
   </script>
 
 </body>