initial commit

2026-07-21 14:22:06 +07:00
commit 2d7959f202
572 changed files with 45295 additions and 0 deletions
@@ -0,0 +1,55 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Performance.Appraisal.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Performance.Appraisal;
+
+public static class AppraisalEndpoint
+{
+    public static void MapAppraisalEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/performance-appraisal").WithTags("Performance Appraisals")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetAppraisalListQuery());
+            return result.ToApiResponse("Appraisal list retrieved successfully");
+        })
+        .WithName("GetAppraisalList");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetAppraisalByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Appraisal detail retrieved successfully"
+                : $"Appraisal with ID {id} not found");
+        })
+        .WithName("GetAppraisalById");
+
+        group.MapPost("/", async (CreateAppraisalRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateAppraisalCommand(request));
+            return result.ToApiResponse("Appraisal has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateAppraisal");
+
+        group.MapPost("/update", async (UpdateAppraisalRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateAppraisalCommand(request));
+            if (!result.Success) return ((object?)null).ToApiResponse("Update failed.");
+            return result.ToApiResponse("Appraisal has been updated successfully");
+        })
+        .WithName("UpdateAppraisal");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteAppraisalByIdCommand(new DeleteAppraisalByIdRequest(id)));
+            if (!result) return ((object?)null).ToApiResponse("Delete failed.");
+            return true.ToApiResponse("Appraisal has been deleted successfully");
+        })
+        .WithName("DeleteAppraisalById");
+    }
+}
@@ -0,0 +1,54 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Performance.Appraisal.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Performance.Appraisal;
+
+public class AppraisalService : BaseService
+{
+    private readonly RestClient _client;
+
+    public AppraisalService(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<GetAppraisalListResponse>>?> GetAppraisalListAsync()
+    {
+        var request = new RestRequest("api/performance-appraisal", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetAppraisalListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetAppraisalByIdResponse>?> GetAppraisalByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/performance-appraisal/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetAppraisalByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateAppraisalResponse>?> CreateAppraisalAsync(CreateAppraisalRequest data)
+    {
+        var request = new RestRequest("api/performance-appraisal", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateAppraisalResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteAppraisalByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/performance-appraisal/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdateAppraisalResponse>?> UpdateAppraisalAsync(UpdateAppraisalRequest data)
+    {
+        var request = new RestRequest("api/performance-appraisal/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateAppraisalResponse>(_client, request);
+    }
+}
@@ -0,0 +1,46 @@
+@page "/performance/appraisal"
+@using Indotalent.Features.Performance.Appraisal.Components
+@using Indotalent.Features.Performance.Appraisal.Cqrs
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_AppraisalCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_AppraisalUpdateForm Data="_selectedData!" ReadOnly="@(_currentView == ViewMode.View)" OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_AppraisalDataTable 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 UpdateAppraisalRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdateAppraisalRequest 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,148 @@
+@using Indotalent.Features.Performance.Appraisal
+@using Indotalent.Features.Performance.Appraisal.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest
+@using MudBlazor
+@inject AppraisalService AppraisalService
+@inject LeaveRequestService LeaveRequestService
+@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>
+            <div style="font-size: 1.25rem; font-weight: 900; color: #1a1a1a;">New Salary Appraisal</div>
+            <div style="font-size: 0.875rem; color: #64748b;">Initiate a new salary increment or compensation review.</div>
+        </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">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Employee</label>
+                <MudSelect T="string" @bind-Value="_model.EmployeeId" Required="true" RequiredError="Employee is required" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter">
+                    @foreach (var emp in _employees)
+                    {
+                        <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Appraisal Type</label>
+                <MudSelect T="string" @bind-Value="_model.AppraisalType" Required="true" RequiredError="Type is required" Variant="Variant.Outlined" Margin="Margin.Dense">
+                    <MudSelectItem Value="@("Annual Review")">Annual Review</MudSelectItem>
+                    <MudSelectItem Value="@("Promotion")">Promotion</MudSelectItem>
+                    <MudSelectItem Value="@("Special Adjustment")">Special Adjustment</MudSelectItem>
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Last Performance Rating</label>
+                <MudTextField @bind-Value="_model.LastRating" Placeholder="e.g. Exceeds Expectations" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Effective Date</label>
+                <MudDatePicker @bind-Date="_effectiveDate" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Status</label>
+                <MudSelect T="string" @bind-Value="_model.Status" Variant="Variant.Outlined" Margin="Margin.Dense">
+                    <MudSelectItem Value="@("Pending")">Pending</MudSelectItem>
+                    <MudSelectItem Value="@("Approved")">Approved</MudSelectItem>
+                    <MudSelectItem Value="@("Processed")">Processed</MudSelectItem>
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Current Salary</label>
+                <MudNumericField @bind-Value="_model.CurrentSalary" T="decimal" Format="N0" Variant="Variant.Outlined" Margin="Margin.Dense" Immediate="true" />
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Increment Percentage (%)</label>
+                <MudNumericField @bind-Value="_model.IncrementPercentage" T="decimal" Variant="Variant.Outlined" Margin="Margin.Dense" Immediate="true" />
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">New Salary</label>
+                <MudNumericField Value="@CalculateNewSalary()" T="decimal" Format="N0" ReadOnly="true" Variant="Variant.Outlined" Margin="Margin.Dense" Style="background-color: #F8FAFC;" />
+            </MudItem>
+
+            <MudItem xs="12">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Appraisal Notes</label>
+                <MudTextField @bind-Value="_model.AppraisalNote" Lines="3" 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; 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" />
+                    <span class="ms-2">Processing...</span>
+                }
+                else
+                {
+                    <span>Create Appraisal</span>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreateAppraisalRequest _model = new() { EffectiveDate = DateTime.Today, Status = "Pending" };
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private bool _processing = false;
+
+    private DateTime? _effectiveDate { get => _model.EffectiveDate; set => _model.EffectiveDate = value ?? DateTime.Today; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        var empRes = await LeaveRequestService.GetEmployeeReferenceAsync();
+        if (empRes?.IsSuccess == true)
+        {
+            _employees = empRes.Value ?? new();
+        }
+    }
+
+    private decimal CalculateNewSalary()
+    {
+        _model.NewSalary = _model.CurrentSalary + (_model.CurrentSalary * _model.IncrementPercentage / 100);
+        return _model.NewSalary;
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await AppraisalService.CreateAppraisalAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Appraisal created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,447 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Performance.Appraisal
+@using Indotalent.Features.Performance.Appraisal.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject AppraisalService AppraisalService
+@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;">Salary & Benefit Appraisal</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF;">Manage salary increments, bonuses, and compensation reviews based on performance.</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;">Performance</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Appraisal</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: #F8FAFC; 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;">
+                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 (_selectedAppraisal != null)
+            {
+                <MudButton Variant="Variant.Outlined" Color="Color.Info" StartIcon="@Icons.Material.Filled.Visibility" OnClick="InvokeView" Size="Size.Small" Style="border: 1px solid #D1D5DB; text-transform: none; font-weight: 500; border-radius: 6px; background: white; color: #6B7280;">View Detail</MudButton>
+                <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.CheckCircle" OnClick="InvokeEdit" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px;">Manage Appraisal</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="() => _selectedAppraisal = 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;">
+                    New Appraisal
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetAppraisalListResponse" OnRowClick="@((args) => _selectedAppraisal = 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<GetAppraisalListResponse, 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<GetAppraisalListResponse, object>(x => x.LastRating!)">Last Rating</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<GetAppraisalListResponse, object>(x => x.CurrentSalary)">Current Salary</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<GetAppraisalListResponse, object>(x => x.IncrementPercentage)">Increment (%)</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<GetAppraisalListResponse, object>(x => x.NewSalary)">New Salary</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<GetAppraisalListResponse, object>(x => x.Status!)">Status</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedAppraisal?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>
+                <div class="d-flex align-center">
+                    <MudAvatar Color="@GetRandomColor(context.EmployeeName!)" Size="Size.Small" Class="mr-3" Style="font-weight: 600; font-size: 0.65rem;">
+                        @GetInitials(context.EmployeeName!)
+                    </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>
+                <MudChip T="string" Size="Size.Small" Variant="Variant.Text" Style="background-color: #FEF3C7; color: #92400e; font-weight: 600; border-radius: 0px;">
+                    @context.LastRating
+                </MudChip>
+            </MudTd>
+            <MudTd>
+                <MudText Typo="Typo.body2" Style="font-weight: 600;">@context.CurrentSalary.ToString("N0")</MudText>
+            </MudTd>
+            <MudTd>
+                <MudText Typo="Typo.body2" Style="font-weight: 600; color: #059669;">+@context.IncrementPercentage%</MudText>
+            </MudTd>
+            <MudTd>
+                <MudText Typo="Typo.body2" Style="font-weight: 600; color: #1a1a1a;">@context.NewSalary.ToString("N0")</MudText>
+            </MudTd>
+            <MudTd>
+                <MudChip T="string" Color="@GetStatusColor(context.Status!)" Size="Size.Small" Variant="Variant.Filled" Style="font-weight: 600; border-radius: 6px; 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: #F8FAFC; border-top: 2px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 700; color: #1e293b;">Rows per page:</MudText>
+            
+            <MudSelect T="int" 
+                       Value="@_top" 
+                       ValueChanged="OnPageSizeChanged" 
+                       Dense="true" 
+                       Margin="Margin.Dense" 
+                       Style="width: 80px; background-color: white; font-size: 0.75rem; font-weight: 500;" 
+                       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="color: #64748b; 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;")"  />
+            <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; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;" : "text-transform: none; font-weight: 500; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;")">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; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;" : "text-transform: none; font-weight: 500; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;")">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;")"  />
+        </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: 8px !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<UpdateAppraisalRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateAppraisalRequest> OnView { get; set; }
+
+    private List<GetAppraisalListResponse> _appraisals = new();
+    private GetAppraisalListResponse? _selectedAppraisal;
+    private string _searchString = "";
+    private int _currentPage = 1;
+    private int _top = 5;
+    private int _skip => (_currentPage - 1) * _top;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / _top);
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        _selectedAppraisal = null;
+        StateHasChanged();
+
+        try
+        {
+            await Task.Delay(800);
+            var response = await AppraisalService.GetAppraisalListAsync();
+            if (response != null && response.IsSuccess)
+            {
+                _appraisals = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetAppraisalListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _appraisals;
+        return _appraisals.Where(x => 
+            (x.EmployeeName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.EmployeeCode?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.LastRating?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Status?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetAppraisalListResponse> 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("Appraisals");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Employee Code";
+                worksheet.Cell(currentRow, 2).Value = "Employee Name";
+                worksheet.Cell(currentRow, 3).Value = "Last Rating";
+                worksheet.Cell(currentRow, 4).Value = "Current Salary";
+                worksheet.Cell(currentRow, 5).Value = "Increment %";
+                worksheet.Cell(currentRow, 6).Value = "New Salary";
+                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.EmployeeCode;
+                    worksheet.Cell(currentRow, 2).Value = item.EmployeeName;
+                    worksheet.Cell(currentRow, 3).Value = item.LastRating;
+                    worksheet.Cell(currentRow, 4).Value = item.CurrentSalary;
+                    worksheet.Cell(currentRow, 5).Value = item.IncrementPercentage;
+                    worksheet.Cell(currentRow, 6).Value = item.NewSalary;
+                    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", "Salary_Appraisal_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()
+    {
+        _currentPage = 1;
+        _selectedAppraisal = null;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private void OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _currentPage = page;
+            _selectedAppraisal = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _currentPage = 1;
+        _selectedAppraisal = null;
+        StateHasChanged();
+    }
+
+    private string GetInitials(string name)
+    {
+        if (string.IsNullOrWhiteSpace(name)) return "??";
+        var parts = name.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+        if (parts.Length > 1) return $"{parts[0][0]}{parts[1][0]}".ToUpper();
+        return name.Length >= 2 ? name.Substring(0, 2).ToUpper() : name.ToUpper();
+    }
+
+    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
+    {
+        "Processed" => Color.Success,
+        "Approved" => Color.Info,
+        "Pending" => Color.Warning,
+        _ => Color.Default
+    };
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedAppraisal != null)
+        {
+            var res = await AppraisalService.GetAppraisalByIdAsync(_selectedAppraisal.Id!);
+            if (res?.Value != null) await OnEdit.InvokeAsync(MapToUpdate(res.Value));
+        }
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedAppraisal != null)
+        {
+            var res = await AppraisalService.GetAppraisalByIdAsync(_selectedAppraisal.Id!);
+            if (res?.Value != null) await OnView.InvokeAsync(MapToUpdate(res.Value));
+        }
+    }
+
+    private UpdateAppraisalRequest MapToUpdate(GetAppraisalByIdResponse d) => new UpdateAppraisalRequest
+    {
+        Id = d.Id,
+        EmployeeId = d.EmployeeId!,
+        EmployeeCode = d.EmployeeCode,
+        EmployeeName = d.EmployeeName,
+        LastRating = d.LastRating!,
+        CurrentSalary = d.CurrentSalary,
+        IncrementPercentage = d.IncrementPercentage,
+        NewSalary = d.NewSalary,
+        AppraisalType = d.AppraisalType!,
+        EffectiveDate = d.EffectiveDate,
+        AppraisalNote = d.AppraisalNote!,
+        Status = d.Status!,
+        CreatedAt = d.CreatedAt,
+        CreatedBy = d.CreatedBy,
+        UpdatedAt = d.UpdatedAt,
+        UpdatedBy = d.UpdatedBy
+    };
+
+    private async Task OnDelete()
+    {
+        if (_selectedAppraisal == null) return;
+        var dialog = await DialogService.ShowAsync<Features.Root.Shared._DeleteConfirmation>("", new DialogParameters<Features.Root.Shared._DeleteConfirmation> { { x => x.ContentText, $"Appraisal for {_selectedAppraisal.EmployeeName}" } });
+        if (!(await dialog.Result).Canceled)
+        {
+            if (await AppraisalService.DeleteAppraisalByIdAsync(_selectedAppraisal.Id!))
+            {
+                await LoadData(); Snackbar.Add("Appraisal record removed", Severity.Success);
+            }
+        }
+    }
+}
@@ -0,0 +1,232 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Performance.Appraisal
+@using Indotalent.Features.Performance.Appraisal.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject AppraisalService AppraisalService
+@inject LeaveRequestService LeaveRequestService
+@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 ? "Appraisal Details" : "Edit Appraisal")</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Review or modify the compensation adjustment record.</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">Syncing appraisal 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"
+                               For="@(() => _model.EmployeeId)"
+                               Validation="@(_updateValidator.ValidateValue())"
+                               ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter">
+                        @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">Appraisal Type</MudText>
+                    <MudSelect T="string" @bind-Value="_model.AppraisalType"
+                               For="@(() => _model.AppraisalType)"
+                               Validation="@(_updateValidator.ValidateValue())"
+                               ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense">
+                        <MudSelectItem Value="@("Annual Review")">Annual Review</MudSelectItem>
+                        <MudSelectItem Value="@("Promotion")">Promotion</MudSelectItem>
+                        <MudSelectItem Value="@("Special Adjustment")">Special Adjustment</MudSelectItem>
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Last Performance Rating</MudText>
+                    <MudTextField @bind-Value="_model.LastRating" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Effective Date</MudText>
+                    <MudDatePicker @bind-Date="_effectiveDate" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Status</MudText>
+                    <MudSelect T="string" @bind-Value="_model.Status" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense">
+                        <MudSelectItem Value="@("Pending")">Pending</MudSelectItem>
+                        <MudSelectItem Value="@("Approved")">Approved</MudSelectItem>
+                        <MudSelectItem Value="@("Processed")">Processed</MudSelectItem>
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Current Salary</MudText>
+                    <MudNumericField Value="_model.CurrentSalary"
+                                     T="decimal"
+                                     Format="N0"
+                                     ReadOnly="ReadOnly"
+                                     Variant="Variant.Outlined"
+                                     Margin="Margin.Dense"
+                                     Immediate="true"
+                                     ValueChanged="OnSalaryChanged" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Increment Percentage (%)</MudText>
+                    <MudNumericField Value="_model.IncrementPercentage"
+                                     T="decimal"
+                                     ReadOnly="ReadOnly"
+                                     Variant="Variant.Outlined"
+                                     Margin="Margin.Dense"
+                                     Immediate="true"
+                                     ValueChanged="OnPercentageChanged" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">New Salary</MudText>
+                    <MudNumericField @bind-Value="_model.NewSalary" T="decimal" Format="N0" ReadOnly="true" Variant="Variant.Outlined" Margin="Margin.Dense" Style="background-color: #F8FAFC;" />
+                </MudItem>
+                <MudItem xs="12">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Appraisal Notes</MudText>
+                    <MudTextField @bind-Value="_model.AppraisalNote" ReadOnly="ReadOnly" Lines="3" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </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">
+                    <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.Primary" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 4px; text-transform: none; font-weight: 700;">
+                        @if (_processing)
+                        {
+                            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                            <MudText Class="ms-2">Updating...</MudText>
+                        }
+                        else
+                        {
+                            <MudText>Save Changes</MudText>
+                        }
+                    </MudButton>
+                }
+            </div>
+        </MudForm>
+    }
+</MudPaper>
+
+@code {
+    [Parameter] public UpdateAppraisalRequest 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 UpdateAppraisalRequest _model = new();
+    private UpdateAppraisalValidator _updateValidator = new();
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private bool _processing = false;
+    private bool _isInitialLoading = true;
+
+    private DateTime? _effectiveDate { get => _model.EffectiveDate; set => _model.EffectiveDate = value ?? DateTime.Today; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        _isInitialLoading = true;
+        try
+        {
+            _model = new UpdateAppraisalRequest
+            {
+                Id = Data.Id,
+                EmployeeId = Data.EmployeeId,
+                LastRating = Data.LastRating,
+                CurrentSalary = Data.CurrentSalary,
+                IncrementPercentage = Data.IncrementPercentage,
+                NewSalary = Data.NewSalary,
+                AppraisalType = Data.AppraisalType,
+                EffectiveDate = Data.EffectiveDate,
+                AppraisalNote = Data.AppraisalNote,
+                Status = Data.Status,
+                CreatedAt = Data.CreatedAt,
+                CreatedBy = Data.CreatedBy,
+                UpdatedAt = Data.UpdatedAt,
+                UpdatedBy = Data.UpdatedBy
+            };
+
+            var empRes = await LeaveRequestService.GetEmployeeReferenceAsync();
+            if (empRes?.IsSuccess == true) _employees = empRes.Value ?? new();
+        }
+        finally
+        {
+            _isInitialLoading = false;
+        }
+    }
+
+    private async Task OnSalaryChanged(decimal value)
+    {
+        _model.CurrentSalary = value;
+        CalculateNewSalary();
+        await Task.CompletedTask;
+    }
+
+    private async Task OnPercentageChanged(decimal value)
+    {
+        _model.IncrementPercentage = value;
+        CalculateNewSalary();
+        await Task.CompletedTask;
+    }
+
+    private void CalculateNewSalary()
+    {
+        _model.NewSalary = _model.CurrentSalary + (_model.CurrentSalary * _model.IncrementPercentage / 100);
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await AppraisalService.UpdateAppraisalAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess && response.Value?.Success == true)
+            {
+                Snackbar.Add("Appraisal updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,67 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+
+namespace Indotalent.Features.Performance.Appraisal.Cqrs;
+
+public class CreateAppraisalRequest
+{
+    public string EmployeeId { get; set; } = string.Empty;
+    public string LastRating { get; set; } = string.Empty;
+    public decimal CurrentSalary { get; set; }
+    public decimal IncrementPercentage { get; set; }
+    public decimal NewSalary { get; set; }
+    public string AppraisalType { get; set; } = string.Empty;
+    public DateTime EffectiveDate { get; set; }
+    public string AppraisalNote { get; set; } = string.Empty;
+    public string Status { get; set; } = string.Empty;
+}
+
+public class CreateAppraisalResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+}
+
+public record CreateAppraisalCommand(CreateAppraisalRequest Data) : IRequest<CreateAppraisalResponse>;
+
+public class CreateAppraisalHandler : IRequestHandler<CreateAppraisalCommand, CreateAppraisalResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateAppraisalHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateAppraisalResponse> Handle(CreateAppraisalCommand request, CancellationToken cancellationToken)
+    {
+        var entityName = nameof(Data.Entities.Appraisal);
+
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"{entityName.ToShortNameConsonant(3)}/{{Year}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.Appraisal
+        {
+            AutoNumber = autoNo,
+            EmployeeId = request.Data.EmployeeId,
+            LastRating = request.Data.LastRating,
+            CurrentSalary = request.Data.CurrentSalary,
+            IncrementPercentage = request.Data.IncrementPercentage,
+            NewSalary = request.Data.NewSalary,
+            AppraisalType = request.Data.AppraisalType,
+            EffectiveDate = request.Data.EffectiveDate,
+            AppraisalNote = request.Data.AppraisalNote,
+            Status = request.Data.Status
+        };
+
+        _context.Appraisal.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateAppraisalResponse
+        {
+            Id = entity.Id,
+            AutoNumber = entity.AutoNumber
+        };
+    }
+}
@@ -0,0 +1,15 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Performance.Appraisal.Cqrs;
+
+public class CreateAppraisalValidator : AbstractValidator<CreateAppraisalRequest>
+{
+    public CreateAppraisalValidator()
+    {
+        RuleFor(x => x.EmployeeId).NotEmpty().WithMessage("Employee is required");
+        RuleFor(x => x.AppraisalType).NotEmpty().WithMessage("Appraisal Type is required");
+        RuleFor(x => x.EffectiveDate).NotEmpty().WithMessage("Effective Date is required");
+        RuleFor(x => x.CurrentSalary).GreaterThanOrEqualTo(0);
+        RuleFor(x => x.IncrementPercentage).GreaterThanOrEqualTo(0);
+    }
+}
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Appraisal.Cqrs;
+
+public record DeleteAppraisalByIdRequest(string Id);
+
+public record DeleteAppraisalByIdCommand(DeleteAppraisalByIdRequest Data) : IRequest<bool>;
+
+public class DeleteAppraisalByIdHandler : IRequestHandler<DeleteAppraisalByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteAppraisalByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteAppraisalByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Appraisal
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.Appraisal.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,64 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Appraisal.Cqrs;
+
+public class GetAppraisalByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeCode { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? LastRating { get; set; }
+    public decimal CurrentSalary { get; set; }
+    public decimal IncrementPercentage { get; set; }
+    public decimal NewSalary { get; set; }
+    public string? AppraisalType { get; set; }
+    public DateTime EffectiveDate { get; set; }
+    public string? AppraisalNote { get; set; }
+    public string? Status { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetAppraisalByIdQuery(string Id) : IRequest<GetAppraisalByIdResponse?>;
+
+public class GetAppraisalByIdHandler : IRequestHandler<GetAppraisalByIdQuery, GetAppraisalByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetAppraisalByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetAppraisalByIdResponse?> Handle(GetAppraisalByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Appraisal
+            .AsNoTracking()
+            .Include(x => x.Employee)
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetAppraisalByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeCode = x.Employee != null ? x.Employee.Code : string.Empty,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                LastRating = x.LastRating,
+                CurrentSalary = x.CurrentSalary,
+                IncrementPercentage = x.IncrementPercentage,
+                NewSalary = x.NewSalary,
+                AppraisalType = x.AppraisalType,
+                EffectiveDate = x.EffectiveDate,
+                AppraisalNote = x.AppraisalNote,
+                Status = x.Status,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,54 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Appraisal.Cqrs;
+
+public class GetAppraisalListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeCode { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? LastRating { get; set; }
+    public decimal CurrentSalary { get; set; }
+    public decimal IncrementPercentage { get; set; }
+    public decimal NewSalary { get; set; }
+    public string? Status { get; set; }
+    public DateTime EffectiveDate { get; set; }
+}
+
+public record GetAppraisalListQuery() : IRequest<List<GetAppraisalListResponse>>;
+
+public class GetAppraisalListHandler : IRequestHandler<GetAppraisalListQuery, List<GetAppraisalListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetAppraisalListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetAppraisalListResponse>> Handle(GetAppraisalListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Appraisal
+            .AsNoTracking()
+            .NotDeletedOnly()
+            .Include(x => x.Employee)
+            .OrderByDescending(x => x.EffectiveDate)
+            .Select(x => new GetAppraisalListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeCode = x.Employee != null ? x.Employee.Code : string.Empty,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                LastRating = x.LastRating,
+                CurrentSalary = x.CurrentSalary,
+                IncrementPercentage = x.IncrementPercentage,
+                NewSalary = x.NewSalary,
+                Status = x.Status,
+                EffectiveDate = x.EffectiveDate
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,60 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Appraisal.Cqrs;
+
+public class UpdateAppraisalRequest : CreateAppraisalRequest
+{
+    public string? Id { get; set; }
+    public string? EmployeeCode { get; set; }
+    public string? EmployeeName { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateAppraisalResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateAppraisalCommand(UpdateAppraisalRequest Data) : IRequest<UpdateAppraisalResponse>;
+
+public class UpdateAppraisalHandler : IRequestHandler<UpdateAppraisalCommand, UpdateAppraisalResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateAppraisalHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateAppraisalResponse> Handle(UpdateAppraisalCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Appraisal
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateAppraisalResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.EmployeeId = request.Data.EmployeeId;
+        entity.LastRating = request.Data.LastRating;
+        entity.CurrentSalary = request.Data.CurrentSalary;
+        entity.IncrementPercentage = request.Data.IncrementPercentage;
+        entity.NewSalary = request.Data.NewSalary;
+        entity.AppraisalType = request.Data.AppraisalType;
+        entity.EffectiveDate = request.Data.EffectiveDate;
+        entity.AppraisalNote = request.Data.AppraisalNote;
+        entity.Status = request.Data.Status;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateAppraisalResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,13 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Performance.Appraisal.Cqrs;
+
+public class UpdateAppraisalValidator : AbstractValidator<UpdateAppraisalRequest>
+{
+    public UpdateAppraisalValidator()
+    {
+        RuleFor(x => x.Id).NotEmpty().WithMessage("ID is required for update");
+        RuleFor(x => x.EmployeeId).NotEmpty().WithMessage("Employee is required");
+        RuleFor(x => x.AppraisalType).NotEmpty().WithMessage("Appraisal Type is required");
+    }
+}
@@ -0,0 +1,46 @@
+@page "/performance/evaluation"
+@using Indotalent.Features.Performance.Evaluation.Components
+@using Indotalent.Features.Performance.Evaluation.Cqrs
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_EvaluationCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_EvaluationUpdateForm Data="_selectedData!" ReadOnly="@(_currentView == ViewMode.View)" OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_EvaluationDataTable 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 UpdateEvaluationRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdateEvaluationRequest 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,130 @@
+@using Indotalent.Features.Performance.Evaluation
+@using Indotalent.Features.Performance.Evaluation.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest
+@using MudBlazor
+@inject EvaluationService EvaluationService
+@inject LeaveRequestService LeaveRequestService
+@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>
+            <div style="font-size: 1.25rem; font-weight: 900; color: #1a1a1a;">New Performance Evaluation</div>
+            <div style="font-size: 0.875rem; color: #64748b;">Create a new performance assessment record for an employee.</div>
+        </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">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Target Employee</label>
+                <MudSelect T="string" @bind-Value="_model.EmployeeId" Required="true" RequiredError="Employee is required" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomLeft">
+                    @foreach (var emp in _employees)
+                    {
+                        <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Evaluator / Manager</label>
+                <MudSelect T="string" @bind-Value="_model.EvaluatorId" Required="true" RequiredError="Evaluator is required" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomLeft">
+                    @foreach (var emp in _employees)
+                    {
+                        <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Evaluation Period</label>
+                <MudTextField @bind-Value="_model.Period" Required="true" RequiredError="Period is required" Placeholder="e.g. Annual 2026" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Evaluation Date</label>
+                <MudDatePicker @bind-Date="_evalDate" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+            <MudItem xs="12" sm="4">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Status</label>
+                <MudSelect T="string" @bind-Value="_model.Status" Variant="Variant.Outlined" Margin="Margin.Dense">
+                    <MudSelectItem Value="@("Draft")">Draft</MudSelectItem>
+                    <MudSelectItem Value="@("Reviewing")">Reviewing</MudSelectItem>
+                    <MudSelectItem Value="@("Completed")">Completed</MudSelectItem>
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Final Score (0-100)</label>
+                <MudTextField @bind-Value="_model.FinalScore" Required="true" RequiredError="Score is required" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Rating</label>
+                <div class="d-flex align-center mt-2">
+                    @{
+                        int.TryParse(_model.Rating, out int ratingVal);
+                    }
+                    <MudRating SelectedValue="@ratingVal" SelectedValueChanged="@((int val) => _model.Rating = val.ToString())" Color="Color.Warning" />
+                </div>
+            </MudItem>
+            <MudItem xs="12">
+                <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Evaluation Notes</label>
+                <MudTextField @bind-Value="_model.EvaluationNote" Lines="3" 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; 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" />
+                    <span class="ms-2">Processing...</span>
+                }
+                else
+                {
+                    <span>Create Evaluation</span>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreateEvaluationRequest _model = new() { EvaluationDate = DateTime.Today, Status = "Draft", Rating = "0" };
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private bool _processing = false;
+
+    private DateTime? _evalDate { get => _model.EvaluationDate; set => _model.EvaluationDate = value ?? DateTime.Today; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        var empRes = await LeaveRequestService.GetEmployeeReferenceAsync();
+        if (empRes?.IsSuccess == true)
+        {
+            _employees = empRes.Value ?? new();
+        }
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await EvaluationService.CreateEvaluationAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Evaluation created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,450 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Performance.Evaluation
+@using Indotalent.Features.Performance.Evaluation.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject EvaluationService EvaluationService
+@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;">Performance Evaluation</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF;">Review and manage employee performance ratings and periodic assessments.</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;">Performance</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Evaluation</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: #F8FAFC; 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;">
+                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 (_selectedEval != null)
+            {
+                <MudButton Variant="Variant.Outlined" Color="Color.Info" StartIcon="@Icons.Material.Filled.Visibility" OnClick="InvokeView" Size="Size.Small" Style="border: 1px solid #D1D5DB; text-transform: none; font-weight: 500; border-radius: 6px; background: white; color: #6B7280;">View Detail</MudButton>
+                <MudButton Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Edit" OnClick="InvokeEdit" Size="Size.Small" Style="border: 1px solid #D1D5DB; text-transform: none; font-weight: 500; border-radius: 6px; background: white; color: #6B7280;">Edit</MudButton>
+                <MudButton Variant="Variant.Outlined" Color="Color.Error" StartIcon="@Icons.Material.Filled.Delete" OnClick="OnDelete" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px; border: 1px solid #FCA5A5; color: #EF4444; background: white;">Remove</MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedEval = 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;">
+                    New Evaluation
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetEvaluationListResponse" OnRowClick="@((args) => _selectedEval = 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<GetEvaluationListResponse, 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<GetEvaluationListResponse, object>(x => x.Period!)">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<GetEvaluationListResponse, object>(x => x.FinalScore!)">Final Score</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<GetEvaluationListResponse, object>(x => x.Rating!)">Rating</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<GetEvaluationListResponse, object>(x => x.EvaluatorName!)">Evaluator</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<GetEvaluationListResponse, object>(x => x.Status!)">Status</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedEval?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>
+                <div class="d-flex align-center">
+                    <MudAvatar Color="@GetRandomColor(context.EmployeeName!)" Size="Size.Small" Class="mr-3" Style="font-weight: 600; font-size: 0.65rem;">
+                        @GetInitials(context.EmployeeName!)
+                    </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>
+                <MudText Typo="Typo.body2" Style="font-weight: 600;">@context.Period</MudText>
+            </MudTd>
+            <MudTd>
+                <MudText Typo="Typo.body2" Style="font-weight: 600; color: #1E88E5;">@context.FinalScore / 100</MudText>
+            </MudTd>
+            <MudTd>
+                @{
+                    int.TryParse(context.Rating, out int ratingValue);
+                }
+                <MudRating SelectedValue="@ratingValue" ReadOnly="true" Size="Size.Small" Color="Color.Warning" />
+            </MudTd>
+            <MudTd>
+                <MudText Typo="Typo.body2">@context.EvaluatorName</MudText>
+            </MudTd>
+            <MudTd>
+                <MudChip T="string" Color="@GetStatusColor(context.Status!)" Size="Size.Small" Variant="Variant.Text" Style="font-weight: 600; border-radius: 0px; text-transform: uppercase; font-size: 0.65rem; background-color: #f5f5f5;">
+                    @context.Status
+                </MudChip>
+            </MudTd>
+        </RowTemplate>
+    </MudTable>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background-color: #F8FAFC; border-top: 2px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 700; color: #1e293b;">Rows per page:</MudText>
+            
+            <MudSelect T="int" 
+                       Value="@_top" 
+                       ValueChanged="OnPageSizeChanged" 
+                       Dense="true" 
+                       Margin="Margin.Dense" 
+                       Style="width: 80px; background-color: white; font-size: 0.75rem; font-weight: 500;" 
+                       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="color: #64748b; 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;")"  />
+            <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; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;" : "text-transform: none; font-weight: 500; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;")">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; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;" : "text-transform: none; font-weight: 500; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;")">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;")"  />
+        </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: 8px !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<UpdateEvaluationRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateEvaluationRequest> OnView { get; set; }
+
+    private List<GetEvaluationListResponse> _evaluations = new();
+    private GetEvaluationListResponse? _selectedEval;
+    private string _searchString = "";
+    private int _currentPage = 1;
+    private int _top = 5;
+    private int _skip => (_currentPage - 1) * _top;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / _top);
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        _selectedEval = null;
+        StateHasChanged();
+
+        try
+        {
+            await Task.Delay(800);
+            var response = await EvaluationService.GetEvaluationListAsync();
+            if (response != null && response.IsSuccess)
+            {
+                _evaluations = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetEvaluationListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _evaluations;
+        return _evaluations.Where(x => 
+            (x.EmployeeName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.EmployeeCode?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Period?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.EvaluatorName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Status?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetEvaluationListResponse> 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("Evaluations");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Employee Code";
+                worksheet.Cell(currentRow, 2).Value = "Employee Name";
+                worksheet.Cell(currentRow, 3).Value = "Period";
+                worksheet.Cell(currentRow, 4).Value = "Final Score";
+                worksheet.Cell(currentRow, 5).Value = "Rating";
+                worksheet.Cell(currentRow, 6).Value = "Evaluator";
+                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.EmployeeCode;
+                    worksheet.Cell(currentRow, 2).Value = item.EmployeeName;
+                    worksheet.Cell(currentRow, 3).Value = item.Period;
+                    worksheet.Cell(currentRow, 4).Value = item.FinalScore;
+                    worksheet.Cell(currentRow, 5).Value = item.Rating;
+                    worksheet.Cell(currentRow, 6).Value = item.EvaluatorName;
+                    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", "Performance_Evaluation_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()
+    {
+        _currentPage = 1;
+        _selectedEval = null;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private void OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _currentPage = page;
+            _selectedEval = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _currentPage = 1;
+        _selectedEval = null;
+        StateHasChanged();
+    }
+
+    private string GetInitials(string name)
+    {
+        if (string.IsNullOrWhiteSpace(name)) return "??";
+        var parts = name.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+        if (parts.Length > 1) return $"{parts[0][0]}{parts[1][0]}".ToUpper();
+        return name.Length >= 2 ? name.Substring(0, 2).ToUpper() : name.ToUpper();
+    }
+
+    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
+    {
+        "Completed" => Color.Success,
+        "Reviewing" => Color.Info,
+        "Draft" => Color.Default,
+        _ => Color.Default
+    };
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedEval != null)
+        {
+            var res = await EvaluationService.GetEvaluationByIdAsync(_selectedEval.Id!);
+            if (res?.Value != null) await OnEdit.InvokeAsync(MapToUpdate(res.Value));
+        }
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedEval != null)
+        {
+            var res = await EvaluationService.GetEvaluationByIdAsync(_selectedEval.Id!);
+            if (res?.Value != null) await OnView.InvokeAsync(MapToUpdate(res.Value));
+        }
+    }
+
+    private UpdateEvaluationRequest MapToUpdate(GetEvaluationByIdResponse d) => new UpdateEvaluationRequest
+    {
+        Id = d.Id,
+        EmployeeId = d.EmployeeId!,
+        EmployeeCode = d.EmployeeCode,
+        EmployeeName = d.EmployeeName,
+        Period = d.Period!,
+        FinalScore = d.FinalScore!,
+        Rating = d.Rating!,
+        EvaluatorId = d.EvaluatorId!,
+        EvaluatorCode = d.EvaluatorCode,
+        EvaluatorName = d.EvaluatorName,
+        EvaluationDate = d.EvaluationDate,
+        EvaluationNote = d.EvaluationNote!,
+        Status = d.Status!,
+        CreatedAt = d.CreatedAt,
+        CreatedBy = d.CreatedBy,
+        UpdatedAt = d.UpdatedAt,
+        UpdatedBy = d.UpdatedBy
+    };
+
+    private async Task OnDelete()
+    {
+        if (_selectedEval == null) return;
+        var dialog = await DialogService.ShowAsync<Features.Root.Shared._DeleteConfirmation>("", new DialogParameters<Features.Root.Shared._DeleteConfirmation> { { x => x.ContentText, $"Evaluation for {_selectedEval.EmployeeName}" } });
+        if (!(await dialog.Result).Canceled)
+        {
+            if (await EvaluationService.DeleteEvaluationByIdAsync(_selectedEval.Id!))
+            {
+                await LoadData(); Snackbar.Add("Evaluation removed", Severity.Success);
+            }
+        }
+    }
+}
@@ -0,0 +1,197 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Performance.Evaluation
+@using Indotalent.Features.Performance.Evaluation.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest
+@using MudBlazor
+@inject EvaluationService EvaluationService
+@inject LeaveRequestService LeaveRequestService
+@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>
+            <div style="font-size: 1.25rem; font-weight: 900; color: #1a1a1a;">@(ReadOnly ? "Evaluation Details" : "Edit Evaluation")</div>
+            <div style="font-size: 0.875rem; color: #64748b;">Review or modify the performance assessment record.</div>
+        </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" />
+            <div style="margin-top: 16px; font-size: 0.875rem; color: #64748b;">Loading data...</div>
+        </div>
+    }
+    else
+    {
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="3">
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Employee</label>
+                    <MudSelect T="string" @bind-Value="_model.EmployeeId" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomLeft">
+                        @foreach (var emp in _employees)
+                        {
+                            <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Evaluator</label>
+                    <MudSelect T="string" @bind-Value="_model.EvaluatorId" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomLeft">
+                        @foreach (var emp in _employees)
+                        {
+                            <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Period</label>
+                    <MudTextField @bind-Value="_model.Period" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Evaluation Date</label>
+                    <MudDatePicker @bind-Date="_evalDate" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Status</label>
+                    <MudSelect T="string" @bind-Value="_model.Status" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense">
+                        <MudSelectItem Value="@("Draft")">Draft</MudSelectItem>
+                        <MudSelectItem Value="@("Reviewing")">Reviewing</MudSelectItem>
+                        <MudSelectItem Value="@("Completed")">Completed</MudSelectItem>
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Final Score</label>
+                    <MudTextField @bind-Value="_model.FinalScore" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Rating</label>
+                    <div class="d-flex align-center mt-2">
+                        @{
+                            int.TryParse(_model.Rating, out int ratingVal);
+                        }
+                        <MudRating SelectedValue="@ratingVal" SelectedValueChanged="@((int val) => _model.Rating = val.ToString())" ReadOnly="ReadOnly" Color="Color.Warning" />
+                    </div>
+                </MudItem>
+                <MudItem xs="12">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Evaluation Notes</label>
+                    <MudTextField @bind-Value="_model.EvaluationNote" ReadOnly="ReadOnly" Lines="3" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+
+                <MudItem xs="12" Class="mt-4">
+                    <div style="font-size: 0.875rem; font-weight: 800; color: var(--mud-palette-primary); text-transform: uppercase;">Audit History</div>
+                    <MudDivider Class="mt-2 mb-4" />
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Created At</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@DateTimeExtensions.ToString(_model.CreatedAt)</div>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Created By</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@(!string.IsNullOrEmpty(_model.CreatedBy) ? _model.CreatedBy : "System")</div>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Last Updated At</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@DateTimeExtensions.ToString(_model.UpdatedAt)</div>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Last Updated By</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@(!string.IsNullOrEmpty(_model.UpdatedBy) ? _model.UpdatedBy : "System")</div>
+                </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 Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                            <span class="ms-2">Updating...</span>
+                        }
+                        else
+                        {
+                            <span>Save Changes</span>
+                        }
+                    </MudButton>
+                }
+            </div>
+        </MudForm>
+    }
+</MudPaper>
+
+@code {
+    [Parameter] public UpdateEvaluationRequest 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 UpdateEvaluationRequest _model = new();
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private bool _processing = false;
+    private bool _isInitialLoading = true;
+
+    private DateTime? _evalDate { get => _model.EvaluationDate; set => _model.EvaluationDate = value ?? DateTime.Today; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        _isInitialLoading = true;
+        try
+        {
+            _model = new UpdateEvaluationRequest
+            {
+                Id = Data.Id,
+                EmployeeId = Data.EmployeeId,
+                Period = Data.Period,
+                FinalScore = Data.FinalScore,
+                Rating = Data.Rating,
+                EvaluatorId = Data.EvaluatorId,
+                EvaluationDate = Data.EvaluationDate,
+                EvaluationNote = Data.EvaluationNote,
+                Status = Data.Status,
+                CreatedAt = Data.CreatedAt,
+                CreatedBy = Data.CreatedBy,
+                UpdatedAt = Data.UpdatedAt,
+                UpdatedBy = Data.UpdatedBy
+            };
+
+            var empRes = await LeaveRequestService.GetEmployeeReferenceAsync();
+            if (empRes?.IsSuccess == true)
+            {
+                _employees = empRes.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isInitialLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await EvaluationService.UpdateEvaluationAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess && response.Value?.Success == true)
+            {
+                Snackbar.Add("Evaluation 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.Performance.Evaluation.Cqrs;
+
+public class CreateEvaluationRequest
+{
+    public string EmployeeId { get; set; } = string.Empty;
+    public string Period { get; set; } = string.Empty;
+    public string FinalScore { get; set; } = string.Empty;
+    public string Rating { get; set; } = string.Empty;
+    public string EvaluatorId { get; set; } = string.Empty;
+    public DateTime EvaluationDate { get; set; }
+    public string EvaluationNote { get; set; } = string.Empty;
+    public string Status { get; set; } = string.Empty;
+}
+
+public class CreateEvaluationResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+}
+
+public record CreateEvaluationCommand(CreateEvaluationRequest Data) : IRequest<CreateEvaluationResponse>;
+
+public class CreateEvaluationHandler : IRequestHandler<CreateEvaluationCommand, CreateEvaluationResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateEvaluationHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateEvaluationResponse> Handle(CreateEvaluationCommand request, CancellationToken cancellationToken)
+    {
+        var entityName = nameof(Data.Entities.Evaluation);
+
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"{entityName.ToShortNameConsonant(3)}/{{Year}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.Evaluation
+        {
+            AutoNumber = autoNo,
+            EmployeeId = request.Data.EmployeeId,
+            Period = request.Data.Period,
+            FinalScore = request.Data.FinalScore,
+            Rating = request.Data.Rating,
+            EvaluatorId = request.Data.EvaluatorId,
+            EvaluationDate = request.Data.EvaluationDate,
+            EvaluationNote = request.Data.EvaluationNote,
+            Status = request.Data.Status
+        };
+
+        _context.Evaluation.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateEvaluationResponse
+        {
+            Id = entity.Id,
+            AutoNumber = entity.AutoNumber
+        };
+    }
+}
@@ -0,0 +1,26 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Performance.Evaluation.Cqrs;
+
+public class CreateEvaluationValidator : AbstractValidator<CreateEvaluationRequest>
+{
+    public CreateEvaluationValidator()
+    {
+        RuleFor(x => x.EmployeeId)
+            .NotEmpty().WithMessage("Employee is required");
+
+        RuleFor(x => x.Period)
+            .NotEmpty().WithMessage("Evaluation Period is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.FinalScore)
+            .NotEmpty().WithMessage("Final Score is required");
+
+        RuleFor(x => x.EvaluatorId)
+            .NotEmpty().WithMessage("Evaluator is required");
+
+        RuleFor(x => x.EvaluationDate)
+            .NotEmpty().WithMessage("Evaluation Date is required");
+    }
+}
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Evaluation.Cqrs;
+
+public record DeleteEvaluationByIdRequest(string Id);
+
+public record DeleteEvaluationByIdCommand(DeleteEvaluationByIdRequest Data) : IRequest<bool>;
+
+public class DeleteEvaluationByIdHandler : IRequestHandler<DeleteEvaluationByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteEvaluationByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteEvaluationByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Evaluation
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.Evaluation.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,67 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Evaluation.Cqrs;
+
+public class GetEvaluationByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeCode { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? Period { get; set; }
+    public string? FinalScore { get; set; }
+    public string? Rating { get; set; }
+    public string? EvaluatorId { get; set; }
+    public string? EvaluatorCode { get; set; }
+    public string? EvaluatorName { get; set; }
+    public DateTime EvaluationDate { get; set; }
+    public string? EvaluationNote { get; set; }
+    public string? Status { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetEvaluationByIdQuery(string Id) : IRequest<GetEvaluationByIdResponse?>;
+
+public class GetEvaluationByIdHandler : IRequestHandler<GetEvaluationByIdQuery, GetEvaluationByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetEvaluationByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetEvaluationByIdResponse?> Handle(GetEvaluationByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Evaluation
+            .AsNoTracking()
+            .Include(x => x.Employee)
+            .Include(x => x.Evaluator)
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetEvaluationByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeCode = x.Employee != null ? x.Employee.Code : string.Empty,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                Period = x.Period,
+                FinalScore = x.FinalScore,
+                Rating = x.Rating,
+                EvaluatorId = x.EvaluatorId,
+                EvaluatorCode = x.Evaluator != null ? x.Evaluator.Code : string.Empty,
+                EvaluatorName = x.Evaluator != null ? $"{x.Evaluator.FirstName} {x.Evaluator.LastName}" : string.Empty,
+                EvaluationDate = x.EvaluationDate,
+                EvaluationNote = x.EvaluationNote,
+                Status = x.Status,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,55 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Evaluation.Cqrs;
+
+public class GetEvaluationListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeCode { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? Period { get; set; }
+    public string? FinalScore { get; set; }
+    public string? Rating { get; set; }
+    public string? EvaluatorName { get; set; }
+    public string? Status { get; set; }
+    public DateTime EvaluationDate { get; set; }
+}
+
+public record GetEvaluationListQuery() : IRequest<List<GetEvaluationListResponse>>;
+
+public class GetEvaluationListHandler : IRequestHandler<GetEvaluationListQuery, List<GetEvaluationListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetEvaluationListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetEvaluationListResponse>> Handle(GetEvaluationListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Evaluation
+            .AsNoTracking()
+            .NotDeletedOnly()
+            .Include(x => x.Employee)
+            .Include(x => x.Evaluator)
+            .OrderByDescending(x => x.EvaluationDate)
+            .Select(x => new GetEvaluationListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeCode = x.Employee != null ? x.Employee.Code : string.Empty,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                Period = x.Period,
+                FinalScore = x.FinalScore,
+                Rating = x.Rating,
+                EvaluatorName = x.Evaluator != null ? $"{x.Evaluator.FirstName} {x.Evaluator.LastName}" : string.Empty,
+                Status = x.Status,
+                EvaluationDate = x.EvaluationDate
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,61 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Evaluation.Cqrs;
+
+public class UpdateEvaluationRequest : CreateEvaluationRequest
+{
+    public string? Id { get; set; }
+    public string? EmployeeCode { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? EvaluatorCode { get; set; }
+    public string? EvaluatorName { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateEvaluationResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateEvaluationCommand(UpdateEvaluationRequest Data) : IRequest<UpdateEvaluationResponse>;
+
+public class UpdateEvaluationHandler : IRequestHandler<UpdateEvaluationCommand, UpdateEvaluationResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateEvaluationHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateEvaluationResponse> Handle(UpdateEvaluationCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Evaluation
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateEvaluationResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.EmployeeId = request.Data.EmployeeId;
+        entity.Period = request.Data.Period;
+        entity.FinalScore = request.Data.FinalScore;
+        entity.Rating = request.Data.Rating;
+        entity.EvaluatorId = request.Data.EvaluatorId;
+        entity.EvaluationDate = request.Data.EvaluationDate;
+        entity.EvaluationNote = request.Data.EvaluationNote;
+        entity.Status = request.Data.Status;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateEvaluationResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,26 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Performance.Evaluation.Cqrs;
+
+public class UpdateEvaluationValidator : AbstractValidator<UpdateEvaluationRequest>
+{
+    public UpdateEvaluationValidator()
+    {
+        RuleFor(x => x.Id)
+            .NotEmpty().WithMessage("ID is required for update");
+
+        RuleFor(x => x.EmployeeId)
+            .NotEmpty().WithMessage("Employee is required");
+
+        RuleFor(x => x.Period)
+            .NotEmpty().WithMessage("Evaluation Period is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.FinalScore)
+            .NotEmpty().WithMessage("Final Score is required");
+
+        RuleFor(x => x.EvaluatorId)
+            .NotEmpty().WithMessage("Evaluator is required");
+    }
+}
@@ -0,0 +1,55 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Performance.Evaluation.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Performance.Evaluation;
+
+public static class EvaluationEndpoint
+{
+    public static void MapEvaluationEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/performance-evaluation").WithTags("Performance Evaluations")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetEvaluationListQuery());
+            return result.ToApiResponse("Evaluation list retrieved successfully");
+        })
+        .WithName("GetEvaluationList");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetEvaluationByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Evaluation detail retrieved successfully"
+                : $"Evaluation with ID {id} not found");
+        })
+        .WithName("GetEvaluationById");
+
+        group.MapPost("/", async (CreateEvaluationRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateEvaluationCommand(request));
+            return result.ToApiResponse("Evaluation has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateEvaluation");
+
+        group.MapPost("/update", async (UpdateEvaluationRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateEvaluationCommand(request));
+            if (!result.Success) return ((object?)null).ToApiResponse("Update failed.");
+            return result.ToApiResponse("Evaluation has been updated successfully");
+        })
+        .WithName("UpdateEvaluation");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteEvaluationByIdCommand(new DeleteEvaluationByIdRequest(id)));
+            if (!result) return ((object?)null).ToApiResponse("Delete failed.");
+            return true.ToApiResponse("Evaluation has been deleted successfully");
+        })
+        .WithName("DeleteEvaluationById");
+    }
+}
@@ -0,0 +1,54 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Performance.Evaluation.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Performance.Evaluation;
+
+public class EvaluationService : BaseService
+{
+    private readonly RestClient _client;
+
+    public EvaluationService(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<GetEvaluationListResponse>>?> GetEvaluationListAsync()
+    {
+        var request = new RestRequest("api/performance-evaluation", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetEvaluationListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetEvaluationByIdResponse>?> GetEvaluationByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/performance-evaluation/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetEvaluationByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateEvaluationResponse>?> CreateEvaluationAsync(CreateEvaluationRequest data)
+    {
+        var request = new RestRequest("api/performance-evaluation", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateEvaluationResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteEvaluationByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/performance-evaluation/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdateEvaluationResponse>?> UpdateEvaluationAsync(UpdateEvaluationRequest data)
+    {
+        var request = new RestRequest("api/performance-evaluation/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateEvaluationResponse>(_client, request);
+    }
+}
@@ -0,0 +1,105 @@
+@page "/performance"
+@using Microsoft.AspNetCore.Authorization
+@using Indotalent.Infrastructure.Authorization.Identity
+@attribute [Authorize(Roles = $"{ApplicationRoles.Admin},{ApplicationRoles.Member}")]
+@using Indotalent.Features.Performance.Appraisal.Components
+@using Indotalent.Features.Performance.Evaluation
+@using Indotalent.Features.Performance.Appraisal
+@using Indotalent.Features.Performance.Evaluation.Components
+@using Indotalent.Features.Performance.Promotion
+@using Indotalent.Features.Performance.Promotion.Components
+@using Indotalent.Features.Performance.Transfer
+@using Indotalent.Features.Performance.Transfer.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: 150px;
+        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="Evaluation" Icon="@Icons.Material.Outlined.RateReview">
+                <EvaluationPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Appraisal" Icon="@Icons.Material.Outlined.MonetizationOn">
+                <AppraisalPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Promotion" Icon="@Icons.Material.Outlined.TrendingUp">
+                <PromotionPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Transfer" Icon="@Icons.Material.Outlined.SwapHoriz">
+                <TransferPage />
+            </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
+            {
+                "evaluation" => 0,
+                "appraisal" => 1,
+                "promotion" => 2,
+                "transfer" => 3,
+                _ => 0
+            };
+        }
+    }
+
+    private void OnTabChanged(int index)
+    {
+        _activeTabIndex = index;
+        string tabName = index switch
+        {
+            0 => "evaluation",
+            1 => "appraisal",
+            2 => "promotion",
+            3 => "transfer",
+            _ => "evaluation"
+        };
+
+        NavigationManager.NavigateTo($"/performance?tab={tabName}", replace: false);
+    }
+}
@@ -0,0 +1,46 @@
+@page "/performance/promotion"
+@using Indotalent.Features.Performance.Promotion.Components
+@using Indotalent.Features.Performance.Promotion.Cqrs
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_PromotionCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_PromotionUpdateForm Data="_selectedData!" ReadOnly="@(_currentView == ViewMode.View)" OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_PromotionDataTable 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 UpdatePromotionRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdatePromotionRequest 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,130 @@
+@using Indotalent.Features.Performance.Promotion
+@using Indotalent.Features.Performance.Promotion.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest
+@using MudBlazor
+@inject PromotionService PromotionService
+@inject LeaveRequestService LeaveRequestService
+@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>
+            <div style="font-size: 1.25rem; font-weight: 900; color: #1a1a1a;">Nominate for Promotion</div>
+            <div style="font-size: 0.875rem; color: #64748b;">Create a new career advancement proposal for an employee.</div>
+        </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" />
+            <div style="margin-top: 16px; font-size: 0.875rem; color: #64748b;">Preparing resources...</div>
+        </div>
+    }
+    else
+    {
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="3">
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Employee</label>
+                    <MudSelect T="string" @bind-Value="_model.EmployeeId" Required="true" RequiredError="Employee is required" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter">
+                        @foreach (var emp in _employees)
+                        {
+                            <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Status</label>
+                    <MudSelect T="string" @bind-Value="_model.Status" Variant="Variant.Outlined" Margin="Margin.Dense">
+                        <MudSelectItem Value="@("Pending")">Pending</MudSelectItem>
+                        <MudSelectItem Value="@("Confirmed")">Confirmed</MudSelectItem>
+                        <MudSelectItem Value="@("Canceled")">Canceled</MudSelectItem>
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Current Grade / Position</label>
+                    <MudTextField @bind-Value="_model.FromGrade" Placeholder="e.g. Junior Developer" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Target Grade / Position</label>
+                    <MudTextField @bind-Value="_model.ToGrade" Required="true" RequiredError="Target grade is required" Placeholder="e.g. Senior Developer" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Effective Date</label>
+                    <MudDatePicker @bind-Date="_effectiveDate" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Promotion Notes / Justification</label>
+                    <MudTextField @bind-Value="_model.PromotionNote" Lines="4" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+            </MudGrid>
+
+            <div class="d-flex justify-end gap-2 mt-10">
+                <MudButton OnClick="() => OnCancel.InvokeAsync()" Variant="Variant.Outlined" 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" />
+                        <span class="ms-2">Processing...</span>
+                    }
+                    else
+                    {
+                        <span>Submit Nomination</span>
+                    }
+                </MudButton>
+            </div>
+        </MudForm>
+    }
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreatePromotionRequest _model = new();
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private bool _processing = false;
+    private bool _isInitialLoading = true;
+
+    private DateTime? _effectiveDate { get => _model.EffectiveDate; set => _model.EffectiveDate = value ?? DateTime.Today; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        _isInitialLoading = true;
+        try
+        {
+            _model = new CreatePromotionRequest { EffectiveDate = DateTime.Today, Status = "Pending" };
+            var empRes = await LeaveRequestService.GetEmployeeReferenceAsync();
+            if (empRes?.IsSuccess == true) _employees = empRes.Value ?? new();
+        }
+        finally
+        {
+            _isInitialLoading = false;
+        }
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await PromotionService.CreatePromotionAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Promotion nomination created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,439 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Performance.Promotion
+@using Indotalent.Features.Performance.Promotion.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject PromotionService PromotionService
+@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;">Career Promotion</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF;">Manage employee career advancement, grade changes, and role elevations.</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;">Performance</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Promotion</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: #F8FAFC; 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;">
+                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 (_selectedPromotion != null)
+            {
+                <MudButton Variant="Variant.Outlined" Color="Color.Info" StartIcon="@Icons.Material.Filled.Visibility" OnClick="InvokeView" Size="Size.Small" Style="border: 1px solid #D1D5DB; text-transform: none; font-weight: 500; border-radius: 6px; background: white; color: #6B7280;">View Detail</MudButton>
+                <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.AssignmentInd" OnClick="InvokeEdit" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px;">Confirm Promotion</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="() => _selectedPromotion = null" />
+            }
+            else
+            {
+                <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.TrendingUp" OnClick="() => OnAdd.InvokeAsync()" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px;">
+                    Nominate Employee
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetPromotionListResponse" OnRowClick="@((args) => _selectedPromotion = 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<GetPromotionListResponse, 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<GetPromotionListResponse, object>(x => x.FromGrade!)">From (Current)</MudTableSortLabel>
+            </MudTh>
+            <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<GetPromotionListResponse, object>(x => x.ToGrade!)">To (Proposed)</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<GetPromotionListResponse, object>(x => x.EffectiveDate!)">Effective Date</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<GetPromotionListResponse, object>(x => x.Status!)">Status</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedPromotion?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>
+                <div class="d-flex align-center">
+                    <MudAvatar Color="@GetRandomColor(context.EmployeeName!)" Size="Size.Small" Class="mr-3" Style="font-weight: 600; font-size: 0.65rem;">
+                        @GetInitials(context.EmployeeName!)
+                    </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>
+                <MudText Typo="Typo.body2" Style="font-size: 0.8rem;">@context.FromGrade</MudText>
+            </MudTd>
+            <MudTd>
+                <MudIcon Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" Color="Color.Default" />
+            </MudTd>
+            <MudTd>
+                <MudText Typo="Typo.body2" Style="font-weight: 700; color: var(--mud-palette-primary); font-size: 0.8rem;">@context.ToGrade</MudText>
+            </MudTd>
+            <MudTd>
+                <MudText Typo="Typo.body2" Style="font-weight: 600;">@context.EffectiveDate?.ToString("dd MMM yyyy")</MudText>
+            </MudTd>
+            <MudTd>
+                <MudChip T="string" Color="@GetStatusColor(context.Status!)" Size="Size.Small" Variant="Variant.Filled" Style="font-weight: 600; border-radius: 6px; 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: #F8FAFC; border-top: 2px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 700; color: #1e293b;">Rows per page:</MudText>
+            
+            <MudSelect T="int" 
+                       Value="@_top" 
+                       ValueChanged="OnPageSizeChanged" 
+                       Dense="true" 
+                       Margin="Margin.Dense" 
+                       Style="width: 80px; background-color: white; font-size: 0.75rem; font-weight: 500;" 
+                       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="color: #64748b; 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;")"  />
+            <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; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;" : "text-transform: none; font-weight: 500; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;")">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; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;" : "text-transform: none; font-weight: 500; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;")">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;")"  />
+        </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: 8px !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<UpdatePromotionRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdatePromotionRequest> OnView { get; set; }
+
+    private List<GetPromotionListResponse> _promotions = new();
+    private GetPromotionListResponse? _selectedPromotion;
+    private string _searchString = "";
+    private int _currentPage = 1;
+    private int _top = 5;
+    private int _skip => (_currentPage - 1) * _top;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / _top);
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        _selectedPromotion = null;
+        StateHasChanged();
+
+        try
+        {
+            await Task.Delay(800);
+            var response = await PromotionService.GetPromotionListAsync();
+            if (response != null && response.IsSuccess)
+            {
+                _promotions = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetPromotionListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _promotions;
+        return _promotions.Where(x => 
+            (x.EmployeeName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.EmployeeCode?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.FromGrade?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.ToGrade?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Status?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetPromotionListResponse> 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("Promotions");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Employee Code";
+                worksheet.Cell(currentRow, 2).Value = "Employee Name";
+                worksheet.Cell(currentRow, 3).Value = "Current Grade";
+                worksheet.Cell(currentRow, 4).Value = "Proposed Grade";
+                worksheet.Cell(currentRow, 5).Value = "Effective Date";
+                worksheet.Cell(currentRow, 6).Value = "Status";
+
+                var headerRange = worksheet.Range(1, 1, 1, 6);
+                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.EmployeeCode;
+                    worksheet.Cell(currentRow, 2).Value = item.EmployeeName;
+                    worksheet.Cell(currentRow, 3).Value = item.FromGrade;
+                    worksheet.Cell(currentRow, 4).Value = item.ToGrade;
+                    worksheet.Cell(currentRow, 5).Value = item.EffectiveDate?.ToString("dd-MMM-yyyy");
+                    worksheet.Cell(currentRow, 6).Value = item.Status;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Employee_Promotion_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()
+    {
+        _currentPage = 1;
+        _selectedPromotion = null;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private void OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _currentPage = page;
+            _selectedPromotion = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _currentPage = 1;
+        _selectedPromotion = null;
+        StateHasChanged();
+    }
+
+    private string GetInitials(string name)
+    {
+        if (string.IsNullOrWhiteSpace(name)) return "??";
+        var parts = name.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+        if (parts.Length > 1) return $"{parts[0][0]}{parts[1][0]}".ToUpper();
+        return name.Length >= 2 ? name.Substring(0, 2).ToUpper() : name.ToUpper();
+    }
+
+    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
+    {
+        "Confirmed" => Color.Success,
+        "Pending" => Color.Warning,
+        "Canceled" => Color.Error,
+        _ => Color.Default
+    };
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedPromotion != null)
+        {
+            var res = await PromotionService.GetPromotionByIdAsync(_selectedPromotion.Id!);
+            if (res?.Value != null) await OnEdit.InvokeAsync(MapToUpdate(res.Value));
+        }
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedPromotion != null)
+        {
+            var res = await PromotionService.GetPromotionByIdAsync(_selectedPromotion.Id!);
+            if (res?.Value != null) await OnView.InvokeAsync(MapToUpdate(res.Value));
+        }
+    }
+
+    private UpdatePromotionRequest MapToUpdate(GetPromotionByIdResponse d) => new UpdatePromotionRequest
+    {
+        Id = d.Id,
+        EmployeeId = d.EmployeeId!,
+        EmployeeCode = d.EmployeeCode,
+        EmployeeName = d.EmployeeName,
+        FromGrade = d.FromGrade!,
+        ToGrade = d.ToGrade!,
+        EffectiveDate = d.EffectiveDate,
+        PromotionNote = d.PromotionNote!,
+        Status = d.Status!,
+        CreatedAt = d.CreatedAt,
+        CreatedBy = d.CreatedBy,
+        UpdatedAt = d.UpdatedAt,
+        UpdatedBy = d.UpdatedBy
+    };
+
+    private async Task OnDelete()
+    {
+        if (_selectedPromotion == null) return;
+        var dialog = await DialogService.ShowAsync<Features.Root.Shared._DeleteConfirmation>("", new DialogParameters<Features.Root.Shared._DeleteConfirmation> { { x => x.ContentText, $"Promotion for {_selectedPromotion.EmployeeName}" } });
+        if (!(await dialog.Result).Canceled)
+        {
+            if (await PromotionService.DeletePromotionByIdAsync(_selectedPromotion.Id!))
+            {
+                await LoadData(); Snackbar.Add("Promotion record removed", Severity.Success);
+            }
+        }
+    }
+}
@@ -0,0 +1,174 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Performance.Promotion
+@using Indotalent.Features.Performance.Promotion.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest
+@using MudBlazor
+@inject PromotionService PromotionService
+@inject LeaveRequestService LeaveRequestService
+@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>
+            <div style="font-size: 1.25rem; font-weight: 900; color: #1a1a1a;">@(ReadOnly ? "Promotion Details" : "Edit Promotion Nomination")</div>
+            <div style="font-size: 0.875rem; color: #64748b;">Review or modify the career advancement record.</div>
+        </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" />
+            <div style="margin-top: 16px; font-size: 0.875rem; color: #64748b;">Syncing record...</div>
+        </div>
+    }
+    else
+    {
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="3">
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Employee</label>
+                    <MudSelect T="string" @bind-Value="_model.EmployeeId" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter">
+                        @foreach (var emp in _employees)
+                        {
+                            <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Status</label>
+                    <MudSelect T="string" @bind-Value="_model.Status" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense">
+                        <MudSelectItem Value="@("Pending")">Pending</MudSelectItem>
+                        <MudSelectItem Value="@("Confirmed")">Confirmed</MudSelectItem>
+                        <MudSelectItem Value="@("Canceled")">Canceled</MudSelectItem>
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Current Grade / Position</label>
+                    <MudTextField @bind-Value="_model.FromGrade" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Target Grade / Position</label>
+                    <MudTextField @bind-Value="_model.ToGrade" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Effective Date</label>
+                    <MudDatePicker @bind-Date="_effectiveDate" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Promotion Notes / Justification</label>
+                    <MudTextField @bind-Value="_model.PromotionNote" ReadOnly="ReadOnly" Lines="4" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+
+                <MudItem xs="12" Class="mt-4">
+                    <div style="font-size: 0.875rem; font-weight: 800; color: var(--mud-palette-primary); text-transform: uppercase;">Audit History</div>
+                    <MudDivider Class="mt-2 mb-4" />
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Created At</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@DateTimeExtensions.ToString(_model.CreatedAt)</div>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Created By</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@(!string.IsNullOrEmpty(_model.CreatedBy) ? _model.CreatedBy : "System")</div>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Last Updated At</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@DateTimeExtensions.ToString(_model.UpdatedAt)</div>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Last Updated By</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@(!string.IsNullOrEmpty(_model.UpdatedBy) ? _model.UpdatedBy : "System")</div>
+                </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 Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                            <span class="ms-2">Updating...</span>
+                        }
+                        else
+                        {
+                            <span>Save Changes</span>
+                        }
+                    </MudButton>
+                }
+            </div>
+        </MudForm>
+    }
+</MudPaper>
+
+@code {
+    [Parameter] public UpdatePromotionRequest 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 UpdatePromotionRequest _model = new();
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private bool _processing = false;
+    private bool _isInitialLoading = true;
+
+    private DateTime? _effectiveDate { get => _model.EffectiveDate; set => _model.EffectiveDate = value ?? DateTime.Today; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        _isInitialLoading = true;
+        try
+        {
+            _model = new UpdatePromotionRequest
+            {
+                Id = Data.Id,
+                EmployeeId = Data.EmployeeId,
+                FromGrade = Data.FromGrade,
+                ToGrade = Data.ToGrade,
+                EffectiveDate = Data.EffectiveDate,
+                PromotionNote = Data.PromotionNote,
+                Status = Data.Status,
+                CreatedAt = Data.CreatedAt,
+                CreatedBy = Data.CreatedBy,
+                UpdatedAt = Data.UpdatedAt,
+                UpdatedBy = Data.UpdatedBy
+            };
+
+            var empRes = await LeaveRequestService.GetEmployeeReferenceAsync();
+            if (empRes?.IsSuccess == true) _employees = empRes.Value ?? new();
+        }
+        finally
+        {
+            _isInitialLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await PromotionService.UpdatePromotionAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess && response.Value?.Success == true)
+            {
+                Snackbar.Add("Promotion updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,61 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+
+namespace Indotalent.Features.Performance.Promotion.Cqrs;
+
+public class CreatePromotionRequest
+{
+    public string EmployeeId { get; set; } = string.Empty;
+    public string FromGrade { get; set; } = string.Empty;
+    public string ToGrade { get; set; } = string.Empty;
+    public DateTime? EffectiveDate { get; set; }
+    public string PromotionNote { get; set; } = string.Empty;
+    public string Status { get; set; } = string.Empty;
+}
+
+public class CreatePromotionResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+}
+
+public record CreatePromotionCommand(CreatePromotionRequest Data) : IRequest<CreatePromotionResponse>;
+
+public class CreatePromotionHandler : IRequestHandler<CreatePromotionCommand, CreatePromotionResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreatePromotionHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreatePromotionResponse> Handle(CreatePromotionCommand request, CancellationToken cancellationToken)
+    {
+        var entityName = nameof(Data.Entities.Promotion);
+
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"{entityName.ToShortNameConsonant(3)}/{{Year}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.Promotion
+        {
+            AutoNumber = autoNo,
+            EmployeeId = request.Data.EmployeeId,
+            FromGrade = request.Data.FromGrade,
+            ToGrade = request.Data.ToGrade,
+            EffectiveDate = request.Data.EffectiveDate,
+            PromotionNote = request.Data.PromotionNote,
+            Status = request.Data.Status
+        };
+
+        _context.Promotion.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreatePromotionResponse
+        {
+            Id = entity.Id,
+            AutoNumber = entity.AutoNumber
+        };
+    }
+}
@@ -0,0 +1,14 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Performance.Promotion.Cqrs;
+
+public class CreatePromotionValidator : AbstractValidator<CreatePromotionRequest>
+{
+    public CreatePromotionValidator()
+    {
+        RuleFor(x => x.EmployeeId).NotEmpty().WithMessage("Employee is required");
+        RuleFor(x => x.ToGrade).NotEmpty().WithMessage("Target Grade is required");
+        RuleFor(x => x.EffectiveDate).NotEmpty().WithMessage("Effective Date is required");
+    }
+}
+
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Promotion.Cqrs;
+
+public record DeletePromotionByIdRequest(string Id);
+
+public record DeletePromotionByIdCommand(DeletePromotionByIdRequest Data) : IRequest<bool>;
+
+public class DeletePromotionByIdHandler : IRequestHandler<DeletePromotionByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeletePromotionByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeletePromotionByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Promotion
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.Promotion.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,58 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Promotion.Cqrs;
+
+public class GetPromotionByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeCode { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? FromGrade { get; set; }
+    public string? ToGrade { get; set; }
+    public DateTime? EffectiveDate { get; set; }
+    public string? PromotionNote { get; set; }
+    public string? Status { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetPromotionByIdQuery(string Id) : IRequest<GetPromotionByIdResponse?>;
+
+public class GetPromotionByIdHandler : IRequestHandler<GetPromotionByIdQuery, GetPromotionByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetPromotionByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetPromotionByIdResponse?> Handle(GetPromotionByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Promotion
+            .AsNoTracking()
+            .Include(x => x.Employee)
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetPromotionByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeCode = x.Employee != null ? x.Employee.Code : string.Empty,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                FromGrade = x.FromGrade,
+                ToGrade = x.ToGrade,
+                EffectiveDate = x.EffectiveDate,
+                PromotionNote = x.PromotionNote,
+                Status = x.Status,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,50 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Promotion.Cqrs;
+
+public class GetPromotionListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeCode { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? FromGrade { get; set; }
+    public string? ToGrade { get; set; }
+    public DateTime? EffectiveDate { get; set; }
+    public string? Status { get; set; }
+}
+
+public record GetPromotionListQuery() : IRequest<List<GetPromotionListResponse>>;
+
+public class GetPromotionListHandler : IRequestHandler<GetPromotionListQuery, List<GetPromotionListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetPromotionListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetPromotionListResponse>> Handle(GetPromotionListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Promotion
+            .AsNoTracking()
+            .NotDeletedOnly()
+            .Include(x => x.Employee)
+            .OrderByDescending(x => x.CreatedAt)
+            .Select(x => new GetPromotionListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeCode = x.Employee != null ? x.Employee.Code : string.Empty,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                FromGrade = x.FromGrade,
+                ToGrade = x.ToGrade,
+                EffectiveDate = x.EffectiveDate,
+                Status = x.Status
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,57 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Promotion.Cqrs;
+
+public class UpdatePromotionRequest : CreatePromotionRequest
+{
+    public string? Id { get; set; }
+    public string? EmployeeCode { get; set; }
+    public string? EmployeeName { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdatePromotionResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdatePromotionCommand(UpdatePromotionRequest Data) : IRequest<UpdatePromotionResponse>;
+
+public class UpdatePromotionHandler : IRequestHandler<UpdatePromotionCommand, UpdatePromotionResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdatePromotionHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdatePromotionResponse> Handle(UpdatePromotionCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Promotion
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdatePromotionResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.EmployeeId = request.Data.EmployeeId;
+        entity.FromGrade = request.Data.FromGrade;
+        entity.ToGrade = request.Data.ToGrade;
+        entity.EffectiveDate = request.Data.EffectiveDate;
+        entity.PromotionNote = request.Data.PromotionNote;
+        entity.Status = request.Data.Status;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdatePromotionResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,12 @@
+using FluentValidation;
+using Indotalent.Features.Performance.Promotion.Cqrs;
+
+public class UpdatePromotionValidator : AbstractValidator<UpdatePromotionRequest>
+{
+    public UpdatePromotionValidator()
+    {
+        RuleFor(x => x.Id).NotEmpty().WithMessage("ID is required for update");
+        RuleFor(x => x.EmployeeId).NotEmpty().WithMessage("Employee is required");
+        RuleFor(x => x.ToGrade).NotEmpty().WithMessage("Target Grade is required");
+    }
+}
@@ -0,0 +1,55 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Performance.Promotion.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Performance.Promotion;
+
+public static class PromotionEndpoint
+{
+    public static void MapPromotionEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/performance-promotion").WithTags("Performance Promotions")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetPromotionListQuery());
+            return result.ToApiResponse("Promotion list retrieved successfully");
+        })
+        .WithName("GetPromotionList");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetPromotionByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Promotion detail retrieved successfully"
+                : $"Promotion with ID {id} not found");
+        })
+        .WithName("GetPromotionById");
+
+        group.MapPost("/", async (CreatePromotionRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreatePromotionCommand(request));
+            return result.ToApiResponse("Promotion has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreatePromotion");
+
+        group.MapPost("/update", async (UpdatePromotionRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdatePromotionCommand(request));
+            if (!result.Success) return ((object?)null).ToApiResponse("Update failed.");
+            return result.ToApiResponse("Promotion has been updated successfully");
+        })
+        .WithName("UpdatePromotion");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeletePromotionByIdCommand(new DeletePromotionByIdRequest(id)));
+            if (!result) return ((object?)null).ToApiResponse("Delete failed.");
+            return true.ToApiResponse("Promotion has been deleted successfully");
+        })
+        .WithName("DeletePromotionById");
+    }
+}
@@ -0,0 +1,54 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Performance.Promotion.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Performance.Promotion;
+
+public class PromotionService : BaseService
+{
+    private readonly RestClient _client;
+
+    public PromotionService(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<GetPromotionListResponse>>?> GetPromotionListAsync()
+    {
+        var request = new RestRequest("api/performance-promotion", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetPromotionListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetPromotionByIdResponse>?> GetPromotionByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/performance-promotion/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetPromotionByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreatePromotionResponse>?> CreatePromotionAsync(CreatePromotionRequest data)
+    {
+        var request = new RestRequest("api/performance-promotion", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreatePromotionResponse>(_client, request);
+    }
+
+    public async Task<bool> DeletePromotionByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/performance-promotion/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdatePromotionResponse>?> UpdatePromotionAsync(UpdatePromotionRequest data)
+    {
+        var request = new RestRequest("api/performance-promotion/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdatePromotionResponse>(_client, request);
+    }
+}
@@ -0,0 +1,46 @@
+@page "/performance/transfer"
+@using Indotalent.Features.Performance.Transfer.Components
+@using Indotalent.Features.Performance.Transfer.Cqrs
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_TransferCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_TransferUpdateForm Data="_selectedData!" ReadOnly="@(_currentView == ViewMode.View)" OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_TransferDataTable 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 UpdateTransferRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdateTransferRequest 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,166 @@
+@using Indotalent.Features.Performance.Transfer
+@using Indotalent.Features.Performance.Transfer.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest
+@using MudBlazor
+@inject TransferService TransferService
+@inject LeaveRequestService LeaveRequestService
+@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>
+            <div style="font-size: 1.25rem; font-weight: 900; color: #1a1a1a;">New Transfer Request</div>
+            <div style="font-size: 0.875rem; color: #64748b;">Initiate employee relocation or department rotation.</div>
+        </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" />
+            <div style="margin-top: 16px; font-size: 0.875rem; color: #64748b;">Loading master data...</div>
+        </div>
+    }
+    else
+    {
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="3">
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Employee</label>
+                    <MudSelect T="string" @bind-Value="_model.EmployeeId" Required="true" Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        @foreach (var emp in _employees)
+                        {
+                            <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Transfer Date</label>
+                    <MudDatePicker @bind-Date="_transferDate" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+
+                <MudItem xs="12"><div style="font-weight: 800; color: #0284c7; font-size: 0.75rem; text-transform: uppercase;">Destination (To)</div></MudItem>
+
+                <MudItem xs="12" sm="4">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Branch</label>
+                    <MudSelect T="string" @bind-Value="_model.ToBranchId" Required="true" Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        @foreach (var b in _branches)
+                        {
+                            <MudSelectItem Value="@b.Id">@b.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Department</label>
+                    <MudSelect T="string" @bind-Value="_model.ToDepartmentId" Required="true" Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        @foreach (var d in _departments)
+                        {
+                            <MudSelectItem Value="@d.Id">@d.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Designation</label>
+                    <MudSelect T="string" @bind-Value="_model.ToDesignationId" Required="true" Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        @foreach (var ds in _designations)
+                        {
+                            <MudSelectItem Value="@ds.Id">@ds.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Status</label>
+                    <MudSelect T="string" @bind-Value="_model.Status" Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        <MudSelectItem Value="@("Pending")">Pending</MudSelectItem>
+                        <MudSelectItem Value="@("Processed")">Processed</MudSelectItem>
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Transfer Notes</label>
+                    <MudTextField @bind-Value="_model.TransferNote" Lines="3" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+            </MudGrid>
+
+            <div class="d-flex justify-end gap-2 mt-10">
+                <MudButton OnClick="() => OnCancel.InvokeAsync()" Variant="Variant.Outlined" 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" />
+                        <span class="ms-2">Processing...</span>
+                    }
+                    else
+                    {
+                        <span>Create Transfer</span>
+                    }
+                </MudButton>
+            </div>
+        </MudForm>
+    }
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreateTransferRequest _model = new();
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private List<LookupResponse> _branches = new();
+    private List<LookupResponse> _departments = new();
+    private List<LookupResponse> _designations = new();
+    private bool _processing = false;
+    private bool _isInitialLoading = true;
+
+    private DateTime? _transferDate { get => _model.TransferDate; set => _model.TransferDate = value ?? DateTime.Today; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        _isInitialLoading = true;
+        try
+        {
+            _model = new CreateTransferRequest { TransferDate = DateTime.Today, Status = "Pending" };
+            
+            var empTask = LeaveRequestService.GetEmployeeReferenceAsync();
+            var branchTask = TransferService.GetBranchLookupAsync();
+            var deptTask = TransferService.GetDepartmentLookupAsync();
+            var desigTask = TransferService.GetDesignationLookupAsync();
+
+            await Task.WhenAll(empTask, branchTask, deptTask, desigTask);
+
+            if (empTask.Result?.IsSuccess == true) _employees = empTask.Result.Value ?? new();
+            if (branchTask.Result?.IsSuccess == true) _branches = branchTask.Result.Value ?? new();
+            if (deptTask.Result?.IsSuccess == true) _departments = deptTask.Result.Value ?? new();
+            if (desigTask.Result?.IsSuccess == true) _designations = desigTask.Result.Value ?? new();
+        }
+        finally { _isInitialLoading = false; }
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await TransferService.CreateTransferAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Transfer created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,430 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Performance.Transfer
+@using Indotalent.Features.Performance.Transfer.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject TransferService TransferService
+@inject IDialogService DialogService
+@inject ISnackbar Snackbar
+@inject IJSRuntime JSRuntime
+
+<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #E5E7EB; border-radius: 12px;">
+    <div>
+        <MudText Typo="Typo.h5" Style="font-weight: 700; color: #111827;">Employee Transfer</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF;">Manage internal movements, department rotations, and branch relocations.</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;">Performance</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Transfer</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: #F8FAFC; 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;">
+                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 (_selectedTransfer != null)
+            {
+                <MudButton Variant="Variant.Outlined" Color="Color.Info" StartIcon="@Icons.Material.Filled.Visibility" OnClick="InvokeView" Size="Size.Small" Style="border: 1px solid #D1D5DB; text-transform: none; font-weight: 500; border-radius: 6px; background: white; color: #6B7280;">View Detail</MudButton>
+                <MudButton Variant="Variant.Filled" Color="Color.Info" StartIcon="@Icons.Material.Filled.SwapHoriz" OnClick="InvokeEdit" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px; color: white;">Execute Transfer</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="() => _selectedTransfer = null" />
+            }
+            else
+            {
+                <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.AddLocationAlt" OnClick="() => OnAdd.InvokeAsync()" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px;">
+                    Request Transfer
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetTransferListResponse" OnRowClick="@((args) => _selectedTransfer = 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<GetTransferListResponse, 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;">Origin (Dept/Loc)</MudTh>
+            <MudTh Style="width: 40px; 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;">Destination (Dept/Loc)</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<GetTransferListResponse, object>(x => x.TransferDate!)">Transfer Date</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<GetTransferListResponse, object>(x => x.Status!)">Status</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedTransfer?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>
+                <div class="d-flex align-center">
+                    <MudAvatar Color="@GetRandomColor(context.EmployeeName!)" Size="Size.Small" Class="mr-3" Style="font-weight: 600; font-size: 0.65rem;">
+                        @GetInitials(context.EmployeeName!)
+                    </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>
+                <div>
+                    <MudText Typo="Typo.body2" Style="font-weight: 600;">@context.FromDept</MudText>
+                    <MudText Typo="Typo.caption" Style="color: #9CA3AF;">@context.FromLocation</MudText>
+                </div>
+            </MudTd>
+            <MudTd>
+                <MudIcon Icon="@Icons.Material.Filled.DoubleArrow" Size="Size.Small" Color="Color.Info" />
+            </MudTd>
+            <MudTd>
+                <div>
+                    <MudText Typo="Typo.body2" Style="font-weight: 700; color: #0284c7;">@context.ToDept</MudText>
+                    <MudText Typo="Typo.caption" Style="font-weight: 600;">@context.ToLocation</MudText>
+                </div>
+            </MudTd>
+            <MudTd>
+                <MudText Typo="Typo.body2" Style="font-weight: 600;">@context.TransferDate?.ToString("dd MMM yyyy")</MudText>
+            </MudTd>
+            <MudTd>
+                <MudChip T="string" Color="@GetStatusColor(context.Status!)" Size="Size.Small" Variant="Variant.Filled" Style="font-weight: 600; border-radius: 6px; 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: #F8FAFC; border-top: 2px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 700; color: #1e293b;">Rows per page:</MudText>
+            
+            <MudSelect T="int" 
+                       Value="@_top" 
+                       ValueChanged="OnPageSizeChanged" 
+                       Dense="true" 
+                       Margin="Margin.Dense" 
+                       Style="width: 80px; background-color: white; font-size: 0.75rem; font-weight: 500;" 
+                       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="color: #64748b; 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;")"  />
+            <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; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;" : "text-transform: none; font-weight: 500; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;")">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; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;" : "text-transform: none; font-weight: 500; background: white; border: 1px solid #D1D5DB; border-radius: 6px; height: 34px; color: #6B7280;")">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;")"  />
+        </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: 8px !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<UpdateTransferRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateTransferRequest> OnView { get; set; }
+
+    private List<GetTransferListResponse> _transfers = new();
+    private GetTransferListResponse? _selectedTransfer;
+    private string _searchString = "";
+    private int _currentPage = 1;
+    private int _top = 5;
+    private int _skip => (_currentPage - 1) * _top;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / _top);
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        _selectedTransfer = null;
+        StateHasChanged();
+
+        try
+        {
+            await Task.Delay(800);
+            var response = await TransferService.GetTransferListAsync();
+            if (response != null && response.IsSuccess)
+            {
+                _transfers = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetTransferListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _transfers;
+        return _transfers.Where(x => 
+            (x.EmployeeName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.EmployeeId?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.FromDept?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.ToDept?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.FromLocation?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.ToLocation?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Status?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetTransferListResponse> 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("Transfers");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Employee ID";
+                worksheet.Cell(currentRow, 2).Value = "Employee Name";
+                worksheet.Cell(currentRow, 3).Value = "From Dept";
+                worksheet.Cell(currentRow, 4).Value = "From Location";
+                worksheet.Cell(currentRow, 5).Value = "To Dept";
+                worksheet.Cell(currentRow, 6).Value = "To Location";
+                worksheet.Cell(currentRow, 7).Value = "Transfer Date";
+                worksheet.Cell(currentRow, 8).Value = "Status";
+
+                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.EmployeeId;
+                    worksheet.Cell(currentRow, 2).Value = item.EmployeeName;
+                    worksheet.Cell(currentRow, 3).Value = item.FromDept;
+                    worksheet.Cell(currentRow, 4).Value = item.FromLocation;
+                    worksheet.Cell(currentRow, 5).Value = item.ToDept;
+                    worksheet.Cell(currentRow, 6).Value = item.ToLocation;
+                    worksheet.Cell(currentRow, 7).Value = item.TransferDate?.ToString("dd-MMM-yyyy");
+                    worksheet.Cell(currentRow, 8).Value = item.Status;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Employee_Transfer_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()
+    {
+        _currentPage = 1;
+        _selectedTransfer = null;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private void OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _currentPage = page;
+            _selectedTransfer = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _currentPage = 1;
+        _selectedTransfer = null;
+        StateHasChanged();
+    }
+
+    private string GetInitials(string name)
+    {
+        if (string.IsNullOrWhiteSpace(name)) return "??";
+        var parts = name.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+        if (parts.Length > 1) return $"{parts[0][0]}{parts[1][0]}".ToUpper();
+        return name.Length >= 2 ? name.Substring(0, 2).ToUpper() : name.ToUpper();
+    }
+
+    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
+    {
+        "Processed" => Color.Success,
+        "Pending" => Color.Warning,
+        "Approved" => Color.Info,
+        _ => Color.Default
+    };
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedTransfer != null)
+        {
+            var res = await TransferService.GetTransferByIdAsync(_selectedTransfer.Id!);
+            if (res?.Value != null) await OnEdit.InvokeAsync(res.Value);
+        }
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedTransfer != null)
+        {
+            var res = await TransferService.GetTransferByIdAsync(_selectedTransfer.Id!);
+            if (res?.Value != null) await OnView.InvokeAsync(res.Value);
+        }
+    }
+
+    private async Task OnDelete()
+    {
+        if (_selectedTransfer == null) return;
+        var dialog = await DialogService.ShowAsync<Features.Root.Shared._DeleteConfirmation>("", new DialogParameters<Features.Root.Shared._DeleteConfirmation> { { x => x.ContentText, $"Transfer for {_selectedTransfer.EmployeeName}" } });
+        if (!(await dialog.Result).Canceled)
+        {
+            if (await TransferService.DeleteTransferByIdAsync(_selectedTransfer.Id!))
+            {
+                await LoadData(); Snackbar.Add("Transfer record removed", Severity.Success);
+            }
+        }
+    }
+}
@@ -0,0 +1,218 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Performance.Transfer
+@using Indotalent.Features.Performance.Transfer.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest.Cqrs
+@using Indotalent.Features.Leave.LeaveRequest
+@using MudBlazor
+@inject TransferService TransferService
+@inject LeaveRequestService LeaveRequestService
+@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>
+            <div style="font-size: 1.25rem; font-weight: 900; color: #1a1a1a;">@(ReadOnly ? "Transfer Details" : "Edit Transfer Record")</div>
+            <div style="font-size: 0.875rem; color: #64748b;">Review or modify the employee movement record.</div>
+        </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" />
+            <div style="margin-top: 16px; font-size: 0.875rem; color: #64748b;">Syncing record and lookups...</div>
+        </div>
+    }
+    else
+    {
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="3">
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Employee</label>
+                    <MudSelect T="string" @bind-Value="_model.EmployeeId" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        @foreach (var emp in _employees)
+                        {
+                            <MudSelectItem Value="@emp.Id">@emp.FullName (@emp.Code)</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Transfer Date</label>
+                    <MudDatePicker @bind-Date="_transferDate" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+
+                <MudItem xs="12"><div style="font-weight: 800; color: #0284c7; font-size: 0.75rem; text-transform: uppercase;">Destination (To)</div></MudItem>
+
+                <MudItem xs="12" sm="4">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Branch</label>
+                    <MudSelect T="string" @bind-Value="_model.ToBranchId" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        @foreach (var b in _branches)
+                        {
+                            <MudSelectItem Value="@b.Id">@b.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Department</label>
+                    <MudSelect T="string" @bind-Value="_model.ToDepartmentId" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        @foreach (var d in _departments)
+                        {
+                            <MudSelectItem Value="@d.Id">@d.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="4">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Designation</label>
+                    <MudSelect T="string" @bind-Value="_model.ToDesignationId" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        @foreach (var ds in _designations)
+                        {
+                            <MudSelectItem Value="@ds.Id">@ds.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Status</label>
+                    <MudSelect T="string" @bind-Value="_model.Status" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        <MudSelectItem Value="@("Pending")">Pending</MudSelectItem>
+                        <MudSelectItem Value="@("Approved")">Approved</MudSelectItem>
+                        <MudSelectItem Value="@("Processed")">Processed</MudSelectItem>
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12">
+                    <label style="display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: #424242;">Transfer Notes</label>
+                    <MudTextField @bind-Value="_model.TransferNote" ReadOnly="ReadOnly" Lines="3" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+
+                <MudItem xs="12" Class="mt-4">
+                    <div style="font-size: 0.875rem; font-weight: 800; color: var(--mud-palette-primary); text-transform: uppercase;">Audit History</div>
+                    <MudDivider Class="mt-2 mb-4" />
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Created At</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@DateTimeExtensions.ToString(_model.CreatedAt)</div>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Created By</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@(!string.IsNullOrEmpty(_model.CreatedBy) ? _model.CreatedBy : "System")</div>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Last Updated At</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@DateTimeExtensions.ToString(_model.UpdatedAt)</div>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <label style="display: block; font-size: 0.75rem; color: #64748b;">Last Updated By</label>
+                    <div style="font-size: 0.875rem; color: #1a1a1a; font-weight: 600;">@(!string.IsNullOrEmpty(_model.UpdatedBy) ? _model.UpdatedBy : "System")</div>
+                </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 Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                            <span class="ms-2">Updating...</span>
+                        }
+                        else
+                        {
+                            <span>Save Changes</span>
+                        }
+                    </MudButton>
+                }
+            </div>
+        </MudForm>
+    }
+</MudPaper>
+
+@code {
+    [Parameter] public UpdateTransferRequest 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 UpdateTransferRequest _model = new();
+    private List<EmployeeLeaveReferenceResponse> _employees = new();
+    private List<LookupResponse> _branches = new();
+    private List<LookupResponse> _departments = new();
+    private List<LookupResponse> _designations = new();
+    private bool _processing = false;
+    private bool _isInitialLoading = true;
+
+    private DateTime? _transferDate { get => _model.TransferDate; set => _model.TransferDate = value ?? DateTime.Today; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        _isInitialLoading = true;
+        try
+        {
+            _model = new UpdateTransferRequest
+            {
+                Id = Data.Id,
+                EmployeeId = Data.EmployeeId,
+                FromBranchId = Data.FromBranchId,
+                FromDepartmentId = Data.FromDepartmentId,
+                FromDesignationId = Data.FromDesignationId,
+                ToBranchId = Data.ToBranchId,
+                ToDepartmentId = Data.ToDepartmentId,
+                ToDesignationId = Data.ToDesignationId,
+                TransferDate = Data.TransferDate,
+                TransferNote = Data.TransferNote,
+                Status = Data.Status,
+                CreatedAt = Data.CreatedAt,
+                CreatedBy = Data.CreatedBy,
+                UpdatedAt = Data.UpdatedAt,
+                UpdatedBy = Data.UpdatedBy
+            };
+
+            var empTask = LeaveRequestService.GetEmployeeReferenceAsync();
+            var branchTask = TransferService.GetBranchLookupAsync();
+            var deptTask = TransferService.GetDepartmentLookupAsync();
+            var desigTask = TransferService.GetDesignationLookupAsync();
+
+            await Task.WhenAll(empTask, branchTask, deptTask, desigTask);
+
+            if (empTask.Result?.IsSuccess == true) _employees = empTask.Result.Value ?? new();
+            if (branchTask.Result?.IsSuccess == true) _branches = branchTask.Result.Value ?? new();
+            if (deptTask.Result?.IsSuccess == true) _departments = deptTask.Result.Value ?? new();
+            if (desigTask.Result?.IsSuccess == true) _designations = desigTask.Result.Value ?? new();
+        }
+        finally
+        {
+            _isInitialLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await TransferService.UpdateTransferAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess && response.Value?.Success == true)
+            {
+                Snackbar.Add("Transfer record updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,68 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+
+namespace Indotalent.Features.Performance.Transfer.Cqrs;
+
+public class CreateTransferRequest
+{
+    public string EmployeeId { get; set; } = string.Empty;
+    public string FromBranchId { get; set; } = string.Empty;
+    public string FromDepartmentId { get; set; } = string.Empty;
+    public string FromDesignationId { get; set; } = string.Empty;
+    public string ToBranchId { get; set; } = string.Empty;
+    public string ToDepartmentId { get; set; } = string.Empty;
+    public string ToDesignationId { get; set; } = string.Empty;
+    public DateTime? TransferDate { get; set; }
+    public string TransferNote { get; set; } = string.Empty;
+    public string Status { get; set; } = string.Empty;
+}
+
+public class CreateTransferResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+}
+
+public record CreateTransferCommand(CreateTransferRequest Data) : IRequest<CreateTransferResponse>;
+
+public class CreateTransferHandler : IRequestHandler<CreateTransferCommand, CreateTransferResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateTransferHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateTransferResponse> Handle(CreateTransferCommand request, CancellationToken cancellationToken)
+    {
+        var entityName = nameof(Data.Entities.Transfer);
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"TRF/{{Year}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.Transfer
+        {
+            AutoNumber = autoNo,
+            EmployeeId = request.Data.EmployeeId,
+            FromBranchId = request.Data.FromBranchId,
+            FromDepartmentId = request.Data.FromDepartmentId,
+            FromDesignationId = request.Data.FromDesignationId,
+            ToBranchId = request.Data.ToBranchId,
+            ToDepartmentId = request.Data.ToDepartmentId,
+            ToDesignationId = request.Data.ToDesignationId,
+            TransferDate = request.Data.TransferDate,
+            TransferNote = request.Data.TransferNote,
+            Status = request.Data.Status
+        };
+
+        _context.Transfer.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateTransferResponse
+        {
+            Id = entity.Id,
+            AutoNumber = entity.AutoNumber
+        };
+    }
+}
@@ -0,0 +1,15 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Performance.Transfer.Cqrs;
+
+public class CreateTransferValidator : AbstractValidator<CreateTransferRequest>
+{
+    public CreateTransferValidator()
+    {
+        RuleFor(x => x.EmployeeId).NotEmpty().WithMessage("Employee is required");
+        RuleFor(x => x.ToBranchId).NotEmpty().WithMessage("Destination Branch is required");
+        RuleFor(x => x.ToDepartmentId).NotEmpty().WithMessage("Destination Department is required");
+        RuleFor(x => x.TransferDate).NotEmpty().WithMessage("Transfer Date is required");
+    }
+}
+
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Transfer.Cqrs;
+
+public record DeleteTransferByIdRequest(string Id);
+
+public record DeleteTransferByIdCommand(DeleteTransferByIdRequest Data) : IRequest<bool>;
+
+public class DeleteTransferByIdHandler : IRequestHandler<DeleteTransferByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteTransferByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteTransferByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Transfer
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.Transfer.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,45 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Transfer.Cqrs;
+
+public class GetTransferByIdResponse : UpdateTransferRequest { }
+
+public record GetTransferByIdQuery(string Id) : IRequest<GetTransferByIdResponse?>;
+
+public class GetTransferByIdHandler : IRequestHandler<GetTransferByIdQuery, GetTransferByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetTransferByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetTransferByIdResponse?> Handle(GetTransferByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Transfer
+            .AsNoTracking()
+            .Include(x => x.Employee)
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetTransferByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                FromBranchId = x.FromBranchId,
+                FromDepartmentId = x.FromDepartmentId,
+                FromDesignationId = x.FromDesignationId,
+                ToBranchId = x.ToBranchId,
+                ToDepartmentId = x.ToDepartmentId,
+                ToDesignationId = x.ToDesignationId,
+                TransferDate = x.TransferDate,
+                TransferNote = x.TransferNote,
+                Status = x.Status,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,56 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Transfer.Cqrs;
+
+public class GetTransferListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? FromDept { get; set; }
+    public string? FromLocation { get; set; }
+    public string? ToDept { get; set; }
+    public string? ToLocation { get; set; }
+    public DateTime? TransferDate { get; set; }
+    public string? Status { get; set; }
+}
+
+public record GetTransferListQuery() : IRequest<List<GetTransferListResponse>>;
+
+public class GetTransferListHandler : IRequestHandler<GetTransferListQuery, List<GetTransferListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetTransferListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetTransferListResponse>> Handle(GetTransferListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Transfer
+            .AsNoTracking()
+            .NotDeletedOnly()
+            .Include(x => x.Employee)
+            .Include(x => x.FromDepartment)
+            .Include(x => x.ToDepartment)
+            .Include(x => x.FromBranch)
+            .Include(x => x.ToBranch)
+            .OrderByDescending(x => x.CreatedAt)
+            .Select(x => new GetTransferListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                EmployeeId = x.EmployeeId,
+                EmployeeName = x.Employee != null ? $"{x.Employee.FirstName} {x.Employee.LastName}" : string.Empty,
+                FromDept = x.FromDepartment != null ? x.FromDepartment.Name : string.Empty,
+                FromLocation = x.FromBranch != null ? x.FromBranch.Name : string.Empty,
+                ToDept = x.ToDepartment != null ? x.ToDepartment.Name : string.Empty,
+                ToLocation = x.ToBranch != null ? x.ToBranch.Name : string.Empty,
+                TransferDate = x.TransferDate,
+                Status = x.Status
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,43 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Transfer.Cqrs;
+
+public class LookupResponse
+{
+    public string Id { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+}
+
+public record GetBranchLookupQuery() : IRequest<List<LookupResponse>>;
+public record GetDepartmentLookupQuery() : IRequest<List<LookupResponse>>;
+public record GetDesignationLookupQuery() : IRequest<List<LookupResponse>>;
+
+public class GetTransferLookupsHandler :
+    IRequestHandler<GetBranchLookupQuery, List<LookupResponse>>,
+    IRequestHandler<GetDepartmentLookupQuery, List<LookupResponse>>,
+    IRequestHandler<GetDesignationLookupQuery, List<LookupResponse>>
+{
+    private readonly AppDbContext _context;
+    public GetTransferLookupsHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<LookupResponse>> Handle(GetBranchLookupQuery request, CancellationToken ct)
+    {
+        return await _context.Branch.AsNoTracking().NotDeletedOnly()
+            .Select(x => new LookupResponse { Id = x.Id, Name = x.Name ?? "" }).ToListAsync(ct);
+    }
+
+    public async Task<List<LookupResponse>> Handle(GetDepartmentLookupQuery request, CancellationToken ct)
+    {
+        return await _context.Department.AsNoTracking().NotDeletedOnly()
+            .Select(x => new LookupResponse { Id = x.Id, Name = x.Name ?? "" }).ToListAsync(ct);
+    }
+
+    public async Task<List<LookupResponse>> Handle(GetDesignationLookupQuery request, CancellationToken ct)
+    {
+        return await _context.Designation.AsNoTracking().NotDeletedOnly()
+            .Select(x => new LookupResponse { Id = x.Id, Name = x.Name ?? "" }).ToListAsync(ct);
+    }
+}
@@ -0,0 +1,54 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Performance.Transfer.Cqrs;
+
+public class UpdateTransferRequest : CreateTransferRequest
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? EmployeeName { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateTransferResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateTransferCommand(UpdateTransferRequest Data) : IRequest<UpdateTransferResponse>;
+
+public class UpdateTransferHandler : IRequestHandler<UpdateTransferCommand, UpdateTransferResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateTransferHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateTransferResponse> Handle(UpdateTransferCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Transfer
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return new UpdateTransferResponse { Success = false };
+
+        entity.EmployeeId = request.Data.EmployeeId;
+        entity.FromBranchId = request.Data.FromBranchId;
+        entity.FromDepartmentId = request.Data.FromDepartmentId;
+        entity.FromDesignationId = request.Data.FromDesignationId;
+        entity.ToBranchId = request.Data.ToBranchId;
+        entity.ToDepartmentId = request.Data.ToDepartmentId;
+        entity.ToDesignationId = request.Data.ToDesignationId;
+        entity.TransferDate = request.Data.TransferDate;
+        entity.TransferNote = request.Data.TransferNote;
+        entity.Status = request.Data.Status;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateTransferResponse { Id = entity.Id, Success = true };
+    }
+}
@@ -0,0 +1,12 @@
+using FluentValidation;
+using Indotalent.Features.Performance.Transfer.Cqrs;
+
+public class UpdateTransferValidator : AbstractValidator<UpdateTransferRequest>
+{
+    public UpdateTransferValidator()
+    {
+        RuleFor(x => x.Id).NotEmpty().WithMessage("ID is required for update");
+        RuleFor(x => x.EmployeeId).NotEmpty().WithMessage("Employee is required");
+        RuleFor(x => x.ToBranchId).NotEmpty().WithMessage("Destination Branch is required");
+    }
+}
@@ -0,0 +1,65 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Performance.Transfer.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Performance.Transfer;
+
+public static class TransferEndpoint
+{
+    public static void MapTransferEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/performance-transfer").WithTags("Performance Transfers")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetTransferListQuery());
+            return result.ToApiResponse("Transfer list retrieved successfully");
+        })
+        .WithName("GetTransferList");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetTransferByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Transfer detail retrieved successfully"
+                : $"Transfer with ID {id} not found");
+        })
+        .WithName("GetTransferById");
+
+        group.MapPost("/", async (CreateTransferRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateTransferCommand(request));
+            return result.ToApiResponse("Transfer request has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateTransfer");
+
+        group.MapPost("/update", async (UpdateTransferRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateTransferCommand(request));
+            if (!result.Success) return ((object?)null).ToApiResponse("Update failed.");
+            return result.ToApiResponse("Transfer record has been updated successfully");
+        })
+        .WithName("UpdateTransfer");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteTransferByIdCommand(new DeleteTransferByIdRequest(id)));
+            if (!result) return ((object?)null).ToApiResponse("Delete failed.");
+            return true.ToApiResponse("Transfer record has been deleted successfully");
+        })
+        .WithName("DeleteTransferById");
+
+        group.MapGet("/lookup-branches", async (IMediator mediator) =>
+            (await mediator.Send(new GetBranchLookupQuery())).ToApiResponse("Branches retrieved"));
+
+        group.MapGet("/lookup-departments", async (IMediator mediator) =>
+            (await mediator.Send(new GetDepartmentLookupQuery())).ToApiResponse("Departments retrieved"));
+
+        group.MapGet("/lookup-designations", async (IMediator mediator) =>
+            (await mediator.Send(new GetDesignationLookupQuery())).ToApiResponse("Designations retrieved"));
+
+    }
+}
@@ -0,0 +1,72 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Performance.Transfer.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Performance.Transfer;
+
+public class TransferService : BaseService
+{
+    private readonly RestClient _client;
+
+    public TransferService(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<GetTransferListResponse>>?> GetTransferListAsync()
+    {
+        var request = new RestRequest("api/performance-transfer", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetTransferListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetTransferByIdResponse>?> GetTransferByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/performance-transfer/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetTransferByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateTransferResponse>?> CreateTransferAsync(CreateTransferRequest data)
+    {
+        var request = new RestRequest("api/performance-transfer", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateTransferResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteTransferByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/performance-transfer/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdateTransferResponse>?> UpdateTransferAsync(UpdateTransferRequest data)
+    {
+        var request = new RestRequest("api/performance-transfer/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateTransferResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<List<LookupResponse>>?> GetBranchLookupAsync()
+    {
+        var request = new RestRequest("api/performance-transfer/lookup-branches", Method.Get);
+        return await ExecuteWithResponseAsync<List<LookupResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<List<LookupResponse>>?> GetDepartmentLookupAsync()
+    {
+        var request = new RestRequest("api/performance-transfer/lookup-departments", Method.Get);
+        return await ExecuteWithResponseAsync<List<LookupResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<List<LookupResponse>>?> GetDesignationLookupAsync()
+    {
+        var request = new RestRequest("api/performance-transfer/lookup-designations", Method.Get);
+        return await ExecuteWithResponseAsync<List<LookupResponse>>(_client, request);
+    }
+}