From b5d5cfdf33656b806516ecf77ad6ba7490da0055 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Mon, 29 Dec 2025 17:14:11 +0100
Subject: [PATCH] Redesigns cash reconciliation overview page

Refactors the cash reconciliation list view with improved UI and UX

Adds period display and filtering capabilities
Introduces table with enhanced status and period tracking
Implements SAF-T export functionality for selected reconciliations
---
 wwwroot/poc-kasseafstemning.html   |  95 ++--
 wwwroot/poc-kasseafstemninger.html | 798 +++++++++++++++++++++++++++++
 2 files changed, 855 insertions(+), 38 deletions(-)
 create mode 100644 wwwroot/poc-kasseafstemninger.html

diff --git a/wwwroot/poc-kasseafstemning.html b/wwwroot/poc-kasseafstemning.html
index 9f470dc..4102c17 100644
--- a/wwwroot/poc-kasseafstemning.html
+++ b/wwwroot/poc-kasseafstemning.html
@@ -258,6 +258,47 @@
       border-top: 1px solid var(--color-border);
     }
 
+    /* ==========================================
+       PERIOD DISPLAY
+       ========================================== */
+    swp-period-display {
+      display: block;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+    }
+
+    swp-period-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 8px;
+    }
+
+    swp-period-value {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-period-value .arrow {
+      color: var(--color-teal);
+      font-weight: 400;
+    }
+
+    swp-period-hint {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 8px;
+    }
+
     /* ==========================================
        DATA TABLE
        ========================================== */
@@ -788,27 +829,18 @@
             <swp-card-hint>Identificér afstemningen</swp-card-hint>
           </swp-card-header>
           <swp-card-body>
-            <swp-form-grid>
-              <swp-form-field>
-                <swp-form-label>Dato <span class="required">*</span></swp-form-label>
-                <swp-form-input>
-                  <input type="date" id="reconciliationDate" />
-                </swp-form-input>
-              </swp-form-field>
+            <swp-period-display>
+              <swp-period-label>Periode</swp-period-label>
+              <swp-period-value>
+                <span class="from">28. dec 2025 kl. 18:00</span>
+                <span class="arrow">→</span>
+                <span class="to">29. dec 2025</span>
+              </swp-period-value>
+            </swp-period-display>
 
+            <swp-form-grid style="margin-top: 20px;">
               <swp-form-field>
-                <swp-form-label>Medarbejder <span class="required">*</span></swp-form-label>
-                <swp-form-input>
-                  <select id="employee">
-                    <option>Anna Jensen</option>
-                    <option>Karina Knudsen</option>
-                    <option>Martin Nielsen</option>
-                  </select>
-                </swp-form-input>
-              </swp-form-field>
-
-              <swp-form-field>
-                <swp-form-label>Kassepunkt <span class="required">*</span></swp-form-label>
+                <swp-form-label>Kassepunkt</swp-form-label>
                 <swp-form-input>
                   <select id="register">
                     <option>Kasse 1 – Reception</option>
@@ -818,18 +850,18 @@
               </swp-form-field>
 
               <swp-form-field>
-                <swp-form-label>Skift (valgfrit)</swp-form-label>
+                <swp-form-label>Afsluttet af</swp-form-label>
                 <swp-form-input>
-                  <select id="shift">
-                    <option>Ikke angivet</option>
-                    <option>Morgen (08-14)</option>
-                    <option>Eftermiddag (14-20)</option>
+                  <select id="employee">
+                    <option>Anna Jensen</option>
+                    <option>Karina Knudsen</option>
+                    <option>Martin Nielsen</option>
                   </select>
                 </swp-form-input>
               </swp-form-field>
             </swp-form-grid>
 
-            <swp-auto-id>Afstemnings-ID: <strong id="reconciliationId">KA-2025-12-29-01</strong> · oprettet automatisk</swp-auto-id>
+            <swp-auto-id>Afstemnings-ID: <strong>KA-2025-12-29</strong> · Z-043</swp-auto-id>
           </swp-card-body>
         </swp-card>
 
@@ -893,19 +925,6 @@
   </swp-page-container>
 
   <script>
-    // Set today's date
-    const dateInput = document.getElementById('reconciliationDate');
-    const today = new Date();
-    dateInput.value = today.toISOString().split('T')[0];
-
-    // Update reconciliation ID based on date
-    function updateReconciliationId() {
-      const date = new Date(dateInput.value);
-      const id = `KA-${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}-01`;
-      document.getElementById('reconciliationId').textContent = id;
-    }
-    dateInput.addEventListener('change', updateReconciliationId);
-
     // Base values (from system)
     const startBalance = 2000;
     const cashSales = 3540;
diff --git a/wwwroot/poc-kasseafstemninger.html b/wwwroot/poc-kasseafstemninger.html
new file mode 100644
index 0000000..ba504c7
--- /dev/null
+++ b/wwwroot/poc-kasseafstemninger.html
@@ -0,0 +1,798 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kasseafstemninger - POC</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-back-link svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       FILTER BAR
+       ========================================== */
+    swp-filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 20px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    swp-filter-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-filter-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    swp-filter-bar input,
+    swp-filter-bar select {
+      padding: 8px 12px;
+      font-size: 13px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+    }
+
+    swp-filter-bar input:focus,
+    swp-filter-bar select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-filter-spacer {
+      flex: 1;
+    }
+
+    /* ==========================================
+       STATS BAR
+       ========================================== */
+    swp-stats-bar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    swp-stat-card {
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 16px 20px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-stat-value {
+      display: block;
+      font-size: 24px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-stat-label {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-stat-card.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    swp-stat-card.warning swp-stat-value {
+      color: var(--color-amber);
+    }
+
+    swp-stat-card.negative swp-stat-value {
+      color: var(--color-red);
+    }
+
+    /* ==========================================
+       ACTION BAR
+       ========================================== */
+    swp-action-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: var(--color-surface);
+      border-radius: 8px 8px 0 0;
+      border: 1px solid var(--color-border);
+      border-bottom: none;
+    }
+
+    swp-selection-info {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* ==========================================
+       TABLE
+       ========================================== */
+    swp-table {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 0 0 8px 8px;
+      overflow: hidden;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-th.checkbox,
+    swp-td.checkbox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    swp-table input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      accent-color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-table-header,
+    swp-table-row {
+      display: grid;
+      grid-template-columns: 40px 70px 60px minmax(140px, 1fr) 90px 100px 100px 90px 100px 40px;
+      align-items: center;
+    }
+
+    swp-table-header {
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+      padding: 12px 20px;
+    }
+
+    swp-th {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-th.right {
+      text-align: right;
+    }
+
+    swp-table-body {
+      display: block;
+    }
+
+    swp-table-row {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+      transition: background 150ms ease;
+      cursor: pointer;
+    }
+
+    swp-table-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-table-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-td {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-td.right {
+      text-align: right;
+    }
+
+    swp-td.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-td.muted {
+      color: var(--color-text-secondary);
+      font-size: 12px;
+    }
+
+    swp-td.negative {
+      color: var(--color-red);
+    }
+
+    swp-td.positive {
+      color: var(--color-green);
+    }
+
+    swp-period-cell {
+      display: block;
+    }
+
+    swp-period-cell .dates {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       STATUS BADGE
+       ========================================== */
+    swp-status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 20px;
+    }
+
+    swp-status-badge.approved {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-status-badge.draft {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b45309;
+    }
+
+    swp-status-badge::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: currentColor;
+    }
+
+    swp-td:nth-child(9) {
+      padding-left: 12px;
+    }
+
+    swp-td.id {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      font-family: var(--font-mono);
+    }
+
+    /* ==========================================
+       TABLE FOOTER
+       ========================================== */
+    swp-table-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      background: var(--color-background-alt);
+      border-top: 1px solid var(--color-border);
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-row-arrow {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      color: var(--color-text-secondary);
+    }
+
+    swp-row-arrow svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    /* ==========================================
+       RESPONSIVE
+       ========================================== */
+    @media (max-width: 1000px) {
+      swp-stats-bar {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      swp-table-header,
+      swp-table-row {
+        grid-template-columns: 80px 1fr 100px 100px 80px 50px;
+      }
+
+      swp-th:nth-child(3),
+      swp-td:nth-child(3),
+      swp-th:nth-child(4),
+      swp-td:nth-child(4) {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-back-link>
+        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+        Tilbage
+      </swp-back-link>
+      <swp-page-title>Kasseafstemninger</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <!-- Filter Bar -->
+    <swp-filter-bar>
+      <swp-filter-group>
+        <swp-filter-label>Fra</swp-filter-label>
+        <input type="date" id="dateFrom" />
+      </swp-filter-group>
+      <swp-filter-group>
+        <swp-filter-label>Til</swp-filter-label>
+        <input type="date" id="dateTo" />
+      </swp-filter-group>
+      <swp-filter-group>
+        <swp-filter-label>Kassepunkt</swp-filter-label>
+        <select id="register">
+          <option>Alle</option>
+          <option>Kasse 1 – Reception</option>
+          <option>Kasse 2 – Salon</option>
+        </select>
+      </swp-filter-group>
+      <swp-filter-group>
+        <swp-filter-label>Status</swp-filter-label>
+        <select id="status">
+          <option>Alle</option>
+          <option>Godkendt</option>
+          <option>Kladde</option>
+        </select>
+      </swp-filter-group>
+      <swp-filter-spacer></swp-filter-spacer>
+      <swp-btn class="secondary">Nulstil</swp-btn>
+    </swp-filter-bar>
+
+    <!-- Stats Bar -->
+    <swp-stats-bar>
+      <swp-stat-card>
+        <swp-stat-value>12</swp-stat-value>
+        <swp-stat-label>Afstemninger i periode</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="highlight">
+        <swp-stat-value>186.450 kr</swp-stat-value>
+        <swp-stat-label>Total omsætning</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>42.340 kr</swp-stat-value>
+        <swp-stat-label>Kontantsalg</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="warning">
+        <swp-stat-value>-75 kr</swp-stat-value>
+        <swp-stat-label>Samlet difference</swp-stat-label>
+      </swp-stat-card>
+    </swp-stats-bar>
+
+    <!-- Action Bar -->
+    <swp-action-bar>
+      <swp-selection-info>
+        <span id="selectionCount">0 valgt</span>
+      </swp-selection-info>
+      <swp-btn class="primary" id="exportBtn" disabled>
+        <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+        Eksporter SAF-T
+      </swp-btn>
+    </swp-action-bar>
+
+    <!-- Table -->
+    <swp-table>
+      <swp-table-header>
+        <swp-th class="checkbox"><input type="checkbox" id="selectAll" /></swp-th>
+        <swp-th>Dato</swp-th>
+        <swp-th>ID</swp-th>
+        <swp-th>Periode</swp-th>
+        <swp-th>Kassepunkt</swp-th>
+        <swp-th>Afsluttet af</swp-th>
+        <swp-th class="right">Omsætning</swp-th>
+        <swp-th class="right">Difference</swp-th>
+        <swp-th>Status</swp-th>
+        <swp-th></swp-th>
+      </swp-table-header>
+      <swp-table-body>
+        <swp-table-row data-id="draft" class="draft-row">
+          <swp-td class="checkbox"></swp-td>
+          <swp-td class="muted">I dag</swp-td>
+          <swp-td class="id muted">–</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">29. dec 17:45 → ...</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td class="muted">–</swp-td>
+          <swp-td class="right mono muted">4.250 kr</swp-td>
+          <swp-td class="right mono muted">–</swp-td>
+          <swp-td><swp-status-badge class="draft">Kladde</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="043">
+          <swp-td class="checkbox"><input type="checkbox" class="row-select" /></swp-td>
+          <swp-td>29. dec</swp-td>
+          <swp-td class="id">Z-043</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">28. dec 18:00 → 29. dec 17:45</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td>Anna Jensen</swp-td>
+          <swp-td class="right mono">18.865 kr</swp-td>
+          <swp-td class="right mono">0 kr</swp-td>
+          <swp-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="042">
+          <swp-td class="checkbox"><input type="checkbox" class="row-select" /></swp-td>
+          <swp-td>28. dec</swp-td>
+          <swp-td class="id">Z-042</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">27. dec 18:30 → 28. dec 18:00</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td>Karina Knudsen</swp-td>
+          <swp-td class="right mono">12.450 kr</swp-td>
+          <swp-td class="right mono negative">-25 kr</swp-td>
+          <swp-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="041">
+          <swp-td class="checkbox"><input type="checkbox" class="row-select" /></swp-td>
+          <swp-td>27. dec</swp-td>
+          <swp-td class="id">Z-041</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">26. dec 18:00 → 27. dec 18:30</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td>Martin Nielsen</swp-td>
+          <swp-td class="right mono">21.340 kr</swp-td>
+          <swp-td class="right mono">0 kr</swp-td>
+          <swp-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="040">
+          <swp-td class="checkbox"><input type="checkbox" class="row-select" /></swp-td>
+          <swp-td>23. dec</swp-td>
+          <swp-td class="id">Z-040</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">22. dec 18:00 → 23. dec 17:30</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td>Anna Jensen</swp-td>
+          <swp-td class="right mono">28.750 kr</swp-td>
+          <swp-td class="right mono negative">-50 kr</swp-td>
+          <swp-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="039">
+          <swp-td class="checkbox"><input type="checkbox" class="row-select" /></swp-td>
+          <swp-td>22. dec</swp-td>
+          <swp-td class="id">Z-039</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">21. dec 18:15 → 22. dec 18:00</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td>Karina Knudsen</swp-td>
+          <swp-td class="right mono">15.890 kr</swp-td>
+          <swp-td class="right mono">0 kr</swp-td>
+          <swp-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+      </swp-table-body>
+      <swp-table-footer>
+        <span>Viser 6 afstemninger</span>
+        <span>Z-038 → Z-043</span>
+      </swp-table-footer>
+    </swp-table>
+  </swp-page-container>
+
+  <script>
+    // Set default date range (last 30 days)
+    const today = new Date();
+    const thirtyDaysAgo = new Date(today);
+    thirtyDaysAgo.setDate(today.getDate() - 30);
+
+    document.getElementById('dateTo').value = today.toISOString().split('T')[0];
+    document.getElementById('dateFrom').value = thirtyDaysAgo.toISOString().split('T')[0];
+
+    // Checkbox selection handling
+    const selectAll = document.getElementById('selectAll');
+    const rowCheckboxes = document.querySelectorAll('.row-select');
+    const exportBtn = document.getElementById('exportBtn');
+    const selectionCount = document.getElementById('selectionCount');
+
+    function updateSelection() {
+      const checked = document.querySelectorAll('.row-select:checked');
+      const count = checked.length;
+      selectionCount.textContent = count === 0 ? '0 valgt' : `${count} valgt`;
+      exportBtn.disabled = count === 0;
+
+      // Update select all state
+      selectAll.checked = count === rowCheckboxes.length && count > 0;
+      selectAll.indeterminate = count > 0 && count < rowCheckboxes.length;
+    }
+
+    selectAll.addEventListener('change', function() {
+      rowCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateSelection();
+    });
+
+    rowCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateSelection);
+      // Stop click from bubbling to row
+      cb.addEventListener('click', e => e.stopPropagation());
+    });
+
+    // SAF-T Export
+    document.getElementById('exportBtn').addEventListener('click', function() {
+      const selected = document.querySelectorAll('.row-select:checked');
+      const ids = Array.from(selected).map(cb => cb.closest('swp-table-row').dataset.id);
+      // Generate demo SAF-T XML
+      const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<AuditFile xmlns="urn:StandardAuditFile-Taxation-CashRegister:DK">
+  <Header>
+    <AuditFileVersion>1.30</AuditFileVersion>
+    <AuditFileCountry>DK</AuditFileCountry>
+    <AuditFileDateCreated>${today.toISOString().split('T')[0]}</AuditFileDateCreated>
+    <SoftwareCompanyName>Calendar Plantempus</SoftwareCompanyName>
+    <SoftwareID>SWP-POS</SoftwareID>
+    <SoftwareVersion>1.0</SoftwareVersion>
+    <Company>
+      <Name>Demo Salon ApS</Name>
+      <RegistrationNumber>12345678</RegistrationNumber>
+    </Company>
+    <DefaultCurrencyCode>DKK</DefaultCurrencyCode>
+    <SelectionCriteria>
+      <SelectionStartDate>${document.getElementById('dateFrom').value}</SelectionStartDate>
+      <SelectionEndDate>${document.getElementById('dateTo').value}</SelectionEndDate>
+    </SelectionCriteria>
+  </Header>
+  <CashRegisters>
+    <CashRegister>
+      <CashRegisterID>KASSE-001</CashRegisterID>
+      <CashRegisterLocation>Reception</CashRegisterLocation>
+      <Periods>
+        <Period>
+          <PeriodNumber>043</PeriodNumber>
+          <StartDateTime>2025-12-28T18:00:00</StartDateTime>
+          <EndDateTime>2025-12-29T17:45:00</EndDateTime>
+          <CashStatement>
+            <OpeningBalance>2000.00</OpeningBalance>
+            <ClosingBalance>5220.00</ClosingBalance>
+            <CashSales>3540.00</CashSales>
+            <CardSales>12875.50</CardSales>
+            <MobilePaySales>2450.00</MobilePaySales>
+            <TotalSales>18865.50</TotalSales>
+            <NumberOfTransactions>47</NumberOfTransactions>
+            <CashDifference>0.00</CashDifference>
+          </CashStatement>
+          <TaxSummary>
+            <TaxCode>S</TaxCode>
+            <TaxPercentage>25.00</TaxPercentage>
+            <TaxBase>15092.40</TaxBase>
+            <TaxAmount>3773.10</TaxAmount>
+          </TaxSummary>
+        </Period>
+      </Periods>
+    </CashRegister>
+  </CashRegisters>
+</AuditFile>`;
+
+      // Download file
+      const blob = new Blob([xml], { type: 'application/xml' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `SAF-T_CashRegister_${document.getElementById('dateFrom').value}_${document.getElementById('dateTo').value}.xml`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    });
+  </script>
+</body>
+</html>