Adds comprehensive Settings page with multiple configuration tabs

Introduces a new Settings page with configurable modules:
- General company information
- Calendar and booking settings
- Billing and payment configurations
- Tracking and analytics integrations

Implements modular ViewComponents for each settings section
Enhances user experience with toggle switches and detailed configuration options
This commit is contained in:
Janus C. H. Knudsen 2026-01-18 22:50:33 +01:00
parent 7643a6ab82
commit 33c338345e
31 changed files with 3167 additions and 21 deletions

View file

@ -0,0 +1,604 @@
<!-- Intro -->
<swp-info-box>
<i class="ph ph-puzzle-piece"></i>
<div>
<strong>Tilpas dit system</strong>
<p>Her kan du slå moduler til og fra efter behov. Nogle moduler er inkluderet i dit abonnement, mens andre kan tilkøbes. Moduler der er slået fra, vises ikke i menuen og påvirker ikke dit system.</p>
</div>
</swp-info-box>
<!-- Løn & Økonomi sektion -->
<swp-modules-section>
<swp-modules-header>
<swp-modules-title>
<i class="ph ph-wallet"></i>
Løn & Økonomi
</swp-modules-title>
</swp-modules-header>
<swp-modules-grid>
<!-- Lønberegning -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="teal">
<i class="ph ph-calculator"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Lønberegning</swp-module-title>
<swp-module-desc>Beregn løn, overtid, provision og ferie automatisk. Grundmodul for løneksport til eksterne systemer.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="included">Inkluderet</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Indstillinger</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- Intect -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="blue">
<i class="ph ph-export"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Intect</swp-module-title>
<swp-module-desc>Eksporter direkte til Intect lønsystem i StandardMapping-format.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="included">Inkluderet</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Indstillinger</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- Proløn -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="blue">
<i class="ph ph-export"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Proløn</swp-module-title>
<swp-module-desc>Eksporter direkte til Proløn lønsystem.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="coming">Kommer</swp-module-tag>
</swp-module-tags>
</swp-module-footer>
</swp-module-card>
<!-- Danløn -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="blue">
<i class="ph ph-export"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Danløn</swp-module-title>
<swp-module-desc>Eksporter direkte til Danløn lønsystem.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="coming">Kommer</swp-module-tag>
</swp-module-tags>
</swp-module-footer>
</swp-module-card>
<!-- Salary.dk -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="blue">
<i class="ph ph-export"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Salary.dk</swp-module-title>
<swp-module-desc>Eksporter direkte til Salary.dk lønsystem.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="coming">Kommer</swp-module-tag>
</swp-module-tags>
</swp-module-footer>
</swp-module-card>
<!-- Zenegy -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="teal">
<i class="ph ph-export"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Zenegy</swp-module-title>
<swp-module-desc>Eksporter direkte til Zenegy lønsystem. Automatisk overførsel af timer og provision.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="coming">Kommer</swp-module-tag>
</swp-module-tags>
</swp-module-footer>
</swp-module-card>
</swp-modules-grid>
</swp-modules-section>
<!-- AI & Analyse sektion -->
<swp-modules-section>
<swp-modules-header>
<swp-modules-title>
<i class="ph ph-brain"></i>
AI & Analyse
</swp-modules-title>
<swp-modules-badge>Nyt</swp-modules-badge>
</swp-modules-header>
<swp-modules-grid>
<!-- AI Dashboard -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="purple">
<i class="ph ph-sparkle"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>AI Dashboard</swp-module-title>
<swp-module-desc>Din personlige AI-assistent på dashboardet. Få daglige indsigter, anbefalinger og svar på spørgsmål om din forretning.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="included">Inkluderet</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Indstillinger</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- AI Virksomhedsanalyse -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="purple">
<i class="ph ph-chart-line-up"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>AI Virksomhedsanalyse</swp-module-title>
<swp-module-desc>Dybdegående AI-analyse af timer vs. omsætning, belægningsgrad og identificer mønstre og vækstmuligheder.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="price">+49 kr/md</swp-module-tag>
<swp-module-tag class="new">Beta</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Læs mere</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- AI Kundeanalyse - Featured -->
<swp-module-card class="featured purple">
<swp-module-header>
<swp-module-icon class="purple">
<i class="ph ph-users-three"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>AI Kundeanalyse</swp-module-title>
<swp-module-desc>Forstå dine kunders adfærd og forbliv proaktiv. AI'en analyserer bookingmønstre, forudser hvornår kunder har brug for en tid, og identificerer kunder der er ved at falde fra.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-features>
<swp-module-feature class="purple">
<i class="ph ph-check-circle"></i>
<span>Booking-prediktion baseret på historik</span>
</swp-module-feature>
<swp-module-feature class="purple">
<i class="ph ph-check-circle"></i>
<span>Churn-detektion se hvem der er ved at falde fra</span>
</swp-module-feature>
<swp-module-feature class="purple">
<i class="ph ph-check-circle"></i>
<span>Service-præference analyse pr. kunde</span>
</swp-module-feature>
<swp-module-feature class="purple">
<i class="ph ph-check-circle"></i>
<span>Automatisk personlig beskedgenerering</span>
</swp-module-feature>
</swp-module-features>
<swp-module-stats class="purple">
<swp-module-stat>
<swp-module-stat-value>-34%</swp-module-stat-value>
<swp-module-stat-label>Færre tabte kunder</swp-module-stat-label>
</swp-module-stat>
<swp-module-stat>
<swp-module-stat-value>+18%</swp-module-stat-value>
<swp-module-stat-label>Genbookinger</swp-module-stat-label>
</swp-module-stat>
<swp-module-stat>
<swp-module-stat-value>3.8x</swp-module-stat-value>
<swp-module-stat-label>ROI på kampagner</swp-module-stat-label>
</swp-module-stat>
</swp-module-stats>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="price">+79 kr/md</swp-module-tag>
<swp-module-tag class="new">Beta</swp-module-tag>
</swp-module-tags>
<swp-btn class="primary sm">Prøv gratis i 14 dage</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- AI Kalenderoptimering - Featured Green -->
<swp-module-card class="featured">
<swp-module-header>
<swp-module-icon class="green">
<i class="ph ph-sparkle"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>AI Kalenderoptimering</swp-module-title>
<swp-module-desc>Maksimer din kalenderudnyttelse og reducer tabt omsætning. AI'en foreslår optimale tider til kunder og identificerer huller der kan fyldes.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-features>
<swp-module-feature>
<i class="ph ph-check-circle"></i>
<span>Smart tidsforslag ved booking</span>
</swp-module-feature>
<swp-module-feature>
<i class="ph ph-check-circle"></i>
<span>Automatisk hul-identifikation</span>
</swp-module-feature>
<swp-module-feature>
<i class="ph ph-check-circle"></i>
<span>SMS-tilbud til flytning af tider</span>
</swp-module-feature>
<swp-module-feature>
<i class="ph ph-check-circle"></i>
<span>Dashboard med optimeringsscore</span>
</swp-module-feature>
</swp-module-features>
<swp-module-stats>
<swp-module-stat>
<swp-module-stat-value>52x</swp-module-stat-value>
<swp-module-stat-label>ROI i gennemsnit</swp-module-stat-label>
</swp-module-stat>
<swp-module-stat>
<swp-module-stat-value>15%</swp-module-stat-value>
<swp-module-stat-label>Færre tomme slots</swp-module-stat-label>
</swp-module-stat>
<swp-module-stat>
<swp-module-stat-value>312k</swp-module-stat-value>
<swp-module-stat-label>Ekstra oms./år*</swp-module-stat-label>
</swp-module-stat>
</swp-module-stats>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="price">+99 kr/md</swp-module-tag>
<swp-module-tag class="new">Ny</swp-module-tag>
</swp-module-tags>
<swp-btn class="primary sm">Prøv gratis i 14 dage</swp-btn>
</swp-module-footer>
</swp-module-card>
</swp-modules-grid>
</swp-modules-section>
<!-- Tillægsmoduler sektion -->
<swp-modules-section>
<swp-modules-header>
<swp-modules-title>
<i class="ph ph-plus-circle"></i>
Tillægsmoduler
</swp-modules-title>
</swp-modules-header>
<swp-modules-grid>
<!-- Online Booking -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="teal">
<i class="ph ph-globe"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Online Booking</swp-module-title>
<swp-module-desc>Lad kunder booke tider online via din egen bookingside. Integreres med kalender og påmindelser.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="included">Inkluderet</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Indstillinger</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- Gavekort -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="amber">
<i class="ph ph-gift"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Gavekort</swp-module-title>
<swp-module-desc>Sælg og administrer digitale gavekort. Kunderne kan købe online eller i butikken, og indløse ved betaling.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="included">Inkluderet</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Indstillinger</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- Kasseafstemning -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="blue">
<i class="ph ph-calculator"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Kasseafstemning</swp-module-title>
<swp-module-desc>Daglig kasseopgørelse og afstemning. Hold styr på kontanter, kort og andre betalingsmetoder.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="included">Inkluderet</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Indstillinger</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- Stregkodescanner -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="purple">
<i class="ph ph-barcode"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Stregkodescanner</swp-module-title>
<swp-module-desc>Scan EAN-koder og få AI-genererede produktbeskrivelser automatisk. Opret nye produkter på sekunder.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="included">Inkluderet</swp-module-tag>
<swp-module-tag class="new">AI</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Indstillinger</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- Website Builder -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="teal">
<i class="ph ph-layout"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Website Builder</swp-module-title>
<swp-module-desc>Byg din salons hjemmeside med drag-and-drop blokke. Vælg mellem færdige designs, tilpas farver og fonte, og integrer din booking.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="price">+149 kr/md</swp-module-tag>
<swp-module-tag class="new">Ny</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Åbn Builder</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- HR & Dokumenter - Full width -->
<swp-module-card class="full-width">
<swp-module-header>
<swp-module-icon class="purple">
<i class="ph ph-folder-user"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>HR & Dokumenter</swp-module-title>
<swp-module-desc>Komplet medarbejderstyring: Kontrakter, certificeringer, kurser, ferie-saldo, sygefravær og barsel. Upload dokumenter og få påmindelser om udløbsdatoer.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="included">Inkluderet</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Indstillinger</swp-btn>
</swp-module-footer>
</swp-module-card>
</swp-modules-grid>
</swp-modules-section>
<!-- Integrationer sektion -->
<swp-modules-section>
<swp-modules-header>
<swp-modules-title>
<i class="ph ph-plugs-connected"></i>
Integrationer
</swp-modules-title>
</swp-modules-header>
<swp-modules-grid>
<!-- Sygeforsikring "danmark" - Featured -->
<swp-module-card class="featured">
<swp-module-header>
<swp-module-icon class="green">
<i class="ph ph-heart-half"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Sygeforsikring "danmark"</swp-module-title>
<swp-module-desc>Gør det nemt for dine kunder at få tilskud. Send automatisk kvitteringer til "danmark" så kunderne får deres penge tilbage uden selv at løfte en finger.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-features>
<swp-module-feature>
<i class="ph ph-check-circle"></i>
<span>Automatisk indsendelse af kvitteringer</span>
</swp-module-feature>
<swp-module-feature>
<i class="ph ph-check-circle"></i>
<span>Direkte integration via API</span>
</swp-module-feature>
<swp-module-feature>
<i class="ph ph-check-circle"></i>
<span>Kunden får tilskud uden besvær</span>
</swp-module-feature>
<swp-module-feature>
<i class="ph ph-check-circle"></i>
<span>Øget kundetilfredshed</span>
</swp-module-feature>
</swp-module-features>
<swp-module-stats>
<swp-module-stat>
<swp-module-stat-value>2.1M</swp-module-stat-value>
<swp-module-stat-label>Medlemmer i DK</swp-module-stat-label>
</swp-module-stat>
<swp-module-stat>
<swp-module-stat-value>100%</swp-module-stat-value>
<swp-module-stat-label>Automatiseret</swp-module-stat-label>
</swp-module-stat>
<swp-module-stat>
<swp-module-stat-value>0 kr</swp-module-stat-value>
<swp-module-stat-label>Ekstra gebyr</swp-module-stat-label>
</swp-module-stat>
</swp-module-stats>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="included">Inkluderet</swp-module-tag>
</swp-module-tags>
<swp-btn class="primary sm">Opsæt integration</swp-btn>
</swp-module-footer>
</swp-module-card>
<!-- Kalenderintegration -->
<swp-module-card>
<swp-module-header>
<swp-module-icon class="blue">
<i class="ph ph-calendar-check"></i>
</swp-module-icon>
<swp-module-info>
<swp-module-title>Kalenderintegration</swp-module-title>
<swp-module-desc>Få dine bookinger synkroniseret til din private kalender automatisk. Se alle aftaler samlet ét sted.</swp-module-desc>
</swp-module-info>
<swp-module-toggle>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Til</swp-toggle-option>
<swp-toggle-option>Fra</swp-toggle-option>
</swp-toggle-slider>
</swp-module-toggle>
</swp-module-header>
<swp-module-footer>
<swp-module-tags>
<swp-module-tag class="included">Inkluderet</swp-module-tag>
</swp-module-tags>
<swp-btn class="secondary sm">Indstillinger</swp-btn>
</swp-module-footer>
</swp-module-card>
</swp-modules-grid>
</swp-modules-section>