Add reports page with sales analytics and UI components

Introduces comprehensive reports feature with interactive sales dashboard
Includes dynamic data tables, charts, and filtering capabilities
Enhances application with new statistics and reporting functionality
This commit is contained in:
Janus C. H. Knudsen 2026-01-21 21:37:09 +01:00
parent 6ef001e35f
commit 405dabeb34
15 changed files with 1909 additions and 212 deletions

View file

@ -0,0 +1,64 @@
<swp-new-todo-drawer id="newTodoDrawer">
<swp-drawer-header>
<swp-drawer-back id="newTodoDrawerBack">
<i class="ph ph-caret-left"></i>
</swp-drawer-back>
<swp-drawer-title>Ny opgave</swp-drawer-title>
</swp-drawer-header>
<swp-drawer-content>
<!-- Titel -->
<swp-form-field>
<swp-section-label>Opgave</swp-section-label>
<input type="text" placeholder="Hvad skal du huske?" id="newTodoTitle">
</swp-form-field>
<!-- Dato & Tid -->
<swp-form-row>
<swp-form-field>
<swp-section-label>Dato</swp-section-label>
<input type="date" id="newTodoDate">
</swp-form-field>
<swp-form-field>
<swp-section-label>Tid</swp-section-label>
<input type="time" id="newTodoTime">
</swp-form-field>
</swp-form-row>
<!-- Prioritet -->
<swp-form-field>
<swp-section-label>Prioritet</swp-section-label>
<select id="newTodoPriority">
<option value="normal">Normal</option>
<option value="high">Høj prioritet</option>
<option value="low">Lav prioritet</option>
</select>
</swp-form-field>
<!-- Synlighed -->
<swp-form-field>
<swp-section-label>Synlighed</swp-section-label>
<swp-visibility-toggle>
<swp-visibility-option class="active" data-value="personal">
<i class="ph ph-user"></i>
Kun mig
</swp-visibility-option>
<swp-visibility-option data-value="shared">
<i class="ph ph-users"></i>
Alle
</swp-visibility-option>
</swp-visibility-toggle>
</swp-form-field>
<!-- Noter -->
<swp-form-field>
<swp-section-label>Noter</swp-section-label>
<textarea placeholder="Tilføj noter..." id="newTodoNotes"></textarea>
</swp-form-field>
</swp-drawer-content>
<swp-drawer-footer>
<swp-btn class="secondary" id="cancelNewTodo">Annuller</swp-btn>
<swp-btn class="primary" id="saveNewTodo">Gem opgave</swp-btn>
</swp-drawer-footer>
</swp-new-todo-drawer>

View file

