c1d2df9327
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
193 lines
8.2 KiB
Text
193 lines
8.2 KiB
Text
@model PlanTempus.Application.Features.Employees.Components.EmployeeDetailHRViewModel
|
|
|
|
<swp-detail-grid>
|
|
<!-- Left column -->
|
|
<swp-card-column>
|
|
<!-- Contract & Documents -->
|
|
<swp-card>
|
|
<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>
|
|
<swp-edit-select>
|
|
<select>
|
|
@foreach (var option in Model.ContractTypeOptions)
|
|
{
|
|
<option selected="@(option == Model.ContractType)">@option</option>
|
|
}
|
|
</select>
|
|
</swp-edit-select>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelTerminationNotice</swp-edit-label>
|
|
<swp-edit-select>
|
|
<select>
|
|
@foreach (var option in Model.TerminationNoticeOptions)
|
|
{
|
|
<option selected="@(option == Model.TerminationNotice)">@option</option>
|
|
}
|
|
</select>
|
|
</swp-edit-select>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelContractExpiry</swp-edit-label>
|
|
<swp-edit-value>@Model.ContractExpiry</swp-edit-value>
|
|
</swp-edit-row>
|
|
</swp-edit-section>
|
|
|
|
<swp-document-list style="margin-top: var(--spacing-6);">
|
|
@foreach (var doc in Model.Documents)
|
|
{
|
|
<swp-document-item>
|
|
<i class="ph ph-file-pdf"></i>
|
|
<swp-document-info>
|
|
<swp-document-name>@doc.Name</swp-document-name>
|
|
<swp-document-meta>@doc.UploadDate</swp-document-meta>
|
|
</swp-document-info>
|
|
<swp-document-actions>
|
|
<swp-btn class="secondary sm">Vis</swp-btn>
|
|
</swp-document-actions>
|
|
</swp-document-item>
|
|
}
|
|
</swp-document-list>
|
|
|
|
<swp-add-button>+ @Model.LabelUploadDocument</swp-add-button>
|
|
</swp-card>
|
|
|
|
<!-- Planned absence -->
|
|
<swp-card>
|
|
<swp-card-header>
|
|
<swp-card-title>@Model.LabelPlannedAbsence</swp-card-title>
|
|
</swp-card-header>
|
|
<swp-simple-list>
|
|
@foreach (var absence in Model.PlannedAbsences)
|
|
{
|
|
<swp-simple-item>
|
|
<swp-simple-item-text>@absence.Dates</swp-simple-item-text>
|
|
<swp-status-badge class="@absence.TypeClass">@absence.Type</swp-status-badge>
|
|
</swp-simple-item>
|
|
}
|
|
</swp-simple-list>
|
|
<swp-add-button>+ @Model.LabelAddAbsence</swp-add-button>
|
|
</swp-card>
|
|
</swp-card-column>
|
|
|
|
<!-- Right column -->
|
|
<swp-card-column>
|
|
<!-- Certifications -->
|
|
<swp-card>
|
|
<swp-card-header>
|
|
<swp-card-title>@Model.LabelCertifications</swp-card-title>
|
|
</swp-card-header>
|
|
<swp-document-list>
|
|
@foreach (var cert in Model.Certifications)
|
|
{
|
|
<swp-document-item>
|
|
<i class="ph ph-certificate"></i>
|
|
<swp-document-info>
|
|
<swp-document-name>@cert.Name</swp-document-name>
|
|
<swp-document-meta>@cert.ExpiryDate</swp-document-meta>
|
|
</swp-document-info>
|
|
<swp-document-actions>
|
|
<swp-status-badge class="@cert.StatusClass">@cert.Status</swp-status-badge>
|
|
</swp-document-actions>
|
|
</swp-document-item>
|
|
}
|
|
</swp-document-list>
|
|
<swp-add-button>+ @Model.LabelAddCertification</swp-add-button>
|
|
</swp-card>
|
|
|
|
<!-- Courses -->
|
|
<swp-card>
|
|
<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>
|
|
@foreach (var course in Model.CompletedCourses)
|
|
{
|
|
<swp-document-item>
|
|
<swp-document-info>
|
|
<swp-document-name>@course.Name</swp-document-name>
|
|
<swp-document-meta>@course.Provider · @course.Date</swp-document-meta>
|
|
</swp-document-info>
|
|
</swp-document-item>
|
|
}
|
|
</swp-document-list>
|
|
</swp-subsection>
|
|
|
|
<swp-subsection>
|
|
<swp-subsection-title>@Model.LabelPlannedCourses</swp-subsection-title>
|
|
<swp-document-list>
|
|
@foreach (var course in Model.PlannedCourses)
|
|
{
|
|
<swp-document-item>
|
|
<swp-document-info>
|
|
<swp-document-name>@course.Name</swp-document-name>
|
|
<swp-document-meta>@course.Provider · @course.Date</swp-document-meta>
|
|
</swp-document-info>
|
|
@if (!string.IsNullOrEmpty(course.Status))
|
|
{
|
|
<swp-document-actions>
|
|
<swp-status-badge class="enrolled">@course.Status</swp-status-badge>
|
|
</swp-document-actions>
|
|
}
|
|
</swp-document-item>
|
|
}
|
|
</swp-document-list>
|
|
</swp-subsection>
|
|
|
|
<swp-add-button>+ @Model.LabelAddCourse</swp-add-button>
|
|
</swp-card>
|
|
</swp-card-column>
|
|
</swp-detail-grid>
|
|
|
|
<!-- Vacation & Absence section -->
|
|
<swp-detail-grid style="margin-top: var(--spacing-8);">
|
|
<swp-card>
|
|
<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>
|
|
<swp-edit-value>@Model.VacationEarned</swp-edit-value>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelVacationUsed</swp-edit-label>
|
|
<swp-edit-value>@Model.VacationUsed</swp-edit-value>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelVacationRemaining</swp-edit-label>
|
|
<swp-edit-value style="font-weight: 600; color: var(--color-teal);">@Model.VacationRemaining</swp-edit-value>
|
|
</swp-edit-row>
|
|
</swp-edit-section>
|
|
</swp-card>
|
|
|
|
<swp-card>
|
|
<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>
|
|
<swp-edit-value>@Model.SickDays2025</swp-edit-value>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelSickDays2024</swp-edit-label>
|
|
<swp-edit-value>@Model.SickDays2024</swp-edit-value>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelChildSickDays2025</swp-edit-label>
|
|
<swp-edit-value>@Model.ChildSickDays2025</swp-edit-value>
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelMaternityLeave</swp-edit-label>
|
|
<swp-edit-value>@Model.MaternityLeave</swp-edit-value>
|
|
</swp-edit-row>
|
|
</swp-edit-section>
|
|
</swp-card>
|
|
</swp-detail-grid>
|