initial commit

2026-07-21 14:08:10 +07:00
commit f7cf118326
533 changed files with 41762 additions and 0 deletions
@@ -0,0 +1,46 @@
+@page "/leave/leave-balance"
+@using Indotalent.Features.Leave.LeaveBalance.Components
+@using Indotalent.Features.Leave.LeaveBalance.Cqrs
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_LeaveBalanceCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_LeaveBalanceUpdateForm Data="_selectedData!" ReadOnly="@(_currentView == ViewMode.View)" OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_LeaveBalanceDataTable OnAdd="() => ShowCreate()" OnEdit="(item) => ShowUpdate(item, false)" OnView="(item) => ShowUpdate(item, true)" />
+}
+
+@code {
+    private enum ViewMode { Table, Create, Update, View }
+    private ViewMode _currentView = ViewMode.Table;
+    private UpdateLeaveBalanceRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdateLeaveBalanceRequest data, bool isReadOnly)
+    {
+        _selectedData = data;
+        _currentView = isReadOnly ? ViewMode.View : ViewMode.Update;
+    }
+
+    private void BackToTable()
+    {
+        _currentView = ViewMode.Table;
+        _selectedData = null;
+    }
+
+    private void HandleSuccess()
+    {
+        _currentView = ViewMode.Table;
+        _selectedData = null;
+    }
+}
@@ -0,0 +1,106 @@
+@using Indotalent.Features.Leave.LeaveBalance
+@using Indotalent.Features.Leave.LeaveBalance.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs 
+@using Indotalent.Features.Leave.LeaveRequest
+@using Indotalent.Features.Leave.LeaveCategory
+@using Indotalent.Features.Leave.LeaveCategory.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject LeaveBalanceService LeaveBalanceService
+@inject LeaveRequestService LeaveRequestService
+@inject LeaveCategoryService LeaveCategoryService
+@inject ISnackbar Snackbar
+
+<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;">Create Leave Balance</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Initialize new leave quota for an employee.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 0px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Employee</MudText>
+                <MudSelect T="string" @bind-Value="_model.EmployeeId" For="@(() => _model.EmployeeId)" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
+                    @foreach (var emp in _employees)
+                    {
+                        <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Leave Type</MudText>
+                <MudSelect T="string" @bind-Value="_model.LeaveCategoryId" For="@(() => _model.LeaveCategoryId)" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
+                    @foreach (var cat in _categories)
+                    {
+                        <MudSelectItem Value="@cat.Id">@cat.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Year</MudText>
+                <MudNumericField @bind-Value="_model.Year" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Entitlement (Quota)</MudText>
+                <MudNumericField @bind-Value="_model.Entitlement" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Carry Forward</MudText>
+                <MudNumericField @bind-Value="_model.CarryForward" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Valid From</MudText>
+                <MudDatePicker @bind-Date="_validFrom" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Valid To</MudText>
+                <MudDatePicker @bind-Date="_validTo" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+        </MudGrid>
+        <div class="d-flex justify-end gap-2 mt-8">
+            <MudButton OnClick="() => OnCancel.InvokeAsync()" Variant="Variant.Outlined" Disabled="_processing" Style="border: 1px solid #e0e0e0;">Cancel</MudButton>
+            <MudButton Color="Color.Warning" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="color:white; font-weight:700;">Create Balance</MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+    private MudForm _form = default!;
+    private CreateLeaveBalanceValidator _validator = new();
+    private CreateLeaveBalanceRequest _model = new() { Year = DateTime.Today.Year, ValidFrom = new DateTime(DateTime.Today.Year, 1, 1), ValidTo = new DateTime(DateTime.Today.Year, 12, 31) };
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private List<GetLeaveCategoryListResponse> _categories = new();
+    private bool _processing = false;
+    private DateTime? _validFrom { get => _model.ValidFrom; set => _model.ValidFrom = value ?? DateTime.Today; }
+    private DateTime? _validTo { get => _model.ValidTo; set => _model.ValidTo = value ?? DateTime.Today; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        var empRes = await LeaveRequestService.GetEmployeeReferenceAsync();
+        if (empRes?.IsSuccess == true) _employees = empRes.Value ?? new();
+        var catRes = await LeaveCategoryService.GetLeaveCategoryListAsync();
+        if (catRes?.IsSuccess == true) _categories = catRes.Value ?? new();
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate(); if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            _model.Remaining = (_model.Entitlement + _model.CarryForward) - _model.Used;
+            var res = await LeaveBalanceService.CreateLeaveBalanceAsync(_model);
+            await Task.Delay(500);
+            if (res?.IsSuccess == true) { Snackbar.Add("Balance created", Severity.Success); await OnSuccess.InvokeAsync(); }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,446 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Leave.LeaveBalance
+@using Indotalent.Features.Leave.LeaveBalance.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject LeaveBalanceService LeaveBalanceService
+@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;">Leave Balances</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Review employee leave entitlements, usage, and remaining days for the current period.</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;">Leave</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Balance</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 (_selectedBalance != null)
+            {
+                <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.Filled" Color="Color.Info" StartIcon="@Icons.Material.Filled.Edit" OnClick="InvokeEdit" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px;">Adjust Balance</MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Size="Size.Small" OnClick="OnDelete" />
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedBalance = null" />
+            }
+            else
+            {
+                <MudButton Variant="Variant.Filled" Color="Color.Info" StartIcon="@Icons.Material.Filled.Calculate" OnClick="OnSyncAll" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px;">
+                    Recalculate All
+                </MudButton>
+                <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;">
+                    Create Manual Balance
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Elevation="0" Striped="true" Class="mud-table-styled" CustomHeader="true" Dense="true" T="GetLeaveBalanceListResponse" OnRowClick="@((args) => _selectedBalance = 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; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveBalanceListResponse, object>(x => x.EmployeeName!)">Employee</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveBalanceListResponse, object>(x => x.LeaveCategoryName!)">Leave Type</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveBalanceListResponse, object>(x => x.Year)">Year</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; text-align: center;">ENTITLEMENT</MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; text-align: center;">USED</MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; text-align: center;">PENDING</MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; text-align: center;">REMAINING</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudCheckBox T="bool" Value="@(_selectedBalance?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <div class="d-flex align-center">
+                    <MudAvatar Color="@GetRandomColor(context.EmployeeName!)" Size="Size.Small" Class="mr-3" Style="font-weight: 700; font-size: 0.75rem;">
+                        @(!string.IsNullOrWhiteSpace(context.EmployeeName) ? context.EmployeeName.Substring(0, 2).ToUpper() : "??")
+                    </MudAvatar>
+                    <div>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@context.EmployeeName</MudText>
+                        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">@context.EmployeeCode</MudText>
+                    </div>
+                </div>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudText Typo="Typo.body2" Style="font-size: 0.8rem;">@context.LeaveCategoryName</MudText>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudText Typo="Typo.body2" Style="font-weight: 600;">@context.Year</MudText>
+            </MudTd>
+            <MudTd Style="text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudText Typo="Typo.body2" Style="font-weight: 600;">@context.Entitlement Days</MudText>
+            </MudTd>
+            <MudTd Style="text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudText Typo="Typo.body2" Style="color: #ef4444; font-weight: 600;">@context.Used</MudText>
+            </MudTd>
+            <MudTd Style="text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudText Typo="Typo.body2" Style="color: #f59e0b; font-weight: 600;">@context.Pending</MudText>
+            </MudTd>
+            <MudTd Style="text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudChip T="string" Size="Size.Small" Variant="Variant.Filled" Color="Color.Success" Style="font-weight: 900; border-radius: 4px; min-width: 60px;">
+                    @context.Remaining
+                </MudChip>
+            </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: #9CA3AF; font-size: 0.75rem;")">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: #9CA3AF; font-size: 0.75rem;")">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<UpdateLeaveBalanceRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateLeaveBalanceRequest> OnView { get; set; }
+
+    private List<GetLeaveBalanceListResponse> _balances = new();
+    private GetLeaveBalanceListResponse? _selectedBalance;
+    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; _selectedBalance = null;
+        StateHasChanged();
+        try
+        {
+            var response = await LeaveBalanceService.GetLeaveBalanceListAsync();
+            await Task.Delay(800);
+            if (response != null && response.IsSuccess)
+            {
+                _balances = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetLeaveBalanceListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _balances;
+        return _balances.Where(x => 
+            (x.EmployeeName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.EmployeeCode?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.LeaveCategoryName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Year.ToString().Contains(_searchString))
+        );
+    }
+
+    private IEnumerable<GetLeaveBalanceListResponse> 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("LeaveBalances");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Employee Name";
+                worksheet.Cell(currentRow, 2).Value = "Employee Code";
+                worksheet.Cell(currentRow, 3).Value = "Leave Type";
+                worksheet.Cell(currentRow, 4).Value = "Year";
+                worksheet.Cell(currentRow, 5).Value = "Entitlement";
+                worksheet.Cell(currentRow, 6).Value = "Used";
+                worksheet.Cell(currentRow, 7).Value = "Pending";
+                worksheet.Cell(currentRow, 8).Value = "Remaining";
+
+                var headerRange = worksheet.Range(1, 1, 1, 8);
+                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.EmployeeName;
+                    worksheet.Cell(currentRow, 2).Value = item.EmployeeCode;
+                    worksheet.Cell(currentRow, 3).Value = item.LeaveCategoryName;
+                    worksheet.Cell(currentRow, 4).Value = item.Year;
+                    worksheet.Cell(currentRow, 5).Value = item.Entitlement;
+                    worksheet.Cell(currentRow, 6).Value = item.Used;
+                    worksheet.Cell(currentRow, 7).Value = item.Pending;
+                    worksheet.Cell(currentRow, 8).Value = item.Remaining;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Leave_Balance_Report.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;
+        _selectedBalance = 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;
+            _selectedBalance = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        _selectedBalance = null;
+        StateHasChanged();
+    }
+
+    private Color GetRandomColor(string name)
+    {
+        int hash = name.GetHashCode();
+        var colors = new[] { Color.Primary, Color.Secondary, Color.Tertiary, Color.Info, Color.Success, Color.Warning, Color.Dark };
+        return colors[Math.Abs(hash) % colors.Length];
+    }
+
+    private async Task OnSyncAll()
+    {
+        _isRefreshing = true;
+        StateHasChanged();
+        try
+        {
+            var success = await LeaveBalanceService.SyncAllLeaveBalancesAsync();
+            if (success)
+            {
+                Snackbar.Add("All balances recalculated successfully", Severity.Success);
+                await LoadData();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedBalance != null)
+        {
+            var res = await LeaveBalanceService.GetLeaveBalanceByIdAsync(_selectedBalance.Id!);
+            if (res?.Value != null) await OnEdit.InvokeAsync(MapToUpdate(res.Value));
+        }
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedBalance != null)
+        {
+            var res = await LeaveBalanceService.GetLeaveBalanceByIdAsync(_selectedBalance.Id!);
+            if (res?.Value != null) await OnView.InvokeAsync(MapToUpdate(res.Value));
+        }
+    }
+
+    private UpdateLeaveBalanceRequest MapToUpdate(GetLeaveBalanceByIdResponse d) => new UpdateLeaveBalanceRequest
+    {
+        Id = d.Id,
+        EmployeeId = d.EmployeeId!,
+        EmployeeName = d.EmployeeName,
+        LeaveCategoryId = d.LeaveCategoryId!,
+        LeaveCategoryName = d.LeaveCategoryName,
+        Entitlement = d.Entitlement,
+        Used = d.Used,
+        Pending = d.Pending,
+        Remaining = d.Remaining,
+        Year = d.Year,
+        ValidFrom = d.ValidFrom,
+        ValidTo = d.ValidTo,
+        CarryForward = d.CarryForward,
+        CreatedAt = d.CreatedAt,
+        CreatedBy = d.CreatedBy,
+        UpdatedAt = d.UpdatedAt,
+        UpdatedBy = d.UpdatedBy
+    };
+
+    private async Task OnDelete()
+    {
+        if (_selectedBalance == null) return;
+        var dialog = await DialogService.ShowAsync<Features.Root.Shared._DeleteConfirmation>("", new DialogParameters<Features.Root.Shared._DeleteConfirmation> { { x => x.ContentText, $"Balance for {_selectedBalance.EmployeeName}" } });
+        if (!(await dialog.Result).Canceled)
+        {
+            if (await LeaveBalanceService.DeleteLeaveBalanceByIdAsync(_selectedBalance.Id!)) { await LoadData(); Snackbar.Add("Balance removed", Severity.Success); }
+        }
+    }
+}
@@ -0,0 +1,198 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Leave.LeaveBalance
+@using Indotalent.Features.Leave.LeaveBalance.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveCategory
+@using Indotalent.Features.Leave.LeaveCategory.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject LeaveBalanceService LeaveBalanceService
+@inject LeaveRequestService LeaveRequestService
+@inject LeaveCategoryService LeaveCategoryService
+@inject ISnackbar Snackbar
+
+<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 ? "Balance Details" : "Adjust Balance")</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Review or modify employee leave quota for the specified period.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 0px; border: 1px solid #DCEBFA;">
+    @if (_isInitialLoading)
+    {
+        <div class="d-flex flex-column align-center justify-center pa-10">
+            <MudProgressCircular Color="Color.Info" Indeterminate="true" Size="Size.Large" />
+            <MudText Typo="Typo.body2" Class="mt-4">Loading balance configuration...</MudText>
+        </div>
+    }
+    else
+    {
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="3">
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Employee</MudText>
+                    <MudSelect T="string" @bind-Value="_model.EmployeeId"
+                               ReadOnly="ReadOnly"
+                               Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
+                        @foreach (var emp in _employees)
+                        {
+                            <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Leave Type</MudText>
+                    <MudSelect T="string" @bind-Value="_model.LeaveCategoryId"
+                               ReadOnly="ReadOnly"
+                               Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
+                        @foreach (var cat in _categories)
+                        {
+                            <MudSelectItem Value="@cat.Id">@cat.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Year</MudText>
+                    <MudNumericField @bind-Value="_model.Year" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Entitlement (Base Quota)</MudText>
+                    <MudNumericField @bind-Value="_model.Entitlement" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Carry Forward</MudText>
+                    <MudNumericField @bind-Value="_model.CarryForward" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Validity Period (From)</MudText>
+                    <MudDatePicker @bind-Date="_validFrom" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Validity Period (To)</MudText>
+                    <MudDatePicker @bind-Date="_validTo" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+
+                <MudItem xs="12" Class="mt-4">
+                    <MudText Typo="Typo.button" Color="Color.Info" Style="font-weight: 800;">Calculation Summary</MudText>
+                    <MudDivider Class="mt-2 mb-4" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Used (Days)</MudText>
+                    <MudNumericField @bind-Value="_model.Used" ReadOnly="true" Variant="Variant.Filled" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Pending (Days)</MudText>
+                    <MudNumericField @bind-Value="_model.Pending" ReadOnly="true" Variant="Variant.Filled" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Remaining Balance</MudText>
+                    <MudNumericField Value="@((_model.Entitlement + _model.CarryForward) - _model.Used - _model.Pending)"
+                                     ReadOnly="true" Variant="Variant.Filled" Margin="Margin.Dense"
+                                     Style="font-weight: 900; color: #2e7d32;" />
+                </MudItem>
+
+                <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">
+                    <MudGrid Spacing="2">
+                        <MudItem xs="12">
+                            <MudText Typo="Typo.subtitle2" Class="mb-1">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">
+                            <MudText Typo="Typo.subtitle2" Class="mb-1">Updated By</MudText>
+                            <MudText Typo="Typo.body2" Style="color: #1a1a1a; font-weight: 600;">@(!string.IsNullOrEmpty(_model.UpdatedBy) ? _model.UpdatedBy : "-")</MudText>
+                        </MudItem>
+                    </MudGrid>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudGrid Spacing="2">
+                        <MudItem xs="12">
+                            <MudText Typo="Typo.subtitle2" Class="mb-1">Created At</MudText>
+                            <MudText Typo="Typo.body2" Style="color: #1a1a1a; font-weight: 600;">@DateTimeExtensions.ToString(_model.CreatedAt)</MudText>
+                        </MudItem>
+                        <MudItem xs="12">
+                            <MudText Typo="Typo.subtitle2" Class="mb-1">Updated At</MudText>
+                            <MudText Typo="Typo.body2" Style="color: #1a1a1a; font-weight: 600;">@DateTimeExtensions.ToString(_model.UpdatedAt)</MudText>
+                        </MudItem>
+                    </MudGrid>
+                </MudItem>
+            </MudGrid>
+
+            <div class="d-flex justify-end gap-2 mt-10">
+                <MudButton OnClick="() => OnCancel.InvokeAsync()" Variant="Variant.Outlined" Disabled="_processing" 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.Info" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 4px; text-transform: none; font-weight: 700; color: white;">
+                        @if (_processing)
+                        {
+                            <MudProgressCircular Size="Size.Small" Indeterminate="true" />
+                        }
+                        else
+                        {
+                            <MudText>Save Adjustments</MudText>
+                        }
+                    </MudButton>
+                }
+            </div>
+        </MudForm>
+    }
+</MudPaper>
+
+@code {
+    [Parameter] public UpdateLeaveBalanceRequest 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 = default!;
+    private UpdateLeaveBalanceValidator _validator = new();
+    private UpdateLeaveBalanceRequest _model = new();
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private List<GetLeaveCategoryListResponse> _categories = new();
+    private bool _processing = false;
+    private bool _isInitialLoading = true;
+
+    private DateTime? _validFrom { get => _model.ValidFrom; set => _model.ValidFrom = value ?? DateTime.Today; }
+    private DateTime? _validTo { get => _model.ValidTo; set => _model.ValidTo = value ?? DateTime.Today; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        _isInitialLoading = true;
+        try
+        {
+            _model = Data;
+            var empRes = await LeaveRequestService.GetEmployeeReferenceAsync();
+            if (empRes?.IsSuccess == true) _employees = empRes.Value ?? new();
+            var catRes = await LeaveCategoryService.GetLeaveCategoryListAsync();
+            if (catRes?.IsSuccess == true) _categories = catRes.Value ?? new();
+        }
+        finally { _isInitialLoading = false; }
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+        await _form.Validate(); if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            _model.Remaining = (_model.Entitlement + _model.CarryForward) - _model.Used - _model.Pending;
+            var response = await LeaveBalanceService.UpdateLeaveBalanceAsync(_model);
+            await Task.Delay(500);
+            if (response?.IsSuccess == true) { Snackbar.Add("Balance adjusted successfully", Severity.Success); await OnSuccess.InvokeAsync(); }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,81 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveBalance.Cqrs;
+
+public class CreateLeaveBalanceRequest
+{
+    public string EmployeeId { get; set; } = string.Empty;
+    public string LeaveCategoryId { get; set; } = string.Empty;
+    public int Entitlement { get; set; }
+    public int Used { get; set; }
+    public int Pending { get; set; }
+    public int Remaining { get; set; }
+    public int Year { get; set; }
+    public DateTime ValidFrom { get; set; }
+    public DateTime ValidTo { get; set; }
+    public int CarryForward { get; set; }
+}
+
+public class CreateLeaveBalanceResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+}
+
+public record CreateLeaveBalanceCommand(CreateLeaveBalanceRequest Data) : IRequest<CreateLeaveBalanceResponse>;
+
+public class CreateLeaveBalanceHandler : IRequestHandler<CreateLeaveBalanceCommand, CreateLeaveBalanceResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateLeaveBalanceHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateLeaveBalanceResponse> Handle(CreateLeaveBalanceCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.LeaveBalance
+            .AnyAsync(x => x.EmployeeId == request.Data.EmployeeId &&
+                           x.LeaveCategoryId == request.Data.LeaveCategoryId &&
+                           x.Year == request.Data.Year, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Leave Balance", $"{request.Data.EmployeeId} for Year {request.Data.Year}");
+        }
+
+        var entityName = nameof(Data.Entities.LeaveBalance);
+
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"{entityName.ToShortNameConsonant(3)}/{{Year}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.LeaveBalance
+        {
+            AutoNumber = autoNo,
+            EmployeeId = request.Data.EmployeeId,
+            LeaveCategoryId = request.Data.LeaveCategoryId,
+            Entitlement = request.Data.Entitlement,
+            Used = request.Data.Used,
+            Pending = request.Data.Pending,
+            Remaining = request.Data.Remaining,
+            Year = request.Data.Year,
+            ValidFrom = request.Data.ValidFrom,
+            ValidTo = request.Data.ValidTo,
+            CarryForward = request.Data.CarryForward
+        };
+
+        _context.LeaveBalance.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateLeaveBalanceResponse
+        {
+            Id = entity.Id,
+            AutoNumber = entity.AutoNumber
+        };
+    }
+}
@@ -0,0 +1,16 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Leave.LeaveBalance.Cqrs;
+
+public class CreateLeaveBalanceValidator : AbstractValidator<CreateLeaveBalanceRequest>
+{
+    public CreateLeaveBalanceValidator()
+    {
+        RuleFor(x => x.EmployeeId).NotEmpty().WithMessage("Employee is required");
+        RuleFor(x => x.LeaveCategoryId).NotEmpty().WithMessage("Leave Category is required");
+        RuleFor(x => x.Year).GreaterThan(2000);
+        RuleFor(x => x.Entitlement).GreaterThanOrEqualTo(0);
+        RuleFor(x => x.ValidFrom).NotEmpty();
+        RuleFor(x => x.ValidTo).NotEmpty().GreaterThanOrEqualTo(x => x.ValidFrom);
+    }
+}
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveBalance.Cqrs;
+
+public record DeleteLeaveBalanceByIdRequest(string Id);
+
+public record DeleteLeaveBalanceByIdCommand(DeleteLeaveBalanceByIdRequest Data) : IRequest<bool>;
+
+public class DeleteLeaveBalanceByIdHandler : IRequestHandler<DeleteLeaveBalanceByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteLeaveBalanceByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteLeaveBalanceByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.LeaveBalance
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.LeaveBalance.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,67 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveBalance.Cqrs;
+
+public class GetLeaveBalanceByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? LeaveCategoryId { get; set; }
+    public string? LeaveCategoryName { get; set; }
+    public int Entitlement { get; set; }
+    public int Used { get; set; }
+    public int Pending { get; set; }
+    public int Remaining { get; set; }
+    public int Year { get; set; }
+    public DateTime ValidFrom { get; set; }
+    public DateTime ValidTo { get; set; }
+    public int CarryForward { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetLeaveBalanceByIdQuery(string Id) : IRequest<GetLeaveBalanceByIdResponse?>;
+
+public class GetLeaveBalanceByIdHandler : IRequestHandler<GetLeaveBalanceByIdQuery, GetLeaveBalanceByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetLeaveBalanceByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetLeaveBalanceByIdResponse?> Handle(GetLeaveBalanceByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.LeaveBalance
+            .AsNoTracking()
+            .Include(x => x.Employee)
+            .Include(x => x.LeaveCategory)
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetLeaveBalanceByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                LeaveCategoryId = x.LeaveCategoryId,
+                LeaveCategoryName = x.LeaveCategory != null ? x.LeaveCategory.Name : string.Empty,
+                Entitlement = x.Entitlement,
+                Used = x.Used,
+                Pending = x.Pending,
+                Remaining = x.Remaining,
+                Year = x.Year,
+                ValidFrom = x.ValidFrom,
+                ValidTo = x.ValidTo,
+                CarryForward = x.CarryForward,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,58 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveBalance.Cqrs;
+
+public class GetLeaveBalanceListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? EmployeeCode { get; set; }
+    public string? LeaveCategoryId { get; set; }
+    public string? LeaveCategoryName { get; set; }
+    public int Entitlement { get; set; }
+    public int Used { get; set; }
+    public int Pending { get; set; }
+    public int Remaining { get; set; }
+    public int Year { get; set; }
+}
+
+public record GetLeaveBalanceListQuery() : IRequest<List<GetLeaveBalanceListResponse>>;
+
+public class GetLeaveBalanceListHandler : IRequestHandler<GetLeaveBalanceListQuery, List<GetLeaveBalanceListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetLeaveBalanceListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetLeaveBalanceListResponse>> Handle(GetLeaveBalanceListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.LeaveBalance
+            .AsNoTracking()
+            .NotDeletedOnly()
+            .Include(x => x.Employee)
+            .Include(x => x.LeaveCategory)
+            .OrderByDescending(x => x.Year)
+            .ThenBy(x => x.Employee!.FirstName)
+            .Select(x => new GetLeaveBalanceListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                EmployeeCode = x.Employee != null ? $"{x.Employee.Code}" : string.Empty,
+                LeaveCategoryId = x.LeaveCategoryId,
+                LeaveCategoryName = x.LeaveCategory != null ? x.LeaveCategory.Name : string.Empty,
+                Entitlement = x.Entitlement,
+                Used = x.Used,
+                Pending = x.Pending,
+                Remaining = x.Remaining,
+                Year = x.Year
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,40 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveBalance.Cqrs;
+
+public record SyncLeaveBalanceCommand() : IRequest<bool>;
+
+public class SyncLeaveBalanceHandler : IRequestHandler<SyncLeaveBalanceCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public SyncLeaveBalanceHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(SyncLeaveBalanceCommand request, CancellationToken cancellationToken)
+    {
+        var balances = await _context.LeaveBalance.ToListAsync(cancellationToken);
+
+        if (!balances.Any()) return true;
+
+        var allRequests = await _context.LeaveRequest
+            .AsNoTracking()
+            .ToListAsync(cancellationToken);
+
+        foreach (var balance in balances)
+        {
+            var empRequests = allRequests
+                .Where(x => x.EmployeeId == balance.EmployeeId &&
+                            x.LeaveCategoryId == balance.LeaveCategoryId &&
+                            x.StartDate.Year == balance.Year)
+                .ToList();
+
+            balance.Used = (int)empRequests.Where(x => x.Status == "Approved").Sum(x => x.Days);
+            balance.Pending = (int)empRequests.Where(x => x.Status == "Pending").Sum(x => x.Days);
+            balance.Remaining = (balance.Entitlement + balance.CarryForward) - balance.Used;
+        }
+
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,61 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveBalance.Cqrs;
+
+public class UpdateLeaveBalanceRequest : CreateLeaveBalanceRequest
+{
+    public string? Id { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? LeaveCategoryName { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateLeaveBalanceResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateLeaveBalanceCommand(UpdateLeaveBalanceRequest Data) : IRequest<UpdateLeaveBalanceResponse>;
+
+public class UpdateLeaveBalanceHandler : IRequestHandler<UpdateLeaveBalanceCommand, UpdateLeaveBalanceResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateLeaveBalanceHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateLeaveBalanceResponse> Handle(UpdateLeaveBalanceCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.LeaveBalance
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateLeaveBalanceResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.EmployeeId = request.Data.EmployeeId;
+        entity.LeaveCategoryId = request.Data.LeaveCategoryId;
+        entity.Entitlement = request.Data.Entitlement;
+        entity.Used = request.Data.Used;
+        entity.Pending = request.Data.Pending;
+        entity.Remaining = request.Data.Remaining;
+        entity.Year = request.Data.Year;
+        entity.ValidFrom = request.Data.ValidFrom;
+        entity.ValidTo = request.Data.ValidTo;
+        entity.CarryForward = request.Data.CarryForward;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateLeaveBalanceResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,15 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Leave.LeaveBalance.Cqrs;
+
+public class UpdateLeaveBalanceValidator : AbstractValidator<UpdateLeaveBalanceRequest>
+{
+    public UpdateLeaveBalanceValidator()
+    {
+        RuleFor(x => x.Id).NotEmpty().WithMessage("ID is required for update");
+        RuleFor(x => x.EmployeeId).NotEmpty().WithMessage("Employee is required");
+        RuleFor(x => x.LeaveCategoryId).NotEmpty().WithMessage("Leave Category is required");
+        RuleFor(x => x.Year).GreaterThan(2000);
+        RuleFor(x => x.Entitlement).GreaterThanOrEqualTo(0);
+    }
+}
@@ -0,0 +1,62 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Leave.LeaveBalance.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Leave.LeaveBalance;
+
+public static class LeaveBalanceEndpoint
+{
+    public static void MapLeaveBalanceEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/leave-balance").WithTags("Leave Balances")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetLeaveBalanceListQuery());
+            return result.ToApiResponse("Data leave balance retrieved successfully");
+        })
+        .WithName("GetLeaveBalanceList");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetLeaveBalanceByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Leave balance detail retrieved successfully"
+                : $"Leave balance with ID {id} not found");
+        })
+        .WithName("GetLeaveBalanceById");
+
+        group.MapPost("/", async (CreateLeaveBalanceRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateLeaveBalanceCommand(request));
+            return result.ToApiResponse("Leave balance has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateLeaveBalance");
+
+        group.MapPost("/update", async (UpdateLeaveBalanceRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateLeaveBalanceCommand(request));
+            if (!result.Success) return ((object?)null).ToApiResponse("Update failed.");
+            return result.ToApiResponse("Leave balance has been updated successfully");
+        })
+        .WithName("UpdateLeaveBalance");
+
+        group.MapPost("/sync", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new SyncLeaveBalanceCommand());
+            return result.ToApiResponse("All leave balances recalculated successfully");
+        })
+        .WithName("SyncLeaveBalance");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteLeaveBalanceByIdCommand(new DeleteLeaveBalanceByIdRequest(id)));
+            if (!result) return ((object?)null).ToApiResponse("Delete failed.");
+            return true.ToApiResponse("Leave balance has been deleted successfully");
+        })
+        .WithName("DeleteLeaveBalanceById");
+    }
+}
@@ -0,0 +1,61 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Leave.LeaveBalance.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Leave.LeaveBalance;
+
+public class LeaveBalanceService : BaseService
+{
+    private readonly RestClient _client;
+
+    public LeaveBalanceService(IHttpClientFactory clientFactory, NavigationManager nav, ISnackbar snackbar, ICurrentUserService currentUserService, TokenProvider tokenProvider)
+            : base(clientFactory, nav, snackbar, currentUserService, tokenProvider)
+    {
+        _client = new RestClient(nav.BaseUri);
+    }
+
+    public async Task<ApiResponse<List<GetLeaveBalanceListResponse>>?> GetLeaveBalanceListAsync()
+    {
+        var request = new RestRequest("api/leave-balance", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetLeaveBalanceListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetLeaveBalanceByIdResponse>?> GetLeaveBalanceByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/leave-balance/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetLeaveBalanceByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateLeaveBalanceResponse>?> CreateLeaveBalanceAsync(CreateLeaveBalanceRequest data)
+    {
+        var request = new RestRequest("api/leave-balance", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateLeaveBalanceResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<UpdateLeaveBalanceResponse>?> UpdateLeaveBalanceAsync(UpdateLeaveBalanceRequest data)
+    {
+        var request = new RestRequest("api/leave-balance/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateLeaveBalanceResponse>(_client, request);
+    }
+
+    public async Task<bool> SyncAllLeaveBalancesAsync()
+    {
+        var request = new RestRequest("api/leave-balance/sync", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<bool> DeleteLeaveBalanceByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/leave-balance/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+}
@@ -0,0 +1,35 @@
+@page "/leave/leave-category"
+@using Indotalent.Features.Leave.LeaveCategory.Components
+@using Indotalent.Features.Leave.LeaveCategory.Cqrs
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_LeaveCategoryCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_LeaveCategoryUpdateForm Data="_selectedData!" ReadOnly="@(_currentView == ViewMode.View)" OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_LeaveCategoryDataTable OnAdd="() => ShowCreate()" OnEdit="(item) => ShowUpdate(item, false)" OnView="(item) => ShowUpdate(item, true)" />
+}
+
+@code {
+    private enum ViewMode { Table, Create, Update, View }
+    private ViewMode _currentView = ViewMode.Table;
+    private UpdateLeaveCategoryRequest? _selectedData;
+
+    private void ShowCreate() => _currentView = ViewMode.Create;
+
+    private void ShowUpdate(UpdateLeaveCategoryRequest data, bool isReadOnly)
+    {
+        _selectedData = data;
+        _currentView = isReadOnly ? ViewMode.View : ViewMode.Update;
+    }
+
+    private void BackToTable() { _currentView = ViewMode.Table; _selectedData = null; }
+
+    private void HandleSuccess() { _currentView = ViewMode.Table; _selectedData = null; }
+}
@@ -0,0 +1,117 @@
+@using Indotalent.Features.Leave.LeaveCategory
+@using Indotalent.Features.Leave.LeaveCategory.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject LeaveCategoryService LeaveCategoryService
+@inject ISnackbar Snackbar
+
+<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 Leave Category</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Define new leave type and its entitlement rules.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 0px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Category Code</MudText>
+                <MudTextField @bind-Value="_model.Code"
+                              For="@(() => _model.Code)"
+                              Validation="@(_validator.ValidateValue())"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Placeholder="e.g. LV-AL" />
+            </MudItem>
+            <MudItem xs="12" sm="8">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Category Name</MudText>
+                <MudTextField @bind-Value="_model.Name"
+                              For="@(() => _model.Name)"
+                              Validation="@(_validator.ValidateValue())"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Placeholder="e.g. Annual Leave" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Quota (Days)</MudText>
+                <MudNumericField @bind-Value="_model.Quota" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Min="0" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Status</MudText>
+                <MudSelect @bind-Value="_model.Status" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter">
+                    <MudSelectItem Value="@("Active")">Active</MudSelectItem>
+                    <MudSelectItem Value="@("Inactive")">Inactive</MudSelectItem>
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="4" Class="d-flex align-center">
+                <MudCheckBox @bind-Value="_model.IsPaidLeave" Label="Paid Leave" Color="Color.Success" />
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Lines="2" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudCheckBox @bind-Value="_model.AllowCarryForward" Label="Allow Carry Forward" Color="Color.Primary" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Max Carry Forward</MudText>
+                <MudNumericField @bind-Value="_model.MaxCarryForward" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Disabled="!_model.AllowCarryForward" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Min Service (Months)</MudText>
+                <MudNumericField @bind-Value="_model.MinServiceMonths" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+        </MudGrid>
+
+        <div class="d-flex justify-end gap-2 mt-8">
+            <MudButton OnClick="() => OnCancel.InvokeAsync()" Variant="Variant.Outlined" Disabled="_processing" Style="border: 1px solid #e0e0e0; border-radius: 4px; text-transform: none; font-weight: 700;">Cancel</MudButton>
+            <MudButton Color="Color.Success" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 4px; text-transform: none; font-weight: 700; color: white;">
+                @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>Create Category</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreateLeaveCategoryValidator _validator = new();
+    private CreateLeaveCategoryRequest _model = new() { Status = "Active", IsPaidLeave = true };
+    private bool _processing = false;
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await LeaveCategoryService.CreateLeaveCategoryAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Leave category created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,390 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Leave.LeaveCategory
+@using Indotalent.Features.Leave.LeaveCategory.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject LeaveCategoryService LeaveCategoryService
+@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;">Leave Categories</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Manage leave types, quotas, and entitlement rules for employees.</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;">Leave</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Category</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 (_selectedCategory != null)
+            {
+                <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>
+                <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.Delete" OnClick="OnDelete" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px;">Remove</MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedCategory = null" />
+            }
+            else
+            {
+                <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.AddCircle" OnClick="() => OnAdd.InvokeAsync()" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px; color: white; height: 34px;">
+                    Create Leave Category
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Elevation="0" Striped="true" Class="mud-table-styled" CustomHeader="true" Dense="true" T="GetLeaveCategoryListResponse" OnRowClick="@((args) => _selectedCategory = 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; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveCategoryListResponse, object>(x => x.Code!)">Code</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveCategoryListResponse, object>(x => x.Name!)">Category Name</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveCategoryListResponse, object>(x => x.Quota)">Quota</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveCategoryListResponse, object>(x => x.IsPaidLeave)">Paid Leave</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveCategoryListResponse, object>(x => x.Description!)">Description</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveCategoryListResponse, object>(x => x.Status!)">Status</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudCheckBox T="bool" Value="@(_selectedCategory?.Id == context.Id)" Color="Color.Success" 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;">
+                <MudText Typo="Typo.body2" Style="font-weight: 600; color: #374151;">@context.Name</MudText>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudText Typo="Typo.body2" Style="font-weight: 600; color: #374151;">@context.Quota Days</MudText>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudIcon Icon="@(context.IsPaidLeave? Icons.Material.Filled.AttachMoney : Icons.Material.Filled.MoneyOff)" Color="@(context.IsPaidLeave? Color.Success: Color.Error)" Size="Size.Small" />
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.8rem;">@context.Description</MudText>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudChip T="string" Color="@(context.Status == "Active" ? Color.Success : Color.Default)" Size="Size.Small" Variant="Variant.Text" Style="font-weight: 800; border-radius: 0px; text-transform: uppercase; background-color: #f5f5f5; height: 20px; font-size: 0.7rem;">@context.Status</MudChip>
+            </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: #9CA3AF; font-size: 0.75rem;")">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: #9CA3AF; font-size: 0.75rem;")">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<UpdateLeaveCategoryRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateLeaveCategoryRequest> OnView { get; set; }
+
+    private List<GetLeaveCategoryListResponse> _categories = new();
+    private GetLeaveCategoryListResponse? _selectedCategory;
+    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;
+        _selectedCategory = null;
+        StateHasChanged();
+        
+        try
+        {
+            var response = await LeaveCategoryService.GetLeaveCategoryListAsync();
+            await Task.Delay(500);
+            
+            if (response != null && response.IsSuccess)
+            {
+                _categories = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetLeaveCategoryListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _categories;
+        return _categories.Where(x => 
+            (x.Name?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Code?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Description?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Status?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetLeaveCategoryListResponse> 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("LeaveCategories");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Code";
+                worksheet.Cell(currentRow, 2).Value = "Name";
+                worksheet.Cell(currentRow, 3).Value = "Quota";
+                worksheet.Cell(currentRow, 4).Value = "Is Paid Leave";
+                worksheet.Cell(currentRow, 5).Value = "Status";
+                worksheet.Cell(currentRow, 6).Value = "Description";
+
+                var headerRange = worksheet.Range(1, 1, 1, 6);
+                headerRange.Style.Font.Bold = true;
+                headerRange.Style.Fill.BackgroundColor = XLColor.FromHtml("#166534");
+                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.Name;
+                    worksheet.Cell(currentRow, 3).Value = item.Quota;
+                    worksheet.Cell(currentRow, 4).Value = item.IsPaidLeave ? "Yes" : "No";
+                    worksheet.Cell(currentRow, 5).Value = item.Status;
+                    worksheet.Cell(currentRow, 6).Value = item.Description;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Leave_Category_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;
+        _selectedCategory = 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;
+            _selectedCategory = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        _selectedCategory = null;
+        StateHasChanged();
+    }
+
+    private async Task InvokeEdit() { if (_selectedCategory != null) { var res = await LeaveCategoryService.GetLeaveCategoryByIdAsync(_selectedCategory.Id!); if (res?.Value != null) await OnEdit.InvokeAsync(MapToUpdate(res.Value)); } }
+
+    private async Task InvokeView() { if (_selectedCategory != null) { var res = await LeaveCategoryService.GetLeaveCategoryByIdAsync(_selectedCategory.Id!); if (res?.Value != null) await OnView.InvokeAsync(MapToUpdate(res.Value)); } }
+
+    private UpdateLeaveCategoryRequest MapToUpdate(GetLeaveCategoryByIdResponse d) => new UpdateLeaveCategoryRequest
+    {
+        Id = d.Id,
+        Code = d.Code,
+        Name = d.Name,
+        Quota = d.Quota,
+        IsPaidLeave = d.IsPaidLeave,
+        Description = d.Description ?? "",
+        Status = d.Status ?? "Active",
+        AllowCarryForward = d.AllowCarryForward,
+        MaxCarryForward = d.MaxCarryForward,
+        MinServiceMonths = d.MinServiceMonths,
+        CreatedAt = d.CreatedAt,
+        CreatedBy = d.CreatedBy,
+        UpdatedAt = d.UpdatedAt,
+        UpdatedBy = d.UpdatedBy
+    };
+
+    private async Task OnDelete()
+    {
+        if (_selectedCategory == null) return;
+        var dialog = await DialogService.ShowAsync<Features.Root.Shared._DeleteConfirmation>("", new DialogParameters<Features.Root.Shared._DeleteConfirmation> { { x => x.ContentText, _selectedCategory.Name } });
+        if (!(await dialog.Result).Canceled)
+        {
+            if (await LeaveCategoryService.DeleteLeaveCategoryByIdAsync(_selectedCategory.Id!)) { await LoadData(); Snackbar.Add("Category deleted", Severity.Success); }
+        }
+    }
+}
@@ -0,0 +1,160 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Leave.LeaveCategory
+@using Indotalent.Features.Leave.LeaveCategory.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject LeaveCategoryService LeaveCategoryService
+@inject ISnackbar Snackbar
+
+<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 ? "Category Details" : "Edit Category")</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">@(ReadOnly ? "Viewing policy configuration." : "Modify existing leave entitlement rules.")</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 0px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Category Code</MudText>
+                <MudTextField @bind-Value="_model.Code" For="@(() => _model.Code)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="8">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Category Name</MudText>
+                <MudTextField @bind-Value="_model.Name" For="@(() => _model.Name)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Quota (Days)</MudText>
+                <MudNumericField @bind-Value="_model.Quota" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Status</MudText>
+                <MudSelect @bind-Value="_model.Status" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter">
+                    <MudSelectItem Value="@("Active")">Active</MudSelectItem>
+                    <MudSelectItem Value="@("Inactive")">Inactive</MudSelectItem>
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="4" Class="d-flex align-center">
+                <MudCheckBox @bind-Value="_model.IsPaidLeave" Label="Paid Leave" Color="Color.Success" ReadOnly="ReadOnly" />
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Lines="2" />
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <MudCheckBox @bind-Value="_model.AllowCarryForward" Label="Allow Carry Forward" Color="Color.Primary" ReadOnly="ReadOnly" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Max Carry Forward</MudText>
+                <MudNumericField @bind-Value="_model.MaxCarryForward" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" ReadOnly="ReadOnly" Disabled="!_model.AllowCarryForward" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Min Service (Months)</MudText>
+                <MudNumericField @bind-Value="_model.MinServiceMonths" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" ReadOnly="ReadOnly" />
+            </MudItem>
+
+            <MudItem xs="12" Class="mt-4">
+                <MudText Typo="Typo.button" Color="Color.Success" 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" Disabled="_processing" 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.Success" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 4px; text-transform: none; font-weight: 700; color: white;">
+                    @if (_processing)
+                    {
+                        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                        <MudText Class="ms-2">Updating...</MudText>
+                    }
+                    else
+                    {
+                        <MudText>Save Changes</MudText>
+                    }
+                </MudButton>
+            }
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public UpdateLeaveCategoryRequest 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 = default!;
+    private UpdateLeaveCategoryValidator _validator = new();
+    private UpdateLeaveCategoryRequest _model = new();
+    private bool _processing = false;
+
+    protected override void OnInitialized()
+    {
+        _model = new UpdateLeaveCategoryRequest
+        {
+            Id = Data.Id,
+            Code = Data.Code,
+            Name = Data.Name,
+            Quota = Data.Quota,
+            IsPaidLeave = Data.IsPaidLeave,
+            Description = Data.Description,
+            Status = Data.Status,
+            AllowCarryForward = Data.AllowCarryForward,
+            MaxCarryForward = Data.MaxCarryForward,
+            MinServiceMonths = Data.MinServiceMonths,
+            CreatedAt = Data.CreatedAt,
+            CreatedBy = Data.CreatedBy,
+            UpdatedAt = Data.UpdatedAt,
+            UpdatedBy = Data.UpdatedBy
+        };
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await LeaveCategoryService.UpdateLeaveCategoryAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Category updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,77 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveCategory.Cqrs;
+
+public class CreateLeaveCategoryRequest
+{
+    public string? Code { get; set; }
+    public string? Name { get; set; }
+    public int Quota { get; set; }
+    public bool IsPaidLeave { get; set; }
+    public string Description { get; set; } = string.Empty;
+    public string Status { get; set; } = string.Empty;
+    public bool AllowCarryForward { get; set; }
+    public int MaxCarryForward { get; set; }
+    public int MinServiceMonths { get; set; }
+}
+
+public class CreateLeaveCategoryResponse
+{
+    public string? Id { get; set; }
+    public string? Code { get; set; }
+}
+
+public record CreateLeaveCategoryCommand(CreateLeaveCategoryRequest Data) : IRequest<CreateLeaveCategoryResponse>;
+
+public class CreateLeaveCategoryHandler : IRequestHandler<CreateLeaveCategoryCommand, CreateLeaveCategoryResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateLeaveCategoryHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateLeaveCategoryResponse> Handle(CreateLeaveCategoryCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.LeaveCategory
+            .AnyAsync(x => x.Code == request.Data.Code, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Leave Category", request.Data.Code ?? string.Empty);
+        }
+
+        var entityName = nameof(Data.Entities.LeaveCategory);
+
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"{entityName.ToShortNameConsonant(3)}/{{Year}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.LeaveCategory
+        {
+            AutoNumber = autoNo,
+            Code = request.Data.Code,
+            Name = request.Data.Name,
+            Quota = request.Data.Quota,
+            IsPaidLeave = request.Data.IsPaidLeave,
+            Description = request.Data.Description,
+            Status = request.Data.Status,
+            AllowCarryForward = request.Data.AllowCarryForward,
+            MaxCarryForward = request.Data.MaxCarryForward,
+            MinServiceMonths = request.Data.MinServiceMonths
+        };
+
+        _context.LeaveCategory.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateLeaveCategoryResponse
+        {
+            Id = entity.Id,
+            Code = entity.Code
+        };
+    }
+}
@@ -0,0 +1,21 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Leave.LeaveCategory.Cqrs;
+
+public class CreateLeaveCategoryValidator : AbstractValidator<CreateLeaveCategoryRequest>
+{
+    public CreateLeaveCategoryValidator()
+    {
+        RuleFor(x => x.Code)
+            .NotEmpty().WithMessage("Category Code is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Category Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Quota)
+            .GreaterThanOrEqualTo(0).WithMessage("Quota cannot be negative");
+    }
+}
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveCategory.Cqrs;
+
+public record DeleteLeaveCategoryByIdRequest(string Id);
+
+public record DeleteLeaveCategoryByIdCommand(DeleteLeaveCategoryByIdRequest Data) : IRequest<bool>;
+
+public class DeleteLeaveCategoryByIdHandler : IRequestHandler<DeleteLeaveCategoryByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteLeaveCategoryByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteLeaveCategoryByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.LeaveCategory
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.LeaveCategory.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,59 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveCategory.Cqrs;
+
+public class GetLeaveCategoryByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? Code { get; set; }
+    public string? Name { get; set; }
+    public int Quota { get; set; }
+    public bool IsPaidLeave { get; set; }
+    public string? Description { get; set; }
+    public string? Status { get; set; }
+    public bool AllowCarryForward { get; set; }
+    public int MaxCarryForward { get; set; }
+    public int MinServiceMonths { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetLeaveCategoryByIdQuery(string Id) : IRequest<GetLeaveCategoryByIdResponse?>;
+
+public class GetLeaveCategoryByIdHandler : IRequestHandler<GetLeaveCategoryByIdQuery, GetLeaveCategoryByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetLeaveCategoryByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetLeaveCategoryByIdResponse?> Handle(GetLeaveCategoryByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.LeaveCategory
+            .AsNoTracking()
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetLeaveCategoryByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                Code = x.Code,
+                Name = x.Name,
+                Quota = x.Quota,
+                IsPaidLeave = x.IsPaidLeave,
+                Description = x.Description,
+                Status = x.Status,
+                AllowCarryForward = x.AllowCarryForward,
+                MaxCarryForward = x.MaxCarryForward,
+                MinServiceMonths = x.MinServiceMonths,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,47 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveCategory.Cqrs;
+
+public class GetLeaveCategoryListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? Code { get; set; }
+    public string? Name { get; set; }
+    public int Quota { get; set; }
+    public bool IsPaidLeave { get; set; }
+    public string? Description { get; set; }
+    public string? Status { get; set; }
+}
+
+public record GetLeaveCategoryListQuery() : IRequest<List<GetLeaveCategoryListResponse>>;
+
+public class GetLeaveCategoryListHandler : IRequestHandler<GetLeaveCategoryListQuery, List<GetLeaveCategoryListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetLeaveCategoryListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetLeaveCategoryListResponse>> Handle(GetLeaveCategoryListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.LeaveCategory
+            .AsNoTracking()
+            .NotDeletedOnly()
+            .OrderBy(x => x.Code)
+            .Select(x => new GetLeaveCategoryListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                Code = x.Code,
+                Name = x.Name,
+                Quota = x.Quota,
+                IsPaidLeave = x.IsPaidLeave,
+                Description = x.Description,
+                Status = x.Status
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,67 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveCategory.Cqrs;
+
+public class UpdateLeaveCategoryRequest : CreateLeaveCategoryRequest
+{
+    public string? Id { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateLeaveCategoryResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateLeaveCategoryCommand(UpdateLeaveCategoryRequest Data) : IRequest<UpdateLeaveCategoryResponse>;
+
+public class UpdateLeaveCategoryHandler : IRequestHandler<UpdateLeaveCategoryCommand, UpdateLeaveCategoryResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateLeaveCategoryHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateLeaveCategoryResponse> Handle(UpdateLeaveCategoryCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.LeaveCategory
+            .AnyAsync(x => x.Code == request.Data.Code && x.Id != request.Data.Id, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Leave Category", request.Data.Code ?? string.Empty);
+        }
+
+        var entity = await _context.LeaveCategory
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateLeaveCategoryResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.Code = request.Data.Code;
+        entity.Name = request.Data.Name;
+        entity.Quota = request.Data.Quota;
+        entity.IsPaidLeave = request.Data.IsPaidLeave;
+        entity.Description = request.Data.Description;
+        entity.Status = request.Data.Status;
+        entity.AllowCarryForward = request.Data.AllowCarryForward;
+        entity.MaxCarryForward = request.Data.MaxCarryForward;
+        entity.MinServiceMonths = request.Data.MinServiceMonths;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateLeaveCategoryResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,21 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Leave.LeaveCategory.Cqrs;
+
+public class UpdateLeaveCategoryValidator : AbstractValidator<UpdateLeaveCategoryRequest>
+{
+    public UpdateLeaveCategoryValidator()
+    {
+        RuleFor(x => x.Id)
+            .NotEmpty().WithMessage("ID is required for update");
+
+        RuleFor(x => x.Code)
+            .NotEmpty().WithMessage("Category Code is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Category Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+    }
+}
@@ -0,0 +1,55 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Leave.LeaveCategory.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Leave.LeaveCategory;
+
+public static class LeaveCategoryEndpoint
+{
+    public static void MapLeaveCategoryEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/leave-category").WithTags("Leave Categories")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetLeaveCategoryListQuery());
+            return result.ToApiResponse("Data leave category retrieved successfully");
+        })
+        .WithName("GetLeaveCategoryList");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetLeaveCategoryByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Leave category detail retrieved successfully"
+                : $"Leave category with ID {id} not found");
+        })
+        .WithName("GetLeaveCategoryById");
+
+        group.MapPost("/", async (CreateLeaveCategoryRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateLeaveCategoryCommand(request));
+            return result.ToApiResponse("Leave category has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateLeaveCategory");
+
+        group.MapPost("/update", async (UpdateLeaveCategoryRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateLeaveCategoryCommand(request));
+            if (!result.Success) return ((object?)null).ToApiResponse("Update failed.");
+            return result.ToApiResponse("Leave category has been updated successfully");
+        })
+        .WithName("UpdateLeaveCategory");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteLeaveCategoryByIdCommand(new DeleteLeaveCategoryByIdRequest(id)));
+            if (!result) return ((object?)null).ToApiResponse("Delete failed.");
+            return true.ToApiResponse("Leave category has been deleted successfully");
+        })
+        .WithName("DeleteLeaveCategoryById");
+    }
+}
@@ -0,0 +1,54 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Leave.LeaveCategory.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Leave.LeaveCategory;
+
+public class LeaveCategoryService : BaseService
+{
+    private readonly RestClient _client;
+
+    public LeaveCategoryService(IHttpClientFactory clientFactory, NavigationManager nav, ISnackbar snackbar, ICurrentUserService currentUserService, TokenProvider tokenProvider)
+            : base(clientFactory, nav, snackbar, currentUserService, tokenProvider)
+    {
+        _client = new RestClient(nav.BaseUri);
+    }
+
+    public async Task<ApiResponse<List<GetLeaveCategoryListResponse>>?> GetLeaveCategoryListAsync()
+    {
+        var request = new RestRequest("api/leave-category", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetLeaveCategoryListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetLeaveCategoryByIdResponse>?> GetLeaveCategoryByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/leave-category/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetLeaveCategoryByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateLeaveCategoryResponse>?> CreateLeaveCategoryAsync(CreateLeaveCategoryRequest data)
+    {
+        var request = new RestRequest("api/leave-category", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateLeaveCategoryResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteLeaveCategoryByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/leave-category/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdateLeaveCategoryResponse>?> UpdateLeaveCategoryAsync(UpdateLeaveCategoryRequest data)
+    {
+        var request = new RestRequest("api/leave-category/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateLeaveCategoryResponse>(_client, request);
+    }
+}
@@ -0,0 +1,96 @@
+@page "/leave"
+@using Microsoft.AspNetCore.Authorization
+@using Indotalent.Infrastructure.Authorization.Identity
+@attribute [Authorize(Roles = $"{ApplicationRoles.Admin},{ApplicationRoles.Member}")]
+@using Indotalent.Features.Leave.LeaveBalance.Components
+@using Indotalent.Features.Leave.LeaveCategory
+@using Indotalent.Features.Leave.LeaveCategory.Components
+@using Indotalent.Features.Leave.LeaveRequest
+@using Indotalent.Features.Leave.LeaveBalance  
+@using Indotalent.Features.Leave.LeaveRequest.Components
+@using MudBlazor
+@inject NavigationManager NavigationManager
+
+<style>
+    .clean-white-tabs .mud-tabs-toolbar {
+        background-color: white !important;
+        border-bottom: 2px solid #DCEBFA;
+        border-radius: 0px !important;
+    }
+
+    .clean-white-tabs .mud-tab {
+        color: #94a3b8 !important;
+        text-transform: none;
+        font-weight: 500;
+        min-width: 180px;
+        border-radius: 0px !important;
+    }
+
+    .clean-white-tabs .mud-tab-active {
+        color: var(--mud-palette-primary) !important;
+        font-weight: 800;
+    }
+
+    .clean-white-tabs .mud-tabs-slider {
+        background-color: var(--mud-palette-primary) !important;
+        height: 3px !important;
+        bottom: 0;
+    }
+</style>
+
+<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-2 mb-8">
+    <div class="clean-white-tabs">
+        <MudTabs Elevation="0"
+                 ActivePanelIndex="@_activeTabIndex"
+                 ActivePanelIndexChanged="OnTabChanged"
+                 ApplyEffectsToContainer="true"
+                 TabPanelsClass="pt-4">
+
+            <MudTabPanel Text="Leave Requests" Icon="@Icons.Material.Outlined.EventNote">
+                <LeaveRequestPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Leave Categories" Icon="@Icons.Material.Outlined.Category">
+                <LeaveCategoryPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Leave Balance" Icon="@Icons.Material.Outlined.AccountBalanceWallet">
+                <LeaveBalancePage />
+            </MudTabPanel>
+
+        </MudTabs>
+    </div>
+</MudContainer>
+
+@code {
+    private int _activeTabIndex = 0;
+
+    protected override void OnInitialized()
+    {
+        var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
+        if (Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("tab", out var tabValue))
+        {
+            _activeTabIndex = tabValue.ToString().ToLower() switch
+            {
+                "request" => 0,
+                "category" => 1,
+                "balance" => 2,
+                _ => 0
+            };
+        }
+    }
+
+    private void OnTabChanged(int index)
+    {
+        _activeTabIndex = index;
+        string tabName = index switch
+        {
+            0 => "request",
+            1 => "category",
+            2 => "balance",
+            _ => "request"
+        };
+
+        NavigationManager.NavigateTo($"/leave?tab={tabName}", replace: false);
+    }
+}
@@ -0,0 +1,35 @@
+@page "/leave/leave-request"
+@using Indotalent.Features.Leave.LeaveRequest.Components
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_LeaveRequestCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_LeaveRequestUpdateForm Data="_selectedData!" ReadOnly="@(_currentView == ViewMode.View)" OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_LeaveRequestDataTable OnAdd="() => ShowCreate()" OnEdit="(item) => ShowUpdate(item, false)" OnView="(item) => ShowUpdate(item, true)" />
+}
+
+@code {
+    private enum ViewMode { Table, Create, Update, View }
+    private ViewMode _currentView = ViewMode.Table;
+    private UpdateLeaveRequestRequest? _selectedData;
+
+    private void ShowCreate() => _currentView = ViewMode.Create;
+
+    private void ShowUpdate(UpdateLeaveRequestRequest data, bool isReadOnly)
+    {
+        _selectedData = data;
+        _currentView = isReadOnly ? ViewMode.View : ViewMode.Update;
+    }
+
+    private void BackToTable() { _currentView = ViewMode.Table; _selectedData = null; }
+
+    private void HandleSuccess() { _currentView = ViewMode.Table; _selectedData = null; }
+}
@@ -0,0 +1,136 @@
+@using Indotalent.Features.Leave.LeaveRequest
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveCategory
+@using Indotalent.Features.Leave.LeaveCategory.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject LeaveRequestService LeaveRequestService
+@inject LeaveCategoryService LeaveCategoryService
+@inject ISnackbar Snackbar
+
+<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;">Apply for Leave</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Submit a new leave application for approval.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 0px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Select Employee</MudText>
+                <MudSelect T="string" @bind-Value="_model.EmployeeId"
+                           For="@(() => _model.EmployeeId)"
+                           Validation="@(_validator.ValidateValue())"
+                           Variant="Variant.Outlined" Margin="Margin.Dense"
+                           AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
+                    @foreach (var emp in _employees)
+                    {
+                        <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Leave Type</MudText>
+                <MudSelect T="string" @bind-Value="_model.LeaveCategoryId"
+                           For="@(() => _model.LeaveCategoryId)"
+                           Validation="@(_validator.ValidateValue())"
+                           Variant="Variant.Outlined" Margin="Margin.Dense"
+                           AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
+                    @foreach (var cat in _categories)
+                    {
+                        <MudSelectItem Value="@cat.Id">@cat.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="3">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Start Date</MudText>
+                <MudDatePicker @bind-Date="_startDate" Variant="Variant.Outlined" Margin="Margin.Dense" Editable="true" />
+            </MudItem>
+            <MudItem xs="12" sm="3">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">End Date</MudText>
+                <MudDatePicker @bind-Date="_endDate" Variant="Variant.Outlined" Margin="Margin.Dense" Editable="true" />
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Total Days</MudText>
+                <MudNumericField @bind-Value="_model.Days" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" ReadOnly="true" />
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Reason</MudText>
+                <MudTextField @bind-Value="_model.Reason"
+                              For="@(() => _model.Reason)"
+                              Validation="@(_validator.ValidateValue())"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Lines="3" />
+            </MudItem>
+        </MudGrid>
+
+        <div class="d-flex justify-end gap-2 mt-8">
+            <MudButton OnClick="() => OnCancel.InvokeAsync()" Variant="Variant.Outlined" Disabled="_processing" 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">Submitting...</MudText>
+                }
+                else
+                {
+                    <MudText>Submit Application</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreateLeaveRequestValidator _validator = new();
+    private CreateLeaveRequestRequest _model = new() { StartDate = DateTime.Today, EndDate = DateTime.Today };
+    private List<GetLeaveCategoryListResponse> _categories = new();
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private bool _processing = false;
+
+    private DateTime? _startDate { get => _model.StartDate; set { _model.StartDate = value ?? DateTime.Today; CalculateDays(); } }
+    private DateTime? _endDate { get => _model.EndDate; set { _model.EndDate = value ?? DateTime.Today; CalculateDays(); } }
+
+    protected override async Task OnInitializedAsync()
+    {
+        var catRes = await LeaveCategoryService.GetLeaveCategoryListAsync();
+        if (catRes != null && catRes.IsSuccess) _categories = catRes.Value ?? new();
+
+        var empRes = await LeaveRequestService.GetEmployeeReferenceAsync();
+        if (empRes != null && empRes.IsSuccess) _employees = empRes.Value ?? new();
+
+        CalculateDays();
+    }
+
+    private void CalculateDays()
+    {
+        _model.Days = (_model.EndDate - _model.StartDate).TotalDays + 1;
+        if (_model.Days < 0) _model.Days = 0;
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await LeaveRequestService.CreateLeaveRequestAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Leave request submitted", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,404 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Leave.LeaveRequest
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject LeaveRequestService LeaveRequestService
+@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;">Leave Requests</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Track and manage employee leave applications and their approval status.</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;">Leave</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Request</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 (_selectedRequest != null)
+            {
+                <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 Details</MudButton>
+                @if (_selectedRequest.Status == "Pending")
+                {
+                    <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>
+                }
+                <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.Delete" OnClick="OnDelete" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px;">Remove</MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedRequest = 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;">
+                    Apply for Leave
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Elevation="0" Striped="true" Class="mud-table-styled" CustomHeader="true" Dense="true" T="GetLeaveRequestListResponse" OnRowClick="@((args) => _selectedRequest = 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; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveRequestListResponse, object>(x => x.EmployeeName!)">Employee</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveRequestListResponse, object>(x => x.LeaveType!)">Leave Type</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveRequestListResponse, object>(x => x.StartDate)">Period</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveRequestListResponse, object>(x => x.Days)">Days</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveRequestListResponse, object>(x => x.Reason!)">Reason</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetLeaveRequestListResponse, object>(x => x.Status!)">Status</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudCheckBox T="bool" Value="@(_selectedRequest?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <div class="d-flex align-center">
+                    <MudAvatar Color="@GetRandomColor(context.EmployeeName!)" Size="Size.Small" Class="mr-3" Style="font-weight: 700; font-size: 0.75rem;">@context.EmployeeName!.ToInitial()</MudAvatar>
+                    <div>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@context.EmployeeName</MudText>
+                        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">@context.EmployeeId</MudText>
+                    </div>
+                </div>
+            </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.LeaveType</MudChip>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudText Typo="Typo.body2" Style="font-size: 0.8rem; font-weight: 600;">@context.StartDate.ToString("dd MMM yyyy")</MudText>
+                <MudText Typo="Typo.caption" Style="color: #9CA3AF;">to @context.EndDate.ToString("dd MMM yyyy")</MudText>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudText Typo="Typo.body2" Style="font-weight: 800; color: #374151;">@context.Days</MudText>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.8rem;" Class="text-truncate">@context.Reason</MudText>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem;">
+                <MudChip T="string" Color="@GetStatusColor(context.Status!)" Size="Size.Small" Variant="Variant.Filled" Style="font-weight: 800; border-radius: 4px; text-transform: uppercase; font-size: 0.65rem;">@context.Status</MudChip>
+            </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: #9CA3AF; font-size: 0.75rem;")">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: #9CA3AF; font-size: 0.75rem;")">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<UpdateLeaveRequestRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateLeaveRequestRequest> OnView { get; set; }
+
+    private List<GetLeaveRequestListResponse> _requests = new();
+    private GetLeaveRequestListResponse? _selectedRequest;
+    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; _selectedRequest = null;
+        StateHasChanged();
+        try
+        {
+            var response = await LeaveRequestService.GetLeaveRequestListAsync();
+            await Task.Delay(1000);
+            if (response != null && response.IsSuccess)
+            {
+                _requests = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetLeaveRequestListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _requests;
+        return _requests.Where(x => 
+            (x.EmployeeName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.EmployeeId?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.LeaveType?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Reason?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Status?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetLeaveRequestListResponse> 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("LeaveRequests");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Employee Name";
+                worksheet.Cell(currentRow, 2).Value = "Leave Type";
+                worksheet.Cell(currentRow, 3).Value = "Start Date";
+                worksheet.Cell(currentRow, 4).Value = "End Date";
+                worksheet.Cell(currentRow, 5).Value = "Days";
+                worksheet.Cell(currentRow, 6).Value = "Reason";
+                worksheet.Cell(currentRow, 7).Value = "Status";
+
+                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.EmployeeName;
+                    worksheet.Cell(currentRow, 2).Value = item.LeaveType;
+                    worksheet.Cell(currentRow, 3).Value = item.StartDate.ToString("dd-MMM-yyyy");
+                    worksheet.Cell(currentRow, 4).Value = item.EndDate.ToString("dd-MMM-yyyy");
+                    worksheet.Cell(currentRow, 5).Value = item.Days;
+                    worksheet.Cell(currentRow, 6).Value = item.Reason;
+                    worksheet.Cell(currentRow, 7).Value = item.Status;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Leave_Request_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;
+        _selectedRequest = 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;
+            _selectedRequest = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        _selectedRequest = null;
+        StateHasChanged();
+    }
+
+    private Color GetRandomColor(string name) { int hash = name.GetHashCode(); var colors = new[] { Color.Primary, Color.Secondary, Color.Tertiary, Color.Info, Color.Success, Color.Warning, Color.Dark }; return colors[Math.Abs(hash) % colors.Length]; }
+    private Color GetStatusColor(string status) => status switch { "Approved" => Color.Success, "Pending" => Color.Warning, "Rejected" => Color.Error, _ => Color.Default };
+
+    private async Task InvokeEdit() { if (_selectedRequest != null) { var res = await LeaveRequestService.GetLeaveRequestByIdAsync(_selectedRequest.Id!); if (res?.Value != null) await OnEdit.InvokeAsync(MapToUpdate(res.Value)); } }
+    private async Task InvokeView() { if (_selectedRequest != null) { var res = await LeaveRequestService.GetLeaveRequestByIdAsync(_selectedRequest.Id!); if (res?.Value != null) await OnView.InvokeAsync(MapToUpdate(res.Value)); } }
+
+    private UpdateLeaveRequestRequest MapToUpdate(GetLeaveRequestByIdResponse d) => new UpdateLeaveRequestRequest
+    {
+        Id = d.Id,
+        EmployeeId = d.EmployeeId!,
+        LeaveCategoryId = d.LeaveCategoryId!,
+        StartDate = d.StartDate,
+        EndDate = d.EndDate,
+        Days = d.Days,
+        Reason = d.Reason ?? "",
+        Status = d.Status ?? "Pending",
+        AttachmentPath = d.AttachmentPath,
+        ApproverId = d.ApproverId,
+        ActionDate = d.ActionDate,
+        RejectReason = d.RejectReason,
+        CreatedAt = d.CreatedAt,
+        CreatedBy = d.CreatedBy,
+        UpdatedAt = d.UpdatedAt,
+        UpdatedBy = d.UpdatedBy
+    };
+
+    private async Task OnDelete()
+    {
+        if (_selectedRequest == null) return;
+        var dialog = await DialogService.ShowAsync<Features.Root.Shared._DeleteConfirmation>("", new DialogParameters<Features.Root.Shared._DeleteConfirmation> { { x => x.ContentText, $"Request for {_selectedRequest.EmployeeName}" } });
+        if (!(await dialog.Result).Canceled)
+        {
+            if (await LeaveRequestService.DeleteLeaveRequestByIdAsync(_selectedRequest.Id!)) { await LoadData(); Snackbar.Add("Request deleted", Severity.Success); }
+        }
+    }
+}
@@ -0,0 +1,225 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Leave.LeaveRequest
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveCategory
+@using Indotalent.Features.Leave.LeaveCategory.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject LeaveRequestService LeaveRequestService
+@inject LeaveCategoryService LeaveCategoryService
+@inject ISnackbar Snackbar
+
+<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 ? "Request Details" : "Edit Request")</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Reviewing leave application details and status.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 0px; border: 1px solid #DCEBFA;">
+    @if (_isInitialLoading)
+    {
+        <div class="d-flex flex-column align-center justify-center pa-10">
+            <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
+            <MudText Typo="Typo.body2" Class="mt-4">Loading application data...</MudText>
+        </div>
+    }
+    else
+    {
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="3">
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Employee</MudText>
+                    <MudSelect T="string" @bind-Value="_model.EmployeeId"
+                               ReadOnly="ReadOnly"
+                               Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
+                        @foreach (var emp in _employees)
+                        {
+                            <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Leave Type</MudText>
+                    <MudSelect T="string" @bind-Value="_model.LeaveCategoryId"
+                               ReadOnly="ReadOnly"
+                               Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
+                        @foreach (var cat in _categories)
+                        {
+                            <MudSelectItem Value="@cat.Id">@cat.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Start Date</MudText>
+                    <MudDatePicker @bind-Date="_startDate" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">End Date</MudText>
+                    <MudDatePicker @bind-Date="_endDate" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Total Days</MudText>
+                    <MudNumericField @bind-Value="_model.Days" ReadOnly="true" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+                </MudItem>
+                <MudItem xs="12">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Reason</MudText>
+                    <MudTextField @bind-Value="_model.Reason" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Lines="2" />
+                </MudItem>
+
+                @if (!ReadOnly && _model.Status == "Pending")
+                {
+                    <MudItem xs="12" Class="mt-4">
+                        <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Approval Action</MudText>
+                        <MudDivider Class="mt-2 mb-4" />
+                    </MudItem>
+                    <MudItem xs="12" sm="6">
+                        <MudText Typo="Typo.subtitle2" Class="mb-1">Decision Status</MudText>
+                        <MudSelect @bind-Value="_model.Status"
+                                   Variant="Variant.Outlined"
+                                   Margin="Margin.Dense"
+                                   AnchorOrigin="Origin.BottomLeft"
+                                   TransformOrigin="Origin.TopLeft">
+                            <MudSelectItem Value="@("Pending")">Pending</MudSelectItem>
+                            <MudSelectItem Value="@("Approved")">Approved</MudSelectItem>
+                            <MudSelectItem Value="@("Rejected")">Rejected</MudSelectItem>
+                        </MudSelect>
+                    </MudItem>
+                    <MudItem xs="12" sm="6">
+                        <MudText Typo="Typo.subtitle2" Class="mb-1">Notes / Reject Reason</MudText>
+                        <MudTextField @bind-Value="_model.RejectReason"
+                                      Variant="Variant.Outlined"
+                                      Margin="Margin.Dense"
+                                      FullWidth="true"
+                                      Placeholder="Provide reason if rejected..." />
+                    </MudItem>
+                }
+
+                <MudItem xs="12" Class="mt-4">
+                    <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Audit & Action 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">Action By</MudText>
+                    <MudText Typo="Typo.body2" Style="color: #1a1a1a; font-weight: 600;">@(!string.IsNullOrEmpty(_model.ApproverId) ? _model.ApproverId : "-")</MudText>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2">Action Date</MudText>
+                    <MudText Typo="Typo.body2" Style="color: #1a1a1a; font-weight: 600;">@(_model.ActionDate.HasValue? _model.ActionDate.Value.ToString("dd MMM yyyy HH:mm") : "-")</MudText>
+                </MudItem>
+            </MudGrid>
+
+            <div class="d-flex justify-end gap-2 mt-10">
+                <MudButton OnClick="() => OnCancel.InvokeAsync()" Variant="Variant.Outlined" Disabled="_processing" 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 Size="Size.Small" Indeterminate="true" />
+                        }
+                        else
+                        {
+                            <MudText>Save Changes</MudText>
+                        }
+                    </MudButton>
+                }
+            </div>
+        </MudForm>
+    }
+</MudPaper>
+
+@code {
+    [Parameter] public UpdateLeaveRequestRequest 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 = default!;
+    private UpdateLeaveRequestValidator _validator = new();
+    private UpdateLeaveRequestRequest _model = new();
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private List<GetLeaveCategoryListResponse> _categories = new();
+    private bool _processing = false;
+    private bool _isInitialLoading = true;
+
+    private DateTime? _startDate { get => _model.StartDate; set { _model.StartDate = value ?? DateTime.Today; CalculateDays(); } }
+    private DateTime? _endDate { get => _model.EndDate; set { _model.EndDate = value ?? DateTime.Today; CalculateDays(); } }
+
+    protected override async Task OnInitializedAsync()
+    {
+        _isInitialLoading = true;
+        try
+        {
+            _model = new UpdateLeaveRequestRequest
+            {
+                Id = Data.Id,
+                EmployeeId = Data.EmployeeId,
+                EmployeeName = Data.EmployeeName,
+                LeaveCategoryId = Data.LeaveCategoryId,
+                LeaveType = Data.LeaveType,
+                StartDate = Data.StartDate,
+                EndDate = Data.EndDate,
+                Days = Data.Days,
+                Reason = Data.Reason,
+                Status = Data.Status,
+                AttachmentPath = Data.AttachmentPath,
+                ApproverId = Data.ApproverId,
+                ActionDate = Data.ActionDate,
+                RejectReason = Data.RejectReason,
+                CreatedAt = Data.CreatedAt,
+                CreatedBy = Data.CreatedBy,
+                UpdatedAt = Data.UpdatedAt,
+                UpdatedBy = Data.UpdatedBy
+            };
+
+            var empRes = await LeaveRequestService.GetEmployeeReferenceAsync();
+            if (empRes != null && empRes.IsSuccess) _employees = empRes.Value ?? new();
+
+            var catRes = await LeaveCategoryService.GetLeaveCategoryListAsync();
+            if (catRes != null && catRes.IsSuccess) _categories = catRes.Value ?? new();
+        }
+        finally
+        {
+            _isInitialLoading = false;
+        }
+    }
+
+    private void CalculateDays()
+    {
+        _model.Days = (_model.EndDate - _model.StartDate).TotalDays + 1;
+        if (_model.Days < 0) _model.Days = 0;
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await LeaveRequestService.UpdateLeaveRequestAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Request updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,65 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+
+namespace Indotalent.Features.Leave.LeaveRequest.Cqrs;
+
+public class CreateLeaveRequestRequest
+{
+    public string EmployeeId { get; set; } = string.Empty;
+    public string LeaveCategoryId { get; set; } = string.Empty;
+    public DateTime StartDate { get; set; }
+    public DateTime EndDate { get; set; }
+    public double Days { get; set; }
+    public string Reason { get; set; } = string.Empty;
+    public string Status { get; set; } = "Pending";
+    public string? AttachmentPath { get; set; }
+}
+
+public class CreateLeaveRequestResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+}
+
+public record CreateLeaveRequestCommand(CreateLeaveRequestRequest Data) : IRequest<CreateLeaveRequestResponse>;
+
+public class CreateLeaveRequestHandler : IRequestHandler<CreateLeaveRequestCommand, CreateLeaveRequestResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateLeaveRequestHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateLeaveRequestResponse> Handle(CreateLeaveRequestCommand request, CancellationToken cancellationToken)
+    {
+        var entityName = nameof(Data.Entities.LeaveRequest);
+
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"{entityName.ToShortNameConsonant(3)}/{{Year}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.LeaveRequest
+        {
+            AutoNumber = autoNo,
+            EmployeeId = request.Data.EmployeeId,
+            LeaveCategoryId = request.Data.LeaveCategoryId,
+            StartDate = request.Data.StartDate,
+            EndDate = request.Data.EndDate,
+            Days = request.Data.Days,
+            Reason = request.Data.Reason,
+            Status = request.Data.Status,
+            AttachmentPath = request.Data.AttachmentPath
+        };
+
+        _context.LeaveRequest.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateLeaveRequestResponse
+        {
+            Id = entity.Id,
+            AutoNumber = entity.AutoNumber
+        };
+    }
+}
@@ -0,0 +1,15 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Leave.LeaveRequest.Cqrs;
+
+public class CreateLeaveRequestValidator : AbstractValidator<CreateLeaveRequestRequest>
+{
+    public CreateLeaveRequestValidator()
+    {
+        RuleFor(x => x.EmployeeId).NotEmpty().WithMessage("Employee is required");
+        RuleFor(x => x.LeaveCategoryId).NotEmpty().WithMessage("Leave Type is required");
+        RuleFor(x => x.StartDate).NotEmpty();
+        RuleFor(x => x.EndDate).NotEmpty().GreaterThanOrEqualTo(x => x.StartDate).WithMessage("End Date cannot be before Start Date");
+        RuleFor(x => x.Reason).NotEmpty().WithMessage("Reason is required");
+    }
+}
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveRequest.Cqrs;
+
+public record DeleteLeaveRequestByIdRequest(string Id);
+
+public record DeleteLeaveRequestByIdCommand(DeleteLeaveRequestByIdRequest Data) : IRequest<bool>;
+
+public class DeleteLeaveRequestByIdHandler : IRequestHandler<DeleteLeaveRequestByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteLeaveRequestByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteLeaveRequestByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.LeaveRequest
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.LeaveRequest.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,35 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveRequest.Cqrs;
+
+public class EmployeeLeaveReferenceResponse
+{
+    public string? Id { get; set; }
+    public string? Code { get; set; }
+    public string? FullName { get; set; }
+}
+
+public record GetEmployeeLeaveReferenceQuery() : IRequest<List<EmployeeLeaveReferenceResponse>>;
+
+public class GetEmployeeLeaveReferenceHandler : IRequestHandler<GetEmployeeLeaveReferenceQuery, List<EmployeeLeaveReferenceResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetEmployeeLeaveReferenceHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<EmployeeLeaveReferenceResponse>> Handle(GetEmployeeLeaveReferenceQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Employee
+            .AsNoTracking()
+            .Where(x => x.EmployeeStatus == "Active")
+            .Select(x => new EmployeeLeaveReferenceResponse
+            {
+                Id = x.Id,
+                Code = x.Code,
+                FullName = $"{x.FirstName} {x.LastName}"
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,69 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveRequest.Cqrs;
+
+public class GetLeaveRequestByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? LeaveCategoryId { get; set; }
+    public string? LeaveType { get; set; }
+    public DateTime StartDate { get; set; }
+    public DateTime EndDate { get; set; }
+    public double Days { get; set; }
+    public string? Reason { get; set; }
+    public string? Status { get; set; }
+    public string? AttachmentPath { get; set; }
+    public string? ApproverId { get; set; }
+    public DateTime? ActionDate { get; set; }
+    public string? RejectReason { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetLeaveRequestByIdQuery(string Id) : IRequest<GetLeaveRequestByIdResponse?>;
+
+public class GetLeaveRequestByIdHandler : IRequestHandler<GetLeaveRequestByIdQuery, GetLeaveRequestByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetLeaveRequestByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetLeaveRequestByIdResponse?> Handle(GetLeaveRequestByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.LeaveRequest
+            .AsNoTracking()
+            .Include(x => x.Employee)
+            .Include(x => x.LeaveCategory)
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetLeaveRequestByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                LeaveCategoryId = x.LeaveCategoryId,
+                LeaveType = x.LeaveCategory != null ? x.LeaveCategory.Name : string.Empty,
+                StartDate = x.StartDate,
+                EndDate = x.EndDate,
+                Days = x.Days,
+                Reason = x.Reason,
+                Status = x.Status,
+                AttachmentPath = x.AttachmentPath,
+                ApproverId = x.ApproverId,
+                ActionDate = x.ActionDate,
+                RejectReason = x.RejectReason,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,53 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveRequest.Cqrs;
+
+public class GetLeaveRequestListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? LeaveType { get; set; }
+    public DateTime StartDate { get; set; }
+    public DateTime EndDate { get; set; }
+    public double Days { get; set; }
+    public string? Reason { get; set; }
+    public string? Status { get; set; }
+}
+
+public record GetLeaveRequestListQuery() : IRequest<List<GetLeaveRequestListResponse>>;
+
+public class GetLeaveRequestListHandler : IRequestHandler<GetLeaveRequestListQuery, List<GetLeaveRequestListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetLeaveRequestListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetLeaveRequestListResponse>> Handle(GetLeaveRequestListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.LeaveRequest
+            .AsNoTracking()
+            .NotDeletedOnly()
+            .Include(x => x.Employee)
+            .Include(x => x.LeaveCategory)
+            .OrderByDescending(x => x.CreatedAt)
+            .Select(x => new GetLeaveRequestListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.Employee != null ? x.Employee.Code : string.Empty,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                LeaveType = x.LeaveCategory != null ? x.LeaveCategory.Name : string.Empty,
+                StartDate = x.StartDate,
+                EndDate = x.EndDate,
+                Days = x.Days,
+                Reason = x.Reason,
+                Status = x.Status
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,65 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Leave.LeaveRequest.Cqrs;
+
+public class UpdateLeaveRequestRequest : CreateLeaveRequestRequest
+{
+    public string? Id { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? LeaveType { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+    public string? RejectReason { get; set; }
+    public string? ApproverId { get; set; }
+    public DateTime? ActionDate { get; set; }
+}
+
+public class UpdateLeaveRequestResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateLeaveRequestCommand(UpdateLeaveRequestRequest Data) : IRequest<UpdateLeaveRequestResponse>;
+
+public class UpdateLeaveRequestHandler : IRequestHandler<UpdateLeaveRequestCommand, UpdateLeaveRequestResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateLeaveRequestHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateLeaveRequestResponse> Handle(UpdateLeaveRequestCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.LeaveRequest
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateLeaveRequestResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.EmployeeId = request.Data.EmployeeId;
+        entity.LeaveCategoryId = request.Data.LeaveCategoryId;
+        entity.StartDate = request.Data.StartDate;
+        entity.EndDate = request.Data.EndDate;
+        entity.Days = request.Data.Days;
+        entity.Reason = request.Data.Reason;
+        entity.Status = request.Data.Status;
+        entity.AttachmentPath = request.Data.AttachmentPath;
+        entity.RejectReason = request.Data.RejectReason;
+        entity.ApproverId = request.Data.ApproverId;
+        entity.ActionDate = request.Data.ActionDate;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateLeaveRequestResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,28 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Leave.LeaveRequest.Cqrs;
+
+public class UpdateLeaveRequestValidator : AbstractValidator<UpdateLeaveRequestRequest>
+{
+    public UpdateLeaveRequestValidator()
+    {
+        RuleFor(x => x.Id)
+            .NotEmpty().WithMessage("ID is required for update");
+
+        RuleFor(x => x.EmployeeId)
+            .NotEmpty().WithMessage("Employee is required");
+
+        RuleFor(x => x.LeaveCategoryId)
+            .NotEmpty().WithMessage("Leave Type is required");
+
+        RuleFor(x => x.StartDate)
+            .NotEmpty().WithMessage("Start Date is required");
+
+        RuleFor(x => x.EndDate)
+            .NotEmpty()
+            .GreaterThanOrEqualTo(x => x.StartDate).WithMessage("End Date cannot be before Start Date");
+
+        RuleFor(x => x.Reason)
+            .NotEmpty().WithMessage("Reason is required");
+    }
+}
@@ -0,0 +1,63 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Leave.LeaveRequest.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Leave.LeaveRequest;
+
+public static class LeaveRequestEndpoint
+{
+    public static void MapLeaveRequestEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/leave-request").WithTags("Leave Requests")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetLeaveRequestListQuery());
+            return result.ToApiResponse("Data leave request retrieved successfully");
+        })
+        .WithName("GetLeaveRequestList");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetLeaveRequestByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Leave request detail retrieved successfully"
+                : $"Leave request with ID {id} not found");
+        })
+        .WithName("GetLeaveRequestById");
+
+        group.MapPost("/", async (CreateLeaveRequestRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateLeaveRequestCommand(request));
+            return result.ToApiResponse("Leave request has been submitted successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateLeaveRequest");
+
+        group.MapPost("/update", async (UpdateLeaveRequestRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateLeaveRequestCommand(request));
+            if (!result.Success) return ((object?)null).ToApiResponse("Update failed.");
+            return result.ToApiResponse("Leave request has been updated successfully");
+        })
+        .WithName("UpdateLeaveRequest");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteLeaveRequestByIdCommand(new DeleteLeaveRequestByIdRequest(id)));
+            if (!result) return ((object?)null).ToApiResponse("Delete failed.");
+            return true.ToApiResponse("Leave request has been deleted successfully");
+        })
+        .WithName("DeleteLeaveRequestById");
+
+
+        group.MapGet("/employee-reference", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetEmployeeLeaveReferenceQuery());
+            return result.ToApiResponse("Employee reference retrieved successfully");
+        })
+        .WithName("GetEmployeeLeaveReference");
+    }
+}
@@ -0,0 +1,60 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Leave.LeaveRequest.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Leave.LeaveRequest;
+
+public class LeaveRequestService : BaseService
+{
+    private readonly RestClient _client;
+
+    public LeaveRequestService(IHttpClientFactory clientFactory, NavigationManager nav, ISnackbar snackbar, ICurrentUserService currentUserService, TokenProvider tokenProvider)
+            : base(clientFactory, nav, snackbar, currentUserService, tokenProvider)
+    {
+        _client = new RestClient(nav.BaseUri);
+    }
+
+    public async Task<ApiResponse<List<GetLeaveRequestListResponse>>?> GetLeaveRequestListAsync()
+    {
+        var request = new RestRequest("api/leave-request", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetLeaveRequestListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetLeaveRequestByIdResponse>?> GetLeaveRequestByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/leave-request/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetLeaveRequestByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateLeaveRequestResponse>?> CreateLeaveRequestAsync(CreateLeaveRequestRequest data)
+    {
+        var request = new RestRequest("api/leave-request", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateLeaveRequestResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<UpdateLeaveRequestResponse>?> UpdateLeaveRequestAsync(UpdateLeaveRequestRequest data)
+    {
+        var request = new RestRequest("api/leave-request/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateLeaveRequestResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteLeaveRequestByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/leave-request/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<List<EmployeeLeaveReferenceResponse>>?> GetEmployeeReferenceAsync()
+    {
+        var request = new RestRequest("api/leave-request/employee-reference", Method.Get);
+        return await ExecuteWithResponseAsync<List<EmployeeLeaveReferenceResponse>>(_client, request);
+    }
+}