Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds comprehensive Settings page with multiple configuration tabs

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

2
PlanTempus.Application/Features/Menu/Services/MockMenuService.cs
View file

@ -176,7 +176,7 @@ public class MockMenuService : IMenuService
Id = "settings", Id = "settings",
Label = "Indstillinger", Label = "Indstillinger",
Icon = "ph-gear", Icon = "ph-gear",
Url = "/poc-indstillinger.html", Url = "/indstillinger",
MinimumRole = UserRole.Admin, MinimumRole = UserRole.Admin,
SortOrder = 1 SortOrder = 1
}, },

4
PlanTempus.Application/Features/Services/Components/ServiceTable/Default.cshtml
View file

@ -1,6 +1,6 @@
@model PlanTempus.Application.Features.Services.Components.ServiceTableViewModel @model PlanTempus.Application.Features.Services.Components.ServiceTableViewModel
<swp-services-header> <swp-action-bar>
<swp-search-input> <swp-search-input>
<i class="ph ph-magnifying-glass"></i> <i class="ph ph-magnifying-glass"></i>
<input type="text" placeholder="@Model.SearchPlaceholder" /> <input type="text" placeholder="@Model.SearchPlaceholder" />
@ -15,7 +15,7 @@
@Model.CreateButtonText @Model.CreateButtonText
</swp-btn> </swp-btn>
</swp-btn-group> </swp-btn-group>
</swp-services-header> </swp-action-bar>
<swp-card class="services-list"> <swp-card class="services-list">
<swp-data-table> <swp-data-table>

141
PlanTempus.Application/Features/Settings/Components/SettingsBilling/Default.cshtml Normal file
View file

@ -0,0 +1,141 @@
<swp-info-box>
<i class="ph ph-info"></i>
<p><strong>Kvittering</strong> printes efter betaling i butikken. <strong>Faktura</strong> sendes til kunder der betaler senere.</p>
</swp-info-box>
<swp-two-column-grid>
<!-- Virksomhedsoplysninger -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-identification-badge"></i>
Virksomhedsoplysninger
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Firmanavn (juridisk)</swp-edit-label>
<swp-edit-value contenteditable="true">KARINA KNUDSEN® ApS</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>CVR-nummer</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Adresse</swp-edit-label>
<swp-edit-value contenteditable="true">Amager Strandvej 22f, 2300 København S</swp-edit-value>
</swp-edit-row>
</swp-edit-section>
</swp-card-content>
</swp-card>
<!-- Bankoplysninger -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-bank"></i>
Bankoplysninger (kun faktura)
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Registreringsnr.</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono">1234</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Kontonummer</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>IBAN <span class="optional">(valgfri)</span></swp-edit-label>
<swp-edit-value contenteditable="true" class="mono placeholder">DK00 0000 0000 0000 00</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>MobilePay <span class="optional">(valgfri)</span></swp-edit-label>
<swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Betalingsbetingelser</swp-edit-label>
<swp-edit-select>
<select>
<option value="0">Kontant</option>
<option value="8" selected>Netto 8 dage</option>
<option value="14">Netto 14 dage</option>
<option value="30">Netto 30 dage</option>
</select>
</swp-edit-select>
</swp-edit-row>
</swp-edit-section>
</swp-card-content>
</swp-card>
<!-- Vis på print -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-eye"></i>
Vis på print
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-toggle-row>
<swp-toggle-label>Vis CVR-nummer</swp-toggle-label>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label>Vis telefonnummer</swp-toggle-label>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label>Vis website</swp-toggle-label>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label>Vis logo</swp-toggle-label>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-card-content>
</swp-card>
<!-- Tekster -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-text-align-left"></i>
Tekster
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Header-tekst</swp-edit-label>
<swp-edit-value contenteditable="true">Tak for dit besøg!</swp-edit-value>
</swp-edit-row>
</swp-edit-section>
<div style="margin-top: 16px;">
<swp-edit-label style="display: block; margin-bottom: 8px;">Footer-tekst</swp-edit-label>
<textarea class="edit-textarea">Åbningstider: Man-Fre 9-18, Lør 10-14
Vi glæder os til at se dig igen!</textarea>
</div>
<div style="margin-top: 16px;">
<swp-edit-label style="display: block; margin-bottom: 8px;">Faktura-tekst</swp-edit-label>
<textarea class="edit-textarea">Ved betaling bedes fakturanummer angivet.
Tak for din handel!</textarea>
</div>
</swp-card-content>
</swp-card>
</swp-two-column-grid>

15
PlanTempus.Application/Features/Settings/Components/SettingsBilling/SettingsBillingViewComponent.cs Normal file
View file

@ -0,0 +1,15 @@
using Microsoft.AspNetCore.Mvc;
namespace PlanTempus.Application.Features.Settings.Components;
/// <summary>
/// ViewComponent for the invoice and receipt settings tab.
/// Handles invoice templates, receipt settings, and numbering.
/// </summary>
public class SettingsBillingViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}

97
PlanTempus.Application/Features/Settings/Components/SettingsBooking/Default.cshtml Normal file
View file

@ -0,0 +1,97 @@
<swp-info-box>
<i class="ph ph-info"></i>
<p>Din booking-side er tilgængelig for kunder. Del linket på din hjemmeside, sociale medier eller i din email-signatur.</p>
</swp-info-box>
<swp-two-column-grid>
<!-- Booking-indstillinger -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-sliders"></i>
Booking-indstillinger
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label>Aktivér online booking</swp-toggle-label>
<swp-toggle-desc>Tillad kunder at booke tider online</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label>Tillad online aflysning</swp-toggle-label>
<swp-toggle-desc>Kunder kan selv aflyse deres booking</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-section-divider></swp-section-divider>
<swp-edit-section>
<swp-edit-row class="wide-label">
<swp-edit-label>Book frem i tiden</swp-edit-label>
<swp-edit-select>
<select>
<option value="7">7 dage</option>
<option value="14">14 dage</option>
<option value="30" selected>30 dage</option>
<option value="60">60 dage</option>
<option value="90">90 dage</option>
</select>
</swp-edit-select>
</swp-edit-row>
<swp-edit-row class="wide-label">
<swp-edit-label>Minimum tid før booking</swp-edit-label>
<swp-edit-select>
<select>
<option value="0">Ingen begrænsning</option>
<option value="1">1 time</option>
<option value="2" selected>2 timer</option>
<option value="4">4 timer</option>
<option value="24">24 timer</option>
</select>
</swp-edit-select>
</swp-edit-row>
<swp-edit-row class="wide-label">
<swp-edit-label>Aflysningsfrist</swp-edit-label>
<swp-edit-select>
<select>
<option value="0">Ingen frist</option>
<option value="2">2 timer før</option>
<option value="4">4 timer før</option>
<option value="24" selected>24 timer før</option>
<option value="48">48 timer før</option>
</select>
</swp-edit-select>
</swp-edit-row>
</swp-edit-section>
</swp-card-content>
</swp-card>
<!-- Booking URL -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-link"></i>
Booking URL
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-url-field>
<input type="text" value="https://book.plantempus.dk/salonbeauty" readonly>
<swp-url-copy title="Kopier link">
<i class="ph ph-copy"></i>
</swp-url-copy>
</swp-url-field>
</swp-card-content>
</swp-card>
</swp-two-column-grid>

15
PlanTempus.Application/Features/Settings/Components/SettingsBooking/SettingsBookingViewComponent.cs Normal file
View file

