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

Refactors UI components with new card header structure

Browse source 
Replaces `swp-section-label` with standardized `swp-card-header` and `swp-card-title`

Improves component consistency across multiple features:
- Adds structured card headers
- Introduces more semantic HTML elements
- Enhances layout and readability of card components

Updates CSS and component styles to support new structure
This commit is contained in:
Janus C. H. Knudsen 2026-01-19 14:23:41 +01:00
parent 33c338345e
commit c1d2df9327
31 changed files with 250 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

28
PlanTempus.Application/Features/Employees/Components/EmployeeDetailGeneral/Default.cshtml
View file

@ -2,10 +2,12 @@
<swp-detail-grid>
<!-- Left column -->
<div>
<swp-card-column>
<!-- Contact Card -->
<swp-card>
<swp-section-label>@Model.LabelContact</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelContact</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelFullName</swp-edit-label>
@ -32,7 +34,9 @@
<!-- Personal Card -->
<swp-card>
<swp-section-label>@Model.LabelPersonal</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelPersonal</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelBirthDate</swp-edit-label>
@ -48,13 +52,15 @@
</swp-edit-row>
</swp-edit-section>
</swp-card>
</div>
</swp-card-column>
<!-- Right column -->
<div>
<swp-card-column>
<!-- Employment Card -->
<swp-card>
<swp-section-label>@Model.LabelEmployment</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelEmployment</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelEmploymentDate</swp-edit-label>
@ -77,7 +83,9 @@
<!-- Settings Card -->
<swp-card>
<swp-section-label>@Model.LabelSettings</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelSettings</swp-card-title>
</swp-card-header>
<swp-toggle-row>
<div>
<swp-toggle-label>@Model.SettingShowInBooking</swp-toggle-label>
@ -102,7 +110,9 @@
<!-- Notifications Card -->
<swp-card>
<swp-section-label>@Model.LabelNotifications</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelNotifications</swp-card-title>
</swp-card-header>
<swp-notification-intro>@Model.NotificationsIntro</swp-notification-intro>
<swp-toggle-row>
<swp-toggle-label>@Model.SettingSmsReminders</swp-toggle-label>
@ -147,5 +157,5 @@
</swp-toggle-slider>
</swp-toggle-row>
</swp-card>
</div>
</swp-card-column>
</swp-detail-grid>

34
PlanTempus.Application/Features/Employees/Components/EmployeeDetailHR/Default.cshtml
View file

@ -2,11 +2,12 @@
<swp-detail-grid>
<!-- Left column -->
<div>
<swp-card-column>
<!-- Contract & Documents -->
<swp-card>
<swp-section-label>@Model.LabelContractDocuments</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelContractDocuments</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelContractType</swp-edit-label>
@ -57,7 +58,9 @@
<!-- Planned absence -->
<swp-card>
<swp-section-label>@Model.LabelPlannedAbsence</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelPlannedAbsence</swp-card-title>
</swp-card-header>
<swp-simple-list>
@foreach (var absence in Model.PlannedAbsences)
{
@ -69,13 +72,15 @@
</swp-simple-list>
<swp-add-button>+ @Model.LabelAddAbsence</swp-add-button>
</swp-card>
</div>
</swp-card-column>
<!-- Right column -->
<div>
<swp-card-column>
<!-- Certifications -->
<swp-card>
<swp-section-label>@Model.LabelCertifications</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelCertifications</swp-card-title>
</swp-card-header>
<swp-document-list>
@foreach (var cert in Model.Certifications)
{
@ -96,8 +101,9 @@
<!-- Courses -->
<swp-card>
<swp-section-label>@Model.LabelCourses</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelCourses</swp-card-title>
</swp-card-header>
<swp-subsection>
<swp-subsection-title>@Model.LabelCompletedCourses</swp-subsection-title>
<swp-document-list>
@ -136,13 +142,15 @@
<swp-add-button>+ @Model.LabelAddCourse</swp-add-button>
</swp-card>
</div>
</swp-card-column>
</swp-detail-grid>
<!-- Vacation & Absence section -->
<swp-detail-grid style="margin-top: var(--spacing-8);">
<swp-card>
<swp-section-label>@Model.LabelVacationBalance</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelVacationBalance</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelVacationEarned</swp-edit-label>
@ -160,7 +168,9 @@
</swp-card>
<swp-card>
<swp-section-label>@Model.LabelAbsenceSickness</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelAbsenceSickness</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row>
<swp-edit-label>@Model.LabelSickDays2025</swp-edit-label>

22
PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml
View file

@ -1,13 +1,13 @@
@model PlanTempus.Application.Features.Employees.Components.EmployeeDetailSalaryViewModel
<swp-detail-grid>
<div>
<swp-card-column>
<!-- Satser (Grundsatser) -->
<swp-card>
<swp-section-header>
<swp-section-label>@Model.LabelRates</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelRates</swp-card-title>
<swp-section-action data-drawer-trigger="rates-drawer">@Model.LabelEdit</swp-section-action>
</swp-section-header>
</swp-card-header>
<swp-edit-section>
<swp-edit-row id="card-normal">
<swp-edit-label>@Model.LabelNormalRate</swp-edit-label>
@ -54,7 +54,9 @@
<!-- Tillæg -->
<swp-card>
<swp-section-label>@Model.LabelSupplements</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelSupplements</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row id="card-weekday">
<swp-edit-label>@Model.LabelWeekdaySupplement</swp-edit-label>
@ -73,7 +75,9 @@
<!-- Provision -->
<swp-card>
<swp-section-label>@Model.LabelCommission</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelCommission</swp-card-title>
</swp-card-header>
<swp-edit-section>
<swp-edit-row id="card-productcommission">
<swp-edit-label>@Model.LabelProductCommission</swp-edit-label>
@ -85,10 +89,12 @@
</swp-edit-row>
</swp-edit-section>
</swp-card>
</div>
</swp-card-column>
<swp-card class="salary-history">
<swp-section-label>@Model.LabelSalaryHistory</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelSalaryHistory</swp-card-title>
</swp-card-header>
<swp-data-table>
<swp-data-table-header>
<swp-data-table-cell>@Model.LabelPeriod</swp-data-table-cell>

4
PlanTempus.Application/Features/Employees/Components/EmployeeDetailServices/Default.cshtml
View file

@ -2,7 +2,9 @@
<swp-detail-grid>
<swp-card>
<swp-section-label>@Model.LabelAssignedServices</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelAssignedServices</swp-card-title>
</swp-card-header>
<swp-service-list>
<swp-service-item>
<swp-service-name>Dameklip</swp-service-name>

8
PlanTempus.Application/Features/Employees/Components/EmployeeDetailStats/Default.cshtml
View file

@ -2,7 +2,9 @@
<swp-detail-grid>
<swp-card>
<swp-section-label>@Model.LabelPerformance</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelPerformance</swp-card-title>
</swp-card-header>
<swp-stats-row>
<swp-stat-card class="teal">
<swp-stat-value>@Model.BookingsThisYear</swp-stat-value>
@ -24,7 +26,9 @@
</swp-card>
<swp-card class="stats-bookings">
<swp-section-label>@Model.LabelCompletedBookings</swp-section-label>
<swp-card-header>
<swp-card-title>@Model.LabelCompletedBookings</swp-card-title>
</swp-card-header>
<swp-data-table>
<swp-data-table-header>
<swp-data-table-cell>@Model.LabelDate</swp-data-table-cell>