package-lock.json

@@ -1175,9 +1175,9 @@
       ]
     },
     "node_modules/@sevenweirdpeople/swp-charting": {
-      "version": "0.1.1",
+      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.1.2.tgz",
-      "integrity": "sha512-3kH7bHL8YzXC86g7N2qZfvFlNsl7SU5p8tZWSbdtNQmSCGax9MA3HV0U+M1WcYOTnfoFPg1KJbSGpiuupAw73A==",
+      "integrity": "sha512-zvPLPWKxUg04yju3AtqoB0/Mom62NEyHhs0djhbd+IEKPpKG3VB1zDhY+t3kadoCMpleJbYvFnyAnLH8qHP5RQ==",
       "license": "MIT"
     },
     "node_modules/@types/chai": {

wwwroot/poc-arbejdstidsplan.html

@@ -186,6 +186,43 @@
       color: var(--color-text);
     }
 
+    /* Lukkedag styling */
+    body.edit-mode swp-schedule-cell.header:not(.week-number) {
+      cursor: pointer;
+    }
+
+    body.edit-mode swp-schedule-cell.header:not(.week-number):hover {
+      background: var(--color-border);
+    }
+
+    swp-schedule-cell.header.closed {
+      background: color-mix(in srgb, #f59e0b 10%, var(--color-background-alt));
+      border-top: 2px solid #f59e0b !important;
+      border-left: 2px solid #f59e0b !important;
+      border-right: 2px solid #f59e0b !important;
+      border-bottom: none !important;
+    }
+
+    swp-schedule-cell.header.closed swp-day-name {
+      color: #d97706;
+    }
+
+    /* Celler i lukket kolonne */
+    swp-schedule-cell.day.closed-day {
+      background: color-mix(in srgb, #f59e0b 6%, var(--color-background));
+      border-left: 2px solid #f59e0b !important;
+      border-right: 2px solid #f59e0b !important;
+    }
+
+    /* Sidste celle i lukket kolonne får bund-border */
+    swp-schedule-cell.day.closed-day:nth-last-child(-n+8) {
+      border-bottom: 2px solid #f59e0b !important;
+    }
+
+    swp-schedule-cell.day.closed-day swp-time-display {
+      opacity: 0.5;
+    }
+
     swp-schedule-cell.employee {
       align-items: flex-start;
       gap: 2px;
@@ -808,31 +845,31 @@
     <!-- Header row -->
     <swp-schedule-cell class="header week-number">Uge 52</swp-schedule-cell>
     <swp-schedule-cell class="header">
-      <swp-day-name>Man</swp-day-name>
+      <swp-day-name>Mandag</swp-day-name>
       <swp-day-date>23/12</swp-day-date>
     </swp-schedule-cell>
     <swp-schedule-cell class="header">
-      <swp-day-name>Tir</swp-day-name>
+      <swp-day-name>Tirsdag</swp-day-name>
       <swp-day-date>24/12</swp-day-date>
     </swp-schedule-cell>
-    <swp-schedule-cell class="header">
+    <swp-schedule-cell class="header closed">
-      <swp-day-name>Ons</swp-day-name>
+      <swp-day-name>Onsdag</swp-day-name>
       <swp-day-date>25/12</swp-day-date>
     </swp-schedule-cell>
     <swp-schedule-cell class="header">
-      <swp-day-name>Tor</swp-day-name>
+      <swp-day-name>Torsdag</swp-day-name>
       <swp-day-date>26/12</swp-day-date>
     </swp-schedule-cell>
     <swp-schedule-cell class="header">
-      <swp-day-name>Fre</swp-day-name>
+      <swp-day-name>Fredag</swp-day-name>
       <swp-day-date>27/12</swp-day-date>
     </swp-schedule-cell>
     <swp-schedule-cell class="header">
-      <swp-day-name>Lør</swp-day-name>
+      <swp-day-name>Lørdag</swp-day-name>
       <swp-day-date>28/12</swp-day-date>
     </swp-schedule-cell>
     <swp-schedule-cell class="header">
-      <swp-day-name>Søn</swp-day-name>
+      <swp-day-name>Søndag</swp-day-name>
       <swp-day-date>29/12</swp-day-date>
     </swp-schedule-cell>
 
@@ -843,7 +880,7 @@
     </swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Man" data-date="23/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Tir" data-date="24/12"><swp-time-display>09:00 - 13:00</swp-time-display></swp-schedule-cell>
-    <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day closed-day" data-employee="Anna Sørensen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Fre" data-date="27/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Lør" data-date="28/12"><swp-time-display>10:00 - 14:00</swp-time-display></swp-schedule-cell>
@@ -856,7 +893,7 @@
     </swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Man" data-date="23/12"><swp-time-display>10:00 - 18:00</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Tir" data-date="24/12"><swp-time-display>10:00 - 18:00</swp-time-display></swp-schedule-cell>
-    <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Ons" data-date="25/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day closed-day" data-employee="Mette Jensen" data-day="Ons" data-date="25/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Tor" data-date="26/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Fre" data-date="27/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Lør" data-date="28/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
@@ -869,7 +906,7 @@
     </swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Man" data-date="23/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Tir" data-date="24/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
-    <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day closed-day" data-employee="Louise Nielsen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Fre" data-date="27/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Lør" data-date="28/12"><swp-time-display>09:00 - 14:00</swp-time-display></swp-schedule-cell>
@@ -882,7 +919,7 @@
     </swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Man" data-date="23/12"><swp-time-display>12:00 - 20:00</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Tir" data-date="24/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
-    <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day closed-day" data-employee="Katrine Pedersen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Fre" data-date="27/12"><swp-time-display>12:00 - 20:00</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Lør" data-date="28/12"><swp-time-display>10:00 - 18:00</swp-time-display></swp-schedule-cell>
@@ -895,7 +932,7 @@
     </swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Man" data-date="23/12"><swp-time-display class="sick">Syg</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Tir" data-date="24/12"><swp-time-display>09:00 - 15:00</swp-time-display></swp-schedule-cell>
-    <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day closed-day" data-employee="Sofie Andersen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Fre" data-date="27/12"><swp-time-display>09:00 - 15:00</swp-time-display></swp-schedule-cell>
     <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Lør" data-date="28/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
@@ -1678,6 +1715,39 @@
   document.getElementById('nextWeek').addEventListener('click', () => {
     console.log('Next week');
   });
+
+  // ==========================================
+  // LUKKEDAGE (klik på dag-header)
+  // ==========================================
+  const scheduleTable = document.querySelector('swp-schedule-table');
+  const dayHeaders = document.querySelectorAll('swp-schedule-cell.header:not(.week-number)');
+
+  dayHeaders.forEach((header, index) => {
+    header.addEventListener('click', () => {
+      if (!isEditMode) return;
+
+      // Toggle lukket status på header
+      header.classList.toggle('closed');
+
+      // Find alle celler i denne kolonne (kolonne index + 1 pga. employee kolonne)
+      const columnIndex = index + 1; // 0-baseret, +1 for employee kolonne
+
+      // Opdater alle dag-celler i kolonnen
+      const allDayCells = document.querySelectorAll('swp-schedule-cell.day');
+      allDayCells.forEach(cell => {
+        const cellIndex = allCells.indexOf(cell);
+        const cellColumn = cellIndex % GRID_COLUMNS;
+
+        if (cellColumn === columnIndex) {
+          cell.classList.toggle('closed-day', header.classList.contains('closed'));
+        }
+      });
+
+      // Opdater has-closed class på tabellen
+      const hasAnyClosed = document.querySelector('swp-schedule-cell.header.closed');
+      scheduleTable.classList.toggle('has-closed', !!hasAnyClosed);
+    });
+  });
 </script>
 
 </body>

wwwroot/poc-rapport.html

@@ -0,0 +1,615 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Rapport - POC</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       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-purple: #8b5cf6;
+      --color-amber: #f59e0b;
+      --color-red: #e53935;
+      --color-green: #43a047;
+      --font-family: -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;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       HEADER
+       ========================================== */
+    swp-page-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 24px;
+    }
+
+    swp-page-title {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    /* ==========================================
+       FILTERS
+       ========================================== */
+    swp-report-filters {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-period-selector {
+      display: flex;
+      background: var(--color-surface);
+      border-radius: 6px;
+      padding: 4px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    swp-period-selector button {
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      border: none;
+      background: transparent;
+      color: var(--color-text-secondary);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-period-selector button:hover {
+      color: var(--color-text);
+    }
+
+    swp-period-selector button.active {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-employee-filter select {
+      padding: 10px 32px 10px 12px;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
+      appearance: none;
+      cursor: pointer;
+      min-width: 180px;
+    }
+
+    /* ==========================================
+       STATS BAR
+       ========================================== */
+    swp-stats-bar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 24px;
+    }
+
+    swp-stat-card {
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 20px 24px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    swp-stat-value {
+      display: block;
+      font-size: 32px;
+      font-weight: 600;
+      color: var(--color-text);
+      font-family: var(--font-mono);
+    }
+
+    swp-stat-label {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    swp-stat-card.teal swp-stat-value { color: var(--color-teal); }
+    swp-stat-card.red swp-stat-value { color: var(--color-red); }
+    swp-stat-card.amber swp-stat-value { color: var(--color-amber); }
+    swp-stat-card.purple swp-stat-value { color: var(--color-purple); }
+
+    /* ==========================================
+       CHARTS GRID
+       ========================================== */
+    swp-charts-grid {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 24px;
+      margin-bottom: 24px;
+    }
+
+    swp-chart-card {
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 20px 24px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    swp-chart-title {
+      display: block;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 16px;
+    }
+
+    swp-chart-container {
+      display: block;
+      height: 240px;
+      position: relative;
+    }
+
+    /* Bar chart (simple CSS implementation) */
+    swp-bar-chart {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-around;
+      height: 100%;
+      padding-bottom: 24px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-bar {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      max-width: 60px;
+    }
+
+    swp-bar-fill {
+      width: 32px;
+      background: var(--color-teal);
+      border-radius: 4px 4px 0 0;
+      transition: height 300ms ease;
+    }
+
+    swp-bar-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Pie chart (simple CSS implementation) */
+    swp-pie-chart {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 32px;
+      height: 100%;
+    }
+
+    swp-pie {
+      width: 160px;
+      height: 160px;
+      border-radius: 50%;
+      background: conic-gradient(
+        var(--color-red) 0deg 120deg,
+        var(--color-amber) 120deg 200deg,
+        var(--color-purple) 200deg 360deg
+      );
+      position: relative;
+    }
+
+    swp-pie::after {
+      content: '';
+      position: absolute;
+      inset: 40px;
+      background: var(--color-surface);
+      border-radius: 50%;
+    }
+
+    swp-pie-legend {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    swp-legend-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+    }
+
+    swp-legend-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+    }
+
+    swp-legend-dot.red { background: var(--color-red); }
+    swp-legend-dot.amber { background: var(--color-amber); }
+    swp-legend-dot.purple { background: var(--color-purple); }
+
+    swp-legend-value {
+      font-family: var(--font-mono);
+      font-weight: 500;
+      margin-left: auto;
+    }
+
+    /* ==========================================
+       REPORT TABLE
+       ========================================== */
+    swp-report-table {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+    }
+
+    swp-table-header,
+    swp-table-row {
+      display: grid;
+      grid-template-columns: 200px repeat(7, 1fr);
+      align-items: center;
+    }
+
+    swp-table-header {
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+      padding: 14px 20px;
+    }
+
+    swp-th {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      user-select: none;
+    }
+
+    swp-th.sortable {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: color 150ms ease;
+    }
+
+    swp-th.sortable:hover {
+      color: var(--color-teal);
+    }
+
+    swp-th.sorted {
+      color: var(--color-teal);
+    }
+
+    .sort-icon {
+      font-size: 10px;
+      opacity: 0.4;
+      transition: opacity 150ms ease, transform 150ms ease;
+    }
+
+    swp-th.sorted .sort-icon {
+      opacity: 1;
+    }
+
+    swp-th.sorted.desc .sort-icon {
+      transform: rotate(180deg);
+    }
+
+    swp-th.right,
+    swp-td.right {
+      text-align: right;
+      justify-content: flex-end;
+    }
+
+    swp-table-body {
+      display: block;
+    }
+
+    swp-table-row {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+      transition: background 150ms ease;
+    }
+
+    swp-table-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-table-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-td {
+      font-size: 13px;
+      color: var(--color-text);
+    }
+
+    swp-td.name {
+      font-weight: 500;
+    }
+
+    swp-td.number {
+      font-family: var(--font-mono);
+      font-size: 12px;
+    }
+
+    swp-td.red { color: var(--color-red); }
+    swp-td.amber { color: var(--color-amber); }
+    swp-td.purple { color: var(--color-purple); }
+
+    swp-badge {
+      display: inline-block;
+      padding: 2px 8px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 4px;
+      font-family: var(--font-mono);
+    }
+
+    swp-badge.low {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-badge.medium {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: var(--color-amber);
+    }
+
+    swp-badge.high {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    /* ==========================================
+       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);
+    }
+  </style>
+</head>
+<body>
+  <swp-page-container>
+    <!-- Header -->
+    <swp-page-header>
+      <swp-page-title>Rapport</swp-page-title>
+      <swp-report-filters>
+        <swp-period-selector>
+          <button>Uge</button>
+          <button class="active">Måned</button>
+          <button>Kvartal</button>
+          <button>År</button>
+        </swp-period-selector>
+        <swp-employee-filter>
+          <select>
+            <option>Alle medarbejdere</option>
+            <option>Anna Jensen</option>
+            <option>Martin Nielsen</option>
+            <option>Sofie Larsen</option>
+            <option>Peter Hansen</option>
+          </select>
+        </swp-employee-filter>
+      </swp-report-filters>
+    </swp-page-header>
+
+    <!-- Stats Bar -->
+    <swp-stats-bar>
+      <swp-stat-card class="teal">
+        <swp-stat-value>320 t</swp-stat-value>
+        <swp-stat-label>Planlagte timer</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="red">
+        <swp-stat-value>24 t</swp-stat-value>
+        <swp-stat-label>Fravær total</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="amber">
+        <swp-stat-value>8 t</swp-stat-value>
+        <swp-stat-label>Overarbejde</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>7.5%</swp-stat-value>
+        <swp-stat-label>Fraværsprocent</swp-stat-label>
+      </swp-stat-card>
+    </swp-stats-bar>
+
+    <!-- Charts -->
+    <swp-charts-grid>
+      <swp-chart-card>
+        <swp-chart-title>Timer pr. uge</swp-chart-title>
+        <swp-chart-container>
+          <swp-bar-chart>
+            <swp-bar>
+              <swp-bar-fill style="height: 65%"></swp-bar-fill>
+              <swp-bar-label>Uge 48</swp-bar-label>
+            </swp-bar>
+            <swp-bar>
+              <swp-bar-fill style="height: 80%"></swp-bar-fill>
+              <swp-bar-label>Uge 49</swp-bar-label>
+            </swp-bar>
+            <swp-bar>
+              <swp-bar-fill style="height: 75%"></swp-bar-fill>
+              <swp-bar-label>Uge 50</swp-bar-label>
+            </swp-bar>
+            <swp-bar>
+              <swp-bar-fill style="height: 90%"></swp-bar-fill>
+              <swp-bar-label>Uge 51</swp-bar-label>
+            </swp-bar>
+            <swp-bar>
+              <swp-bar-fill style="height: 45%"></swp-bar-fill>
+              <swp-bar-label>Uge 52</swp-bar-label>
+            </swp-bar>
+          </swp-bar-chart>
+        </swp-chart-container>
+      </swp-chart-card>
+
+      <swp-chart-card>
+        <swp-chart-title>Fraværsfordeling</swp-chart-title>
+        <swp-chart-container>
+          <swp-pie-chart>
+            <swp-pie></swp-pie>
+            <swp-pie-legend>
+              <swp-legend-item>
+                <swp-legend-dot class="red"></swp-legend-dot>
+                <span>Syg</span>
+                <swp-legend-value>12 t</swp-legend-value>
+              </swp-legend-item>
+              <swp-legend-item>
+                <swp-legend-dot class="amber"></swp-legend-dot>
+                <span>Ferie</span>
+                <swp-legend-value>8 t</swp-legend-value>
+              </swp-legend-item>
+              <swp-legend-item>
+                <swp-legend-dot class="purple"></swp-legend-dot>
+                <span>Fri</span>
+                <swp-legend-value>4 t</swp-legend-value>
+              </swp-legend-item>
+            </swp-pie-legend>
+          </swp-pie-chart>
+        </swp-chart-container>
+      </swp-chart-card>
+    </swp-charts-grid>
+
+    <!-- Table -->
+    <swp-report-table>
+      <swp-table-header>
+        <swp-th class="sortable sorted">Medarbejder <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Planlagt <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Fravær <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Syg <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Ferie <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Fri <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Overarbejde <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Fraværs-% <span class="sort-icon">▲</span></swp-th>
+      </swp-table-header>
+      <swp-table-body>
+        <swp-table-row>
+          <swp-td class="name">Anna Jensen</swp-td>
+          <swp-td class="number right">80 t</swp-td>
+          <swp-td class="number right">4 t</swp-td>
+          <swp-td class="number right red">0 t</swp-td>
+          <swp-td class="number right amber">4 t</swp-td>
+          <swp-td class="number right purple">0 t</swp-td>
+          <swp-td class="number right">2 t</swp-td>
+          <swp-td class="right"><swp-badge class="low">5.0%</swp-badge></swp-td>
+        </swp-table-row>
+        <swp-table-row>
+          <swp-td class="name">Martin Nielsen</swp-td>
+          <swp-td class="number right">80 t</swp-td>
+          <swp-td class="number right">8 t</swp-td>
+          <swp-td class="number right red">8 t</swp-td>
+          <swp-td class="number right amber">0 t</swp-td>
+          <swp-td class="number right purple">0 t</swp-td>
+          <swp-td class="number right">0 t</swp-td>
+          <swp-td class="right"><swp-badge class="medium">10.0%</swp-badge></swp-td>
+        </swp-table-row>
+        <swp-table-row>
+          <swp-td class="name">Sofie Larsen</swp-td>
+          <swp-td class="number right">80 t</swp-td>
+          <swp-td class="number right">4 t</swp-td>
+          <swp-td class="number right red">0 t</swp-td>
+          <swp-td class="number right amber">0 t</swp-td>
+          <swp-td class="number right purple">4 t</swp-td>
+          <swp-td class="number right">4 t</swp-td>
+          <swp-td class="right"><swp-badge class="low">5.0%</swp-badge></swp-td>
+        </swp-table-row>
+        <swp-table-row>
+          <swp-td class="name">Peter Hansen</swp-td>
+          <swp-td class="number right">80 t</swp-td>
+          <swp-td class="number right">8 t</swp-td>
+          <swp-td class="number right red">4 t</swp-td>
+          <swp-td class="number right amber">4 t</swp-td>
+          <swp-td class="number right purple">0 t</swp-td>
+          <swp-td class="number right">2 t</swp-td>
+          <swp-td class="right"><swp-badge class="medium">10.0%</swp-badge></swp-td>
+        </swp-table-row>
+      </swp-table-body>
+      <swp-table-footer>
+        <span>Viser 4 medarbejdere</span>
+        <span>Total: 320 t planlagt, 24 t fravær, 8 t overarbejde</span>
+      </swp-table-footer>
+    </swp-report-table>
+  </swp-page-container>
+
+  <script>
+    // Period selector
+    document.querySelectorAll('swp-period-selector button').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('swp-period-selector button').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+      });
+    });
+
+    // Sort columns
+    document.querySelectorAll('swp-th.sortable').forEach(th => {
+      th.addEventListener('click', () => {
+        const wasSorted = th.classList.contains('sorted');
+        const wasDesc = th.classList.contains('desc');
+
+        // Remove sorted state from all
+        document.querySelectorAll('swp-th.sortable').forEach(t => {
+          t.classList.remove('sorted', 'desc');
+        });
+
+        // Toggle this column
+        th.classList.add('sorted');
+        if (wasSorted && !wasDesc) {
+          th.classList.add('desc');
+        }
+      });
+    });
+  </script>
+</body>
+</html>