@ -0,0 +1,15 @@
using Microsoft.AspNetCore.Mvc;
namespace PlanTempus.Application.Features.Settings.Components;
/// <summary>
/// ViewComponent for the online booking settings tab.
/// Handles booking rules, customer restrictions, and checkout options.
/// </summary>
public class SettingsBookingViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}

227
PlanTempus.Application/Features/Settings/Components/SettingsCalendar/Default.cshtml Normal file
View file

@ -0,0 +1,227 @@
<swp-two-column-grid>
<!-- Kalenderindstillinger -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-calendar-blank"></i>
Kalenderindstillinger
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Standard visning</swp-edit-label>
<swp-edit-select>
<select>
<option value="day">Dag</option>
<option value="week" selected>Uge</option>
<option value="month">Måned</option>
</select>
</swp-edit-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Første dag i ugen</swp-edit-label>
<swp-edit-select>
<select>
<option value="monday" selected>Mandag</option>
<option value="sunday">Søndag</option>
</select>
</swp-edit-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Tidsinterval</swp-edit-label>
<swp-edit-select>
<select>
<option value="15" selected>15 minutter</option>
<option value="30">30 minutter</option>
<option value="60">60 minutter</option>
</select>
</swp-edit-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Vis weekender</swp-edit-label>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Arbejdstid fra</swp-edit-label>
<swp-edit-select>
<select>
<option value="06:00">06:00</option>
<option value="07:00">07:00</option>
<option value="08:00" selected>08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
</select>
</swp-edit-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Arbejdstid til</swp-edit-label>
<swp-edit-select>
<select>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option>
<option value="20:00" selected>20:00</option>
<option value="21:00">21:00</option>
<option value="22:00">22:00</option>
</select>
</swp-edit-select>
</swp-edit-row>
</swp-edit-section>
</swp-card-content>
</swp-card>
<!-- Helligdage & lukkedage -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-calendar-x"></i>
Helligdage & lukkedage
</swp-card-title>
<swp-btn class="secondary sm">
<i class="ph ph-plus"></i>
Tilføj lukkedag
</swp-btn>
</swp-card-header>
<swp-card-content>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label>Luk automatisk på helligdage</swp-toggle-label>
<swp-toggle-desc>Salonen lukkes automatisk på danske helligdage</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-section-divider></swp-section-divider>
<swp-closed-days-list>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>5. april 2026</swp-closed-day-date>
<swp-closed-day-name>Påskedag</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
<swp-icon-btn class="edit" title="Rediger åbningstid">
<i class="ph ph-pencil-simple"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>1. maj 2026</swp-closed-day-date>
<swp-closed-day-name>Store bededag</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
<swp-icon-btn class="edit" title="Rediger åbningstid">
<i class="ph ph-pencil-simple"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>14. maj 2026</swp-closed-day-date>
<swp-closed-day-name>Kristi Himmelfart</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
<swp-icon-btn class="edit" title="Rediger åbningstid">
<i class="ph ph-pencil-simple"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>24. maj 2026</swp-closed-day-date>
<swp-closed-day-name>Pinsedag</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
<swp-icon-btn class="edit" title="Rediger åbningstid">
<i class="ph ph-pencil-simple"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>25. maj 2026</swp-closed-day-date>
<swp-closed-day-name>2. pinsedag</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
<swp-icon-btn class="edit" title="Rediger åbningstid">
<i class="ph ph-pencil-simple"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>5. juni 2026</swp-closed-day-date>
<swp-closed-day-name>Grundlovsdag</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
<swp-icon-btn class="edit" title="Rediger åbningstid">
<i class="ph ph-pencil-simple"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>24. december 2026</swp-closed-day-date>
<swp-closed-day-name>Juleaften</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
<swp-icon-btn class="edit" title="Rediger åbningstid">
<i class="ph ph-pencil-simple"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>25. december 2026</swp-closed-day-date>
<swp-closed-day-name>1. juledag</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
<swp-icon-btn class="edit" title="Rediger åbningstid">
<i class="ph ph-pencil-simple"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>26. december 2026</swp-closed-day-date>
<swp-closed-day-name>2. juledag</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
<swp-icon-btn class="edit" title="Rediger åbningstid">
<i class="ph ph-pencil-simple"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>1. januar 2027</swp-closed-day-date>
<swp-closed-day-name>Nytårsdag</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
<swp-icon-btn class="edit" title="Rediger åbningstid">
<i class="ph ph-pencil-simple"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>14. - 28. juli 2026</swp-closed-day-date>
<swp-closed-day-name>Sommerferie</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="custom">Lukkedag</swp-closed-day-badge>
<swp-icon-btn class="delete" title="Fjern">
<i class="ph ph-trash"></i>
</swp-icon-btn>
</swp-closed-day-item>
<swp-closed-day-item>
<swp-closed-day-info>
<swp-closed-day-date>24. - 26. december 2026</swp-closed-day-date>
<swp-closed-day-name>Julelukning</swp-closed-day-name>
</swp-closed-day-info>
<swp-closed-day-badge class="custom">Lukkedag</swp-closed-day-badge>
<swp-icon-btn class="delete" title="Fjern">
<i class="ph ph-trash"></i>
</swp-icon-btn>
</swp-closed-day-item>
</swp-closed-days-list>
</swp-card-content>
</swp-card>
</swp-two-column-grid>

15
PlanTempus.Application/Features/Settings/Components/SettingsCalendar/SettingsCalendarViewComponent.cs Normal file
View file

@ -0,0 +1,15 @@
using Microsoft.AspNetCore.Mvc;
namespace PlanTempus.Application.Features.Settings.Components;
/// <summary>
/// ViewComponent for the calendar settings tab.
/// Handles calendar view options, resources, and intervals.
/// </summary>
public class SettingsCalendarViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}

141
PlanTempus.Application/Features/Settings/Components/SettingsGeneral/Default.cshtml Normal file
View file

@ -0,0 +1,141 @@
<swp-two-column-grid>
<!-- Grundlæggende oplysninger -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-identification-card"></i>
Grundlæggende oplysninger
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Virksomhedsnavn</swp-edit-label>
<swp-edit-value contenteditable="true">KARINA KNUDSEN®</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>CVR-nummer</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Adresse</swp-edit-label>
<swp-edit-value contenteditable="true">Hovedgaden 123</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Postnummer</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono">2100</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>By</swp-edit-label>
<swp-edit-value contenteditable="true">København Ø</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Telefon</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono">70 20 30 40</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Email</swp-edit-label>
<swp-edit-value contenteditable="true">info@salonbeauty.dk</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Website <span class="optional">(valgfri)</span></swp-edit-label>
<swp-edit-value contenteditable="true">https://salonbeauty.dk</swp-edit-value>
</swp-edit-row>
</swp-edit-section>
</swp-card-content>
</swp-card>
<!-- Åbningstider -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-clock"></i>
Åbningstider
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-hours-table>
<swp-hours-row>
<swp-hours-day>Mandag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="09:00">
<span>til</span>
<input type="time" value="18:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day>Tirsdag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="09:00">
<span>til</span>
<input type="time" value="18:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day>Onsdag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="09:00">
<span>til</span>
<input type="time" value="18:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day>Torsdag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="09:00">
<span>til</span>
<input type="time" value="20:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day>Fredag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="09:00">
<span>til</span>
<input type="time" value="17:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day>Lørdag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="10:00">
<span>til</span>
<input type="time" value="14:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day>Søndag</swp-hours-day>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-closed>Lukket</swp-hours-closed>
</swp-hours-row>
</swp-hours-table>
</swp-card-content>
</swp-card>
</swp-two-column-grid>

15
PlanTempus.Application/Features/Settings/Components/SettingsGeneral/SettingsGeneralViewComponent.cs Normal file
View file

