initial commit

2026-07-21 14:35:37 +07:00
commit 0027997ff9
798 changed files with 59083 additions and 0 deletions
@@ -0,0 +1,23 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Sales.CommissionReport.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Sales.ComissionReport;
+
+public static class CommissionReportEndpoint
+{
+    public static void MapCommissionReportEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/commission-report").WithTags("CommissionReports")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetCommissionReportListQuery());
+            return result.ToApiResponse("Commission report list retrieved successfully");
+        })
+        .WithName("GetCommissionReportList");
+    }
+}
@@ -0,0 +1,32 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Sales.CommissionReport.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Sales.CommissionReport;
+
+public class CommissionReportService : BaseService
+{
+    private readonly RestClient _client;
+
+    public CommissionReportService(
+            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<GetCommissionReportListResponse>>?> GetCommissionReportListAsync()
+    {
+        var request = new RestRequest("api/commission-report", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetCommissionReportListResponse>>(_client, request);
+    }
+}
@@ -0,0 +1,8 @@
+@page "/sales/commission-report"
+@using Indotalent.Features.Sales.CommissionReport.Components
+@using MudBlazor
+
+<_CommissionReportDataTable />
+
+@code {
+}
@@ -0,0 +1,291 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.CommissionReport
+@using Indotalent.Features.Sales.CommissionReport.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject CommissionReportService CommissionReportService
+@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;">Commission Report</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Detailed analysis of advisor performance and commission payouts.</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;">Sales</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Commission Report</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
+    <div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <MudTextField @bind-Value="_searchString"
+                          Placeholder="Search Advisor or Customer..."
+                          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;">
+                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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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>
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetCommissionReportListResponse" Loading="@_isRefreshing">
+        <HeaderContent>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetCommissionReportListResponse, object>(x => x.EmployeeName!)">Advisor</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetCommissionReportListResponse, object>(x => x.CustomerName!)">Customer</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetCommissionReportListResponse, object>(x => x.SalesOrderNumber!)">Order No</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; text-align: right; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">
+                <MudTableSortLabel SortBy="new Func<GetCommissionReportListResponse, object>(x => x.Total!)">Sales Total</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; text-align: right; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">
+                <MudTableSortLabel SortBy="new Func<GetCommissionReportListResponse, object>(x => x.CommissionRate!)">Rate</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; text-align: right; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">
+                <MudTableSortLabel SortBy="new Func<GetCommissionReportListResponse, object>(x => x.CommissionAmount!)">Commission</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetCommissionReportListResponse, object>(x => x.OrderDate!)">Date</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>@context.EmployeeName</MudTd>
+            <MudTd>@context.CustomerName</MudTd>
+            <MudTd>@context.SalesOrderNumber</MudTd>
+            <MudTd Style="text-align: right;">@context.Total?.ToString("N2")</MudTd>
+            <MudTd Style="text-align: right;">@((context.CommissionRate * 100)?.ToString("N0"))%</MudTd>
+            <MudTd Style="text-align: right; font-weight: 700; color: #2E7D32;">@context.CommissionAmount?.ToString("N2")</MudTd>
+            <MudTd>@context.OrderDate?.ToString("yyyy-MM-dd")</MudTd>
+        </RowTemplate>
+    </MudTable>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background-color: #F9FAFB; border-top: 1px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 500; color: #9CA3AF; font-size: 0.75rem;">Rows per page:</MudText>
+            <MudSelect T="int" Value="@_top" ValueChanged="OnPageSizeChanged" Dense="true" Margin="Margin.Dense" Style="width: 80px; background-color: white; font-size: 12px; font-weight: 600;" Variant="Variant.Outlined" Class="mt-0 custom-select-dense">
+                <MudSelectItem Value="5" />
+                <MudSelectItem Value="10" />
+                <MudSelectItem Value="50" />
+                <MudSelectItem Value="500" />
+            </MudSelect>
+            <MudText Typo="Typo.caption" Style="color: #9CA3AF; margin-left: 12px; font-size: 0.75rem; font-weight: 500;">
+                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; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Prev</MudButton>
+            @{
+    var totalPages = _totalPage == 0 ? 1 : _totalPage;
+    var maxVisible = 5;
+    var startPage = Math.Max(1, _currentPage - maxVisible / 2);
+    var endPage = Math.Min(totalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) { startPage = Math.Max(1, endPage - maxVisible + 1); }
+}
+@for (int i = startPage; i <= endPage; i++)
+{
+    var pageNum = i;
+    var isActive = pageNum == _currentPage;
+    <MudButton OnClick="@(() => OnPageChanged(pageNum))"
+               Variant="Variant.Text" Size="Size.Small"
+               Style="@(isActive ? "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 600; background: #3B82F6; color: white; border: 1px solid #3B82F6; border-radius: 6px; text-transform: none;" : "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 500; color: #374151; background: white; border: 1px solid #D1D5DB; border-radius: 6px; text-transform: none;")">@pageNum</MudButton>
+}
+            <MudButton OnClick="@(() => OnPageChanged(_currentPage + 1))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Variant="Variant.Text" EndIcon="@Icons.Material.Filled.ChevronRight" Size="Size.Small" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "text-transform: none; font-weight: 500; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Next</MudButton>
+            <MudIconButton Icon="@Icons.Material.Filled.LastPage" Size="Size.Small" OnClick="@(() => OnPageChanged(_totalPage))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "color: #D1D5DB; background: transparent;" : "color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")" />
+        </div>
+    </div>
+</MudPaper>
+<style>
+.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+@code {
+    private List<GetCommissionReportListResponse> _items = new();
+    private string _searchString = "";
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    private int _skip = 0;
+    private int _top = 50;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / (_top == 0 ? 1 : _top));
+    private int _currentPage => (_top >= GetFilteredData().Count() || _top == 0) ? 1 : (_skip / _top) + 1;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        StateHasChanged();
+        try
+        {
+            var response = await CommissionReportService.GetCommissionReportListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _items = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetCommissionReportListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _items;
+        return _items.Where(x =>
+            (x.EmployeeName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.CustomerName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.SalesOrderNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetCommissionReportListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick()
+    {
+        _skip = 0;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private async Task ExportToExcel()
+    {
+        _isExporting = true;
+        StateHasChanged();
+        try
+        {
+            await Task.Delay(1000);
+            using (var workbook = new XLWorkbook())
+            {
+                var worksheet = workbook.Worksheets.Add("CommissionReports");
+                var currentRow = 1;
+
+                string[] headers = { "Advisor", "Customer", "Order No", "Sales Total", "Comm Rate", "Commission", "Order Date" };
+                for (int i = 0; i < headers.Length; i++)
+                {
+                    worksheet.Cell(currentRow, i + 1).Value = headers[i];
+                }
+
+                var headerRange = worksheet.Range(1, 1, 1, headers.Length);
+                headerRange.Style.Font.Bold = true;
+                headerRange.Style.Fill.BackgroundColor = XLColor.FromHtml("#0D47A1");
+                headerRange.Style.Font.FontColor = XLColor.White;
+
+                foreach (var item in GetFilteredData())
+                {
+                    currentRow++;
+                    worksheet.Cell(currentRow, 1).Value = item.EmployeeName;
+                    worksheet.Cell(currentRow, 2).Value = item.CustomerName;
+                    worksheet.Cell(currentRow, 3).Value = item.SalesOrderNumber;
+                    worksheet.Cell(currentRow, 4).Value = item.Total;
+                    worksheet.Cell(currentRow, 5).Value = item.CommissionRate;
+                    worksheet.Cell(currentRow, 6).Value = item.CommissionAmount;
+                    worksheet.Cell(currentRow, 7).Value = item.OrderDate?.ToString("yyyy-MM-dd");
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Commission_Report.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", content);
+                    Snackbar.Add("Commission report exported successfully", Severity.Success);
+                }
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Export failed: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _isExporting = false;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _skip = (page - 1) * _top;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        StateHasChanged();
+    }
+}
@@ -0,0 +1,69 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.CommissionReport.Cqrs;
+
+public record GetCommissionReportListResponse
+{
+    public string? Id { get; init; }
+    public string? SalesOrderId { get; init; }
+    public string? SalesOrderNumber { get; init; }
+    public string? CustomerName { get; init; }
+    public string? EmployeeName { get; init; }
+    public decimal? CommissionRate { get; init; }
+    public decimal? CommissionAmount { get; init; }
+    public string? ProductId { get; init; }
+    public string? ProductName { get; init; }
+    public string? ProductNumber { get; init; }
+    public string? Summary { get; init; }
+    public decimal? UnitPrice { get; init; }
+    public double? Quantity { get; init; }
+    public decimal? Total { get; init; }
+    public DateTime? OrderDate { get; init; }
+}
+
+public record GetCommissionReportListQuery() : IRequest<List<GetCommissionReportListResponse>>;
+
+public class GetCommissionReportListHandler : IRequestHandler<GetCommissionReportListQuery, List<GetCommissionReportListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetCommissionReportListHandler(AppDbContext context)
+    {
+        _context = context;
+    }
+
+    public async Task<List<GetCommissionReportListResponse>> Handle(GetCommissionReportListQuery request, CancellationToken cancellationToken)
+    {
+        var results = await _context.SalesOrderItem
+            .AsNoTracking()
+            .Include(x => x.SalesOrder)
+                .ThenInclude(x => x!.Customer)
+            .Include(x => x.SalesOrder)
+                .ThenInclude(x => x!.Employee)
+            .Include(x => x.Product)
+            .OrderByDescending(x => x.SalesOrder!.OrderDate)
+            .Select(x => new GetCommissionReportListResponse
+            {
+                Id = x.Id,
+                SalesOrderId = x.SalesOrderId,
+                SalesOrderNumber = x.SalesOrder != null ? x.SalesOrder.AutoNumber : string.Empty,
+                CustomerName = x.SalesOrder!.Customer != null ? x.SalesOrder.Customer.Name : string.Empty,
+                EmployeeName = x.SalesOrder!.Employee != null ? x.SalesOrder.Employee.Name : "N/A",
+                CommissionRate = x.SalesOrder!.Employee != null ? x.SalesOrder.Employee.CommissionRate : 0,
+                CommissionAmount = x.SalesOrder!.Employee != null ? (x.Total * x.SalesOrder.Employee.CommissionRate) : 0,
+                ProductId = x.ProductId,
+                ProductName = x.Product != null ? x.Product.Name : string.Empty,
+                ProductNumber = x.Product != null ? x.Product.AutoNumber : string.Empty,
+                Summary = x.Summary,
+                UnitPrice = x.UnitPrice,
+                Quantity = x.Quantity,
+                Total = x.Total,
+                OrderDate = x.SalesOrder != null ? x.SalesOrder.OrderDate : null
+            })
+            .ToListAsync(cancellationToken);
+
+        return results;
+    }
+}
@@ -0,0 +1,51 @@
+@page "/sales/invoice"
+@using Indotalent.Features.Sales.Invoice.Cqrs
+@using Indotalent.Features.Sales.Invoice.Components
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_InvoiceCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_InvoiceUpdateForm Data="_selectedData!"
+                        ReadOnly="@(_currentView == ViewMode.View)"
+                        OnCancel="BackToTable"
+                        OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_InvoiceDataTable 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 UpdateInvoiceRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdateInvoiceRequest 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,181 @@
+@using Indotalent.Features.Sales.Invoice.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject InvoiceService InvoiceService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+    <div class="d-flex align-center gap-4">
+        <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
+        <div>
+            <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Add Invoice</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Create a new billing invoice from Sales Order.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 4px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12"><MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Basic Information</MudText><MudDivider /></MudItem>
+            
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Invoice Date</MudText>
+                <MudDatePicker @bind-Date="_model.InvoiceDate"
+                               Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Sales Order Reference</MudText>
+                <MudSelect T="string" Value="_model.SalesOrderId"
+                           ValueChanged="OnSalesOrderChanged"
+                           For="@(() => _model.SalesOrderId)"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.SalesOrders)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Status</MudText>
+                <MudSelect T="Indotalent.Data.Enums.InvoiceStatus" @bind-Value="_model.InvoiceStatus"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Statuses)
+                    {
+                        <MudSelectItem Value="@((Indotalent.Data.Enums.InvoiceStatus)item.Value)">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description"
+                              For="@(() => _model.Description)"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" Lines="2" FullWidth="true" />
+            </MudItem>
+
+            <MudItem xs="12" Class="mt-6">
+                <_InvoiceSalesOrderItemDataTable Items="_items" ReadOnly="true" />
+            </MudItem>
+
+            <MudItem xs="12" sm="7"></MudItem>
+            <MudItem xs="12" sm="5">
+                <MudPaper Elevation="0" Outlined="true" Class="pa-4" Style="border-radius: 4px; background-color: #F8FAFC; border: 1px solid #DCEBFA;">
+                    <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;" Class="mb-4 d-block">Payment Summary</MudText>
+                    <div class="d-flex justify-space-between mb-2">
+                        <MudText Typo="Typo.body2">Sub Total</MudText>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@_beforeTax.ToString("N2")</MudText>
+                    </div>
+                    <div class="d-flex justify-space-between mb-2">
+                        <MudText Typo="Typo.body2">Tax Amount</MudText>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@_taxAmount.ToString("N2")</MudText>
+                    </div>
+                    <MudDivider Class="my-2" />
+                    <div class="d-flex justify-space-between">
+                        <MudText Typo="Typo.subtitle1" Style="font-weight: 900;">Total Amount</MudText>
+                        <MudText Typo="Typo.subtitle1" Color="Color.Primary" Style="font-weight: 900;">@_afterTax.ToString("N2")</MudText>
+                    </div>
+                </MudPaper>
+            </MudItem>
+        </MudGrid>
+
+        <div class="d-flex justify-end gap-2 mt-8">
+            <MudButton OnClick="() => OnCancel.InvokeAsync()"
+                       Variant="Variant.Outlined"
+                       Disabled="_processing"
+                       Style="border-radius: 4px; text-transform: none; font-weight: 700; border: 1px solid #e0e0e0;">
+                Cancel
+            </MudButton>
+            <MudButton Color="Color.Primary"
+                       Variant="Variant.Filled"
+                       OnClick="Submit"
+                       Disabled="_processing"
+                       Style="border-radius: 4px; text-transform: none; font-weight: 700;">
+                @if (_processing)
+                {
+                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                    <MudText Class="ms-2" Typo="Typo.button" Style="text-transform: none !important;">Processing...</MudText>
+                }
+                else
+                {
+                    <MudText>Create Invoice</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreateInvoiceRequest _model = new() { InvoiceDate = DateTime.Today, InvoiceStatus = Indotalent.Data.Enums.InvoiceStatus.Draft };
+    private InvoiceLookupResponse _lookup = new();
+    private List<InvoiceSalesOrderItemResponse> _items = new();
+    private decimal _beforeTax = 0;
+    private decimal _taxAmount = 0;
+    private decimal _afterTax = 0;
+    private bool _processing = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var res = await InvoiceService.GetInvoiceLookupAsync();
+        if (res != null && res.IsSuccess) _lookup = res.Value ?? new();
+    }
+
+    private async Task OnSalesOrderChanged(string soId)
+    {
+        _model.SalesOrderId = soId;
+        if (string.IsNullOrEmpty(soId))
+        {
+            _items.Clear();
+            _beforeTax = 0;
+            _taxAmount = 0;
+            _afterTax = 0;
+            return;
+        }
+
+        var res = await InvoiceService.GetSalesOrderDetailForInvoiceAsync(soId);
+        await Task.Delay(500);
+        if (res != null && res.IsSuccess && res.Value != null)
+        {
+            _items = res.Value.Items;
+            _beforeTax = res.Value.BeforeTaxAmount ?? 0;
+            _taxAmount = res.Value.TaxAmount ?? 0;
+            _afterTax = res.Value.AfterTaxAmount ?? 0;
+            Snackbar.Add("Sales Order reference selected. Payment summary and items have been loaded.", Severity.Info);
+        }
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await InvoiceService.CreateInvoiceAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,377 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.Invoice
+@using Indotalent.Features.Sales.Invoice.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject InvoiceService InvoiceService
+@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;">Invoice</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Manage customer billing based on Sales Orders.</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;">Sales</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Invoice</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
+    <div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <MudTextField @bind-Value="_searchString"
+                          Placeholder="Search..."
+                          Adornment="Adornment.Start"
+                          AdornmentIcon="@Icons.Material.Filled.Search"
+                          IconSize="Size.Small"
+                          Class="mt-0"
+                          Variant="Variant.Outlined"
+                          Margin="Margin.Dense"
+                          Style="background-color: white; width: 280px; border-radius: 8px;"
+                          OnKeyDown="@HandleSearchKeyDown" />
+            <MudButton Variant="Variant.Filled"
+                       Color="Color.Primary"
+                       OnClick="OnSearchClick"
+                       Size="Size.Small"
+                       Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px;">
+                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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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 (_selectedItem != null)
+            {
+                <MudButton Variant="Variant.Outlined" Color="Color.Info" StartIcon="@Icons.Material.Filled.Visibility" OnClick="InvokeView" Size="Size.Small" Style="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; color: #6B7280;">View</MudButton>
+                <MudButton Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Edit" OnClick="InvokeEdit" Size="Size.Small" Style="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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; background: white; border: 1px solid #FCA5A5; color: #EF4444;">Remove</MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedItem = 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;">
+                    Add Invoice
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetInvoiceListResponse" OnRowClick="@((args) => _selectedItem = 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<GetInvoiceListResponse, object>(x => x.AutoNumber!)">Invoice No</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<GetInvoiceListResponse, object>(x => x.InvoiceDate!)">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<GetInvoiceListResponse, object>(x => x.SalesOrderAutoNumber!)">SO Ref</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<GetInvoiceListResponse, object>(x => x.CustomerName!)">Customer</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<GetInvoiceListResponse, object>(x => x.InvoiceStatus)">Status</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style=" color: #1a1a1a; text-transform: uppercase; font-size: 0.75rem; background-color: #ffffff; border-bottom: 2px solid #E5E7EB; white-space: nowrap; text-align: right;">
+                <MudTableSortLabel SortBy="new Func<GetInvoiceListResponse, object>(x => x.AfterTaxAmount!)">Total Amount</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedItem?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>@context.AutoNumber</MudTd>
+            <MudTd>@context.InvoiceDate?.ToString("yyyy-MM-dd")</MudTd>
+            <MudTd>@context.SalesOrderAutoNumber</MudTd>
+            <MudTd>@context.CustomerName</MudTd>
+            <MudTd>
+                <MudChip T="string" Color="Color.Info" Size="Size.Small" Variant="Variant.Text" Style="font-weight: 800;">@context.InvoiceStatus.ToString().ToUpper()</MudChip>
+            </MudTd>
+            <MudTd Style="text-align: right; font-weight: 700;">@context.AfterTaxAmount?.ToString("N2")</MudTd>
+        </RowTemplate>
+    </MudTable>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background-color: #F9FAFB; border-top: 1px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 500; color: #9CA3AF; font-size: 0.75rem;">Rows per page:</MudText>
+            <MudSelect T="int" Value="@_top" ValueChanged="OnPageSizeChanged" Dense="true" Margin="Margin.Dense" Style="width: 80px; background-color: white; font-size: 12px; font-weight: 600;" Variant="Variant.Outlined" Class="mt-0">
+                <MudSelectItem Value="5" />
+                <MudSelectItem Value="10" />
+                <MudSelectItem Value="50" />
+                <MudSelectItem Value="500" />
+                <MudSelectItem Value="1000" />
+            </MudSelect>
+            <MudText Typo="Typo.caption" Style="color: #9CA3AF; margin-left: 12px; font-size: 0.75rem; font-weight: 500;">
+                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; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Prev</MudButton>
+            @{
+    var totalPages = _totalPage == 0 ? 1 : _totalPage;
+    var maxVisible = 5;
+    var startPage = Math.Max(1, _currentPage - maxVisible / 2);
+    var endPage = Math.Min(totalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) { startPage = Math.Max(1, endPage - maxVisible + 1); }
+}
+@for (int i = startPage; i <= endPage; i++)
+{
+    var pageNum = i;
+    var isActive = pageNum == _currentPage;
+    <MudButton OnClick="@(() => OnPageChanged(pageNum))"
+               Variant="Variant.Text" Size="Size.Small"
+               Style="@(isActive ? "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 600; background: #3B82F6; color: white; border: 1px solid #3B82F6; border-radius: 6px; text-transform: none;" : "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 500; color: #374151; background: white; border: 1px solid #D1D5DB; border-radius: 6px; text-transform: none;")">@pageNum</MudButton>
+}
+            <MudButton OnClick="@(() => OnPageChanged(_currentPage + 1))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Variant="Variant.Text" EndIcon="@Icons.Material.Filled.ChevronRight" Size="Size.Small" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "text-transform: none; font-weight: 500; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Next</MudButton>
+            <MudIconButton Icon="@Icons.Material.Filled.LastPage" Size="Size.Small" OnClick="@(() => OnPageChanged(_totalPage))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "color: #D1D5DB; background: transparent;" : "color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")" />
+        </div>
+    </div>
+</MudPaper>
+<style>
+.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+@code {
+    [Parameter] public EventCallback OnAdd { get; set; }
+    [Parameter] public EventCallback<UpdateInvoiceRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateInvoiceRequest> OnView { get; set; }
+
+    private List<GetInvoiceListResponse> _items = new();
+    private GetInvoiceListResponse? _selectedItem;
+    private string _searchString = "";
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    private int _skip = 0;
+    private int _top = 5;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / (_top == 0 ? 1 : _top));
+    private int _currentPage => (_top >= GetFilteredData().Count() || _top == 0) ? 1 : (_skip / _top) + 1;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        _selectedItem = null;
+        StateHasChanged();
+        try
+        {
+            var response = await InvoiceService.GetInvoiceListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _items = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetInvoiceListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _items;
+        return _items.Where(x =>
+            (x.AutoNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.SalesOrderAutoNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.CustomerName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetInvoiceListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick()
+    {
+        _skip = 0;
+        _selectedItem = null;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private async Task ExportToExcel()
+    {
+        _isExporting = true;
+        StateHasChanged();
+        try
+        {
+            await Task.Delay(1000);
+            using (var workbook = new XLWorkbook())
+            {
+                var worksheet = workbook.Worksheets.Add("Invoices");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Invoice Number";
+                worksheet.Cell(currentRow, 2).Value = "Date";
+                worksheet.Cell(currentRow, 3).Value = "SO Reference";
+                worksheet.Cell(currentRow, 4).Value = "Customer";
+                worksheet.Cell(currentRow, 5).Value = "Status";
+                worksheet.Cell(currentRow, 6).Value = "Total Amount";
+
+                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.AutoNumber;
+                    worksheet.Cell(currentRow, 2).Value = item.InvoiceDate?.ToString("yyyy-MM-dd");
+                    worksheet.Cell(currentRow, 3).Value = item.SalesOrderAutoNumber;
+                    worksheet.Cell(currentRow, 4).Value = item.CustomerName;
+                    worksheet.Cell(currentRow, 5).Value = item.InvoiceStatus.ToString();
+                    worksheet.Cell(currentRow, 6).Value = item.AfterTaxAmount;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Invoice_List.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 OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _skip = (page - 1) * _top;
+            _selectedItem = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        _selectedItem = null;
+        StateHasChanged();
+    }
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedItem == null) return;
+        var request = await MapToUpdateRequest(_selectedItem.Id!);
+        if (request != null) await OnEdit.InvokeAsync(request);
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedItem == null) return;
+        var request = await MapToUpdateRequest(_selectedItem.Id!);
+        if (request != null) await OnView.InvokeAsync(request);
+    }
+
+    private async Task<UpdateInvoiceRequest?> MapToUpdateRequest(string id)
+    {
+        var response = await InvoiceService.GetInvoiceByIdAsync(id);
+        if (response != null && response.IsSuccess && response.Value != null)
+        {
+            var detail = response.Value;
+            return new UpdateInvoiceRequest
+            {
+                Id = detail.Id,
+                InvoiceDate = detail.InvoiceDate,
+                InvoiceStatus = detail.InvoiceStatus,
+                AutoNumber = detail.AutoNumber,
+                Description = detail.Description,
+                SalesOrderId = detail.SalesOrderId,
+                CreatedAt = detail.CreatedAt,
+                CreatedBy = detail.CreatedBy,
+                UpdatedAt = detail.UpdatedAt,
+                UpdatedBy = detail.UpdatedBy
+            };
+        }
+        return null;
+    }
+
+    private async Task OnDelete()
+    {
+        if (_selectedItem == null) return;
+
+        var parameters = new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, _selectedItem.AutoNumber } };
+        var options = new DialogOptions { CloseButton = false, MaxWidth = MaxWidth.ExtraSmall, FullWidth = true };
+
+        var dialog = await DialogService.ShowAsync<_DeleteConfirmation>("", parameters, options);
+        var result = await dialog.Result;
+
+        if (result != null && !result.Canceled)
+        {
+            var isSuccess = await InvoiceService.DeleteInvoiceByIdAsync(_selectedItem.Id!);
+            if (isSuccess)
+            {
+                _selectedItem = null;
+                await LoadData();
+                Snackbar.Add("Deleted successfully", Severity.Success);
+            }
+        }
+    }
+}
@@ -0,0 +1,32 @@
+@using Indotalent.Features.Sales.Invoice.Cqrs
+@using MudBlazor
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 4px; border: 1px solid #E5E7EB;">
+    <div style="padding: 16px; border-bottom: 1px solid #E5E7EB; background-color: #F8FAFC;">
+        <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Referenced Sales Order Items</MudText>
+    </div>
+
+    <MudTable Items="Items" Hover="true" Elevation="0" Dense="true" T="InvoiceSalesOrderItemResponse">
+        <HeaderContent>
+            <MudTh Style="font-weight: 700;">Product</MudTh>
+            <MudTh Style="font-weight: 700;">Summary</MudTh>
+            <MudTh Style="font-weight: 700; text-align: right;">Unit Price</MudTh>
+            <MudTh Style="font-weight: 700; text-align: right;">Quantity</MudTh>
+            <MudTh Style="font-weight: 700; text-align: right;">Total</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd DataLabel="Product">@context.ProductName</MudTd>
+            <MudTd DataLabel="Summary">@context.Summary</MudTd>
+            <MudTd DataLabel="UnitPrice" Style="text-align: right;">@context.UnitPrice?.ToString("N2")</MudTd>
+            <MudTd DataLabel="Quantity" Style="text-align: right;">@context.Quantity</MudTd>
+            <MudTd DataLabel="Total" Style="text-align: right; font-weight: 700;">@context.Total?.ToString("N2")</MudTd>
+        </RowTemplate>
+    </MudTable>
+</MudPaper>
+<style>
+.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+@code {
+    [Parameter] public List<InvoiceSalesOrderItemResponse> Items { get; set; } = new();
+    [Parameter] public bool ReadOnly { get; set; } = true;
+}
@@ -0,0 +1,265 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.Invoice.Cqrs
+@using Indotalent.Features.Sales.Invoice.Components
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@using Microsoft.JSInterop
+@inject InvoiceService InvoiceService
+@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 #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 ? "Details" : "Edit") Invoice</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">@_model.AutoNumber</MudText>
+        </div>
+    </div>
+    @if (ReadOnly || !string.IsNullOrEmpty(_model.Id))
+    {
+        <MudButton Variant="Variant.Filled"
+                   Color="Color.Info"
+                   StartIcon="@(_isPrinting ? null : Icons.Material.Filled.Print)"
+                   OnClick="DownloadPdf"
+                   Disabled="_isPrinting"
+                   Style="border-radius: 4px; text-transform: none; font-weight: 700; box-shadow: none;">
+            @if (_isPrinting)
+            {
+                <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                <MudText Class="ms-2">Generating PDF...</MudText>
+            }
+            else
+            {
+                <MudText>Print PDF</MudText>
+            }
+        </MudButton>
+    }
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 4px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12"><MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Basic Information</MudText><MudDivider /></MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Invoice Date</MudText>
+                <MudDatePicker @bind-Date="_model.InvoiceDate" ReadOnly="ReadOnly"
+                               Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Sales Order Reference</MudText>
+                <MudSelect T="string" Value="_model.SalesOrderId"
+                           ValueChanged="OnSalesOrderChanged"
+                           ReadOnly="ReadOnly"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.SalesOrders)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Status</MudText>
+                <MudSelect T="Indotalent.Data.Enums.InvoiceStatus" @bind-Value="_model.InvoiceStatus"
+                           ReadOnly="ReadOnly"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Statuses)
+                    {
+                        <MudSelectItem Value="@((Indotalent.Data.Enums.InvoiceStatus)item.Value)">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description"
+                              ReadOnly="ReadOnly"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" Lines="2" FullWidth="true" />
+            </MudItem>
+
+            <MudItem xs="12" Class="mt-6">
+                <_InvoiceSalesOrderItemDataTable Items="_items" ReadOnly="true" />
+            </MudItem>
+
+            <MudItem xs="12" sm="7"></MudItem>
+            <MudItem xs="12" sm="5">
+                <MudPaper Elevation="0" Outlined="true" Class="pa-4" Style="border-radius: 4px; background-color: #F8FAFC; border: 1px solid #DCEBFA;">
+                    <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;" Class="mb-4 d-block">Payment Summary</MudText>
+                    <div class="d-flex justify-space-between mb-2">
+                        <MudText Typo="Typo.body2">Sub Total</MudText>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@_beforeTax.ToString("N2")</MudText>
+                    </div>
+                    <div class="d-flex justify-space-between mb-2">
+                        <MudText Typo="Typo.body2">Tax Amount</MudText>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@_taxAmount.ToString("N2")</MudText>
+                    </div>
+                    <MudDivider Class="my-2" />
+                    <div class="d-flex justify-space-between">
+                        <MudText Typo="Typo.subtitle1" Style="font-weight: 900;">Total Amount</MudText>
+                        <MudText Typo="Typo.subtitle1" Color="Color.Primary" Style="font-weight: 900;">@_afterTax.ToString("N2")</MudText>
+                    </div>
+                </MudPaper>
+            </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-radius: 4px; text-transform: none; font-weight: 700; border: 1px solid #e0e0e0;">
+                @(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 UpdateInvoiceRequest 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 UpdateInvoiceRequest _model = new();
+    private List<InvoiceSalesOrderItemResponse> _items = new();
+    private InvoiceLookupResponse _lookup = new();
+    private decimal _beforeTax = 0;
+    private decimal _taxAmount = 0;
+    private decimal _afterTax = 0;
+    private bool _processing = false;
+    private bool _isPrinting = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var resLookup = await InvoiceService.GetInvoiceLookupAsync();
+        if (resLookup != null && resLookup.IsSuccess) _lookup = resLookup.Value ?? new();
+
+        _model = Data;
+        await RefreshItems();
+    }
+
+    private async Task OnSalesOrderChanged(string soId)
+    {
+        if (ReadOnly || _model.SalesOrderId == soId) return;
+        _model.SalesOrderId = soId;
+        await RefreshItems();
+        Snackbar.Add("Sales Order reference changed. Payment summary and items have been updated.", Severity.Info);
+    }
+
+    private async Task RefreshItems()
+    {
+        if (string.IsNullOrEmpty(_model.SalesOrderId)) return;
+
+        try
+        {
+            var response = await InvoiceService.GetSalesOrderDetailForInvoiceAsync(_model.SalesOrderId);
+            await Task.Delay(500);
+            
+            if (response != null && response.IsSuccess && response.Value != null)
+            {
+                _items = response.Value.Items ?? new();
+                _beforeTax = response.Value.BeforeTaxAmount ?? 0;
+                _taxAmount = response.Value.TaxAmount ?? 0;
+                _afterTax = response.Value.AfterTaxAmount ?? 0;
+                StateHasChanged();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+    }
+
+    private async Task DownloadPdf()
+    {
+        try
+        {
+            _isPrinting = true;
+            StateHasChanged();
+            await Task.Delay(1000);
+
+            var response = await InvoiceService.GetInvoiceByIdAsync(_model.Id!);
+            if (response != null && response.IsSuccess && response.Value != null)
+            {
+                var pdfBytes = InvoicePdfGenerator.Generate(response.Value);
+                var fileName = $"INV_{response.Value.AutoNumber}.pdf";
+                var base64 = Convert.ToBase64String(pdfBytes);
+                await JSRuntime.InvokeVoidAsync("downloadFile", fileName, "application/pdf", base64);
+                Snackbar.Add("PDF generated successfully.", Severity.Success);
+            }
+        }
+        finally
+        {
+            _isPrinting = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await InvoiceService.UpdateInvoiceAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,55 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+
+namespace Indotalent.Features.Sales.Invoice.Cqrs;
+
+public class CreateInvoiceRequest
+{
+    public DateTime? InvoiceDate { get; set; }
+    public Data.Enums.InvoiceStatus InvoiceStatus { get; set; }
+    public string? Description { get; set; }
+    public string? SalesOrderId { get; set; }
+}
+
+public class CreateInvoiceResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+}
+
+public record CreateInvoiceCommand(CreateInvoiceRequest Data) : IRequest<CreateInvoiceResponse>;
+
+public class CreateInvoiceHandler : IRequestHandler<CreateInvoiceCommand, CreateInvoiceResponse>
+{
+    private readonly AppDbContext _context;
+    public CreateInvoiceHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateInvoiceResponse> Handle(CreateInvoiceCommand request, CancellationToken cancellationToken)
+    {
+        var entityName = nameof(Data.Entities.Invoice);
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"INV/{{Year}}/{{Month}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.Invoice
+        {
+            AutoNumber = autoNo,
+            InvoiceDate = request.Data.InvoiceDate,
+            InvoiceStatus = request.Data.InvoiceStatus,
+            Description = request.Data.Description,
+            SalesOrderId = request.Data.SalesOrderId
+        };
+
+        _context.Invoice.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateInvoiceResponse
+        {
+            Id = entity.Id,
+            AutoNumber = entity.AutoNumber
+        };
+    }
+}
@@ -0,0 +1,12 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Sales.Invoice.Cqrs;
+
+public class CreateInvoiceValidator : AbstractValidator<CreateInvoiceRequest>
+{
+    public CreateInvoiceValidator()
+    {
+        RuleFor(x => x.InvoiceDate).NotEmpty().WithMessage("Date is required");
+        RuleFor(x => x.SalesOrderId).NotEmpty().WithMessage("Sales Order is required");
+    }
+}
@@ -0,0 +1,25 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.Invoice.Cqrs;
+
+public record DeleteInvoiceByIdCommand(string Id) : IRequest<bool>;
+
+public class DeleteInvoiceByIdHandler : IRequestHandler<DeleteInvoiceByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+    public DeleteInvoiceByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteInvoiceByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Invoice
+            .FirstOrDefaultAsync(x => x.Id == request.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.Invoice.Remove(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+        return true;
+    }
+}
@@ -0,0 +1,108 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.Invoice.Cqrs;
+
+public class InvoiceSalesOrderItemResponse
+{
+    public string? Id { get; set; }
+    public string? ProductId { get; set; }
+    public string? ProductName { get; set; }
+    public string? Summary { get; set; }
+    public decimal? UnitPrice { get; set; }
+    public double? Quantity { get; set; }
+    public decimal? Total { get; set; }
+}
+
+public class GetInvoiceByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public DateTime? InvoiceDate { get; set; }
+    public Data.Enums.InvoiceStatus InvoiceStatus { get; set; }
+    public string? Description { get; set; }
+    public string? SalesOrderId { get; set; }
+    public string? SalesOrderAutoNumber { get; set; }
+    public string? CustomerName { get; set; }
+    public string? CustomerStreet { get; set; }
+    public string? CustomerCity { get; set; }
+    public string? CompanyName { get; set; }
+    public string? CompanyStreet { get; set; }
+    public string? CompanyCity { get; set; }
+    public string? CompanyState { get; set; }
+    public string? CompanyZipCode { get; set; }
+    public string? CompanyPhone { get; set; }
+    public string? CurrencySymbol { get; set; }
+    public decimal? BeforeTaxAmount { get; set; }
+    public decimal? TaxAmount { get; set; }
+    public decimal? AfterTaxAmount { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+    public List<InvoiceSalesOrderItemResponse> Items { get; set; } = new();
+}
+
+public record GetInvoiceByIdQuery(string Id) : IRequest<GetInvoiceByIdResponse?>;
+
+public class GetInvoiceByIdHandler : IRequestHandler<GetInvoiceByIdQuery, GetInvoiceByIdResponse?>
+{
+    private readonly AppDbContext _context;
+    public GetInvoiceByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetInvoiceByIdResponse?> Handle(GetInvoiceByIdQuery request, CancellationToken cancellationToken)
+    {
+        var company = await _context.Company
+            .AsNoTracking()
+            .Include(x => x.Currency)
+            .OrderByDescending(x => x.IsDefault)
+            .FirstOrDefaultAsync(cancellationToken);
+
+        return await _context.Invoice
+            .AsNoTracking()
+            .Include(x => x.SalesOrder)
+                .ThenInclude(x => x!.Customer)
+            .Include(x => x.SalesOrder)
+                .ThenInclude(x => x!.SalesOrderItemList)
+                    .ThenInclude(x => x.Product)
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetInvoiceByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                InvoiceDate = x.InvoiceDate,
+                InvoiceStatus = x.InvoiceStatus,
+                Description = x.Description,
+                SalesOrderId = x.SalesOrderId,
+                SalesOrderAutoNumber = x.SalesOrder!.AutoNumber,
+                CustomerName = x.SalesOrder!.Customer!.Name,
+                CustomerStreet = x.SalesOrder!.Customer!.Street,
+                CustomerCity = x.SalesOrder!.Customer!.City,
+                CompanyName = company != null ? company.Name : string.Empty,
+                CompanyStreet = company != null ? company.StreetAddress : string.Empty,
+                CompanyCity = company != null ? company.City : string.Empty,
+                CompanyState = company != null ? company.StateProvince : string.Empty,
+                CompanyZipCode = company != null ? company.ZipCode : string.Empty,
+                CompanyPhone = company != null ? company.Phone : string.Empty,
+                CurrencySymbol = company != null && company.Currency != null ? company.Currency.Symbol : "IDR",
+                BeforeTaxAmount = x.SalesOrder!.BeforeTaxAmount,
+                TaxAmount = x.SalesOrder!.TaxAmount,
+                AfterTaxAmount = x.SalesOrder!.AfterTaxAmount,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+                Items = x.SalesOrder!.SalesOrderItemList.Select(i => new InvoiceSalesOrderItemResponse
+                {
+                    Id = i.Id,
+                    ProductId = i.ProductId,
+                    ProductName = i.Product!.Name,
+                    Summary = i.Summary,
+                    UnitPrice = i.UnitPrice,
+                    Quantity = i.Quantity,
+                    Total = i.Total
+                }).ToList()
+            }).FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,43 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.Invoice.Cqrs;
+
+public class GetInvoiceListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public DateTime? InvoiceDate { get; set; }
+    public string? SalesOrderAutoNumber { get; set; }
+    public string? CustomerName { get; set; }
+    public decimal? AfterTaxAmount { get; set; }
+    public Data.Enums.InvoiceStatus InvoiceStatus { get; set; }
+}
+
+public record GetInvoiceListQuery() : IRequest<List<GetInvoiceListResponse>>;
+
+public class GetInvoiceListHandler : IRequestHandler<GetInvoiceListQuery, List<GetInvoiceListResponse>>
+{
+    private readonly AppDbContext _context;
+    public GetInvoiceListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetInvoiceListResponse>> Handle(GetInvoiceListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Invoice
+            .AsNoTracking()
+            .Include(x => x.SalesOrder)
+                .ThenInclude(so => so!.Customer)
+            .OrderByDescending(x => x.CreatedAt)
+            .Select(x => new GetInvoiceListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                InvoiceDate = x.InvoiceDate,
+                SalesOrderAutoNumber = x.SalesOrder!.AutoNumber,
+                CustomerName = x.SalesOrder!.Customer!.Name,
+                AfterTaxAmount = x.SalesOrder!.AfterTaxAmount,
+                InvoiceStatus = x.InvoiceStatus
+            }).ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,54 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Data.Enums;
+using Indotalent.ConfigBackEnd.Extensions;
+
+namespace Indotalent.Features.Sales.Invoice.Cqrs;
+
+public class InvoiceLookupResponse
+{
+    public List<LookupItem> SalesOrders { get; set; } = new();
+    public List<LookupStatusItem> Statuses { get; set; } = new();
+}
+
+public class LookupItem
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+}
+
+public class LookupStatusItem
+{
+    public int Value { get; set; }
+    public string? Name { get; set; }
+}
+
+public record GetInvoiceLookupQuery() : IRequest<InvoiceLookupResponse>;
+
+public class GetInvoiceLookupHandler : IRequestHandler<GetInvoiceLookupQuery, InvoiceLookupResponse>
+{
+    private readonly AppDbContext _context;
+    public GetInvoiceLookupHandler(AppDbContext context) => _context = context;
+
+    public async Task<InvoiceLookupResponse> Handle(GetInvoiceLookupQuery request, CancellationToken cancellationToken)
+    {
+        var response = new InvoiceLookupResponse();
+
+        response.SalesOrders = await _context.SalesOrder.AsNoTracking()
+            .Where(x => x.OrderStatus == SalesOrderStatus.Confirmed)
+            .OrderByDescending(x => x.CreatedAt)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.AutoNumber })
+            .ToListAsync(cancellationToken);
+
+        response.Statuses = Enum.GetValues(typeof(InvoiceStatus))
+            .Cast<InvoiceStatus>()
+            .Select(x => new LookupStatusItem
+            {
+                Value = (int)x,
+                Name = x.GetDescription()
+            }).ToList();
+
+        return response;
+    }
+}
@@ -0,0 +1,39 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.Invoice.Cqrs;
+
+public record GetSalesOrderDetailForInvoiceQuery(string SalesOrderId) : IRequest<GetInvoiceByIdResponse?>;
+
+public class GetSalesOrderDetailForInvoiceHandler : IRequestHandler<GetSalesOrderDetailForInvoiceQuery, GetInvoiceByIdResponse?>
+{
+    private readonly AppDbContext _context;
+    public GetSalesOrderDetailForInvoiceHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetInvoiceByIdResponse?> Handle(GetSalesOrderDetailForInvoiceQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.SalesOrder
+            .AsNoTracking()
+            .Include(x => x.SalesOrderItemList)
+                .ThenInclude(x => x.Product)
+            .Where(x => x.Id == request.SalesOrderId)
+            .Select(x => new GetInvoiceByIdResponse
+            {
+                SalesOrderId = x.Id,
+                BeforeTaxAmount = x.BeforeTaxAmount,
+                TaxAmount = x.TaxAmount,
+                AfterTaxAmount = x.AfterTaxAmount,
+                Items = x.SalesOrderItemList.Select(i => new InvoiceSalesOrderItemResponse
+                {
+                    Id = i.Id,
+                    ProductId = i.ProductId,
+                    ProductName = i.Product!.Name,
+                    Summary = i.Summary,
+                    UnitPrice = i.UnitPrice,
+                    Quantity = i.Quantity,
+                    Total = i.Total
+                }).ToList()
+            }).FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,44 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.Invoice.Cqrs;
+
+public class UpdateInvoiceRequest
+{
+    public string? Id { get; set; }
+    public DateTime? InvoiceDate { get; set; }
+    public Data.Enums.InvoiceStatus InvoiceStatus { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? Description { get; set; }
+    public string? SalesOrderId { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record UpdateInvoiceCommand(UpdateInvoiceRequest Data) : IRequest<bool>;
+
+public class UpdateInvoiceHandler : IRequestHandler<UpdateInvoiceCommand, bool>
+{
+    private readonly AppDbContext _context;
+    public UpdateInvoiceHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(UpdateInvoiceCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Invoice
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        entity.InvoiceDate = request.Data.InvoiceDate;
+        entity.InvoiceStatus = request.Data.InvoiceStatus;
+        entity.Description = request.Data.Description;
+        entity.SalesOrderId = request.Data.SalesOrderId;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return true;
+    }
+}
@@ -0,0 +1,12 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Sales.Invoice.Cqrs;
+
+public class UpdateInvoiceValidator : AbstractValidator<UpdateInvoiceRequest>
+{
+    public UpdateInvoiceValidator()
+    {
+        RuleFor(x => x.Id).NotEmpty();
+        RuleFor(x => x.SalesOrderId).NotEmpty().WithMessage("Sales Order is required");
+    }
+}
@@ -0,0 +1,77 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Sales.Invoice.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Sales.Invoice;
+
+public static class InvoiceEndpoint
+{
+    public static void MapInvoiceEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/invoice").WithTags("Invoices")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetInvoiceListQuery());
+            return result.ToApiResponse("Invoice list retrieved successfully");
+        })
+        .WithName("GetInvoiceList");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetInvoiceByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Invoice detail retrieved successfully"
+                : $"Invoice with ID {id} not found");
+        })
+        .WithName("GetInvoiceById");
+
+        group.MapGet("/sales-order-detail/{soId}", async (string soId, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetSalesOrderDetailForInvoiceQuery(soId));
+            return result.ToApiResponse(result is not null
+                ? "Sales order detail for invoice retrieved successfully"
+                : $"Sales order with ID {soId} not found");
+        })
+        .WithName("GetSalesOrderDetailForInvoice");
+
+        group.MapGet("/lookup", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetInvoiceLookupQuery());
+            return result.ToApiResponse("Lookup data retrieved successfully");
+        })
+        .WithName("GetInvoiceLookup");
+
+        group.MapPost("/", async (CreateInvoiceRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateInvoiceCommand(request));
+            return result.ToApiResponse("Invoice has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateInvoice");
+
+        group.MapPost("/update", async (UpdateInvoiceRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateInvoiceCommand(request));
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Update failed. Invoice not found.");
+            }
+            return result.ToApiResponse("Invoice has been updated successfully");
+        })
+        .WithName("UpdateInvoice");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteInvoiceByIdCommand(id));
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Delete failed. Invoice not found.");
+            }
+            return true.ToApiResponse("Invoice has been deleted successfully");
+        })
+            .WithName("DeleteInvoiceById");
+    }
+}
@@ -0,0 +1,130 @@
+using QuestPDF.Fluent;
+using QuestPDF.Helpers;
+using QuestPDF.Infrastructure;
+using Indotalent.Features.Sales.Invoice.Cqrs;
+
+namespace Indotalent.Features.Sales.Invoice;
+
+public class InvoicePdfGenerator
+{
+    public static byte[] Generate(GetInvoiceByIdResponse data)
+    {
+        QuestPDF.Settings.License = LicenseType.Community;
+
+        var primaryBlue = "#0D47A1";
+        var textSlate = "#64748b";
+
+        return Document.Create(container =>
+        {
+            container.Page(page =>
+            {
+                page.Size(PageSizes.A4);
+                page.Margin(1.5f, Unit.Centimetre);
+                page.PageColor(Colors.White);
+                page.DefaultTextStyle(x => x.FontSize(9).FontFamily(Fonts.Verdana));
+
+                page.Header().Row(row =>
+                {
+                    row.RelativeItem().Column(col =>
+                    {
+                        col.Item().Text("INVOICE")
+                            .FontSize(20).ExtraBold().FontColor(primaryBlue);
+                        col.Item().Text($"{data.AutoNumber}").FontSize(11).SemiBold();
+                        col.Item().Text($"SO Ref: {data.SalesOrderAutoNumber}").FontSize(9).FontColor(textSlate);
+                    });
+
+                    row.RelativeItem().AlignRight().Column(col =>
+                    {
+                        col.Item().Text(data.CompanyName).FontSize(11).ExtraBold();
+                        col.Item().Text($"{data.CompanyStreet}").FontColor(textSlate);
+                        col.Item().Text($"{data.CompanyCity}, {data.CompanyState} {data.CompanyZipCode}").FontColor(textSlate);
+                        col.Item().Text($"Tel: {data.CompanyPhone}").FontColor(textSlate);
+                    });
+                });
+
+                page.Content().PaddingVertical(20).Column(col =>
+                {
+                    col.Item().Row(row =>
+                    {
+                        row.RelativeItem().Column(c =>
+                        {
+                            c.Item().BorderBottom(1).PaddingBottom(5).Text("BILL TO").FontSize(8).Bold().FontColor(textSlate);
+                            c.Item().PaddingTop(5).Text(data.CustomerName).Bold();
+                            c.Item().Text(data.CustomerStreet);
+                            c.Item().Text(data.CustomerCity);
+                        });
+
+                        row.ConstantItem(40);
+
+                        row.RelativeItem().Column(c =>
+                        {
+                            c.Item().BorderBottom(1).PaddingBottom(5).Text("INVOICE DETAILS").FontSize(8).Bold().FontColor(textSlate);
+                            c.Item().PaddingTop(5).Row(r => {
+                                r.RelativeItem().Text("Invoice Date");
+                                r.RelativeItem().AlignRight().Text(data.InvoiceDate?.ToString("dd MMM yyyy"));
+                            });
+                            c.Item().Row(r => {
+                                r.RelativeItem().Text("Status");
+                                r.RelativeItem().AlignRight().Text(data.InvoiceStatus.ToString().ToUpper()).Bold().FontColor(primaryBlue);
+                            });
+                        });
+                    });
+
+                    col.Item().PaddingTop(20).Table(table =>
+                    {
+                        table.ColumnsDefinition(columns =>
+                        {
+                            columns.ConstantColumn(25);
+                            columns.RelativeColumn(4);
+                            columns.RelativeColumn(2);
+                            columns.RelativeColumn(1.5f);
+                            columns.RelativeColumn(2.5f);
+                        });
+
+                        table.Header(header =>
+                        {
+                            header.Cell().Element(HeaderStyle).Text("#");
+                            header.Cell().Element(HeaderStyle).Text("Product");
+                            header.Cell().Element(HeaderStyle).AlignRight().Text("Unit Price");
+                            header.Cell().Element(HeaderStyle).AlignCenter().Text("Qty");
+                            header.Cell().Element(HeaderStyle).AlignRight().Text($"Total ({data.CurrencySymbol})");
+
+                            static IContainer HeaderStyle(IContainer container) => container.DefaultTextStyle(x => x.SemiBold().FontColor(Colors.White)).PaddingVertical(5).PaddingHorizontal(5).Background("#0D47A1");
+                        });
+
+                        var index = 1;
+                        foreach (var item in data.Items)
+                        {
+                            table.Cell().Element(CellStyle).Text($"{index++}");
+                            table.Cell().Element(CellStyle).Column(c => {
+                                c.Item().Text(item.ProductName).Bold();
+                                if (!string.IsNullOrEmpty(item.Summary)) c.Item().Text(item.Summary).FontSize(8).FontColor(textSlate);
+                            });
+                            table.Cell().Element(CellStyle).AlignRight().Text(item.UnitPrice?.ToString("N2"));
+                            table.Cell().Element(CellStyle).AlignCenter().Text(item.Quantity?.ToString());
+                            table.Cell().Element(CellStyle).AlignRight().Text(item.Total?.ToString("N2"));
+
+                            static IContainer CellStyle(IContainer container) => container.BorderBottom(1).BorderColor("#E2E8F0").PaddingVertical(8).PaddingHorizontal(5);
+                        }
+                    });
+
+                    col.Item().PaddingTop(10).Row(row =>
+                    {
+                        row.RelativeItem().Column(c => {
+                            c.Item().Text("Notes:").FontSize(8).Bold();
+                            c.Item().Text(string.IsNullOrEmpty(data.Description) ? "-" : data.Description).FontSize(8);
+                        });
+                        row.ConstantItem(200).Column(c =>
+                        {
+                            c.Item().Row(r => { r.RelativeItem().Text("Sub Total"); r.RelativeItem().AlignRight().Text(data.BeforeTaxAmount?.ToString("N2")); });
+                            c.Item().Row(r => { r.RelativeItem().Text("Tax Amount"); r.RelativeItem().AlignRight().Text(data.TaxAmount?.ToString("N2")); });
+                            c.Item().PaddingTop(5).BorderTop(1).Row(r => { r.RelativeItem().Text($"TOTAL").Bold(); r.RelativeItem().AlignRight().Text(data.AfterTaxAmount?.ToString("N2")).ExtraBold().FontColor(primaryBlue); });
+                        });
+                    });
+                });
+
+                page.Footer().AlignCenter().Text(x => { x.Span("Page ").FontSize(8); x.CurrentPageNumber().FontSize(8); });
+            });
+        }).GeneratePdf();
+    }
+}
@@ -0,0 +1,71 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Sales.Invoice.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Sales.Invoice;
+
+public class InvoiceService : BaseService
+{
+    private readonly RestClient _client;
+
+    public InvoiceService(
+            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<GetInvoiceListResponse>>?> GetInvoiceListAsync()
+    {
+        var request = new RestRequest("api/invoice", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetInvoiceListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetInvoiceByIdResponse>?> GetInvoiceByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/invoice/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetInvoiceByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetInvoiceByIdResponse>?> GetSalesOrderDetailForInvoiceAsync(string soId)
+    {
+        var request = new RestRequest($"api/invoice/sales-order-detail/{soId}", Method.Get);
+        return await ExecuteWithResponseAsync<GetInvoiceByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<InvoiceLookupResponse>?> GetInvoiceLookupAsync()
+    {
+        var request = new RestRequest("api/invoice/lookup", Method.Get);
+        return await ExecuteWithResponseAsync<InvoiceLookupResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateInvoiceResponse>?> CreateInvoiceAsync(CreateInvoiceRequest data)
+    {
+        var request = new RestRequest("api/invoice", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateInvoiceResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<bool>?> UpdateInvoiceAsync(UpdateInvoiceRequest data)
+    {
+        var request = new RestRequest("api/invoice/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<bool>(_client, request);
+    }
+
+    public async Task<bool> DeleteInvoiceByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/invoice/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+}
@@ -0,0 +1,8 @@
+@page "/sales/invoice-report"
+@using Indotalent.Features.Sales.InvoiceReport.Components
+@using MudBlazor
+
+<_InvoiceReportDataTable />
+
+@code {
+}
@@ -0,0 +1,289 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.InvoiceReport
+@using Indotalent.Features.Sales.InvoiceReport.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject InvoiceReportService InvoiceReportService
+@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;">Invoice Report</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Summary of customer billing, invoice dates, and payment status.</MudText>
+    </div>
+    <div class="d-flex align-center gap-2">
+        <MudIcon Icon="@Icons.Material.Filled.Home" Size="Size.Small" Color="Color.Default" />
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">Sales</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Invoice Report</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
+    <div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <MudTextField @bind-Value="_searchString"
+                          Placeholder="Search Invoice, Customer or Order..."
+                          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;">
+                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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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>
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetInvoiceReportListDto" Loading="@_isRefreshing">
+        <HeaderContent>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetInvoiceReportListDto, object>(x => x.CustomerName!)">Customer</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetInvoiceReportListDto, object>(x => x.Number!)">Invoice Number</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetInvoiceReportListDto, object>(x => x.InvoiceDate!)">Invoice Date</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetInvoiceReportListDto, object>(x => x.SalesOrderNumber!)">Sales Order</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; text-align: right; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">
+                <MudTableSortLabel SortBy="new Func<GetInvoiceReportListDto, object>(x => x.AfterTaxAmount!)">Total Amount</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetInvoiceReportListDto, object>(x => x.StatusName!)">Status</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>@context.CustomerName</MudTd>
+            <MudTd>@context.Number</MudTd>
+            <MudTd>@context.InvoiceDate?.ToString("yyyy-MM-dd")</MudTd>
+            <MudTd>@context.SalesOrderNumber</MudTd>
+            <MudTd Style="text-align: right; font-weight: 700; color: #2e7d32;">@context.AfterTaxAmount?.ToString("N2")</MudTd>
+            <MudTd>
+                <MudChip T="string" Color="Color.Info" Size="Size.Small" Variant="Variant.Text" Style="font-weight: 800;">@context.StatusName.ToUpper()</MudChip>
+            </MudTd>
+        </RowTemplate>
+    </MudTable>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background-color: #F9FAFB; border-top: 1px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 500; color: #9CA3AF; font-size: 0.75rem;">Rows per page:</MudText>
+            <MudSelect T="int" Value="@_top" ValueChanged="OnPageSizeChanged" Dense="true" Margin="Margin.Dense" Style="width: 80px; background-color: white; font-size: 12px; font-weight: 600;" Variant="Variant.Outlined" Class="mt-0 custom-select-dense">
+                <MudSelectItem Value="5" />
+                <MudSelectItem Value="10" />
+                <MudSelectItem Value="50" />
+                <MudSelectItem Value="500" />
+                <MudSelectItem Value="1000" />
+            </MudSelect>
+            <MudText Typo="Typo.caption" Style="color: #9CA3AF; margin-left: 12px; font-size: 0.75rem; font-weight: 500;">
+                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; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Prev</MudButton>
+            @{
+    var totalPages = _totalPage == 0 ? 1 : _totalPage;
+    var maxVisible = 5;
+    var startPage = Math.Max(1, _currentPage - maxVisible / 2);
+    var endPage = Math.Min(totalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) { startPage = Math.Max(1, endPage - maxVisible + 1); }
+}
+@for (int i = startPage; i <= endPage; i++)
+{
+    var pageNum = i;
+    var isActive = pageNum == _currentPage;
+    <MudButton OnClick="@(() => OnPageChanged(pageNum))"
+               Variant="Variant.Text" Size="Size.Small"
+               Style="@(isActive ? "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 600; background: #3B82F6; color: white; border: 1px solid #3B82F6; border-radius: 6px; text-transform: none;" : "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 500; color: #374151; background: white; border: 1px solid #D1D5DB; border-radius: 6px; text-transform: none;")">@pageNum</MudButton>
+}
+            <MudButton OnClick="@(() => OnPageChanged(_currentPage + 1))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Variant="Variant.Text" EndIcon="@Icons.Material.Filled.ChevronRight" Size="Size.Small" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "text-transform: none; font-weight: 500; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Next</MudButton>
+            <MudIconButton Icon="@Icons.Material.Filled.LastPage" Size="Size.Small" OnClick="@(() => OnPageChanged(_totalPage))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "color: #D1D5DB; background: transparent;" : "color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")" />
+        </div>
+    </div>
+</MudPaper>
+<style>
+.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+@code {
+    private List<GetInvoiceReportListDto> _items = new();
+    private string _searchString = "";
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    private int _skip = 0;
+    private int _top = 50;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / (_top == 0 ? 1 : _top));
+    private int _currentPage => (_top >= GetFilteredData().Count() || _top == 0) ? 1 : (_skip / _top) + 1;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        StateHasChanged();
+        try
+        {
+            var response = await InvoiceReportService.GetInvoiceReportListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _items = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetInvoiceReportListDto> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _items;
+        return _items.Where(x =>
+            (x.Number?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.CustomerName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.SalesOrderNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetInvoiceReportListDto> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick()
+    {
+        _skip = 0;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private async Task ExportToExcel()
+    {
+        _isExporting = true;
+        StateHasChanged();
+        try
+        {
+            await Task.Delay(1000);
+            using (var workbook = new XLWorkbook())
+            {
+                var worksheet = workbook.Worksheets.Add("InvoiceReports");
+                var currentRow = 1;
+
+                string[] headers = { "Customer", "Invoice Number", "Invoice Date", "Sales Order", "Total Amount", "Status" };
+                for (int i = 0; i < headers.Length; i++)
+                {
+                    worksheet.Cell(currentRow, i + 1).Value = headers[i];
+                }
+
+                var headerRange = worksheet.Range(1, 1, 1, headers.Length);
+                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.CustomerName;
+                    worksheet.Cell(currentRow, 2).Value = item.Number;
+                    worksheet.Cell(currentRow, 3).Value = item.InvoiceDate?.ToString("yyyy-MM-dd");
+                    worksheet.Cell(currentRow, 4).Value = item.SalesOrderNumber;
+                    worksheet.Cell(currentRow, 5).Value = item.AfterTaxAmount;
+                    worksheet.Cell(currentRow, 6).Value = item.StatusName;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Invoice_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 OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _skip = (page - 1) * _top;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        StateHasChanged();
+    }
+}
@@ -0,0 +1,51 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.InvoiceReport.Cqrs;
+
+public record GetInvoiceReportListDto
+{
+    public string? Id { get; init; }
+    public string? Number { get; init; }
+    public DateTime? InvoiceDate { get; init; }
+    public string? StatusName { get; init; }
+    public string? SalesOrderNumber { get; init; }
+    public decimal? AfterTaxAmount { get; init; }
+    public string? CustomerName { get; init; }
+}
+
+public record GetInvoiceReportListQuery() : IRequest<List<GetInvoiceReportListDto>>;
+
+public class GetInvoiceReportListHandler : IRequestHandler<GetInvoiceReportListQuery, List<GetInvoiceReportListDto>>
+{
+    private readonly AppDbContext _context;
+
+    public GetInvoiceReportListHandler(AppDbContext context)
+    {
+        _context = context;
+    }
+
+    public async Task<List<GetInvoiceReportListDto>> Handle(GetInvoiceReportListQuery request, CancellationToken cancellationToken)
+    {
+        var results = await _context.Invoice
+            .AsNoTracking()
+            .Include(x => x.SalesOrder)
+                .ThenInclude(x => x!.Customer)
+            .OrderByDescending(x => x.InvoiceDate)
+            .Select(x => new GetInvoiceReportListDto
+            {
+                Id = x.Id,
+                Number = x.AutoNumber,
+                InvoiceDate = x.InvoiceDate,
+                StatusName = x.InvoiceStatus.GetDescription(),
+                SalesOrderNumber = x.SalesOrder != null ? x.SalesOrder.AutoNumber : string.Empty,
+                AfterTaxAmount = x.SalesOrder != null ? x.SalesOrder.AfterTaxAmount : 0,
+                CustomerName = (x.SalesOrder != null && x.SalesOrder.Customer != null) ? x.SalesOrder.Customer.Name : string.Empty
+            })
+            .ToListAsync(cancellationToken);
+
+        return results;
+    }
+}
@@ -0,0 +1,23 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Sales.InvoiceReport.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Sales.InvoiceReport;
+
+public static class InvoiceReportEndpoint
+{
+    public static void MapInvoiceReportEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/invoice-report").WithTags("InvoiceReports")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetInvoiceReportListQuery());
+            return result.ToApiResponse("Invoice report list retrieved successfully");
+        })
+        .WithName("GetInvoiceReportList");
+    }
+}
@@ -0,0 +1,32 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Sales.InvoiceReport.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Sales.InvoiceReport;
+
+public class InvoiceReportService : BaseService
+{
+    private readonly RestClient _client;
+
+    public InvoiceReportService(
+            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<GetInvoiceReportListDto>>?> GetInvoiceReportListAsync()
+    {
+        var request = new RestRequest("api/invoice-report", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetInvoiceReportListDto>>(_client, request);
+    }
+}
@@ -0,0 +1,51 @@
+@page "/sales/payment-receive"
+@using Indotalent.Features.Sales.PaymentReceive.Cqrs
+@using Indotalent.Features.Sales.PaymentReceive.Components
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_PaymentReceiveCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_PaymentReceiveUpdateForm Data="_selectedData!"
+                               ReadOnly="@(_currentView == ViewMode.View)"
+                               OnCancel="BackToTable"
+                               OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_PaymentReceiveDataTable 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 UpdatePaymentReceiveRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdatePaymentReceiveRequest 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,216 @@
+@using Indotalent.Features.Sales.PaymentReceive.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject PaymentReceiveService PaymentReceiveService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+    <div class="d-flex align-center gap-4">
+        <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
+        <div>
+            <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Add Payment Receive</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Process customer payment for an existing invoice.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 4px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12"><MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Basic Information</MudText><MudDivider /></MudItem>
+            
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Payment Date</MudText>
+                <MudDatePicker @bind-Date="_model.PaymentDate"
+                               Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Invoice Reference</MudText>
+                <MudSelect T="string" Value="_model.InvoiceId"
+                           ValueChanged="OnInvoiceChanged"
+                           For="@(() => _model.InvoiceId)"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Invoices)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Payment Method</MudText>
+                <MudSelect T="string" @bind-Value="_model.PaymentMethodId"
+                           For="@(() => _model.PaymentMethodId)"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.PaymentMethods)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Status</MudText>
+                <MudSelect T="Indotalent.Data.Enums.PaymentReceiveStatus" @bind-Value="_model.Status"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Statuses)
+                    {
+                        <MudSelectItem Value="@((Indotalent.Data.Enums.PaymentReceiveStatus)item.Value)">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Payment Amount</MudText>
+                <MudNumericField @bind-Value="_model.PaymentAmount"
+                                 Format="N2"
+                                 Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Customer</MudText>
+                <MudTextField Value="@_customerName" ReadOnly="true"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Style="background-color: #f1f5f9;" />
+            </MudItem>
+
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description"
+                              For="@(() => _model.Description)"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" Lines="2" FullWidth="true" />
+            </MudItem>
+
+            <MudItem xs="12" Class="mt-6">
+                <_PaymentReceiveItemDataTable Items="_items" />
+            </MudItem>
+
+            <MudItem xs="12" sm="7"></MudItem>
+            <MudItem xs="12" sm="5">
+                <MudPaper Elevation="0" Outlined="true" Class="pa-4" Style="border-radius: 4px; background-color: #F8FAFC; border: 1px solid #DCEBFA;">
+                    <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;" Class="mb-4 d-block">Invoice Commercial Summary</MudText>
+                    <div class="d-flex justify-space-between mb-2">
+                        <MudText Typo="Typo.body2">Sub Total</MudText>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@_invoiceSubTotal.ToString("N2")</MudText>
+                    </div>
+                    <div class="d-flex justify-space-between mb-2">
+                        <MudText Typo="Typo.body2">Tax Amount</MudText>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@_invoiceTax.ToString("N2")</MudText>
+                    </div>
+                    <MudDivider Class="my-2" />
+                    <div class="d-flex justify-space-between">
+                        <MudText Typo="Typo.subtitle1" Style="font-weight: 900;">Grand Total</MudText>
+                        <MudText Typo="Typo.subtitle1" Color="Color.Primary" Style="font-weight: 900;">@_invoiceGrandTotal.ToString("N2")</MudText>
+                    </div>
+                </MudPaper>
+            </MudItem>
+        </MudGrid>
+
+        <div class="d-flex justify-end gap-2 mt-8">
+            <MudButton OnClick="() => OnCancel.InvokeAsync()"
+                       Variant="Variant.Outlined"
+                       Disabled="_processing"
+                       Style="border-radius: 4px; text-transform: none; font-weight: 700; border: 1px solid #e0e0e0;">
+                Cancel
+            </MudButton>
+            <MudButton Color="Color.Primary"
+                       Variant="Variant.Filled"
+                       OnClick="Submit"
+                       Disabled="_processing"
+                       Style="border-radius: 4px; text-transform: none; font-weight: 700;">
+                @if (_processing)
+                {
+                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                    <MudText Class="ms-2" Typo="Typo.button" Style="text-transform: none !important;">Processing...</MudText>
+                }
+                else
+                {
+                    <MudText>Process Payment</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreatePaymentReceiveRequest _model = new() { PaymentDate = DateTime.Today, Status = Indotalent.Data.Enums.PaymentReceiveStatus.Draft };
+    private PaymentReceiveLookupResponse _lookup = new();
+    private List<PaymentReceiveItemResponse> _items = new();
+    
+    private string _customerName = "";
+    private decimal _invoiceSubTotal = 0;
+    private decimal _invoiceTax = 0;
+    private decimal _invoiceGrandTotal = 0;
+    private bool _processing = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var res = await PaymentReceiveService.GetPaymentReceiveLookupAsync();
+        if (res != null && res.IsSuccess) _lookup = res.Value ?? new();
+    }
+
+    private async Task OnInvoiceChanged(string invoiceId)
+    {
+        _model.InvoiceId = invoiceId;
+        if (string.IsNullOrEmpty(invoiceId))
+        {
+            ResetInvoiceData();
+            return;
+        }
+
+        var res = await PaymentReceiveService.GetInvoiceDetailForPaymentAsync(invoiceId);
+        await Task.Delay(500);
+        if (res != null && res.IsSuccess && res.Value != null)
+        {
+            _items = res.Value.Items;
+            _customerName = res.Value.CustomerName ?? "";
+            _invoiceSubTotal = res.Value.SalesOrderBeforeTaxAmount;
+            _invoiceTax = res.Value.SalesOrderTaxAmount;
+            _invoiceGrandTotal = res.Value.SalesOrderAfterTaxAmount;
+            
+            _model.PaymentAmount = res.Value.PaymentAmount;
+            
+            Snackbar.Add($"Invoice {res.Value.InvoiceNumber} items loaded.", Severity.Info);
+        }
+    }
+
+    private void ResetInvoiceData()
+    {
+        _items.Clear();
+        _customerName = "";
+        _invoiceSubTotal = 0;
+        _invoiceTax = 0;
+        _invoiceGrandTotal = 0;
+        _model.PaymentAmount = 0;
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await PaymentReceiveService.CreatePaymentReceiveAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Payment recorded successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,379 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.PaymentReceive
+@using Indotalent.Features.Sales.PaymentReceive.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject PaymentReceiveService PaymentReceiveService
+@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;">Payment Receive</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Record and manage customer payments for invoices.</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;">Sales</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Payment Receive</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
+    <div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <MudTextField @bind-Value="_searchString"
+                          Placeholder="Search..."
+                          Adornment="Adornment.Start"
+                          AdornmentIcon="@Icons.Material.Filled.Search"
+                          IconSize="Size.Small"
+                          Class="mt-0"
+                          Variant="Variant.Outlined"
+                          Margin="Margin.Dense"
+                          Style="background-color: white; width: 280px; border-radius: 8px;"
+                          OnKeyDown="@HandleSearchKeyDown" />
+            <MudButton Variant="Variant.Filled"
+                       Color="Color.Primary"
+                       OnClick="OnSearchClick"
+                       Size="Size.Small"
+                       Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px;">
+                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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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 (_selectedItem != null)
+            {
+                <MudButton Variant="Variant.Outlined" Color="Color.Info" StartIcon="@Icons.Material.Filled.Visibility" OnClick="InvokeView" Size="Size.Small" Style="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; color: #6B7280;">View</MudButton>
+                <MudButton Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Edit" OnClick="InvokeEdit" Size="Size.Small" Style="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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; background: white; border: 1px solid #FCA5A5; color: #EF4444;">Remove</MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedItem = 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;">
+                    Add Payment Receive
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetPaymentReceiveListResponse" OnRowClick="@((args) => _selectedItem = 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<GetPaymentReceiveListResponse, object>(x => x.AutoNumber!)">Payment No</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<GetPaymentReceiveListResponse, object>(x => x.PaymentDate!)">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<GetPaymentReceiveListResponse, object>(x => x.InvoiceNumber!)">Invoice Ref</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<GetPaymentReceiveListResponse, object>(x => x.CustomerName!)">Customer</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style=" color: #1a1a1a; text-transform: uppercase; font-size: 0.75rem; background-color: #ffffff; border-bottom: 2px solid #E5E7EB; white-space: nowrap; text-align: right;">
+                <MudTableSortLabel SortBy="new Func<GetPaymentReceiveListResponse, object>(x => x.PaymentAmount!)">Amount</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<GetPaymentReceiveListResponse, object>(x => x.Status)">Status</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedItem?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>@context.AutoNumber</MudTd>
+            <MudTd>@context.PaymentDate?.ToString("yyyy-MM-dd")</MudTd>
+            <MudTd>@context.InvoiceNumber</MudTd>
+            <MudTd>@context.CustomerName</MudTd>
+            <MudTd Style="text-align: right; font-weight: 700;">@context.PaymentAmount.ToString("N2")</MudTd>
+            <MudTd>
+                <MudChip T="string" Color="Color.Info" Size="Size.Small" Variant="Variant.Text" Style="font-weight: 800;">@context.Status.ToString().ToUpper()</MudChip>
+            </MudTd>
+        </RowTemplate>
+    </MudTable>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background-color: #F9FAFB; border-top: 1px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 500; color: #9CA3AF; font-size: 0.75rem;">Rows per page:</MudText>
+            <MudSelect T="int" Value="@_top" ValueChanged="OnPageSizeChanged" Dense="true" Margin="Margin.Dense" Style="width: 80px; background-color: white; font-size: 12px; font-weight: 600;" Variant="Variant.Outlined" Class="mt-0">
+                <MudSelectItem Value="5" />
+                <MudSelectItem Value="10" />
+                <MudSelectItem Value="50" />
+                <MudSelectItem Value="500" />
+                <MudSelectItem Value="1000" />
+            </MudSelect>
+            <MudText Typo="Typo.caption" Style="color: #9CA3AF; margin-left: 12px; font-size: 0.75rem; font-weight: 500;">
+                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; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Prev</MudButton>
+            @{
+    var totalPages = _totalPage == 0 ? 1 : _totalPage;
+    var maxVisible = 5;
+    var startPage = Math.Max(1, _currentPage - maxVisible / 2);
+    var endPage = Math.Min(totalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) { startPage = Math.Max(1, endPage - maxVisible + 1); }
+}
+@for (int i = startPage; i <= endPage; i++)
+{
+    var pageNum = i;
+    var isActive = pageNum == _currentPage;
+    <MudButton OnClick="@(() => OnPageChanged(pageNum))"
+               Variant="Variant.Text" Size="Size.Small"
+               Style="@(isActive ? "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 600; background: #3B82F6; color: white; border: 1px solid #3B82F6; border-radius: 6px; text-transform: none;" : "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 500; color: #374151; background: white; border: 1px solid #D1D5DB; border-radius: 6px; text-transform: none;")">@pageNum</MudButton>
+}
+            <MudButton OnClick="@(() => OnPageChanged(_currentPage + 1))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Variant="Variant.Text" EndIcon="@Icons.Material.Filled.ChevronRight" Size="Size.Small" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "text-transform: none; font-weight: 500; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Next</MudButton>
+            <MudIconButton Icon="@Icons.Material.Filled.LastPage" Size="Size.Small" OnClick="@(() => OnPageChanged(_totalPage))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "color: #D1D5DB; background: transparent;" : "color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")" />
+        </div>
+    </div>
+</MudPaper>
+<style>
+.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+@code {
+    [Parameter] public EventCallback OnAdd { get; set; }
+    [Parameter] public EventCallback<UpdatePaymentReceiveRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdatePaymentReceiveRequest> OnView { get; set; }
+
+    private List<GetPaymentReceiveListResponse> _items = new();
+    private GetPaymentReceiveListResponse? _selectedItem;
+    private string _searchString = "";
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    private int _skip = 0;
+    private int _top = 5;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / (_top == 0 ? 1 : _top));
+    private int _currentPage => (_top >= GetFilteredData().Count() || _top == 0) ? 1 : (_skip / _top) + 1;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        _selectedItem = null;
+        StateHasChanged();
+        try
+        {
+            var response = await PaymentReceiveService.GetPaymentReceiveListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _items = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetPaymentReceiveListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _items;
+        return _items.Where(x =>
+            (x.AutoNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.InvoiceNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.CustomerName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetPaymentReceiveListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick()
+    {
+        _skip = 0;
+        _selectedItem = null;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private async Task ExportToExcel()
+    {
+        _isExporting = true;
+        StateHasChanged();
+        try
+        {
+            await Task.Delay(1000);
+            using (var workbook = new XLWorkbook())
+            {
+                var worksheet = workbook.Worksheets.Add("PaymentReceives");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Payment No";
+                worksheet.Cell(currentRow, 2).Value = "Date";
+                worksheet.Cell(currentRow, 3).Value = "Invoice Ref";
+                worksheet.Cell(currentRow, 4).Value = "Customer";
+                worksheet.Cell(currentRow, 5).Value = "Amount";
+                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.AutoNumber;
+                    worksheet.Cell(currentRow, 2).Value = item.PaymentDate?.ToString("yyyy-MM-dd");
+                    worksheet.Cell(currentRow, 3).Value = item.InvoiceNumber;
+                    worksheet.Cell(currentRow, 4).Value = item.CustomerName;
+                    worksheet.Cell(currentRow, 5).Value = item.PaymentAmount;
+                    worksheet.Cell(currentRow, 6).Value = item.Status.ToString();
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "PaymentReceive_List.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 OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _skip = (page - 1) * _top;
+            _selectedItem = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        _selectedItem = null;
+        StateHasChanged();
+    }
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedItem == null) return;
+        var request = await MapToUpdateRequest(_selectedItem.Id!);
+        if (request != null) await OnEdit.InvokeAsync(request);
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedItem == null) return;
+        var request = await MapToUpdateRequest(_selectedItem.Id!);
+        if (request != null) await OnView.InvokeAsync(request);
+    }
+
+    private async Task<UpdatePaymentReceiveRequest?> MapToUpdateRequest(string id)
+    {
+        var response = await PaymentReceiveService.GetPaymentReceiveByIdAsync(id);
+        if (response != null && response.IsSuccess && response.Value != null)
+        {
+            var detail = response.Value;
+            return new UpdatePaymentReceiveRequest
+            {
+                Id = detail.Id,
+                InvoiceId = detail.InvoiceId,
+                AutoNumber = detail.AutoNumber,
+                Description = detail.Description,
+                PaymentDate = detail.PaymentDate,
+                PaymentMethodId = detail.PaymentMethodId,
+                PaymentAmount = detail.PaymentAmount,
+                Status = detail.Status,
+                CreatedAt = detail.CreatedAt,
+                CreatedBy = detail.CreatedBy,
+                UpdatedAt = detail.UpdatedAt,
+                UpdatedBy = detail.UpdatedBy
+            };
+        }
+        return null;
+    }
+
+    private async Task OnDelete()
+    {
+        if (_selectedItem == null) return;
+
+        var parameters = new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, _selectedItem.AutoNumber } };
+        var options = new DialogOptions { CloseButton = false, MaxWidth = MaxWidth.ExtraSmall, FullWidth = true };
+
+        var dialog = await DialogService.ShowAsync<_DeleteConfirmation>("", parameters, options);
+        var result = await dialog.Result;
+
+        if (result != null && !result.Canceled)
+        {
+            var isSuccess = await PaymentReceiveService.DeletePaymentReceiveByIdAsync(_selectedItem.Id!);
+            if (isSuccess)
+            {
+                _selectedItem = null;
+                await LoadData();
+                Snackbar.Add("Deleted successfully", Severity.Success);
+            }
+        }
+    }
+}
@@ -0,0 +1,35 @@
+@using Indotalent.Features.Sales.PaymentReceive.Cqrs
+@using MudBlazor
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 4px; border: 1px solid #E5E7EB;">
+    <div style="padding: 16px; border-bottom: 1px solid #E5E7EB; background-color: #F8FAFC;">
+        <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Referenced Invoice Items</MudText>
+    </div>
+
+    <MudTable Items="Items" Hover="true" Elevation="0" Dense="true" T="PaymentReceiveItemResponse">
+        <HeaderContent>
+            <MudTh Style="font-weight: 700;">Product</MudTh>
+            <MudTh Style="font-weight: 700; text-align: right;">UnitPrice</MudTh>
+            <MudTh Style="font-weight: 700; text-align: right;">Quantity</MudTh>
+            <MudTh Style="font-weight: 700; text-align: right;">Total</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd DataLabel="Product">
+                <MudText Typo="Typo.body2" Style="font-weight: 600;">@context.ProductName</MudText>
+                @if (!string.IsNullOrEmpty(context.Summary))
+                {
+                    <MudText Typo="Typo.caption" Color="Color.Secondary">@context.Summary</MudText>
+                }
+            </MudTd>
+            <MudTd DataLabel="UnitPrice" Style="text-align: right;">@context.UnitPrice.ToString("N2")</MudTd>
+            <MudTd DataLabel="Quantity" Style="text-align: right;">@context.Quantity</MudTd>
+            <MudTd DataLabel="Total" Style="text-align: right; font-weight: 700;">@context.Total.ToString("N2")</MudTd>
+        </RowTemplate>
+    </MudTable>
+</MudPaper>
+<style>
+.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+@code {
+    [Parameter] public List<PaymentReceiveItemResponse> Items { get; set; } = new();
+}
@@ -0,0 +1,302 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.PaymentReceive.Cqrs
+@using Indotalent.Features.Sales.PaymentReceive.Components
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@using Microsoft.JSInterop
+@inject PaymentReceiveService PaymentReceiveService
+@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 #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 ? "Details" : "Edit") Payment Receive</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">@_model.AutoNumber</MudText>
+        </div>
+    </div>
+    @if (ReadOnly || !string.IsNullOrEmpty(_model.Id))
+    {
+        <MudButton Variant="Variant.Filled"
+                   Color="Color.Info"
+                   StartIcon="@(_isPrinting ? null : Icons.Material.Filled.Print)"
+                   OnClick="DownloadPdf"
+                   Disabled="_isPrinting"
+                   Style="border-radius: 4px; text-transform: none; font-weight: 700; box-shadow: none;">
+            @if (_isPrinting)
+            {
+                <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                <MudText Class="ms-2">Generating Receipt...</MudText>
+            }
+            else
+            {
+                <MudText>Print Receipt</MudText>
+            }
+        </MudButton>
+    }
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 4px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12"><MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Basic Information</MudText><MudDivider /></MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Payment Date</MudText>
+                <MudDatePicker @bind-Date="_model.PaymentDate" ReadOnly="ReadOnly"
+                               Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Invoice Reference</MudText>
+                <MudSelect T="string" Value="_model.InvoiceId"
+                           ValueChanged="OnInvoiceChanged"
+                           ReadOnly="ReadOnly"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Invoices)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Payment Method</MudText>
+                <MudSelect T="string" @bind-Value="_model.PaymentMethodId"
+                           ReadOnly="ReadOnly"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.PaymentMethods)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Status</MudText>
+                <MudSelect T="Indotalent.Data.Enums.PaymentReceiveStatus" @bind-Value="_model.Status"
+                           ReadOnly="ReadOnly"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Statuses)
+                    {
+                        <MudSelectItem Value="@((Indotalent.Data.Enums.PaymentReceiveStatus)item.Value)">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Payment Amount</MudText>
+                <MudNumericField @bind-Value="_model.PaymentAmount"
+                                 ReadOnly="ReadOnly"
+                                 Format="N2"
+                                 Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Customer</MudText>
+                <MudTextField Value="@_customerName" ReadOnly="true"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Style="background-color: #f1f5f9;" />
+            </MudItem>
+
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description"
+                              ReadOnly="ReadOnly"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" Lines="2" FullWidth="true" />
+            </MudItem>
+
+            <MudItem xs="12" Class="mt-6">
+                <_PaymentReceiveItemDataTable Items="_items" />
+            </MudItem>
+
+            <MudItem xs="12" sm="7"></MudItem>
+            <MudItem xs="12" sm="5">
+                <MudPaper Elevation="0" Outlined="true" Class="pa-4" Style="border-radius: 4px; background-color: #F8FAFC; border: 1px solid #DCEBFA;">
+                    <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;" Class="mb-4 d-block">Invoice Commercial Summary</MudText>
+                    <div class="d-flex justify-space-between mb-2">
+                        <MudText Typo="Typo.body2">Sub Total</MudText>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@_invoiceSubTotal.ToString("N2")</MudText>
+                    </div>
+                    <div class="d-flex justify-space-between mb-2">
+                        <MudText Typo="Typo.body2">Tax Amount</MudText>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@_invoiceTax.ToString("N2")</MudText>
+                    </div>
+                    <MudDivider Class="my-2" />
+                    <div class="d-flex justify-space-between">
+                        <MudText Typo="Typo.subtitle1" Style="font-weight: 900;">Grand Total</MudText>
+                        <MudText Typo="Typo.subtitle1" Color="Color.Primary" Style="font-weight: 900;">@_invoiceGrandTotal.ToString("N2")</MudText>
+                    </div>
+                </MudPaper>
+            </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-radius: 4px; text-transform: none; font-weight: 700; border: 1px solid #e0e0e0;">
+                @(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 UpdatePaymentReceiveRequest 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 UpdatePaymentReceiveRequest _model = new();
+    private List<PaymentReceiveItemResponse> _items = new();
+    private PaymentReceiveLookupResponse _lookup = new();
+    
+    private string _customerName = "";
+    private decimal _invoiceSubTotal = 0;
+    private decimal _invoiceTax = 0;
+    private decimal _invoiceGrandTotal = 0;
+    
+    private bool _processing = false;
+    private bool _isPrinting = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var resLookup = await PaymentReceiveService.GetPaymentReceiveLookupAsync();
+        if (resLookup != null && resLookup.IsSuccess) _lookup = resLookup.Value ?? new();
+
+        _model = Data;
+        await LoadInvoiceDetails(_model.InvoiceId ?? "");
+    }
+
+    private async Task OnInvoiceChanged(string invoiceId)
+    {
+        if (ReadOnly || _model.InvoiceId == invoiceId) return;
+        _model.InvoiceId = invoiceId;
+        await LoadInvoiceDetails(invoiceId);
+        Snackbar.Add("Invoice items and amounts updated.", Severity.Info);
+    }
+
+    private async Task LoadInvoiceDetails(string invoiceId)
+    {
+        if (string.IsNullOrEmpty(invoiceId)) return;
+
+        try
+        {
+            var response = await PaymentReceiveService.GetInvoiceDetailForPaymentAsync(invoiceId);
+            await Task.Delay(500);
+            
+            if (response != null && response.IsSuccess && response.Value != null)
+            {
+                _items = response.Value.Items;
+                _customerName = response.Value.CustomerName ?? "";
+                _invoiceSubTotal = response.Value.SalesOrderBeforeTaxAmount;
+                _invoiceTax = response.Value.SalesOrderTaxAmount;
+                _invoiceGrandTotal = response.Value.SalesOrderAfterTaxAmount;
+                
+                if (!ReadOnly)
+                {
+                    _model.PaymentAmount = response.Value.PaymentAmount;
+                }
+                
+                StateHasChanged();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+    }
+
+    private async Task DownloadPdf()
+    {
+        try
+        {
+            _isPrinting = true;
+            StateHasChanged();
+            await Task.Delay(1000);
+
+            var response = await PaymentReceiveService.GetPaymentReceiveByIdAsync(_model.Id!);
+            if (response != null && response.IsSuccess && response.Value != null)
+            {
+                var pdfBytes = PaymentReceivePdfGenerator.Generate(response.Value);
+                var fileName = $"Receipt_{response.Value.AutoNumber}.pdf";
+                var base64 = Convert.ToBase64String(pdfBytes);
+                await JSRuntime.InvokeVoidAsync("downloadFile", fileName, "application/pdf", base64);
+                Snackbar.Add("Receipt generated successfully.", Severity.Success);
+            }
+        }
+        finally
+        {
+            _isPrinting = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await PaymentReceiveService.UpdatePaymentReceiveAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,59 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+
+namespace Indotalent.Features.Sales.PaymentReceive.Cqrs;
+
+public class CreatePaymentReceiveRequest
+{
+    public string? InvoiceId { get; set; }
+    public string? Description { get; set; }
+    public DateTime? PaymentDate { get; set; }
+    public string? PaymentMethodId { get; set; }
+    public decimal? PaymentAmount { get; set; }
+    public Data.Enums.PaymentReceiveStatus Status { get; set; }
+}
+
+public class CreatePaymentReceiveResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+}
+
+public record CreatePaymentReceiveCommand(CreatePaymentReceiveRequest Data) : IRequest<CreatePaymentReceiveResponse>;
+
+public class CreatePaymentReceiveHandler : IRequestHandler<CreatePaymentReceiveCommand, CreatePaymentReceiveResponse>
+{
+    private readonly AppDbContext _context;
+    public CreatePaymentReceiveHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreatePaymentReceiveResponse> Handle(CreatePaymentReceiveCommand request, CancellationToken cancellationToken)
+    {
+        var entityName = nameof(Data.Entities.PaymentReceive);
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"PAY/{{Year}}/{{Month}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.PaymentReceive
+        {
+            AutoNumber = autoNo,
+            InvoiceId = request.Data.InvoiceId,
+            Description = request.Data.Description,
+            PaymentDate = request.Data.PaymentDate,
+            PaymentMethodId = request.Data.PaymentMethodId,
+            PaymentAmount = request.Data.PaymentAmount ?? 0,
+            Status = request.Data.Status
+        };
+
+        _context.PaymentReceive.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreatePaymentReceiveResponse
+        {
+            Id = entity.Id,
+            AutoNumber = entity.AutoNumber
+        };
+    }
+}
@@ -0,0 +1,14 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Sales.PaymentReceive.Cqrs;
+
+public class CreatePaymentReceiveValidator : AbstractValidator<CreatePaymentReceiveRequest>
+{
+    public CreatePaymentReceiveValidator()
+    {
+        RuleFor(x => x.InvoiceId).NotEmpty().WithMessage("Invoice reference is required");
+        RuleFor(x => x.PaymentDate).NotEmpty().WithMessage("Payment date is required");
+        RuleFor(x => x.PaymentMethodId).NotEmpty().WithMessage("Payment method is required");
+        RuleFor(x => x.PaymentAmount).GreaterThan(0).WithMessage("Amount must be greater than 0");
+    }
+}
@@ -0,0 +1,25 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.PaymentReceive.Cqrs;
+
+public record DeletePaymentReceiveByIdCommand(string Id) : IRequest<bool>;
+
+public class DeletePaymentReceiveByIdHandler : IRequestHandler<DeletePaymentReceiveByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+    public DeletePaymentReceiveByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeletePaymentReceiveByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.PaymentReceive
+            .FirstOrDefaultAsync(x => x.Id == request.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.PaymentReceive.Remove(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+        return true;
+    }
+}
@@ -0,0 +1,52 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.PaymentReceive.Cqrs;
+
+public record GetInvoiceDetailForPaymentQuery(string InvoiceId) : IRequest<GetPaymentReceiveByIdResponse?>;
+
+public class GetInvoiceDetailForPaymentHandler : IRequestHandler<GetInvoiceDetailForPaymentQuery, GetPaymentReceiveByIdResponse?>
+{
+    private readonly AppDbContext _context;
+    public GetInvoiceDetailForPaymentHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetPaymentReceiveByIdResponse?> Handle(GetInvoiceDetailForPaymentQuery request, CancellationToken cancellationToken)
+    {
+        var invoice = await _context.Invoice
+            .AsNoTracking()
+            .Include(x => x.SalesOrder)
+                .ThenInclude(so => so!.Customer)
+            .Include(x => x.SalesOrder)
+                .ThenInclude(so => so!.SalesOrderItemList)
+                    .ThenInclude(si => si.Product)
+            .FirstOrDefaultAsync(x => x.Id == request.InvoiceId, cancellationToken);
+
+        if (invoice == null) return null;
+
+        var salesOrder = invoice.SalesOrder;
+
+        return new GetPaymentReceiveByIdResponse
+        {
+            InvoiceId = invoice.Id,
+            InvoiceNumber = invoice.AutoNumber,
+            CustomerName = salesOrder?.Customer?.Name,
+            CustomerStreet = salesOrder?.Customer?.Street,
+            CustomerCity = salesOrder?.Customer?.City,
+            SalesOrderBeforeTaxAmount = salesOrder?.BeforeTaxAmount ?? 0,
+            SalesOrderTaxAmount = salesOrder?.TaxAmount ?? 0,
+            SalesOrderAfterTaxAmount = salesOrder?.AfterTaxAmount ?? 0,
+            PaymentAmount = salesOrder?.AfterTaxAmount ?? 0,
+            Items = salesOrder?.SalesOrderItemList.Select(x => new PaymentReceiveItemResponse
+            {
+                Id = x.Id,
+                ProductId = x.ProductId,
+                ProductName = x.Product?.Name,
+                Summary = x.Summary,
+                UnitPrice = x.UnitPrice ?? 0,
+                Quantity = x.Quantity ?? 0,
+                Total = x.Total ?? 0
+            }).ToList() ?? new()
+        };
+    }
+}
@@ -0,0 +1,116 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.PaymentReceive.Cqrs;
+
+public class PaymentReceiveItemResponse
+{
+    public string? Id { get; set; }
+    public string? ProductId { get; set; }
+    public string? ProductName { get; set; }
+    public string? Summary { get; set; }
+    public decimal UnitPrice { get; set; }
+    public double Quantity { get; set; }
+    public decimal Total { get; set; }
+}
+
+public class GetPaymentReceiveByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? InvoiceId { get; set; }
+    public string? InvoiceNumber { get; set; }
+    public string? Description { get; set; }
+    public DateTime? PaymentDate { get; set; }
+    public string? PaymentMethodId { get; set; }
+    public string? PaymentMethodName { get; set; }
+    public decimal PaymentAmount { get; set; }
+    public Data.Enums.PaymentReceiveStatus Status { get; set; }
+    public string? CustomerName { get; set; }
+    public string? CustomerStreet { get; set; }
+    public string? CustomerCity { get; set; }
+    public string? CompanyName { get; set; }
+    public string? CompanyStreet { get; set; }
+    public string? CompanyCity { get; set; }
+    public string? CurrencySymbol { get; set; }
+    public decimal SalesOrderBeforeTaxAmount { get; set; }
+    public decimal SalesOrderTaxAmount { get; set; }
+    public decimal SalesOrderAfterTaxAmount { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+    public List<PaymentReceiveItemResponse> Items { get; set; } = new();
+}
+
+public record GetPaymentReceiveByIdQuery(string Id) : IRequest<GetPaymentReceiveByIdResponse?>;
+
+public class GetPaymentReceiveByIdHandler : IRequestHandler<GetPaymentReceiveByIdQuery, GetPaymentReceiveByIdResponse?>
+{
+    private readonly AppDbContext _context;
+    public GetPaymentReceiveByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetPaymentReceiveByIdResponse?> Handle(GetPaymentReceiveByIdQuery request, CancellationToken cancellationToken)
+    {
+        var company = await _context.Company
+            .AsNoTracking()
+            .Include(x => x.Currency)
+            .OrderByDescending(x => x.IsDefault)
+            .FirstOrDefaultAsync(cancellationToken);
+
+        var payment = await _context.PaymentReceive
+            .AsNoTracking()
+            .Include(x => x.Invoice)
+                .ThenInclude(i => i!.SalesOrder)
+                    .ThenInclude(so => so!.Customer)
+            .Include(x => x.Invoice)
+                .ThenInclude(i => i!.SalesOrder)
+                    .ThenInclude(so => so!.SalesOrderItemList)
+                        .ThenInclude(si => si.Product)
+            .Include(x => x.PaymentMethod)
+            .FirstOrDefaultAsync(x => x.Id == request.Id, cancellationToken);
+
+        if (payment == null) return null;
+
+        var salesOrder = payment.Invoice?.SalesOrder;
+
+        return new GetPaymentReceiveByIdResponse
+        {
+            Id = payment.Id,
+            AutoNumber = payment.AutoNumber,
+            InvoiceId = payment.InvoiceId,
+            InvoiceNumber = payment.Invoice?.AutoNumber,
+            Description = payment.Description,
+            PaymentDate = payment.PaymentDate,
+            PaymentMethodId = payment.PaymentMethodId,
+            PaymentMethodName = payment.PaymentMethod?.Name,
+            PaymentAmount = payment.PaymentAmount ?? 0,
+            Status = payment.Status,
+            CustomerName = salesOrder?.Customer?.Name,
+            CustomerStreet = salesOrder?.Customer?.Street,
+            CustomerCity = salesOrder?.Customer?.City,
+            CompanyName = company?.Name,
+            CompanyStreet = company?.StreetAddress,
+            CompanyCity = company?.City,
+            CurrencySymbol = company?.Currency?.Symbol ?? "IDR",
+            SalesOrderBeforeTaxAmount = salesOrder?.BeforeTaxAmount ?? 0,
+            SalesOrderTaxAmount = salesOrder?.TaxAmount ?? 0,
+            SalesOrderAfterTaxAmount = salesOrder?.AfterTaxAmount ?? 0,
+            CreatedAt = payment.CreatedAt,
+            CreatedBy = payment.CreatedBy,
+            UpdatedAt = payment.UpdatedAt,
+            UpdatedBy = payment.UpdatedBy,
+            Items = salesOrder?.SalesOrderItemList.Select(x => new PaymentReceiveItemResponse
+            {
+                Id = x.Id,
+                ProductId = x.ProductId,
+                ProductName = x.Product?.Name,
+                Summary = x.Summary,
+                UnitPrice = x.UnitPrice ?? 0,
+                Quantity = x.Quantity ?? 0,
+                Total = x.Total ?? 0
+            }).ToList() ?? new()
+        };
+    }
+}
@@ -0,0 +1,44 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.PaymentReceive.Cqrs;
+
+public class GetPaymentReceiveListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public DateTime? PaymentDate { get; set; }
+    public string? InvoiceNumber { get; set; }
+    public string? CustomerName { get; set; }
+    public decimal PaymentAmount { get; set; }
+    public Data.Enums.PaymentReceiveStatus Status { get; set; }
+}
+
+public record GetPaymentReceiveListQuery() : IRequest<List<GetPaymentReceiveListResponse>>;
+
+public class GetPaymentReceiveListHandler : IRequestHandler<GetPaymentReceiveListQuery, List<GetPaymentReceiveListResponse>>
+{
+    private readonly AppDbContext _context;
+    public GetPaymentReceiveListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetPaymentReceiveListResponse>> Handle(GetPaymentReceiveListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.PaymentReceive
+            .AsNoTracking()
+            .Include(x => x.Invoice)
+                .ThenInclude(i => i!.SalesOrder)
+                    .ThenInclude(so => so!.Customer)
+            .OrderByDescending(x => x.CreatedAt)
+            .Select(x => new GetPaymentReceiveListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                PaymentDate = x.PaymentDate,
+                InvoiceNumber = x.Invoice!.AutoNumber,
+                CustomerName = x.Invoice!.SalesOrder!.Customer!.Name,
+                PaymentAmount = x.PaymentAmount ?? 0,
+                Status = x.Status
+            }).ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,60 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Data.Enums;
+using Indotalent.ConfigBackEnd.Extensions;
+
+namespace Indotalent.Features.Sales.PaymentReceive.Cqrs;
+
+public class PaymentReceiveLookupResponse
+{
+    public List<LookupItem> Invoices { get; set; } = new();
+    public List<LookupItem> PaymentMethods { get; set; } = new();
+    public List<LookupStatusItem> Statuses { get; set; } = new();
+}
+
+public class LookupItem
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+}
+
+public class LookupStatusItem
+{
+    public int Value { get; set; }
+    public string? Name { get; set; }
+}
+
+public record GetPaymentReceiveLookupQuery() : IRequest<PaymentReceiveLookupResponse>;
+
+public class GetPaymentReceiveLookupHandler : IRequestHandler<GetPaymentReceiveLookupQuery, PaymentReceiveLookupResponse>
+{
+    private readonly AppDbContext _context;
+    public GetPaymentReceiveLookupHandler(AppDbContext context) => _context = context;
+
+    public async Task<PaymentReceiveLookupResponse> Handle(GetPaymentReceiveLookupQuery request, CancellationToken cancellationToken)
+    {
+        var response = new PaymentReceiveLookupResponse();
+
+        response.Invoices = await _context.Invoice.AsNoTracking()
+            .Where(x => x.InvoiceStatus == InvoiceStatus.Confirmed)
+            .OrderByDescending(x => x.CreatedAt)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.AutoNumber })
+            .ToListAsync(cancellationToken);
+
+        response.PaymentMethods = await _context.PaymentMethod.AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        response.Statuses = Enum.GetValues(typeof(PaymentReceiveStatus))
+            .Cast<PaymentReceiveStatus>()
+            .Select(x => new LookupStatusItem
+            {
+                Value = (int)x,
+                Name = x.GetDescription()
+            }).ToList();
+
+        return response;
+    }
+}
@@ -0,0 +1,47 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.PaymentReceive.Cqrs;
+
+public class UpdatePaymentReceiveRequest
+{
+    public string? Id { get; set; }
+    public string? InvoiceId { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? Description { get; set; }
+    public DateTime? PaymentDate { get; set; }
+    public string? PaymentMethodId { get; set; }
+    public decimal? PaymentAmount { get; set; }
+    public Data.Enums.PaymentReceiveStatus 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 UpdatePaymentReceiveCommand(UpdatePaymentReceiveRequest Data) : IRequest<bool>;
+
+public class UpdatePaymentReceiveHandler : IRequestHandler<UpdatePaymentReceiveCommand, bool>
+{
+    private readonly AppDbContext _context;
+    public UpdatePaymentReceiveHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(UpdatePaymentReceiveCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.PaymentReceive
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        entity.InvoiceId = request.Data.InvoiceId;
+        entity.Description = request.Data.Description;
+        entity.PaymentDate = request.Data.PaymentDate;
+        entity.PaymentMethodId = request.Data.PaymentMethodId;
+        entity.PaymentAmount = request.Data.PaymentAmount ?? 0;
+        entity.Status = request.Data.Status;
+
+        await _context.SaveChangesAsync(cancellationToken);
+        return true;
+    }
+}
@@ -0,0 +1,14 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Sales.PaymentReceive.Cqrs;
+
+public class UpdatePaymentReceiveValidator : AbstractValidator<UpdatePaymentReceiveRequest>
+{
+    public UpdatePaymentReceiveValidator()
+    {
+        RuleFor(x => x.Id).NotEmpty();
+        RuleFor(x => x.InvoiceId).NotEmpty().WithMessage("Invoice reference is required");
+        RuleFor(x => x.PaymentDate).NotEmpty().WithMessage("Payment date is required");
+        RuleFor(x => x.PaymentAmount).GreaterThan(0).WithMessage("Amount must be greater than 0");
+    }
+}
@@ -0,0 +1,77 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Sales.PaymentReceive.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Sales.PaymentReceive;
+
+public static class PaymentReceiveEndpoint
+{
+    public static void MapPaymentReceiveEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/payment-receive").WithTags("PaymentReceives")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetPaymentReceiveListQuery());
+            return result.ToApiResponse("Payment receive list retrieved successfully");
+        })
+        .WithName("GetPaymentReceiveList");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetPaymentReceiveByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Payment receive detail retrieved successfully"
+                : $"Payment receive with ID {id} not found");
+        })
+        .WithName("GetPaymentReceiveById");
+
+        group.MapGet("/invoice-detail/{invoiceId}", async (string invoiceId, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetInvoiceDetailForPaymentQuery(invoiceId));
+            return result.ToApiResponse(result is not null
+                ? "Invoice detail for payment retrieved successfully"
+                : $"Invoice with ID {invoiceId} not found");
+        })
+        .WithName("GetInvoiceDetailForPayment");
+
+        group.MapGet("/lookup", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetPaymentReceiveLookupQuery());
+            return result.ToApiResponse("Lookup data retrieved successfully");
+        })
+        .WithName("GetPaymentReceiveLookup");
+
+        group.MapPost("/", async (CreatePaymentReceiveRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreatePaymentReceiveCommand(request));
+            return result.ToApiResponse("Payment receive has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreatePaymentReceive");
+
+        group.MapPost("/update", async (UpdatePaymentReceiveRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdatePaymentReceiveCommand(request));
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Update failed. Payment receive not found.");
+            }
+            return result.ToApiResponse("Payment receive has been updated successfully");
+        })
+        .WithName("UpdatePaymentReceive");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeletePaymentReceiveByIdCommand(id));
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Delete failed. Payment receive not found.");
+            }
+            return true.ToApiResponse("Payment receive has been deleted successfully");
+        })
+        .WithName("DeletePaymentReceiveById");
+    }
+}
@@ -0,0 +1,127 @@
+using QuestPDF.Fluent;
+using QuestPDF.Helpers;
+using QuestPDF.Infrastructure;
+using Indotalent.Features.Sales.PaymentReceive.Cqrs;
+
+namespace Indotalent.Features.Sales.PaymentReceive;
+
+public class PaymentReceivePdfGenerator
+{
+    public static byte[] Generate(GetPaymentReceiveByIdResponse data)
+    {
+        QuestPDF.Settings.License = LicenseType.Community;
+
+        var primaryBlue = "#0D47A1";
+        var textSlate = "#64748b";
+
+        return Document.Create(container =>
+        {
+            container.Page(page =>
+            {
+                page.Size(PageSizes.A4);
+                page.Margin(1.5f, Unit.Centimetre);
+                page.PageColor(Colors.White);
+                page.DefaultTextStyle(x => x.FontSize(9).FontFamily(Fonts.Verdana));
+
+                page.Header().Row(row =>
+                {
+                    row.RelativeItem().Column(col =>
+                    {
+                        col.Item().Text("PAYMENT RECEIPT")
+                            .FontSize(20).ExtraBold().FontColor(primaryBlue);
+                        col.Item().Text($"{data.AutoNumber}").FontSize(11).SemiBold();
+                    });
+
+                    row.RelativeItem().AlignRight().Column(col =>
+                    {
+                        col.Item().Text(data.CompanyName).FontSize(11).ExtraBold();
+                        col.Item().Text($"{data.CompanyStreet}").FontColor(textSlate);
+                        col.Item().Text($"{data.CompanyCity}").FontColor(textSlate);
+                    });
+                });
+
+                page.Content().PaddingVertical(20).Column(col =>
+                {
+                    col.Item().Row(row =>
+                    {
+                        row.RelativeItem().Column(c =>
+                        {
+                            c.Item().BorderBottom(1).PaddingBottom(5).Text("RECEIVED FROM").FontSize(8).Bold().FontColor(textSlate);
+                            c.Item().PaddingTop(5).Text(data.CustomerName).Bold();
+                            c.Item().Text(data.CustomerStreet);
+                            c.Item().Text(data.CustomerCity);
+                        });
+
+                        row.ConstantItem(40);
+
+                        row.RelativeItem().Column(c =>
+                        {
+                            c.Item().BorderBottom(1).PaddingBottom(5).Text("PAYMENT DETAILS").FontSize(8).Bold().FontColor(textSlate);
+                            c.Item().PaddingTop(5).Row(r => {
+                                r.RelativeItem().Text("Payment Date");
+                                r.RelativeItem().AlignRight().Text(data.PaymentDate?.ToString("dd MMM yyyy"));
+                            });
+                            c.Item().Row(r => {
+                                r.RelativeItem().Text("Payment Method");
+                                r.RelativeItem().AlignRight().Text(data.PaymentMethodName);
+                            });
+                            c.Item().Row(r => {
+                                r.RelativeItem().Text("Invoice Ref");
+                                r.RelativeItem().AlignRight().Text(data.InvoiceNumber).Bold();
+                            });
+                        });
+                    });
+
+                    col.Item().PaddingTop(20).Table(table =>
+                    {
+                        table.ColumnsDefinition(columns =>
+                        {
+                            columns.ConstantColumn(25);
+                            columns.RelativeColumn(6);
+                            columns.RelativeColumn(3);
+                        });
+
+                        table.Header(header =>
+                        {
+                            header.Cell().Element(HeaderStyle).Text("#");
+                            header.Cell().Element(HeaderStyle).Text("Item Description");
+                            header.Cell().Element(HeaderStyle).AlignRight().Text($"Total ({data.CurrencySymbol})");
+
+                            static IContainer HeaderStyle(IContainer container) => container.DefaultTextStyle(x => x.SemiBold().FontColor(Colors.White)).PaddingVertical(5).PaddingHorizontal(5).Background("#0D47A1");
+                        });
+
+                        var index = 1;
+                        foreach (var item in data.Items)
+                        {
+                            table.Cell().Element(CellStyle).Text($"{index++}");
+                            table.Cell().Element(CellStyle).Column(c => {
+                                c.Item().Text(item.ProductName).Bold();
+                                if (!string.IsNullOrEmpty(item.Summary)) c.Item().Text(item.Summary).FontSize(8).FontColor(textSlate);
+                            });
+                            table.Cell().Element(CellStyle).AlignRight().Text(item.Total.ToString("N2"));
+
+                            static IContainer CellStyle(IContainer container) => container.BorderBottom(1).BorderColor("#E2E8F0").PaddingVertical(8).PaddingHorizontal(5);
+                        }
+                    });
+
+                    col.Item().PaddingTop(10).Row(row =>
+                    {
+                        row.RelativeItem().Column(c => {
+                            c.Item().Text("Description / Notes:").FontSize(8).Bold();
+                            c.Item().Text(string.IsNullOrEmpty(data.Description) ? "-" : data.Description).FontSize(8);
+                        });
+                        row.ConstantItem(200).Column(c =>
+                        {
+                            c.Item().Row(r => { r.RelativeItem().Text("Sub Total"); r.RelativeItem().AlignRight().Text(data.SalesOrderBeforeTaxAmount.ToString("N2")); });
+                            c.Item().Row(r => { r.RelativeItem().Text("Tax Amount"); r.RelativeItem().AlignRight().Text(data.SalesOrderTaxAmount.ToString("N2")); });
+                            c.Item().PaddingTop(5).BorderTop(1).Row(r => { r.RelativeItem().Text($"TOTAL INVOICE").Bold(); r.RelativeItem().AlignRight().Text(data.SalesOrderAfterTaxAmount.ToString("N2")).ExtraBold(); });
+                            c.Item().PaddingTop(5).Background("#F1F5F9").PaddingHorizontal(5).Row(r => { r.RelativeItem().Text($"AMOUNT PAID").Bold().FontColor(primaryBlue); r.RelativeItem().AlignRight().Text(data.PaymentAmount.ToString("N2")).ExtraBold().FontColor(primaryBlue); });
+                        });
+                    });
+                });
+
+                page.Footer().AlignCenter().Text(x => { x.Span("Page ").FontSize(8); x.CurrentPageNumber().FontSize(8); });
+            });
+        }).GeneratePdf();
+    }
+}
@@ -0,0 +1,71 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Sales.PaymentReceive.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Sales.PaymentReceive;
+
+public class PaymentReceiveService : BaseService
+{
+    private readonly RestClient _client;
+
+    public PaymentReceiveService(
+            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<GetPaymentReceiveListResponse>>?> GetPaymentReceiveListAsync()
+    {
+        var request = new RestRequest("api/payment-receive", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetPaymentReceiveListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetPaymentReceiveByIdResponse>?> GetPaymentReceiveByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/payment-receive/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetPaymentReceiveByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetPaymentReceiveByIdResponse>?> GetInvoiceDetailForPaymentAsync(string invoiceId)
+    {
+        var request = new RestRequest($"api/payment-receive/invoice-detail/{invoiceId}", Method.Get);
+        return await ExecuteWithResponseAsync<GetPaymentReceiveByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<PaymentReceiveLookupResponse>?> GetPaymentReceiveLookupAsync()
+    {
+        var request = new RestRequest("api/payment-receive/lookup", Method.Get);
+        return await ExecuteWithResponseAsync<PaymentReceiveLookupResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreatePaymentReceiveResponse>?> CreatePaymentReceiveAsync(CreatePaymentReceiveRequest data)
+    {
+        var request = new RestRequest("api/payment-receive", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreatePaymentReceiveResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<bool>?> UpdatePaymentReceiveAsync(UpdatePaymentReceiveRequest data)
+    {
+        var request = new RestRequest("api/payment-receive/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<bool>(_client, request);
+    }
+
+    public async Task<bool> DeletePaymentReceiveByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/payment-receive/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+}
@@ -0,0 +1,8 @@
+@page "/sales/payment-receive-report"
+@using Indotalent.Features.Sales.PaymentReceiveReport.Components
+@using MudBlazor
+
+<_PaymentReceiveReportDataTable />
+
+@code {
+}
@@ -0,0 +1,294 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.PaymentReceiveReport
+@using Indotalent.Features.Sales.PaymentReceiveReport.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject PaymentReceiveReportService PaymentReceiveReportService
+@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;">Payment Receive Report</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Detailed log of all incoming customer payments and collections.</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;">Sales</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Payment Receive Report</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
+    <div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <MudTextField @bind-Value="_searchString"
+                          Placeholder="Search Customer, Invoice, or Payment..."
+                          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;">
+                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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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>
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetPaymentReceiveReportListDto" Loading="@_isRefreshing">
+        <HeaderContent>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetPaymentReceiveReportListDto, object>(x => x.CustomerName!)">Customer</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetPaymentReceiveReportListDto, object>(x => x.Number!)">Payment Number</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetPaymentReceiveReportListDto, object>(x => x.PaymentDate!)">Payment Date</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetPaymentReceiveReportListDto, object>(x => x.InvoiceNumber!)">Invoice</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetPaymentReceiveReportListDto, object>(x => x.PaymentMethodName!)">Method</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; text-align: right; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">
+                <MudTableSortLabel SortBy="new Func<GetPaymentReceiveReportListDto, object>(x => x.PaymentAmount!)">Amount</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetPaymentReceiveReportListDto, object>(x => x.StatusName!)">Status</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>@context.CustomerName</MudTd>
+            <MudTd>@context.Number</MudTd>
+            <MudTd>@context.PaymentDate?.ToString("yyyy-MM-dd")</MudTd>
+            <MudTd>@context.InvoiceNumber</MudTd>
+            <MudTd>@context.PaymentMethodName</MudTd>
+            <MudTd Style="text-align: right; font-weight: 700; color: #2e7d32;">@context.PaymentAmount?.ToString("N2")</MudTd>
+            <MudTd>
+                <MudChip T="string" Color="Color.Success" Size="Size.Small" Variant="Variant.Text" Style="font-weight: 800;">@context.StatusName.ToUpper()</MudChip>
+            </MudTd>
+        </RowTemplate>
+    </MudTable>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background-color: #F9FAFB; border-top: 1px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 500; color: #9CA3AF; font-size: 0.75rem;">Rows per page:</MudText>
+            <MudSelect T="int" Value="@_top" ValueChanged="OnPageSizeChanged" Dense="true" Margin="Margin.Dense" Style="width: 80px; background-color: white; font-size: 12px; font-weight: 600;" Variant="Variant.Outlined" Class="mt-0 custom-select-dense">
+                <MudSelectItem Value="5" />
+                <MudSelectItem Value="10" />
+                <MudSelectItem Value="50" />
+                <MudSelectItem Value="500" />
+                <MudSelectItem Value="1000" />
+            </MudSelect>
+            <MudText Typo="Typo.caption" Style="color: #9CA3AF; margin-left: 12px; font-size: 0.75rem; font-weight: 500;">
+                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; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Prev</MudButton>
+            @{
+    var totalPages = _totalPage == 0 ? 1 : _totalPage;
+    var maxVisible = 5;
+    var startPage = Math.Max(1, _currentPage - maxVisible / 2);
+    var endPage = Math.Min(totalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) { startPage = Math.Max(1, endPage - maxVisible + 1); }
+}
+@for (int i = startPage; i <= endPage; i++)
+{
+    var pageNum = i;
+    var isActive = pageNum == _currentPage;
+    <MudButton OnClick="@(() => OnPageChanged(pageNum))"
+               Variant="Variant.Text" Size="Size.Small"
+               Style="@(isActive ? "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 600; background: #3B82F6; color: white; border: 1px solid #3B82F6; border-radius: 6px; text-transform: none;" : "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 500; color: #374151; background: white; border: 1px solid #D1D5DB; border-radius: 6px; text-transform: none;")">@pageNum</MudButton>
+}
+            <MudButton OnClick="@(() => OnPageChanged(_currentPage + 1))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Variant="Variant.Text" EndIcon="@Icons.Material.Filled.ChevronRight" Size="Size.Small" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "text-transform: none; font-weight: 500; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Next</MudButton>
+            <MudIconButton Icon="@Icons.Material.Filled.LastPage" Size="Size.Small" OnClick="@(() => OnPageChanged(_totalPage))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "color: #D1D5DB; background: transparent;" : "color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")" />
+        </div>
+    </div>
+</MudPaper>
+<style>
+.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+@code {
+    private List<GetPaymentReceiveReportListDto> _items = new();
+    private string _searchString = "";
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    private int _skip = 0;
+    private int _top = 50;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / (_top == 0 ? 1 : _top));
+    private int _currentPage => (_top >= GetFilteredData().Count() || _top == 0) ? 1 : (_skip / _top) + 1;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        StateHasChanged();
+        try
+        {
+            var response = await PaymentReceiveReportService.GetPaymentReceiveReportListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _items = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetPaymentReceiveReportListDto> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _items;
+        return _items.Where(x =>
+            (x.Number?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.CustomerName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.InvoiceNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetPaymentReceiveReportListDto> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick()
+    {
+        _skip = 0;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private async Task ExportToExcel()
+    {
+        _isExporting = true;
+        StateHasChanged();
+        try
+        {
+            await Task.Delay(1000);
+            using (var workbook = new XLWorkbook())
+            {
+                var worksheet = workbook.Worksheets.Add("PaymentReports");
+                var currentRow = 1;
+
+                string[] headers = { "Customer", "Payment Number", "Payment Date", "Invoice", "Method", "Amount", "Status" };
+                for (int i = 0; i < headers.Length; i++)
+                {
+                    worksheet.Cell(currentRow, i + 1).Value = headers[i];
+                }
+
+                var headerRange = worksheet.Range(1, 1, 1, headers.Length);
+                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.CustomerName;
+                    worksheet.Cell(currentRow, 2).Value = item.Number;
+                    worksheet.Cell(currentRow, 3).Value = item.PaymentDate?.ToString("yyyy-MM-dd");
+                    worksheet.Cell(currentRow, 4).Value = item.InvoiceNumber;
+                    worksheet.Cell(currentRow, 5).Value = item.PaymentMethodName;
+                    worksheet.Cell(currentRow, 6).Value = item.PaymentAmount;
+                    worksheet.Cell(currentRow, 7).Value = item.StatusName;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Payment_Receive_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 OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _skip = (page - 1) * _top;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        StateHasChanged();
+    }
+}
@@ -0,0 +1,56 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.PaymentReceiveReport.Cqrs;
+
+public record GetPaymentReceiveReportListDto
+{
+    public string? Id { get; init; }
+    public string? Number { get; init; }
+    public DateTime? PaymentDate { get; init; }
+    public string? PaymentMethodName { get; init; }
+    public decimal? PaymentAmount { get; init; }
+    public string? StatusName { get; init; }
+    public string? InvoiceNumber { get; init; }
+    public string? CustomerName { get; init; }
+}
+
+public record GetPaymentReceiveReportListQuery() : IRequest<List<GetPaymentReceiveReportListDto>>;
+
+public class GetPaymentReceiveReportListHandler : IRequestHandler<GetPaymentReceiveReportListQuery, List<GetPaymentReceiveReportListDto>>
+{
+    private readonly AppDbContext _context;
+
+    public GetPaymentReceiveReportListHandler(AppDbContext context)
+    {
+        _context = context;
+    }
+
+    public async Task<List<GetPaymentReceiveReportListDto>> Handle(GetPaymentReceiveReportListQuery request, CancellationToken cancellationToken)
+    {
+        var results = await _context.PaymentReceive
+            .AsNoTracking()
+            .Include(x => x.PaymentMethod)
+            .Include(x => x.Invoice)
+                .ThenInclude(x => x!.SalesOrder)
+                    .ThenInclude(x => x!.Customer)
+            .OrderByDescending(x => x.PaymentDate)
+            .Select(x => new GetPaymentReceiveReportListDto
+            {
+                Id = x.Id,
+                Number = x.AutoNumber,
+                PaymentDate = x.PaymentDate,
+                PaymentMethodName = x.PaymentMethod != null ? x.PaymentMethod.Name : string.Empty,
+                PaymentAmount = x.PaymentAmount,
+                StatusName = x.Status.GetDescription(),
+                InvoiceNumber = x.Invoice != null ? x.Invoice.AutoNumber : string.Empty,
+                CustomerName = (x.Invoice != null && x.Invoice.SalesOrder != null && x.Invoice.SalesOrder.Customer != null)
+                                ? x.Invoice.SalesOrder.Customer.Name : string.Empty
+            })
+            .ToListAsync(cancellationToken);
+
+        return results;
+    }
+}
@@ -0,0 +1,23 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Sales.PaymentReceiveReport.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Sales.PaymentReceiveReport;
+
+public static class PaymentReceiveReportEndpoint
+{
+    public static void MapPaymentReceiveReportEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/payment-receive-report").WithTags("PaymentReceiveReports")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetPaymentReceiveReportListQuery());
+            return result.ToApiResponse("Payment receive report list retrieved successfully");
+        })
+        .WithName("GetPaymentReceiveReportList");
+    }
+}
@@ -0,0 +1,32 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Sales.PaymentReceiveReport.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Sales.PaymentReceiveReport;
+
+public class PaymentReceiveReportService : BaseService
+{
+    private readonly RestClient _client;
+
+    public PaymentReceiveReportService(
+            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<GetPaymentReceiveReportListDto>>?> GetPaymentReceiveReportListAsync()
+    {
+        var request = new RestRequest("api/payment-receive-report", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetPaymentReceiveReportListDto>>(_client, request);
+    }
+}
@@ -0,0 +1,51 @@
+@page "/sales/sales-order"
+@using Indotalent.Features.Sales.SalesOrder.Cqrs
+@using Indotalent.Features.Sales.SalesOrder.Components
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_SalesOrderCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_SalesOrderUpdateForm Data="_selectedData!"
+                           ReadOnly="@(_currentView == ViewMode.View)"
+                           OnCancel="BackToTable"
+                           OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_SalesOrderDataTable 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 UpdateSalesOrderRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdateSalesOrderRequest 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,154 @@
+@using Indotalent.Features.Sales.SalesOrder.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject SalesOrderService SalesOrderService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+    <div class="d-flex align-center gap-4">
+        <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
+        <div>
+            <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Add Sales Order</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Create a new master sales order.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 4px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12"><MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Basic Information</MudText><MudDivider /></MudItem>
+            
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Order Date</MudText>
+                <MudDatePicker @bind-Date="_model.OrderDate"
+                               Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Customer</MudText>
+                <MudSelect T="string" @bind-Value="_model.CustomerId"
+                           For="@(() => _model.CustomerId)"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Customers)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Advisor (Sales)</MudText>
+                <MudSelect T="string" @bind-Value="_model.EmployeeId"
+                           For="@(() => _model.EmployeeId)"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Employees)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Status</MudText>
+                <MudSelect T="Indotalent.Data.Enums.SalesOrderStatus" @bind-Value="_model.OrderStatus"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Statuses)
+                    {
+                        <MudSelectItem Value="@((Indotalent.Data.Enums.SalesOrderStatus)item.Value)">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Tax</MudText>
+                <MudSelect T="string" @bind-Value="_model.TaxId"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Taxes)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description"
+                              For="@(() => _model.Description)"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+            </MudItem>
+        </MudGrid>
+
+        <div class="d-flex justify-end gap-2 mt-8">
+            <MudButton OnClick="() => OnCancel.InvokeAsync()"
+                       Variant="Variant.Outlined"
+                       Disabled="_processing"
+                       Style="border-radius: 4px; text-transform: none; font-weight: 700; border: 1px solid #e0e0e0;">
+                Cancel
+            </MudButton>
+            <MudButton Color="Color.Primary"
+                       Variant="Variant.Filled"
+                       OnClick="Submit"
+                       Disabled="_processing"
+                       Style="border-radius: 4px; text-transform: none; font-weight: 700;">
+                @if (_processing)
+                {
+                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                    <MudText Class="ms-2" Typo="Typo.button" Style="text-transform: none !important;">Processing...</MudText>
+                }
+                else
+                {
+                    <MudText>Create Order</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreateSalesOrderValidator _validator = new();
+    private CreateSalesOrderRequest _model = new() { OrderDate = DateTime.Today };
+    private SalesOrderLookupResponse _lookup = new();
+    private bool _processing = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var res = await SalesOrderService.GetSalesOrderLookupAsync();
+        if (res != null && res.IsSuccess) _lookup = res.Value ?? new();
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await SalesOrderService.CreateSalesOrderAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,375 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.SalesOrder
+@using Indotalent.Features.Sales.SalesOrder.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject SalesOrderService SalesOrderService
+@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;">Sales Order</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Manage customer orders and fulfillment process.</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;">Sales</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Sales Order</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
+    <div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <MudTextField @bind-Value="_searchString"
+                          Placeholder="Search..."
+                          Adornment="Adornment.Start"
+                          AdornmentIcon="@Icons.Material.Filled.Search"
+                          IconSize="Size.Small"
+                          Class="mt-0"
+                          Variant="Variant.Outlined"
+                          Margin="Margin.Dense"
+                          Style="background-color: white; width: 280px; border-radius: 8px;"
+                          OnKeyDown="@HandleSearchKeyDown" />
+            <MudButton Variant="Variant.Filled"
+                       Color="Color.Primary"
+                       OnClick="OnSearchClick"
+                       Size="Size.Small"
+                       Style="text-transform: none; font-weight: 500; border-radius: 6px; height: 34px;">
+                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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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 (_selectedItem != null)
+            {
+                <MudButton Variant="Variant.Outlined" Color="Color.Info" StartIcon="@Icons.Material.Filled.Visibility" OnClick="InvokeView" Size="Size.Small" Style="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; color: #6B7280;">View</MudButton>
+                <MudButton Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Edit" OnClick="InvokeEdit" Size="Size.Small" Style="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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; background: white; border: 1px solid #FCA5A5; color: #EF4444;">Remove</MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedItem = 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;">
+                    Add Sales Order
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetSalesOrderListResponse" OnRowClick="@((args) => _selectedItem = 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<GetSalesOrderListResponse, object>(x => x.AutoNumber!)">No</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<GetSalesOrderListResponse, object>(x => x.OrderDate!)">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<GetSalesOrderListResponse, object>(x => x.CustomerName!)">Customer</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<GetSalesOrderListResponse, object>(x => x.OrderStatus)">Status</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style=" color: #1a1a1a; text-transform: uppercase; font-size: 0.75rem; background-color: #ffffff; border-bottom: 2px solid #E5E7EB; white-space: nowrap; text-align: right;">
+                <MudTableSortLabel SortBy="new Func<GetSalesOrderListResponse, object>(x => x.AfterTaxAmount!)">Total Amount</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedItem?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>@context.AutoNumber</MudTd>
+            <MudTd>@context.OrderDate?.ToString("yyyy-MM-dd")</MudTd>
+            <MudTd>@context.CustomerName</MudTd>
+            <MudTd>
+                <MudChip T="string" Color="Color.Info" Size="Size.Small" Variant="Variant.Text" Style="font-weight: 800;">@context.OrderStatus.ToString().ToUpper()</MudChip>
+            </MudTd>
+            <MudTd Style="text-align: right; font-weight: 700;">@context.AfterTaxAmount?.ToString("N2")</MudTd>
+        </RowTemplate>
+    </MudTable>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background-color: #F9FAFB; border-top: 1px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 500; color: #9CA3AF; font-size: 0.75rem;">Rows per page:</MudText>
+            <MudSelect T="int" Value="@_top" ValueChanged="OnPageSizeChanged" Dense="true" Margin="Margin.Dense" Style="width: 80px; background-color: white; font-size: 12px; font-weight: 600;" Variant="Variant.Outlined" Class="mt-0 custom-select-dense">
+                <MudSelectItem Value="5" />
+                <MudSelectItem Value="10" />
+                <MudSelectItem Value="50" />
+                <MudSelectItem Value="500" />
+                <MudSelectItem Value="1000" />
+            </MudSelect>
+            <MudText Typo="Typo.caption" Style="color: #9CA3AF; margin-left: 12px; font-size: 0.75rem; font-weight: 500;">
+                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; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Prev</MudButton>
+            @{
+    var totalPages = _totalPage == 0 ? 1 : _totalPage;
+    var maxVisible = 5;
+    var startPage = Math.Max(1, _currentPage - maxVisible / 2);
+    var endPage = Math.Min(totalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) { startPage = Math.Max(1, endPage - maxVisible + 1); }
+}
+@for (int i = startPage; i <= endPage; i++)
+{
+    var pageNum = i;
+    var isActive = pageNum == _currentPage;
+    <MudButton OnClick="@(() => OnPageChanged(pageNum))"
+               Variant="Variant.Text" Size="Size.Small"
+               Style="@(isActive ? "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 600; background: #3B82F6; color: white; border: 1px solid #3B82F6; border-radius: 6px; text-transform: none;" : "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 500; color: #374151; background: white; border: 1px solid #D1D5DB; border-radius: 6px; text-transform: none;")">@pageNum</MudButton>
+}
+            <MudButton OnClick="@(() => OnPageChanged(_currentPage + 1))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Variant="Variant.Text" EndIcon="@Icons.Material.Filled.ChevronRight" Size="Size.Small" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "text-transform: none; font-weight: 500; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Next</MudButton>
+            <MudIconButton Icon="@Icons.Material.Filled.LastPage" Size="Size.Small" OnClick="@(() => OnPageChanged(_totalPage))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "color: #D1D5DB; background: transparent;" : "color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")" />
+        </div>
+    </div>
+</MudPaper>
+<style>
+.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+@code {
+    [Parameter] public EventCallback OnAdd { get; set; }
+    [Parameter] public EventCallback<UpdateSalesOrderRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateSalesOrderRequest> OnView { get; set; }
+
+    private List<GetSalesOrderListResponse> _items = new();
+    private GetSalesOrderListResponse? _selectedItem;
+    private string _searchString = "";
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    private int _skip = 0;
+    private int _top = 5;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / (_top == 0 ? 1 : _top));
+    private int _currentPage => (_top >= GetFilteredData().Count() || _top == 0) ? 1 : (_skip / _top) + 1;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        _selectedItem = null;
+        StateHasChanged();
+        try
+        {
+            var response = await SalesOrderService.GetSalesOrderListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _items = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetSalesOrderListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _items;
+        return _items.Where(x =>
+            (x.AutoNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.CustomerName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetSalesOrderListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick()
+    {
+        _skip = 0;
+        _selectedItem = null;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private async Task ExportToExcel()
+    {
+        _isExporting = true;
+        StateHasChanged();
+        try
+        {
+            await Task.Delay(1000);
+            using (var workbook = new XLWorkbook())
+            {
+                var worksheet = workbook.Worksheets.Add("SalesOrders");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Auto Number";
+                worksheet.Cell(currentRow, 2).Value = "Date";
+                worksheet.Cell(currentRow, 3).Value = "Customer";
+                worksheet.Cell(currentRow, 4).Value = "Status";
+                worksheet.Cell(currentRow, 5).Value = "Total Amount";
+
+                var headerRange = worksheet.Range(1, 1, 1, 5);
+                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.AutoNumber;
+                    worksheet.Cell(currentRow, 2).Value = item.OrderDate?.ToString("yyyy-MM-dd");
+                    worksheet.Cell(currentRow, 3).Value = item.CustomerName;
+                    worksheet.Cell(currentRow, 4).Value = item.OrderStatus.ToString();
+                    worksheet.Cell(currentRow, 5).Value = item.AfterTaxAmount;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "SO_List.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 OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _skip = (page - 1) * _top;
+            _selectedItem = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        _selectedItem = null;
+        StateHasChanged();
+    }
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedItem == null) return;
+        var request = await MapToUpdateRequest(_selectedItem.Id!);
+        if (request != null) await OnEdit.InvokeAsync(request);
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedItem == null) return;
+        var request = await MapToUpdateRequest(_selectedItem.Id!);
+        if (request != null) await OnView.InvokeAsync(request);
+    }
+
+    private async Task<UpdateSalesOrderRequest?> MapToUpdateRequest(string id)
+    {
+        var response = await SalesOrderService.GetSalesOrderByIdAsync(id);
+        if (response != null && response.IsSuccess && response.Value != null)
+        {
+            var detail = response.Value;
+            return new UpdateSalesOrderRequest
+            {
+                Id = detail.Id,
+                OrderDate = detail.OrderDate,
+                OrderStatus = detail.OrderStatus,
+                Description = detail.Description,
+                CustomerId = detail.CustomerId,
+                TaxId = detail.TaxId,
+                EmployeeId = detail.EmployeeId,
+                CreatedAt = detail.CreatedAt,
+                CreatedBy = detail.CreatedBy,
+                UpdatedAt = detail.UpdatedAt,
+                UpdatedBy = detail.UpdatedBy,
+                AutoNumber = detail.AutoNumber,
+                BeforeTaxAmount = detail.BeforeTaxAmount,
+                TaxAmount = detail.TaxAmount,
+                AfterTaxAmount = detail.AfterTaxAmount
+            };
+        }
+        return null;
+    }
+
+    private async Task OnDelete()
+    {
+        if (_selectedItem == null) return;
+
+        var parameters = new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, _selectedItem.AutoNumber } };
+        var options = new DialogOptions { CloseButton = false, MaxWidth = MaxWidth.ExtraSmall, FullWidth = true };
+
+        var dialog = await DialogService.ShowAsync<_DeleteConfirmation>("", parameters, options);
+        var result = await dialog.Result;
+
+        if (result != null && !result.Canceled)
+        {
+            var isSuccess = await SalesOrderService.DeleteSalesOrderByIdAsync(_selectedItem.Id!);
+            if (isSuccess)
+            {
+                _selectedItem = null;
+                await LoadData();
+                Snackbar.Add("Deleted successfully", Severity.Success);
+            }
+        }
+    }
+}
@@ -0,0 +1,86 @@
+@using Indotalent.Features.Sales.SalesOrder.Cqrs
+@using MudBlazor
+@inject SalesOrderService SalesOrderService
+@inject ISnackbar Snackbar
+
+<MudDialog>
+    <DialogContent>
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="2">
+                <MudItem xs="12">
+                    <MudText Typo="Typo.subtitle2" Class="mb-0">Product</MudText>
+                    <MudSelect T="string" @bind-Value="_model.ProductId"
+                               Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        @foreach (var item in _lookup.Products)
+                        {
+                            <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Unit Price</MudText>
+                    <MudNumericField @bind-Value="_model.UnitPrice" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Quantity</MudText>
+                    <MudNumericField @bind-Value="_model.Quantity" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Summary</MudText>
+                    <MudTextField @bind-Value="_model.Summary" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+            </MudGrid>
+        </MudForm>
+    </DialogContent>
+    <DialogActions>
+        <MudButton OnClick="Cancel" Variant="Variant.Text">Cancel</MudButton>
+        <MudButton Color="Color.Primary" OnClick="Submit" Variant="Variant.Filled" Disabled="_processing" Style="text-transform: none; font-weight: 700; border-radius: 4px;">
+            @if (_processing)
+            {
+                <MudProgressCircular Size="Size.Small" Indeterminate="true" />
+                <MudText Class="ms-2" Typo="Typo.button" Style="text-transform: none !important;">Processing...</MudText>
+            }
+            else
+            {
+                <MudText>Add Item</MudText>
+            }
+        </MudButton>
+    </DialogActions>
+</MudDialog>
+
+@code {
+    [CascadingParameter] IMudDialogInstance MudDialog { get; set; } = default!;
+    [Parameter] public string SalesOrderId { get; set; } = string.Empty;
+    private MudForm _form = default!;
+    private CreateSalesOrderItemRequest _model = new() { Quantity = 1 };
+    private SalesOrderLookupResponse _lookup = new();
+    private bool _processing = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var res = await SalesOrderService.GetSalesOrderLookupAsync();
+        if (res != null && res.IsSuccess) _lookup = res.Value ?? new();
+        _model.SalesOrderId = SalesOrderId;
+    }
+
+    private void Cancel() => MudDialog.Cancel();
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await SalesOrderService.CreateSalesOrderItemAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Item added successfully", Severity.Success);
+                MudDialog.Close(DialogResult.Ok(true));
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,89 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.SalesOrder
+@using Indotalent.Features.Sales.SalesOrder.Cqrs
+@using MudBlazor
+@using Indotalent.Features.Root.Shared
+@inject SalesOrderService SalesOrderService
+@inject IDialogService DialogService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 4px; border: 1px solid #E5E7EB;">
+    <div style="padding: 16px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #F8FAFC;">
+        <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Order Items</MudText>
+        @if (!ReadOnly)
+        {
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="OnAddClick" Size="Size.Small" Style="text-transform: none; font-weight: 700; border-radius: 4px;">
+                Add Item
+            </MudButton>
+        }
+    </div>
+
+    <MudTable Items="Items" Hover="true" Elevation="0" Dense="true" T="SalesOrderItemResponse">
+        <HeaderContent>
+            <MudTh Style="font-weight: 700;">Product</MudTh>
+            <MudTh Style="font-weight: 700; text-align: right;">Unit Price</MudTh>
+            <MudTh Style="font-weight: 700; text-align: right;">Quantity</MudTh>
+            <MudTh Style="font-weight: 700; text-align: right;">Total</MudTh>
+            @if (!ReadOnly)
+            {
+                <MudTh Style="width: 100px; text-align: right; font-weight: 700;">Actions</MudTh>
+            }
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd DataLabel="Product">@context.ProductName</MudTd>
+            <MudTd DataLabel="UnitPrice" Style="text-align: right;">@context.UnitPrice?.ToString("N2")</MudTd>
+            <MudTd DataLabel="Quantity" Style="text-align: right;">@context.Quantity</MudTd>
+            <MudTd DataLabel="Total" Style="text-align: right; font-weight: 700;">@context.Total?.ToString("N2")</MudTd>
+            @if (!ReadOnly)
+            {
+                <MudTd Style="text-align: right;">
+                    <MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Small" Color="Color.Primary" OnClick="@(() => OnEditClick(context))" />
+                    <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Small" Color="Color.Error" OnClick="@(() => OnDeleteClick(context))" />
+                </MudTd>
+            }
+        </RowTemplate>
+    </MudTable>
+</MudPaper>
+<style>
+.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+@code {
+    [Parameter] public string SalesOrderId { get; set; } = string.Empty;
+    [Parameter] public List<SalesOrderItemResponse> Items { get; set; } = new();
+    [Parameter] public bool ReadOnly { get; set; } = false;
+    [Parameter] public EventCallback OnChanged { get; set; }
+
+    private async Task OnAddClick()
+    {
+        var parameters = new DialogParameters { ["SalesOrderId"] = SalesOrderId };
+        var options = new DialogOptions { MaxWidth = MaxWidth.Small, FullWidth = true, CloseButton = true };
+        var dialog = await DialogService.ShowAsync<_SalesOrderItemCreateForm>("Add Item", parameters, options);
+        var result = await dialog.Result;
+        if (result != null && !result.Canceled) await OnChanged.InvokeAsync();
+    }
+
+    private async Task OnEditClick(SalesOrderItemResponse item)
+    {
+        var parameters = new DialogParameters { ["Data"] = item };
+        var options = new DialogOptions { MaxWidth = MaxWidth.Small, FullWidth = true, CloseButton = true };
+        var dialog = await DialogService.ShowAsync<_SalesOrderItemUpdateForm>("Edit Item", parameters, options);
+        var result = await dialog.Result;
+        if (result != null && !result.Canceled) await OnChanged.InvokeAsync();
+    }
+
+    private async Task OnDeleteClick(SalesOrderItemResponse item)
+    {
+        var parameters = new DialogParameters { ["ContentText"] = $"Are you sure you want to remove this item?" };
+        var dialog = await DialogService.ShowAsync<_DeleteConfirmation>("Delete Confirmation", parameters, new DialogOptions { MaxWidth = MaxWidth.ExtraSmall, FullWidth = true });
+        var result = await dialog.Result;
+        if (result != null && !result.Canceled)
+        {
+            var success = await SalesOrderService.DeleteSalesOrderItemAsync(item.Id!);
+            if (success)
+            {
+                Snackbar.Add("Removed successfully", Severity.Success);
+                await OnChanged.InvokeAsync();
+            }
+        }
+    }
+}
@@ -0,0 +1,96 @@
+@using Indotalent.Features.Sales.SalesOrder.Cqrs
+@using MudBlazor
+@inject SalesOrderService SalesOrderService
+@inject ISnackbar Snackbar
+
+<MudDialog>
+    <DialogContent>
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="2">
+                <MudItem xs="12">
+                    <MudText Typo="Typo.subtitle2" Class="mb-0">Product</MudText>
+                    <MudSelect T="string" @bind-Value="_model.ProductId"
+                               Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true"
+                               AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                        @foreach (var item in _lookup.Products)
+                        {
+                            <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Unit Price</MudText>
+                    <MudNumericField @bind-Value="_model.UnitPrice" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Quantity</MudText>
+                    <MudNumericField @bind-Value="_model.Quantity" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+                <MudItem xs="12">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Summary</MudText>
+                    <MudTextField @bind-Value="_model.Summary" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+            </MudGrid>
+        </MudForm>
+    </DialogContent>
+    <DialogActions>
+        <MudButton OnClick="Cancel" Variant="Variant.Text">Cancel</MudButton>
+        <MudButton Color="Color.Primary" OnClick="Submit" Variant="Variant.Filled" Disabled="_processing" Style="text-transform: none; font-weight: 700; border-radius: 4px;">
+            @if (_processing)
+            {
+                <MudProgressCircular Size="Size.Small" Indeterminate="true" />
+                <MudText Class="ms-2">Updating...</MudText>
+            }
+            else
+            {
+                <MudText>Save Changes</MudText>
+            }
+        </MudButton>
+    </DialogActions>
+</MudDialog>
+
+@code {
+    [CascadingParameter] IMudDialogInstance MudDialog { get; set; } = default!;
+    [Parameter] public SalesOrderItemResponse Data { get; set; } = new();
+    private MudForm _form = default!;
+    private UpdateSalesOrderItemRequest _model = new();
+    private SalesOrderLookupResponse _lookup = new();
+    private bool _processing = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var res = await SalesOrderService.GetSalesOrderLookupAsync();
+        if (res != null && res.IsSuccess)
+        {
+            _lookup = res.Value ?? new();
+        }
+
+        _model.Id = Data.Id;
+        _model.ProductId = Data.ProductId;
+        _model.Summary = Data.Summary;
+        _model.UnitPrice = Data.UnitPrice;
+        _model.Quantity = Data.Quantity;
+
+        StateHasChanged();
+    }
+
+    private void Cancel() => MudDialog.Cancel();
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await SalesOrderService.UpdateSalesOrderItemAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Item updated successfully", Severity.Success);
+                MudDialog.Close(DialogResult.Ok(true));
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,313 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.SalesOrder.Cqrs
+@using Indotalent.Features.Sales.SalesOrder.Components
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@using Microsoft.JSInterop
+@inject SalesOrderService SalesOrderService
+@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 #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 ? "Details" : "Edit") Order</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">@_model.AutoNumber</MudText>
+        </div>
+    </div>
+    @if (ReadOnly || !string.IsNullOrEmpty(_model.Id))
+    {
+        <MudButton Variant="Variant.Filled"
+                   Color="Color.Info"
+                   StartIcon="@(_isPrinting ? null : Icons.Material.Filled.Print)"
+                   OnClick="DownloadPdf"
+                   Disabled="_isPrinting"
+                   Style="border-radius: 4px; text-transform: none; font-weight: 700; box-shadow: none;">
+            @if (_isPrinting)
+            {
+                <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                <MudText Class="ms-2">Generating PDF...</MudText>
+            }
+            else
+            {
+                <MudText>Print PDF</MudText>
+            }
+        </MudButton>
+    }
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 4px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12"><MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Basic Information</MudText><MudDivider /></MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Order Date</MudText>
+                <MudDatePicker @bind-Date="_model.OrderDate" ReadOnly="ReadOnly"
+                               Variant="Variant.Outlined" Margin="Margin.Dense" />
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Customer</MudText>
+                <MudSelect T="string" @bind-Value="_model.CustomerId"
+                           ReadOnly="ReadOnly"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Customers)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Advisor (Sales)</MudText>
+                <MudSelect T="string" @bind-Value="_model.EmployeeId"
+                           ReadOnly="ReadOnly"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Employees)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Status</MudText>
+                <MudSelect T="Indotalent.Data.Enums.SalesOrderStatus" @bind-Value="_model.OrderStatus"
+                           ReadOnly="ReadOnly"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Statuses)
+                    {
+                        <MudSelectItem Value="@((Indotalent.Data.Enums.SalesOrderStatus)item.Value)">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-0">Tax</MudText>
+                <MudSelect T="string" Value="_model.TaxId"
+                           ValueChanged="OnTaxChanged"
+                           ReadOnly="ReadOnly"
+                           Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" FullWidth="true"
+                           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookup.Taxes)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description"
+                              ReadOnly="ReadOnly"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" Lines="2" FullWidth="true" />
+            </MudItem>
+
+            <MudItem xs="12" Class="mt-6">
+                <_SalesOrderItemDataTable Items="_items" SalesOrderId="@(_model.Id ?? string.Empty)" ReadOnly="ReadOnly" OnChanged="RefreshItems" />
+            </MudItem>
+
+            <MudItem xs="12" sm="7"></MudItem>
+            <MudItem xs="12" sm="5">
+                <MudPaper Elevation="0" Outlined="true" Class="pa-4" Style="border-radius: 4px; background-color: #F8FAFC; border: 1px solid #DCEBFA;">
+                    <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;" Class="mb-4 d-block">Order Summary</MudText>
+                    <div class="d-flex justify-space-between mb-2">
+                        <MudText Typo="Typo.body2">Sub Total</MudText>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@_model.BeforeTaxAmount?.ToString("N2")</MudText>
+                    </div>
+                    <div class="d-flex justify-space-between mb-2">
+                        <MudText Typo="Typo.body2">Tax Amount</MudText>
+                        <MudText Typo="Typo.body2" Style="font-weight: 700;">@_model.TaxAmount?.ToString("N2")</MudText>
+                    </div>
+                    <MudDivider Class="my-2" />
+                    <div class="d-flex justify-space-between">
+                        <MudText Typo="Typo.subtitle1" Style="font-weight: 900;">Total Amount</MudText>
+                        <MudText Typo="Typo.subtitle1" Color="Color.Primary" Style="font-weight: 900;">@_model.AfterTaxAmount?.ToString("N2")</MudText>
+                    </div>
+                </MudPaper>
+            </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-radius: 4px; text-transform: none; font-weight: 700; border: 1px solid #e0e0e0;">
+                @(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 UpdateSalesOrderRequest 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 UpdateSalesOrderValidator _validator = new();
+    private UpdateSalesOrderRequest _model = new();
+    private List<SalesOrderItemResponse> _items = new();
+    private SalesOrderLookupResponse _lookup = new();
+    private bool _processing = false;
+    private bool _isPrinting = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var resLookup = await SalesOrderService.GetSalesOrderLookupAsync();
+        if (resLookup != null && resLookup.IsSuccess) _lookup = resLookup.Value ?? new();
+
+        _model = Data;
+        await RefreshItems();
+    }
+
+    private async Task OnTaxChanged(string newTaxId)
+    {
+        if (ReadOnly || _model.TaxId == newTaxId) return;
+        
+        _model.TaxId = newTaxId;
+        StateHasChanged();
+
+        await SubmitInternal(false);
+        Snackbar.Add("Tax updated and totals recalculated.", Severity.Info);
+        await RefreshItems();
+    }
+
+    private async Task RefreshItems()
+    {
+        try
+        {
+            var response = await SalesOrderService.GetSalesOrderByIdAsync(_model.Id!);
+            await Task.Delay(500);
+            
+            if (response != null && response.IsSuccess && response.Value != null)
+            {
+                _items = response.Value.Items ?? new();
+                _model.BeforeTaxAmount = response.Value.BeforeTaxAmount;
+                _model.TaxAmount = response.Value.TaxAmount;
+                _model.AfterTaxAmount = response.Value.AfterTaxAmount;
+                StateHasChanged();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+    }
+
+    private async Task DownloadPdf()
+    {
+        try
+        {
+            _isPrinting = true;
+            StateHasChanged();
+
+            await Task.Delay(1000);
+
+            var response = await SalesOrderService.GetSalesOrderByIdAsync(_model.Id!);
+            if (response != null && response.IsSuccess && response.Value != null)
+            {
+                var pdfBytes = SalesOrderPdfGenerator.Generate(response.Value);
+                var fileName = $"SO_{response.Value.AutoNumber}.pdf";
+                var base64 = Convert.ToBase64String(pdfBytes);
+                await JSRuntime.InvokeVoidAsync("downloadFile", fileName, "application/pdf", base64);
+                Snackbar.Add("PDF generated successfully.", Severity.Success);
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _isPrinting = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task Submit()
+    {
+        await SubmitInternal(true);
+    }
+
+    private async Task SubmitInternal(bool showNotification)
+    {
+        if (ReadOnly) return;
+        
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        StateHasChanged();
+        
+        try
+        {
+            var response = await SalesOrderService.UpdateSalesOrderAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                if (showNotification)
+                {
+                    Snackbar.Add("Updated successfully", Severity.Success);
+                    await OnSuccess.InvokeAsync();
+                }
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+            StateHasChanged();
+        }
+    }
+}
@@ -0,0 +1,62 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public class CreateSalesOrderRequest
+{
+    public DateTime? OrderDate { get; set; }
+    public Data.Enums.SalesOrderStatus OrderStatus { get; set; }
+    public string? Description { get; set; }
+    public string? CustomerId { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? TaxId { get; set; }
+}
+
+public class CreateSalesOrderResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+}
+
+public record CreateSalesOrderCommand(CreateSalesOrderRequest Data) : IRequest<CreateSalesOrderResponse>;
+
+public class CreateSalesOrderHandler : IRequestHandler<CreateSalesOrderCommand, CreateSalesOrderResponse>
+{
+    private readonly AppDbContext _context;
+    public CreateSalesOrderHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateSalesOrderResponse> Handle(CreateSalesOrderCommand request, CancellationToken cancellationToken)
+    {
+        var entityName = nameof(Data.Entities.SalesOrder);
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"SO/{{Year}}/{{Month}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.SalesOrder
+        {
+            AutoNumber = autoNo,
+            OrderDate = request.Data.OrderDate,
+            OrderStatus = request.Data.OrderStatus,
+            Description = request.Data.Description,
+            CustomerId = request.Data.CustomerId,
+            EmployeeId = request.Data.EmployeeId,
+            TaxId = request.Data.TaxId,
+            BeforeTaxAmount = 0,
+            TaxAmount = 0,
+            AfterTaxAmount = 0
+        };
+
+        _context.SalesOrder.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateSalesOrderResponse
+        {
+            Id = entity.Id,
+            AutoNumber = entity.AutoNumber
+        };
+    }
+}
@@ -0,0 +1,45 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Indotalent.Shared.Utils;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public class CreateSalesOrderItemRequest
+{
+    public string? SalesOrderId { get; set; }
+    public string? ProductId { get; set; }
+    public string? Summary { get; set; }
+    public decimal? UnitPrice { get; set; }
+    public double? Quantity { get; set; }
+}
+
+public record CreateSalesOrderItemCommand(CreateSalesOrderItemRequest Data) : IRequest<bool>;
+
+public class CreateSalesOrderItemHandler : IRequestHandler<CreateSalesOrderItemCommand, bool>
+{
+    private readonly AppDbContext _context;
+    public CreateSalesOrderItemHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(CreateSalesOrderItemCommand request, CancellationToken cancellationToken)
+    {
+        var entity = new Data.Entities.SalesOrderItem
+        {
+            SalesOrderId = request.Data.SalesOrderId,
+            ProductId = request.Data.ProductId,
+            Summary = request.Data.Summary,
+            UnitPrice = request.Data.UnitPrice ?? 0,
+            Quantity = request.Data.Quantity ?? 0,
+            Total = (request.Data.UnitPrice ?? 0) * (decimal)(request.Data.Quantity ?? 0)
+        };
+
+        _context.SalesOrderItem.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        if (!string.IsNullOrEmpty(request.Data.SalesOrderId))
+        {
+            SalesOrderHelper.Recalculate(_context, request.Data.SalesOrderId);
+        }
+
+        return true;
+    }
+}
@@ -0,0 +1,12 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public class CreateSalesOrderValidator : AbstractValidator<CreateSalesOrderRequest>
+{
+    public CreateSalesOrderValidator()
+    {
+        RuleFor(x => x.OrderDate).NotEmpty().WithMessage("Date is required");
+        RuleFor(x => x.CustomerId).NotEmpty().WithMessage("Customer is required");
+    }
+}
@@ -0,0 +1,25 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public record DeleteSalesOrderByIdCommand(string Id) : IRequest<bool>;
+
+public class DeleteSalesOrderByIdHandler : IRequestHandler<DeleteSalesOrderByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+    public DeleteSalesOrderByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteSalesOrderByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.SalesOrder
+            .FirstOrDefaultAsync(x => x.Id == request.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.SalesOrder.Remove(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+        return true;
+    }
+}
@@ -0,0 +1,34 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Shared.Utils;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public record DeleteSalesOrderItemCommand(string Id) : IRequest<bool>;
+
+public class DeleteSalesOrderItemHandler : IRequestHandler<DeleteSalesOrderItemCommand, bool>
+{
+    private readonly AppDbContext _context;
+    public DeleteSalesOrderItemHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteSalesOrderItemCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.SalesOrderItem
+            .FirstOrDefaultAsync(x => x.Id == request.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        var salesOrderId = entity.SalesOrderId;
+
+        _context.SalesOrderItem.Remove(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        if (!string.IsNullOrEmpty(salesOrderId))
+        {
+            SalesOrderHelper.Recalculate(_context, salesOrderId);
+        }
+
+        return true;
+    }
+}
@@ -0,0 +1,122 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Shared.Utils;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public class SalesOrderItemResponse
+{
+    public string? Id { get; set; }
+    public string? ProductId { get; set; }
+    public string? ProductName { get; set; }
+    public string? Summary { get; set; }
+    public decimal? UnitPrice { get; set; }
+    public double? Quantity { get; set; }
+    public decimal? Total { get; set; }
+}
+
+public class GetSalesOrderByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public DateTime? OrderDate { get; set; }
+    public Data.Enums.SalesOrderStatus OrderStatus { get; set; }
+    public string? Description { get; set; }
+    public string? CustomerId { get; set; }
+    public string? CustomerName { get; set; }
+    public string? CustomerStreet { get; set; }
+    public string? CustomerCity { get; set; }
+    public string? CustomerState { get; set; }
+    public string? CustomerZipCode { get; set; }
+    public string? CustomerPhone { get; set; }
+    public string? CustomerEmail { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? CompanyName { get; set; }
+    public string? CompanyStreet { get; set; }
+    public string? CompanyCity { get; set; }
+    public string? CompanyState { get; set; }
+    public string? CompanyZipCode { get; set; }
+    public string? CompanyPhone { get; set; }
+    public string? CompanyEmail { get; set; }
+    public string? CurrencySymbol { get; set; }
+    public string? TaxId { get; set; }
+    public decimal? BeforeTaxAmount { get; set; }
+    public decimal? TaxAmount { get; set; }
+    public decimal? AfterTaxAmount { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+    public List<SalesOrderItemResponse> Items { get; set; } = new();
+}
+
+public record GetSalesOrderByIdQuery(string Id) : IRequest<GetSalesOrderByIdResponse?>;
+
+public class GetSalesOrderByIdHandler : IRequestHandler<GetSalesOrderByIdQuery, GetSalesOrderByIdResponse?>
+{
+    private readonly AppDbContext _context;
+    public GetSalesOrderByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetSalesOrderByIdResponse?> Handle(GetSalesOrderByIdQuery request, CancellationToken cancellationToken)
+    {
+        var company = await _context.Company
+            .AsNoTracking()
+            .Include(x => x.Currency)
+            .OrderByDescending(x => x.IsDefault)
+            .FirstOrDefaultAsync(cancellationToken);
+
+        return await _context.SalesOrder
+            .AsNoTracking()
+            .Include(x => x.Customer)
+            .Include(x => x.Employee)
+            .Include(x => x.SalesOrderItemList)
+            .ThenInclude(x => x.Product)
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetSalesOrderByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                OrderDate = x.OrderDate,
+                OrderStatus = x.OrderStatus,
+                Description = x.Description,
+                CustomerId = x.CustomerId,
+                CustomerName = x.Customer!.Name,
+                CustomerStreet = x.Customer!.Street,
+                CustomerCity = x.Customer!.City,
+                CustomerState = x.Customer!.State,
+                CustomerZipCode = x.Customer!.ZipCode,
+                CustomerPhone = x.Customer!.PhoneNumber,
+                CustomerEmail = x.Customer!.EmailAddress,
+                EmployeeId = x.EmployeeId,
+                EmployeeName = x.Employee != null ? x.Employee.Name : string.Empty,
+                CompanyName = company != null ? company.Name : string.Empty,
+                CompanyStreet = company != null ? company.StreetAddress : string.Empty,
+                CompanyCity = company != null ? company.City : string.Empty,
+                CompanyState = company != null ? company.StateProvince : string.Empty,
+                CompanyZipCode = company != null ? company.ZipCode : string.Empty,
+                CompanyPhone = company != null ? company.Phone : string.Empty,
+                CompanyEmail = company != null ? company.Email : string.Empty,
+                CurrencySymbol = company != null && company.Currency != null ? company.Currency.Symbol : "IDR",
+                TaxId = x.TaxId,
+                BeforeTaxAmount = x.BeforeTaxAmount,
+                TaxAmount = x.TaxAmount,
+                AfterTaxAmount = x.AfterTaxAmount,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+                Items = x.SalesOrderItemList.Select(i => new SalesOrderItemResponse
+                {
+                    Id = i.Id,
+                    ProductId = i.ProductId,
+                    ProductName = i.Product!.Name,
+                    Summary = i.Summary,
+                    UnitPrice = i.UnitPrice,
+                    Quantity = i.Quantity,
+                    Total = i.Total
+                }).ToList()
+            }).FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,40 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public class GetSalesOrderListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public DateTime? OrderDate { get; set; }
+    public string? CustomerName { get; set; }
+    public decimal? AfterTaxAmount { get; set; }
+    public Data.Enums.SalesOrderStatus OrderStatus { get; set; }
+}
+
+public record GetSalesOrderListQuery() : IRequest<List<GetSalesOrderListResponse>>;
+
+public class GetSalesOrderListHandler : IRequestHandler<GetSalesOrderListQuery, List<GetSalesOrderListResponse>>
+{
+    private readonly AppDbContext _context;
+    public GetSalesOrderListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetSalesOrderListResponse>> Handle(GetSalesOrderListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.SalesOrder
+            .AsNoTracking()
+            .Include(x => x.Customer)
+            .OrderByDescending(x => x.CreatedAt)
+            .Select(x => new GetSalesOrderListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                OrderDate = x.OrderDate,
+                CustomerName = x.Customer!.Name,
+                AfterTaxAmount = x.AfterTaxAmount,
+                OrderStatus = x.OrderStatus
+            }).ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,71 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Data.Enums;
+using Indotalent.ConfigBackEnd.Extensions;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public class SalesOrderLookupResponse
+{
+    public List<LookupItem> Customers { get; set; } = new();
+    public List<LookupItem> Employees { get; set; } = new();
+    public List<LookupItem> Taxes { get; set; } = new();
+    public List<LookupItem> Products { get; set; } = new();
+    public List<LookupStatusItem> Statuses { get; set; } = new();
+}
+
+public class LookupItem
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+}
+
+public class LookupStatusItem
+{
+    public int Value { get; set; }
+    public string? Name { get; set; }
+}
+
+public record GetSalesOrderLookupQuery() : IRequest<SalesOrderLookupResponse>;
+
+public class GetSalesOrderLookupHandler : IRequestHandler<GetSalesOrderLookupQuery, SalesOrderLookupResponse>
+{
+    private readonly AppDbContext _context;
+    public GetSalesOrderLookupHandler(AppDbContext context) => _context = context;
+
+    public async Task<SalesOrderLookupResponse> Handle(GetSalesOrderLookupQuery request, CancellationToken cancellationToken)
+    {
+        var response = new SalesOrderLookupResponse();
+
+        response.Customers = await _context.Customer.AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        response.Employees = await _context.Employee.AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        response.Taxes = await _context.Tax.AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        response.Products = await _context.Product.AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        response.Statuses = Enum.GetValues(typeof(SalesOrderStatus))
+            .Cast<SalesOrderStatus>()
+            .Select(x => new LookupStatusItem
+            {
+                Value = (int)x,
+                Name = x.GetDescription()
+            }).ToList();
+
+        return response;
+    }
+}
@@ -0,0 +1,57 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Shared.Utils;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public class UpdateSalesOrderRequest
+{
+    public string? Id { get; set; }
+    public DateTime? OrderDate { get; set; }
+    public Data.Enums.SalesOrderStatus OrderStatus { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? Description { get; set; }
+    public string? CustomerId { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? TaxId { get; set; }
+    public decimal? BeforeTaxAmount { get; set; }
+    public decimal? TaxAmount { get; set; }
+    public decimal? AfterTaxAmount { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record UpdateSalesOrderCommand(UpdateSalesOrderRequest Data) : IRequest<bool>;
+
+public class UpdateSalesOrderHandler : IRequestHandler<UpdateSalesOrderCommand, bool>
+{
+    private readonly AppDbContext _context;
+    public UpdateSalesOrderHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(UpdateSalesOrderCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.SalesOrder
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        entity.OrderDate = request.Data.OrderDate;
+        entity.OrderStatus = request.Data.OrderStatus;
+        entity.Description = request.Data.Description;
+        entity.CustomerId = request.Data.CustomerId;
+        entity.EmployeeId = request.Data.EmployeeId;
+        entity.TaxId = request.Data.TaxId;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        if (!string.IsNullOrEmpty(entity.Id))
+        {
+            SalesOrderHelper.Recalculate(_context, entity.Id);
+        }
+
+        return true;
+    }
+}
@@ -0,0 +1,46 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Shared.Utils;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public class UpdateSalesOrderItemRequest
+{
+    public string? Id { get; set; }
+    public string? ProductId { get; set; }
+    public string? Summary { get; set; }
+    public decimal? UnitPrice { get; set; }
+    public double? Quantity { get; set; }
+}
+
+public record UpdateSalesOrderItemCommand(UpdateSalesOrderItemRequest Data) : IRequest<bool>;
+
+public class UpdateSalesOrderItemHandler : IRequestHandler<UpdateSalesOrderItemCommand, bool>
+{
+    private readonly AppDbContext _context;
+    public UpdateSalesOrderItemHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(UpdateSalesOrderItemCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.SalesOrderItem
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        entity.ProductId = request.Data.ProductId;
+        entity.Summary = request.Data.Summary;
+        entity.UnitPrice = request.Data.UnitPrice ?? 0;
+        entity.Quantity = request.Data.Quantity ?? 0;
+        entity.Total = (request.Data.UnitPrice ?? 0) * (decimal)(request.Data.Quantity ?? 0);
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        if (!string.IsNullOrEmpty(entity.SalesOrderId))
+        {
+            SalesOrderHelper.Recalculate(_context, entity.SalesOrderId);
+        }
+
+        return true;
+    }
+}
@@ -0,0 +1,12 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+public class UpdateSalesOrderValidator : AbstractValidator<UpdateSalesOrderRequest>
+{
+    public UpdateSalesOrderValidator()
+    {
+        RuleFor(x => x.Id).NotEmpty();
+        RuleFor(x => x.CustomerId).NotEmpty().WithMessage("Customer is required");
+    }
+}
@@ -0,0 +1,97 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Sales.SalesOrder.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Sales.SalesOrder;
+
+public static class SalesOrderEndpoint
+{
+    public static void MapSalesOrderEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/sales-order").WithTags("SalesOrders")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetSalesOrderListQuery());
+            return result.ToApiResponse("Sales order list retrieved successfully");
+        })
+        .WithName("GetSalesOrderList");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetSalesOrderByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Sales order detail retrieved successfully"
+                : $"Sales order with ID {id} not found");
+        })
+        .WithName("GetSalesOrderById");
+
+        group.MapGet("/lookup", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetSalesOrderLookupQuery());
+            return result.ToApiResponse("Lookup data retrieved successfully");
+        })
+        .WithName("GetSalesOrderLookup");
+
+        group.MapPost("/", async (CreateSalesOrderRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateSalesOrderCommand(request));
+            return result.ToApiResponse("Sales order has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateSalesOrder");
+
+        group.MapPost("/update", async (UpdateSalesOrderRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateSalesOrderCommand(request));
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Update failed. Sales order not found.");
+            }
+            return result.ToApiResponse("Sales order has been updated successfully");
+        })
+        .WithName("UpdateSalesOrder");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteSalesOrderByIdCommand(id));
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Delete failed. Sales order not found.");
+            }
+            return true.ToApiResponse("Sales order has been deleted successfully");
+        })
+        .WithName("DeleteSalesOrderById");
+
+        group.MapPost("/sales-order-item", async (CreateSalesOrderItemRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateSalesOrderItemCommand(request));
+            return result.ToApiResponse("Item has been added successfully");
+        })
+        .WithName("CreateSalesOrderItem");
+
+        group.MapPost("/sales-order-item/update", async (UpdateSalesOrderItemRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateSalesOrderItemCommand(request));
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Update item failed.");
+            }
+            return result.ToApiResponse("Item has been updated successfully");
+        })
+        .WithName("UpdateSalesOrderItem");
+
+        group.MapPost("/sales-order-item/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteSalesOrderItemCommand(id));
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Delete item failed.");
+            }
+            return true.ToApiResponse("Item has been removed successfully");
+        })
+        .WithName("DeleteSalesOrderItem");
+    }
+}
@@ -0,0 +1,152 @@
+using QuestPDF.Fluent;
+using QuestPDF.Helpers;
+using QuestPDF.Infrastructure;
+using Indotalent.Features.Sales.SalesOrder.Cqrs;
+
+namespace Indotalent.Features.Sales.SalesOrder;
+
+public class SalesOrderPdfGenerator
+{
+    public static byte[] Generate(GetSalesOrderByIdResponse data)
+    {
+        QuestPDF.Settings.License = LicenseType.Community;
+
+        var primaryBlue = "#0D47A1";
+        var textSlate = "#64748b";
+
+        return Document.Create(container =>
+        {
+            container.Page(page =>
+            {
+                page.Size(PageSizes.A4);
+                page.Margin(1.5f, Unit.Centimetre);
+                page.PageColor(Colors.White);
+                page.DefaultTextStyle(x => x.FontSize(9).FontFamily(Fonts.Verdana));
+
+                page.Header().Row(row =>
+                {
+                    row.RelativeItem().Column(col =>
+                    {
+                        col.Item().Text("SALES ORDER")
+                            .FontSize(20).ExtraBold().FontColor(primaryBlue);
+                        col.Item().Text($"{data.AutoNumber}").FontSize(11).SemiBold();
+                    });
+
+                    row.RelativeItem().AlignRight().Column(col =>
+                    {
+                        col.Item().Text(data.CompanyName).FontSize(11).ExtraBold();
+                        col.Item().Text($"{data.CompanyStreet}").FontColor(textSlate);
+                        col.Item().Text($"{data.CompanyCity}, {data.CompanyState} {data.CompanyZipCode}").FontColor(textSlate);
+                        col.Item().Text($"Tel: {data.CompanyPhone} | Email: {data.CompanyEmail}").FontColor(textSlate);
+                    });
+                });
+
+                page.Content().PaddingVertical(20).Column(col =>
+                {
+                    col.Item().Row(row =>
+                    {
+                        row.RelativeItem().Column(c =>
+                        {
+                            c.Item().BorderBottom(1).PaddingBottom(5).Text("FROM (COMPANY)").FontSize(8).Bold().FontColor(textSlate);
+                            c.Item().PaddingTop(5).Text(data.CompanyName).Bold();
+                            c.Item().Text(data.CompanyStreet);
+                            c.Item().Text($"{data.CompanyCity}, {data.CompanyState} {data.CompanyZipCode}");
+                            c.Item().Text($"Tel: {data.CompanyPhone}");
+                            c.Item().Text($"Email: {data.CompanyEmail}");
+                        });
+
+                        row.ConstantItem(40);
+
+                        row.RelativeItem().Column(c =>
+                        {
+                            c.Item().BorderBottom(1).PaddingBottom(5).Text("TO (CUSTOMER)").FontSize(8).Bold().FontColor(textSlate);
+                            c.Item().PaddingTop(5).Text(data.CustomerName).Bold();
+                            c.Item().Text(data.CustomerStreet);
+                            c.Item().Text($"{data.CustomerCity}, {data.CustomerState} {data.CustomerZipCode}");
+                            c.Item().Text($"Tel: {data.CustomerPhone}");
+                            c.Item().Text($"Email: {data.CustomerEmail}");
+                        });
+                    });
+
+                    col.Item().PaddingTop(20).Table(table =>
+                    {
+                        table.ColumnsDefinition(columns =>
+                        {
+                            columns.ConstantColumn(25);
+                            columns.RelativeColumn(4);
+                            columns.RelativeColumn(2);
+                            columns.RelativeColumn(1.5f);
+                            columns.RelativeColumn(2.5f);
+                        });
+
+                        table.Header(header =>
+                        {
+                            header.Cell().Element(HeaderStyle).Text("#");
+                            header.Cell().Element(HeaderStyle).Text("Product Description");
+                            header.Cell().Element(HeaderStyle).AlignRight().Text("Unit Price");
+                            header.Cell().Element(HeaderStyle).AlignCenter().Text("Qty");
+                            header.Cell().Element(HeaderStyle).AlignRight().Text($"Total ({data.CurrencySymbol})");
+
+                            static IContainer HeaderStyle(IContainer container)
+                            {
+                                return container.DefaultTextStyle(x => x.SemiBold().FontColor(Colors.White))
+                                                .PaddingVertical(5).PaddingHorizontal(5).Background("#0D47A1");
+                            }
+                        });
+
+                        var index = 1;
+                        foreach (var item in data.Items)
+                        {
+                            table.Cell().Element(CellStyle).Text($"{index++}");
+                            table.Cell().Element(CellStyle).Column(c => {
+                                c.Item().Text(item.ProductName).Bold();
+                                if (!string.IsNullOrEmpty(item.Summary)) c.Item().Text(item.Summary).FontSize(8).FontColor(textSlate);
+                            });
+                            table.Cell().Element(CellStyle).AlignRight().Text(item.UnitPrice?.ToString("N2"));
+                            table.Cell().Element(CellStyle).AlignCenter().Text(item.Quantity?.ToString());
+                            table.Cell().Element(CellStyle).AlignRight().Text(item.Total?.ToString("N2"));
+
+                            static IContainer CellStyle(IContainer container)
+                            {
+                                return container.BorderBottom(1).BorderColor("#E2E8F0").PaddingVertical(8).PaddingHorizontal(5);
+                            }
+                        }
+                    });
+
+                    col.Item().PaddingTop(10).Row(row =>
+                    {
+                        row.RelativeItem().Column(c => {
+                            c.Item().Text("Notes:").FontSize(8).Bold();
+                            c.Item().Text(string.IsNullOrEmpty(data.Description) ? "-" : data.Description).FontSize(8);
+                            c.Item().PaddingTop(10).Text($"Date: {data.OrderDate?.ToString("dd MMM yyyy")}").FontSize(9);
+                            c.Item().Text($"Status: {data.OrderStatus.ToString().ToUpper()}").FontSize(9).Bold().FontColor(primaryBlue);
+                        });
+                        row.ConstantItem(200).Column(c =>
+                        {
+                            c.Item().Row(r => {
+                                r.RelativeItem().Text("Sub Total");
+                                r.RelativeItem().AlignRight().Text(data.BeforeTaxAmount?.ToString("N2"));
+                            });
+                            c.Item().Row(r => {
+                                r.RelativeItem().Text("Tax Amount");
+                                r.RelativeItem().AlignRight().Text(data.TaxAmount?.ToString("N2"));
+                            });
+                            c.Item().PaddingTop(5).BorderTop(1).Row(r => {
+                                r.RelativeItem().Text($"TOTAL ({data.CurrencySymbol})").Bold();
+                                r.RelativeItem().AlignRight().Text(data.AfterTaxAmount?.ToString("N2")).ExtraBold().FontColor(primaryBlue);
+                            });
+                        });
+                    });
+                });
+
+                page.Footer().AlignCenter().Text(x =>
+                {
+                    x.Span("Page ").FontSize(8);
+                    x.CurrentPageNumber().FontSize(8);
+                    x.Span(" of ").FontSize(8);
+                    x.TotalPages().FontSize(8);
+                });
+            });
+        }).GeneratePdf();
+    }
+}
@@ -0,0 +1,86 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Sales.SalesOrder.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Sales.SalesOrder;
+
+public class SalesOrderService : BaseService
+{
+    private readonly RestClient _client;
+
+    public SalesOrderService(
+            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<GetSalesOrderListResponse>>?> GetSalesOrderListAsync()
+    {
+        var request = new RestRequest("api/sales-order", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetSalesOrderListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetSalesOrderByIdResponse>?> GetSalesOrderByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/sales-order/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetSalesOrderByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<SalesOrderLookupResponse>?> GetSalesOrderLookupAsync()
+    {
+        var request = new RestRequest("api/sales-order/lookup", Method.Get);
+        return await ExecuteWithResponseAsync<SalesOrderLookupResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateSalesOrderResponse>?> CreateSalesOrderAsync(CreateSalesOrderRequest data)
+    {
+        var request = new RestRequest("api/sales-order", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateSalesOrderResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<bool>?> UpdateSalesOrderAsync(UpdateSalesOrderRequest data)
+    {
+        var request = new RestRequest("api/sales-order/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<bool>(_client, request);
+    }
+
+    public async Task<bool> DeleteSalesOrderByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/sales-order/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<bool>?> CreateSalesOrderItemAsync(CreateSalesOrderItemRequest data)
+    {
+        var request = new RestRequest("api/sales-order/sales-order-item", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<bool>(_client, request);
+    }
+
+    public async Task<ApiResponse<bool>?> UpdateSalesOrderItemAsync(UpdateSalesOrderItemRequest data)
+    {
+        var request = new RestRequest("api/sales-order/sales-order-item/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<bool>(_client, request);
+    }
+
+    public async Task<bool> DeleteSalesOrderItemAsync(string id)
+    {
+        var request = new RestRequest($"api/sales-order/sales-order-item/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+}
@@ -0,0 +1,118 @@
+@page "/sales"
+@using Indotalent.Features.Sales.CommissionReport.Components
+@using Indotalent.Features.Sales.Invoice.Components
+@using Indotalent.Features.Sales.InvoiceReport.Components
+@using Indotalent.Features.Sales.PaymentReceive.Components
+@using Indotalent.Features.Sales.PaymentReceiveReport.Components
+@using Indotalent.Features.Sales.SalesOrder.Components
+@using Indotalent.Features.Sales.SalesReport.Components
+@using Microsoft.AspNetCore.Authorization
+@using Indotalent.Infrastructure.Authorization.Identity
+@using MudBlazor
+@inject NavigationManager NavigationManager
+
+
+@attribute [Authorize(Roles = $"{ApplicationRoles.Admin},{ApplicationRoles.Member}")]
+
+<style>
+    .clean-white-tabs .mud-tabs-toolbar {
+        background-color: white !important;
+        border-bottom: 2px solid #DCEBFA;
+        border-radius: 4px !important;
+    }
+
+    .clean-white-tabs .mud-tab {
+        color: #94a3b8 !important;
+        text-transform: none;
+        font-weight: 500;
+        min-width: 150px;
+        border-radius: 4px !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"
+                 ScrollButtons="ScrollButtons.Always">
+
+
+            <MudTabPanel Text="Sales Order" Icon="@Icons.Material.Outlined.ListAlt">
+                <SalesOrderPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Invoice" Icon="@Icons.Material.Outlined.ReceiptLong">
+                <InvoicePage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Payment" Icon="@Icons.Material.Outlined.PriceCheck">
+                <PaymentReceivePage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Sales Report" Icon="@Icons.Material.Outlined.Insights">
+                <SalesReportPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Commission Report" Icon="@Icons.Material.Outlined.Assessment">
+                <CommissionReportPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Invoice Report" Icon="@Icons.Material.Outlined.Analytics">
+                <InvoiceReportPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Payment Report" Icon="@Icons.Material.Outlined.MonetizationOn">
+                <PaymentReceiveReportPage />
+            </MudTabPanel>
+
+        </MudTabs>
+    </div>
+</MudContainer>
+
+@code {
+    private int _activeTabIndex = 0;
+
+    private readonly Dictionary<int, string> _tabMapping = new()
+    {
+        { 0, "order" },
+        { 1, "invoice" },
+        { 2, "payment" },
+        { 3, "report-sales" },
+        { 4, "report-commission" },
+        { 5, "report-invoice" },
+        { 6, "report-payment" }
+    };
+
+    protected override void OnInitialized()
+    {
+        var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
+        if (Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("tab", out var tabValue))
+        {
+            var tabStr = tabValue.ToString().ToLower();
+            var match = _tabMapping.FirstOrDefault(x => x.Value == tabStr);
+            _activeTabIndex = match.Value != null ? match.Key : 0;
+        }
+    }
+
+    private void OnTabChanged(int index)
+    {
+        _activeTabIndex = index;
+        _tabMapping.TryGetValue(index, out var tabName);
+        
+        NavigationManager.NavigateTo($"/sales?tab={tabName ?? "quotation"}", replace: false);
+    }
+}
@@ -0,0 +1,8 @@
+@page "/sales/sales-report"
+@using Indotalent.Features.Sales.SalesReport.Components
+@using MudBlazor
+
+<_SalesReportDataTable />
+
+@code {
+}
@@ -0,0 +1,297 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Sales.SalesReport
+@using Indotalent.Features.Sales.SalesReport.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject SalesReportService SalesReportService
+@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;">Sales Report</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF; font-size: 0.75rem;">Detailed analysis of sales order items and revenue.</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;">Sales</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Sales Report</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
+    <div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <MudTextField @bind-Value="_searchString"
+                          Placeholder="Search Customer or Order..."
+                          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;">
+                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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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="background: white; font-weight: 500; border-radius: 6px; text-transform: none; height: 34px; border: 1px solid #D1D5DB; 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>
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Hover="true" Striped="true" Class="mud-table-styled" Elevation="0" CustomHeader="true" Dense="true" T="GetSalesReportListDto" Loading="@_isRefreshing">
+        <HeaderContent>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetSalesReportListDto, object>(x => x.CustomerName!)">Customer</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetSalesReportListDto, object>(x => x.SalesOrderNumber!)">Order No</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetSalesReportListDto, object>(x => x.ProductNumber!)">Product Number</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetSalesReportListDto, object>(x => x.ProductName!)">Product Name</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; text-align: right; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">
+                <MudTableSortLabel SortBy="new Func<GetSalesReportListDto, object>(x => x.UnitPrice!)">Unit Price</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; text-align: right; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">
+                <MudTableSortLabel SortBy="new Func<GetSalesReportListDto, object>(x => x.Quantity!)">Qty</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; text-align: right; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;">
+                <MudTableSortLabel SortBy="new Func<GetSalesReportListDto, object>(x => x.Total!)">Total</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em;">
+                <MudTableSortLabel SortBy="new Func<GetSalesReportListDto, object>(x => x.OrderDate!)">Order Date</MudTableSortLabel>
+            </MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>@context.CustomerName</MudTd>
+            <MudTd>@context.SalesOrderNumber</MudTd>
+            <MudTd>@context.ProductNumber</MudTd>
+            <MudTd>@context.ProductName</MudTd>
+            <MudTd Style="text-align: right;">@context.UnitPrice?.ToString("N2")</MudTd>
+            <MudTd Style="text-align: right;">@context.Quantity?.ToString("N2")</MudTd>
+            <MudTd Style="text-align: right; font-weight: 700; color: #1E88E5;">@context.Total?.ToString("N2")</MudTd>
+            <MudTd>@context.OrderDate?.ToString("yyyy-MM-dd")</MudTd>
+        </RowTemplate>
+    </MudTable>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background-color: #F9FAFB; border-top: 1px solid #E5E7EB;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+            <MudText Typo="Typo.caption" Style="font-weight: 500; color: #9CA3AF; font-size: 0.75rem;">Rows per page:</MudText>
+            <MudSelect T="int" Value="@_top" ValueChanged="OnPageSizeChanged" Dense="true" Margin="Margin.Dense" Style="width: 80px; background-color: white; font-size: 12px; font-weight: 600;" Variant="Variant.Outlined" Class="mt-0 custom-select-dense">
+                <MudSelectItem Value="5" />
+                <MudSelectItem Value="10" />
+                <MudSelectItem Value="50" />
+                <MudSelectItem Value="500" />
+                <MudSelectItem Value="1000" />
+            </MudSelect>
+            <MudText Typo="Typo.caption" Style="color: #9CA3AF; margin-left: 12px; font-size: 0.75rem; font-weight: 500;">
+                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; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Prev</MudButton>
+            @{
+    var totalPages = _totalPage == 0 ? 1 : _totalPage;
+    var maxVisible = 5;
+    var startPage = Math.Max(1, _currentPage - maxVisible / 2);
+    var endPage = Math.Min(totalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) { startPage = Math.Max(1, endPage - maxVisible + 1); }
+}
+@for (int i = startPage; i <= endPage; i++)
+{
+    var pageNum = i;
+    var isActive = pageNum == _currentPage;
+    <MudButton OnClick="@(() => OnPageChanged(pageNum))"
+               Variant="Variant.Text" Size="Size.Small"
+               Style="@(isActive ? "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 600; background: #3B82F6; color: white; border: 1px solid #3B82F6; border-radius: 6px; text-transform: none;" : "min-width: 34px; padding: 4px 8px; font-size: 0.75rem; font-weight: 500; color: #374151; background: white; border: 1px solid #D1D5DB; border-radius: 6px; text-transform: none;")">@pageNum</MudButton>
+}
+            <MudButton OnClick="@(() => OnPageChanged(_currentPage + 1))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Variant="Variant.Text" EndIcon="@Icons.Material.Filled.ChevronRight" Size="Size.Small" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "text-transform: none; font-weight: 500; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")">Next</MudButton>
+            <MudIconButton Icon="@Icons.Material.Filled.LastPage" Size="Size.Small" OnClick="@(() => OnPageChanged(_totalPage))" Disabled="@(_currentPage == _totalPage || _totalPage == 0)" Style="@(_currentPage == _totalPage || _totalPage == 0 ? "color: #D1D5DB; background: transparent;" : "color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")" />
+        </div>
+    </div>
+</MudPaper>
+<style>
+.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+@code {
+    private List<GetSalesReportListDto> _items = new();
+    private string _searchString = "";
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+
+    private int _skip = 0;
+    private int _top = 50;
+    private int _totalPage => GetFilteredData().Count() == 0 ? 0 : (int)Math.Ceiling((double)GetFilteredData().Count() / (_top == 0 ? 1 : _top));
+    private int _currentPage => (_top >= GetFilteredData().Count() || _top == 0) ? 1 : (_skip / _top) + 1;
+
+    protected override async Task OnInitializedAsync() => await LoadData();
+
+    private async Task LoadData()
+    {
+        _isRefreshing = true;
+        StateHasChanged();
+        try
+        {
+            var response = await SalesReportService.GetSalesReportListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _items = response.Value ?? new();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetSalesReportListDto> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _items;
+        return _items.Where(x =>
+            (x.CustomerName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.SalesOrderNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.ProductName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetSalesReportListDto> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick()
+    {
+        _skip = 0;
+        StateHasChanged();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") OnSearchClick();
+    }
+
+    private async Task ExportToExcel()
+    {
+        _isExporting = true;
+        StateHasChanged();
+        try
+        {
+            await Task.Delay(1000);
+            using (var workbook = new XLWorkbook())
+            {
+                var worksheet = workbook.Worksheets.Add("SalesReports");
+                var currentRow = 1;
+
+                string[] headers = { "Customer", "Order No", "Product Number", "Product Name", "Unit Price", "Quantity", "Total", "Order Date" };
+                for (int i = 0; i < headers.Length; i++)
+                {
+                    worksheet.Cell(currentRow, i + 1).Value = headers[i];
+                }
+
+                var headerRange = worksheet.Range(1, 1, 1, headers.Length);
+                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.CustomerName;
+                    worksheet.Cell(currentRow, 2).Value = item.SalesOrderNumber;
+                    worksheet.Cell(currentRow, 3).Value = item.ProductNumber;
+                    worksheet.Cell(currentRow, 4).Value = item.ProductName;
+                    worksheet.Cell(currentRow, 5).Value = item.UnitPrice;
+                    worksheet.Cell(currentRow, 6).Value = item.Quantity;
+                    worksheet.Cell(currentRow, 7).Value = item.Total;
+                    worksheet.Cell(currentRow, 8).Value = item.OrderDate?.ToString("yyyy-MM-dd");
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Sales_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 OnPageChanged(int page)
+    {
+        if (page >= 1 && page <= _totalPage)
+        {
+            _skip = (page - 1) * _top;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        StateHasChanged();
+    }
+}
@@ -0,0 +1,61 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Sales.SalesReport.Cqrs;
+
+public record GetSalesReportListDto
+{
+    public string? Id { get; init; }
+    public string? SalesOrderId { get; init; }
+    public string? SalesOrderNumber { get; init; }
+    public string? CustomerName { get; init; }
+    public string? ProductId { get; init; }
+    public string? ProductName { get; init; }
+    public string? ProductNumber { get; init; }
+    public string? Summary { get; init; }
+    public decimal? UnitPrice { get; init; }
+    public double? Quantity { get; init; }
+    public decimal? Total { get; init; }
+    public DateTime? OrderDate { get; init; }
+}
+
+public record GetSalesReportListQuery() : IRequest<List<GetSalesReportListDto>>;
+
+public class GetSalesReportListHandler : IRequestHandler<GetSalesReportListQuery, List<GetSalesReportListDto>>
+{
+    private readonly AppDbContext _context;
+
+    public GetSalesReportListHandler(AppDbContext context)
+    {
+        _context = context;
+    }
+
+    public async Task<List<GetSalesReportListDto>> Handle(GetSalesReportListQuery request, CancellationToken cancellationToken)
+    {
+        var results = await _context.SalesOrderItem
+            .AsNoTracking()
+            .Include(x => x.SalesOrder)
+                .ThenInclude(x => x!.Customer)
+            .Include(x => x.Product)
+            .OrderByDescending(x => x.SalesOrder!.OrderDate)
+            .Select(x => new GetSalesReportListDto
+            {
+                Id = x.Id,
+                SalesOrderId = x.SalesOrderId,
+                SalesOrderNumber = x.SalesOrder != null ? x.SalesOrder.AutoNumber : string.Empty,
+                CustomerName = x.SalesOrder!.Customer != null ? x.SalesOrder.Customer.Name : string.Empty,
+                ProductId = x.ProductId,
+                ProductName = x.Product != null ? x.Product.Name : string.Empty,
+                ProductNumber = x.Product != null ? x.Product.AutoNumber : string.Empty,
+                Summary = x.Summary,
+                UnitPrice = x.UnitPrice,
+                Quantity = x.Quantity,
+                Total = x.Total,
+                OrderDate = x.SalesOrder != null ? x.SalesOrder.OrderDate : null
+            })
+            .ToListAsync(cancellationToken);
+
+        return results;
+    }
+}
@@ -0,0 +1,23 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Sales.SalesReport.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Sales.SalesReport;
+
+public static class SalesReportEndpoint
+{
+    public static void MapSalesReportEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/sales-report").WithTags("SalesReports")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetSalesReportListQuery());
+            return result.ToApiResponse("Sales report list retrieved successfully");
+        })
+        .WithName("GetSalesReportList");
+    }
+}
@@ -0,0 +1,32 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Sales.SalesReport.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Sales.SalesReport;
+
+public class SalesReportService : BaseService
+{
+    private readonly RestClient _client;
+
+    public SalesReportService(
+            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<GetSalesReportListDto>>?> GetSalesReportListAsync()
+    {
+        var request = new RestRequest("api/sales-report", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetSalesReportListDto>>(_client, request);
+    }
+}