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

Enhances customer list and detail views

Browse source 
Improves customer page UI with interactive elements:
- Adds quick view sidebar button for each customer row
- Implements row-level navigation to customer details
- Corrects Danish spelling and typography
- Refactors data table layout for better usability

Modernizes customer interaction by enabling direct page navigation and quick information access
This commit is contained in:
Janus C. H. Knudsen 2026-01-20 21:32:03 +01:00
parent 6b0a84a07e
commit cd7acaf490
5 changed files with 291 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

288
PlanTempus.Application/Features/Services/Components/ServiceDetailRules/Default.cshtml
View file

@ -1,150 +1,156 @@
@model PlanTempus.Application.Features.Services.Components.ServiceDetailRulesViewModel
<swp-detail-grid>
<swp-card>
<swp-card-header>
<swp-card-title>@Model.LabelBookingRules</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelMinNotice</swp-edit-label>
<swp-select data-value="@Model.MinNotice">
<button type="button" aria-expanded="false">
<swp-select-value>@GetNoticeLabel(Model.MinNotice)</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<swp-select-dropdown>
<swp-select-option data-value="0" class="@(Model.MinNotice == "0" ? "selected" : "")">Ingen</swp-select-option>
<swp-select-option data-value="2" class="@(Model.MinNotice == "2" ? "selected" : "")">2 timer</swp-select-option>
<swp-select-option data-value="4" class="@(Model.MinNotice == "4" ? "selected" : "")">4 timer</swp-select-option>
<swp-select-option data-value="24" class="@(Model.MinNotice == "24" ? "selected" : "")">24 timer</swp-select-option>
<swp-select-option data-value="48" class="@(Model.MinNotice == "48" ? "selected" : "")">48 timer</swp-select-option>
<swp-select-option data-value="168" class="@(Model.MinNotice == "168" ? "selected" : "")">1 uge</swp-select-option>
</swp-select-dropdown>
</swp-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>@Model.LabelMaxAdvanceBooking</swp-edit-label>
<swp-select data-value="@Model.MaxAdvanceBooking">
<button type="button" aria-expanded="false">
<swp-select-value>@GetAdvanceBookingLabel(Model.MaxAdvanceBooking)</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<swp-select-dropdown>
<swp-select-option data-value="1" class="@(Model.MaxAdvanceBooking == "1" ? "selected" : "")">1 måned</swp-select-option>
<swp-select-option data-value="2" class="@(Model.MaxAdvanceBooking == "2" ? "selected" : "")">2 måneder</swp-select-option>
<swp-select-option data-value="3" class="@(Model.MaxAdvanceBooking == "3" ? "selected" : "")">3 måneder</swp-select-option>
<swp-select-option data-value="6" class="@(Model.MaxAdvanceBooking == "6" ? "selected" : "")">6 måneder</swp-select-option>
<swp-select-option data-value="12" class="@(Model.MaxAdvanceBooking == "12" ? "selected" : "")">1 år</swp-select-option>
</swp-select-dropdown>
</swp-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>@Model.LabelCancellationDeadline</swp-edit-label>
<swp-select data-value="@Model.CancellationDeadline">
<button type="button" aria-expanded="false">
<swp-select-value>@GetNoticeLabel(Model.CancellationDeadline)</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<swp-select-dropdown>
<swp-select-option data-value="0" class="@(Model.CancellationDeadline == "0" ? "selected" : "")">Ingen</swp-select-option>
<swp-select-option data-value="2" class="@(Model.CancellationDeadline == "2" ? "selected" : "")">2 timer</swp-select-option>
<swp-select-option data-value="4" class="@(Model.CancellationDeadline == "4" ? "selected" : "")">4 timer</swp-select-option>
<swp-select-option data-value="24" class="@(Model.CancellationDeadline == "24" ? "selected" : "")">24 timer</swp-select-option>
<swp-select-option data-value="48" class="@(Model.CancellationDeadline == "48" ? "selected" : "")">48 timer</swp-select-option>
</swp-select-dropdown>
</swp-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>@Model.LabelNoShowFee</swp-edit-label>
<swp-select data-value="@Model.NoShowFee">
<button type="button" aria-expanded="false">
<swp-select-value>@GetNoShowFeeLabel(Model.NoShowFee)</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<swp-select-dropdown>
<swp-select-option data-value="0" class="@(Model.NoShowFee == "0" ? "selected" : "")">Intet</swp-select-option>
<swp-select-option data-value="25" class="@(Model.NoShowFee == "25" ? "selected" : "")">25% af pris</swp-select-option>
<swp-select-option data-value="50" class="@(Model.NoShowFee == "50" ? "selected" : "")">50% af pris</swp-select-option>
<swp-select-option data-value="100" class="@(Model.NoShowFee == "100" ? "selected" : "")">Fuld pris</swp-select-option>
<swp-select-option data-value="fixed" class="@(Model.NoShowFee == "fixed" ? "selected" : "")">Fast beløb</swp-select-option>
</swp-select-dropdown>
</swp-select>
</swp-edit-row>
</swp-edit-section>
</swp-card>
<!-- Column 1 -->
<swp-card-column>
<swp-card>
<swp-card-header>
<swp-card-title>@Model.LabelBookingRules</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelMinNotice</swp-edit-label>
<swp-select data-value="@Model.MinNotice">
<button type="button" aria-expanded="false">
<swp-select-value>@GetNoticeLabel(Model.MinNotice)</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<swp-select-dropdown>
<swp-select-option data-value="0" class="@(Model.MinNotice == "0" ? "selected" : "")">Ingen</swp-select-option>
<swp-select-option data-value="2" class="@(Model.MinNotice == "2" ? "selected" : "")">2 timer</swp-select-option>
<swp-select-option data-value="4" class="@(Model.MinNotice == "4" ? "selected" : "")">4 timer</swp-select-option>
<swp-select-option data-value="24" class="@(Model.MinNotice == "24" ? "selected" : "")">24 timer</swp-select-option>
<swp-select-option data-value="48" class="@(Model.MinNotice == "48" ? "selected" : "")">48 timer</swp-select-option>
<swp-select-option data-value="168" class="@(Model.MinNotice == "168" ? "selected" : "")">1 uge</swp-select-option>
</swp-select-dropdown>
</swp-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>@Model.LabelMaxAdvanceBooking</swp-edit-label>
<swp-select data-value="@Model.MaxAdvanceBooking">
<button type="button" aria-expanded="false">
<swp-select-value>@GetAdvanceBookingLabel(Model.MaxAdvanceBooking)</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<swp-select-dropdown>
<swp-select-option data-value="1" class="@(Model.MaxAdvanceBooking == "1" ? "selected" : "")">1 måned</swp-select-option>
<swp-select-option data-value="2" class="@(Model.MaxAdvanceBooking == "2" ? "selected" : "")">2 måneder</swp-select-option>
<swp-select-option data-value="3" class="@(Model.MaxAdvanceBooking == "3" ? "selected" : "")">3 måneder</swp-select-option>
<swp-select-option data-value="6" class="@(Model.MaxAdvanceBooking == "6" ? "selected" : "")">6 måneder</swp-select-option>
<swp-select-option data-value="12" class="@(Model.MaxAdvanceBooking == "12" ? "selected" : "")">1 år</swp-select-option>
</swp-select-dropdown>
</swp-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>@Model.LabelCancellationDeadline</swp-edit-label>
<swp-select data-value="@Model.CancellationDeadline">
<button type="button" aria-expanded="false">
<swp-select-value>@GetNoticeLabel(Model.CancellationDeadline)</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<swp-select-dropdown>
<swp-select-option data-value="0" class="@(Model.CancellationDeadline == "0" ? "selected" : "")">Ingen</swp-select-option>
<swp-select-option data-value="2" class="@(Model.CancellationDeadline == "2" ? "selected" : "")">2 timer</swp-select-option>
<swp-select-option data-value="4" class="@(Model.CancellationDeadline == "4" ? "selected" : "")">4 timer</swp-select-option>
<swp-select-option data-value="24" class="@(Model.CancellationDeadline == "24" ? "selected" : "")">24 timer</swp-select-option>
<swp-select-option data-value="48" class="@(Model.CancellationDeadline == "48" ? "selected" : "")">48 timer</swp-select-option>
</swp-select-dropdown>
</swp-select>
</swp-edit-row>
<swp-edit-row>
<swp-edit-label>@Model.LabelNoShowFee</swp-edit-label>
<swp-select data-value="@Model.NoShowFee">
<button type="button" aria-expanded="false">
<swp-select-value>@GetNoShowFeeLabel(Model.NoShowFee)</swp-select-value>
<i class="ph ph-caret-down"></i>
</button>
<swp-select-dropdown>
<swp-select-option data-value="0" class="@(Model.NoShowFee == "0" ? "selected" : "")">Intet</swp-select-option>
<swp-select-option data-value="25" class="@(Model.NoShowFee == "25" ? "selected" : "")">25% af pris</swp-select-option>
<swp-select-option data-value="50" class="@(Model.NoShowFee == "50" ? "selected" : "")">50% af pris</swp-select-option>
<swp-select-option data-value="100" class="@(Model.NoShowFee == "100" ? "selected" : "")">Fuld pris</swp-select-option>
<swp-select-option data-value="fixed" class="@(Model.NoShowFee == "fixed" ? "selected" : "")">Fast beløb</swp-select-option>
</swp-select-dropdown>
</swp-select>
</swp-edit-row>
</swp-edit-section>
</swp-card>
<swp-card>
<swp-card-header>
<swp-card-title>@Model.LabelRequirements</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<div>
<swp-toggle-label>@Model.LabelRequiresConsultation</swp-toggle-label>
<swp-toggle-description>@Model.LabelRequiresConsultationDesc</swp-toggle-description>
</div>
<swp-toggle-slider data-value="@(Model.RequiresConsultation ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<div>
<swp-toggle-label>@Model.LabelRequiresPatchTest</swp-toggle-label>
<swp-toggle-description>@Model.LabelRequiresPatchTestDesc</swp-toggle-description>
</div>
<swp-toggle-slider data-value="@(Model.RequiresPatchTest ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<div>
<swp-toggle-label>@Model.LabelAgeRestriction</swp-toggle-label>
<swp-toggle-description>@Model.LabelAgeRestrictionDesc</swp-toggle-description>
</div>
<swp-toggle-slider data-value="@(Model.AgeRestriction ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-card>
<swp-card>
<swp-card-header>
<swp-card-title>@Model.LabelOnlineBookingSettings</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<swp-toggle-label>@Model.LabelShowInOnlineBooking</swp-toggle-label>
<swp-toggle-slider data-value="@(Model.ShowInOnlineBooking ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label>@Model.LabelAllowEmployeeSelection</swp-toggle-label>
<swp-toggle-slider data-value="@(Model.AllowEmployeeSelection ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label>@Model.LabelShowPrice</swp-toggle-label>
<swp-toggle-slider data-value="@(Model.ShowPrice ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label>@Model.LabelShowDuration</swp-toggle-label>
<swp-toggle-slider data-value="@(Model.ShowDuration ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-card>
</swp-card-column>
<!-- Column 2 -->
<swp-card-column>
<swp-card>
<swp-card-header>
<swp-card-title>@Model.LabelRequirements</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<div>
<swp-toggle-label>@Model.LabelRequiresConsultation</swp-toggle-label>
<swp-toggle-description>@Model.LabelRequiresConsultationDesc</swp-toggle-description>
</div>
<swp-toggle-slider data-value="@(Model.RequiresConsultation ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<div>
<swp-toggle-label>@Model.LabelRequiresPatchTest</swp-toggle-label>
<swp-toggle-description>@Model.LabelRequiresPatchTestDesc</swp-toggle-description>
</div>
<swp-toggle-slider data-value="@(Model.RequiresPatchTest ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<div>
<swp-toggle-label>@Model.LabelAgeRestriction</swp-toggle-label>
<swp-toggle-description>@Model.LabelAgeRestrictionDesc</swp-toggle-description>
</div>
<swp-toggle-slider data-value="@(Model.AgeRestriction ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-card>
</swp-card-column>
</swp-detail-grid>
<swp-card>
<swp-card-header>
<swp-card-title>@Model.LabelOnlineBookingSettings</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<swp-toggle-label>@Model.LabelShowInOnlineBooking</swp-toggle-label>
<swp-toggle-slider data-value="@(Model.ShowInOnlineBooking ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label>@Model.LabelAllowEmployeeSelection</swp-toggle-label>
<swp-toggle-slider data-value="@(Model.AllowEmployeeSelection ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label>@Model.LabelShowPrice</swp-toggle-label>
<swp-toggle-slider data-value="@(Model.ShowPrice ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label>@Model.LabelShowDuration</swp-toggle-label>
<swp-toggle-slider data-value="@(Model.ShowDuration ? "yes" : "no")">
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-card>
@functions {
string GetNoticeLabel(string hours)
{