@ -0,0 +1,15 @@
using Microsoft.AspNetCore.Mvc;
namespace PlanTempus.Application.Features.Settings.Components;
/// <summary>
/// ViewComponent for the general company settings tab.
/// Handles company name, CVR, address, contact info.
/// </summary>
public class SettingsGeneralViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}

92
PlanTempus.Application/Features/Settings/Components/SettingsHours/Default.cshtml Normal file
View file

@ -0,0 +1,92 @@
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-clock"></i>
<span localize="settings.hours.title">Åbningstider</span>
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-hours-table>
<swp-hours-row>
<swp-hours-day localize="common.days.monday">Mandag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="09:00">
<span localize="common.to">til</span>
<input type="time" value="18:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day localize="common.days.tuesday">Tirsdag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="09:00">
<span localize="common.to">til</span>
<input type="time" value="18:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day localize="common.days.wednesday">Onsdag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="09:00">
<span localize="common.to">til</span>
<input type="time" value="18:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day localize="common.days.thursday">Torsdag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="09:00">
<span localize="common.to">til</span>
<input type="time" value="20:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day localize="common.days.friday">Fredag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="09:00">
<span localize="common.to">til</span>
<input type="time" value="17:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day localize="common.days.saturday">Lørdag</swp-hours-day>
<swp-toggle-slider data-value="yes">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-time>
<input type="time" value="10:00">
<span localize="common.to">til</span>
<input type="time" value="14:00">
</swp-hours-time>
</swp-hours-row>
<swp-hours-row>
<swp-hours-day localize="common.days.sunday">Søndag</swp-hours-day>
<swp-toggle-slider data-value="no">
<swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
<swp-toggle-option localize="common.no">Nej</swp-toggle-option>
</swp-toggle-slider>
<swp-hours-closed localize="settings.hours.closed">Lukket</swp-hours-closed>
</swp-hours-row>
</swp-hours-table>
</swp-card-content>
</swp-card>

15
PlanTempus.Application/Features/Settings/Components/SettingsHours/SettingsHoursViewComponent.cs Normal file
View file

@ -0,0 +1,15 @@
using Microsoft.AspNetCore.Mvc;
namespace PlanTempus.Application.Features.Settings.Components;
/// <summary>
/// ViewComponent for the opening hours settings tab.
/// Handles weekly opening hours with toggles.
/// </summary>
public class SettingsHoursViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}

604
PlanTempus.Application/Features/Settings/Components/SettingsModules/Default.cshtml Normal file
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>

15
PlanTempus.Application/Features/Settings/Components/SettingsModules/SettingsModulesViewComponent.cs Normal file
View file

@ -0,0 +1,15 @@
using Microsoft.AspNetCore.Mvc;
namespace PlanTempus.Application.Features.Settings.Components;
/// <summary>
/// ViewComponent for the modules settings tab.
/// Handles feature module toggles and add-on management.
/// </summary>
public class SettingsModulesViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}

141
PlanTempus.Application/Features/Settings/Components/SettingsPayments/Default.cshtml Normal file
View file

@ -0,0 +1,141 @@
<swp-two-column-grid>
<!-- Column 1: Betalingsmetoder i butik -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-wallet"></i>
Betalingsmetoder i butik
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-section-intro>Vælg hvilke betalingsmetoder dine kunder kan bruge ved checkout i butikken.</swp-section-intro>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label>Kontant</swp-toggle-label>
<swp-toggle-desc>Modtag kontant betaling</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label>Dankort / Visa / Mastercard</swp-toggle-label>
<swp-toggle-desc>Betalingskort via terminal</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label>MobilePay</swp-toggle-label>
<swp-toggle-desc>Betaling via MobilePay</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label>Gavekort</swp-toggle-label>
<swp-toggle-desc>Indløs gavekort som betaling</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label>Faktura</swp-toggle-label>
<swp-toggle-desc>Send faktura til kunden</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-card-content>
</swp-card>
<!-- Column 2: Online betaling + Gebyr -->
<div class="stacked-cards">
<!-- Online betaling -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-globe"></i>
Online betaling
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label>Modtag betaling ved online booking</swp-toggle-label>
<swp-toggle-desc>Kunder betaler når de booker online</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="no" id="onlinePaymentToggle">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<div id="onlinePaymentSettings" style="display: none;">
<swp-section-divider></swp-section-divider>
<swp-info-box>
<i class="ph ph-info"></i>
<p>Online betalinger håndteres via Stripe. Beløbet overføres automatisk til din bankkonto efter den valgte periode.</p>
</swp-info-box>
<swp-edit-section>
<swp-edit-row class="wide-label">
<swp-edit-label>Registreringsnummer</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono">1234</swp-edit-value>
</swp-edit-row>
<swp-edit-row class="wide-label">
<swp-edit-label>Kontonummer</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
</swp-edit-row>
<swp-edit-row class="wide-label">
<swp-edit-label>Udbetaling</swp-edit-label>
<swp-edit-select>
<select>
<option value="7" selected>Hver uge</option>
<option value="14">Hver 2. uge</option>
<option value="28">Hver 4. uge</option>
</select>
</swp-edit-select>
</swp-edit-row>
</swp-edit-section>
</div>
</swp-card-content>
</swp-card>
<!-- Gebyr & tillæg -->
<swp-card>
<swp-card-header>
<swp-card-title>
<i class="ph ph-percent"></i>
Gebyr & tillæg
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-toggle-row>
<swp-toggle-info>
<swp-toggle-label>Vis kortgebyr til kunden</swp-toggle-label>
<swp-toggle-desc>Vis kortgebyr som separat linje på kvittering</swp-toggle-desc>
</swp-toggle-info>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-card-content>
</swp-card>
</div>
</swp-two-column-grid>

15
PlanTempus.Application/Features/Settings/Components/SettingsPayments/SettingsPaymentsViewComponent.cs Normal file
View file

@ -0,0 +1,15 @@
using Microsoft.AspNetCore.Mvc;
namespace PlanTempus.Application.Features.Settings.Components;
/// <summary>
/// ViewComponent for the payments settings tab.
/// Handles in-store payment methods, online payments, and fees.
/// </summary>
public class SettingsPaymentsViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}

114
PlanTempus.Application/Features/Settings/Components/SettingsReminders/Default.cshtml Normal file
View file

@ -0,0 +1,114 @@
<swp-two-column-grid>
<!-- EMAIL -->
<swp-card>
<swp-section-label>
<i class="ph ph-envelope"></i>
Email
</swp-section-label>
<swp-toggle-row>
<div>
<swp-toggle-label>Bekræftelse</swp-toggle-label>
<swp-toggle-description>Sendes når en aftale er booket</swp-toggle-description>
</div>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<div>
<swp-toggle-label>Påmindelse</swp-toggle-label>
<swp-toggle-description>Sendes inden aftalen</swp-toggle-description>
</div>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<div>
<swp-toggle-label>Aflysning</swp-toggle-label>
<swp-toggle-description>Sendes når en aftale er aflyst</swp-toggle-description>
</div>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<div>
<swp-toggle-label>Flytning</swp-toggle-label>
<swp-toggle-description>Sendes når en aftale er flyttet</swp-toggle-description>
</div>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-card-note>Email-påmindelser er gratis.</swp-card-note>
</swp-card>
<!-- SMS -->
<swp-card>
<swp-section-label>
<i class="ph ph-chat-text"></i>
SMS
</swp-section-label>
<swp-toggle-row>
<div>
<swp-toggle-label>Bekræftelse online <span class="text-secondary">(0,30 kr.)</span></swp-toggle-label>
<swp-toggle-description>Sendes ved online booking</swp-toggle-description>
</div>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<div>
<swp-toggle-label>Bekræftelse manuelt <span class="text-secondary">(0,30 kr.)</span></swp-toggle-label>
<swp-toggle-description>Ved oprettelse i kalender</swp-toggle-description>
</div>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<div>
<swp-toggle-label>Påmindelse <span class="text-purple">(Premium)</span></swp-toggle-label>
<swp-toggle-description>Sendes inden aftalen</swp-toggle-description>
</div>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-section-divider></swp-section-divider>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Påmindelse sendes</swp-edit-label>
<swp-edit-select>
<select>
<option value="2">2 timer før</option>
<option value="4">4 timer før</option>
<option value="12">12 timer før</option>
<option value="24" selected>24 timer før</option>
<option value="48">48 timer før</option>
</select>
</swp-edit-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Sendes mellem</swp-edit-label>
<swp-time-range>
<input type="time" value="08:00">
<span>–</span>
<input type="time" value="21:00">
</swp-time-range>
</swp-edit-row>
</swp-edit-section>
</swp-card>
</swp-two-column-grid>

