From 85b006e0d607bee37824992fbd420e2c4e67223c Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Sat, 27 Dec 2025 22:54:46 +0100
Subject: [PATCH] Enhances service management UI with dynamic pricing controls

Adds interactive price and duration adjustment for services
Introduces visual indicators for overridden service values
Improves editing experience with responsive and intuitive controls

Implements granular service modifications with strikethrough and highlight effects
---
 wwwroot/poc-employee.html | 556 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 532 insertions(+), 24 deletions(-)

diff --git a/wwwroot/poc-employee.html b/wwwroot/poc-employee.html
index 52454d3..4227315 100644
--- a/wwwroot/poc-employee.html
+++ b/wwwroot/poc-employee.html
@@ -961,6 +961,199 @@
       color: var(--color-teal);
     }
 
+    /* Service values (read mode) */
+    swp-service-values {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+    }
+
+    swp-service-price,
+    swp-service-duration {
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+      text-align: right;
+    }
+
+    swp-service-price {
+      width: 100px;
+    }
+
+    swp-service-duration {
+      width: 80px;
+    }
+
+    swp-service-price.modified,
+    swp-service-duration.modified {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    /* Hide values in edit mode */
+    .edit-mode swp-service-values {
+      display: none;
+    }
+
+    /* Service controls container - hidden by default */
+    swp-service-controls {
+      display: none;
+      align-items: center;
+      margin-left: auto;
+    }
+
+    /* Show controls in edit mode */
+    .edit-mode swp-service-controls {
+      display: flex;
+    }
+
+    /* Final values with adjustable controls */
+    swp-service-final-values {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-adjustable-value {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      padding: 2px;
+    }
+
+    swp-adjustable-value.modified {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 5%, white);
+    }
+
+    swp-adjustable-value .adjust-down,
+    swp-adjustable-value .adjust-up {
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 100ms ease;
+    }
+
+    swp-adjustable-value .adjust-down:hover,
+    swp-adjustable-value .adjust-up:hover {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-adjustable-value .adjust-down:active,
+    swp-adjustable-value .adjust-up:active {
+      transform: scale(0.95);
+    }
+
+    swp-adjustable-value .adjust-display {
+      min-width: 55px;
+      text-align: center;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+      padding: 0 4px;
+    }
+
+    swp-adjustable-value.modified .adjust-display {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    /* Duration display */
+    .duration-display {
+      min-width: 50px;
+      text-align: right;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+    }
+
+    .duration-display.modified {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    /* Original values (read mode) */
+    swp-service-originals {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-right: 16px;
+    }
+
+    swp-service-originals .original-price-val,
+    swp-service-originals .original-duration-val {
+      font-family: var(--font-mono);
+      font-size: 15px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Strikethrough only when value is changed */
+    swp-service-originals .original-price-val.struck,
+    swp-service-originals .original-duration-val.struck {
+      text-decoration: line-through;
+      text-decoration-color: var(--color-teal);
+      text-decoration-thickness: 1px;
+      color: var(--color-text-muted);
+    }
+
+    /* Original values (edit mode) - hidden by default, shown when has-override */
+    swp-service-originals-edit {
+      display: none;
+      align-items: center;
+      gap: 16px;
+      margin-right: 20px;
+    }
+
+    swp-service-row.has-override swp-service-originals-edit {
+      display: flex;
+    }
+
+    swp-service-originals-edit .original-price-val,
+    swp-service-originals-edit .original-duration-val {
+      font-family: var(--font-mono);
+      font-size: 15px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-service-originals-edit .original-price-val.struck,
+    swp-service-originals-edit .original-duration-val.struck {
+      text-decoration: line-through;
+      text-decoration-color: var(--color-teal);
+      text-decoration-thickness: 1px;
+      color: var(--color-text-muted);
+    }
+
+    /* Highlight originals when value changes */
+    swp-service-originals.highlight .original-price-val,
+    swp-service-originals.highlight .original-duration-val,
+    swp-service-originals-edit.highlight .original-price-val,
+    swp-service-originals-edit.highlight .original-duration-val {
+      animation: flash-text 300ms ease;
+    }
+
+    @keyframes pulse-border {
+      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-teal) 40%, transparent); }
+      100% { box-shadow: 0 0 0 4px transparent; }
+    }
+
+    @keyframes flash-text {
+      0% { opacity: 0.5; }
+      100% { opacity: 1; }
+    }
+
     /* ==========================================
        LAYOUT GRID
        ========================================== */
@@ -1033,6 +1226,13 @@
       margin-top: 4px;
     }
 
+    swp-stat-subtitle {
+      display: block;
+      font-size: 11px;
+      color: var(--color-text-muted);
+      margin-top: 2px;
+    }
+
     swp-stat-card.highlight swp-stat-value {
       color: var(--color-teal);
     }
@@ -1589,6 +1789,90 @@
       font-weight: 500;
     }
 
+    /* ==========================================
+       INVOICE TABLE (afsluttede bookinger)
+       ========================================== */
+    swp-invoice-table {
+      display: block;
+      margin-top: 16px;
+    }
+
+    swp-invoice-table table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+    }
+
+    swp-invoice-table th,
+    swp-invoice-table td {
+      padding: 12px 16px;
+      text-align: left;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-invoice-table th {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      background: var(--color-background-alt);
+    }
+
+    swp-invoice-table td {
+      color: var(--color-text);
+    }
+
+    swp-invoice-table .date,
+    swp-invoice-table .time {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-invoice-table .customer {
+      font-weight: 500;
+    }
+
+    swp-invoice-table .services {
+      max-width: 250px;
+    }
+
+    swp-invoice-table .duration {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-invoice-table .amount {
+      font-family: var(--font-mono);
+      font-weight: 600;
+      text-align: right;
+    }
+
+    swp-invoice-table .amount-col {
+      text-align: right;
+    }
+
+    /* Status badges */
+    swp-status-badge {
+      display: inline-block;
+      padding: 4px 10px;
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 500;
+    }
+
+    swp-status-badge.paid {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    swp-status-badge.pending {
+      background: color-mix(in srgb, #f59e0b 15%, white);
+      color: #d97706;
+    }
+
     /* ==========================================
        CHART SECTION (matches poc-detail-drawer.html)
        ========================================== */
@@ -2360,12 +2644,13 @@
       <swp-stat-label>Bookinger denne måned</swp-stat-label>
     </swp-stat-card>
     <swp-stat-card>
-      <swp-stat-value>28.450 kr</swp-stat-value>
-      <swp-stat-label>Omsætning denne måned</swp-stat-label>
+      <swp-stat-value>30.825 kr</swp-stat-value>
+      <swp-stat-label>Værdi af bookede services</swp-stat-label>
+      <swp-stat-subtitle>Baseret på 49 bookinger</swp-stat-subtitle>
     </swp-stat-card>
     <swp-stat-card>
-      <swp-stat-value>4.9</swp-stat-value>
-      <swp-stat-label>Gns. kundetilfredshed</swp-stat-label>
+      <swp-stat-value>28.450 kr</swp-stat-value>
+      <swp-stat-label>Omsætning denne måned</swp-stat-label>
     </swp-stat-card>
     <swp-stat-card>
       <swp-stat-value>68%</swp-stat-value>
@@ -2441,6 +2726,100 @@
       </swp-booking-table>
     </swp-card>
   </div>
+
+  <!-- Afsluttede bookinger (fakturaliste) -->
+  <swp-card style="margin-top: 24px;">
+    <swp-section-label>Afsluttede bookinger</swp-section-label>
+    <swp-invoice-table>
+      <table>
+        <thead>
+          <tr>
+            <th>Dato</th>
+            <th>Tid</th>
+            <th>Kunde</th>
+            <th>Services</th>
+            <th>Varighed</th>
+            <th class="amount-col">Beløb</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="date">23. dec 2024</td>
+            <td class="time">10:00</td>
+            <td class="customer">Maria Hansen</td>
+            <td class="services">Dameklip, Bundfarve</td>
+            <td class="duration">2t 30m</td>
+            <td class="amount">1.510 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">23. dec 2024</td>
+            <td class="time">13:30</td>
+            <td class="customer">Louise Nielsen</td>
+            <td class="services">Balayage langt hår, Olaplex</td>
+            <td class="duration">3t</td>
+            <td class="amount">2.700 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">22. dec 2024</td>
+            <td class="time">09:00</td>
+            <td class="customer">Sofie Andersen</td>
+            <td class="services">Dameklip</td>
+            <td class="duration">1t</td>
+            <td class="amount">725 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">22. dec 2024</td>
+            <td class="time">11:00</td>
+            <td class="customer">Karen Pedersen</td>
+            <td class="services">Striber mellemlangt hår, Klip</td>
+            <td class="duration">2t 30m</td>
+            <td class="amount">2.390 kr</td>
+            <td><swp-status-badge class="pending">Afventer</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">21. dec 2024</td>
+            <td class="time">14:00</td>
+            <td class="customer">Emma Larsen</td>
+            <td class="services">Olaplex Stand alone</td>
+            <td class="duration">1t</td>
+            <td class="amount">550 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">21. dec 2024</td>
+            <td class="time">10:00</td>
+            <td class="customer">Mette Kristensen</td>
+            <td class="services">Herreklip</td>
+            <td class="duration">1t</td>
+            <td class="amount">645 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">20. dec 2024</td>
+            <td class="time">09:30</td>
+            <td class="customer">Anne Thomsen</td>
+            <td class="services">Glossing mellemlangt hår</td>
+            <td class="duration">1t</td>
+            <td class="amount">745 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">20. dec 2024</td>
+            <td class="time">12:00</td>
+            <td class="customer">Lise Mortensen</td>
+            <td class="services">Dameklip, Farvning vipper & bryn</td>
+            <td class="duration">1t 30m</td>
+            <td class="amount">1.070 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+        </tbody>
+      </table>
+    </swp-invoice-table>
+  </swp-card>
 </swp-tab-content>
 
 <script type="module">
@@ -2569,33 +2948,72 @@
     return `${minutes}m`;
   }
 
+  // Format duration with offset (e.g., "1t -5m" or "30m +10m")
+  function formatDurationWithOffset(baseMinutes, offset) {
+    const baseStr = formatDuration(baseMinutes);
+    if (offset === 0) return baseStr;
+    const sign = offset > 0 ? '+' : '';
+    return `${baseStr} <span class="duration-offset">${sign}${offset}m</span>`;
+  }
+
   // Create service row HTML
   function createServiceRow(service, isSelected) {
     const state = serviceState.get(service.id);
     const effectivePrice = state.priceOverride !== null ? state.priceOverride : service.price;
     const effectiveDuration = service.duration + state.durationOverride;
+    const hasPriceOverride = state.priceOverride !== null && state.priceOverride !== service.price;
+    const hasDurationOverride = state.durationOverride !== 0;
 
     const row = document.createElement('swp-service-row');
     row.dataset.id = service.id;
     row.dataset.category = service.category;
     row.draggable = true;
 
-    if (state.priceOverride !== null || state.durationOverride !== 0) {
+    if (hasPriceOverride || hasDurationOverride) {
       row.classList.add('has-override');
     }
 
     if (isSelected) {
-      // Selected: with editable inputs
+      // Selected: show adjusted values + original values in bordered box when modified
+      const hasAnyOverride = hasPriceOverride || hasDurationOverride;
+
+      // Original values box (shown when any override exists)
+      const originalsHtml = hasAnyOverride
+        ? `<swp-service-originals>
+            <span class="original-price-val ${hasPriceOverride ? 'struck' : ''}" data-original-price="${service.price}">${service.price} kr</span>
+            <span class="original-duration-val ${hasDurationOverride ? 'struck' : ''}" data-original-duration="${service.duration}">${formatDuration(service.duration)}</span>
+          </swp-service-originals>`
+        : '';
+
       row.innerHTML = `
         <swp-drag-handle>⋮⋮</swp-drag-handle>
         <swp-service-color style="background: ${service.color};"></swp-service-color>
         <swp-service-info>
           <swp-service-name>${service.name}</swp-service-name>
         </swp-service-info>
-        <swp-service-price-col>
-          <input type="number" value="${effectivePrice}" data-original="${service.price}"> kr
-        </swp-service-price-col>
-        <swp-service-duration-col>${formatDuration(effectiveDuration)}</swp-service-duration-col>
+        <swp-service-values>
+          ${originalsHtml}
+          <swp-service-price class="${hasPriceOverride ? 'modified' : ''}">${effectivePrice} kr</swp-service-price>
+          <swp-service-duration class="${hasDurationOverride ? 'modified' : ''}">${formatDuration(effectiveDuration)}</swp-service-duration>
+        </swp-service-values>
+        <swp-service-controls>
+          <swp-service-originals-edit>
+            <span class="original-price-val ${hasPriceOverride ? 'struck' : ''}">${service.price} kr</span>
+            <span class="original-duration-val ${hasDurationOverride ? 'struck' : ''}">${formatDuration(service.duration)}</span>
+          </swp-service-originals-edit>
+          <swp-service-final-values>
+            <swp-adjustable-value class="price-adjust ${hasPriceOverride ? 'modified' : ''}" data-type="price" data-original="${service.price}" data-value="${effectivePrice}" data-step="5">
+              <button class="adjust-down" type="button">−</button>
+              <span class="adjust-display">${effectivePrice} kr</span>
+              <button class="adjust-up" type="button">+</button>
+            </swp-adjustable-value>
+            <swp-adjustable-value class="duration-adjust ${hasDurationOverride ? 'modified' : ''}" data-type="duration" data-base="${service.duration}" data-offset="${state.durationOverride}" data-step="5">
+              <button class="adjust-down" type="button">−</button>
+              <span class="adjust-display">${formatDuration(effectiveDuration)}</span>
+              <button class="adjust-up" type="button">+</button>
+            </swp-adjustable-value>
+          </swp-service-final-values>
+        </swp-service-controls>
       `;
     } else {
       // Available: name only (no price/duration)
@@ -2840,22 +3258,110 @@
     }
   });
 
-  // Price input handler
-  selectedContainer.addEventListener('input', (e) => {
-    if (e.target.type === 'number') {
-      const row = e.target.closest('swp-service-row');
-      const serviceId = parseInt(row.dataset.id);
-      const state = serviceState.get(serviceId);
-      const originalPrice = parseInt(e.target.dataset.original);
-      const newPrice = parseInt(e.target.value) || originalPrice;
+  // Adjustable value click handler (up/down buttons)
+  selectedContainer.addEventListener('click', (e) => {
+    const btn = e.target.closest('.adjust-up, .adjust-down');
+    if (!btn) return;
 
-      if (newPrice !== originalPrice) {
-        state.priceOverride = newPrice;
-        row.classList.add('has-override');
-      } else {
-        state.priceOverride = null;
-        row.classList.remove('has-override');
+    const adjustable = btn.closest('swp-adjustable-value');
+    const row = btn.closest('swp-service-row');
+    if (!adjustable || !row) return;
+
+    const serviceId = parseInt(row.dataset.id);
+    const state = serviceState.get(serviceId);
+    const service = allServices.find(s => s.id === serviceId);
+    const step = parseInt(adjustable.dataset.step);
+    const isUp = btn.classList.contains('adjust-up');
+    const delta = isUp ? step : -step;
+
+    if (adjustable.dataset.type === 'price') {
+      // Adjust price
+      const original = parseInt(adjustable.dataset.original);
+      let current = parseInt(adjustable.dataset.value);
+      current = Math.max(0, current + delta);
+      adjustable.dataset.value = current;
+
+      const isModified = current !== original;
+      state.priceOverride = isModified ? current : null;
+
+      // Update displays
+      adjustable.querySelector('.adjust-display').textContent = `${current} kr`;
+      adjustable.classList.toggle('modified', isModified);
+
+      const priceDisplay = row.querySelector('swp-service-price');
+      if (priceDisplay) {
+        priceDisplay.textContent = `${current} kr`;
+        priceDisplay.classList.toggle('modified', isModified);
       }
+
+      // Toggle strikethrough on all original price elements (read + edit mode)
+      row.querySelectorAll('.original-price-val').forEach(el => {
+        el.classList.toggle('struck', isModified);
+      });
+    } else if (adjustable.dataset.type === 'duration') {
+      // Adjust duration offset
+      const base = parseInt(adjustable.dataset.base);
+      let offset = parseInt(adjustable.dataset.offset);
+      offset = Math.max(-base, offset + delta); // Don't go below 0 total
+      adjustable.dataset.offset = offset;
+
+      const effectiveDuration = base + offset;
+      const isModified = offset !== 0;
+      state.durationOverride = offset;
+
+      // Update displays
+      adjustable.querySelector('.adjust-display').textContent = formatDuration(effectiveDuration);
+      adjustable.classList.toggle('modified', isModified);
+
+      const durationDisplay = row.querySelector('swp-service-duration');
+      if (durationDisplay) {
+        durationDisplay.textContent = formatDuration(effectiveDuration);
+        durationDisplay.classList.toggle('modified', isModified);
+      }
+
+      // Toggle strikethrough on all original duration elements (read + edit mode)
+      row.querySelectorAll('.original-duration-val').forEach(el => {
+        el.classList.toggle('struck', isModified);
+      });
+    }
+
+    // Check if any override exists
+    const hasOverride = state.priceOverride !== null || state.durationOverride !== 0;
+    row.classList.toggle('has-override', hasOverride);
+
+    // Handle originals box visibility and highlight
+    const valuesContainer = row.querySelector('swp-service-values');
+    let originalsBox = valuesContainer.querySelector('swp-service-originals');
+    const originalsEditBox = row.querySelector('swp-service-originals-edit');
+
+    if (hasOverride) {
+      // Show originals box if not present (insert at beginning)
+      const hasPriceOverride = state.priceOverride !== null;
+      const hasDurationOverride = state.durationOverride !== 0;
+
+      if (!originalsBox) {
+        originalsBox = document.createElement('swp-service-originals');
+        originalsBox.innerHTML = `
+          <span class="original-price-val ${hasPriceOverride ? 'struck' : ''}">${service.price} kr</span>
+          <span class="original-duration-val ${hasDurationOverride ? 'struck' : ''}">${formatDuration(service.duration)}</span>
+        `;
+        valuesContainer.insertBefore(originalsBox, valuesContainer.firstChild);
+      } else {
+        // Update struck classes on existing originals box
+        const priceVal = originalsBox.querySelector('.original-price-val');
+        const durationVal = originalsBox.querySelector('.original-duration-val');
+        if (priceVal) priceVal.classList.toggle('struck', hasPriceOverride);
+        if (durationVal) durationVal.classList.toggle('struck', hasDurationOverride);
+      }
+      // Highlight animation
+      originalsBox.classList.remove('highlight');
+      originalsEditBox?.classList.remove('highlight');
+      void originalsBox.offsetWidth; // Trigger reflow
+      originalsBox.classList.add('highlight');
+      originalsEditBox?.classList.add('highlight');
+    } else {
+      // Remove originals box if no overrides
+      if (originalsBox) originalsBox.remove();
     }
   });
 
@@ -2875,11 +3381,13 @@
   const servicesPanel = document.getElementById('servicesPanel');
   const panelToggle = document.getElementById('panelToggle');
   const editServicesBtn = document.getElementById('editServicesBtn');
+  const selectedServicesCard = document.querySelector('.selected-services-card');
 
   function toggleServicesPanel() {
     const isCollapsed = servicesPanel.classList.contains('collapsed');
     servicesPanel.classList.toggle('collapsed', !isCollapsed);
     servicesPanel.classList.toggle('expanded', isCollapsed);
+    selectedServicesCard.classList.toggle('edit-mode', isCollapsed);
     editServicesBtn.classList.toggle('active', isCollapsed);
     editServicesBtn.innerHTML = isCollapsed
       ? `<svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> Luk`