120367acbb
Adds comprehensive service detail view with multiple tabs and dynamic interactions Implements client-side navigation between service list and detail views Introduces mock service data catalog for flexible component rendering Extends localization support for new service detail screens Improves user experience by adding edit capabilities and smooth view transitions
89 lines
3.4 KiB
Text
89 lines
3.4 KiB
Text
@model PlanTempus.Application.Features.Services.Components.ServiceDetailViewViewModel
|
|
|
|
<swp-service-detail-view id="service-detail-view" data-service="@Model.ServiceKey">
|
|
<!-- Sticky Header (generic from page.css) -->
|
|
<swp-sticky-header>
|
|
<swp-header-content>
|
|
<!-- Page Header with Back Button -->
|
|
<swp-page-header>
|
|
<swp-page-title>
|
|
<swp-back-link data-service-back>
|
|
<i class="ph ph-arrow-left"></i>
|
|
@Model.BackText
|
|
</swp-back-link>
|
|
</swp-page-title>
|
|
<swp-page-actions>
|
|
<swp-btn class="primary">
|
|
<i class="ph ph-floppy-disk"></i>
|
|
@Model.SaveButtonText
|
|
</swp-btn>
|
|
</swp-page-actions>
|
|
</swp-page-header>
|
|
|
|
<!-- Service Header -->
|
|
@await Component.InvokeAsync("ServiceDetailHeader", Model.ServiceKey)
|
|
</swp-header-content>
|
|
|
|
<!-- Tabs (outside header-content, inside sticky-header) -->
|
|
<swp-tab-bar>
|
|
<swp-tab class="active" data-tab="general">@Model.TabGeneral</swp-tab>
|
|
<swp-tab data-tab="prices">@Model.TabPrices</swp-tab>
|
|
<swp-tab data-tab="duration">@Model.TabDuration</swp-tab>
|
|
<swp-tab data-tab="employees">@Model.TabEmployees</swp-tab>
|
|
<swp-tab data-tab="addons">@Model.TabAddons</swp-tab>
|
|
<swp-tab data-tab="rules">@Model.TabRules</swp-tab>
|
|
</swp-tab-bar>
|
|
</swp-sticky-header>
|
|
|
|
<!-- Tab Contents -->
|
|
<swp-tab-content data-tab="general" class="active">
|
|
<swp-page-container>
|
|
@await Component.InvokeAsync("ServiceDetailGeneral", Model.ServiceKey)
|
|
</swp-page-container>
|
|
</swp-tab-content>
|
|
|
|
<swp-tab-content data-tab="prices">
|
|
<swp-page-container>
|
|
<swp-card>
|
|
<swp-section-label>Priser</swp-section-label>
|
|
<p style="color: var(--color-text-secondary);">Priser-tab kommer snart...</p>
|
|
</swp-card>
|
|
</swp-page-container>
|
|
</swp-tab-content>
|
|
|
|
<swp-tab-content data-tab="duration">
|
|
<swp-page-container>
|
|
<swp-card>
|
|
<swp-section-label>Varighed</swp-section-label>
|
|
<p style="color: var(--color-text-secondary);">Varighed-tab kommer snart...</p>
|
|
</swp-card>
|
|
</swp-page-container>
|
|
</swp-tab-content>
|
|
|
|
<swp-tab-content data-tab="employees">
|
|
<swp-page-container>
|
|
<swp-card>
|
|
<swp-section-label>Medarbejdere</swp-section-label>
|
|
<p style="color: var(--color-text-secondary);">Medarbejdere-tab kommer snart...</p>
|
|
</swp-card>
|
|
</swp-page-container>
|
|
</swp-tab-content>
|
|
|
|
<swp-tab-content data-tab="addons">
|
|
<swp-page-container>
|
|
<swp-card>
|
|
<swp-section-label>Tilvalg</swp-section-label>
|
|
<p style="color: var(--color-text-secondary);">Tilvalg-tab kommer snart...</p>
|
|
</swp-card>
|
|
</swp-page-container>
|
|
</swp-tab-content>
|
|
|
|
<swp-tab-content data-tab="rules">
|
|
<swp-page-container>
|
|
<swp-card>
|
|
<swp-section-label>Regler</swp-section-label>
|
|
<p style="color: var(--color-text-secondary);">Regler-tab kommer snart...</p>
|
|
</swp-card>
|
|
</swp-page-container>
|
|
</swp-tab-content>
|
|
</swp-service-detail-view>
|