@ -1,49 +1,74 @@
<swp-profile-drawer id="profileDrawer">
<swp-drawer-header>
<swp-drawer-title>Profil</swp-drawer-title>
<swp-drawer-close id="closeProfileDrawer">
<swp-drawer-title localize="profile.title">Min profil</swp-drawer-title>
<swp-drawer-close id="drawerClose">
<i class="ph ph-x"></i>
</swp-drawer-close>
</swp-drawer-header>
<swp-drawer-content>
<swp-profile-section>
<swp-profile-avatar-large>MJ</swp-profile-avatar-large>
<swp-profile-name-large>Maria Jensen</swp-profile-name-large>
<swp-profile-email>maria@salon.dk</swp-profile-email>
</swp-profile-section>
<swp-drawer-profile>
<swp-drawer-avatar>MJ</swp-drawer-avatar>
<swp-drawer-name>Maria Jensen</swp-drawer-name>
<swp-drawer-role>Administrator</swp-drawer-role>
<swp-drawer-email>maria@salon.dk</swp-drawer-email>
</swp-drawer-profile>
<swp-drawer-divider></swp-drawer-divider>
<swp-drawer-section>
<swp-drawer-section-label localize="profile.account">Konto</swp-drawer-section-label>
<swp-drawer-item>
<i class="ph ph-user-circle"></i>
<swp-drawer-item-text localize="profile.editProfile">Rediger profil</swp-drawer-item-text>
<i class="ph ph-caret-right"></i>
</swp-drawer-item>
<swp-drawer-item>
<i class="ph ph-key"></i>
<swp-drawer-item-text localize="profile.changePassword">Skift adgangskode</swp-drawer-item-text>
<i class="ph ph-caret-right"></i>
</swp-drawer-item>
<swp-drawer-item id="openNotificationSettings">
<i class="ph ph-bell"></i>
<swp-drawer-item-text localize="profile.notifications">Notifikationer</swp-drawer-item-text>
<swp-drawer-item-hint>3 ulæste</swp-drawer-item-hint>
</swp-drawer-item>
<swp-drawer-item id="openTodoDrawer">
<i class="ph ph-check-square"></i>
<swp-drawer-item-text localize="profile.myTasks">Mine opgaver</swp-drawer-item-text>
<swp-drawer-item-hint>2 i dag</swp-drawer-item-hint>
</swp-drawer-item>
</swp-drawer-section>
<swp-drawer-menu>
<swp-drawer-menu-item>
<i class="ph ph-user"></i>
<span>Min profil</span>
</swp-drawer-menu-item>
<swp-drawer-menu-item>
<i class="ph ph-gear"></i>
<span>Indstillinger</span>
</swp-drawer-menu-item>
</swp-drawer-menu>
<swp-drawer-section>
<swp-drawer-section-label localize="profile.appearance">Udseende</swp-drawer-section-label>
<swp-theme-toggle id="themeToggleDrawer">
<swp-theme-option data-theme="light" title="Lyst tema">
<i class="ph ph-sun"></i>
</swp-theme-option>
<swp-theme-option data-theme="dark" class="active" title="Mørkt tema">
<i class="ph ph-moon"></i>
</swp-theme-option>
</swp-theme-toggle>
</swp-drawer-section>
<swp-drawer-divider></swp-drawer-divider>
<swp-theme-toggle>
<swp-theme-label>
<i class="ph ph-moon"></i>
<span>Mørk tilstand</span>
</swp-theme-label>
<swp-toggle-switch id="themeToggle">
<input type="checkbox" id="themeCheckbox">
<swp-toggle-track></swp-toggle-track>
</swp-toggle-switch>
</swp-theme-toggle>
<swp-drawer-section>
<swp-drawer-section-label localize="profile.support">Support</swp-drawer-section-label>
<swp-drawer-item>
<i class="ph ph-question"></i>
<swp-drawer-item-text localize="profile.helpSupport">Hjælp & Support</swp-drawer-item-text>
<i class="ph ph-caret-right"></i>
</swp-drawer-item>
<swp-drawer-item>
<i class="ph ph-info"></i>
<swp-drawer-item-text localize="profile.about">Om PlanTempus</swp-drawer-item-text>
<swp-drawer-item-hint>v2.1.0</swp-drawer-item-hint>
</swp-drawer-item>
</swp-drawer-section>
</swp-drawer-content>
<swp-drawer-footer>
<swp-drawer-action class="logout" id="logoutBtn">
<i class="ph ph-sign-out"></i>
<span>Log ud</span>
<span localize="profile.logout">Log ud</span>
</swp-drawer-action>
</swp-drawer-footer>
</swp-profile-drawer>

View file