15
PlanTempus.Application/Features/Settings/Components/SettingsReminders/SettingsRemindersViewComponent.cs Normal file
View file

@ -0,0 +1,15 @@
using Microsoft.AspNetCore.Mvc;
namespace PlanTempus.Application.Features.Settings.Components;
/// <summary>
/// ViewComponent for the reminders settings tab.
/// Handles SMS and email reminder configuration.
/// </summary>
public class SettingsRemindersViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}

215
PlanTempus.Application/Features/Settings/Components/SettingsTracking/Default.cshtml Normal file
View file

@ -0,0 +1,215 @@
<!-- Intro -->
<swp-info-box class="full-width">
<i class="ph ph-chart-line-up"></i>
<div>
<strong>Tracking & Analytics</strong>
<p>Tilslut dine foretrukne analyse- og marketingværktøjer for at måle trafik og konverteringer på din online booking. Aktiver kun de tjenester du bruger.</p>
</div>
</swp-info-box>
<!-- Meta Pixel -->
<swp-card class="tracking-card" data-tracker="meta">
<swp-card-header>
<swp-card-title>
<i class="ph ph-meta-logo"></i>
Meta Pixel (Facebook)
</swp-card-title>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Pixel ID</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono" id="metaPixelId">123456789012345</swp-edit-value>
</swp-edit-row>
</swp-edit-section>
<swp-tracking-hint>
<i class="ph ph-info"></i>
Bruges til Facebook og Instagram annoncering og remarketing
</swp-tracking-hint>
</swp-card-content>
</swp-card>
<!-- Google Analytics -->
<swp-card class="tracking-card" data-tracker="ga4">
<swp-card-header>
<swp-card-title>
<i class="ph ph-chart-line"></i>
Google Analytics (GA4)
</swp-card-title>
<swp-toggle-slider data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Measurement ID</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono" id="ga4Id">G-ABC123XYZ</swp-edit-value>
</swp-edit-row>
</swp-edit-section>
<swp-tracking-hint>
<i class="ph ph-info"></i>
Google Analytics 4 til website trafik og brugeradfærd
</swp-tracking-hint>
</swp-card-content>
</swp-card>
<!-- Google Tag Manager -->
<swp-card class="tracking-card" data-tracker="gtm">
<swp-card-header>
<swp-card-title>
<i class="ph ph-code"></i>
Google Tag Manager
</swp-card-title>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Container ID</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono" id="gtmId">GTM-XXXXXXX</swp-edit-value>
</swp-edit-row>
</swp-edit-section>
<swp-tracking-hint>
<i class="ph ph-info"></i>
Central styring af alle tracking-tags
</swp-tracking-hint>
</swp-card-content>
</swp-card>
<!-- Plausible -->
<swp-card class="tracking-card" data-tracker="plausible">
<swp-card-header>
<swp-card-title>
<i class="ph ph-leaf"></i>
Plausible Analytics
</swp-card-title>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Domæne</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono" id="plausibleDomain">minside.dk</swp-edit-value>
</swp-edit-row>
</swp-edit-section>
<swp-tracking-hint class="privacy">
<i class="ph ph-shield-check"></i>
Privacy-venlig analytics uden cookies - GDPR compliant
</swp-tracking-hint>
</swp-card-content>
</swp-card>
<!-- Fathom -->
<swp-card class="tracking-card" data-tracker="fathom">
<swp-card-header>
<swp-card-title>
<i class="ph ph-eye"></i>
Fathom Analytics
</swp-card-title>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Site ID</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono" id="fathomSiteId">ABCDEFGH</swp-edit-value>
</swp-edit-row>
</swp-edit-section>
<swp-tracking-hint class="privacy">
<i class="ph ph-shield-check"></i>
Privacy-venlig analytics uden cookies - GDPR compliant
</swp-tracking-hint>
</swp-card-content>
</swp-card>
<!-- Matomo -->
<swp-card class="tracking-card" data-tracker="matomo">
<swp-card-header>
<swp-card-title>
<i class="ph ph-database"></i>
Matomo
</swp-card-title>
<swp-toggle-slider data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-card-header>
<swp-card-content>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>Server URL</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono" id="matomoUrl">https://matomo.minside.dk</swp-edit-value>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>Site ID</swp-edit-label>
<swp-edit-value contenteditable="true" class="mono" id="matomoSiteId">1</swp-edit-value>
</swp-edit-row>
</swp-edit-section>
<swp-tracking-hint class="privacy">
<i class="ph ph-shield-check"></i>
Self-hosted analytics - fuld kontrol over dine data
</swp-tracking-hint>
</swp-card-content>
</swp-card>
<!-- Custom Scripts -->
<swp-card class="tracking-card full-width">
<swp-card-header>
<swp-card-title>
<i class="ph ph-code-block"></i>
Brugerdefinerede Scripts
</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-script-section>
<swp-script-label>
<i class="ph ph-file-code"></i>
Scripts i &lt;head&gt;
</swp-script-label>
<textarea class="script-textarea" id="customHeadScripts" placeholder="<!-- Indsæt custom tracking kode her -->"></textarea>
</swp-script-section>
<swp-script-section>
<swp-script-label>
<i class="ph ph-file-code"></i>
Scripts før &lt;/body&gt;
</swp-script-label>
<textarea class="script-textarea" id="customBodyScripts" placeholder="<!-- Indsæt custom kode her -->"></textarea>
</swp-script-section>
</swp-card-content>
</swp-card>
<!-- Generated Code Preview -->
<swp-card class="code-preview-card">
<swp-card-header>
<swp-card-title>
<i class="ph ph-terminal"></i>
Genereret Kode
</swp-card-title>
<swp-btn class="secondary sm" id="copyTrackingCode">
<i class="ph ph-copy"></i>
Kopier
</swp-btn>
</swp-card-header>
<swp-card-content>
<swp-code-info>
<i class="ph ph-info"></i>
Denne kode indsættes automatisk i &lt;head&gt; på din online booking side
</swp-code-info>
<pre class="code-preview" id="trackingCodePreview"><code>&lt;!-- Ingen aktive tracking-koder --&gt;</code></pre>
</swp-card-content>
</swp-card>

15
PlanTempus.Application/Features/Settings/Components/SettingsTracking/SettingsTrackingViewComponent.cs Normal file
View file

@ -0,0 +1,15 @@
using Microsoft.AspNetCore.Mvc;
namespace PlanTempus.Application.Features.Settings.Components;
/// <summary>
/// ViewComponent for the tracking settings tab.
/// Handles analytics and tracking code configuration.
/// </summary>
public class SettingsTrackingViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
return View();
}
}

