initial commit
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
@page "/organization/employee"
|
||||
@using Indotalent.Features.Organization.Employee
|
||||
@using Indotalent.Features.Organization.Employee.Cqrs
|
||||
@using MudBlazor
|
||||
|
||||
@if (_view == View.Create)
|
||||
{
|
||||
<_EmployeeCreateForm OnCancel="() => _view = View.Table" OnSuccess="() => _view = View.Table" />
|
||||
}
|
||||
else if (_view == View.Update || _view == View.Detail)
|
||||
{
|
||||
<_EmployeeUpdateForm Data="_data!" ReadOnly="@(_view == View.Detail)" OnCancel="() => _view = View.Table" OnSuccess="() => _view = View.Table" />
|
||||
}
|
||||
else if (_view == View.Income)
|
||||
{
|
||||
<_EmployeeIncomeDataTable EmployeeId="@_selectedId" EmployeeName="@_selectedName" EmployeeCode="@_selectedCode" OnBack="() => _view = View.Table" />
|
||||
}
|
||||
else if (_view == View.Deduction)
|
||||
{
|
||||
<_EmployeeDeductionDataTable EmployeeId="@_selectedId" EmployeeName="@_selectedName" EmployeeCode="@_selectedCode" OnBack="() => _view = View.Table" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<_EmployeeDataTable OnAdd="() => _view = View.Create"
|
||||
OnEdit="d => { _data = d; _view = View.Update; }"
|
||||
OnView="d => { _data = d; _view = View.Detail; }"
|
||||
OnIncome="HandleIncome"
|
||||
OnDeduction="HandleDeduction" />
|
||||
}
|
||||
|
||||
@code {
|
||||
private enum View { Table, Create, Update, Detail, Income, Deduction }
|
||||
private View _view = View.Table;
|
||||
private UpdateEmployeeRequest? _data;
|
||||
private string _selectedId = string.Empty;
|
||||
private string _selectedName = string.Empty;
|
||||
private string _selectedCode = string.Empty;
|
||||
|
||||
private void HandleIncome((string Id, string Name, string Code) args)
|
||||
{
|
||||
_selectedId = args.Id;
|
||||
_selectedName = args.Name;
|
||||
_selectedCode = args.Code;
|
||||
_view = View.Income;
|
||||
}
|
||||
|
||||
private void HandleDeduction((string Id, string Name, string Code) args)
|
||||
{
|
||||
_selectedId = args.Id;
|
||||
_selectedName = args.Name;
|
||||
_selectedCode = args.Code;
|
||||
_view = View.Deduction;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
@using Indotalent.Features.Organization.Employee
|
||||
@using Indotalent.Features.Organization.Employee.Cqrs
|
||||
@using Indotalent.Shared.Utils
|
||||
@using MudBlazor
|
||||
@implements IDisposable
|
||||
@inject EmployeeService EmployeeService
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<style>
|
||||
.field-label { font-size: 13px; font-weight: 700; color: #424242; margin-bottom: 4px; display: block; }
|
||||
.section-header { font-weight: 800; color: #0D47A1; letter-spacing: 0.5px; margin-bottom: 8px; }
|
||||
</style>
|
||||
|
||||
<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
|
||||
<div class="d-flex align-center gap-4">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
|
||||
<div>
|
||||
<MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Add New Employee</MudText>
|
||||
<MudText Typo="Typo.body2" Style="color: #64748b;">Create a comprehensive employee profile and organizational placement.</MudText>
|
||||
</div>
|
||||
</div>
|
||||
</MudPaper>
|
||||
|
||||
<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 0px; border: 1px solid #DCEBFA;">
|
||||
@if (_isLoadingData)
|
||||
{
|
||||
<div class="d-flex flex-column align-center pa-10">
|
||||
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
|
||||
<MudText Class="mt-4">Synchronizing Records...</MudText>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudForm @ref="_form" Model="_model">
|
||||
<MudStack Spacing="6">
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12"><div class="section-header">BASIC IDENTITY</div><MudDivider /></MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Employee Code</label>
|
||||
<MudTextField @bind-Value="_model.Code" For="@(() => _model.Code)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Salary Grade</label>
|
||||
<MudSelect @bind-Value="_model.GradeId"
|
||||
For="@(() => _model.GradeId)"
|
||||
Validation="@(_validator.ValidateValue())"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Dense="true"
|
||||
Placeholder="Select Grade">
|
||||
@foreach (var item in _lookupData.Grades)
|
||||
{
|
||||
<MudSelectItem Value="@item.Id">
|
||||
<div class="d-flex justify-space-between w-100 gap-4">
|
||||
<MudText Typo="Typo.body2"><b>@item.Name</b> (@item.Code)</MudText>
|
||||
<MudText Typo="Typo.caption" Style="color: #64748b;">
|
||||
Range: @item.SalaryFrom.ToString("N0") - @item.SalaryTo.ToString("N0")
|
||||
</MudText>
|
||||
</div>
|
||||
</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">First Name</label>
|
||||
<MudTextField @bind-Value="_model.FirstName" For="@(() => _model.FirstName)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Middle Name</label>
|
||||
<MudTextField @bind-Value="_model.MiddleName" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Last Name</label>
|
||||
<MudTextField @bind-Value="_model.LastName" For="@(() => _model.LastName)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">PAYROLL & BANKING</div><MudDivider /></MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Basic Salary (Monthly)</label>
|
||||
<MudNumericField @bind-Value="_model.BasicSalary"
|
||||
For="@(() => _model.BasicSalary)"
|
||||
HideSpinButtons="false"
|
||||
Step="1"
|
||||
Min="0"
|
||||
Format="N0"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Payments"
|
||||
AdornmentColor="Color.Success"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense" />
|
||||
|
||||
@if (!string.IsNullOrEmpty(_model.GradeId))
|
||||
{
|
||||
var selectedGrade = _lookupData.Grades.FirstOrDefault(x => x.Id == _model.GradeId);
|
||||
if (selectedGrade != null)
|
||||
{
|
||||
<MudText Typo="Typo.caption" Color="Color.Info" Class="mt-1">
|
||||
Allowed range: <b>@selectedGrade.SalaryFrom.ToString("N0")</b> - <b>@selectedGrade.SalaryTo.ToString("N0")</b>
|
||||
</MudText>
|
||||
}
|
||||
}
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Salary Bank Name</label>
|
||||
<MudTextField @bind-Value="_model.SalaryBankName" Variant="Variant.Outlined" Margin="Margin.Dense" Placeholder="e.g. BCA" />
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Bank Account Name</label>
|
||||
<MudTextField @bind-Value="_model.SalaryBankAccountName" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Bank Account Number</label>
|
||||
<MudTextField @bind-Value="_model.SalaryBankAccountNumber" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">PERSONAL DETAILS</div><MudDivider /></MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Place of Birth</label>
|
||||
<MudTextField @bind-Value="_model.PlaceOfBirth" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Date of Birth</label>
|
||||
<MudDatePicker @bind-Date="_model.DateOfBirth" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Gender</label>
|
||||
<MudSelect @bind-Value="_model.Gender" For="@(() => _model.Gender)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true">
|
||||
<MudSelectItem Value="@("Male")">Male</MudSelectItem>
|
||||
<MudSelectItem Value="@("Female")">Female</MudSelectItem>
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Marital Status</label>
|
||||
<MudTextField @bind-Value="_model.MaritalStatus" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Religion</label>
|
||||
<MudTextField @bind-Value="_model.Religion" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Identity Number (KTP)</label>
|
||||
<MudTextField @bind-Value="_model.IdentityNumber" For="@(() => _model.IdentityNumber)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Tax Number (NPWP)</label>
|
||||
<MudTextField @bind-Value="_model.TaxNumber" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Blood Type</label>
|
||||
<MudTextField @bind-Value="_model.BloodType" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Last Education</label>
|
||||
<MudTextField @bind-Value="_model.LastEducation" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">ORGANIZATIONAL</div><MudDivider /></MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Branch</label>
|
||||
<MudSelect @bind-Value="_model.BranchId" For="@(() => _model.BranchId)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true">
|
||||
@foreach (var item in _lookupData.Branches) { <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem> }
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Department</label>
|
||||
<MudSelect @bind-Value="_model.DepartmentId" For="@(() => _model.DepartmentId)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true">
|
||||
@foreach (var item in _lookupData.Departments) { <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem> }
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Designation</label>
|
||||
<MudSelect @bind-Value="_model.DesignationId" For="@(() => _model.DesignationId)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true">
|
||||
@foreach (var item in _lookupData.Designations) { <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem> }
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Joined Date</label>
|
||||
<MudDatePicker @bind-Date="_model.JoinedDate" For="@(() => _model.JoinedDate)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Resigned Date</label>
|
||||
<MudDatePicker @bind-Date="_model.ResignedDate" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Employee Status</label>
|
||||
<MudTextField @bind-Value="_model.EmployeeStatus" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Employment Type</label>
|
||||
<MudTextField @bind-Value="_model.EmploymentType" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Job Description</label>
|
||||
<MudTextField @bind-Value="_model.JobDescription" Variant="Variant.Outlined" Margin="Margin.Dense" Lines="2" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">ADDRESS & CONTACT</div><MudDivider /></MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Email</label>
|
||||
<MudTextField @bind-Value="_model.Email" For="@(() => _model.Email)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Phone</label>
|
||||
<MudTextField @bind-Value="_model.Phone" For="@(() => _model.Phone)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Street Address</label>
|
||||
<MudTextField @bind-Value="_model.StreetAddress" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4"><label class="field-label">City</label><MudTextField @bind-Value="_model.City" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Province</label><MudTextField @bind-Value="_model.StateProvince" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Zip Code</label><MudTextField @bind-Value="_model.ZipCode" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">SOCIAL MEDIA</div><MudDivider /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">LinkedIn</label><MudTextField @bind-Value="_model.SocialMediaLinkedIn" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Instagram</label><MudTextField @bind-Value="_model.SocialMediaInstagram" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">TikTok</label><MudTextField @bind-Value="_model.SocialMediaTikTok" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="6"><label class="field-label">Facebook</label><MudTextField @bind-Value="_model.SocialMediaFacebook" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="6"><label class="field-label">X (Twitter)</label><MudTextField @bind-Value="_model.SocialMediaX" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">OTHERS</div><MudDivider /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Other Info 1</label><MudTextField @bind-Value="_model.OtherInformation1" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Other Info 2</label><MudTextField @bind-Value="_model.OtherInformation2" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Other Info 3</label><MudTextField @bind-Value="_model.OtherInformation3" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<div class="d-flex justify-end gap-2 mt-10">
|
||||
<MudButton OnClick="() => OnCancel.InvokeAsync()" Variant="Variant.Outlined" Style="border: 1px solid #e0e0e0; border-radius: 4px; text-transform: none; font-weight: 700;">Cancel</MudButton>
|
||||
<MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 4px; text-transform: none; font-weight: 700;">
|
||||
@if (_processing)
|
||||
{
|
||||
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
|
||||
<MudText Class="ms-2">Creating...</MudText>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText>Create Employee</MudText>
|
||||
}
|
||||
</MudButton>
|
||||
</div>
|
||||
</MudStack>
|
||||
</MudForm>
|
||||
}
|
||||
</MudPaper>
|
||||
|
||||
@code {
|
||||
[Parameter] public EventCallback OnCancel { get; set; }
|
||||
[Parameter] public EventCallback OnSuccess { get; set; }
|
||||
|
||||
private MudForm? _form;
|
||||
private CreateEmployeeRequest _model = new();
|
||||
private CreateEmployeeValidator _validator = new();
|
||||
private LookupResponse _lookupData = new();
|
||||
private bool _processing = false;
|
||||
private bool _isLoadingData = true;
|
||||
private bool _isDisposed = false;
|
||||
|
||||
public void Dispose() => _isDisposed = true;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
try {
|
||||
_isLoadingData = true;
|
||||
var response = await EmployeeService.GetLookupAsync();
|
||||
if (response?.IsSuccess == true)
|
||||
{
|
||||
_lookupData = response.Value ?? new();
|
||||
}
|
||||
} finally {
|
||||
if (!_isDisposed) { _isLoadingData = false; StateHasChanged(); }
|
||||
}
|
||||
}
|
||||
|
||||
private async Task Submit()
|
||||
{
|
||||
await _form!.Validate();
|
||||
if (!_form.IsValid) return;
|
||||
|
||||
_processing = true;
|
||||
try {
|
||||
var res = await EmployeeService.CreateEmployeeAsync(_model);
|
||||
await Task.Delay(500);
|
||||
if (res?.IsSuccess == true)
|
||||
{
|
||||
Snackbar.Add("Employee Created Successfully", Severity.Success);
|
||||
await OnSuccess.InvokeAsync();
|
||||
}
|
||||
} finally { _processing = false; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,457 @@
|
||||
@using Indotalent.ConfigBackEnd.Extensions
|
||||
@using Indotalent.Features.Organization.Employee
|
||||
@using Indotalent.Features.Organization.Employee.Cqrs
|
||||
@using Microsoft.AspNetCore.Components.Web
|
||||
@using Microsoft.JSInterop
|
||||
@using MudBlazor
|
||||
@using Features.Root.Shared
|
||||
@using ClosedXML.Excel
|
||||
@using System.IO
|
||||
@inject EmployeeService EmployeeService
|
||||
@inject IDialogService DialogService
|
||||
@inject ISnackbar Snackbar
|
||||
@inject IJSRuntime JSRuntime
|
||||
|
||||
<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #E5E7EB; border-radius: 12px;">
|
||||
<div>
|
||||
<MudText Typo="Typo.h5" Style="font-weight: 700; color: #111827;">Employee Directory</MudText>
|
||||
<MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Manage human resources and organizational structure.</MudText>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Home" Size="Size.Small" Color="Color.Default" />
|
||||
<MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
|
||||
<MudText Typo="Typo.caption" Style="color: #9CA3AF;">Organization</MudText>
|
||||
<MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
|
||||
<MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Employee</MudText>
|
||||
</div>
|
||||
</MudPaper>
|
||||
|
||||
<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
|
||||
|
||||
<div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<MudTextField @bind-Value="_searchString"
|
||||
Placeholder="Search..."
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Search"
|
||||
IconSize="Size.Small"
|
||||
Class="mt-0"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Style="background-color: white; width: 280px; border-radius: 8px;"
|
||||
OnKeyDown="@HandleSearchKeyDown" />
|
||||
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
OnClick="OnSearchClick"
|
||||
Size="Size.Small"
|
||||
Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px; box-shadow: none; background: #3B82F6; color: white;">
|
||||
Search
|
||||
</MudButton>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 8px; align-items: center;">
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Success"
|
||||
OnClick="ExportToExcel"
|
||||
Size="Size.Small"
|
||||
Disabled="_isExporting"
|
||||
StartIcon="@(_isExporting ? null : Icons.Custom.FileFormats.FileExcel)"
|
||||
Style="border: 1px solid #D1D5DB; background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; color: #6B7280;">
|
||||
@if (_isExporting)
|
||||
{
|
||||
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
|
||||
<MudText Class="ms-2" Typo="Typo.button" Style="text-transform: none !important;">Processing...</MudText>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText Typo="Typo.button" Style="text-transform: none !important;">Excel</MudText>
|
||||
}
|
||||
</MudButton>
|
||||
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
OnClick="LoadData"
|
||||
Size="Size.Small"
|
||||
StartIcon="@(_isRefreshing ? null : Icons.Material.Filled.Refresh)"
|
||||
Disabled="_isRefreshing"
|
||||
Style="border: 1px solid #D1D5DB; background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; color: #6B7280;">
|
||||
@if (_isRefreshing)
|
||||
{
|
||||
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
|
||||
<MudText Class="ms-2" Typo="Typo.button" Style="text-transform: none !important;">Refreshing...</MudText>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText Typo="Typo.button" Style="text-transform: none !important;">Refresh</MudText>
|
||||
}
|
||||
</MudButton>
|
||||
|
||||
@if (_selectedEmp != null)
|
||||
{
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Payments" OnClick="InvokeIncome" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px;">Income</MudButton>
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Warning" StartIcon="@Icons.Material.Filled.PriceCheck" OnClick="InvokeDeduction" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px;">Deduction</MudButton>
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Info" StartIcon="@Icons.Material.Filled.Visibility" OnClick="InvokeView" Size="Size.Small" Style="border: 1px solid #D1D5DB; background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; color: #6B7280;">View</MudButton>
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Edit" OnClick="InvokeEdit" Size="Size.Small" Style="border: 1px solid #D1D5DB; background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; color: #6B7280;">Edit</MudButton>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="OnDelete" Size="Size.Small" Variant="Variant.Filled" Style="border-radius: 6px;" />
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedEmp = null" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="() => OnAdd.InvokeAsync()" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px; background: #3B82F6; color: white;">
|
||||
Add Employee
|
||||
</MudButton>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MudTable Items="@GetPagedData()" Hover="true" Elevation="0" CustomHeader="true" Dense="true" Striped="true" Class="mud-table-styled" T="GetEmployeeListResponse" OnRowClick="@((args) => _selectedEmp = args.Item)" Loading="@_isRefreshing">
|
||||
<HeaderContent>
|
||||
<MudTh Style="width: 50px; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;"></MudTh>
|
||||
<MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
|
||||
<MudTableSortLabel SortBy="new Func<GetEmployeeListResponse, object>(x => x.Code)">Code</MudTableSortLabel>
|
||||
</MudTh>
|
||||
<MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
|
||||
<MudTableSortLabel SortBy="new Func<GetEmployeeListResponse, object>(x => x.FullName)">Full Name</MudTableSortLabel>
|
||||
</MudTh>
|
||||
<MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
|
||||
<MudTableSortLabel SortBy="new Func<GetEmployeeListResponse, object>(x => x.GradeName)">Grade</MudTableSortLabel>
|
||||
</MudTh>
|
||||
<MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
|
||||
<MudTableSortLabel SortBy="new Func<GetEmployeeListResponse, object>(x => x.BasicSalary)">Salary</MudTableSortLabel>
|
||||
</MudTh>
|
||||
<MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
|
||||
<MudTableSortLabel SortBy="new Func<GetEmployeeListResponse, object>(x => x.DesignationName)">Designation</MudTableSortLabel>
|
||||
</MudTh>
|
||||
<MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
|
||||
<MudTableSortLabel SortBy="new Func<GetEmployeeListResponse, object>(x => x.DepartmentName)">Department</MudTableSortLabel>
|
||||
</MudTh>
|
||||
</HeaderContent>
|
||||
<RowTemplate>
|
||||
<MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<MudCheckBox T="bool" Value="@(_selectedEmp?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
|
||||
</MudTd>
|
||||
<MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<MudChip T="string" Size="Size.Small" Variant="Variant.Text" Style="background-color: #F9FAFB; color: #374151; font-weight: 600; border-radius: 4px;">@context.Code</MudChip>
|
||||
</MudTd>
|
||||
<MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<MudAvatar Color="Color.Primary" Size="Size.Small" Style="width: 32px; height: 32px; font-weight: 700; font-size: 0.75rem;">@(!string.IsNullOrWhiteSpace(context.FullName) ? context.FullName.Substring(0, 1) : "?")</MudAvatar>
|
||||
<MudText Typo="Typo.body2" Style="font-weight: 600; color: #374151;">@context.FullName</MudText>
|
||||
</div>
|
||||
</MudTd>
|
||||
<MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<MudText Typo="Typo.body2" Style="color: #6B7280; font-size: 0.875rem;">@context.GradeName</MudText>
|
||||
</MudTd>
|
||||
<MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<MudText Typo="Typo.body2" Style="font-weight: 600; color: #6B7280; font-size: 0.875rem;">@context.BasicSalary?.ToString("N0")</MudText>
|
||||
</MudTd>
|
||||
<MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<MudText Typo="Typo.body2" Style="font-weight: 600; color: #6B7280; font-size: 0.875rem;">@context.DesignationName</MudText>
|
||||
</MudTd>
|
||||
<MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<MudText Typo="Typo.body2" Style="color: #6B7280; font-size: 0.875rem;">@context.DepartmentName</MudText>
|
||||
</MudTd>
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background-color: #F9FAFB; border-top: 1px solid #E5E7EB;">
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<MudText Typo="Typo.caption" Style="font-weight: 500; color: #9CA3AF; font-size: 0.75rem;">Rows per page:</MudText>
|
||||
|
||||
<MudSelect T="int"
|
||||
Value="@_top"
|
||||
ValueChanged="OnPageSizeChanged"
|
||||
Dense="true"
|
||||
Margin="Margin.Dense"
|
||||
Style="width: 80px; background-color: white; font-size: 12px; font-weight: 600;"
|
||||
Variant="Variant.Outlined"
|
||||
Class="mt-0 custom-select-dense">
|
||||
<MudSelectItem Value="5" />
|
||||
<MudSelectItem Value="10" />
|
||||
<MudSelectItem Value="50" />
|
||||
<MudSelectItem Value="500" />
|
||||
<MudSelectItem Value="1000" />
|
||||
</MudSelect>
|
||||
|
||||
<MudText Typo="Typo.caption" Style="font-weight: 500; color: #9CA3AF; font-size: 0.75rem; margin-left: 12px;">
|
||||
Showing @(GetFilteredData().Count() == 0 ? 0 : _skip + 1)-@Math.Min(_skip + _top, GetFilteredData().Count()) of @GetFilteredData().Count()
|
||||
</MudText>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 8px; align-items: center;">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.FirstPage" Size="Size.Small" OnClick="@(() => OnPageChanged(1))" Disabled="@(_currentPage == 1)" Style="@(_currentPage == 1 ? "color: #D1D5DB; background: transparent;" : "color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")" Class="rounded-0" />
|
||||
<MudButton OnClick="@(() => OnPageChanged(_currentPage - 1))" Disabled="@(_currentPage == 1)" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ChevronLeft" Size="Size.Small" Style="@(_currentPage == 1 ? "text-transform: none; font-weight: 500; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; border: 1px solid #D1D5DB; border-radius: 6px;")">Prev</MudButton>
|
||||
@{
|
||||
var totalPages = _totalPage == 0 ? 1 : _totalPage;
|
||||
var maxVisible = 5;
|
||||
var startPage = Math.Max(1, _currentPage - maxVisible / 2);
|
||||
var endPage = Math.Min(totalPages, startPage + maxVisible - 1);
|
||||
if (endPage - startPage < maxVisible - 1) { startPage = Math.Max(1, endPage - maxVisible + 1); }
|
||||
}
|
||||
@for (int i = startPage; i <= endPage; i++)
|
||||
{
|
||||
var pageNum = i;
|
||||
var isActive = pageNum == _currentPage;
|
||||
<MudButton OnClick="@(() => OnPageChanged(pageNum))"
|
||||
Variant="Variant.Text" Size="Size.Small"
|
||||
Style="@(isActive ? "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 600; background: #3B82F6; color: white; border: 1px solid #3B82F6; border-radius: 6px; text-transform: none;" : "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 500; color: #374151; background: white; border: 1px solid #D1D5DB; border-radius: 6px; text-transform: none;")">@pageNum</MudButton>
|
||||
}
|
||||
<MudButton OnClick="@(() => OnPageChanged(_currentPage + 1))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Variant="Variant.Text" EndIcon="@Icons.Material.Filled.ChevronRight" Size="Size.Small" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "text-transform: none; font-weight: 500; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; border: 1px solid #D1D5DB; border-radius: 6px;")">Next</MudButton>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.LastPage" Size="Size.Small" OnClick="@(() => OnPageChanged(_totalPage))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "color: #D1D5DB; background: transparent;" : "color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")" Class="rounded-0" />
|
||||
</div>
|
||||
</div>
|
||||
</MudPaper>
|
||||
|
||||
<script>
|
||||
function downloadFile(fileName, contentType, base64String) {
|
||||
const link = document.createElement('a');
|
||||
link.download = fileName;
|
||||
link.href = `data:${contentType};base64,${base64String}`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mud-input-outlined-border { border-radius: 0px !important; }
|
||||
.custom-select-dense .mud-input-control { margin-top: 0 !important; }
|
||||
.custom-select-dense .mud-input-slot { padding-top: 4px !important; padding-bottom: 4px !important; padding-left: 8px !important; font-size: 12px !important; }
|
||||
.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
|
||||
</style>
|
||||
|
||||
@code {
|
||||
[Parameter] public EventCallback OnAdd { get; set; }
|
||||
[Parameter] public EventCallback<UpdateEmployeeRequest> OnEdit { get; set; }
|
||||
[Parameter] public EventCallback<UpdateEmployeeRequest> OnView { get; set; }
|
||||
[Parameter] public EventCallback<(string Id, string Name, string Code)> OnIncome { get; set; }
|
||||
[Parameter] public EventCallback<(string Id, string Name, string Code)> OnDeduction { get; set; }
|
||||
|
||||
private List<GetEmployeeListResponse> _employees = new();
|
||||
private GetEmployeeListResponse? _selectedEmp;
|
||||
private string _searchString = "";
|
||||
private int _skip = 0;
|
||||
private int _top = 5;
|
||||
private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / (_top == 0 ? 1 : _top));
|
||||
private int _currentPage => (_top >= GetFilteredData().Count() || _top == 0) ? 1 : (_skip / _top) + 1;
|
||||
private bool _isRefreshing = false;
|
||||
private bool _isExporting = false;
|
||||
|
||||
protected override async Task OnInitializedAsync() => await LoadData();
|
||||
|
||||
private async Task LoadData()
|
||||
{
|
||||
_isRefreshing = true; _selectedEmp = null;
|
||||
StateHasChanged();
|
||||
try
|
||||
{
|
||||
var response = await EmployeeService.GetEmployeeListAsync();
|
||||
await Task.Delay(800);
|
||||
if (response?.IsSuccess == true)
|
||||
{
|
||||
_employees = response.Value ?? new();
|
||||
}
|
||||
}
|
||||
finally
|
||||
{
|
||||
_isRefreshing = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private IEnumerable<GetEmployeeListResponse> GetFilteredData()
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(_searchString)) return _employees;
|
||||
return _employees.Where(x =>
|
||||
(x.FullName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
|
||||
(x.Code?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
|
||||
(x.DesignationName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
|
||||
(x.DepartmentName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
|
||||
(x.BranchName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
|
||||
);
|
||||
}
|
||||
|
||||
private IEnumerable<GetEmployeeListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
|
||||
|
||||
private async Task ExportToExcel()
|
||||
{
|
||||
_isExporting = true;
|
||||
StateHasChanged();
|
||||
try
|
||||
{
|
||||
await Task.Delay(1000);
|
||||
using (var workbook = new XLWorkbook())
|
||||
{
|
||||
var worksheet = workbook.Worksheets.Add("Employees");
|
||||
var currentRow = 1;
|
||||
|
||||
worksheet.Cell(currentRow, 1).Value = "Code";
|
||||
worksheet.Cell(currentRow, 2).Value = "Full Name";
|
||||
worksheet.Cell(currentRow, 3).Value = "Grade";
|
||||
worksheet.Cell(currentRow, 4).Value = "Basic Salary";
|
||||
worksheet.Cell(currentRow, 5).Value = "Designation";
|
||||
worksheet.Cell(currentRow, 6).Value = "Department";
|
||||
worksheet.Cell(currentRow, 7).Value = "Branch";
|
||||
|
||||
var headerRange = worksheet.Range(1, 1, 1, 7);
|
||||
headerRange.Style.Font.Bold = true;
|
||||
headerRange.Style.Fill.BackgroundColor = XLColor.FromHtml("#0D47A1");
|
||||
headerRange.Style.Font.FontColor = XLColor.White;
|
||||
|
||||
foreach (var item in GetFilteredData())
|
||||
{
|
||||
currentRow++;
|
||||
worksheet.Cell(currentRow, 1).Value = item.Code;
|
||||
worksheet.Cell(currentRow, 2).Value = item.FullName;
|
||||
worksheet.Cell(currentRow, 3).Value = item.GradeName;
|
||||
worksheet.Cell(currentRow, 4).Value = item.BasicSalary;
|
||||
worksheet.Cell(currentRow, 5).Value = item.DesignationName;
|
||||
worksheet.Cell(currentRow, 6).Value = item.DepartmentName;
|
||||
worksheet.Cell(currentRow, 7).Value = item.BranchName;
|
||||
|
||||
worksheet.Cell(currentRow, 4).Style.NumberFormat.Format = "#,##0";
|
||||
}
|
||||
|
||||
worksheet.Columns().AdjustToContents();
|
||||
|
||||
using (var stream = new MemoryStream())
|
||||
{
|
||||
workbook.SaveAs(stream);
|
||||
var content = Convert.ToBase64String(stream.ToArray());
|
||||
await JSRuntime.InvokeVoidAsync("downloadFile", "Employee_Registry.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", content);
|
||||
Snackbar.Add("Excel exported successfully", Severity.Success);
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Snackbar.Add($"Export failed: {ex.Message}", Severity.Error);
|
||||
}
|
||||
finally
|
||||
{
|
||||
_isExporting = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private void OnSearchClick()
|
||||
{
|
||||
_skip = 0;
|
||||
_selectedEmp = null;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private void HandleSearchKeyDown(KeyboardEventArgs e)
|
||||
{
|
||||
if (e.Key == "Enter") OnSearchClick();
|
||||
}
|
||||
|
||||
private void OnPageChanged(int page)
|
||||
{
|
||||
if (page >= 1 && page <= _totalPage)
|
||||
{
|
||||
_skip = (page - 1) * _top;
|
||||
_selectedEmp = null;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private void OnPageSizeChanged(int size)
|
||||
{
|
||||
_top = size;
|
||||
_skip = 0;
|
||||
_selectedEmp = null;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task InvokeIncome()
|
||||
{
|
||||
if (_selectedEmp == null) return;
|
||||
await OnIncome.InvokeAsync((_selectedEmp.Id!, _selectedEmp.FullName!, _selectedEmp.Code!));
|
||||
}
|
||||
|
||||
private async Task InvokeDeduction()
|
||||
{
|
||||
if (_selectedEmp == null) return;
|
||||
await OnDeduction.InvokeAsync((_selectedEmp.Id!, _selectedEmp.FullName!, _selectedEmp.Code!));
|
||||
}
|
||||
|
||||
private async Task InvokeView()
|
||||
{
|
||||
if (_selectedEmp == null) return;
|
||||
var res = await EmployeeService.GetEmployeeByIdAsync(_selectedEmp.Id);
|
||||
if (res?.Value != null) await OnView.InvokeAsync(Map(res.Value));
|
||||
}
|
||||
|
||||
private async Task InvokeEdit()
|
||||
{
|
||||
if (_selectedEmp == null) return;
|
||||
var res = await EmployeeService.GetEmployeeByIdAsync(_selectedEmp.Id);
|
||||
if (res?.Value != null) await OnEdit.InvokeAsync(Map(res.Value));
|
||||
}
|
||||
|
||||
private UpdateEmployeeRequest Map(GetEmployeeByIdResponse d) => new UpdateEmployeeRequest
|
||||
{
|
||||
Id = d.Id,
|
||||
Code = d.Code,
|
||||
FirstName = d.FirstName,
|
||||
MiddleName = d.MiddleName,
|
||||
LastName = d.LastName,
|
||||
JobDescription = d.JobDescription,
|
||||
GradeId = d.GradeId,
|
||||
BasicSalary = d.BasicSalary,
|
||||
SalaryBankName = d.SalaryBankName,
|
||||
SalaryBankAccountName = d.SalaryBankAccountName,
|
||||
SalaryBankAccountNumber = d.SalaryBankAccountNumber,
|
||||
PlaceOfBirth = d.PlaceOfBirth,
|
||||
DateOfBirth = d.DateOfBirth,
|
||||
Gender = d.Gender,
|
||||
MaritalStatus = d.MaritalStatus,
|
||||
Religion = d.Religion,
|
||||
BloodType = d.BloodType,
|
||||
IdentityNumber = d.IdentityNumber,
|
||||
TaxNumber = d.TaxNumber,
|
||||
LastEducation = d.LastEducation,
|
||||
JoinedDate = d.JoinedDate,
|
||||
ResignedDate = d.ResignedDate,
|
||||
EmployeeStatus = d.EmployeeStatus,
|
||||
EmploymentType = d.EmploymentType,
|
||||
StreetAddress = d.StreetAddress,
|
||||
City = d.City,
|
||||
StateProvince = d.StateProvince,
|
||||
ZipCode = d.ZipCode,
|
||||
Phone = d.Phone,
|
||||
Email = d.Email,
|
||||
BranchId = d.BranchId,
|
||||
DepartmentId = d.DepartmentId,
|
||||
DesignationId = d.DesignationId,
|
||||
SocialMediaLinkedIn = d.SocialMediaLinkedIn,
|
||||
SocialMediaX = d.SocialMediaX,
|
||||
SocialMediaFacebook = d.SocialMediaFacebook,
|
||||
SocialMediaInstagram = d.SocialMediaInstagram,
|
||||
SocialMediaTikTok = d.SocialMediaTikTok,
|
||||
OtherInformation1 = d.OtherInformation1,
|
||||
OtherInformation2 = d.OtherInformation2,
|
||||
OtherInformation3 = d.OtherInformation3,
|
||||
CreatedAt = d.CreatedAt,
|
||||
CreatedBy = d.CreatedBy,
|
||||
UpdatedAt = d.UpdatedAt,
|
||||
UpdatedBy = d.UpdatedBy
|
||||
};
|
||||
|
||||
private async Task OnDelete()
|
||||
{
|
||||
if (_selectedEmp == null) return;
|
||||
var diag = await DialogService.ShowAsync<_DeleteConfirmation>("", new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, _selectedEmp.FullName } });
|
||||
if (!(await diag.Result).Canceled)
|
||||
{
|
||||
if (await EmployeeService.DeleteEmployeeByIdAsync(_selectedEmp.Id))
|
||||
{
|
||||
await LoadData();
|
||||
Snackbar.Add("Employee deleted successfully", Severity.Success);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
@using Indotalent.Features.Organization.Employee
|
||||
@using Indotalent.Features.Organization.Employee.Cqrs
|
||||
@using MudBlazor
|
||||
@inject EmployeeService EmployeeService
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<style>
|
||||
.field-label { font-size: 13px; font-weight: 700; color: #424242; margin-bottom: 4px; display: block; }
|
||||
.section-header { font-weight: 800; color: #E65100; letter-spacing: 0.5px; margin-bottom: 8px; }
|
||||
</style>
|
||||
|
||||
<MudDialog>
|
||||
<TitleContent>
|
||||
<MudText Typo="Typo.h6">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Add" Color="Color.Warning" Class="mr-3 mb-n1" />
|
||||
Add Employee Deduction
|
||||
</MudText>
|
||||
</TitleContent>
|
||||
<DialogContent>
|
||||
<MudForm @ref="_form">
|
||||
<MudStack Spacing="4">
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12"><div class="section-header">DEDUCTION INFORMATION</div><MudDivider /></MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Deduction Component</label>
|
||||
<MudSelect T="string"
|
||||
@bind-Value="_model.DeductionId"
|
||||
Required="true"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Placeholder="Select component"
|
||||
Dense="true"
|
||||
AnchorOrigin="Origin.BottomCenter"
|
||||
TransformOrigin="Origin.TopCenter">
|
||||
@foreach (var item in _lookupData.Deductions)
|
||||
{
|
||||
<MudSelectItem Value="@item.Id">@item.Name (@item.Code)</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Amount</label>
|
||||
<MudNumericField @bind-Value="_model.Amount"
|
||||
Required="true"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Format="N0"
|
||||
HideSpinButtons="false"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.PriceCheck"
|
||||
AdornmentColor="Color.Warning" />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Description</label>
|
||||
<MudTextField @bind-Value="_model.Description"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Lines="2"
|
||||
Placeholder="Optional notes..." />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<MudCheckBox @bind-Value="_model.IsActive"
|
||||
Label="Set as Active Component"
|
||||
Color="Color.Warning"
|
||||
Dense="true" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudStack>
|
||||
</MudForm>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<MudButton OnClick="Cancel" Variant="Variant.Outlined" Style="border: 1px solid #e0e0e0; border-radius: 4px; text-transform: none; font-weight: 700;">Cancel</MudButton>
|
||||
<MudButton Color="Color.Warning"
|
||||
Variant="Variant.Filled"
|
||||
OnClick="Submit"
|
||||
Disabled="_processing"
|
||||
Style="border-radius: 4px; text-transform: none; font-weight: 700;">
|
||||
@if (_processing)
|
||||
{
|
||||
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
|
||||
<MudText Class="ms-2" Typo="Typo.button" Style="text-transform: none !important;">Processing...</MudText>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText>Save Deduction</MudText>
|
||||
}
|
||||
</MudButton>
|
||||
</DialogActions>
|
||||
</MudDialog>
|
||||
|
||||
@code {
|
||||
[CascadingParameter] IMudDialogInstance MudDialog { get; set; } = default!;
|
||||
[Parameter] public string EmployeeId { get; set; } = string.Empty;
|
||||
|
||||
private MudForm? _form;
|
||||
private CreateEmployeeDeductionRequest _model = new() { IsActive = true };
|
||||
private LookupResponse _lookupData = new();
|
||||
private bool _processing = false;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
_model.EmployeeId = EmployeeId;
|
||||
var response = await EmployeeService.GetLookupAsync();
|
||||
if (response?.IsSuccess == true)
|
||||
{
|
||||
_lookupData = response.Value ?? new();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task Submit()
|
||||
{
|
||||
await _form!.Validate();
|
||||
if (!_form.IsValid) return;
|
||||
|
||||
_processing = true;
|
||||
try
|
||||
{
|
||||
var res = await EmployeeService.CreateEmployeeDeductionAsync(_model);
|
||||
await Task.Delay(500);
|
||||
if (res?.IsSuccess == true)
|
||||
{
|
||||
Snackbar.Add("Deduction added successfully", Severity.Success);
|
||||
MudDialog.Close(DialogResult.Ok(true));
|
||||
}
|
||||
}
|
||||
finally { _processing = false; }
|
||||
}
|
||||
|
||||
private void Cancel() => MudDialog.Cancel();
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
@using Indotalent.Features.Organization.Employee
|
||||
@using Indotalent.Features.Organization.Employee.Cqrs
|
||||
@using Features.Root.Shared
|
||||
@using MudBlazor
|
||||
@inject EmployeeService EmployeeService
|
||||
@inject IDialogService DialogService
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #E5E7EB; border-radius: 12px;">
|
||||
<div class="d-flex align-center gap-4">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnBack.InvokeAsync()" />
|
||||
<div>
|
||||
<MudText Typo="Typo.h5" Style="font-weight: 700; color: #111827;">Employee Deduction Details</MudText>
|
||||
<MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">
|
||||
Manage deduction components for <b>@EmployeeName</b> @(!string.IsNullOrEmpty(_displayCode) ? $"({_displayCode})" : "")
|
||||
</MudText>
|
||||
</div>
|
||||
</div>
|
||||
</MudPaper>
|
||||
|
||||
<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
|
||||
|
||||
<div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
|
||||
<MudText Typo="Typo.subtitle1" Style="font-weight: 700;">List of Deductions</MudText>
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Warning"
|
||||
StartIcon="@Icons.Material.Filled.Add"
|
||||
OnClick="OnAdd"
|
||||
Size="Size.Small"
|
||||
Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px;">
|
||||
Add Deduction
|
||||
</MudButton>
|
||||
</div>
|
||||
|
||||
@if (_isLoading)
|
||||
{
|
||||
<div class="d-flex justify-center pa-10">
|
||||
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
|
||||
</div>
|
||||
}
|
||||
else if (!_deductions.Any())
|
||||
{
|
||||
<div class="pa-10 text-center" style="border: 1px dashed #E5E7EB; margin: 24px;">
|
||||
<MudText Typo="Typo.body2" Color="Color.Secondary">No deduction components assigned for this employee.</MudText>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudTable Items="@_deductions" Hover="true" Elevation="0" Dense="true" Striped="true" Class="mud-table-styled">
|
||||
<HeaderContent>
|
||||
<MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Deduction Component</MudTh>
|
||||
<MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Category</MudTh>
|
||||
<MudTh Style="font-weight: 600; text-align: right; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Amount</MudTh>
|
||||
<MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Description</MudTh>
|
||||
<MudTh Style="font-weight: 600; text-align: center; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Status</MudTh>
|
||||
<MudTh Style="font-weight: 600; text-align: center; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Actions</MudTh>
|
||||
</HeaderContent>
|
||||
<RowTemplate>
|
||||
<MudTd DataLabel="Deduction" Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">@context.DeductionName</MudTd>
|
||||
<MudTd DataLabel="Category" Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<MudChip T="string" Size="Size.Small" Variant="Variant.Text" Color="Color.Warning" Style="font-weight: 700;">
|
||||
@context.DeductionCategory
|
||||
</MudChip>
|
||||
</MudTd>
|
||||
<MudTd DataLabel="Amount" Style="text-align: right; font-weight: 700; color: #d32f2f; padding-top: 0.75rem; padding-bottom: 0.75rem;">(@context.Amount.ToString("N0"))</MudTd>
|
||||
<MudTd DataLabel="Description" Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">@context.Description</MudTd>
|
||||
<MudTd DataLabel="Status" Style="text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<MudIcon Icon="@(context.IsActive? Icons.Material.Filled.CheckCircle : Icons.Material.Filled.Cancel)"
|
||||
Color="@(context.IsActive ? Color.Success : Color.Error)" Size="Size.Small" />
|
||||
</MudTd>
|
||||
<MudTd Style="text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<div class="d-flex justify-center gap-1">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Small" Color="Color.Primary" OnClick="@(() => OnEdit(context))" />
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Small" Color="Color.Error" OnClick="@(() => OnDelete(context))" />
|
||||
</div>
|
||||
</MudTd>
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
}
|
||||
</MudPaper>
|
||||
|
||||
<style>
|
||||
.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
|
||||
</style>
|
||||
|
||||
@code {
|
||||
[Parameter] public string EmployeeId { get; set; } = string.Empty;
|
||||
[Parameter] public string EmployeeName { get; set; } = string.Empty;
|
||||
[Parameter] public string EmployeeCode { get; set; } = string.Empty;
|
||||
[Parameter] public EventCallback OnBack { get; set; }
|
||||
|
||||
private List<GetEmployeeDeductionListResponse> _deductions = new();
|
||||
private bool _isLoading = true;
|
||||
private string _displayCode = string.Empty;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
_displayCode = EmployeeCode;
|
||||
await LoadData();
|
||||
}
|
||||
|
||||
private async Task LoadData()
|
||||
{
|
||||
_isLoading = true;
|
||||
StateHasChanged();
|
||||
|
||||
var response = await EmployeeService.GetEmployeeDeductionListAsync(EmployeeId);
|
||||
if (response?.IsSuccess == true)
|
||||
{
|
||||
_deductions = response.Value ?? new();
|
||||
if (_deductions.Any() && string.IsNullOrEmpty(_displayCode))
|
||||
{
|
||||
_displayCode = _deductions.First().EmployeeCode ?? string.Empty;
|
||||
}
|
||||
}
|
||||
|
||||
_isLoading = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task OnAdd()
|
||||
{
|
||||
var parameters = new DialogParameters { ["EmployeeId"] = EmployeeId };
|
||||
var options = new DialogOptions { CloseButton = true, BackdropClick = false };
|
||||
var dialog = await DialogService.ShowAsync<_EmployeeDeductionCreateForm>("Add Employee Deduction", parameters, options);
|
||||
var result = await dialog.Result;
|
||||
if (result != null && !result.Canceled) await LoadData();
|
||||
}
|
||||
|
||||
private async Task OnEdit(GetEmployeeDeductionListResponse context)
|
||||
{
|
||||
var parameters = new DialogParameters { ["Id"] = context.Id };
|
||||
var options = new DialogOptions { CloseButton = true, BackdropClick = false };
|
||||
var dialog = await DialogService.ShowAsync<_EmployeeDeductionUpdateForm>("Edit Employee Deduction", parameters, options);
|
||||
var result = await dialog.Result;
|
||||
if (result != null && !result.Canceled) await LoadData();
|
||||
}
|
||||
|
||||
private async Task OnDelete(GetEmployeeDeductionListResponse context)
|
||||
{
|
||||
var dialog = await DialogService.ShowAsync<_DeleteConfirmation>("", new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, $"{context.DeductionName} from {EmployeeName}" } });
|
||||
var result = await dialog.Result;
|
||||
|
||||
if (result != null && !result.Canceled)
|
||||
{
|
||||
var success = await EmployeeService.DeleteEmployeeDeductionByIdAsync(context.Id!);
|
||||
if (success)
|
||||
{
|
||||
Snackbar.Add("Deduction component removed", Severity.Success);
|
||||
await LoadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
@using Indotalent.Features.Organization.Employee
|
||||
@using Indotalent.Features.Organization.Employee.Cqrs
|
||||
@using MudBlazor
|
||||
@inject EmployeeService EmployeeService
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<style>
|
||||
.field-label { font-size: 13px; font-weight: 700; color: #424242; margin-bottom: 4px; display: block; }
|
||||
.section-header { font-weight: 800; color: #E65100; letter-spacing: 0.5px; margin-bottom: 8px; }
|
||||
</style>
|
||||
|
||||
<MudDialog>
|
||||
<TitleContent>
|
||||
<MudText Typo="Typo.h6">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Edit" Color="Color.Warning" Class="mr-3 mb-n1" />
|
||||
Edit Employee Deduction
|
||||
</MudText>
|
||||
</TitleContent>
|
||||
<DialogContent>
|
||||
@if (_isLoading)
|
||||
{
|
||||
<div class="d-flex flex-column align-center pa-10">
|
||||
<MudProgressCircular Color="Color.Warning" Indeterminate="true" />
|
||||
<MudText Class="mt-4">Fetching Details...</MudText>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudForm @ref="_form">
|
||||
<MudStack Spacing="4">
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12"><div class="section-header">UPDATE DEDUCTION DETAILS</div><MudDivider /></MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Deduction Component</label>
|
||||
<MudTextField Value="@_deductionName"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
ReadOnly="true"
|
||||
Disabled="true"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Lock" />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Amount</label>
|
||||
<MudNumericField @bind-Value="_model.Amount"
|
||||
Required="true"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Format="N0"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.PriceCheck"
|
||||
AdornmentColor="Color.Warning" />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Description</label>
|
||||
<MudTextField @bind-Value="_model.Description"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Lines="2" />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<MudCheckBox @bind-Value="_model.IsActive"
|
||||
Label="Keep this component active"
|
||||
Color="Color.Warning"
|
||||
Dense="true" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudStack>
|
||||
</MudForm>
|
||||
}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<MudButton OnClick="Cancel" Variant="Variant.Outlined" Style="border: 1px solid #e0e0e0; border-radius: 4px; text-transform: none; font-weight: 700;">Cancel</MudButton>
|
||||
<MudButton Color="Color.Warning"
|
||||
Variant="Variant.Filled"
|
||||
OnClick="Submit"
|
||||
Disabled="_processing || _isLoading"
|
||||
Style="border-radius: 4px; text-transform: none; font-weight: 700;">
|
||||
@if (_processing)
|
||||
{
|
||||
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
|
||||
<MudText Class="ms-2">Updating...</MudText>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText>Update Changes</MudText>
|
||||
}
|
||||
</MudButton>
|
||||
</DialogActions>
|
||||
</MudDialog>
|
||||
|
||||
@code {
|
||||
[CascadingParameter] IMudDialogInstance MudDialog { get; set; } = default!;
|
||||
[Parameter] public string Id { get; set; } = string.Empty;
|
||||
|
||||
private MudForm? _form;
|
||||
private UpdateEmployeeDeductionRequest _model = new();
|
||||
private string _deductionName = string.Empty;
|
||||
private bool _isLoading = true;
|
||||
private bool _processing = false;
|
||||
|
||||
protected override async Task OnInitializedAsync() => await LoadData();
|
||||
|
||||
private async Task LoadData()
|
||||
{
|
||||
_isLoading = true;
|
||||
var response = await EmployeeService.GetEmployeeDeductionByIdAsync(Id);
|
||||
if (response?.IsSuccess == true && response.Value != null)
|
||||
{
|
||||
var data = response.Value;
|
||||
_model.Id = data.Id;
|
||||
_model.DeductionId = data.DeductionId;
|
||||
_model.Amount = data.Amount;
|
||||
_model.Description = data.Description;
|
||||
_model.IsActive = data.IsActive;
|
||||
_deductionName = data.DeductionName ?? string.Empty;
|
||||
}
|
||||
_isLoading = false;
|
||||
}
|
||||
|
||||
private async Task Submit()
|
||||
{
|
||||
await _form!.Validate();
|
||||
if (!_form.IsValid) return;
|
||||
|
||||
_processing = true;
|
||||
try
|
||||
{
|
||||
var res = await EmployeeService.UpdateEmployeeDeductionAsync(_model);
|
||||
await Task.Delay(500);
|
||||
if (res?.IsSuccess == true)
|
||||
{
|
||||
Snackbar.Add("Deduction updated successfully", Severity.Success);
|
||||
MudDialog.Close(DialogResult.Ok(true));
|
||||
}
|
||||
}
|
||||
finally { _processing = false; }
|
||||
}
|
||||
|
||||
private void Cancel() => MudDialog.Cancel();
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
@using Indotalent.Features.Organization.Employee
|
||||
@using Indotalent.Features.Organization.Employee.Cqrs
|
||||
@using MudBlazor
|
||||
@inject EmployeeService EmployeeService
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<style>
|
||||
.field-label { font-size: 13px; font-weight: 700; color: #424242; margin-bottom: 4px; display: block; }
|
||||
.section-header { font-weight: 800; color: #0D47A1; letter-spacing: 0.5px; margin-bottom: 8px; }
|
||||
</style>
|
||||
|
||||
<MudDialog>
|
||||
<TitleContent>
|
||||
<MudText Typo="Typo.h6">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Add" Class="mr-3 mb-n1" />
|
||||
Add Employee Income
|
||||
</MudText>
|
||||
</TitleContent>
|
||||
<DialogContent>
|
||||
<MudForm @ref="_form">
|
||||
<MudStack Spacing="4">
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12"><div class="section-header">INCOME INFORMATION</div><MudDivider /></MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Income Component</label>
|
||||
<MudSelect T="string"
|
||||
@bind-Value="_model.IncomeId"
|
||||
Required="true"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Placeholder="Select component"
|
||||
Dense="true"
|
||||
AnchorOrigin="Origin.BottomCenter"
|
||||
TransformOrigin="Origin.TopCenter">
|
||||
@foreach (var item in _lookupData.Incomes)
|
||||
{
|
||||
<MudSelectItem Value="@item.Id">@item.Name (@item.Code)</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Amount</label>
|
||||
<MudNumericField @bind-Value="_model.Amount"
|
||||
Required="true"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Format="N0"
|
||||
HideSpinButtons="false"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Payments"
|
||||
AdornmentColor="Color.Success" />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Description</label>
|
||||
<MudTextField @bind-Value="_model.Description"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Lines="2"
|
||||
Placeholder="Optional notes..." />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<MudCheckBox @bind-Value="_model.IsActive"
|
||||
Label="Set as Active Component"
|
||||
Color="Color.Primary"
|
||||
Dense="true" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudStack>
|
||||
</MudForm>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<MudButton OnClick="Cancel" Variant="Variant.Outlined" Style="border: 1px solid #e0e0e0; border-radius: 4px; text-transform: none; font-weight: 700;">Cancel</MudButton>
|
||||
<MudButton Color="Color.Primary"
|
||||
Variant="Variant.Filled"
|
||||
OnClick="Submit"
|
||||
Disabled="_processing"
|
||||
Style="border-radius: 4px; text-transform: none; font-weight: 700;">
|
||||
@if (_processing)
|
||||
{
|
||||
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
|
||||
<MudText Class="ms-2" Typo="Typo.button" Style="text-transform: none !important;">Processing...</MudText>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText>Save Income</MudText>
|
||||
}
|
||||
</MudButton>
|
||||
</DialogActions>
|
||||
</MudDialog>
|
||||
|
||||
@code {
|
||||
[CascadingParameter] IMudDialogInstance MudDialog { get; set; } = default!;
|
||||
[Parameter] public string EmployeeId { get; set; } = string.Empty;
|
||||
|
||||
private MudForm? _form;
|
||||
private CreateEmployeeIncomeRequest _model = new() { IsActive = true };
|
||||
private LookupResponse _lookupData = new();
|
||||
private bool _processing = false;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
_model.EmployeeId = EmployeeId;
|
||||
var response = await EmployeeService.GetLookupAsync();
|
||||
if (response?.IsSuccess == true)
|
||||
{
|
||||
_lookupData = response.Value ?? new();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task Submit()
|
||||
{
|
||||
await _form!.Validate();
|
||||
if (!_form.IsValid) return;
|
||||
|
||||
_processing = true;
|
||||
try
|
||||
{
|
||||
var res = await EmployeeService.CreateEmployeeIncomeAsync(_model);
|
||||
await Task.Delay(500);
|
||||
if (res?.IsSuccess == true)
|
||||
{
|
||||
Snackbar.Add("Income added successfully", Severity.Success);
|
||||
MudDialog.Close(DialogResult.Ok(true));
|
||||
}
|
||||
}
|
||||
finally
|
||||
{
|
||||
_processing = false;
|
||||
}
|
||||
}
|
||||
|
||||
private void Cancel() => MudDialog.Cancel();
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
@using Indotalent.Features.Organization.Employee
|
||||
@using Indotalent.Features.Organization.Employee.Cqrs
|
||||
@using Features.Root.Shared
|
||||
@using MudBlazor
|
||||
@inject EmployeeService EmployeeService
|
||||
@inject IDialogService DialogService
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #E5E7EB; border-radius: 12px;">
|
||||
<div class="d-flex align-center gap-4">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnBack.InvokeAsync()" />
|
||||
<div>
|
||||
<MudText Typo="Typo.h5" Style="font-weight: 700; color: #111827;">Employee Income Details</MudText>
|
||||
<MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">
|
||||
Manage income components for <b>@EmployeeName</b> @(!string.IsNullOrEmpty(_displayCode) ? $"({_displayCode})" : "")
|
||||
</MudText>
|
||||
</div>
|
||||
</div>
|
||||
</MudPaper>
|
||||
|
||||
<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
|
||||
|
||||
<div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
|
||||
<MudText Typo="Typo.subtitle1" Style="font-weight: 700;">List of Incomes</MudText>
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.Add"
|
||||
OnClick="OnAdd"
|
||||
Size="Size.Small"
|
||||
Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px;">
|
||||
Add Income
|
||||
</MudButton>
|
||||
</div>
|
||||
|
||||
@if (_isLoading)
|
||||
{
|
||||
<div class="d-flex justify-center pa-10">
|
||||
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
|
||||
</div>
|
||||
}
|
||||
else if (!_incomes.Any())
|
||||
{
|
||||
<div class="pa-10 text-center" style="border: 1px dashed #E5E7EB; margin: 24px;">
|
||||
<MudText Typo="Typo.body2" Color="Color.Secondary">No income components assigned for this employee.</MudText>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudTable Items="@_incomes" Hover="true" Elevation="0" Dense="true" Striped="true" Class="mud-table-styled">
|
||||
<HeaderContent>
|
||||
<MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Income Component</MudTh>
|
||||
<MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Type</MudTh>
|
||||
<MudTh Style="font-weight: 600; text-align: right; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Amount</MudTh>
|
||||
<MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Description</MudTh>
|
||||
<MudTh Style="font-weight: 600; text-align: center; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Status</MudTh>
|
||||
<MudTh Style="font-weight: 600; text-align: center; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">Actions</MudTh>
|
||||
</HeaderContent>
|
||||
<RowTemplate>
|
||||
<MudTd DataLabel="Income" Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">@context.IncomeName</MudTd>
|
||||
<MudTd DataLabel="Type" Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<MudChip T="string" Size="Size.Small" Variant="Variant.Text" Color="@(context.IncomeType == "Fixed" ? Color.Info : Color.Warning)" Style="font-weight: 700;">
|
||||
@context.IncomeType
|
||||
</MudChip>
|
||||
</MudTd>
|
||||
<MudTd DataLabel="Amount" Style="text-align: right; font-weight: 700; padding-top: 0.75rem; padding-bottom: 0.75rem;">@context.Amount.ToString("N0")</MudTd>
|
||||
<MudTd DataLabel="Description" Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">@context.Description</MudTd>
|
||||
<MudTd DataLabel="Status" Style="text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<MudIcon Icon="@(context.IsActive? Icons.Material.Filled.CheckCircle : Icons.Material.Filled.Cancel)"
|
||||
Color="@(context.IsActive ? Color.Success : Color.Error)" Size="Size.Small" />
|
||||
</MudTd>
|
||||
<MudTd Style="text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem;">
|
||||
<div class="d-flex justify-center gap-1">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Small" Color="Color.Primary" OnClick="@(() => OnEdit(context))" />
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Small" Color="Color.Error" OnClick="@(() => OnDelete(context))" />
|
||||
</div>
|
||||
</MudTd>
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
}
|
||||
</MudPaper>
|
||||
|
||||
<style>
|
||||
.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
|
||||
</style>
|
||||
|
||||
@code {
|
||||
[Parameter] public string EmployeeId { get; set; } = string.Empty;
|
||||
[Parameter] public string EmployeeName { get; set; } = string.Empty;
|
||||
[Parameter] public string EmployeeCode { get; set; } = string.Empty;
|
||||
[Parameter] public EventCallback OnBack { get; set; }
|
||||
|
||||
private List<GetEmployeeIncomeListResponse> _incomes = new();
|
||||
private bool _isLoading = true;
|
||||
private string _displayCode = string.Empty;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
_displayCode = EmployeeCode;
|
||||
await LoadData();
|
||||
}
|
||||
|
||||
private async Task LoadData()
|
||||
{
|
||||
_isLoading = true;
|
||||
StateHasChanged();
|
||||
|
||||
var response = await EmployeeService.GetEmployeeIncomeListAsync(EmployeeId);
|
||||
if (response?.IsSuccess == true)
|
||||
{
|
||||
_incomes = response.Value ?? new();
|
||||
if (_incomes.Any() && string.IsNullOrEmpty(_displayCode))
|
||||
{
|
||||
_displayCode = _incomes.First().EmployeeCode ?? string.Empty;
|
||||
}
|
||||
}
|
||||
|
||||
_isLoading = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task OnAdd()
|
||||
{
|
||||
var parameters = new DialogParameters { ["EmployeeId"] = EmployeeId };
|
||||
var options = new DialogOptions { CloseButton = true, BackdropClick = false };
|
||||
var dialog = await DialogService.ShowAsync<_EmployeeIncomeCreateForm>("Add Employee Income", parameters, options);
|
||||
var result = await dialog.Result;
|
||||
if (result != null && !result.Canceled) await LoadData();
|
||||
}
|
||||
|
||||
private async Task OnEdit(GetEmployeeIncomeListResponse context)
|
||||
{
|
||||
var parameters = new DialogParameters { ["Id"] = context.Id };
|
||||
var options = new DialogOptions { CloseButton = true, BackdropClick = false };
|
||||
var dialog = await DialogService.ShowAsync<_EmployeeIncomeUpdateForm>("Edit Employee Income", parameters, options);
|
||||
var result = await dialog.Result;
|
||||
if (result != null && !result.Canceled) await LoadData();
|
||||
}
|
||||
|
||||
private async Task OnDelete(GetEmployeeIncomeListResponse context)
|
||||
{
|
||||
var dialog = await DialogService.ShowAsync<_DeleteConfirmation>("", new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, $"{context.IncomeName} from {EmployeeName}" } });
|
||||
var result = await dialog.Result;
|
||||
|
||||
if (result != null && !result.Canceled)
|
||||
{
|
||||
var success = await EmployeeService.DeleteEmployeeIncomeByIdAsync(context.Id!);
|
||||
if (success)
|
||||
{
|
||||
Snackbar.Add("Income component removed", Severity.Success);
|
||||
await LoadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
@using Indotalent.Features.Organization.Employee
|
||||
@using Indotalent.Features.Organization.Employee.Cqrs
|
||||
@using MudBlazor
|
||||
@inject EmployeeService EmployeeService
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<style>
|
||||
.field-label { font-size: 13px; font-weight: 700; color: #424242; margin-bottom: 4px; display: block; }
|
||||
.section-header { font-weight: 800; color: #0D47A1; letter-spacing: 0.5px; margin-bottom: 8px; }
|
||||
</style>
|
||||
|
||||
<MudDialog>
|
||||
<TitleContent>
|
||||
<MudText Typo="Typo.h6">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Edit" Class="mr-3 mb-n1" />
|
||||
Edit Employee Income
|
||||
</MudText>
|
||||
</TitleContent>
|
||||
<DialogContent>
|
||||
@if (_isLoading)
|
||||
{
|
||||
<div class="d-flex flex-column align-center pa-10">
|
||||
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
|
||||
<MudText Class="mt-4">Fetching Details...</MudText>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudForm @ref="_form">
|
||||
<MudStack Spacing="4">
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12"><div class="section-header">UPDATE INCOME DETAILS</div><MudDivider /></MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Income Component</label>
|
||||
<MudTextField Value="@_incomeName"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
ReadOnly="true"
|
||||
Disabled="true"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Lock" />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Amount</label>
|
||||
<MudNumericField @bind-Value="_model.Amount"
|
||||
Required="true"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Format="N0"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Payments"
|
||||
AdornmentColor="Color.Success" />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<label class="field-label">Description</label>
|
||||
<MudTextField @bind-Value="_model.Description"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Lines="2" />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<MudCheckBox @bind-Value="_model.IsActive"
|
||||
Label="Keep this component active"
|
||||
Color="Color.Primary"
|
||||
Dense="true" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudStack>
|
||||
</MudForm>
|
||||
}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<MudButton OnClick="Cancel" Variant="Variant.Outlined" Style="border: 1px solid #e0e0e0; border-radius: 4px; text-transform: none; font-weight: 700;">Cancel</MudButton>
|
||||
<MudButton Color="Color.Primary"
|
||||
Variant="Variant.Filled"
|
||||
OnClick="Submit"
|
||||
Disabled="_processing || _isLoading"
|
||||
Style="border-radius: 4px; text-transform: none; font-weight: 700;">
|
||||
@if (_processing)
|
||||
{
|
||||
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
|
||||
<MudText Class="ms-2">Updating...</MudText>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText>Update Changes</MudText>
|
||||
}
|
||||
</MudButton>
|
||||
</DialogActions>
|
||||
</MudDialog>
|
||||
|
||||
@code {
|
||||
[CascadingParameter] IMudDialogInstance MudDialog { get; set; } = default!;
|
||||
[Parameter] public string Id { get; set; } = string.Empty;
|
||||
|
||||
private MudForm? _form;
|
||||
private UpdateEmployeeIncomeRequest _model = new();
|
||||
private string _incomeName = string.Empty;
|
||||
private bool _isLoading = true;
|
||||
private bool _processing = false;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await LoadData();
|
||||
}
|
||||
|
||||
private async Task LoadData()
|
||||
{
|
||||
_isLoading = true;
|
||||
var response = await EmployeeService.GetEmployeeIncomeByIdAsync(Id);
|
||||
if (response?.IsSuccess == true && response.Value != null)
|
||||
{
|
||||
var data = response.Value;
|
||||
_model.Id = data.Id;
|
||||
_model.IncomeId = data.IncomeId;
|
||||
_model.Amount = data.Amount;
|
||||
_model.Description = data.Description;
|
||||
_model.IsActive = data.IsActive;
|
||||
_incomeName = data.IncomeName;
|
||||
}
|
||||
_isLoading = false;
|
||||
}
|
||||
|
||||
private async Task Submit()
|
||||
{
|
||||
await _form!.Validate();
|
||||
if (!_form.IsValid) return;
|
||||
|
||||
_processing = true;
|
||||
try
|
||||
{
|
||||
var res = await EmployeeService.UpdateEmployeeIncomeAsync(_model);
|
||||
await Task.Delay(500);
|
||||
if (res?.IsSuccess == true)
|
||||
{
|
||||
Snackbar.Add("Income updated successfully", Severity.Success);
|
||||
MudDialog.Close(DialogResult.Ok(true));
|
||||
}
|
||||
}
|
||||
finally
|
||||
{
|
||||
_processing = false;
|
||||
}
|
||||
}
|
||||
|
||||
private void Cancel() => MudDialog.Cancel();
|
||||
}
|
||||
@@ -0,0 +1,285 @@
|
||||
@using Indotalent.ConfigBackEnd.Extensions
|
||||
@using Indotalent.Features.Organization.Employee
|
||||
@using Indotalent.Features.Organization.Employee.Cqrs
|
||||
@using Indotalent.Shared.Utils
|
||||
@using MudBlazor
|
||||
@implements IDisposable
|
||||
@inject EmployeeService EmployeeService
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<style>
|
||||
.field-label { font-size: 13px; font-weight: 700; color: #424242; margin-bottom: 4px; display: block; }
|
||||
.section-header { font-weight: 800; color: #0D47A1; letter-spacing: 0.5px; margin-bottom: 8px; }
|
||||
</style>
|
||||
|
||||
<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
|
||||
<div class="d-flex align-center gap-4">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
|
||||
<div>
|
||||
<MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">@(ReadOnly ? "Employee Profile" : "Edit Employee")</MudText>
|
||||
<MudText Typo="Typo.body2" Style="color: #64748b;">Managing records for @_model.FirstName @_model.LastName</MudText>
|
||||
</div>
|
||||
</div>
|
||||
</MudPaper>
|
||||
|
||||
<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 0px; border: 1px solid #DCEBFA;">
|
||||
@if (_isLoadingData)
|
||||
{
|
||||
<div class="d-flex flex-column align-center pa-10">
|
||||
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
|
||||
<MudText Class="mt-4">Synchronizing Records...</MudText>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudForm @ref="_form" Model="_model">
|
||||
<MudStack Spacing="6">
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12"><div class="section-header">BASIC IDENTITY</div><MudDivider /></MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Employee Code</label>
|
||||
<MudTextField @bind-Value="_model.Code" For="@(() => _model.Code)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Salary Grade</label>
|
||||
<MudSelect @bind-Value="_model.GradeId"
|
||||
For="@(() => _model.GradeId)"
|
||||
Validation="@(_validator.ValidateValue())"
|
||||
ReadOnly="ReadOnly"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense"
|
||||
Dense="true">
|
||||
@foreach (var item in _lookupData.Grades)
|
||||
{
|
||||
<MudSelectItem Value="@item.Id">
|
||||
<div class="d-flex justify-space-between w-100 gap-4">
|
||||
<MudText Typo="Typo.body2"><b>@item.Name</b> (@item.Code)</MudText>
|
||||
<MudText Typo="Typo.caption" Style="color: #64748b;">
|
||||
Range: @item.SalaryFrom.ToString("N0") - @item.SalaryTo.ToString("N0")
|
||||
</MudText>
|
||||
</div>
|
||||
</MudSelectItem>
|
||||
}
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">First Name</label>
|
||||
<MudTextField @bind-Value="_model.FirstName" For="@(() => _model.FirstName)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Middle Name</label>
|
||||
<MudTextField @bind-Value="_model.MiddleName" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Last Name</label>
|
||||
<MudTextField @bind-Value="_model.LastName" For="@(() => _model.LastName)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">PAYROLL & BANKING</div><MudDivider /></MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Basic Salary (Monthly)</label>
|
||||
<MudNumericField @bind-Value="_model.BasicSalary"
|
||||
For="@(() => _model.BasicSalary)"
|
||||
Validation="@(_validator.ValidateValue())"
|
||||
ReadOnly="ReadOnly"
|
||||
HideSpinButtons="false"
|
||||
Step="1"
|
||||
Min="0"
|
||||
Format="N0"
|
||||
Adornment="Adornment.Start"
|
||||
AdornmentIcon="@Icons.Material.Filled.Payments"
|
||||
AdornmentColor="Color.Success"
|
||||
Variant="Variant.Outlined"
|
||||
Margin="Margin.Dense" />
|
||||
|
||||
@if (!string.IsNullOrEmpty(_model.GradeId))
|
||||
{
|
||||
var selectedGrade = _lookupData.Grades.FirstOrDefault(x => x.Id == _model.GradeId);
|
||||
if (selectedGrade != null)
|
||||
{
|
||||
<MudText Typo="Typo.caption" Color="Color.Info" Class="mt-1">
|
||||
Allowed range: <b>@selectedGrade.SalaryFrom.ToString("N0")</b> - <b>@selectedGrade.SalaryTo.ToString("N0")</b>
|
||||
</MudText>
|
||||
}
|
||||
}
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Salary Bank Name</label>
|
||||
<MudTextField @bind-Value="_model.SalaryBankName" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Bank Account Name</label>
|
||||
<MudTextField @bind-Value="_model.SalaryBankAccountName" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Bank Account Number</label>
|
||||
<MudTextField @bind-Value="_model.SalaryBankAccountNumber" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">PERSONAL DETAILS</div><MudDivider /></MudItem>
|
||||
<MudItem xs="6"><label class="field-label">Place of Birth</label><MudTextField @bind-Value="_model.PlaceOfBirth" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="6"><label class="field-label">Date of Birth</label><MudDatePicker @bind-Date="_model.DateOfBirth" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Gender</label>
|
||||
<MudSelect @bind-Value="_model.Gender" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true">
|
||||
<MudSelectItem Value="@("Male")">Male</MudSelectItem>
|
||||
<MudSelectItem Value="@("Female")">Female</MudSelectItem>
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Marital Status</label><MudTextField @bind-Value="_model.MaritalStatus" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Religion</label><MudTextField @bind-Value="_model.Religion" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Identity Number (KTP)</label><MudTextField @bind-Value="_model.IdentityNumber" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Tax Number (NPWP)</label><MudTextField @bind-Value="_model.TaxNumber" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Blood Type</label><MudTextField @bind-Value="_model.BloodType" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="12"><label class="field-label">Last Education</label><MudTextField @bind-Value="_model.LastEducation" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">ORGANIZATIONAL</div><MudDivider /></MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Branch</label>
|
||||
<MudSelect @bind-Value="_model.BranchId" For="@(() => _model.BranchId)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true">
|
||||
@foreach (var item in _lookupData.Branches) { <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem> }
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Department</label>
|
||||
<MudSelect @bind-Value="_model.DepartmentId" For="@(() => _model.DepartmentId)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true">
|
||||
@foreach (var item in _lookupData.Departments) { <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem> }
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="4">
|
||||
<label class="field-label">Designation</label>
|
||||
<MudSelect @bind-Value="_model.DesignationId" For="@(() => _model.DesignationId)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true">
|
||||
@foreach (var item in _lookupData.Designations) { <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem> }
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Joined Date</label><MudDatePicker @bind-Date="_model.JoinedDate" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Resigned Date</label><MudDatePicker @bind-Date="_model.ResignedDate" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Employee Status</label><MudTextField @bind-Value="_model.EmployeeStatus" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="6"><label class="field-label">Employment Type</label><MudTextField @bind-Value="_model.EmploymentType" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="12"><label class="field-label">Job Description</label><MudTextField @bind-Value="_model.JobDescription" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Lines="2" /></MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">ADDRESS & CONTACT</div><MudDivider /></MudItem>
|
||||
<MudItem xs="6">
|
||||
<label class="field-label">Email</label>
|
||||
<MudTextField @bind-Value="_model.Email" For="@(() => _model.Email)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
|
||||
</MudItem>
|
||||
<MudItem xs="6"><label class="field-label">Phone</label><MudTextField @bind-Value="_model.Phone" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="12"><label class="field-label">Street Address</label><MudTextField @bind-Value="_model.StreetAddress" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">City</label><MudTextField @bind-Value="_model.City" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Province</label><MudTextField @bind-Value="_model.StateProvince" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Zip Code</label><MudTextField @bind-Value="_model.ZipCode" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">SOCIAL MEDIA</div><MudDivider /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">LinkedIn</label><MudTextField @bind-Value="_model.SocialMediaLinkedIn" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Instagram</label><MudTextField @bind-Value="_model.SocialMediaInstagram" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">TikTok</label><MudTextField @bind-Value="_model.SocialMediaTikTok" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="6"><label class="field-label">Facebook</label><MudTextField @bind-Value="_model.SocialMediaFacebook" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="6"><label class="field-label">X (Twitter)</label><MudTextField @bind-Value="_model.SocialMediaX" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-2"><div class="section-header">ADDITIONAL</div><MudDivider /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Other Info 1</label><MudTextField @bind-Value="_model.OtherInformation1" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Other Info 2</label><MudTextField @bind-Value="_model.OtherInformation2" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
<MudItem xs="4"><label class="field-label">Other Info 3</label><MudTextField @bind-Value="_model.OtherInformation3" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" /></MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" Class="mt-4">
|
||||
<MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Audit History</MudText>
|
||||
<MudDivider Class="mt-2 mb-4" />
|
||||
</MudItem>
|
||||
<MudItem xs="12" sm="6">
|
||||
<MudText Typo="Typo.subtitle2">Created At</MudText>
|
||||
<MudText Typo="Typo.body2" Style="color: #1a1a1a; font-weight: 600;">@DateTimeExtensions.ToString(_model.CreatedAt)</MudText>
|
||||
</MudItem>
|
||||
<MudItem xs="12" sm="6">
|
||||
<MudText Typo="Typo.subtitle2">Created By</MudText>
|
||||
<MudText Typo="Typo.body2" Style="color: #1a1a1a; font-weight: 600;">@(!string.IsNullOrEmpty(_model.CreatedBy) ? _model.CreatedBy : "System")</MudText>
|
||||
</MudItem>
|
||||
<MudItem xs="12" sm="6">
|
||||
<MudText Typo="Typo.subtitle2">Last Updated At</MudText>
|
||||
<MudText Typo="Typo.body2" Style="color: #1a1a1a; font-weight: 600;">@DateTimeExtensions.ToString(_model.UpdatedAt)</MudText>
|
||||
</MudItem>
|
||||
<MudItem xs="12" sm="6">
|
||||
<MudText Typo="Typo.subtitle2">Last Updated By</MudText>
|
||||
<MudText Typo="Typo.body2" Style="color: #1a1a1a; font-weight: 600;">@(!string.IsNullOrEmpty(_model.UpdatedBy) ? _model.UpdatedBy : "System")</MudText>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<div class="d-flex justify-end gap-2 mt-10">
|
||||
<MudButton OnClick="() => OnCancel.InvokeAsync()" Variant="Variant.Outlined" Style="border: 1px solid #e0e0e0; border-radius: 4px; text-transform: none; font-weight: 700;">@(ReadOnly ? "Back to List" : "Cancel")</MudButton>
|
||||
@if (!ReadOnly)
|
||||
{
|
||||
<MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 4px; text-transform: none; font-weight: 700;">
|
||||
@if (_processing) { <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" /> <MudText Class="ms-2">Updating...</MudText> }
|
||||
else { <MudText>Save Changes</MudText> }
|
||||
</MudButton>
|
||||
}
|
||||
</div>
|
||||
</MudStack>
|
||||
</MudForm>
|
||||
}
|
||||
</MudPaper>
|
||||
|
||||
@code {
|
||||
[Parameter] public UpdateEmployeeRequest Data { get; set; } = new();
|
||||
[Parameter] public bool ReadOnly { get; set; } = false;
|
||||
[Parameter] public EventCallback OnCancel { get; set; }
|
||||
[Parameter] public EventCallback OnSuccess { get; set; }
|
||||
|
||||
private MudForm? _form;
|
||||
private UpdateEmployeeRequest _model = new();
|
||||
private UpdateEmployeeValidator _validator = new();
|
||||
|
||||
private LookupResponse _lookupData = new();
|
||||
private bool _processing = false;
|
||||
private bool _isLoadingData = true;
|
||||
private bool _isDisposed = false;
|
||||
|
||||
public void Dispose() => _isDisposed = true;
|
||||
|
||||
protected override void OnInitialized() { _model = Data; }
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
try {
|
||||
_isLoadingData = true;
|
||||
var response = await EmployeeService.GetLookupAsync();
|
||||
if (response?.IsSuccess == true)
|
||||
{
|
||||
_lookupData = response.Value ?? new();
|
||||
}
|
||||
} finally {
|
||||
if (!_isDisposed) { _isLoadingData = false; StateHasChanged(); }
|
||||
}
|
||||
}
|
||||
|
||||
private async Task Submit()
|
||||
{
|
||||
await _form!.Validate();
|
||||
if (!_form.IsValid) return;
|
||||
|
||||
_processing = true;
|
||||
try {
|
||||
var res = await EmployeeService.UpdateEmployeeAsync(_model);
|
||||
await Task.Delay(500);
|
||||
if (res?.IsSuccess == true)
|
||||
{
|
||||
Snackbar.Add("Updated successfully", Severity.Success);
|
||||
await OnSuccess.InvokeAsync();
|
||||
}
|
||||
} finally { _processing = false; }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user