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
This commit is contained in:
Janus C. H. Knudsen 2026-01-22 00:19:19 +01:00
parent 0144e1ae17
commit 097fe7f912
2 changed files with 45 additions and 39 deletions

View file

@ -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>