110
PlanTempus.Application/Features/Settings/Pages/Index.cshtml Normal file
View file

@ -0,0 +1,110 @@
@page "/indstillinger"
@using PlanTempus.Application.Features.Settings.Pages
@model PlanTempus.Application.Features.Settings.Pages.IndexModel
@{
ViewData["Title"] = "Indstillinger";
}
<!-- Sticky Header with Tabs -->
<swp-sticky-header>
<swp-header-content>
<swp-page-header>
<swp-page-title>
<i class="ph ph-gear"></i>
<span localize="settings.title">Indstillinger</span>
</swp-page-title>
</swp-page-header>
</swp-header-content>
<!-- Tab Bar -->
<swp-tab-bar>
<swp-tab class="active" data-tab="general">
<i class="ph ph-buildings"></i>
<span localize="settings.tabs.company">Virksomhed</span>
</swp-tab>
<swp-tab data-tab="calendar">
<i class="ph ph-calendar"></i>
<span localize="settings.tabs.calendar">Kalender</span>
</swp-tab>
<swp-tab data-tab="booking">
<i class="ph ph-globe"></i>
<span localize="settings.tabs.booking">Online Booking</span>
</swp-tab>
<swp-tab data-tab="billing">
<i class="ph ph-receipt"></i>
<span localize="settings.tabs.billing">Faktura & Kvittering</span>
</swp-tab>
<swp-tab data-tab="reminders">
<i class="ph ph-bell"></i>
<span localize="settings.tabs.reminders">Påmindelser</span>
</swp-tab>
<swp-tab data-tab="payments">
<i class="ph ph-credit-card"></i>
<span localize="settings.tabs.payments">Betalinger</span>
</swp-tab>
<swp-tab data-tab="modules">
<i class="ph ph-puzzle-piece"></i>
<span localize="settings.tabs.modules">Moduler</span>
</swp-tab>
<swp-tab data-tab="tracking">
<i class="ph ph-chart-line-up"></i>
<span localize="settings.tabs.tracking">Tracking</span>
</swp-tab>
</swp-tab-bar>
</swp-sticky-header>
<!-- Tab Content: Virksomhed -->
<swp-tab-content data-tab="general" class="active">
<swp-page-container>
@await Component.InvokeAsync("SettingsGeneral")
</swp-page-container>
</swp-tab-content>
<!-- Tab Content: Kalender -->
<swp-tab-content data-tab="calendar">
<swp-page-container>
@await Component.InvokeAsync("SettingsCalendar")
</swp-page-container>
</swp-tab-content>
<!-- Tab Content: Online Booking -->
<swp-tab-content data-tab="booking">
<swp-page-container>
@await Component.InvokeAsync("SettingsBooking")
</swp-page-container>
</swp-tab-content>
<!-- Tab Content: Faktura & Kvittering -->
<swp-tab-content data-tab="billing">
<swp-page-container>
@await Component.InvokeAsync("SettingsBilling")
</swp-page-container>
</swp-tab-content>
<!-- Tab Content: Påmindelser -->
<swp-tab-content data-tab="reminders">
<swp-page-container>
@await Component.InvokeAsync("SettingsReminders")
</swp-page-container>
</swp-tab-content>
<!-- Tab Content: Betalinger -->
<swp-tab-content data-tab="payments">
<swp-page-container>
@await Component.InvokeAsync("SettingsPayments")
</swp-page-container>
</swp-tab-content>
<!-- Tab Content: Moduler -->
<swp-tab-content data-tab="modules">
<swp-page-container>
@await Component.InvokeAsync("SettingsModules")
</swp-page-container>
</swp-tab-content>
<!-- Tab Content: Tracking -->
<swp-tab-content data-tab="tracking">
<swp-page-container>
@await Component.InvokeAsync("SettingsTracking")
</swp-page-container>
</swp-tab-content>

10
PlanTempus.Application/Features/Settings/Pages/Index.cshtml.cs Normal file
View file

@ -0,0 +1,10 @@
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace PlanTempus.Application.Features.Settings.Pages;
public class IndexModel : PageModel
{
public void OnGet()
{
}
}

1
PlanTempus.Application/Features/_Shared/Pages/_Layout.cshtml
View file

@ -33,6 +33,7 @@
<link rel="stylesheet" href="~/css/account.css"> <link rel="stylesheet" href="~/css/account.css">
<link rel="stylesheet" href="~/css/employees.css"> <link rel="stylesheet" href="~/css/employees.css">
<link rel="stylesheet" href="~/css/services.css"> <link rel="stylesheet" href="~/css/services.css">
<link rel="stylesheet" href="~/css/settings.css">
@await RenderSectionAsync("Styles", required: false) @await RenderSectionAsync("Styles", required: false)
</head> </head>
<body class="has-demo-banner"> <body class="has-demo-banner">

1
PlanTempus.Application/wwwroot/css/cash.css
View file

@ -114,7 +114,6 @@ swp-cash-table {
justify-content: space-between; justify-content: space-between;
padding: var(--spacing-7) var(--spacing-10); padding: var(--spacing-7) var(--spacing-10);
background: var(--color-background-alt); background: var(--color-background-alt);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-md); font-size: var(--font-size-md);
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }

149
PlanTempus.Application/wwwroot/css/components.css
View file

@ -10,11 +10,17 @@
* - swp-plan-card (subscription plan cards) * - swp-plan-card (subscription plan cards)
* - swp-avatar (user avatars with size variants) * - swp-avatar (user avatars with size variants)
* - swp-icon-btn (icon-only buttons) * - swp-icon-btn (icon-only buttons)
* - swp-card (content cards with section-label/footer) * - swp-card (content cards with header/title/section-label/footer)
* - swp-card-header (card header with title and actions)
* - swp-card-title (icon + text title)
* - swp-section-label (card section headers) * - swp-section-label (card section headers)
* - swp-section-header (section header with action link) * - swp-section-header (section header with action link)
* - swp-section-action (action link in section header) * - swp-section-action (action link in section header)
* - swp-add-button (dashed border add button) * - swp-add-button (dashed border add button)
* - swp-info-box (callout box with icon)
* - swp-section-intro (description text)
* - swp-section-divider (horizontal line)
* - swp-two-column-grid (responsive 2-column layout)
* - BASE PATTERNS: table, list-item, icon-container (Grid+Subgrid reusable patterns) * - BASE PATTERNS: table, list-item, icon-container (Grid+Subgrid reusable patterns)
*/ */
@ -544,7 +550,32 @@ swp-card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
padding: var(--card-padding); padding: var(--card-padding);
margin-top: var(--section-gap); }
/* Card header - flex row with title and actions */
swp-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-5) var(--card-padding);
border-bottom: 1px solid var(--color-border);
margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) var(--spacing-5);
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
/* Card title - icon + text */
swp-card-title {
display: flex;
align-items: center;
gap: var(--spacing-3);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
& i {
font-size: 20px;
color: var(--color-teal);
}
} }
/* Section label - simple card header */ /* Section label - simple card header */
@ -1443,3 +1474,117 @@ swp-see-all {
text-decoration: underline; text-decoration: underline;
} }
} }
/* ===========================================
INFO BOX (Callout)
=========================================== */
swp-info-box {
display: flex;
align-items: flex-start;
gap: var(--spacing-4);
padding: var(--spacing-4) var(--spacing-5);
margin-top: var(--section-gap);
background: var(--bg-blue-subtle);
border: 1px solid var(--bg-blue-border);
border-radius: var(--radius-md);
& i {
font-size: 20px;
color: var(--color-blue);
flex-shrink: 0;
}
& p {
font-size: var(--font-size-sm);
color: var(--color-text);
margin: 0;
line-height: 1.5;
}
&.success {
background: var(--bg-green-subtle);
border-color: var(--bg-green-border);
& i {
color: var(--color-green);
}
}
&.warning {
background: var(--bg-amber-subtle);
border-color: var(--bg-amber-border);
& i {
color: var(--color-amber);
}
}
}
/* ===========================================
SECTION INTRO (Description text)
=========================================== */
swp-section-intro {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-5);
line-height: 1.5;
}
/* ===========================================
SECTION DIVIDER (Horizontal line)
=========================================== */
swp-section-divider {
display: block;
height: 1px;
background: var(--color-border);
margin: var(--spacing-5) 0;
}
/* ===========================================
ACTION BAR (Filter/toolbar with white bg)
=========================================== */
swp-action-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-4);
padding: var(--spacing-4) var(--spacing-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
margin-bottom: var(--section-gap);
}
swp-action-bar swp-btn-group {
display: flex;
gap: var(--spacing-3);
}
/* ===========================================
TWO COLUMN GRID
=========================================== */
swp-two-column-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--card-gap);
align-items: start;
/* Full width cards span both columns */
& > .full-width {
grid-column: 1 / -1;
}
}
@media (max-width: 900px) {
swp-two-column-grid {
grid-template-columns: 1fr;
}
}
/* Stacked cards in a grid column */
.stacked-cards {
display: flex;
flex-direction: column;
gap: var(--card-gap);
}

