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

PlanTempus.Application/Features/Reports/Pages/Index.cshtml

@@ -19,26 +19,9 @@
                 </swp-btn>
             </swp-page-actions>
         </swp-page-header>
-    </swp-header-content>
 
-    <!-- Tab Bar -->
+        <!-- Stats for Salgsrapport -->
-    <swp-tab-bar>
+        <swp-stats-row class="cols-4 active" data-for-tab="sales">
-        <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">
             <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>

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);
+    });
   }
 
   /**