blazor-hrm/Features/Organization/Employee/Components/_EmployeeDeductionDataTable.razor

@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();
            }
        }
    }
}