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
161 lines
7.4 KiB
Text
161 lines
7.4 KiB
Text
@model PlanTempus.Application.Features.Employees.Components.EmployeeDetailGeneralViewModel
|
|
|
|
<swp-detail-grid>
|
|
<!-- Left column -->
|
|
<swp-card-column>
|
|
<!-- Contact Card -->
|
|
<swp-card>
|
|
<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>
|
|
<input type="text" id="fullname" value="@Model.Name">
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelEmail</swp-edit-label>
|
|
<input type="text" id="email" value="@Model.Email">
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelPhone</swp-edit-label>
|
|
<input type="text" id="phone" value="@Model.Phone">
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelAddress</swp-edit-label>
|
|
<input type="text" id="address" value="@Model.Address">
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelPostalCity</swp-edit-label>
|
|
<input type="text" id="postalcity" value="@Model.PostalCity">
|
|
</swp-edit-row>
|
|
</swp-edit-section>
|
|
</swp-card>
|
|
|
|
<!-- Personal Card -->
|
|
<swp-card>
|
|
<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>
|
|
<input type="text" id="birthdate" value="@Model.BirthDate">
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelEmergencyContact</swp-edit-label>
|
|
<input type="text" id="emergencycontact" value="@Model.EmergencyContact">
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelEmergencyPhone</swp-edit-label>
|
|
<input type="text" id="emergencyphone" value="@Model.EmergencyPhone">
|
|
</swp-edit-row>
|
|
</swp-edit-section>
|
|
</swp-card>
|
|
</swp-card-column>
|
|
|
|
<!-- Right column -->
|
|
<swp-card-column>
|
|
<!-- Employment Card -->
|
|
<swp-card>
|
|
<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>
|
|
<input type="text" id="employmentdate" value="@Model.EmploymentDate">
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelPosition</swp-edit-label>
|
|
<input type="text" id="position" value="@Model.Position">
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelEmploymentType</swp-edit-label>
|
|
<input type="text" id="employmenttype" value="@Model.EmploymentType">
|
|
</swp-edit-row>
|
|
<swp-edit-row>
|
|
<swp-edit-label>@Model.LabelHoursPerWeek</swp-edit-label>
|
|
<input type="text" id="hoursperweek" value="@Model.HoursPerWeek">
|
|
</swp-edit-row>
|
|
</swp-edit-section>
|
|
</swp-card>
|
|
|
|
<!-- Settings Card -->
|
|
<swp-card>
|
|
<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>
|
|
<swp-toggle-description>@Model.SettingShowInBookingDesc</swp-toggle-description>
|
|
</div>
|
|
<swp-toggle-slider data-value="yes">
|
|
<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.SettingEditCalendar</swp-toggle-label>
|
|
<swp-toggle-description>@Model.SettingEditCalendarDesc</swp-toggle-description>
|
|
</div>
|
|
<swp-toggle-slider data-value="yes">
|
|
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
|
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
|
</swp-toggle-slider>
|
|
</swp-toggle-row>
|
|
</swp-card>
|
|
|
|
<!-- Notifications Card -->
|
|
<swp-card>
|
|
<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>
|
|
<swp-toggle-slider data-value="yes">
|
|
<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.NotifOnlineBooking</swp-toggle-label>
|
|
<swp-toggle-slider data-value="yes">
|
|
<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.NotifManualBooking</swp-toggle-label>
|
|
<swp-toggle-slider data-value="yes">
|
|
<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.NotifCancellation</swp-toggle-label>
|
|
<swp-toggle-slider data-value="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.NotifWaitlist</swp-toggle-label>
|
|
<swp-toggle-slider data-value="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.NotifDailySummary</swp-toggle-label>
|
|
<swp-toggle-slider data-value="yes">
|
|
<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>
|