From 097fe7f912b1b19a5cf674573797b2f17e800237 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Thu, 22 Jan 2026 00:19:19 +0100
Subject: [PATCH] Improves reports page with dynamic tab stats

Reorganizes stats rows to be dynamically shown/hidden based on active tab

Adds data attributes to enable tab-specific stats display
Enhances tab switching logic to toggle stats rows visibility
---
 .../Features/Reports/Pages/Index.cshtml       | 78 +++++++++----------
 .../wwwroot/ts/modules/reports.ts             |  6 ++
 2 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/PlanTempus.Application/Features/Reports/Pages/Index.cshtml b/PlanTempus.Application/Features/Reports/Pages/Index.cshtml
index 1759269..74c5f36 100644
--- a/PlanTempus.Application/Features/Reports/Pages/Index.cshtml
+++ b/PlanTempus.Application/Features/Reports/Pages/Index.cshtml
@@ -19,26 +19,9 @@
                 </swp-btn>
             </swp-page-actions>
         </swp-page-header>
-    </swp-header-content>
 
-    <!-- Tab Bar -->
-    <swp-tab-bar>
-        <swp-tab class="active" data-tab="sales">
-            <i class="ph ph-receipt"></i>
-            <span>Salgsrapport</span>
-        </swp-tab>
-        <swp-tab data-tab="hours">
-            <i class="ph ph-clock"></i>
-            <span>Timerapport</span>
-        </swp-tab>
-    </swp-tab-bar>
-</swp-sticky-header>
-
-<!-- Tab Content: Salgsrapport -->
-<swp-tab-content data-tab="sales" class="active">
-    <swp-page-container>
-        <!-- Stats Bar -->
-        <swp-stats-row class="cols-4">
+        <!-- Stats for Salgsrapport -->
+        <swp-stats-row class="cols-4 active" data-for-tab="sales">
             <swp-stat-card class="highlight">
                 <swp-stat-value>12.450 kr</swp-stat-value>
                 <swp-stat-label>Omsætning i dag</swp-stat-label>
@@ -57,6 +40,43 @@
             </swp-stat-card>
         </swp-stats-row>
 
+        <!-- Stats for Timerapport -->
+        <swp-stats-row class="cols-4" data-for-tab="hours">
+            <swp-stat-card class="highlight">
+                <swp-stat-value>320 t</swp-stat-value>
+                <swp-stat-label>Planlagte timer</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card class="danger">
+                <swp-stat-value>24 t</swp-stat-value>
+                <swp-stat-label>Fravær total</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card class="warning">
+                <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-row>
+    </swp-header-content>
+
+    <!-- Tab Bar -->
+    <swp-tab-bar>
+        <swp-tab class="active" data-tab="sales">
+            <i class="ph ph-receipt"></i>
+            <span>Salgsrapport</span>
+        </swp-tab>
+        <swp-tab data-tab="hours">
+            <i class="ph ph-clock"></i>
+            <span>Timerapport</span>
+        </swp-tab>
+    </swp-tab-bar>
+</swp-sticky-header>
+
+<!-- Tab Content: Salgsrapport -->
+<swp-tab-content data-tab="sales" class="active">
+    <swp-page-container>
         <!-- Charts Grid -->
         <swp-charts-grid>
             <swp-chart-card>
@@ -393,26 +413,6 @@
             </swp-filter-group>
         </swp-filter-bar>
 
-        <!-- Stats Bar -->
-        <swp-stats-row class="cols-4">
-            <swp-stat-card class="highlight">
-                <swp-stat-value>320 t</swp-stat-value>
-                <swp-stat-label>Planlagte timer</swp-stat-label>
-            </swp-stat-card>
-            <swp-stat-card class="danger">
-                <swp-stat-value>24 t</swp-stat-value>
-                <swp-stat-label>Fravær total</swp-stat-label>
-            </swp-stat-card>
-            <swp-stat-card class="warning">
-                <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-row>
-
         <!-- Charts Grid -->
         <swp-charts-grid>
             <swp-chart-card>
diff --git a/PlanTempus.Application/wwwroot/ts/modules/reports.ts b/PlanTempus.Application/wwwroot/ts/modules/reports.ts
index 29aeff4..0f12a5b 100644
--- a/PlanTempus.Application/wwwroot/ts/modules/reports.ts
+++ b/PlanTempus.Application/wwwroot/ts/modules/reports.ts
@@ -318,6 +318,7 @@ export class ReportsController {
   private switchToTab(targetTab: string): void {
     const tabs = document.querySelectorAll<HTMLElement>('swp-tab[data-tab]');
     const contents = document.querySelectorAll<HTMLElement>('swp-tab-content[data-tab]');
+    const statsRows = document.querySelectorAll<HTMLElement>('swp-stats-row[data-for-tab]');
 
     tabs.forEach(t => {
       t.classList.toggle('active', t.dataset.tab === targetTab);
@@ -326,6 +327,11 @@ export class ReportsController {
     contents.forEach(content => {
       content.classList.toggle('active', content.dataset.tab === targetTab);
     });
+
+    // Toggle stats rows based on active tab
+    statsRows.forEach(stats => {
+      stats.classList.toggle('active', stats.dataset.forTab === targetTab);
+    });
   }
 
   /**