1
PlanTempus.Application/wwwroot/css/controls.css
View file

@ -34,6 +34,7 @@ swp-toggle-description {
swp-toggle-slider { swp-toggle-slider {
display: inline-flex; display: inline-flex;
width: fit-content; width: fit-content;
flex-shrink: 0;
background: var(--color-background); background: var(--color-background);
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);

3
PlanTempus.Application/wwwroot/css/page.css
View file

@ -10,7 +10,8 @@
swp-page-container { swp-page-container {
display: block; display: block;
max-width: var(--page-max-width); max-width: var(--page-max-width);
margin: 0 auto; margin-top: var(--section-gap);
margin-bottom: var(--section-gap);
padding-left: var(--page-padding); padding-left: var(--page-padding);
padding-right: var(--page-padding); padding-right: var(--page-padding);
} }

16
PlanTempus.Application/wwwroot/css/services.css
View file

@ -3,6 +3,7 @@
* *
* Feature-specific styling only. * Feature-specific styling only.
* Reuses: * Reuses:
* - swp-action-bar (components.css)
* - swp-stat-card (stats.css) * - swp-stat-card (stats.css)
* - swp-data-table (components.css) * - swp-data-table (components.css)
* - swp-sticky-header, swp-page-container (page.css) * - swp-sticky-header, swp-page-container (page.css)
@ -16,21 +17,8 @@
*/ */
/* =========================================== /* ===========================================
SERVICES HEADER (Search + Button) SEARCH INPUT
=========================================== */ =========================================== */
swp-services-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--section-gap);
}
swp-services-header swp-btn-group {
display: flex;
gap: var(--spacing-3);
}
swp-search-input { swp-search-input {
display: flex; display: flex;
align-items: center; align-items: center;

692
PlanTempus.Application/wwwroot/css/settings.css Normal file
View file

@ -0,0 +1,692 @@
/**
* Settings - Indstillinger page components
*
* Settings-specific styling only.
* Reuses: swp-card, swp-card-header, swp-card-title, swp-edit-section,
* swp-toggle-row, swp-info-box, swp-section-intro (components.css)
*/
/* ===========================================
HOURS TABLE (Åbningstider)
=========================================== */
swp-hours-table {
display: flex;
flex-direction: column;
}
swp-hours-row {
display: grid;
grid-template-columns: 100px 80px 1fr;
gap: var(--spacing-5);
align-items: center;
padding: var(--spacing-4) 0;
border-bottom: 1px solid var(--color-border);
&:last-child {
border-bottom: none;
}
}
swp-hours-day {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
swp-hours-time {
display: flex;
align-items: center;
gap: var(--spacing-3);
& span {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
& input[type="time"] {
width: 100px;
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-sm);
font-family: var(--font-mono);
background: var(--color-background-alt);
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--color-text);
transition: all var(--transition-fast);
&:hover {
background: var(--color-background);
}
&:focus {
outline: none;
background: var(--color-surface);
border-color: var(--color-teal);
}
}
}
swp-hours-closed {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
font-style: italic;
}
/* ===========================================
CARD NOTE (used in Påmindelser)
=========================================== */
swp-card-note {
display: block;
margin-top: var(--spacing-4);
padding-top: var(--spacing-4);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-style: italic;
}
swp-time-range {
display: flex;
align-items: center;
gap: var(--spacing-3);
& span {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
& input[type="time"] {
width: 100px;
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-sm);
font-family: var(--font-mono);
background: var(--color-background-alt);
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--color-text);
transition: all var(--transition-fast);
&:hover {
background: var(--color-background);
}
&:focus {
outline: none;
background: var(--color-surface);
border-color: var(--color-teal);
}
}
}
/* ===========================================
URL FIELD (Booking URL)
=========================================== */
swp-url-field {
display: flex;
align-items: center;
gap: var(--spacing-2);
background: var(--color-background-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
& input {
flex: 1;
padding: var(--spacing-3) var(--spacing-4);
font-family: var(--font-mono);
font-size: var(--font-size-sm);
color: var(--color-text);
background: transparent;
border: none;
outline: none;
}
}
swp-url-copy {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--color-background);
border-left: 1px solid var(--color-border);
cursor: pointer;
transition: all var(--transition-fast);
& i {
font-size: 18px;
color: var(--color-text-secondary);
}
&:hover {
background: var(--color-teal);
& i {
color: white;
}
}
}
/* ===========================================
CLOSED DAYS LIST (Helligdage & Lukkedage)
=========================================== */
swp-closed-days-list {
display: flex;
flex-direction: column;
}
swp-closed-day-item {
display: grid;
grid-template-columns: 1fr auto auto;
gap: var(--spacing-4);
align-items: center;
padding: var(--spacing-3) 0;
border-bottom: 1px solid var(--color-border);
&:last-child {
border-bottom: none;
}
}
swp-closed-day-info {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
swp-closed-day-date {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
swp-closed-day-name {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
swp-closed-day-badge {
display: inline-flex;
align-items: center;
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-sm);
background: var(--color-background);
color: var(--color-text-secondary);
&.holiday {
background: var(--bg-red-strong);
color: var(--color-red);
}
&.custom {
background: var(--bg-blue-strong);
color: var(--color-blue);
}
}
/* ===========================================
MODULES BADGE (section header)
=========================================== */
swp-modules-badge {
display: inline-flex;
align-items: center;
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-sm);
background: var(--bg-purple-strong);
color: var(--color-purple);
}
/* ===========================================
MODULES SECTION
=========================================== */
swp-modules-section {
margin-bottom: var(--section-gap);
}
swp-modules-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-5);
}
swp-modules-title {
display: flex;
align-items: center;
gap: var(--spacing-3);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
& i {
font-size: 22px;
color: var(--color-teal);
}
}
swp-modules-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--card-gap);
}
@media (max-width: 900px) {
swp-modules-grid {
grid-template-columns: 1fr;
}
}
/* ===========================================
MODULE CARD
=========================================== */
swp-module-card {
display: block;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition-fast);
&:hover {
border-color: var(--color-teal);
box-shadow: var(--shadow-sm);
}
&.full-width {
grid-column: 1 / -1;
}
}
swp-module-header {
display: flex;
align-items: center;
gap: var(--spacing-5);
padding: var(--card-padding);
}
swp-module-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
& i {
font-size: 24px;
}
&.teal {
background: var(--bg-teal-strong);
color: var(--color-teal);
}
&.purple {
background: var(--bg-purple-strong);
color: var(--color-purple);
}
&.blue {
background: var(--bg-blue-strong);
color: var(--color-blue);
}
&.amber {
background: var(--bg-amber-strong);
color: var(--color-amber);
}
&.green {
background: var(--bg-green-strong);
color: var(--color-green);
}
}
swp-module-info {
flex: 1;
min-width: 0;
}
swp-module-title {
display: block;
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--spacing-1);
}
swp-module-desc {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: 1.4;
}
swp-module-toggle {
flex-shrink: 0;
}
swp-module-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-4) var(--card-padding);
background: var(--color-background-alt);
border-top: 1px solid var(--color-border);
}
swp-module-tags {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
swp-module-tag {
display: inline-flex;
align-items: center;
padding: var(--spacing-1) var(--spacing-3);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-sm);
background: var(--color-background);
color: var(--color-text-secondary);
&.included {
background: var(--bg-green-strong);
color: var(--color-green);
}
&.price {
background: var(--bg-blue-strong);
color: var(--color-blue);
}
&.new {
background: var(--bg-purple-strong);
color: var(--color-purple);
}
&.coming {
background: var(--bg-amber-strong);
color: var(--color-amber);
}
}
/* Featured module card */
swp-module-card.featured {
border: 2px solid var(--color-green);
background: linear-gradient(135deg, var(--bg-green-subtle) 0%, var(--color-surface) 100%);
&:hover {
border-color: var(--color-green);
box-shadow: 0 4px 16px rgba(67, 160, 71, 0.15);
}
&.purple {
border-color: var(--color-purple);
background: linear-gradient(135deg, var(--bg-purple-subtle) 0%, var(--color-surface) 100%);
&:hover {
border-color: var(--color-purple);
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
}
}
}
swp-module-features {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2) var(--spacing-5);
padding: 0 var(--card-padding) var(--spacing-5);
}
swp-module-feature {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
& i {
font-size: 16px;
color: var(--color-green);
}
&.purple i {
color: var(--color-purple);
}
}
swp-module-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-4);
padding: var(--spacing-5) var(--card-padding);
background: var(--bg-green-subtle);
border-top: 1px solid var(--bg-green-border);
border-bottom: 1px solid var(--bg-green-border);
&.purple {
background: var(--bg-purple-subtle);
border-color: var(--bg-purple-border);
swp-module-stat-value {
color: var(--color-purple);
}
}
}
swp-module-stat {
text-align: center;
}
swp-module-stat-value {
display: block;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
font-family: var(--font-mono);
color: var(--color-green);
}
swp-module-stat-label {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-top: var(--spacing-1);
}
/* ===========================================
TRACKING COMPONENTS
=========================================== */
swp-tracking-hint {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 10px 12px;
background: color-mix(in srgb, var(--color-blue) 8%, transparent);
border-radius: 6px;
font-size: 12px;
color: var(--color-text-secondary);
& i {
font-size: 16px;
color: var(--color-blue);
}
&.privacy {
background: color-mix(in srgb, var(--color-green) 8%, transparent);
& i {
color: var(--color-green);
}
}
}
/* Modules tab max-width */
swp-tab-content[data-tab="modules"] swp-page-container {
max-width: 900px;
margin: 0 auto;
}
/* Tracking tab uses 2-column grid layout */
swp-tab-content[data-tab="tracking"] swp-page-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
@media (max-width: 900px) {
swp-tab-content[data-tab="tracking"] swp-page-container {
grid-template-columns: 1fr;
}
}
/* Full-width in tracking grid */
swp-tab-content[data-tab="tracking"] .full-width {
grid-column: 1 / -1;
}
/* Tracking card variant */
.tracking-card {
margin-bottom: 0;
& swp-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
&[data-tracker] swp-card-content {
transition: opacity 200ms ease;
}
&[data-tracker].disabled swp-card-content {
opacity: 0.5;
pointer-events: none;
}
}
/* Script section for custom tracking */
swp-script-section {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
}
swp-script-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--color-text);
& i {
font-size: 16px;
color: var(--color-text-secondary);
}
}
.script-textarea {
width: 100%;
min-height: 100px;
padding: 12px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.5;
color: var(--color-text);
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: 6px;
resize: vertical;
&::placeholder {
color: var(--color-text-secondary);
}
&:focus {
outline: none;
border-color: var(--color-teal);
}
}
/* ===========================================
CODE PREVIEW CARD (Tracking)
=========================================== */
.code-preview-card {
grid-column: 1 / -1;
border: 2px dashed var(--color-teal);
background: color-mix(in srgb, var(--color-teal) 3%, var(--color-surface));
& swp-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
& swp-card-title {
color: var(--color-teal);
}
}
swp-code-info {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 12px;
color: var(--color-text-secondary);
& i {
font-size: 16px;
color: var(--color-teal);
}
}
.code-preview {
margin: 0;
padding: 16px;
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: 6px;
overflow-x: auto;
max-height: 400px;
overflow-y: auto;
& code {
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.6;
color: var(--color-text);
white-space: pre;
}
& .comment {
color: var(--color-green);
}
& .tag {
color: var(--color-blue);
}
& .attr {
color: var(--color-purple);
}
& .string {
color: var(--color-teal);
}
}