@ -0,0 +1,141 @@
<swp-todo-drawer id="todoDrawer">
<swp-drawer-header>
<swp-drawer-back id="todoDrawerBack">
<i class="ph ph-caret-left"></i>
</swp-drawer-back>
<swp-drawer-title>Mine opgaver</swp-drawer-title>
<swp-drawer-header-actions>
<swp-btn class="primary small" id="addTodoBtn">
<i class="ph ph-plus"></i>
Ny opgave
</swp-btn>
</swp-drawer-header-actions>
</swp-drawer-header>
<swp-drawer-content>
<!-- I dag -->
<swp-todo-section>
<swp-todo-section-header>
<i class="ph ph-caret-down"></i>
<swp-todo-section-title>I dag</swp-todo-section-title>
<swp-todo-section-count>3</swp-todo-section-count>
</swp-todo-section-header>
<swp-todo-items>
<swp-todo-item>
<swp-todo-checkbox>
<i class="ph ph-check"></i>
</swp-todo-checkbox>
<swp-todo-content>
<swp-todo-title>Ring til leverandør om ordre</swp-todo-title>
<swp-todo-meta>
<swp-todo-time>
<i class="ph ph-clock"></i>
10:00
</swp-todo-time>
</swp-todo-meta>
</swp-todo-content>
</swp-todo-item>
<swp-todo-item data-completed="true">
<swp-todo-checkbox>
<i class="ph ph-check"></i>
</swp-todo-checkbox>
<swp-todo-content>
<swp-todo-title>Bestil shampoo fra Wella</swp-todo-title>
</swp-todo-content>
</swp-todo-item>
<swp-todo-item>
<swp-todo-checkbox>
<i class="ph ph-check"></i>
</swp-todo-checkbox>
<swp-todo-content>
<swp-todo-title>Opdater prisliste for 2025</swp-todo-title>
<swp-todo-meta>
<swp-todo-priority class="high">
<i class="ph ph-flag"></i>
Høj
</swp-todo-priority>
</swp-todo-meta>
</swp-todo-content>
</swp-todo-item>
</swp-todo-items>
</swp-todo-section>
<!-- Denne uge -->
<swp-todo-section>
<swp-todo-section-header>
<i class="ph ph-caret-down"></i>
<swp-todo-section-title>Denne uge</swp-todo-section-title>
<swp-todo-section-count>2</swp-todo-section-count>
</swp-todo-section-header>
<swp-todo-items>
<swp-todo-item>
<swp-todo-checkbox>
<i class="ph ph-check"></i>
</swp-todo-checkbox>
<swp-todo-content>
<swp-todo-title>Rengør og vedligehold udstyr</swp-todo-title>
<swp-todo-meta>
<swp-todo-date>
<i class="ph ph-calendar"></i>
Onsdag
</swp-todo-date>
</swp-todo-meta>
</swp-todo-content>
</swp-todo-item>
<swp-todo-item>
<swp-todo-checkbox>
<i class="ph ph-check"></i>
</swp-todo-checkbox>
<swp-todo-content>
<swp-todo-title>Medarbejdersamtale med Jonas</swp-todo-title>
<swp-todo-meta>
<swp-todo-date>
<i class="ph ph-calendar"></i>
Fredag
</swp-todo-date>
<swp-todo-time>
<i class="ph ph-clock"></i>
14:00
</swp-todo-time>
</swp-todo-meta>
</swp-todo-content>
</swp-todo-item>
</swp-todo-items>
</swp-todo-section>
<!-- Udført -->
<swp-todo-section class="collapsed">
<swp-todo-section-header>
<i class="ph ph-caret-down"></i>
<swp-todo-section-title>Udført</swp-todo-section-title>
<swp-todo-section-count>3</swp-todo-section-count>
</swp-todo-section-header>
<swp-todo-items>
<swp-todo-item data-completed="true">
<swp-todo-checkbox>
<i class="ph ph-check"></i>
</swp-todo-checkbox>
<swp-todo-content>
<swp-todo-title>Send faktura til kunde</swp-todo-title>
</swp-todo-content>
</swp-todo-item>
<swp-todo-item data-completed="true">
<swp-todo-checkbox>
<i class="ph ph-check"></i>
</swp-todo-checkbox>
<swp-todo-content>
<swp-todo-title>Opdater åbningstider på Google</swp-todo-title>
</swp-todo-content>
</swp-todo-item>
<swp-todo-item data-completed="true">
<swp-todo-checkbox>
<i class="ph ph-check"></i>
</swp-todo-checkbox>
<swp-todo-content>
<swp-todo-title>Bestil nye håndklæder</swp-todo-title>
</swp-todo-content>
</swp-todo-item>
</swp-todo-items>
</swp-todo-section>
</swp-drawer-content>
</swp-todo-drawer>