3
PlanTempus.Application/wwwroot/ts/app.ts
View file

@ -13,6 +13,7 @@ import { CashController } from './modules/cash';
import { EmployeesController } from './modules/employees'; import { EmployeesController } from './modules/employees';
import { ControlsController } from './modules/controls'; import { ControlsController } from './modules/controls';
import { ServicesController } from './modules/services'; import { ServicesController } from './modules/services';
import { TrackingController } from './modules/tracking';
/** /**
* Main application class * Main application class
@ -27,6 +28,7 @@ export class App {
readonly employees: EmployeesController; readonly employees: EmployeesController;
readonly controls: ControlsController; readonly controls: ControlsController;
readonly services: ServicesController; readonly services: ServicesController;
readonly tracking: TrackingController;
constructor() { constructor() {
// Initialize controllers // Initialize controllers
@ -39,6 +41,7 @@ export class App {
this.employees = new EmployeesController(); this.employees = new EmployeesController();
this.controls = new ControlsController(); this.controls = new ControlsController();
this.services = new ServicesController(); this.services = new ServicesController();
this.tracking = new TrackingController();
} }
} }

289
PlanTempus.Application/wwwroot/ts/modules/tracking.ts Normal file
View file

@ -0,0 +1,289 @@
/**
* Tracking Controller
*
* Handles toggle switches, input changes, and code preview generation
* for the Settings > Tracking page.
*
* Note: Toggle slider click behavior is handled by ControlsController.
* This controller listens for 'toggle' events to update card states and preview.
*/
export class TrackingController {
constructor() {
this.setupToggleListeners();
this.setupInputListeners();
this.setupCopyButton();
this.initializeCardStates();
this.updatePreview();
}
/**
* Listen for toggle events from ControlsController
*/
private setupToggleListeners(): void {
document.querySelectorAll<HTMLElement>('.tracking-card swp-toggle-slider').forEach(slider => {
slider.addEventListener('toggle', (e) => {
const detail = (e as CustomEvent).detail;
const card = slider.closest('.tracking-card');
if (card) {
if (detail.value === 'no') {
card.classList.add('disabled');
} else {
card.classList.remove('disabled');
}
}
this.updatePreview();
});
});
}
/**
* Setup input listeners for contenteditable fields and textareas
*/
private setupInputListeners(): void {
// Contenteditable fields
const editableIds = [
'metaPixelId', 'ga4Id', 'gtmId', 'plausibleDomain',
'fathomSiteId', 'matomoUrl', 'matomoSiteId'
];
editableIds.forEach(id => {
const element = document.getElementById(id);
if (element) {
element.addEventListener('input', () => this.updatePreview());
}
});
// Textareas
const textareaIds = ['customHeadScripts', 'customBodyScripts'];
textareaIds.forEach(id => {
const element = document.getElementById(id) as HTMLTextAreaElement;
if (element) {
element.addEventListener('input', () => this.updatePreview());
}
});
}
/**
* Setup copy button functionality
*/
private setupCopyButton(): void {
const copyBtn = document.getElementById('copyTrackingCode');
if (!copyBtn) return;
copyBtn.addEventListener('click', () => this.copyCode());
}
/**
* Initialize card states based on toggle values
*/
private initializeCardStates(): void {
document.querySelectorAll<HTMLElement>('.tracking-card[data-tracker]').forEach(card => {
const toggle = card.querySelector<HTMLElement>('swp-toggle-slider');
if (toggle && toggle.dataset.value === 'no') {
card.classList.add('disabled');
}
});
}
/**
* Check if a tracker is enabled
*/
private isTrackerEnabled(trackerName: string): boolean {
const card = document.querySelector<HTMLElement>(`[data-tracker="${trackerName}"]`);
if (!card) return false;
const toggle = card.querySelector<HTMLElement>('swp-toggle-slider');
return toggle?.dataset.value === 'yes';
}
/**
* Get text content from an element by ID
*/
private getValue(id: string): string {
const element = document.getElementById(id);
return element?.textContent?.trim() || '';
}
/**
* Get value from textarea by ID
*/
private getTextareaValue(id: string): string {
const element = document.getElementById(id) as HTMLTextAreaElement;
return element?.value?.trim() || '';
}
/**
* Escape HTML entities
*/
private escapeHtml(text: string): string {
return text
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;');
}
/**
* Update the code preview based on active trackers
*/
private updatePreview(): void {
const preview = document.getElementById('trackingCodePreview');
if (!preview) return;
let code = '';
// Meta Pixel
if (this.isTrackerEnabled('meta')) {
const pixelId = this.getValue('metaPixelId');
if (pixelId) {
code += `<span class="comment">&lt;!-- Meta Pixel --&gt;</span>
<span class="tag">&lt;script&gt;</span>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq(<span class="string">'init'</span>, <span class="string">'${pixelId}'</span>);
fbq(<span class="string">'track'</span>, <span class="string">'PageView'</span>);
<span class="tag">&lt;/script&gt;</span>
`;
}
}
// Google Analytics
if (this.isTrackerEnabled('ga4')) {
const measurementId = this.getValue('ga4Id');
if (measurementId) {
code += `<span class="comment">&lt;!-- Google Analytics (GA4) --&gt;</span>
<span class="tag">&lt;script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"https://www.googletagmanager.com/gtag/js?id=${measurementId}"</span><span class="tag">&gt;&lt;/script&gt;</span>
<span class="tag">&lt;script&gt;</span>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(<span class="string">'js'</span>, new Date());
gtag(<span class="string">'config'</span>, <span class="string">'${measurementId}'</span>);
<span class="tag">&lt;/script&gt;</span>
`;
}
}
// Google Tag Manager
if (this.isTrackerEnabled('gtm')) {
const containerId = this.getValue('gtmId');
if (containerId) {
code += `<span class="comment">&lt;!-- Google Tag Manager --&gt;</span>
<span class="tag">&lt;script&gt;</span>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer',<span class="string">'${containerId}'</span>);
<span class="tag">&lt;/script&gt;</span>
`;
}
}
// Plausible
if (this.isTrackerEnabled('plausible')) {
const domain = this.getValue('plausibleDomain');
if (domain) {
code += `<span class="comment">&lt;!-- Plausible Analytics --&gt;</span>
<span class="tag">&lt;script</span> <span class="attr">defer</span> <span class="attr">data-domain</span>=<span class="string">"${domain}"</span> <span class="attr">src</span>=<span class="string">"https://plausible.io/js/script.js"</span><span class="tag">&gt;&lt;/script&gt;</span>
`;
}
}
// Fathom
if (this.isTrackerEnabled('fathom')) {
const siteId = this.getValue('fathomSiteId');
if (siteId) {
code += `<span class="comment">&lt;!-- Fathom Analytics --&gt;</span>
<span class="tag">&lt;script</span> <span class="attr">src</span>=<span class="string">"https://cdn.usefathom.com/script.js"</span> <span class="attr">data-site</span>=<span class="string">"${siteId}"</span> <span class="attr">defer</span><span class="tag">&gt;&lt;/script&gt;</span>
`;
}
}
// Matomo
if (this.isTrackerEnabled('matomo')) {
const serverUrl = this.getValue('matomoUrl');
const siteId = this.getValue('matomoSiteId');
if (serverUrl && siteId) {
code += `<span class="comment">&lt;!-- Matomo Analytics --&gt;</span>
<span class="tag">&lt;script&gt;</span>
var _paq = window._paq = window._paq || [];
_paq.push([<span class="string">'trackPageView'</span>]);
_paq.push([<span class="string">'enableLinkTracking'</span>]);
(function() {
var u=<span class="string">"${serverUrl}/"</span>;
_paq.push([<span class="string">'setTrackerUrl'</span>, u+<span class="string">'matomo.php'</span>]);
_paq.push([<span class="string">'setSiteId'</span>, <span class="string">'${siteId}'</span>]);
var d=document, g=d.createElement(<span class="string">'script'</span>), s=d.getElementsByTagName(<span class="string">'script'</span>)[0];
g.async=true; g.src=u+<span class="string">'matomo.js'</span>; s.parentNode.insertBefore(g,s);
})();
<span class="tag">&lt;/script&gt;</span>
`;
}
}
// Custom Head Scripts
const customHead = this.getTextareaValue('customHeadScripts');
if (customHead) {
code += `<span class="comment">&lt;!-- Custom Scripts --&gt;</span>
${this.escapeHtml(customHead)}
`;
}
// Update preview
const codeElement = preview.querySelector('code');
if (codeElement) {
if (code) {
codeElement.innerHTML = code.trim();
} else {
codeElement.innerHTML = '<span class="comment">&lt;!-- Ingen aktive tracking-koder --&gt;</span>';
}
}
}
/**
* Copy generated code to clipboard
*/
private copyCode(): void {
const preview = document.getElementById('trackingCodePreview');
if (!preview) return;
const codeElement = preview.querySelector('code');
if (!codeElement) return;
// Get plain text version (strip HTML tags and decode entities)
const code = codeElement.innerHTML
.replace(/<span[^>]*>/g, '')
.replace(/<\/span>/g, '')
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/&amp;/g, '&');
navigator.clipboard.writeText(code).then(() => {
const btn = document.getElementById('copyTrackingCode');
if (!btn) return;
const originalHtml = btn.innerHTML;
btn.innerHTML = '<i class="ph ph-check"></i> Kopieret!';
btn.style.color = 'var(--color-green)';
setTimeout(() => {
btn.innerHTML = originalHtml;
btn.style.color = '';
}, 2000);
});
}
}