initial commit

2026-07-21 13:52:43 +07:00
commit f0e6f38940
881 changed files with 66309 additions and 0 deletions
@@ -0,0 +1,63 @@
+@page "/account/access-denied"
+@using Indotalent.Features.Root
+@using MudBlazor
+@layout MainLayout
+
+<PageTitle>Access Denied - Insufficient Permissions</PageTitle>
+
+<MudContainer MaxWidth="MaxWidth.Medium" Class="d-flex align-center justify-center" Style="height: calc(100vh - 64px);">
+
+    <div class="text-center">
+
+        <MudIcon Icon="@Icons.Material.Filled.GppBad"
+                 Size="Size.Large"
+                 Color="Color.Error"
+                 Class="mb-6"
+                 Style="font-size: 120px;" />
+
+        <MudText Typo="Typo.h3" Class="mb-4" Style="font-weight: 800; color: #1a1a1a;">Access Denied</MudText>
+
+        <MudText Typo="Typo.body1" Class="mb-6" Style="color: #64748b;">
+            Sorry, you do not have the required permissions to access this module.<br />
+            This area is restricted to authorized administrative personnel only.
+        </MudText>
+
+        <MudPaper Elevation="1" Class="pa-4 mb-8 d-inline-block" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+            <MudText Typo="Typo.subtitle2" Class="mb-1">
+                <strong>Error Code:</strong> <code>AGS_AUTH_INSUFFICIENT_PERMISSIONS</code>
+            </MudText>
+            <MudText Typo="Typo.caption" Style="color: #94a3b8; font-family: 'Consolas', monospace;">
+                Verification failed for the current security context.
+            </MudText>
+        </MudPaper>
+
+        <div class="d-flex align-center justify-center gap-4">
+            <MudButton Variant="Variant.Filled"
+                       Color="Color.Primary"
+                       Size="Size.Large"
+                       OnClick="GoHome"
+                       StartIcon="@Icons.Material.Filled.Home"
+                       Style="border-radius: 8px; font-weight: 700;">
+                Back to Home
+            </MudButton>
+
+            <MudButton Variant="Variant.Outlined"
+                       Color="Color.Default"
+                       Size="Size.Large"
+                       OnClick="Logout"
+                       StartIcon="@Icons.Material.Filled.Logout"
+                       Style="border-radius: 8px; font-weight: 700; border: 2px solid #e2e8f0;">
+                Logout & Switch Account
+            </MudButton>
+        </div>
+
+    </div>
+
+</MudContainer>
+
+@code {
+    [Inject] private NavigationManager Nav { get; set; } = default!;
+
+    private void GoHome() => Nav.NavigateTo("/");
+    private void Logout() => Nav.NavigateTo("/account/logout");
+}
@@ -0,0 +1,19 @@
+@inject NavigationManager Navigation
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@attribute [AllowAnonymous]
+
+<AuthorizeView>
+    <NotAuthorized>
+        @{
+            var returnUrl = Navigation.ToBaseRelativePath(Navigation.Uri);
+            Navigation.NavigateTo($"/account/login?returnUrl={Uri.EscapeDataString(returnUrl)}", forceLoad: false);
+        }
+    </NotAuthorized>
+    <Authorized>
+        @{
+            Navigation.NavigateTo("/account/access-denied");
+        }
+    </Authorized>
+</AuthorizeView>
+
@@ -0,0 +1,217 @@
+using Indotalent.ConfigFrontEnd.Service;
+using Indotalent.Data.Entities;
+using Indotalent.Features.Account.ForgotPassword.Cqrs;
+using Indotalent.Features.Account.Login.Cqrs;
+using Indotalent.Features.Account.Register.Cqrs;
+using Indotalent.Features.Account.ResetPassword.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using MediatR;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.Options;
+using System.Security.Claims;
+
+namespace Indotalent.Features.Account;
+
+public static class AccountEndPoint
+{
+    public static IEndpointConventionBuilder MapAccountEndpoints(this IEndpointRouteBuilder endpoints)
+    {
+        var group = endpoints.MapGroup("/account").WithTags("Account");
+
+        group.MapPost("/signin-sso", async ([FromQuery] string email, UserManager<ApplicationUser> userManager, SignInManager<ApplicationUser> signInManager, IOptions<JwtSettingsModel> jwtOptions, HttpContext context) =>
+        {
+            if (string.IsNullOrWhiteSpace(email)) return Results.Json(new { status = 401, title = "Email is required" }, statusCode: 401);
+
+            var user = await userManager.FindByEmailAsync(email);
+
+            if (user == null || !user.IsActive)
+            {
+                return Results.Json(new { status = 401, title = "Account not found or inactive" }, statusCode: 401);
+            }
+
+            var jwtSettings = jwtOptions.Value;
+            var token = JwtService.GenerateNewJwt(user, jwtSettings);
+            var refreshToken = Guid.NewGuid().ToString().Replace("-", "");
+
+            user.RefreshToken = refreshToken;
+            user.LastLoginAt = DateTime.Now;
+            await userManager.UpdateAsync(user);
+
+            await signInManager.SignInAsync(user, isPersistent: true);
+
+            context.Response.Cookies.Append("X-Auth-Token", token, new CookieOptions
+            {
+                HttpOnly = true,
+                Secure = true,
+                SameSite = SameSiteMode.Strict,
+                Expires = DateTimeOffset.UtcNow.AddDays(1)
+            });
+
+            context.Response.Cookies.Append("X-Refresh-Token", refreshToken, new CookieOptions
+            {
+                HttpOnly = true,
+                Secure = true,
+                SameSite = SameSiteMode.Strict,
+                Expires = DateTimeOffset.UtcNow.AddDays(7)
+            });
+
+            return Results.Ok(new { status = 200, title = "SSO Login successful" });
+        });
+
+        group.MapGet("/active-user-exists", async ([FromQuery] string email, UserManager<ApplicationUser> userManager) =>
+        {
+            if (string.IsNullOrWhiteSpace(email))
+            {
+                return Results.Ok(new { exists = false, isActive = false });
+            }
+
+            var user = await userManager.FindByEmailAsync(email);
+
+            if (user == null)
+            {
+                return Results.Ok(new { exists = false, isActive = false });
+            }
+
+            return Results.Ok(new { exists = true, isActive = user.IsActive });
+        });
+
+        group.MapPost("/signin", async ([FromBody] LoginRequest request, IMediator mediator, HttpContext context, UserManager<ApplicationUser> userManager) =>
+        {
+            var command = new LoginCommand(request);
+            var response = await mediator.Send(command);
+
+            if (response.Succeeded)
+            {
+                var user = await userManager.FindByEmailAsync(request.Email);
+
+                if (user != null)
+                {
+                    context.Response.Cookies.Append("X-Auth-Token", response.Token!, new CookieOptions
+                    {
+                        HttpOnly = true,
+                        Secure = true,
+                        SameSite = SameSiteMode.Strict,
+                        Expires = DateTimeOffset.UtcNow.AddDays(1)
+                    });
+
+                    context.Response.Cookies.Append("X-Refresh-Token", user.RefreshToken!, new CookieOptions
+                    {
+                        HttpOnly = true,
+                        Secure = true,
+                        SameSite = SameSiteMode.Strict,
+                        Expires = DateTimeOffset.UtcNow.AddDays(7)
+                    });
+                }
+
+                return Results.Ok(new { status = 200, title = response.Message });
+            }
+            return Results.Json(new { status = 401, title = response.Message }, statusCode: 401);
+        });
+
+
+
+        group.MapPost("/refresh-token", async (HttpContext context) =>
+        {
+            var userManager = context.RequestServices.GetRequiredService<UserManager<ApplicationUser>>();
+            var jwtSettings = context.RequestServices.GetRequiredService<IOptions<JwtSettingsModel>>().Value;
+
+            var refreshToken = context.Request.Headers["X-Refresh-Token"].ToString();
+
+            if (string.IsNullOrEmpty(refreshToken)) return Results.Unauthorized();
+
+            var user = await userManager.Users.FirstOrDefaultAsync(u => u.RefreshToken == refreshToken);
+
+            if (user == null || !user.IsActive) return Results.Unauthorized();
+
+            var newToken = JwtService.GenerateNewJwt(user, jwtSettings);
+
+            context.Response.Cookies.Append("X-Auth-Token", newToken, new CookieOptions
+            {
+                HttpOnly = true,
+                Secure = true,
+                SameSite = SameSiteMode.Strict,
+                Expires = DateTimeOffset.UtcNow.AddDays(1)
+            });
+
+            return Results.Ok(new LoginResponse { Succeeded = true, Token = newToken });
+        });
+
+        group.MapPost("/signup", async ([FromBody] CreateUserRequest request, IMediator mediator) =>
+        {
+            try
+            {
+                var command = new CreateUserCommand(request);
+                var response = await mediator.Send(command);
+                return Results.Ok(response);
+            }
+            catch (Exception ex)
+            {
+                return Results.BadRequest(new { errors = new[] { ex.Message } });
+            }
+        });
+
+        group.MapPost("/signout", async (
+            SignInManager<ApplicationUser> signInManager,
+            UserManager<ApplicationUser> userManager,
+            HttpContext context) =>
+        {
+            var userId = context.User.FindFirstValue(ClaimTypes.NameIdentifier);
+
+            if (!string.IsNullOrEmpty(userId))
+            {
+                var user = await userManager.FindByIdAsync(userId);
+                if (user != null)
+                {
+                    user.RefreshToken = null;
+                    await userManager.UpdateAsync(user);
+                }
+            }
+
+            await signInManager.SignOutAsync();
+
+            context.Response.Cookies.Delete("X-Auth-Token");
+            context.Response.Cookies.Delete("X-Refresh-Token");
+
+            return Results.Ok(new { status = 200, title = "Successfully signed out" });
+
+        });
+
+        group.MapPost("/forgot-password", async ([FromBody] ForgotPasswordRequest request, IMediator mediator) =>
+        {
+            try
+            {
+                var command = new ForgotPasswordCommand(request);
+                var response = await mediator.Send(command);
+                return Results.Ok(response);
+            }
+            catch (Exception ex)
+            {
+                return Results.BadRequest(new { errors = new[] { ex.Message } });
+            }
+        });
+
+        group.MapPost("/logout", async (SignInManager<ApplicationUser> signInManager) =>
+        {
+            await signInManager.SignOutAsync();
+            return Results.Ok(new { title = "Success user logout" });
+        }).RequireAuthorization();
+
+        group.MapPost("/reset-password", async ([FromBody] ResetPasswordRequest request, IMediator mediator) =>
+        {
+            try
+            {
+                var command = new ResetPasswordCommand(request);
+                var response = await mediator.Send(command);
+                return Results.Ok(response);
+            }
+            catch (Exception ex)
+            {
+                return Results.BadRequest(new { errors = new[] { ex.Message } });
+            }
+        });
+
+        return group;
+    }
+}
@@ -0,0 +1,538 @@
+@using Indotalent.Shared.Consts
+@inherits LayoutComponentBase
+@inject NavigationManager Navigation
+
+<MudThemeProvider Theme="_theme" />
+<MudDialogProvider />
+<MudSnackbarProvider />
+<MudPopoverProvider />
+
+<style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    .auth-split-container {
+        display: flex;
+        min-height: 100vh;
+        width: 100%;
+    }
+
+    /* ===== LEFT PANEL ===== */
+    .auth-left-panel {
+        display: none;
+        position: relative;
+        overflow: hidden;
+        background: linear-gradient(135deg, #0C4A6E 0%, #0284C7 50%, #38BDF8 100%);
+    }
+
+    .auth-left-panel::before {
+        content: '';
+        position: absolute;
+        top: -120px;
+        right: -120px;
+        width: 400px;
+        height: 400px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.06);
+        pointer-events: none;
+    }
+
+    .auth-left-panel::after {
+        content: '';
+        position: absolute;
+        bottom: -80px;
+        left: -80px;
+        width: 280px;
+        height: 280px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.04);
+        pointer-events: none;
+    }
+
+    .auth-left-content {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        max-width: 28rem;
+        padding: 3rem;
+        height: 100%;
+    }
+
+    .auth-brand-row {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 2rem;
+    }
+
+    .auth-brand-icon {
+        width: 3.5rem;
+        height: 3.5rem;
+        background: rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(8px);
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+
+    .auth-brand-name {
+        font-size: 1.5rem;
+        font-weight: 800;
+        color: #ffffff;
+        line-height: 1.2;
+    }
+
+    .auth-brand-sub {
+        font-size: 0.8125rem;
+        color: rgba(255, 255, 255, 0.7);
+        font-weight: 400;
+    }
+
+    .auth-welcome-title {
+        font-size: 1.875rem;
+        font-weight: 800;
+        color: #ffffff;
+        line-height: 1.3;
+        margin-bottom: 1rem;
+    }
+
+    .auth-welcome-desc {
+        font-size: 0.9375rem;
+        color: rgba(255, 255, 255, 0.8);
+        line-height: 1.6;
+        margin-bottom: 2rem;
+    }
+
+    .auth-feature-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-bottom: 2.5rem;
+    }
+
+    .auth-feature-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+    }
+
+    .auth-feature-check {
+        width: 1.25rem;
+        height: 1.25rem;
+        border-radius: 0.25rem;
+        background: rgba(255, 255, 255, 0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        margin-top: 0.125rem;
+    }
+
+    .auth-feature-check svg {
+        width: 0.75rem;
+        height: 0.75rem;
+        color: #ffffff;
+    }
+
+    .auth-feature-title {
+        font-size: 0.875rem;
+        color: #ffffff;
+        font-weight: 600;
+    }
+
+    .auth-feature-desc {
+        font-size: 0.75rem;
+        color: rgba(255, 255, 255, 0.7);
+        margin-top: 0.125rem;
+    }
+
+    .auth-support-card {
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(8px);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 0.75rem;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .auth-support-icon {
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .auth-support-title {
+        font-size: 0.875rem;
+        color: #ffffff;
+        font-weight: 600;
+    }
+
+    .auth-support-desc {
+        font-size: 0.75rem;
+        color: rgba(255, 255, 255, 0.7);
+    }
+
+    /* ===== RIGHT PANEL ===== */
+    .auth-right-panel {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 1.5rem;
+        background: #ffffff;
+    }
+
+    .auth-form-wrapper {
+        width: 100%;
+        max-width: 28rem;
+    }
+
+    .auth-card {
+        border-radius: 1rem !important;
+        border: 1px solid #E2E8F0 !important;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
+        overflow: hidden;
+    }
+
+    .auth-card-footer {
+        text-align: center;
+        padding: 0.5rem 0;
+        margin-top: 1.5rem;
+        font-size: 0.75rem;
+        color: #94A3B8;
+        font-weight: 500;
+        letter-spacing: 0.5px;
+    }
+
+    /* ===== MOBILE BRAND STRIP ===== */
+    .auth-mobile-brand {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 1rem;
+        background: linear-gradient(135deg, #0C4A6E 0%, #0284C7 100%);
+        margin-bottom: 1.5rem;
+        border-radius: 0.75rem;
+    }
+
+    .auth-mobile-brand-icon {
+        width: 2.5rem;
+        height: 2.5rem;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .auth-mobile-brand-name {
+        font-size: 1.25rem;
+        font-weight: 800;
+        color: #ffffff;
+    }
+
+    /* ===== RESPONSIVE ===== */
+    @@media (min-width: 1024px) {
+        .auth-left-panel {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 50%;
+        }
+
+        .auth-right-panel {
+            width: 50%;
+            padding: 2rem 4rem;
+        }
+
+        .auth-mobile-brand {
+            display: none;
+        }
+    }
+
+    @@media (min-width: 1280px) {
+        .auth-right-panel {
+            padding: 2rem 6rem;
+        }
+    }
+
+    /* ===== FORM STYLES (shared across pages) ===== */
+    .page-header {
+        text-align: center;
+        margin-bottom: 1.5rem;
+        width: 100%;
+    }
+
+    .page-header h2 {
+        font-size: 1.5rem;
+        font-weight: 800;
+        color: #0F172A;
+        margin-bottom: 0.25rem;
+    }
+
+    .page-header p {
+        font-size: 0.875rem;
+        color: #64748B;
+        margin: 0;
+    }
+
+    .form-label {
+        font-size: 0.8125rem;
+        font-weight: 600;
+        color: #475569;
+        margin-bottom: 0.375rem;
+        margin-left: 0.25rem;
+    }
+
+    .form-label-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.375rem;
+    }
+
+    .forgot-link {
+        font-size: 0.75rem;
+        color: #94A3B8;
+        text-decoration: none;
+        cursor: pointer;
+        font-weight: 500;
+        transition: color 0.2s;
+    }
+
+    .forgot-link:hover {
+        color: #0284C7;
+        text-decoration: underline;
+    }
+
+    .remember-row {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .divider-or {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin: 1.25rem 0;
+    }
+
+    .divider-or::before,
+    .divider-or::after {
+        content: '';
+        flex: 1;
+        height: 1px;
+        background: #E2E8F0;
+    }
+
+    .divider-or span {
+        font-size: 0.75rem;
+        color: #94A3B8;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .auth-link {
+        color: #0284C7;
+        font-size: 0.875rem;
+        font-weight: 600;
+        text-decoration: none;
+        cursor: pointer;
+        transition: color 0.2s;
+    }
+
+    .auth-link:hover {
+        color: #0369A1;
+        text-decoration: underline;
+    }
+
+    .btn-google {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        width: 100%;
+        padding: 0.625rem 1rem;
+        background: #ffffff;
+        color: #475569;
+        font-size: 0.875rem;
+        font-weight: 500;
+        border-radius: 0.5rem;
+        border: 1.5px solid #E2E8F0;
+        transition: all 0.2s;
+        cursor: pointer;
+        font-family: "Poppins", sans-serif;
+    }
+
+    .btn-google:hover {
+        border-color: #CBD5E1;
+        background: #F8FAFC;
+    }
+
+    /* ===== LOGOUT / CONFIRM PAGES ===== */
+    .logout-container,
+    .confirm-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        width: 100%;
+    }
+
+    .logout-icon-wrapper,
+    .confirm-icon-wrapper {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        margin-bottom: 1.5rem;
+    }
+
+    .logout-icon-circle,
+    .confirm-icon-circle {
+        background: #F0F9FF;
+        border-radius: 50%;
+        padding: 1.25rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .logout-title,
+    .confirm-title {
+        font-size: 1.5rem;
+        font-weight: 800;
+        color: #0F172A;
+        margin-bottom: 0.5rem;
+        width: 100%;
+    }
+
+    .logout-desc,
+    .confirm-desc {
+        font-size: 0.875rem;
+        color: #64748B;
+        margin-bottom: 1.5rem;
+        width: 100%;
+    }
+
+    [x-cloak] { display: none !important; }
+</style>
+
+<div class="auth-split-container">
+    <!-- LEFT PANEL - Branding (hidden on mobile) -->
+    <div class="auth-left-panel">
+        <div class="auth-left-content">
+            <div class="auth-brand-row">
+                <div class="auth-brand-icon" @onclick="NavigateToHome">
+                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect width="32" height="32" rx="7" fill="#0284C7"/>
+                        <path d="M16 9v14M9 16h14" stroke="white" stroke-width="3" stroke-linecap="round"/>
+                    </svg>
+                </div>
+                <div>
+                    <div class="auth-brand-name">@GlobalConsts.AppName</div>
+                    <div class="auth-brand-sub">Clinic Management System</div>
+                </div>
+            </div>
+
+            <h2 class="auth-welcome-title">Welcome Back to<br/>Your Clinic Hub</h2>
+            <p class="auth-welcome-desc">Sign in to access your dashboard, manage patients, schedule appointments, and collaborate with your medical team.</p>
+
+            <div class="auth-feature-list">
+                <div class="auth-feature-item">
+                    <div class="auth-feature-check">
+                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <div class="auth-feature-title">Sales & Purchase</div>
+                        <div class="auth-feature-desc">Orders, invoices, payments & full reporting</div>
+                    </div>
+                </div>
+                <div class="auth-feature-item">
+                    <div class="auth-feature-check">
+                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <div class="auth-feature-title">Patients & Vendors</div>
+                        <div class="auth-feature-desc">Groups, categories, contacts & history</div>
+                    </div>
+                </div>
+                <div class="auth-feature-item">
+                    <div class="auth-feature-check">
+                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+                    </div>
+                    <div>
+                        <div class="auth-feature-title">Inventory & Medical Records</div>
+                        <div class="auth-feature-desc">Products, warehouse, EMR with SOAP notes</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="auth-support-card">
+                <div class="auth-support-icon">
+                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+                </div>
+                <div>
+                    <div class="auth-support-title">Production Ready</div>
+                    <div class="auth-support-desc">Built, tested & verified — deploy out of the box</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- RIGHT PANEL - Form Area -->
+    <div class="auth-right-panel">
+        <div class="auth-form-wrapper">
+            <!-- Mobile Brand Strip (visible only on mobile) -->
+            <div class="auth-mobile-brand">
+                <div class="auth-mobile-brand-icon">
+                    <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect width="32" height="32" rx="7" fill="#0284C7"/>
+                        <path d="M16 9v14M9 16h14" stroke="white" stroke-width="3" stroke-linecap="round"/>
+                    </svg>
+                </div>
+                <span class="auth-mobile-brand-name">@GlobalConsts.AppName</span>
+            </div>
+
+            <MudCard Elevation="0" Class="auth-card pa-4">
+                <MudCardContent Class="pa-6">
+                    @Body
+                </MudCardContent>
+            </MudCard>
+
+            <div class="auth-card-footer">
+                &copy; @DateTime.Now.Year @GlobalConsts.AppInitial. ALL RIGHTS RESERVED.
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    private MudTheme _theme = new()
+    {
+        PaletteLight = new PaletteLight()
+        {
+            Primary = "#0284C7",
+            Secondary = "#0EA5E9",
+            AppbarBackground = "#0284C7"
+        }
+    };
+
+    private void NavigateToHome()
+    {
+        Navigation.NavigateTo("/", forceLoad: true);
+    }
+}
@@ -0,0 +1,70 @@
+@page "/account/confirm-email"
+@layout AuthenticationLayout
+@using Indotalent.Shared.Consts
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.WebUtilities
+@using System.Text
+@using Indotalent.Data.Entities
+@inject UserManager<ApplicationUser> UserManager
+@inject NavigationManager Navigation
+@inject ISnackbar Snackbar
+
+<PageTitle>Confirming Email - @GlobalConsts.AppInitial</PageTitle>
+
+<div class="confirm-container">
+    <div class="confirm-icon-wrapper">
+        <div class="confirm-icon-circle">
+            <MudIcon Icon="@Icons.Material.Filled.Email"
+                     Style="font-size:48px; color:#0284C7;" />
+        </div>
+    </div>
+
+    <h2 class="confirm-title">Verifying Your Account</h2>
+    <p class="confirm-desc">Please wait while we validate your email address...</p>
+
+    <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
+</div>
+
+@code {
+    [SupplyParameterFromQuery] public string? userId { get; set; }
+    [SupplyParameterFromQuery] public string? code { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (string.IsNullOrEmpty(userId) || string.IsNullOrEmpty(code))
+        {
+            Snackbar.Add("Invalid or expired confirmation link.", Severity.Error);
+            Navigation.NavigateTo("/account/login");
+            return;
+        }
+
+        var user = await UserManager.FindByIdAsync(userId);
+        if (user == null)
+        {
+            Snackbar.Add("User record not found.", Severity.Error);
+            Navigation.NavigateTo("/account/login");
+            return;
+        }
+
+        try
+        {
+            var decodedCode = Encoding.UTF8.GetString(WebEncoders.Base64UrlDecode(code));
+            var result = await UserManager.ConfirmEmailAsync(user, decodedCode);
+            await Task.Delay(500);
+            if (result.Succeeded)
+            {
+                Snackbar.Add("Email verified successfully! You can now sign in.", Severity.Success);
+            }
+            else
+            {
+                Snackbar.Add("Verification failed. The link may have expired.", Severity.Error);
+            }
+        }
+        catch
+        {
+            Snackbar.Add("An error occurred during verification.", Severity.Error);
+        }
+
+        Navigation.NavigateTo("/account/login");
+    }
+}
@@ -0,0 +1,120 @@
+@page "/account/forgot-password"
+@layout AuthenticationLayout
+@using System.ComponentModel.DataAnnotations
+@using Indotalent.Shared.Consts
+@using Microsoft.JSInterop
+@inject IJSRuntime JSRuntime
+@inject ISnackbar Snackbar
+@inject NavigationManager Navigation
+
+<PageTitle>Forgot Password - @GlobalConsts.AppInitial</PageTitle>
+
+<div class="page-header">
+    <h2>Forgot Password?</h2>
+    <p>Enter your email address below and we'll send you a link to reset your password.</p>
+</div>
+
+<MudForm @ref="form" @bind-IsValid="@success">
+
+    <div class="form-label">Email Address</div>
+    <MudTextField T="string"
+                  @bind-Value="model.Email"
+                  Variant="Variant.Outlined"
+                  Placeholder="name@example.com"
+                  Margin="Margin.Dense"
+                  Adornment="Adornment.Start"
+                  AdornmentIcon="@Icons.Material.Filled.Email"
+                  Required="true"
+                  Validation="@(new EmailAddressAttribute() { ErrorMessage = "Invalid email address format" })"
+                  For="@(() => model.Email)"
+                  Class="mb-6" />
+
+    <MudButton Variant="Variant.Filled"
+               Color="Color.Primary"
+               Size="Size.Large"
+               FullWidth="true"
+               Disabled="!success || isProcessing"
+               OnClick="HandleForgotPassword"
+               Style="text-transform:none; border-radius:8px; height:48px; font-weight:600;">
+        @if (isProcessing)
+        {
+            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+            <span class="ms-2">Sending link...</span>
+        }
+        else
+        {
+            <span>Send Reset Link</span>
+        }
+    </MudButton>
+</MudForm>
+
+<div class="text-center mt-6">
+    <span style="font-size:0.875rem; color:#64748B;">Remember your password?</span>
+    <a class="auth-link" href="/account/login" style="margin-left:0.25rem;">Back to Sign In</a>
+</div>
+
+@code {
+    private MudForm form = default!;
+    private bool success;
+    private bool isProcessing;
+    private ForgotPasswordModel model = new();
+
+    private class ForgotPasswordModel
+    {
+        public string Email { get; set; } = "";
+    }
+
+    private async Task HandleForgotPassword()
+    {
+        await form.Validate();
+        if (!success) return;
+
+        isProcessing = true;
+        StateHasChanged();
+
+        var result = await JSRuntime.InvokeAsync<ApiResponse>("apiForgotPassword", model.Email);
+
+        if (result.Status == 200)
+        {
+            Snackbar.Add("If your email is registered, a reset link has been sent.", Severity.Success);
+            await Task.Delay(500);
+            Navigation.NavigateTo("/account/login");
+        }
+        else
+        {
+            Snackbar.Add(result.Title ?? "Failed to send reset link", Severity.Error);
+        }
+
+        isProcessing = false;
+        StateHasChanged();
+    }
+
+    private class ApiResponse
+    {
+        public int Status { get; set; }
+        public string? Title { get; set; }
+    }
+}
+
+<script>
+    window.apiForgotPassword = async (email) => {
+        try {
+            const response = await fetch('/api/account/forgot-password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email })
+            });
+
+            if (response.ok) {
+                return { status: 200, title: 'Success' };
+            } else {
+                const data = await response.json();
+                let msg = 'Error processing request';
+                if (data.errors && data.errors.length > 0) msg = data.errors[0];
+                return { status: response.status, title: msg };
+            }
+        } catch (error) {
+            return { status: 500, title: 'Network error' };
+        }
+    };
+</script>
@@ -0,0 +1,70 @@
+using Indotalent.Data.Entities;
+using MediatR;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.WebUtilities;
+using System.Text;
+
+namespace Indotalent.Features.Account.ForgotPassword.Cqrs;
+
+public class ForgotPasswordRequest
+{
+    public string Email { get; set; } = string.Empty;
+}
+
+public class ForgotPasswordResponse
+{
+    public string Message { get; set; } = string.Empty;
+}
+
+public record ForgotPasswordCommand(ForgotPasswordRequest Data) : IRequest<ForgotPasswordResponse>;
+
+public class ForgotPasswordHandler : IRequestHandler<ForgotPasswordCommand, ForgotPasswordResponse>
+{
+    private readonly UserManager<ApplicationUser> _userManager;
+    private readonly IEmailSender<ApplicationUser> _emailSender;
+    private readonly IHttpContextAccessor _httpContextAccessor;
+
+    public ForgotPasswordHandler(
+        UserManager<ApplicationUser> userManager,
+        IEmailSender<ApplicationUser> emailSender,
+        IHttpContextAccessor httpContextAccessor)
+    {
+        _userManager = userManager;
+        _emailSender = emailSender;
+        _httpContextAccessor = httpContextAccessor;
+    }
+
+    public async Task<ForgotPasswordResponse> Handle(ForgotPasswordCommand request, CancellationToken cancellationToken)
+    {
+        var user = await _userManager.FindByEmailAsync(request.Data.Email);
+
+        if (user == null || !(await _userManager.IsEmailConfirmedAsync(user)))
+        {
+            return new ForgotPasswordResponse { Message = "If your email is registered, you will receive a reset link." };
+        }
+
+        var code = await _userManager.GeneratePasswordResetTokenAsync(user);
+        code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
+
+        var requestHttp = _httpContextAccessor.HttpContext?.Request;
+        var scheme = requestHttp?.Scheme ?? "https";
+        var host = requestHttp?.Host.Value ?? "localhost:8080";
+
+        var callbackUrl = $"{scheme}://{host}/account/reset-password?userId={user.Id}&code={code}";
+
+        var message = $@"
+            <div style=""font-family: Arial, sans-serif;"">
+                <h3>Password Reset Request</h3>
+                <p>Hello, {user.FullName}!</p>
+                <p>We received a request to reset your password. Click the link below to proceed:</p>
+                <p><a href=""{callbackUrl}"" style=""color: #2196F3; font-weight: bold;"">Reset Password</a></p>
+                <br/>
+                <p style=""font-size: 0.8em; color: #666;"">If you didn't request this, you can safely ignore this email.</p>
+                <p style=""font-size: 0.8em; color: #666;"">{callbackUrl}</p>
+            </div>";
+
+        await _emailSender.SendPasswordResetLinkAsync(user, user.Email!, message);
+
+        return new ForgotPasswordResponse { Message = "Reset link has been sent." };
+    }
+}
@@ -0,0 +1,266 @@
+@page "/account/login"
+@layout AuthenticationLayout
+@using Indotalent.Shared.Consts
+@using Microsoft.JSInterop
+@using Indotalent.Infrastructure.Authentication.Identity
+@using Microsoft.Extensions.Options
+@inject IJSRuntime JSRuntime
+@inject IOptions<IdentitySettingsModel> IdentityOptions
+@inject NavigationManager Navigation
+@inject ISnackbar Snackbar
+
+<PageTitle>Sign In - @GlobalConsts.AppInitial</PageTitle>
+
+<div class="page-header">
+    <h2>Sign In</h2>
+    <p>Enter your credentials to access your account</p>
+</div>
+
+<MudForm @ref="form" @bind-IsValid="@success" Validation="@(new Func<EditContext, Task<bool>>(ValidateForm))" Class="w-100">
+
+    <div class="form-label">Email Address</div>
+    <MudTextField T="string"
+                  @bind-Value="model.Email"
+                  Variant="Variant.Outlined"
+                  Placeholder="you@clinic.com"
+                  Margin="Margin.Dense"
+                  Adornment="Adornment.Start"
+                  AdornmentIcon="@Icons.Material.Filled.Email"
+                  Required="true"
+                  For="@(() => model.Email)"
+                  Class="mb-4" />
+
+    <div class="form-label-row">
+        <span class="form-label">Password</span>
+        <a class="forgot-link" href="/account/forgot-password">Forgot password?</a>
+    </div>
+    <MudTextField T="string"
+                  @bind-Value="model.Password"
+                  Variant="Variant.Outlined"
+                  Placeholder="Enter your password"
+                  Margin="Margin.Dense"
+                  Adornment="Adornment.Start"
+                  AdornmentIcon="@Icons.Material.Filled.Lock"
+                  InputType="@(showPassword ? InputType.Text : InputType.Password)"
+                  AdornmentEndIcon="@(showPassword? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
+                  OnAdornmentEndClick="() => showPassword = !showPassword"
+                  Required="true"
+                  For="@(() => model.Password)"
+                  Class="mb-4" />
+
+    <div class="remember-row">
+        <MudCheckBox T="bool"
+                     @bind-Value="rememberMe"
+                     Label="Remember me"
+                     Color="Color.Primary"
+                     Dense="true" />
+    </div>
+
+    <MudButton Variant="Variant.Filled"
+               Color="Color.Primary"
+               Size="Size.Large"
+               FullWidth="true"
+               Disabled="!success || isProcessing"
+               OnClick="HandleLogin"
+               Style="text-transform:none; border-radius:8px; height:48px; font-weight:600;">
+        @if (isProcessing)
+        {
+            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+            <span class="ms-2">Signing in...</span>
+        }
+        else
+        {
+            <span>Sign In</span>
+        }
+    </MudButton>
+
+    @if (IdentityOptions.Value.SsoFirebase.IsUsed)
+    {
+        <div class="divider-or"><span>Or continue with</span></div>
+
+        <MudButton Variant="Variant.Outlined"
+                   FullWidth="true"
+                   Size="Size.Large"
+                   Disabled="isProcessing"
+                   OnClick="HandleFirebaseGoogleLogin"
+                   StartIcon="@Icons.Custom.Brands.Google"
+                   Style="text-transform:none; border-radius:8px; background-color:white; height:40px; border:1.5px solid #E2E8F0; font-weight:500;">
+            Sign in with Google
+        </MudButton>
+    }
+</MudForm>
+
+<div class="text-center mt-6">
+    <span style="font-size:0.875rem; color:#64748B;">Don't have an account?</span>
+    <a class="auth-link" href="/account/register" style="margin-left:0.25rem;">Create one</a>
+</div>
+
+@code {
+    private MudForm form = default!;
+    private bool success;
+    private bool isProcessing;
+    private bool showPassword;
+    private bool rememberMe;
+    private LoginModel model = new();
+
+    private async Task<bool> ValidateForm(EditContext context) => await Task.FromResult(true);
+
+    private async Task HandleLogin()
+    {
+        await form.Validate();
+        if (!success) return;
+        isProcessing = true;
+        StateHasChanged();
+
+        var result = await JSRuntime.InvokeAsync<ApiJSRuntimeResponse>("apiAccountSignIn", model.Email, model.Password, rememberMe);
+        ProcessLoginResult(result);
+    }
+
+    private async Task HandleFirebaseGoogleLogin()
+    {
+        isProcessing = true;
+        StateHasChanged();
+
+        var firebaseUser = await JSRuntime.InvokeAsync<FirebaseUserResponse>("signInWithGoogle");
+
+        if (firebaseUser == null || string.IsNullOrEmpty(firebaseUser.Email))
+        {
+            Snackbar.Add("Google Sign-In failed or cancelled.", Severity.Error);
+            isProcessing = false;
+            return;
+        }
+
+        var checkResult = await JSRuntime.InvokeAsync<ActiveCheckResponse>("apiCheckActiveUser", firebaseUser.Email);
+        bool openForPublic = IdentityOptions.Value.SsoFirebase.OpenForPublic;
+
+        if (checkResult.Exists)
+        {
+            if (checkResult.IsActive)
+            {
+                await ExecuteSsoSignIn(firebaseUser.Email);
+            }
+            else
+            {
+                Snackbar.Add("Account is registered but not active.", Severity.Warning);
+                isProcessing = false;
+            }
+        }
+        else
+        {
+            var registerResult = await JSRuntime.InvokeAsync<ApiJSRuntimeResponse>(
+                "apiAccountSignUpSso",
+                firebaseUser.Email,
+                firebaseUser.Email,
+                openForPublic
+            );
+
+            if (registerResult.Status == 200)
+            {
+                if (openForPublic)
+                {
+                    await ExecuteSsoSignIn(firebaseUser.Email);
+                }
+                else
+                {
+                    Snackbar.Add("Registration successful. Please wait for admin approval.", Severity.Info);
+                    isProcessing = false;
+                }
+            }
+            else
+            {
+                Snackbar.Add("Failed to auto-register account.", Severity.Error);
+                isProcessing = false;
+            }
+        }
+    }
+
+    private async Task ExecuteSsoSignIn(string email)
+    {
+        var result = await JSRuntime.InvokeAsync<ApiJSRuntimeResponse>("apiAccountSsoSignIn", email);
+        ProcessLoginResult(result);
+    }
+
+    private void ProcessLoginResult(ApiJSRuntimeResponse result)
+    {
+        if (result.Status == 200)
+        {
+            Snackbar.Add(result.Title ?? "Login successful!", Severity.Success);
+            Task.Run(async () =>
+            {
+                await Task.Delay(500);
+                Navigation.NavigateTo("/home", forceLoad: true);
+            });
+        }
+        else
+        {
+            Snackbar.Add(result.Title ?? "Sign in failed.", Severity.Error);
+            isProcessing = false;
+        }
+        StateHasChanged();
+    }
+
+    private class ApiJSRuntimeResponse { public int? Status { get; set; } public string? Title { get; set; } public string? Message { get; set; } }
+    private class FirebaseUserResponse { public string? Email { get; set; } }
+    private class ActiveCheckResponse { public bool Exists { get; set; } public bool IsActive { get; set; } }
+    private class LoginModel { public string Email { get; set; } = ""; public string Password { get; set; } = ""; }
+}
+
+<script>
+    window.apiAccountSignIn = async (email, password, rememberMe) => {
+        try {
+            const response = await fetch('/api/account/signin', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email, password, rememberMe }),
+                credentials: 'include'
+            });
+            const result = await response.json();
+            return { status: response.status, title: result.title };
+        } catch (error) {
+            return { status: 500, title: 'Network error' };
+        }
+    };
+
+    window.apiCheckActiveUser = async (email) => {
+        try {
+            const response = await fetch(`/api/account/active-user-exists?email=${encodeURIComponent(email)}`);
+            return await response.json();
+        } catch (error) {
+            return { exists: false, isActive: false };
+        }
+    };
+
+    window.apiAccountSignUpSso = async (email, fullName, isOpenForPublic) => {
+        try {
+            const response = await fetch('/api/account/signup', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    email: email,
+                    fullName: fullName,
+                    password: 'SSO_AUTO_GENERATED_PASSWORD_123!',
+                    isActive: isOpenForPublic,
+                    emailConfirmed: isOpenForPublic
+                })
+            });
+            const result = await response.json();
+            return { status: response.status, message: result.message };
+        } catch (error) {
+            return { status: 500 };
+        }
+    };
+
+    window.apiAccountSsoSignIn = async (email) => {
+        try {
+            const response = await fetch(`/api/account/signin-sso?email=${encodeURIComponent(email)}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include'
+            });
+            const result = await response.json();
+            return { status: response.status, title: result.title };
+        } catch (error) {
+            return { status: 500, title: 'SSO Network error' };
+        }
+    };
+</script>
@@ -0,0 +1,74 @@
+using Indotalent.ConfigFrontEnd.Service;
+using Indotalent.Data.Entities;
+using Indotalent.Infrastructure.Authentication.Identity;
+using MediatR;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.Extensions.Options;
+
+namespace Indotalent.Features.Account.Login.Cqrs;
+
+public class LoginRequest
+{
+    public string Email { get; set; } = string.Empty;
+    public string Password { get; set; } = string.Empty;
+    public bool RememberMe { get; set; }
+}
+
+public class LoginResponse
+{
+    public bool Succeeded { get; set; }
+    public string Message { get; set; } = string.Empty;
+    public bool IsNotAllowed { get; set; }
+    public string? Token { get; set; }
+    public string? RefreshToken { get; set; }
+}
+
+public record LoginCommand(LoginRequest Data) : IRequest<LoginResponse>;
+
+public class LoginHandler : IRequestHandler<LoginCommand, LoginResponse>
+{
+    private readonly SignInManager<ApplicationUser> _signInManager;
+    private readonly UserManager<ApplicationUser> _userManager;
+    private readonly JwtSettingsModel _jwtSettings;
+
+    public LoginHandler(
+        SignInManager<ApplicationUser> signInManager,
+        UserManager<ApplicationUser> userManager,
+        IOptions<JwtSettingsModel> jwtSettings)
+    {
+        _signInManager = signInManager;
+        _userManager = userManager;
+        _jwtSettings = jwtSettings.Value;
+    }
+
+    public async Task<LoginResponse> Handle(LoginCommand request, CancellationToken cancellationToken)
+    {
+        var user = await _userManager.FindByEmailAsync(request.Data.Email);
+        if (user == null) return new LoginResponse { Succeeded = false, Message = "Invalid credentials" };
+
+        var result = await _signInManager.PasswordSignInAsync(user, request.Data.Password, request.Data.RememberMe, false);
+
+        if (result.Succeeded)
+        {
+            var token = JwtService.GenerateNewJwt(user, _jwtSettings);
+
+            var refreshToken = Guid.NewGuid().ToString().Replace("-", "");
+
+            user.RefreshToken = refreshToken;
+            user.LastLoginAt = DateTime.Now;
+            await _userManager.UpdateAsync(user);
+
+            return new LoginResponse
+            {
+                Succeeded = true,
+                Message = "Login successful",
+                Token = token,
+                RefreshToken = refreshToken
+            };
+        }
+
+        return new LoginResponse { Succeeded = false, Message = "Invalid credentials" };
+    }
+
+
+}
@@ -0,0 +1,101 @@
+@page "/account/logout"
+@layout AuthenticationLayout
+
+@using Indotalent.Shared.Consts
+@using Microsoft.JSInterop
+@inject IJSRuntime JSRuntime
+@inject NavigationManager Navigation
+@inject ISnackbar Snackbar
+
+<PageTitle>Sign Out - @GlobalConsts.AppInitial</PageTitle>
+
+<div class="logout-container">
+    <div class="logout-icon-wrapper">
+        <div class="logout-icon-circle">
+            <MudIcon Icon="@Icons.Material.Filled.ExitToApp"
+                     Style="font-size:48px; color:#0284C7;" />
+        </div>
+    </div>
+
+    <h2 class="logout-title">Sign Out</h2>
+    <p class="logout-desc">Are you sure you want to sign out of your account?</p>
+
+    <MudButton Variant="Variant.Filled"
+               Size="Size.Large"
+               FullWidth="true"
+               Disabled="@isLoggingOut"
+               OnClick="Logout"
+               Style="text-transform:none; border-radius:8px; background-color:#0284C7; color:white; height:48px; font-weight:700;">
+        @if (isLoggingOut)
+        {
+            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+            <span class="ms-2">Processing...</span>
+        }
+        else
+        {
+            <span>Sign Out</span>
+        }
+    </MudButton>
+
+    <MudButton Variant="Variant.Text"
+               Class="mt-4"
+               FullWidth="true"
+               Href="/"
+               Disabled="@isLoggingOut"
+               Style="text-transform:none; color:#94A3B8; font-weight:600;">
+        Cancel
+    </MudButton>
+</div>
+
+@code {
+    private bool isLoggingOut;
+
+    private async Task Logout()
+    {
+        isLoggingOut = true;
+        StateHasChanged();
+
+        var result = await JSRuntime.InvokeAsync<ApiJSRuntimeResponse>("apiAccountLogout");
+
+        if (result.Status == 200)
+        {
+            Snackbar.Add("Successfully signed out!", Severity.Success);
+            await Task.Delay(500);
+            Navigation.NavigateTo("/", forceLoad: true);
+        }
+        else
+        {
+            Snackbar.Add(result.Title ?? "Failed to logout.", Severity.Error);
+            await Task.Delay(500);
+        }
+
+        isLoggingOut = false;
+        StateHasChanged();
+    }
+
+    private class ApiJSRuntimeResponse
+    {
+        public int? Status { get; set; }
+        public string? Title { get; set; }
+    }
+}
+
+<script>
+    window.apiAccountLogout = async () => {
+        try {
+            const response = await fetch('/api/account/signout', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include'
+            });
+            if (!response.ok) {
+                throw new Error('Unknown error occurred');
+            }
+            return { status: 200, title: 'Success user logout' };
+        } catch (error) {
+            return { status: 500, title: 'Server / Network error' };
+        }
+    };
+</script>
@@ -0,0 +1,181 @@
+@page "/account/register"
+@layout AuthenticationLayout
+
+@using Indotalent.Shared.Consts
+@using Microsoft.JSInterop
+@inject IJSRuntime JSRuntime
+@inject ISnackbar Snackbar
+@inject NavigationManager Navigation
+@inject IConfiguration Configuration
+
+<PageTitle>Sign Up - @GlobalConsts.AppInitial</PageTitle>
+
+<div class="page-header">
+    <h2>Sign Up</h2>
+    <p>Please register your account</p>
+</div>
+
+<MudForm @ref="form" @bind-IsValid="@success" Validation="@(new Func<EditContext, Task<bool>>(ValidateForm))">
+
+    <div class="form-label">Full Name</div>
+    <MudTextField T="string"
+                  @bind-Value="model.FullName"
+                  Variant="Variant.Outlined"
+                  Placeholder="Enter your full name"
+                  Margin="Margin.Dense"
+                  Adornment="Adornment.Start"
+                  AdornmentIcon="@Icons.Material.Filled.Person"
+                  Required="true"
+                  For="@(() => model.FullName)"
+                  Class="mb-4" />
+
+    <div class="form-label">Email Address</div>
+    <MudTextField T="string"
+                  @bind-Value="model.Email"
+                  Variant="Variant.Outlined"
+                  Placeholder="Enter your email"
+                  Margin="Margin.Dense"
+                  Adornment="Adornment.Start"
+                  AdornmentIcon="@Icons.Material.Filled.Email"
+                  Required="true"
+                  For="@(() => model.Email)"
+                  Class="mb-4" />
+
+    <div class="form-label">Password</div>
+    <MudTextField T="string"
+                  @bind-Value="model.Password"
+                  Variant="Variant.Outlined"
+                  Placeholder="Create a password"
+                  Margin="Margin.Dense"
+                  InputType="@(showPassword ? InputType.Text : InputType.Password)"
+                  Adornment="Adornment.Start"
+                  AdornmentIcon="@Icons.Material.Filled.Lock"
+                  AdornmentEndIcon="@(showPassword? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
+                  OnAdornmentEndClick="() => showPassword = !showPassword"
+                  Required="true"
+                  For="@(() => model.Password)"
+                  Class="mb-6" />
+
+    <MudButton Variant="Variant.Filled"
+               Color="Color.Primary"
+               Size="Size.Large"
+               FullWidth="true"
+               Disabled="!success || isProcessing"
+               OnClick="HandleRegister"
+               Style="text-transform:none; border-radius:8px; height:48px; font-weight:600;">
+        @if (isProcessing)
+        {
+            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+            <span class="ms-2">Processing...</span>
+        }
+        else
+        {
+            <span>Create Account</span>
+        }
+    </MudButton>
+</MudForm>
+
+<div class="text-center mt-6">
+    <span style="font-size:0.875rem; color:#64748B;">Already have an account?</span>
+    <a class="auth-link" href="/account/login" style="margin-left:0.25rem;">Sign In</a>
+</div>
+
+@code {
+    private MudForm form = default!;
+    private bool success;
+    private bool isProcessing;
+    private bool showPassword;
+
+    private RegisterModel model = new();
+
+    private class RegisterModel
+    {
+        public string FullName { get; set; } = "";
+        public string Email { get; set; } = "";
+        public string Password { get; set; } = "";
+    }
+
+    private async Task<bool> ValidateForm(EditContext context)
+    {
+        return await Task.FromResult(true);
+    }
+
+    private async Task HandleRegister()
+    {
+        await form.Validate();
+
+        if (!success) return;
+
+        isProcessing = true;
+        StateHasChanged();
+
+        var result = await JSRuntime.InvokeAsync<ApiJSRuntimeResponse>("apiAccountRegister", model.FullName, model.Email, model.Password);
+
+        if (result.Status == 200)
+        {
+            var requireConfirmation = Configuration.GetValue<bool>("IdentitySettings:SignIn:RequireConfirmedAccount");
+
+            if (requireConfirmation)
+            {
+                Snackbar.Add("Registration successful! Please check your email to confirm your account.", Severity.Info);
+            }
+            else
+            {
+                Snackbar.Add("Registration successful! You can now sign in.", Severity.Success);
+            }
+
+            await Task.Delay(500);
+            Navigation.NavigateTo("/account/login");
+        }
+        else
+        {
+            Snackbar.Add(result.Title ?? "Registration failed", Severity.Error);
+        }
+
+        isProcessing = false;
+        StateHasChanged();
+    }
+
+    private class ApiJSRuntimeResponse
+    {
+        public int? Status { get; set; }
+        public string? Title { get; set; }
+    }
+}
+
+<script>
+    window.apiAccountRegister = async (fullName, email, password) => {
+        try {
+            const response = await fetch('/api/account/signup', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ fullName, email, password })
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                return { status: 200, title: 'Success account registration' };
+            } else {
+                let errorMessage = data.title || data.message || 'Registration failed';
+
+                if (data.errors) {
+                    if (Array.isArray(data.errors) && data.errors.length > 0) {
+                        errorMessage = data.errors[0];
+                    } else if (typeof data.errors === 'object') {
+                        const firstKey = Object.keys(data.errors)[0];
+                        if (firstKey) {
+                            errorMessage = data.errors[firstKey][0];
+                        }
+                    }
+                }
+
+                return { status: response.status, title: errorMessage };
+            }
+        } catch (error) {
+            return { status: 500, title: 'Server / Network error' };
+        }
+    };
+</script>
@@ -0,0 +1,106 @@
+using Indotalent.Data.Entities;
+using Indotalent.Infrastructure.Authorization.Identity;
+using MediatR;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.WebUtilities;
+using System.Text;
+
+namespace Indotalent.Features.Account.Register.Cqrs;
+
+public class CreateUserRequest
+{
+    public string FullName { get; set; } = string.Empty;
+    public string Email { get; set; } = string.Empty;
+    public string Password { get; set; } = string.Empty;
+    public bool IsActive { get; set; } = true;
+    public bool EmailConfirmed { get; set; } = false;
+}
+
+public class CreateUserResponse
+{
+    public string? Id { get; set; }
+    public string? Email { get; set; }
+}
+
+public record CreateUserCommand(CreateUserRequest Data) : IRequest<CreateUserResponse>;
+
+public class RegisterHandler : IRequestHandler<CreateUserCommand, CreateUserResponse>
+{
+    private readonly UserManager<ApplicationUser> _userManager;
+    private readonly IEmailSender<ApplicationUser> _emailSender;
+    private readonly IConfiguration _configuration;
+    private readonly IHttpContextAccessor _httpContextAccessor;
+
+    public RegisterHandler(
+        UserManager<ApplicationUser> userManager,
+        IEmailSender<ApplicationUser> emailSender,
+        IConfiguration configuration,
+        IHttpContextAccessor httpContextAccessor)
+    {
+        _userManager = userManager;
+        _emailSender = emailSender;
+        _configuration = configuration;
+        _httpContextAccessor = httpContextAccessor;
+    }
+
+    public async Task<CreateUserResponse> Handle(CreateUserCommand request, CancellationToken cancellationToken)
+    {
+        var user = new ApplicationUser
+        {
+            UserName = request.Data.Email,
+            Email = request.Data.Email,
+            FullName = request.Data.FullName,
+            IsActive = request.Data.IsActive,
+            EmailConfirmed = request.Data.EmailConfirmed,
+        };
+
+        var result = await _userManager.CreateAsync(user, request.Data.Password);
+
+        if (!result.Succeeded)
+        {
+            var errors = result.Errors.Select(x => x.Description).ToList();
+            throw new Exception(string.Join(", ", errors));
+        }
+
+        var rolesToAdd = ApplicationRoles.AllRoles
+            .Where(role => role != ApplicationRoles.Admin)
+            .ToList();
+
+        if (rolesToAdd.Any())
+        {
+            await _userManager.AddToRolesAsync(user, rolesToAdd);
+        }
+
+        var requireConfirmation = _configuration.GetValue<bool>("IdentitySettings:SignIn:RequireConfirmedAccount");
+
+        if (requireConfirmation)
+        {
+            var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);
+            code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
+
+            var requestHttp = _httpContextAccessor.HttpContext?.Request;
+            var scheme = requestHttp?.Scheme ?? "https";
+            var host = requestHttp?.Host.Value ?? "localhost:8080";
+
+            var callbackUrl = $"{scheme}://{host}/account/confirm-email?userId={user.Id}&code={code}";
+
+            var message = $@"
+                <div style=""font-family: Arial, sans-serif;"">
+                    <h3>Welcome, {user.FullName}!</h3>
+                    <p>Please confirm your account by clicking the link below:</p>
+                    <p><a href=""{callbackUrl}"" style=""color: #2196F3; font-weight: bold; text-decoration: underline;"">Confirm Account</a></p>
+                    <br/>
+                    <p style=""font-size: 0.8em; color: #666;"">If the link doesn't work, copy and paste this URL into your browser:</p>
+                    <p style=""font-size: 0.8em; color: #666;"">{callbackUrl}</p>
+                </div>";
+
+            await _emailSender.SendConfirmationLinkAsync(user, user.Email!, message);
+        }
+
+        return new CreateUserResponse
+        {
+            Id = user.Id,
+            Email = user.Email
+        };
+    }
+}
@@ -0,0 +1,144 @@
+@page "/account/reset-password"
+@layout AuthenticationLayout
+@using Indotalent.Shared.Consts
+@using Microsoft.JSInterop
+@inject IJSRuntime JSRuntime
+@inject ISnackbar Snackbar
+@inject NavigationManager Navigation
+
+<PageTitle>Reset Password - @GlobalConsts.AppInitial</PageTitle>
+
+<div class="page-header">
+    <h2>Create New Password</h2>
+    <p>Please enter your new password below.</p>
+</div>
+
+<MudForm @ref="form" @bind-IsValid="@success">
+    <div class="form-label">New Password</div>
+    <MudTextField T="string"
+                  @bind-Value="model.NewPassword"
+                  Variant="Variant.Outlined"
+                  Placeholder="Enter new password"
+                  Margin="Margin.Dense"
+                  InputType="@(showPassword ? InputType.Text : InputType.Password)"
+                  Adornment="Adornment.Start"
+                  AdornmentIcon="@Icons.Material.Filled.Lock"
+                  AdornmentEndIcon="@(showPassword? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
+                  OnAdornmentEndClick="() => showPassword = !showPassword"
+                  Required="true"
+                  Class="mb-4" />
+
+    <div class="form-label">Confirm New Password</div>
+    <MudTextField T="string"
+                  @bind-Value="model.ConfirmPassword"
+                  Variant="Variant.Outlined"
+                  Placeholder="Repeat new password"
+                  Margin="Margin.Dense"
+                  InputType="@(showPassword ? InputType.Text : InputType.Password)"
+                  Adornment="Adornment.Start"
+                  AdornmentIcon="@Icons.Material.Filled.Lock"
+                  Required="true"
+                  Validation="@(new Func<string, string?>(PasswordMatch))"
+                  Class="mb-6" />
+
+    <MudButton Variant="Variant.Filled"
+               Color="Color.Primary"
+               Size="Size.Large"
+               FullWidth="true"
+               Disabled="!success || isProcessing"
+               OnClick="HandleResetPassword"
+               Style="text-transform:none; border-radius:8px; height:48px; font-weight:600;">
+        @if (isProcessing)
+        {
+            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+            <span class="ms-2">Resetting...</span>
+        }
+        else
+        {
+            <span>Reset Password</span>
+        }
+    </MudButton>
+</MudForm>
+
+@code {
+    [SupplyParameterFromQuery] public string? userId { get; set; }
+    [SupplyParameterFromQuery] public string? code { get; set; }
+
+    private MudForm form = default!;
+    private bool success;
+    private bool isProcessing;
+    private bool showPassword;
+    private ResetModel model = new();
+
+    private class ResetModel
+    {
+        public string NewPassword { get; set; } = "";
+        public string ConfirmPassword { get; set; } = "";
+    }
+
+    private string? PasswordMatch(string arg)
+    {
+        if (model.NewPassword != arg) return "Passwords do not match";
+        return null;
+    }
+
+    private async Task HandleResetPassword()
+    {
+        await form.Validate();
+        if (!success) return;
+
+        if (string.IsNullOrEmpty(userId) || string.IsNullOrEmpty(code))
+        {
+            Snackbar.Add("Invalid reset token or user ID.", Severity.Error);
+            return;
+        }
+
+        isProcessing = true;
+        StateHasChanged();
+
+        var result = await JSRuntime.InvokeAsync<ApiResponse>("apiResetPassword", userId, code, model.NewPassword);
+
+        if (result.Status == 200)
+        {
+            Snackbar.Add("Password reset successful! You can now sign in.", Severity.Success);
+            await Task.Delay(500);
+            Navigation.NavigateTo("/account/login");
+        }
+        else
+        {
+            Snackbar.Add(result.Title ?? "Failed to reset password", Severity.Error);
+        }
+
+        isProcessing = false;
+        StateHasChanged();
+    }
+
+    private class ApiResponse
+    {
+        public int Status { get; set; }
+        public string? Title { get; set; }
+    }
+}
+
+<script>
+    window.apiResetPassword = async (userId, code, newPassword) => {
+        try {
+            const response = await fetch('/api/account/reset-password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ userId, code, newPassword })
+            });
+
+            if (response.ok) {
+                return { status: 200, title: 'Success' };
+            } else {
+                const data = await response.json();
+                let msg = 'Failed to reset password';
+                if (data.errors && data.errors.length > 0) msg = data.errors[0];
+                return { status: response.status, title: msg };
+            }
+        } catch (error) {
+            return { status: 500, title: 'Network error' };
+        }
+    };
+</script>
@@ -0,0 +1,51 @@
+using Indotalent.Data.Entities;
+using MediatR;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.WebUtilities;
+using System.Text;
+
+namespace Indotalent.Features.Account.ResetPassword.Cqrs;
+
+public class ResetPasswordRequest
+{
+    public string UserId { get; set; } = string.Empty;
+    public string Code { get; set; } = string.Empty;
+    public string NewPassword { get; set; } = string.Empty;
+}
+
+public class ResetPasswordResponse
+{
+    public string Message { get; set; } = string.Empty;
+}
+
+public record ResetPasswordCommand(ResetPasswordRequest Data) : IRequest<ResetPasswordResponse>;
+
+public class ResetPasswordHandler : IRequestHandler<ResetPasswordCommand, ResetPasswordResponse>
+{
+    private readonly UserManager<ApplicationUser> _userManager;
+
+    public ResetPasswordHandler(UserManager<ApplicationUser> userManager)
+    {
+        _userManager = userManager;
+    }
+
+    public async Task<ResetPasswordResponse> Handle(ResetPasswordCommand request, CancellationToken cancellationToken)
+    {
+        var user = await _userManager.FindByIdAsync(request.Data.UserId);
+        if (user == null)
+        {
+            throw new Exception("User not found.");
+        }
+
+        var decodedCode = Encoding.UTF8.GetString(WebEncoders.Base64UrlDecode(request.Data.Code));
+        var result = await _userManager.ResetPasswordAsync(user, decodedCode, request.Data.NewPassword);
+
+        if (!result.Succeeded)
+        {
+            var errors = result.Errors.Select(x => x.Description).ToList();
+            throw new Exception(string.Join(", ", errors));
+        }
+
+        return new ResetPasswordResponse { Message = "Password has been reset successfully." };
+    }
+}
@@ -0,0 +1,7 @@
+@using MudBlazor
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Web
+@using System.ComponentModel.DataAnnotations
+
+@inject NavigationManager Navigation
+@inject ISnackbar Snackbar
@@ -0,0 +1,259 @@
+@page "/appsettings/json"
+@using Indotalent.Infrastructure.Authentication.Firebase
+@using Indotalent.Infrastructure.Authentication.Keycloak
+@using Microsoft.AspNetCore.Authorization
+@using Indotalent.Infrastructure.Authorization.Identity
+@attribute [Authorize(Roles = ApplicationRoles.Admin)]
+@using Indotalent.Infrastructure.Authentication.Identity
+@using Indotalent.Infrastructure.Database
+@using Indotalent.Infrastructure.BackgroundJob
+@using Indotalent.Infrastructure.Email
+@using Indotalent.Infrastructure.File
+@using Indotalent.Infrastructure.Logging
+@using Indotalent.Infrastructure.Authentication
+@using MudBlazor
+@using System.Reflection
+@inject IdentityService IdentitySvc
+@inject DatabaseService DbSvc
+@inject BackgroundJobService JobSvc
+@inject EmailService EmailSvc
+@inject FileStorageService StorageSvc
+@inject LoggingService LogSvc
+@inject FirebaseService FirebaseSvc
+@inject KeycloakService KeycloakSvc
+
+<style>
+    .clean-white-tabs .mud-tabs-toolbar {
+        background-color: white !important;
+        border-bottom: 2px solid #DCEBFA;
+        border-radius: 0px !important;
+    }
+
+    .clean-white-tabs .mud-tab {
+        color: #94a3b8 !important;
+        text-transform: none;
+        font-weight: 500;
+        min-width: 140px;
+        border-radius: 0px !important;
+    }
+
+    .clean-white-tabs .mud-tab-active {
+        color: var(--mud-palette-primary) !important;
+        font-weight: 800;
+    }
+
+    .clean-white-tabs .mud-tabs-slider {
+        background-color: var(--mud-palette-primary) !important;
+        height: 3px !important;
+        bottom: 0;
+    }
+
+    .soltemp-info-card {
+        border: 1px solid #DCEBFA !important;
+        border-radius: 0px !important;
+        background-color: #ffffff;
+        margin-bottom: 24px;
+    }
+
+    .soltemp-info-header {
+        padding: 12px 16px !important;
+        background-color: #F0F7FF;
+        border-bottom: 1px solid #DCEBFA;
+    }
+
+    .soltemp-row-compact {
+        display: flex;
+        padding: 10px 16px;
+        align-items: center;
+        border-bottom: 1px solid #F0F7FF;
+    }
+
+    .soltemp-label-text {
+        width: 30%;
+        font-weight: 800;
+        color: #1a1a1a;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .soltemp-value-text {
+        width: 70%;
+        color: #4A5D75;
+        font-size: 0.85rem;
+        font-weight: 500;
+        font-family: 'Consolas', monospace;
+        word-break: break-all;
+    }
+
+    .status-chip {
+        font-weight: 900;
+        font-size: 10px;
+        border-radius: 0px !important;
+    }
+</style>
+
+<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-2 mb-8">
+    <div class="clean-white-tabs">
+        <MudTabs Elevation="0" TabPanelsClass="pt-4" Rounded="false" ApplyEffectsToContainer="true">
+
+            <MudTabPanel Text="Identity" Icon="@Icons.Material.Outlined.AdminPanelSettings">
+                @RenderIdentityProperties(IdentitySvc.GetConfiguration(), "Security & Identity")
+            </MudTabPanel>
+
+            <MudTabPanel Text="Database" Icon="@Icons.Material.Outlined.Storage">
+                @RenderObjectProperties(DbSvc.GetConfiguration(), "Database Engine")
+            </MudTabPanel>
+
+            <MudTabPanel Text="Jobs" Icon="@Icons.Material.Outlined.Schedule">
+                @RenderObjectProperties(JobSvc.GetConfiguration(), "Background Job Services")
+            </MudTabPanel>
+
+            <MudTabPanel Text="Email" Icon="@Icons.Material.Outlined.Email">
+                @RenderObjectProperties(EmailSvc.GetConfiguration(), "Email Providers")
+            </MudTabPanel>
+
+            <MudTabPanel Text="Storage" Icon="@Icons.Material.Outlined.CloudUpload">
+                @RenderObjectProperties(StorageSvc.GetConfiguration(), "File Storage Systems")
+            </MudTabPanel>
+
+            <MudTabPanel Text="Logging" Icon="@Icons.Material.Outlined.ListAlt">
+                @RenderObjectProperties(LogSvc.GetConfiguration(), "Diagnostic Logging")
+            </MudTabPanel>
+
+        </MudTabs>
+    </div>
+</MudContainer>
+
+@code {
+    private RenderFragment RenderIdentityProperties(IdentitySettingsModel settings, string sectionTitle)
+    {
+        return __builder =>
+        {
+            <MudPaper Elevation="0" Class="pa-6 mb-6 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+                <div>
+                    <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">@sectionTitle</MudText>
+                    <MudText Typo="Typo.body2" Style="color: #64748b;">Security Policy & Default Credentials</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: #94a3b8;">/</MudText>
+                    <MudText Typo="Typo.caption" Style="color: #94a3b8;">System</MudText>
+                    <MudText Typo="Typo.caption" Style="color: #94a3b8;">/</MudText>
+                    <MudText Typo="Typo.caption" Style="font-weight: 600; color: #1a1a1a;">@sectionTitle</MudText>
+                </div>
+            </MudPaper>
+
+            if (settings != null)
+            {
+                @RenderSectionCard("Password Policy", settings.Password)
+                @RenderSectionCard("Cookie Settings", settings.Cookies)
+                @RenderSectionCard("Default Admin", settings.DefaultAdmin)
+                @RenderSectionCard("SignIn Policy", settings.SignIn)
+                @RenderSectionCard("SSO Firebase", settings.SsoFirebase)
+                @RenderSectionCard("SSO Keycloak", settings.SsoKeycloak)
+            }
+        };
+    }
+
+    private RenderFragment RenderSectionCard(string title, object sectionValue)
+    {
+        return __builder =>
+        {
+            if (sectionValue == null) return;
+
+            <MudCard Elevation="0" Class="soltemp-info-card">
+                <div class="soltemp-info-header d-flex align-center justify-space-between">
+                    <MudText Typo="Typo.body1" Style="font-weight: 900; color: #1a1a1a;">@title</MudText>
+                    <MudChip T="string" Color="Color.Primary" Size="Size.Small" Variant="Variant.Filled" Class="status-chip">CONFIGURED</MudChip>
+                </div>
+                <MudCardContent Style="padding: 0;">
+                    @{
+                        var props = sectionValue.GetType().GetProperties();
+                        int i = 0;
+                    }
+                    @foreach (var p in props)
+                    {
+                        var val = p.GetValue(sectionValue);
+                        <div class="soltemp-row-compact" style="background-color: @(i++ % 2 == 0 ? "#ffffff" : "#F9FCFF");">
+                            <div class="soltemp-label-text">@p.Name</div>
+                            <div class="soltemp-value-text">
+                                @(MaskIfSensitive(p.Name, val?.ToString()))
+                            </div>
+                        </div>
+                    }
+                </MudCardContent>
+            </MudCard>
+        };
+    }
+
+    private RenderFragment RenderObjectProperties(object settingsObj, string sectionTitle)
+    {
+        return __builder =>
+        {
+            <MudPaper Elevation="0" Class="pa-6 mb-6 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+                <div>
+                    <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">@sectionTitle</MudText>
+                    <MudText Typo="Typo.body2" Style="color: #64748b;">Configuration discovery (Full Inspection Mode)</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: #94a3b8;">/</MudText>
+                    <MudText Typo="Typo.caption" Style="color: #94a3b8;">System</MudText>
+                    <MudText Typo="Typo.caption" Style="color: #94a3b8;">/</MudText>
+                    <MudText Typo="Typo.caption" Style="font-weight: 600; color: #1a1a1a;">@sectionTitle</MudText>
+                </div>
+            </MudPaper>
+
+            if (settingsObj != null)
+            {
+                var providers = settingsObj.GetType().GetProperties();
+                foreach (var provider in providers)
+                {
+                    var providerValue = provider.GetValue(settingsObj);
+                    if (providerValue == null) continue;
+
+                    <MudCard Elevation="0" Class="soltemp-info-card">
+                        <div class="soltemp-info-header d-flex align-center justify-space-between">
+                            <MudText Typo="Typo.body1" Style="font-weight: 900; color: #1a1a1a;">@provider.Name</MudText>
+                            @{
+                                var isUsedProp = providerValue.GetType().GetProperty("IsUsed");
+                                bool isUsed = (bool)(isUsedProp?.GetValue(providerValue) ?? false);
+                            }
+                            <MudChip T="string" Color="@(isUsed? Color.Success: Color.Default)" Size="Size.Small" Variant="Variant.Filled" Class="status-chip">
+                                @(isUsed ? "ACTIVE" : "DISABLED")
+                            </MudChip>
+                        </div>
+                        <MudCardContent Style="padding: 0;">
+                            @{
+                                var props = providerValue.GetType().GetProperties();
+                                int i = 0;
+                            }
+                            @foreach (var p in props)
+                            {
+                                if (p.Name == "IsUsed") continue;
+                                <div class="soltemp-row-compact" style="background-color: @(i++ % 2 == 0 ? "#ffffff" : "#F9FCFF");">
+                                    <div class="soltemp-label-text">@p.Name</div>
+                                    <div class="soltemp-value-text">
+                                        @(MaskIfSensitive(p.Name, p.GetValue(providerValue)?.ToString()))
+                                    </div>
+                                </div>
+                            }
+                        </MudCardContent>
+                    </MudCard>
+                }
+            }
+        };
+    }
+
+    private string MaskIfSensitive(string propertyName, string value)
+    {
+        if (string.IsNullOrEmpty(value)) return "-";
+        var sensitiveKeys = new[] { "Password", "Secret", "Key", "Token", "ApiKey" };
+        if (sensitiveKeys.Any(k => propertyName.Contains(k, StringComparison.OrdinalIgnoreCase)))
+        {
+            return "•••••••••••••••• (Encrypted)";
+        }
+        return value;
+    }
+}
@@ -0,0 +1,129 @@
+using Indotalent.Features.Inventory.Product;
+using Indotalent.Features.Inventory.ProductGroup;
+using Indotalent.Features.Inventory.UnitMeasure;
+using Indotalent.Features.Inventory.Warehouse;
+using Indotalent.Features.Medical.MedicalRecord;
+using Indotalent.Features.Medical.MedicalRecordCategory;
+using Indotalent.Features.Medical.MedicalRecordGroup;
+using Indotalent.Features.Organization.Employee;
+using Indotalent.Features.Organization.EmployeeCategory;
+using Indotalent.Features.Organization.EmployeeGroup;
+using Indotalent.Features.Profile.Avatar;
+using Indotalent.Features.Profile.Password;
+using Indotalent.Features.Profile.PersonalInformation;
+using Indotalent.Features.Purchase.Bill;
+using Indotalent.Features.Purchase.BillReport;
+using Indotalent.Features.Purchase.PaymentDisburse;
+using Indotalent.Features.Purchase.PaymentDisburseReport;
+using Indotalent.Features.Purchase.PurchaseOrder;
+using Indotalent.Features.Purchase.PurchaseReport;
+using Indotalent.Features.Root.Home;
+using Indotalent.Features.Sales.CommissionReport;
+using Indotalent.Features.Sales.Invoice;
+using Indotalent.Features.Sales.InvoiceReport;
+using Indotalent.Features.Sales.PaymentReceive;
+using Indotalent.Features.Sales.PaymentReceiveReport;
+using Indotalent.Features.Sales.SalesOrder;
+using Indotalent.Features.Sales.SalesOrderCategory;
+using Indotalent.Features.Sales.SalesOrderGroup;
+using Indotalent.Features.Sales.SalesReport;
+using Indotalent.Features.Serilogs;
+using Indotalent.Features.Setting.AutoNumberSequence;
+using Indotalent.Features.Setting.Company;
+using Indotalent.Features.Setting.Currency;
+using Indotalent.Features.Setting.SystemUser;
+using Indotalent.Features.Setting.Tax;
+using Indotalent.Features.Thirdparty.Patient;
+using Indotalent.Features.Thirdparty.PatientCategory;
+using Indotalent.Features.Thirdparty.PatientContact;
+using Indotalent.Features.Thirdparty.PatientGroup;
+using Indotalent.Features.Thirdparty.Vendor;
+using Indotalent.Features.Thirdparty.VendorCategory;
+using Indotalent.Features.Thirdparty.VendorContact;
+using Indotalent.Features.Thirdparty.VendorGroup;
+using Indotalent.Features.Utilities.BookingGroup;
+using Indotalent.Features.Utilities.BookingManager;
+using Indotalent.Features.Utilities.BookingResource;
+using Indotalent.Features.Utilities.BookingScheduler;
+using Indotalent.Features.Utilities.Todo;
+
+namespace Indotalent.Features;
+
+public static class FeaturesDI
+{
+    public static IServiceCollection AddFeaturesDI(this IServiceCollection services)
+    {
+        //Setting
+        services.AddScoped<SerilogsService>();
+        services.AddScoped<CurrencyService>();
+        services.AddScoped<AutoNumberSequenceService>();
+        services.AddScoped<SystemUserService>();
+        services.AddScoped<CompanyService>();
+        services.AddScoped<TaxService>();
+
+        //profile
+        services.AddScoped<PersonalInformationService>();
+        services.AddScoped<PasswordService>();
+        services.AddScoped<AvatarService>();
+
+
+        //root
+        services.AddScoped<HomeService>();
+
+        //inventory
+        services.AddScoped<UnitMeasureService>();
+        services.AddScoped<ProductGroupService>();
+        services.AddScoped<WarehouseService>();
+        services.AddScoped<ProductService>();
+
+        //thridparty
+        services.AddScoped<PatientGroupService>();
+        services.AddScoped<PatientCategoryService>();
+        services.AddScoped<PatientService>();
+        services.AddScoped<PatientContactService>();
+        services.AddScoped<VendorCategoryService>();
+        services.AddScoped<VendorGroupService>();
+        services.AddScoped<VendorService>();
+        services.AddScoped<VendorContactService>();
+
+
+        //utilities
+        services.AddScoped<TodoService>();
+        services.AddScoped<BookingGroupService>();
+        services.AddScoped<BookingResourceService>();
+        services.AddScoped<BookingManagerService>();
+        services.AddScoped<BookingSchedulerService>();
+
+        //purchase
+        services.AddScoped<PurchaseOrderService>();
+        services.AddScoped<PurchaseReportService>();
+        services.AddScoped<BillReportService>();
+        services.AddScoped<PaymentDisburseReportService>();
+        services.AddScoped<BillService>();
+        services.AddScoped<PaymentDisburseService>();
+
+        //sales
+        services.AddScoped<SalesOrderService>();
+        services.AddScoped<SalesOrderGroupService>();
+        services.AddScoped<SalesOrderCategoryService>();
+        services.AddScoped<SalesReportService>();
+        services.AddScoped<CommissionReportService>();
+        services.AddScoped<InvoiceReportService>();
+        services.AddScoped<PaymentReceiveReportService>();
+        services.AddScoped<InvoiceService>();
+        services.AddScoped<PaymentReceiveService>();
+
+        //organization
+        services.AddScoped<EmployeeCategoryService>();
+        services.AddScoped<EmployeeGroupService>();
+        services.AddScoped<EmployeeService>();
+
+        //medical
+        services.AddScoped<MedicalRecordGroupService>();
+        services.AddScoped<MedicalRecordCategoryService>();
+        services.AddScoped<MedicalRecordService>();
+
+
+        return services;
+    }
+}
@@ -0,0 +1,127 @@
+using Indotalent.Features.Inventory.Product;
+using Indotalent.Features.Inventory.ProductGroup;
+using Indotalent.Features.Inventory.UnitMeasure;
+using Indotalent.Features.Inventory.Warehouse;
+using Indotalent.Features.Medical.MedicalRecord;
+using Indotalent.Features.Medical.MedicalRecordCategory;
+using Indotalent.Features.Medical.MedicalRecordGroup;
+using Indotalent.Features.Organization.Employee;
+using Indotalent.Features.Organization.EmployeeCategory;
+using Indotalent.Features.Organization.EmployeeGroup;
+using Indotalent.Features.Profile.Avatar;
+using Indotalent.Features.Profile.Password;
+using Indotalent.Features.Profile.PersonalInformation;
+using Indotalent.Features.Purchase.Bill;
+using Indotalent.Features.Purchase.BillReport;
+using Indotalent.Features.Purchase.PaymentDisburse;
+using Indotalent.Features.Purchase.PaymentDisburseReport;
+using Indotalent.Features.Purchase.PurchaseOrder;
+using Indotalent.Features.Purchase.PurchaseReport;
+using Indotalent.Features.Root.Home;
+using Indotalent.Features.Sales.ComissionReport;
+using Indotalent.Features.Sales.Invoice;
+using Indotalent.Features.Sales.InvoiceReport;
+using Indotalent.Features.Sales.PaymentReceive;
+using Indotalent.Features.Sales.PaymentReceiveReport;
+using Indotalent.Features.Sales.SalesOrder;
+using Indotalent.Features.Sales.SalesOrderCategory;
+using Indotalent.Features.Sales.SalesOrderGroup;
+using Indotalent.Features.Sales.SalesReport;
+using Indotalent.Features.Serilogs;
+using Indotalent.Features.Setting.AutoNumberSequence;
+using Indotalent.Features.Setting.Company;
+using Indotalent.Features.Setting.Currency;
+using Indotalent.Features.Setting.SystemUser;
+using Indotalent.Features.Setting.Tax;
+using Indotalent.Features.Thirdparty.Patient;
+using Indotalent.Features.Thirdparty.PatientCategory;
+using Indotalent.Features.Thirdparty.PatientContact;
+using Indotalent.Features.Thirdparty.PatientGroup;
+using Indotalent.Features.Thirdparty.Vendor;
+using Indotalent.Features.Thirdparty.VendorCategory;
+using Indotalent.Features.Thirdparty.VendorContact;
+using Indotalent.Features.Thirdparty.VendorGroup;
+using Indotalent.Features.Utilities.BookingGroup;
+using Indotalent.Features.Utilities.BookingManager;
+using Indotalent.Features.Utilities.BookingResource;
+using Indotalent.Features.Utilities.BookingScheduler;
+using Indotalent.Features.Utilities.Todo;
+
+namespace Indotalent.Features;
+
+public static class FeaturesEndpointMap
+{
+    public static IEndpointRouteBuilder MapFeaturesEndpoint(this IEndpointRouteBuilder app)
+    {
+        //setting
+        app.MapSerilogsEndpoints();
+        app.MapCurrencyEndpoints();
+        app.MapAutoNumberSequenceEndpoints();
+        app.MapSystemUserEndpoints();
+        app.MapCompanyEndpoints();
+        app.MapTaxEndpoints();
+
+        //profile
+        app.MapPersonalInformationEndpoints();
+        app.MapPasswordEndpoints();
+        app.MapAvatarEndpoints();
+
+        //root
+        app.MapHomeEndpoints();
+
+        //inventory
+        app.MapUnitMeasureEndpoints();
+        app.MapProductGroupEndpoints();
+        app.MapWarehouseEndpoints();
+        app.MapProductEndpoints();
+
+        //thirdparty
+        app.MapPatientGroupEndpoints();
+        app.MapPatientCategoryEndpoints();
+        app.MapPatientEndpoints();
+        app.MapPatientContactEndpoints();
+        app.MapVendorCategoryEndpoints();
+        app.MapVendorGroupEndpoints();
+        app.MapVendorEndpoints();
+        app.MapVendorContactEndpoints();
+
+
+        //utilities
+        app.MapTodoEndpoints();
+        app.MapBookingGroupEndpoints();
+        app.MapBookingResourceEndpoints();
+        app.MapBookingManagerEndpoints();
+        app.MapBookingSchedulerEndpoints();
+
+        //purchase
+        app.MapPurchaseOrderEndpoints();
+        app.MapPurchaseReportEndpoints();
+        app.MapBillReportEndpoints();
+        app.MapPaymentDisburseReportEndpoints();
+        app.MapBillEndpoints();
+        app.MapPaymentDisburseEndpoints();
+
+        //sales
+        app.MapSalesOrderEndpoints();
+        app.MapSalesOrderGroupEndpoints();
+        app.MapSalesOrderCategoryEndpoints();
+        app.MapSalesReportEndpoints();
+        app.MapCommissionReportEndpoints();
+        app.MapInvoiceReportEndpoints();
+        app.MapPaymentReceiveReportEndpoints();
+        app.MapInvoiceEndpoints();
+        app.MapPaymentReceiveEndpoints();
+
+        //organization
+        app.MapEmployeeCategoryEndpoints();
+        app.MapEmployeeGroupEndpoints();
+        app.MapEmployeeEndpoints();
+
+        //medical
+        app.MapMedicalRecordGroupEndpoints();
+        app.MapMedicalRecordCategoryEndpoints();
+        app.MapMedicalRecordEndpoints();
+
+        return app;
+    }
+}
@@ -0,0 +1,101 @@
+@page "/inventory"
+@using Indotalent.Features.Inventory.Product.Components
+@using Indotalent.Features.Inventory.ProductGroup.Components
+@using Indotalent.Features.Inventory.UnitMeasure.Components
+@using Indotalent.Features.Inventory.Warehouse.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: 0px !important;
+    }
+
+    .clean-white-tabs .mud-tab {
+        color: #94a3b8 !important;
+        text-transform: none;
+        font-weight: 500;
+        min-width: 120px;
+        border-radius: 0px !important;
+    }
+
+    .clean-white-tabs .mud-tab-active {
+        color: var(--mud-palette-primary) !important;
+        font-weight: 800;
+    }
+
+    .clean-white-tabs .mud-tabs-slider {
+        background-color: var(--mud-palette-primary) !important;
+        height: 3px !important;
+        bottom: 0;
+    }
+</style>
+
+<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-2 mb-8">
+    <div class="clean-white-tabs">
+        <MudTabs Elevation="0"
+                 ActivePanelIndex="@_activeTabIndex"
+                 ActivePanelIndexChanged="OnTabChanged"
+                 ApplyEffectsToContainer="true"
+                 TabPanelsClass="pt-4"
+                 ScrollButtons="ScrollButtons.Always">
+
+            <MudTabPanel Text="Unit Measure" Icon="@Icons.Material.Outlined.Straighten">
+                <UnitMeasurePage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Product Group" Icon="@Icons.Material.Outlined.Category">
+                <ProductGroupPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Product" Icon="@Icons.Material.Outlined.Inventory2">
+                <ProductPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Warehouse" Icon="@Icons.Material.Outlined.Warehouse">
+                <WarehousePage />
+            </MudTabPanel>
+
+
+        </MudTabs>
+    </div>
+</MudContainer>
+
+@code {
+    private int _activeTabIndex = 0;
+
+    private readonly Dictionary<int, string> _tabMapping = new()
+    {
+        { 0, "unit-measure" },
+        { 1, "product-group" },
+        { 2, "product" },
+        { 3, "warehouse" }
+    };
+
+    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($"/inventory?tab={tabName ?? "unit-measure"}", replace: false);
+    }
+}
@@ -0,0 +1,28 @@
+@page "/inventory/product"
+@using Indotalent.Features.Inventory.Product
+@using Indotalent.Features.Inventory.Product.Cqrs
+@using Indotalent.Features.Inventory.Product.Components
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_ProductCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_ProductUpdateForm Data="_selectedData!" ReadOnly="@(_currentView == ViewMode.View)" OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_ProductDataTable 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 UpdateProductRequest? _selectedData;
+    private void ShowCreate() => _currentView = ViewMode.Create;
+    private void ShowUpdate(UpdateProductRequest 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,114 @@
+@using Indotalent.Features.Inventory.Product
+@using Indotalent.Features.Inventory.Product.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject ProductService ProductService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+    <div class="d-flex align-center gap-4">
+        <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
+        <div>
+            <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Add New Product</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Define item specification, pricing, and category.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Product Name</MudText>
+                <MudTextField @bind-Value="_model.Name" For="@(() => _model.Name)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Unit Price</MudText>
+                <MudNumericField @bind-Value="_model.UnitPrice" For="@(() => _model.UnitPrice)" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" HideSpinButtons="true" />
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Product Group</MudText>
+                <MudSelect @bind-Value="_model.ProductGroupId"
+                           For="@(() => _model.ProductGroupId)"
+                           Variant="Variant.Outlined"
+                           Margin="Margin.Dense"
+                           FullWidth="true"
+                           Dense="true"
+                           AnchorOrigin="Origin.BottomCenter"
+                           TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookupData.ProductGroups)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Unit of Measure</MudText>
+                <MudSelect @bind-Value="_model.UnitMeasureId"
+                           For="@(() => _model.UnitMeasureId)"
+                           Variant="Variant.Outlined"
+                           Margin="Margin.Dense"
+                           FullWidth="true"
+                           Dense="true"
+                           AnchorOrigin="Origin.BottomCenter"
+                           TransformOrigin="Origin.TopCenter">
+                    @foreach (var item in _lookupData.UnitMeasures)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudCheckBox @bind-Value="_model.Physical" Label="Physical Product" Color="Color.Primary" Dense="true" Style="font-weight: 700;" />
+            </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: 8px; text-transform: none; font-weight: 700;">Cancel</MudButton>
+            <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 8px; 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 Product</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+    private MudForm _form = default!;
+    private CreateProductValidator _validator = new();
+    private CreateProductRequest _model = new();
+    private LookupProductResponse _lookupData = new();
+    private bool _processing = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var response = await ProductService.GetProductLookupAsync();
+        if (response != null && response.IsSuccess) { _lookupData = response.Value!; }
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await ProductService.CreateProductAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess) { Snackbar.Add("Product created successfully", Severity.Success); await OnSuccess.InvokeAsync(); }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,337 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Inventory.Product
+@using Indotalent.Features.Inventory.Product.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject ProductService ProductService
+@inject IDialogService DialogService
+@inject ISnackbar Snackbar
+@inject IJSRuntime JSRuntime
+
+<MudPaper Elevation="0" 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;">Product Management</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF;">Manage your goods, services, and inventory items.</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;">Inventory</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Product</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: 12px;"
+                          OnKeyDown="@HandleSearchKeyDown" />
+            
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Primary"
+                           OnClick="OnSearchClick"
+                           Size="Size.Small"
+                           Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                Search
+            </MudButton>
+        </div>
+
+        <div style="display: flex; gap: 8px; align-items: center;">
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Success"
+                           OnClick="ExportToExcel"
+                           Size="Size.Small"
+                           Disabled="_isExporting"
+                           StartIcon="@(_isExporting ? null : Icons.Custom.FileFormats.FileExcel)"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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.Text"
+                           Color="Color.Primary"
+                           OnClick="LoadData"
+                           Size="Size.Small"
+                           StartIcon="@(_isRefreshing ? null : Icons.Material.Filled.Refresh)"
+                           Disabled="_isRefreshing"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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 (_selectedProduct != null)
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Info"
+                               StartIcon="@Icons.Material.Filled.Visibility"
+                               OnClick="InvokeView"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">View</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Edit"
+                               OnClick="InvokeEdit"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">Edit</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Error"
+                               StartIcon="@Icons.Material.Filled.Delete"
+                               OnClick="OnDelete"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #FCA5A5; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">
+                Remove
+            </MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedProduct = null" />
+            }
+            else
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Add"
+                               OnClick="() => OnAdd.InvokeAsync()"
+                               Size="Size.Small"
+                               Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                        Add New
+                    </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Striped="true" Class="mud-table-styled" Hover="true" Elevation="0" CustomHeader="true" Dense="true" T="GetProductListResponse" OnRowClick="@((args) => _selectedProduct = args.Item)" Loading="@_isRefreshing">
+        <HeaderContent>
+            <MudTh Style="width: 50px; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;"></MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetProductListResponse, object>(x => x.Name!)">Product</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetProductListResponse, object>(x => x.ProductGroupName!)">Group</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetProductListResponse, object>(x => x.UnitMeasureName!)">UoM</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap; text-align: right;">
+                <MudTableSortLabel SortBy="new Func<GetProductListResponse, object>(x => x.UnitPrice!)">Unit Price</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">Type</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedProduct?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>
+                <div class="d-flex flex-column">
+                    <MudText Typo="Typo.body2" Style="font-weight: 600; color: #374151;">@context.Name</MudText>
+                    <MudText Typo="Typo.caption" Style="color: #9CA3AF;">@context.AutoNumber</MudText>
+                </div>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6B7280; font-size: 0.875rem;">@context.ProductGroupName</MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6B7280; font-size: 0.875rem;">@context.UnitMeasureName</MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6B7280; font-size: 0.875rem; text-align: right;">@context.UnitPrice?.ToString("N2")</MudTd>
+            <MudTd>
+                <MudChip T="string" Color="@(context.Physical == true ? Color.Info : Color.Warning)" Size="Size.Small" Variant="Variant.Text" Style="font-weight: 700; border-radius: 16px;">
+                    @(context.Physical == true ? "PHYSICAL" : "SERVICE")
+                </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: 110px; background-color: white; font-size: 12px; font-weight: 600; border-radius: 6px;" 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;">
+                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: #374151;")">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: #374151;")">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-input-outlined-border { border-radius: 6px !important; }
+    .custom-select-dense .mud-input { min-height: 24px !important; max-height: 24px !important; }
+    .custom-select-dense .mud-input-slot { padding-top: 1px !important; padding-bottom: 1px !important; padding-left: 6px !important; padding-right: 2px !important; font-size: 11px !important; min-height: unset !important; line-height: 1.2 !important; }
+    .custom-select-dense .mud-select-input { padding-top: 1px !important; padding-bottom: 1px !important; font-size: 11px !important; }
+        .mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+
+
+@code {
+    [Parameter] public EventCallback OnAdd { get; set; }
+    [Parameter] public EventCallback<UpdateProductRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateProductRequest> OnView { get; set; }
+
+    private List<GetProductListResponse> _products = new();
+    private GetProductListResponse? _selectedProduct;
+    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;
+        _selectedProduct = null;
+        StateHasChanged();
+        try
+        {
+            var response = await ProductService.GetProductListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _products = response.Value ?? new List<GetProductListResponse>();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetProductListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _products;
+        return _products.Where(x =>
+            (x.Name?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.AutoNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetProductListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick() { _skip = 0; _selectedProduct = null; StateHasChanged(); }
+    private void HandleSearchKeyDown(KeyboardEventArgs e) { if (e.Key == "Enter") OnSearchClick(); }
+
+    private async Task ExportToExcel()
+    {
+        _isExporting = true;
+        try
+        {
+            using (var workbook = new XLWorkbook())
+            {
+                var worksheet = workbook.Worksheets.Add("Products");
+                worksheet.Cell(1, 1).Value = "Product Name";
+                worksheet.Cell(1, 2).Value = "Number";
+                worksheet.Cell(1, 3).Value = "Group";
+                worksheet.Cell(1, 4).Value = "UoM";
+                worksheet.Cell(1, 5).Value = "Unit Price";
+                
+                var headerRange = worksheet.Range(1, 1, 1, 5);
+                headerRange.Style.Font.Bold = true;
+                headerRange.Style.Fill.BackgroundColor = XLColor.FromHtml("#9CA3AF");
+                headerRange.Style.Font.FontColor = XLColor.White;
+
+                var currentRow = 1;
+                foreach (var item in GetFilteredData())
+                {
+                    currentRow++;
+                    worksheet.Cell(currentRow, 1).Value = item.Name;
+                    worksheet.Cell(currentRow, 2).Value = item.AutoNumber;
+                    worksheet.Cell(currentRow, 3).Value = item.ProductGroupName;
+                    worksheet.Cell(currentRow, 4).Value = item.UnitMeasureName;
+                    worksheet.Cell(currentRow, 5).Value = item.UnitPrice;
+                }
+                worksheet.Columns().AdjustToContents();
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Product_List.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", content);
+                }
+            }
+        }
+        finally { _isExporting = false; StateHasChanged(); }
+    }
+
+    private void OnPageChanged(int page) { if (page >= 1 && page <= _totalPage) { _skip = (page - 1) * _top; _selectedProduct = null; StateHasChanged(); } }
+    private void OnPageSizeChanged(int size) { _top = size; _skip = 0; _selectedProduct = null; StateHasChanged(); }
+
+    private async Task InvokeEdit() { if (_selectedProduct != null) { var req = await MapToUpdateRequest(_selectedProduct.Id); if (req != null) await OnEdit.InvokeAsync(req); } }
+    private async Task InvokeView() { if (_selectedProduct != null) { var req = await MapToUpdateRequest(_selectedProduct.Id); if (req != null) await OnView.InvokeAsync(req); } }
+
+    private async Task<UpdateProductRequest?> MapToUpdateRequest(string id)
+    {
+        var response = await ProductService.GetProductByIdAsync(id);
+        if (response != null && response.IsSuccess && response.Value != null)
+        {
+            var d = response.Value;
+            return new UpdateProductRequest { Id = d.Id, Name = d.Name, Description = d.Description, UnitPrice = d.UnitPrice, Physical = d.Physical, UnitMeasureId = d.UnitMeasureId, ProductGroupId = d.ProductGroupId, CreatedAt = d.CreatedAt, CreatedBy = d.CreatedBy, UpdatedAt = d.UpdatedAt, UpdatedBy = d.UpdatedBy };
+        }
+        return null;
+    }
+
+    private async Task OnDelete()
+    {
+        if (_selectedProduct == null) return;
+        var parameters = new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, _selectedProduct.Name } };
+        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 ProductService.DeleteProductByIdAsync(_selectedProduct.Id);
+            if (isSuccess) { _selectedProduct = null; await LoadData(); Snackbar.Add("Product deleted successfully", Severity.Success); }
+        }
+    }
+}
@@ -0,0 +1,187 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Inventory.Product
+@using Indotalent.Features.Inventory.Product.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject ProductService ProductService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" 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 ? "Product Details" : "Edit Product")</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">@(ReadOnly ? "Viewing product specification." : "Modify existing product information.")</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    @if (_isDataLoading)
+    {
+        <div class="d-flex justify-center pa-10">
+            <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
+        </div>
+    }
+    else
+    {
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="3">
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Product Name</MudText>
+                    <MudTextField @bind-Value="_model.Name" For="@(() => _model.Name)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Unit Price</MudText>
+                    <MudNumericField @bind-Value="_model.UnitPrice" For="@(() => _model.UnitPrice)" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" HideSpinButtons="true" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Product Group</MudText>
+                    <MudSelect @bind-Value="_model.ProductGroupId"
+                               For="@(() => _model.ProductGroupId)"
+                               ReadOnly="ReadOnly"
+                               Variant="Variant.Outlined"
+                               Margin="Margin.Dense"
+                               FullWidth="true"
+                               Dense="true"
+                               AnchorOrigin="Origin.BottomCenter"
+                               TransformOrigin="Origin.TopCenter">
+                        @foreach (var item in _lookupData.ProductGroups)
+                        {
+                            <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Unit of Measure</MudText>
+                    <MudSelect @bind-Value="_model.UnitMeasureId"
+                               For="@(() => _model.UnitMeasureId)"
+                               ReadOnly="ReadOnly"
+                               Variant="Variant.Outlined"
+                               Margin="Margin.Dense"
+                               FullWidth="true"
+                               Dense="true"
+                               AnchorOrigin="Origin.BottomCenter"
+                               TransformOrigin="Origin.TopCenter">
+                        @foreach (var item in _lookupData.UnitMeasures)
+                        {
+                            <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudCheckBox @bind-Value="_model.Physical" Label="Physical Product" Color="Color.Primary" Dense="true" ReadOnly="ReadOnly" Style="font-weight: 700;" />
+                </MudItem>
+                <MudItem xs="12">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                    <MudTextField @bind-Value="_model.Description" For="@(() => _model.Description)" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+                </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: 8px; text-transform: none; font-weight: 700;">@(ReadOnly ? "Back to List" : "Cancel")</MudButton>
+                @if (!ReadOnly)
+                {
+                    <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 8px; 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 UpdateProductRequest 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 UpdateProductValidator _validator = new();
+    private UpdateProductRequest _model = new();
+    private LookupProductResponse _lookupData = new();
+    private bool _processing = false;
+    private bool _isDataLoading = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _isDataLoading = true;
+        try
+        {
+            var response = await ProductService.GetProductLookupAsync();
+            if (response != null && response.IsSuccess)
+            {
+                _lookupData = response.Value!;
+            }
+
+            _model = new UpdateProductRequest
+            {
+                Id = Data.Id,
+                Name = Data.Name,
+                Description = Data.Description,
+                UnitPrice = Data.UnitPrice,
+                Physical = Data.Physical,
+                UnitMeasureId = Data.UnitMeasureId,
+                ProductGroupId = Data.ProductGroupId,
+                CreatedAt = Data.CreatedAt,
+                CreatedBy = Data.CreatedBy,
+                UpdatedAt = Data.UpdatedAt,
+                UpdatedBy = Data.UpdatedBy
+            };
+        }
+        finally
+        {
+            _isDataLoading = false;
+        }
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await ProductService.UpdateProductAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Product updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,71 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Product.Cqrs;
+
+public class CreateProductRequest
+{
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public decimal? UnitPrice { get; set; }
+    public bool? Physical { get; set; } = true;
+    public string? UnitMeasureId { get; set; }
+    public string? ProductGroupId { get; set; }
+}
+
+public class CreateProductResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+}
+
+public record CreateProductCommand(CreateProductRequest Data) : IRequest<CreateProductResponse>;
+
+public class CreateProductHandler : IRequestHandler<CreateProductCommand, CreateProductResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateProductHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateProductResponse> Handle(CreateProductCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.Product
+            .AnyAsync(x => x.Name == request.Data.Name, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Product", request.Data.Name ?? string.Empty);
+        }
+
+        var entityName = nameof(Data.Entities.Product);
+
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"{entityName.ToShortNameConsonant(3)}/{{Year}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.Product
+        {
+            AutoNumber = autoNo,
+            Name = request.Data.Name,
+            Description = request.Data.Description,
+            UnitPrice = request.Data.UnitPrice,
+            Physical = request.Data.Physical,
+            UnitMeasureId = request.Data.UnitMeasureId,
+            ProductGroupId = request.Data.ProductGroupId
+        };
+
+        _context.Product.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateProductResponse
+        {
+            Id = entity.Id,
+            Name = entity.Name
+        };
+    }
+}
@@ -0,0 +1,23 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Inventory.Product.Cqrs;
+
+public class CreateProductValidator : AbstractValidator<CreateProductRequest>
+{
+    public CreateProductValidator()
+    {
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Product Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.UnitMeasureId)
+            .NotEmpty().WithMessage("Unit of Measure is required");
+
+        RuleFor(x => x.ProductGroupId)
+            .NotEmpty().WithMessage("Product Group is required");
+
+        RuleFor(x => x.UnitPrice)
+            .GreaterThanOrEqualTo(0).WithMessage("Unit Price cannot be negative");
+    }
+}
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Product.Cqrs;
+
+public record DeleteProductByIdRequest(string Id);
+
+public record DeleteProductByIdCommand(DeleteProductByIdRequest Data) : IRequest<bool>;
+
+public class DeleteProductByIdHandler : IRequestHandler<DeleteProductByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteProductByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteProductByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Product
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.Product.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,53 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Product.Cqrs;
+
+public class GetProductByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public decimal? UnitPrice { get; set; }
+    public bool? Physical { get; set; }
+    public string? UnitMeasureId { get; set; }
+    public string? ProductGroupId { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetProductByIdQuery(string Id) : IRequest<GetProductByIdResponse?>;
+
+public class GetProductByIdHandler : IRequestHandler<GetProductByIdQuery, GetProductByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetProductByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetProductByIdResponse?> Handle(GetProductByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Product
+            .AsNoTracking()
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetProductByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                Name = x.Name,
+                Description = x.Description,
+                UnitPrice = x.UnitPrice,
+                Physical = x.Physical,
+                UnitMeasureId = x.UnitMeasureId,
+                ProductGroupId = x.ProductGroupId,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,47 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Product.Cqrs;
+
+public class GetProductListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public string? Name { get; set; }
+    public decimal? UnitPrice { get; set; }
+    public bool? Physical { get; set; }
+    public string? UnitMeasureName { get; set; }
+    public string? ProductGroupName { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+}
+
+public record GetProductListQuery() : IRequest<List<GetProductListResponse>>;
+
+public class GetProductListHandler : IRequestHandler<GetProductListQuery, List<GetProductListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetProductListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetProductListResponse>> Handle(GetProductListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Product
+            .AsNoTracking()
+            .Include(x => x.UnitMeasure)
+            .Include(x => x.ProductGroup)
+            .OrderByDescending(x => x.CreatedAt)
+            .Select(x => new GetProductListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                Name = x.Name,
+                UnitPrice = x.UnitPrice,
+                Physical = x.Physical,
+                UnitMeasureName = x.UnitMeasure != null ? x.UnitMeasure.Name : string.Empty,
+                ProductGroupName = x.ProductGroup != null ? x.ProductGroup.Name : string.Empty,
+                CreatedAt = x.CreatedAt
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,45 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Product.Cqrs;
+
+public class LookupProductResponse
+{
+    public List<LookupItem> UnitMeasures { get; set; } = new();
+    public List<LookupItem> ProductGroups { get; set; } = new();
+}
+
+public class LookupItem
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+}
+
+public record LookupProductQuery() : IRequest<LookupProductResponse>;
+
+public class LookupProductHandler : IRequestHandler<LookupProductQuery, LookupProductResponse>
+{
+    private readonly AppDbContext _context;
+
+    public LookupProductHandler(AppDbContext context) => _context = context;
+
+    public async Task<LookupProductResponse> Handle(LookupProductQuery request, CancellationToken cancellationToken)
+    {
+        var result = new LookupProductResponse();
+
+        result.UnitMeasures = await _context.UnitMeasure
+            .AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        result.ProductGroups = await _context.ProductGroup
+            .AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        return result;
+    }
+}
@@ -0,0 +1,70 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Product.Cqrs;
+
+public class UpdateProductRequest
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public decimal? UnitPrice { get; set; }
+    public bool? Physical { get; set; }
+    public string? UnitMeasureId { get; set; }
+    public string? ProductGroupId { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateProductResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateProductCommand(UpdateProductRequest Data) : IRequest<UpdateProductResponse>;
+
+public class UpdateProductHandler : IRequestHandler<UpdateProductCommand, UpdateProductResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateProductHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateProductResponse> Handle(UpdateProductCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.Product
+            .AnyAsync(x => x.Name == request.Data.Name && x.Id != request.Data.Id, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Product", request.Data.Name ?? string.Empty);
+        }
+
+        var entity = await _context.Product
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateProductResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.Name = request.Data.Name;
+        entity.Description = request.Data.Description;
+        entity.UnitPrice = request.Data.UnitPrice;
+        entity.Physical = request.Data.Physical;
+        entity.UnitMeasureId = request.Data.UnitMeasureId;
+        entity.ProductGroupId = request.Data.ProductGroupId;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateProductResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,26 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Inventory.Product.Cqrs;
+
+public class UpdateProductValidator : AbstractValidator<UpdateProductRequest>
+{
+    public UpdateProductValidator()
+    {
+        RuleFor(x => x.Id)
+            .NotEmpty().WithMessage("ID is required for update");
+
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Product Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.UnitMeasureId)
+            .NotEmpty().WithMessage("Unit of Measure is required");
+
+        RuleFor(x => x.ProductGroupId)
+            .NotEmpty().WithMessage("Product Group is required");
+
+        RuleFor(x => x.UnitPrice)
+            .GreaterThanOrEqualTo(0).WithMessage("Unit Price cannot be negative");
+    }
+}
@@ -0,0 +1,82 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Inventory.Product.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Inventory.Product;
+
+public static class ProductEndpoint
+{
+    public static void MapProductEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/product").WithTags("Products")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetProductListQuery());
+
+            return result.ToApiResponse("Product list retrieved successfully");
+        })
+        .WithName("GetProductList")
+        .WithTags("Products");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetProductByIdQuery(id));
+
+            return result.ToApiResponse(result is not null
+                ? "Product detail retrieved successfully"
+                : $"Product with ID {id} not found");
+        })
+        .WithName("GetProductById")
+        .WithTags("Products");
+
+        group.MapGet("/lookup", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new LookupProductQuery());
+
+            return result.ToApiResponse("Product lookup data retrieved successfully");
+        })
+        .WithName("GetProductLookup")
+        .WithTags("Products");
+
+        group.MapPost("/", async (CreateProductRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateProductCommand(request));
+
+            return result.ToApiResponse("Product has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateProduct")
+        .WithTags("Products");
+
+        group.MapPost("/update", async (UpdateProductRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateProductCommand(request));
+
+            if (!result.Success)
+            {
+                return ((object?)null).ToApiResponse("Update failed. The product data could not be found.");
+            }
+
+            return result.ToApiResponse("Product has been updated successfully");
+        })
+        .WithName("UpdateProduct")
+        .WithTags("Products");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteProductByIdCommand(new DeleteProductByIdRequest(id)));
+
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Delete failed. The product data could not be found.");
+            }
+
+            return true.ToApiResponse("Product has been deleted successfully");
+        })
+        .WithName("DeleteProductById")
+        .WithTags("Products");
+    }
+}
@@ -0,0 +1,66 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Inventory.Product.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Inventory.Product;
+
+public class ProductService : BaseService
+{
+    private readonly RestClient _client;
+
+    public ProductService(
+            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<GetProductListResponse>>?> GetProductListAsync()
+    {
+        var request = new RestRequest("api/product", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetProductListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetProductByIdResponse>?> GetProductByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/product/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetProductByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<LookupProductResponse>?> GetProductLookupAsync()
+    {
+        var request = new RestRequest("api/product/lookup", Method.Get);
+        return await ExecuteWithResponseAsync<LookupProductResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateProductResponse>?> CreateProductAsync(CreateProductRequest data)
+    {
+        var request = new RestRequest("api/product", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateProductResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteProductByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/product/delete/{id}", Method.Post);
+
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdateProductResponse>?> UpdateProductAsync(UpdateProductRequest data)
+    {
+        var request = new RestRequest("api/product/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateProductResponse>(_client, request);
+    }
+}
@@ -0,0 +1,53 @@
+@page "/inventory/product-group"
+@using Indotalent.Features.Inventory.ProductGroup
+@using Indotalent.Features.Inventory.ProductGroup.Cqrs
+@using Indotalent.Features.Inventory.ProductGroup.Components
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_ProductGroupCreateForm OnCancel="BackToTable"
+                             OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_ProductGroupUpdateForm Data="_selectedData!"
+                             ReadOnly="@(_currentView == ViewMode.View)"
+                             OnCancel="BackToTable"
+                             OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_ProductGroupDataTable 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 UpdateProductGroupRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdateProductGroupRequest 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,97 @@
+@using Indotalent.Features.Inventory.ProductGroup
+@using Indotalent.Features.Inventory.ProductGroup.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject ProductGroupService ProductGroupService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+    <div class="d-flex align-center gap-4">
+        <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
+        <div>
+            <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Add New Group</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Create a new category for your products.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Group Name</MudText>
+                <MudTextField @bind-Value="_model.Name"
+                              For="@(() => _model.Name)"
+                              Validation="@(_validator.ValidateValue())"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Placeholder="e.g. Raw Material, Finished Goods" />
+            </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: 8px; text-transform: none; font-weight: 700;">
+                Cancel
+            </MudButton>
+            <MudButton Color="Color.Primary"
+                       Variant="Variant.Filled"
+                       OnClick="Submit"
+                       Disabled="_processing"
+                       Style="border-radius: 8px; 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 Group</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreateProductGroupValidator _validator = new();
+    private CreateProductGroupRequest _model = new();
+    private bool _processing = false;
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await ProductGroupService.CreateProductGroupAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Group created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,399 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Inventory.ProductGroup
+@using Indotalent.Features.Inventory.ProductGroup.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject ProductGroupService ProductGroupService
+@inject IDialogService DialogService
+@inject ISnackbar Snackbar
+@inject IJSRuntime JSRuntime
+
+<MudPaper Elevation="0" 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;">Product Group</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF;">Categorize and manage your product groupings.</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;">Inventory</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Product Group</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: 12px;"
+                          OnKeyDown="@HandleSearchKeyDown" />
+            
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Primary"
+                           OnClick="OnSearchClick"
+                           Size="Size.Small"
+                           Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                Search
+            </MudButton>
+        </div>
+
+        <div style="display: flex; gap: 8px; align-items: center;">
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Success"
+                           OnClick="ExportToExcel"
+                           Size="Size.Small"
+                           Disabled="_isExporting"
+                           StartIcon="@(_isExporting ? null : Icons.Custom.FileFormats.FileExcel)"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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.Text"
+                           Color="Color.Primary"
+                           OnClick="LoadData"
+                           Size="Size.Small"
+                           StartIcon="@(_isRefreshing ? null : Icons.Material.Filled.Refresh)"
+                           Disabled="_isRefreshing"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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 (_selectedGroup != null)
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Info"
+                               StartIcon="@Icons.Material.Filled.Visibility"
+                               OnClick="InvokeView"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">View</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Edit"
+                               OnClick="InvokeEdit"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">Edit</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Error"
+                               StartIcon="@Icons.Material.Filled.Delete"
+                               OnClick="OnDelete"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #FCA5A5; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">
+                Remove
+            </MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedGroup = null" />
+            }
+            else
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Add"
+                               OnClick="() => OnAdd.InvokeAsync()"
+                               Size="Size.Small"
+                               Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                        Add New
+                    </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Striped="true" Class="mud-table-styled" Hover="true" Elevation="0" CustomHeader="true" Dense="true" T="GetProductGroupListResponse" OnRowClick="@((args) => _selectedGroup = args.Item)" Loading="@_isRefreshing">
+        <HeaderContent>
+            <MudTh Style="width: 50px; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;"></MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetProductGroupListResponse, object>(x => x.Name!)">Group Name</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">Description</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedGroup?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>
+                <div class="d-flex align-center gap-2">
+                    <MudAvatar Color="Color.Primary" Variant="Variant.Filled" Size="Size.Small" Style="border-radius: 50%; font-size: 10px; font-weight: 700;">
+                        @(!string.IsNullOrWhiteSpace(context.Name) ? context.Name.ToInitial() : "?")
+                    </MudAvatar>
+                    <MudText Typo="Typo.body2" Style="font-weight: 600; color: #374151;">@context.Name</MudText>
+                </div>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6B7280; font-size: 0.875rem;">@context.Description</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: 110px; background-color: white; font-size: 12px; font-weight: 600; border-radius: 6px;"
+                       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;">
+                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: #374151;")">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: #374151;")">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-input-outlined-border { border-radius: 6px !important; }
+    .custom-select-dense .mud-input { min-height: 24px !important; max-height: 24px !important; }
+    .custom-select-dense .mud-input-slot { padding-top: 1px !important; padding-bottom: 1px !important; padding-left: 6px !important; padding-right: 2px !important; font-size: 11px !important; min-height: unset !important; line-height: 1.2 !important; }
+    .custom-select-dense .mud-select-input { padding-top: 1px !important; padding-bottom: 1px !important; font-size: 11px !important; }
+        .mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+
+
+@code {
+    [Parameter] public EventCallback OnAdd { get; set; }
+    [Parameter] public EventCallback<UpdateProductGroupRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateProductGroupRequest> OnView { get; set; }
+
+    private List<GetProductGroupListResponse> _groups = new();
+    private GetProductGroupListResponse? _selectedGroup;
+    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;
+        _selectedGroup = null;
+        StateHasChanged();
+        try
+        {
+            var response = await ProductGroupService.GetProductGroupListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _groups = response.Value ?? new List<GetProductGroupListResponse>();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetProductGroupListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _groups;
+        return _groups.Where(x =>
+            (x.Name?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Description?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetProductGroupListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick()
+    {
+        _skip = 0;
+        _selectedGroup = 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("ProductGroups");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Group Name";
+                worksheet.Cell(currentRow, 2).Value = "Description";
+
+                var headerRange = worksheet.Range(1, 1, 1, 2);
+                headerRange.Style.Font.Bold = true;
+                headerRange.Style.Fill.BackgroundColor = XLColor.FromHtml("#9CA3AF");
+                headerRange.Style.Font.FontColor = XLColor.White;
+
+                foreach (var item in GetFilteredData())
+                {
+                    currentRow++;
+                    worksheet.Cell(currentRow, 1).Value = item.Name;
+                    worksheet.Cell(currentRow, 2).Value = item.Description;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "ProductGroup_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;
+            _selectedGroup = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        _selectedGroup = null;
+        StateHasChanged();
+    }
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedGroup == null) return;
+        var request = await MapToUpdateRequest(_selectedGroup.Id);
+        if (request != null) await OnEdit.InvokeAsync(request);
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedGroup == null) return;
+        var request = await MapToUpdateRequest(_selectedGroup.Id);
+        if (request != null) await OnView.InvokeAsync(request);
+    }
+
+    private async Task<UpdateProductGroupRequest?> MapToUpdateRequest(string id)
+    {
+        var response = await ProductGroupService.GetProductGroupByIdAsync(id);
+        if (response != null && response.IsSuccess && response.Value != null)
+        {
+            var detail = response.Value;
+            return new UpdateProductGroupRequest
+            {
+                Id = detail.Id,
+                Name = detail.Name,
+                Description = detail.Description,
+                CreatedAt = detail.CreatedAt,
+                CreatedBy = detail.CreatedBy,
+                UpdatedAt = detail.UpdatedAt,
+                UpdatedBy = detail.UpdatedBy
+            };
+        }
+        return null;
+    }
+
+    private async Task OnDelete()
+    {
+        if (_selectedGroup == null) return;
+
+        var parameters = new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, _selectedGroup.Name } };
+        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 ProductGroupService.DeleteProductGroupByIdAsync(_selectedGroup.Id);
+            if (isSuccess)
+            {
+                _selectedGroup = null;
+                await LoadData();
+                Snackbar.Add("Group deleted successfully", Severity.Success);
+            }
+            else
+            {
+                Snackbar.Add("Delete failed. This record might be protected by the system.", Severity.Error);
+            }
+        }
+    }
+}
@@ -0,0 +1,143 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Inventory.ProductGroup
+@using Indotalent.Features.Inventory.ProductGroup.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject ProductGroupService ProductGroupService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" 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 ? "Group Details" : "Edit Group")</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">@(ReadOnly ? "Viewing product group specification." : "Modify existing group information.")</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Group Name</MudText>
+                <MudTextField @bind-Value="_model.Name"
+                              For="@(() => _model.Name)"
+                              Validation="@(_validator.ValidateValue())"
+                              ReadOnly="ReadOnly"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description"
+                              For="@(() => _model.Description)"
+                              ReadOnly="ReadOnly"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+            </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: 8px; text-transform: none; font-weight: 700;">
+                @(ReadOnly ? "Back to List" : "Cancel")
+            </MudButton>
+            @if (!ReadOnly)
+            {
+                <MudButton Color="Color.Primary"
+                           Variant="Variant.Filled"
+                           OnClick="Submit"
+                           Disabled="_processing"
+                           Style="border-radius: 8px; 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 UpdateProductGroupRequest 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 UpdateProductGroupValidator _validator = new();
+    private UpdateProductGroupRequest _model = new();
+    private bool _processing = false;
+
+    protected override void OnInitialized()
+    {
+        _model = new UpdateProductGroupRequest
+        {
+            Id = Data.Id,
+            Name = Data.Name,
+            Description = Data.Description,
+            CreatedAt = Data.CreatedAt,
+            CreatedBy = Data.CreatedBy,
+            UpdatedAt = Data.UpdatedAt,
+            UpdatedBy = Data.UpdatedBy
+        };
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await ProductGroupService.UpdateProductGroupAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Group updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,54 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.ProductGroup.Cqrs;
+
+public class CreateProductGroupRequest
+{
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+}
+
+public class CreateProductGroupResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+}
+
+public record CreateProductGroupCommand(CreateProductGroupRequest Data) : IRequest<CreateProductGroupResponse>;
+
+public class CreateProductGroupHandler : IRequestHandler<CreateProductGroupCommand, CreateProductGroupResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateProductGroupHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateProductGroupResponse> Handle(CreateProductGroupCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.ProductGroup
+            .AnyAsync(x => x.Name == request.Data.Name, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Product Group", request.Data.Name ?? string.Empty);
+        }
+
+        var entity = new Data.Entities.ProductGroup
+        {
+            Name = request.Data.Name,
+            Description = request.Data.Description
+        };
+
+        _context.ProductGroup.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateProductGroupResponse
+        {
+            Id = entity.Id,
+            Name = entity.Name
+        };
+    }
+}
@@ -0,0 +1,17 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Inventory.ProductGroup.Cqrs;
+
+public class CreateProductGroupValidator : AbstractValidator<CreateProductGroupRequest>
+{
+    public CreateProductGroupValidator()
+    {
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Group Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Description)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+    }
+}
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.ProductGroup.Cqrs;
+
+public record DeleteProductGroupByIdRequest(string Id);
+
+public record DeleteProductGroupByIdCommand(DeleteProductGroupByIdRequest Data) : IRequest<bool>;
+
+public class DeleteProductGroupByIdHandler : IRequestHandler<DeleteProductGroupByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteProductGroupByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteProductGroupByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.ProductGroup
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.ProductGroup.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,43 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.ProductGroup.Cqrs;
+
+public class GetProductGroupByIdResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetProductGroupByIdQuery(string Id) : IRequest<GetProductGroupByIdResponse?>;
+
+public class GetProductGroupByIdHandler : IRequestHandler<GetProductGroupByIdQuery, GetProductGroupByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetProductGroupByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetProductGroupByIdResponse?> Handle(GetProductGroupByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.ProductGroup
+            .AsNoTracking()
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetProductGroupByIdResponse
+            {
+                Id = x.Id,
+                Name = x.Name,
+                Description = x.Description,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,43 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.ProductGroup.Cqrs;
+
+public class GetProductGroupListResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetProductGroupListQuery() : IRequest<List<GetProductGroupListResponse>>;
+
+public class GetProductGroupListHandler : IRequestHandler<GetProductGroupListQuery, List<GetProductGroupListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetProductGroupListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetProductGroupListResponse>> Handle(GetProductGroupListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.ProductGroup
+            .AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new GetProductGroupListResponse
+            {
+                Id = x.Id,
+                Name = x.Name,
+                Description = x.Description,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,61 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.ProductGroup.Cqrs;
+
+public class UpdateProductGroupRequest
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateProductGroupResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateProductGroupCommand(UpdateProductGroupRequest Data) : IRequest<UpdateProductGroupResponse>;
+
+public class UpdateProductGroupHandler : IRequestHandler<UpdateProductGroupCommand, UpdateProductGroupResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateProductGroupHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateProductGroupResponse> Handle(UpdateProductGroupCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.ProductGroup
+            .AnyAsync(x => x.Name == request.Data.Name && x.Id != request.Data.Id, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Product Group", request.Data.Name ?? string.Empty);
+        }
+
+        var entity = await _context.ProductGroup
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateProductGroupResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.Name = request.Data.Name;
+        entity.Description = request.Data.Description;
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateProductGroupResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,20 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Inventory.ProductGroup.Cqrs;
+
+public class UpdateProductGroupValidator : AbstractValidator<UpdateProductGroupRequest>
+{
+    public UpdateProductGroupValidator()
+    {
+        RuleFor(x => x.Id)
+            .NotEmpty().WithMessage("ID is required for update");
+
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Group Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Description)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+    }
+}
@@ -0,0 +1,73 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Inventory.ProductGroup.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Inventory.ProductGroup;
+
+public static class ProductGroupEndpoint
+{
+    public static void MapProductGroupEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/product-group").WithTags("ProductGroups")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetProductGroupListQuery());
+
+            return result.ToApiResponse("Product group list retrieved successfully");
+        })
+        .WithName("GetProductGroupList")
+        .WithTags("ProductGroups");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetProductGroupByIdQuery(id));
+
+            return result.ToApiResponse(result is not null
+                ? "Product group detail retrieved successfully"
+                : $"Product group with ID {id} not found");
+        })
+        .WithName("GetProductGroupById")
+        .WithTags("ProductGroups");
+
+        group.MapPost("/", async (CreateProductGroupRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateProductGroupCommand(request));
+
+            return result.ToApiResponse("Product group has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateProductGroup")
+        .WithTags("ProductGroups");
+
+        group.MapPost("/update", async (UpdateProductGroupRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateProductGroupCommand(request));
+
+            if (!result.Success)
+            {
+                return ((object?)null).ToApiResponse("Update failed. The product group data could not be found.");
+            }
+
+            return result.ToApiResponse("Product group has been updated successfully");
+        })
+        .WithName("UpdateProductGroup")
+        .WithTags("ProductGroups");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteProductGroupByIdCommand(new DeleteProductGroupByIdRequest(id)));
+
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Delete failed. The product group data could not be found.");
+            }
+
+            return true.ToApiResponse("Product group has been deleted successfully");
+        })
+        .WithName("DeleteProductGroupById")
+        .WithTags("ProductGroups");
+    }
+}
@@ -0,0 +1,60 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Inventory.ProductGroup.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Inventory.ProductGroup;
+
+public class ProductGroupService : BaseService
+{
+    private readonly RestClient _client;
+
+    public ProductGroupService(
+            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<GetProductGroupListResponse>>?> GetProductGroupListAsync()
+    {
+        var request = new RestRequest("api/product-group", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetProductGroupListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetProductGroupByIdResponse>?> GetProductGroupByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/product-group/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetProductGroupByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateProductGroupResponse>?> CreateProductGroupAsync(CreateProductGroupRequest data)
+    {
+        var request = new RestRequest("api/product-group", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateProductGroupResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteProductGroupByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/product-group/delete/{id}", Method.Post);
+
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdateProductGroupResponse>?> UpdateProductGroupAsync(UpdateProductGroupRequest data)
+    {
+        var request = new RestRequest("api/product-group/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateProductGroupResponse>(_client, request);
+    }
+}
@@ -0,0 +1,53 @@
+@page "/inventory/unit-measure"
+@using Indotalent.Features.Inventory.UnitMeasure
+@using Indotalent.Features.Inventory.UnitMeasure.Cqrs
+@using Indotalent.Features.Inventory.UnitMeasure.Components
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_UnitMeasureCreateForm OnCancel="BackToTable"
+                            OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_UnitMeasureUpdateForm Data="_selectedData!"
+                            ReadOnly="@(_currentView == ViewMode.View)"
+                            OnCancel="BackToTable"
+                            OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_UnitMeasureDataTable 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 UpdateUnitMeasureRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdateUnitMeasureRequest 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,97 @@
+@using Indotalent.Features.Inventory.UnitMeasure
+@using Indotalent.Features.Inventory.UnitMeasure.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject UnitMeasureService UnitMeasureService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+    <div class="d-flex align-center gap-4">
+        <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
+        <div>
+            <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Add New Unit</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Define measurement units for your products.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Unit Name</MudText>
+                <MudTextField @bind-Value="_model.Name"
+                              For="@(() => _model.Name)"
+                              Validation="@(_validator.ValidateValue())"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Placeholder="e.g. Kilogram, Meter, Pcs" />
+            </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: 8px; text-transform: none; font-weight: 700;">
+                Cancel
+            </MudButton>
+            <MudButton Color="Color.Primary"
+                       Variant="Variant.Filled"
+                       OnClick="Submit"
+                       Disabled="_processing"
+                       Style="border-radius: 8px; 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 Unit</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreateUnitMeasureValidator _validator = new();
+    private CreateUnitMeasureRequest _model = new();
+    private bool _processing = false;
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await UnitMeasureService.CreateUnitMeasureAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Unit created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,399 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Inventory.UnitMeasure
+@using Indotalent.Features.Inventory.UnitMeasure.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject UnitMeasureService UnitMeasureService
+@inject IDialogService DialogService
+@inject ISnackbar Snackbar
+@inject IJSRuntime JSRuntime
+
+<MudPaper Elevation="0" 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;">Unit of Measure</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF;">Manage measurement units for inventory items.</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;">Inventory</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Unit Measure</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: 12px;"
+                          OnKeyDown="@HandleSearchKeyDown" />
+            
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Primary"
+                           OnClick="OnSearchClick"
+                           Size="Size.Small"
+                           Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                Search
+            </MudButton>
+        </div>
+
+        <div style="display: flex; gap: 8px; align-items: center;">
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Success"
+                           OnClick="ExportToExcel"
+                           Size="Size.Small"
+                           Disabled="_isExporting"
+                           StartIcon="@(_isExporting ? null : Icons.Custom.FileFormats.FileExcel)"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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.Text"
+                           Color="Color.Primary"
+                           OnClick="LoadData"
+                           Size="Size.Small"
+                           StartIcon="@(_isRefreshing ? null : Icons.Material.Filled.Refresh)"
+                           Disabled="_isRefreshing"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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 (_selectedUnit != null)
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Info"
+                               StartIcon="@Icons.Material.Filled.Visibility"
+                               OnClick="InvokeView"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">View</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Edit"
+                               OnClick="InvokeEdit"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">Edit</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Error"
+                               StartIcon="@Icons.Material.Filled.Delete"
+                               OnClick="OnDelete"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #FCA5A5; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">
+                Remove
+            </MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedUnit = null" />
+            }
+            else
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Add"
+                               OnClick="() => OnAdd.InvokeAsync()"
+                               Size="Size.Small"
+                               Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                        Add New
+                    </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Striped="true" Class="mud-table-styled" Hover="true" Elevation="0" CustomHeader="true" Dense="true" T="GetUnitMeasureListResponse" OnRowClick="@((args) => _selectedUnit = args.Item)" Loading="@_isRefreshing">
+        <HeaderContent>
+            <MudTh Style="width: 50px; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;"></MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetUnitMeasureListResponse, object>(x => x.Name!)">Unit Name</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">Description</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedUnit?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>
+                <div class="d-flex align-center gap-2">
+                    <MudAvatar Color="Color.Primary" Variant="Variant.Filled" Size="Size.Small" Style="border-radius: 50%; font-size: 10px; font-weight: 700;">
+                        @(!string.IsNullOrWhiteSpace(context.Name) ? context.Name.ToInitial() : "?")
+                    </MudAvatar>
+                    <MudText Typo="Typo.body2" Style="font-weight: 600; color: #374151;">@context.Name</MudText>
+                </div>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6B7280; font-size: 0.875rem;">@context.Description</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: 110px; background-color: white; font-size: 12px; font-weight: 600; border-radius: 6px;"
+                       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;">
+                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: #374151;")">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: #374151;")">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-input-outlined-border { border-radius: 6px !important; }
+    .custom-select-dense .mud-input { min-height: 24px !important; max-height: 24px !important; }
+    .custom-select-dense .mud-input-slot { padding-top: 1px !important; padding-bottom: 1px !important; padding-left: 6px !important; padding-right: 2px !important; font-size: 11px !important; min-height: unset !important; line-height: 1.2 !important; }
+    .custom-select-dense .mud-select-input { padding-top: 1px !important; padding-bottom: 1px !important; font-size: 11px !important; }
+        .mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+
+
+@code {
+    [Parameter] public EventCallback OnAdd { get; set; }
+    [Parameter] public EventCallback<UpdateUnitMeasureRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateUnitMeasureRequest> OnView { get; set; }
+
+    private List<GetUnitMeasureListResponse> _units = new();
+    private GetUnitMeasureListResponse? _selectedUnit;
+    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;
+        _selectedUnit = null;
+        StateHasChanged();
+        try
+        {
+            var response = await UnitMeasureService.GetUnitMeasureListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _units = response.Value ?? new List<GetUnitMeasureListResponse>();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetUnitMeasureListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _units;
+        return _units.Where(x =>
+            (x.Name?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Description?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetUnitMeasureListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick()
+    {
+        _skip = 0;
+        _selectedUnit = 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("UnitMeasures");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Unit Name";
+                worksheet.Cell(currentRow, 2).Value = "Description";
+
+                var headerRange = worksheet.Range(1, 1, 1, 2);
+                headerRange.Style.Font.Bold = true;
+                headerRange.Style.Fill.BackgroundColor = XLColor.FromHtml("#9CA3AF");
+                headerRange.Style.Font.FontColor = XLColor.White;
+
+                foreach (var item in GetFilteredData())
+                {
+                    currentRow++;
+                    worksheet.Cell(currentRow, 1).Value = item.Name;
+                    worksheet.Cell(currentRow, 2).Value = item.Description;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "UnitMeasure_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;
+            _selectedUnit = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        _selectedUnit = null;
+        StateHasChanged();
+    }
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedUnit == null) return;
+        var request = await MapToUpdateRequest(_selectedUnit.Id);
+        if (request != null) await OnEdit.InvokeAsync(request);
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedUnit == null) return;
+        var request = await MapToUpdateRequest(_selectedUnit.Id);
+        if (request != null) await OnView.InvokeAsync(request);
+    }
+
+    private async Task<UpdateUnitMeasureRequest?> MapToUpdateRequest(string id)
+    {
+        var response = await UnitMeasureService.GetUnitMeasureByIdAsync(id);
+        if (response != null && response.IsSuccess && response.Value != null)
+        {
+            var detail = response.Value;
+            return new UpdateUnitMeasureRequest
+            {
+                Id = detail.Id,
+                Name = detail.Name,
+                Description = detail.Description,
+                CreatedAt = detail.CreatedAt,
+                CreatedBy = detail.CreatedBy,
+                UpdatedAt = detail.UpdatedAt,
+                UpdatedBy = detail.UpdatedBy
+            };
+        }
+        return null;
+    }
+
+    private async Task OnDelete()
+    {
+        if (_selectedUnit == null) return;
+
+        var parameters = new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, _selectedUnit.Name } };
+        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 UnitMeasureService.DeleteUnitMeasureByIdAsync(_selectedUnit.Id);
+            if (isSuccess)
+            {
+                _selectedUnit = null;
+                await LoadData();
+                Snackbar.Add("Unit deleted successfully", Severity.Success);
+            }
+            else
+            {
+                Snackbar.Add("Delete failed. This record might be protected by the system.", Severity.Error);
+            }
+        }
+    }
+}
@@ -0,0 +1,143 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Inventory.UnitMeasure
+@using Indotalent.Features.Inventory.UnitMeasure.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject UnitMeasureService UnitMeasureService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" 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 ? "Unit Details" : "Edit Unit")</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">@(ReadOnly ? "Viewing unit of measure specification." : "Modify existing unit information.")</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Unit Name</MudText>
+                <MudTextField @bind-Value="_model.Name"
+                              For="@(() => _model.Name)"
+                              Validation="@(_validator.ValidateValue())"
+                              ReadOnly="ReadOnly"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description"
+                              For="@(() => _model.Description)"
+                              ReadOnly="ReadOnly"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+            </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: 8px; text-transform: none; font-weight: 700;">
+                @(ReadOnly ? "Back to List" : "Cancel")
+            </MudButton>
+            @if (!ReadOnly)
+            {
+                <MudButton Color="Color.Primary"
+                           Variant="Variant.Filled"
+                           OnClick="Submit"
+                           Disabled="_processing"
+                           Style="border-radius: 8px; 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 UpdateUnitMeasureRequest 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 UpdateUnitMeasureValidator _validator = new();
+    private UpdateUnitMeasureRequest _model = new();
+    private bool _processing = false;
+
+    protected override void OnInitialized()
+    {
+        _model = new UpdateUnitMeasureRequest
+        {
+            Id = Data.Id,
+            Name = Data.Name,
+            Description = Data.Description,
+            CreatedAt = Data.CreatedAt,
+            CreatedBy = Data.CreatedBy,
+            UpdatedAt = Data.UpdatedAt,
+            UpdatedBy = Data.UpdatedBy
+        };
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await UnitMeasureService.UpdateUnitMeasureAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Unit updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,54 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.UnitMeasure.Cqrs;
+
+public class CreateUnitMeasureRequest
+{
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+}
+
+public class CreateUnitMeasureResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+}
+
+public record CreateUnitMeasureCommand(CreateUnitMeasureRequest Data) : IRequest<CreateUnitMeasureResponse>;
+
+public class CreateUnitMeasureHandler : IRequestHandler<CreateUnitMeasureCommand, CreateUnitMeasureResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateUnitMeasureHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateUnitMeasureResponse> Handle(CreateUnitMeasureCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.UnitMeasure
+            .AnyAsync(x => x.Name == request.Data.Name, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Unit of Measure", request.Data.Name ?? string.Empty);
+        }
+
+        var entity = new Data.Entities.UnitMeasure
+        {
+            Name = request.Data.Name,
+            Description = request.Data.Description
+        };
+
+        _context.UnitMeasure.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateUnitMeasureResponse
+        {
+            Id = entity.Id,
+            Name = entity.Name
+        };
+    }
+}
@@ -0,0 +1,17 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Inventory.UnitMeasure.Cqrs;
+
+public class CreateUnitMeasureValidator : AbstractValidator<CreateUnitMeasureRequest>
+{
+    public CreateUnitMeasureValidator()
+    {
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Unit Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Description)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+    }
+}
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.UnitMeasure.Cqrs;
+
+public record DeleteUnitMeasureByIdRequest(string Id);
+
+public record DeleteUnitMeasureByIdCommand(DeleteUnitMeasureByIdRequest Data) : IRequest<bool>;
+
+public class DeleteUnitMeasureByIdHandler : IRequestHandler<DeleteUnitMeasureByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteUnitMeasureByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteUnitMeasureByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.UnitMeasure
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.UnitMeasure.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,43 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.UnitMeasure.Cqrs;
+
+public class GetUnitMeasureByIdResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetUnitMeasureByIdQuery(string Id) : IRequest<GetUnitMeasureByIdResponse?>;
+
+public class GetUnitMeasureByIdHandler : IRequestHandler<GetUnitMeasureByIdQuery, GetUnitMeasureByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetUnitMeasureByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetUnitMeasureByIdResponse?> Handle(GetUnitMeasureByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.UnitMeasure
+            .AsNoTracking()
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetUnitMeasureByIdResponse
+            {
+                Id = x.Id,
+                Name = x.Name,
+                Description = x.Description,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,43 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.UnitMeasure.Cqrs;
+
+public class GetUnitMeasureListResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetUnitMeasureListQuery() : IRequest<List<GetUnitMeasureListResponse>>;
+
+public class GetUnitMeasureListHandler : IRequestHandler<GetUnitMeasureListQuery, List<GetUnitMeasureListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetUnitMeasureListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetUnitMeasureListResponse>> Handle(GetUnitMeasureListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.UnitMeasure
+            .AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new GetUnitMeasureListResponse
+            {
+                Id = x.Id,
+                Name = x.Name,
+                Description = x.Description,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,61 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.UnitMeasure.Cqrs;
+
+public class UpdateUnitMeasureRequest
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateUnitMeasureResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateUnitMeasureCommand(UpdateUnitMeasureRequest Data) : IRequest<UpdateUnitMeasureResponse>;
+
+public class UpdateUnitMeasureHandler : IRequestHandler<UpdateUnitMeasureCommand, UpdateUnitMeasureResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateUnitMeasureHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateUnitMeasureResponse> Handle(UpdateUnitMeasureCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.UnitMeasure
+            .AnyAsync(x => x.Name == request.Data.Name && x.Id != request.Data.Id, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Unit of Measure", request.Data.Name ?? string.Empty);
+        }
+
+        var entity = await _context.UnitMeasure
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateUnitMeasureResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.Name = request.Data.Name;
+        entity.Description = request.Data.Description;
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateUnitMeasureResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,20 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Inventory.UnitMeasure.Cqrs;
+
+public class UpdateUnitMeasureValidator : AbstractValidator<UpdateUnitMeasureRequest>
+{
+    public UpdateUnitMeasureValidator()
+    {
+        RuleFor(x => x.Id)
+            .NotEmpty().WithMessage("ID is required for update");
+
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Unit Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Description)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+    }
+}
@@ -0,0 +1,73 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Inventory.UnitMeasure.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Inventory.UnitMeasure;
+
+public static class UnitMeasureEndpoint
+{
+    public static void MapUnitMeasureEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/unit-measure").WithTags("UnitMeasures")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetUnitMeasureListQuery());
+
+            return result.ToApiResponse("Unit measure list retrieved successfully");
+        })
+        .WithName("GetUnitMeasureList")
+        .WithTags("UnitMeasures");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetUnitMeasureByIdQuery(id));
+
+            return result.ToApiResponse(result is not null
+                ? "Unit measure detail retrieved successfully"
+                : $"Unit measure with ID {id} not found");
+        })
+        .WithName("GetUnitMeasureById")
+        .WithTags("UnitMeasures");
+
+        group.MapPost("/", async (CreateUnitMeasureRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateUnitMeasureCommand(request));
+
+            return result.ToApiResponse("Unit measure has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateUnitMeasure")
+        .WithTags("UnitMeasures");
+
+        group.MapPost("/update", async (UpdateUnitMeasureRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateUnitMeasureCommand(request));
+
+            if (!result.Success)
+            {
+                return ((object?)null).ToApiResponse("Update failed. The unit measure data could not be found.");
+            }
+
+            return result.ToApiResponse("Unit measure has been updated successfully");
+        })
+        .WithName("UpdateUnitMeasure")
+        .WithTags("UnitMeasures");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteUnitMeasureByIdCommand(new DeleteUnitMeasureByIdRequest(id)));
+
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Delete failed. The unit measure data could not be found.");
+            }
+
+            return true.ToApiResponse("Unit measure has been deleted successfully");
+        })
+        .WithName("DeleteUnitMeasureById")
+        .WithTags("UnitMeasures");
+    }
+}
@@ -0,0 +1,60 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Inventory.UnitMeasure.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Inventory.UnitMeasure;
+
+public class UnitMeasureService : BaseService
+{
+    private readonly RestClient _client;
+
+    public UnitMeasureService(
+            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<GetUnitMeasureListResponse>>?> GetUnitMeasureListAsync()
+    {
+        var request = new RestRequest("api/unit-measure", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetUnitMeasureListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetUnitMeasureByIdResponse>?> GetUnitMeasureByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/unit-measure/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetUnitMeasureByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateUnitMeasureResponse>?> CreateUnitMeasureAsync(CreateUnitMeasureRequest data)
+    {
+        var request = new RestRequest("api/unit-measure", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateUnitMeasureResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteUnitMeasureByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/unit-measure/delete/{id}", Method.Post);
+
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdateUnitMeasureResponse>?> UpdateUnitMeasureAsync(UpdateUnitMeasureRequest data)
+    {
+        var request = new RestRequest("api/unit-measure/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateUnitMeasureResponse>(_client, request);
+    }
+}
@@ -0,0 +1,53 @@
+@page "/inventory/warehouse"
+@using Indotalent.Features.Inventory.Warehouse
+@using Indotalent.Features.Inventory.Warehouse.Cqrs
+@using Indotalent.Features.Inventory.Warehouse.Components
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_WarehouseCreateForm OnCancel="BackToTable"
+                          OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_WarehouseUpdateForm Data="_selectedData!"
+                          ReadOnly="@(_currentView == ViewMode.View)"
+                          OnCancel="BackToTable"
+                          OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_WarehouseDataTable 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 UpdateWarehouseRequest? _selectedData;
+
+    private void ShowCreate()
+    {
+        _currentView = ViewMode.Create;
+    }
+
+    private void ShowUpdate(UpdateWarehouseRequest 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,104 @@
+@using Indotalent.Features.Inventory.Warehouse
+@using Indotalent.Features.Inventory.Warehouse.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject WarehouseService WarehouseService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+    <div class="d-flex align-center gap-4">
+        <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
+        <div>
+            <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Add New Warehouse</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Create a new storage location for products.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12" sm="8">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Warehouse Name</MudText>
+                <MudTextField @bind-Value="_model.Name"
+                              For="@(() => _model.Name)"
+                              Validation="@(_validator.ValidateValue())"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Placeholder="e.g. Main Warehouse, Central Store" />
+            </MudItem>
+            <MudItem xs="12" sm="4" Class="d-flex align-end">
+                <MudCheckBox @bind-Value="_model.SystemWarehouse"
+                             Label="System Warehouse"
+                             Color="Color.Primary"
+                             Dense="true"
+                             Style="font-weight: 700;" />
+            </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: 8px; text-transform: none; font-weight: 700;">
+                Cancel
+            </MudButton>
+            <MudButton Color="Color.Primary"
+                       Variant="Variant.Filled"
+                       OnClick="Submit"
+                       Disabled="_processing"
+                       Style="border-radius: 8px; 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 Warehouse</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+
+    private MudForm _form = default!;
+    private CreateWarehouseValidator _validator = new();
+    private CreateWarehouseRequest _model = new();
+    private bool _processing = false;
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await WarehouseService.CreateWarehouseAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Warehouse created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,402 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Inventory.Warehouse
+@using Indotalent.Features.Inventory.Warehouse.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject WarehouseService WarehouseService
+@inject IDialogService DialogService
+@inject ISnackbar Snackbar
+@inject IJSRuntime JSRuntime
+
+<MudPaper Elevation="0" 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;">Warehouse Management</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF;">Manage physical and virtual storage locations.</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;">Inventory</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Warehouse</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: 12px;"
+                          OnKeyDown="@HandleSearchKeyDown" />
+            
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Primary"
+                           OnClick="OnSearchClick"
+                           Size="Size.Small"
+                           Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                Search
+            </MudButton>
+        </div>
+
+        <div style="display: flex; gap: 8px; align-items: center;">
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Success"
+                           OnClick="ExportToExcel"
+                           Size="Size.Small"
+                           Disabled="_isExporting"
+                           StartIcon="@(_isExporting ? null : Icons.Custom.FileFormats.FileExcel)"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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.Text"
+                           Color="Color.Primary"
+                           OnClick="LoadData"
+                           Size="Size.Small"
+                           StartIcon="@(_isRefreshing ? null : Icons.Material.Filled.Refresh)"
+                           Disabled="_isRefreshing"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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 (_selectedWarehouse != null)
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Info"
+                               StartIcon="@Icons.Material.Filled.Visibility"
+                               OnClick="InvokeView"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">View</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Edit"
+                               OnClick="InvokeEdit"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">Edit</MudButton>
+                <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.Delete" OnClick="OnDelete" Size="Size.Small" Style="text-transform: none; font-weight: 700; border-radius: 12px;" Disabled="@(_selectedWarehouse.SystemWarehouse == true)">Remove</MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedWarehouse = null" />
+            }
+            else
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Add"
+                               OnClick="() => OnAdd.InvokeAsync()"
+                               Size="Size.Small"
+                               Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                        Add New
+                    </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Striped="true" Class="mud-table-styled" Hover="true" Elevation="0" CustomHeader="true" Dense="true" T="GetWarehouseListResponse" OnRowClick="@((args) => _selectedWarehouse = args.Item)" Loading="@_isRefreshing">
+        <HeaderContent>
+            <MudTh Style="width: 50px; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;"></MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetWarehouseListResponse, object>(x => x.Name!)">Warehouse Name</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">System</MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">Description</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedWarehouse?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>
+                <div class="d-flex align-center gap-2">
+                    <MudAvatar Color="Color.Secondary" Variant="Variant.Filled" Size="Size.Small" Style="border-radius: 50%; font-size: 10px; font-weight: 700;">
+                        @(!string.IsNullOrWhiteSpace(context.Name) ? context.Name.ToInitial() : "?")
+                    </MudAvatar>
+                    <MudText Typo="Typo.body2" Style="font-weight: 600; color: #374151;">@context.Name</MudText>
+                </div>
+            </MudTd>
+            <MudTd>
+                @if (context.SystemWarehouse == true)
+                {
+                    <MudChip T="string" Color="Color.Info" Size="Size.Small" Variant="Variant.Text" Style="font-weight: 700; border-radius: 16px;">SYSTEM</MudChip>
+                }
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6B7280; font-size: 0.875rem;">@context.Description</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: 110px; background-color: white; font-size: 12px; font-weight: 600; border-radius: 6px;"
+                       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;">
+                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: #374151;")">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: #374151;")">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-input-outlined-border { border-radius: 6px !important; }
+    .custom-select-dense .mud-input { min-height: 24px !important; max-height: 24px !important; }
+    .custom-select-dense .mud-input-slot { padding-top: 1px !important; padding-bottom: 1px !important; padding-left: 6px !important; padding-right: 2px !important; font-size: 11px !important; min-height: unset !important; line-height: 1.2 !important; }
+    .custom-select-dense .mud-select-input { padding-top: 1px !important; padding-bottom: 1px !important; font-size: 11px !important; }
+        .mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+
+
+@code {
+    [Parameter] public EventCallback OnAdd { get; set; }
+    [Parameter] public EventCallback<UpdateWarehouseRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateWarehouseRequest> OnView { get; set; }
+
+    private List<GetWarehouseListResponse> _warehouses = new();
+    private GetWarehouseListResponse? _selectedWarehouse;
+    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;
+        _selectedWarehouse = null;
+        StateHasChanged();
+        try
+        {
+            var response = await WarehouseService.GetWarehouseListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _warehouses = response.Value ?? new List<GetWarehouseListResponse>();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetWarehouseListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _warehouses;
+        return _warehouses.Where(x =>
+            (x.Name?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Description?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetWarehouseListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick()
+    {
+        _skip = 0;
+        _selectedWarehouse = 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("Warehouses");
+                var currentRow = 1;
+
+                worksheet.Cell(currentRow, 1).Value = "Warehouse Name";
+                worksheet.Cell(currentRow, 2).Value = "System Warehouse";
+                worksheet.Cell(currentRow, 3).Value = "Description";
+
+                var headerRange = worksheet.Range(1, 1, 1, 3);
+                headerRange.Style.Font.Bold = true;
+                headerRange.Style.Fill.BackgroundColor = XLColor.FromHtml("#9CA3AF");
+                headerRange.Style.Font.FontColor = XLColor.White;
+
+                foreach (var item in GetFilteredData())
+                {
+                    currentRow++;
+                    worksheet.Cell(currentRow, 1).Value = item.Name;
+                    worksheet.Cell(currentRow, 2).Value = item.SystemWarehouse == true ? "Yes" : "No";
+                    worksheet.Cell(currentRow, 3).Value = item.Description;
+                }
+
+                worksheet.Columns().AdjustToContents();
+
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "Warehouse_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;
+            _selectedWarehouse = null;
+            StateHasChanged();
+        }
+    }
+
+    private void OnPageSizeChanged(int size)
+    {
+        _top = size;
+        _skip = 0;
+        _selectedWarehouse = null;
+        StateHasChanged();
+    }
+
+    private async Task InvokeEdit()
+    {
+        if (_selectedWarehouse == null) return;
+        var request = await MapToUpdateRequest(_selectedWarehouse.Id);
+        if (request != null) await OnEdit.InvokeAsync(request);
+    }
+
+    private async Task InvokeView()
+    {
+        if (_selectedWarehouse == null) return;
+        var request = await MapToUpdateRequest(_selectedWarehouse.Id);
+        if (request != null) await OnView.InvokeAsync(request);
+    }
+
+    private async Task<UpdateWarehouseRequest?> MapToUpdateRequest(string id)
+    {
+        var response = await WarehouseService.GetWarehouseByIdAsync(id);
+        if (response != null && response.IsSuccess && response.Value != null)
+        {
+            var detail = response.Value;
+            return new UpdateWarehouseRequest
+            {
+                Id = detail.Id,
+                Name = detail.Name,
+                Description = detail.Description,
+                SystemWarehouse = detail.SystemWarehouse,
+                CreatedAt = detail.CreatedAt,
+                CreatedBy = detail.CreatedBy,
+                UpdatedAt = detail.UpdatedAt,
+                UpdatedBy = detail.UpdatedBy
+            };
+        }
+        return null;
+    }
+
+    private async Task OnDelete()
+    {
+        if (_selectedWarehouse == null) return;
+
+        var parameters = new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, _selectedWarehouse.Name } };
+        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 WarehouseService.DeleteWarehouseByIdAsync(_selectedWarehouse.Id);
+            if (isSuccess)
+            {
+                _selectedWarehouse = null;
+                await LoadData();
+                Snackbar.Add("Warehouse deleted successfully", Severity.Success);
+            }
+            else
+            {
+                Snackbar.Add("Delete failed. System warehouses cannot be removed.", Severity.Error);
+            }
+        }
+    }
+}
@@ -0,0 +1,152 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Inventory.Warehouse
+@using Indotalent.Features.Inventory.Warehouse.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject WarehouseService WarehouseService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" 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 ? "Warehouse Details" : "Edit Warehouse")</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">@(ReadOnly ? "Viewing warehouse location specification." : "Modify existing warehouse information.")</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12" sm="8">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Warehouse Name</MudText>
+                <MudTextField @bind-Value="_model.Name"
+                              For="@(() => _model.Name)"
+                              Validation="@(_validator.ValidateValue())"
+                              ReadOnly="ReadOnly"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="4" Class="d-flex align-end">
+                <MudCheckBox @bind-Value="_model.SystemWarehouse"
+                             Label="System Warehouse"
+                             Color="Color.Primary"
+                             Dense="true"
+                             ReadOnly="ReadOnly"
+                             Style="font-weight: 700;" />
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description"
+                              For="@(() => _model.Description)"
+                              ReadOnly="ReadOnly"
+                              Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+            </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: 8px; text-transform: none; font-weight: 700;">
+                @(ReadOnly ? "Back to List" : "Cancel")
+            </MudButton>
+            @if (!ReadOnly)
+            {
+                <MudButton Color="Color.Primary"
+                           Variant="Variant.Filled"
+                           OnClick="Submit"
+                           Disabled="_processing"
+                           Style="border-radius: 8px; 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 UpdateWarehouseRequest 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 UpdateWarehouseValidator _validator = new();
+    private UpdateWarehouseRequest _model = new();
+    private bool _processing = false;
+
+    protected override void OnInitialized()
+    {
+        _model = new UpdateWarehouseRequest
+        {
+            Id = Data.Id,
+            Name = Data.Name,
+            Description = Data.Description,
+            SystemWarehouse = Data.SystemWarehouse,
+            CreatedAt = Data.CreatedAt,
+            CreatedBy = Data.CreatedBy,
+            UpdatedAt = Data.UpdatedAt,
+            UpdatedBy = Data.UpdatedBy
+        };
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+
+        await _form.Validate();
+        if (!_form.IsValid) return;
+
+        _processing = true;
+        try
+        {
+            var response = await WarehouseService.UpdateWarehouseAsync(_model);
+            await Task.Delay(500);
+
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Warehouse updated successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Error: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+        }
+    }
+}
@@ -0,0 +1,56 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Warehouse.Cqrs;
+
+public class CreateWarehouseRequest
+{
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public bool? SystemWarehouse { get; set; } = false;
+}
+
+public class CreateWarehouseResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+}
+
+public record CreateWarehouseCommand(CreateWarehouseRequest Data) : IRequest<CreateWarehouseResponse>;
+
+public class CreateWarehouseHandler : IRequestHandler<CreateWarehouseCommand, CreateWarehouseResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateWarehouseHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateWarehouseResponse> Handle(CreateWarehouseCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.Warehouse
+            .AnyAsync(x => x.Name == request.Data.Name, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Warehouse", request.Data.Name ?? string.Empty);
+        }
+
+        var entity = new Data.Entities.Warehouse
+        {
+            Name = request.Data.Name,
+            Description = request.Data.Description,
+            SystemWarehouse = request.Data.SystemWarehouse
+        };
+
+        _context.Warehouse.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateWarehouseResponse
+        {
+            Id = entity.Id,
+            Name = entity.Name
+        };
+    }
+}
@@ -0,0 +1,17 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Inventory.Warehouse.Cqrs;
+
+public class CreateWarehouseValidator : AbstractValidator<CreateWarehouseRequest>
+{
+    public CreateWarehouseValidator()
+    {
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Warehouse Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Description)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+    }
+}
@@ -0,0 +1,32 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Warehouse.Cqrs;
+
+public record DeleteWarehouseByIdRequest(string Id);
+
+public record DeleteWarehouseByIdCommand(DeleteWarehouseByIdRequest Data) : IRequest<bool>;
+
+public class DeleteWarehouseByIdHandler : IRequestHandler<DeleteWarehouseByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteWarehouseByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteWarehouseByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.Warehouse
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        if (entity.SystemWarehouse == true)
+        {
+            return false;
+        }
+
+        _context.Warehouse.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,45 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Warehouse.Cqrs;
+
+public class GetWarehouseByIdResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public bool? SystemWarehouse { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetWarehouseByIdQuery(string Id) : IRequest<GetWarehouseByIdResponse?>;
+
+public class GetWarehouseByIdHandler : IRequestHandler<GetWarehouseByIdQuery, GetWarehouseByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetWarehouseByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetWarehouseByIdResponse?> Handle(GetWarehouseByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Warehouse
+            .AsNoTracking()
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetWarehouseByIdResponse
+            {
+                Id = x.Id,
+                Name = x.Name,
+                Description = x.Description,
+                SystemWarehouse = x.SystemWarehouse,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,45 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Warehouse.Cqrs;
+
+public class GetWarehouseListResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public bool? SystemWarehouse { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetWarehouseListQuery() : IRequest<List<GetWarehouseListResponse>>;
+
+public class GetWarehouseListHandler : IRequestHandler<GetWarehouseListQuery, List<GetWarehouseListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetWarehouseListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetWarehouseListResponse>> Handle(GetWarehouseListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Warehouse
+            .AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new GetWarehouseListResponse
+            {
+                Id = x.Id,
+                Name = x.Name,
+                Description = x.Description,
+                SystemWarehouse = x.SystemWarehouse,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,63 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Inventory.Warehouse.Cqrs;
+
+public class UpdateWarehouseRequest
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public bool? SystemWarehouse { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateWarehouseResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateWarehouseCommand(UpdateWarehouseRequest Data) : IRequest<UpdateWarehouseResponse>;
+
+public class UpdateWarehouseHandler : IRequestHandler<UpdateWarehouseCommand, UpdateWarehouseResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateWarehouseHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateWarehouseResponse> Handle(UpdateWarehouseCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.Warehouse
+            .AnyAsync(x => x.Name == request.Data.Name && x.Id != request.Data.Id, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("Warehouse", request.Data.Name ?? string.Empty);
+        }
+
+        var entity = await _context.Warehouse
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateWarehouseResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.Name = request.Data.Name;
+        entity.Description = request.Data.Description;
+        entity.SystemWarehouse = request.Data.SystemWarehouse;
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateWarehouseResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,20 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Inventory.Warehouse.Cqrs;
+
+public class UpdateWarehouseValidator : AbstractValidator<UpdateWarehouseRequest>
+{
+    public UpdateWarehouseValidator()
+    {
+        RuleFor(x => x.Id)
+            .NotEmpty().WithMessage("ID is required for update");
+
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Warehouse Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Description)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+    }
+}
@@ -0,0 +1,73 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Inventory.Warehouse.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Inventory.Warehouse;
+
+public static class WarehouseEndpoint
+{
+    public static void MapWarehouseEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/warehouse").WithTags("Warehouses")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetWarehouseListQuery());
+
+            return result.ToApiResponse("Warehouse list retrieved successfully");
+        })
+        .WithName("GetWarehouseList")
+        .WithTags("Warehouses");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetWarehouseByIdQuery(id));
+
+            return result.ToApiResponse(result is not null
+                ? "Warehouse detail retrieved successfully"
+                : $"Warehouse with ID {id} not found");
+        })
+        .WithName("GetWarehouseById")
+        .WithTags("Warehouses");
+
+        group.MapPost("/", async (CreateWarehouseRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateWarehouseCommand(request));
+
+            return result.ToApiResponse("Warehouse has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateWarehouse")
+        .WithTags("Warehouses");
+
+        group.MapPost("/update", async (UpdateWarehouseRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateWarehouseCommand(request));
+
+            if (!result.Success)
+            {
+                return ((object?)null).ToApiResponse("Update failed. The warehouse data could not be found.");
+            }
+
+            return result.ToApiResponse("Warehouse has been updated successfully");
+        })
+        .WithName("UpdateWarehouse")
+        .WithTags("Warehouses");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteWarehouseByIdCommand(new DeleteWarehouseByIdRequest(id)));
+
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Delete failed. The warehouse might be a system warehouse or not found.");
+            }
+
+            return true.ToApiResponse("Warehouse has been deleted successfully");
+        })
+        .WithName("DeleteWarehouseById")
+        .WithTags("Warehouses");
+    }
+}
@@ -0,0 +1,60 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Inventory.Warehouse.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Inventory.Warehouse;
+
+public class WarehouseService : BaseService
+{
+    private readonly RestClient _client;
+
+    public WarehouseService(
+            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<GetWarehouseListResponse>>?> GetWarehouseListAsync()
+    {
+        var request = new RestRequest("api/warehouse", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetWarehouseListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetWarehouseByIdResponse>?> GetWarehouseByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/warehouse/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetWarehouseByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateWarehouseResponse>?> CreateWarehouseAsync(CreateWarehouseRequest data)
+    {
+        var request = new RestRequest("api/warehouse", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateWarehouseResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteWarehouseByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/warehouse/delete/{id}", Method.Post);
+
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdateWarehouseResponse>?> UpdateWarehouseAsync(UpdateWarehouseRequest data)
+    {
+        var request = new RestRequest("api/warehouse/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateWarehouseResponse>(_client, request);
+    }
+}
@@ -0,0 +1,92 @@
+@page "/medical"
+@using Indotalent.Features.Medical.MedicalRecord.Components
+@using Indotalent.Features.Medical.MedicalRecordCategory.Components
+@using Indotalent.Features.Medical.MedicalRecordGroup.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: 0px !important;
+    }
+
+    .clean-white-tabs .mud-tab {
+        color: #94a3b8 !important;
+        text-transform: none;
+        font-weight: 500;
+        min-width: 150px;
+        border-radius: 0px !important;
+    }
+
+    .clean-white-tabs .mud-tab-active {
+        color: var(--mud-palette-primary) !important;
+        font-weight: 800;
+    }
+
+    .clean-white-tabs .mud-tabs-slider {
+        background-color: var(--mud-palette-primary) !important;
+        height: 3px !important;
+        bottom: 0;
+    }
+</style>
+
+<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-2 mb-8">
+    <div class="clean-white-tabs">
+        <MudTabs Elevation="0"
+                 ActivePanelIndex="@_activeTabIndex"
+                 ActivePanelIndexChanged="OnTabChanged"
+                 ApplyEffectsToContainer="true"
+                 TabPanelsClass="pt-4"
+                 ScrollButtons="ScrollButtons.Always">
+
+            <MudTabPanel Text="Medical Record" Icon="@Icons.Material.Outlined.Assignment">
+                <MedicalRecordPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Medical Record Group" Icon="@Icons.Material.Outlined.AccountTree">
+                <MedicalRecordGroupPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Medical Record Category" Icon="@Icons.Material.Outlined.Category">
+                <MedicalRecordCategoryPage />
+            </MudTabPanel>
+
+        </MudTabs>
+    </div>
+</MudContainer>
+
+@code {
+    private int _activeTabIndex = 0;
+
+    private readonly Dictionary<int, string> _tabMapping = new()
+    {
+        { 0, "medical-record" },
+        { 1, "medical-record-group" },
+        { 2, "medical-record-category" }
+    };
+
+    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($"/medical?tab={tabName ?? "medical-record"}", replace: false);
+    }
+}
@@ -0,0 +1,28 @@
+@page "/medical/medical-record"
+@using Indotalent.Features.Medical.MedicalRecord
+@using Indotalent.Features.Medical.MedicalRecord.Cqrs
+@using Indotalent.Features.Medical.MedicalRecord.Components
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_MedicalRecordCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_MedicalRecordUpdateForm Data="_selectedData!" ReadOnly="@(_currentView == ViewMode.View)" OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_MedicalRecordDataTable 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 UpdateMedicalRecordRequest? _selectedData;
+    private void ShowCreate() => _currentView = ViewMode.Create;
+    private void ShowUpdate(UpdateMedicalRecordRequest 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,184 @@
+@using Indotalent.Features.Medical.MedicalRecord
+@using Indotalent.Features.Medical.MedicalRecord.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject MedicalRecordService MedicalRecordService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" 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 Medical Record</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Create a new clinical examination record for patient.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; 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;">Administration & Metadata</MudText>
+                <MudDivider Class="mt-2 mb-4" />
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Record Date</MudText>
+                <MudDatePicker @bind-Date="_model.RecordDate" For="@(() => _model.RecordDate)" Variant="Variant.Outlined" Margin="Margin.Dense"/>
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Patient</MudText>
+                <MudSelect @bind-Value="_model.PatientId" For="@(() => _model.PatientId)" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Dense="true">
+                    @foreach (var item in _lookupData.Patients)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Examining Doctor</MudText>
+                <MudSelect @bind-Value="_model.EmployeeId" For="@(() => _model.EmployeeId)" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Dense="true">
+                    @foreach (var item in _lookupData.Doctors)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Group</MudText>
+                <MudSelect @bind-Value="_model.MedicalRecordGroupId" For="@(() => _model.MedicalRecordGroupId)" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Dense="true">
+                    @foreach (var item in _lookupData.MedicalRecordGroups)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Category</MudText>
+                <MudSelect @bind-Value="_model.MedicalRecordCategoryId" For="@(() => _model.MedicalRecordCategoryId)" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Dense="true">
+                    @foreach (var item in _lookupData.MedicalRecordCategories)
+                    {
+                        <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" sm="4">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Record Status</MudText>
+                <MudSelect @bind-Value="_model.Status" For="@(() => _model.Status)" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Dense="true">
+                    @foreach (var item in _lookupData.Statuses)
+                    {
+                        <MudSelectItem Value="@((Indotalent.Data.Enums.MedicalRecordStatus)item.Value)">@item.Name</MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
+
+            <MudItem xs="12" Class="mt-4">
+                <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Vital Signs</MudText>
+                <MudDivider Class="mt-2 mb-4" />
+            </MudItem>
+
+            <MudItem xs="12" sm="2">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Blood Pressure</MudText>
+                <MudTextField @bind-Value="_model.BloodPressure" Placeholder="120/80 mmHg" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="2">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Temperature</MudText>
+                <MudTextField @bind-Value="_model.Temperature" Placeholder="36.5 C" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="2">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Heart Rate</MudText>
+                <MudTextField @bind-Value="_model.HeartRate" Placeholder="80 bpm" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="3">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Weight</MudText>
+                <MudTextField @bind-Value="_model.Weight" Placeholder="kg" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="3">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Height</MudText>
+                <MudTextField @bind-Value="_model.Height" Placeholder="cm" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+
+            <MudItem xs="12" Class="mt-4">
+                <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Clinical Findings (SOAP)</MudText>
+                <MudDivider Class="mt-2 mb-4" />
+            </MudItem>
+
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Subjective (S)</MudText>
+                <MudTextField @bind-Value="_model.Subjective" Placeholder="Patient's complaints..." Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Objective (O)</MudText>
+                <MudTextField @bind-Value="_model.Objective" Placeholder="Physical exam results..." Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Assessment (A)</MudText>
+                <MudTextField @bind-Value="_model.Assessment" For="@(() => _model.Assessment)" Placeholder="Diagnosis..." Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12" sm="6">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Planning (P)</MudText>
+                <MudTextField @bind-Value="_model.Planning" Placeholder="Treatment plan..." Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+            </MudItem>
+
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Additional Notes</MudText>
+                <MudTextField @bind-Value="_model.Description" Variant="Variant.Outlined" Margin="Margin.Dense" Lines="2" 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: 8px; text-transform: none; font-weight: 700;">Cancel</MudButton>
+            <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 8px; 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 Medical Record</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+    private MudForm _form = default!;
+    private CreateMedicalRecordValidator _validator = new();
+    private CreateMedicalRecordRequest _model = new() { RecordDate = DateTime.Now };
+    private LookupMedicalRecordResponse _lookupData = new();
+    private bool _processing = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var response = await MedicalRecordService.GetMedicalRecordLookupAsync();
+        if (response != null && response.IsSuccess) { _lookupData = response.Value!; }
+    }
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await MedicalRecordService.CreateMedicalRecordAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Medical record created successfully", Severity.Success);
+                await OnSuccess.InvokeAsync();
+            }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,357 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Medical.MedicalRecord
+@using Indotalent.Features.Medical.MedicalRecord.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject MedicalRecordService MedicalRecordService
+@inject IDialogService DialogService
+@inject ISnackbar Snackbar
+@inject IJSRuntime JSRuntime
+
+<MudPaper Elevation="0" 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;">Medical Record Management</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF;">Maintain and track patient clinical encounter records.</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;">Medical</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Medical Record</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 patient or record number..."
+                          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: 12px;"
+                          OnKeyDown="@HandleSearchKeyDown" />
+            
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Primary"
+                           OnClick="OnSearchClick"
+                           Size="Size.Small"
+                           Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                Search
+            </MudButton>
+        </div>
+
+        <div style="display: flex; gap: 8px; align-items: center;">
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Success"
+                           OnClick="ExportToExcel"
+                           Size="Size.Small"
+                           Disabled="_isExporting"
+                           StartIcon="@(_isExporting ? null : Icons.Custom.FileFormats.FileExcel)"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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.Text"
+                           Color="Color.Primary"
+                           OnClick="LoadData"
+                           Size="Size.Small"
+                           StartIcon="@(_isRefreshing ? null : Icons.Material.Filled.Refresh)"
+                           Disabled="_isRefreshing"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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 (_selectedRecord != null)
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Info"
+                               StartIcon="@Icons.Material.Filled.Visibility"
+                               OnClick="InvokeView"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">View</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Edit"
+                               OnClick="InvokeEdit"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">Edit</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Error"
+                               StartIcon="@Icons.Material.Filled.Delete"
+                               OnClick="OnDelete"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #FCA5A5; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">
+                Remove
+            </MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedRecord = 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: 700; border-radius: 12px; height: 34px;">
+                    Add Medical Record
+                </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Striped="true" Class="mud-table-styled" Hover="true" Elevation="0" CustomHeader="true" Dense="true" T="GetMedicalRecordListResponse" OnRowClick="@((args) => _selectedRecord = args.Item)" Loading="@_isRefreshing">
+        <HeaderContent>
+            <MudTh Style="width: 50px; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;"></MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetMedicalRecordListResponse, object>(x => x.PatientName!)">Patient & Record</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetMedicalRecordListResponse, object>(x => x.RecordDate!)">Date</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">Doctor</MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">Assessment / Diagnosis</MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">Status</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedRecord?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>
+                <div class="d-flex flex-column">
+                    <MudText Typo="Typo.body2" Style="font-weight: 600; color: #374151;">@context.PatientName</MudText>
+                    <MudText Typo="Typo.caption" Style="color: #9CA3AF;">@context.AutoNumber</MudText>
+                </div>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6B7280; font-size: 0.875rem;">@context.RecordDate?.ToString("MM/dd/yyyy")</MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6B7280; font-size: 0.875rem;">@context.EmployeeName</MudTd>
+            <MudTd>
+                <MudText Typo="Typo.body2" Style="max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                    @context.Assessment
+                </MudText>
+            </MudTd>
+            <MudTd>
+                <MudChip T="string" Size="Size.Small" Variant="Variant.Text"
+                         Color="@(context.Status == Indotalent.Data.Enums.MedicalRecordStatus.Completed ? Color.Success : Color.Info)"
+                         Style="font-weight: 700; border-radius: 16px;">@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: 110px; background-color: white; font-size: 12px; font-weight: 600; border-radius: 6px;" Variant="Variant.Outlined" Class="mt-0 custom-select-dense">
+                <MudSelectItem Value="5" />
+                <MudSelectItem Value="10" />
+                <MudSelectItem Value="50" />
+            </MudSelect>
+            <MudText Typo="Typo.caption" Style="color: #9CA3AF; margin-left: 12px;">
+                Showing @(GetFilteredData().Count() == 0 ? 0 : _skip + 1)-@Math.Min(_skip + _top, GetFilteredData().Count()) of @GetFilteredData().Count()
+            </MudText>
+        </div>
+        <div style="display: flex; gap: 8px; align-items: center;">
+            <MudIconButton Icon="@Icons.Material.Filled.FirstPage" Size="Size.Small" OnClick="@(() => OnPageChanged(1))" Disabled="@(_currentPage == 1)" Style="@(_currentPage == 1 ? "color: #D1D5DB; background: transparent;" : "color: #6B7280; background: white; border: 1px solid #D1D5DB; border-radius: 6px;")"  />
+            <MudButton OnClick="@(() => OnPageChanged(_currentPage - 1))" Disabled="@(_currentPage == 1)" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ChevronLeft" Size="Size.Small" Style="@(_currentPage == 1 ? "text-transform: none; font-weight: 500; color: #D1D5DB;" : "text-transform: none; font-weight: 500; color: #374151;")">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: #374151;")">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-input-outlined-border { border-radius: 6px !important; }
+    .custom-select-dense .mud-input { min-height: 24px !important; max-height: 24px !important; }
+    .custom-select-dense .mud-input-slot { padding-top: 1px !important; padding-bottom: 1px !important; padding-left: 6px !important; padding-right: 2px !important; font-size: 11px !important; min-height: unset !important; line-height: 1.2 !important; }
+    .custom-select-dense .mud-select-input { padding-top: 1px !important; padding-bottom: 1px !important; font-size: 11px !important; }
+        .mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+
+
+@code {
+    [Parameter] public EventCallback OnAdd { get; set; }
+    [Parameter] public EventCallback<UpdateMedicalRecordRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateMedicalRecordRequest> OnView { get; set; }
+
+    private List<GetMedicalRecordListResponse> _records = new();
+    private GetMedicalRecordListResponse? _selectedRecord;
+    private string _searchString = "";
+    private bool _isRefreshing = false;
+    private bool _isExporting = false;
+    private int _skip = 0;
+    private int _top = 10;
+    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;
+        _selectedRecord = null;
+        StateHasChanged();
+        try
+        {
+            var response = await MedicalRecordService.GetMedicalRecordListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess) { _records = response.Value ?? new List<GetMedicalRecordListResponse>(); }
+        }
+        finally { _isRefreshing = false; StateHasChanged(); }
+    }
+
+    private IEnumerable<GetMedicalRecordListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _records;
+        return _records.Where(x =>
+            (x.PatientName?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.AutoNumber?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Assessment?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetMedicalRecordListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+    private void OnSearchClick() { _skip = 0; _selectedRecord = 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("MedicalRecords");
+                
+                var headerRange = worksheet.Range(1, 1, 1, 6);
+                headerRange.Style.Font.Bold = true;
+                headerRange.Style.Fill.BackgroundColor = XLColor.FromHtml("#9CA3AF");
+                headerRange.Style.Font.FontColor = XLColor.White;
+
+                worksheet.Cell(1, 1).Value = "Record Number";
+                worksheet.Cell(1, 2).Value = "Date";
+                worksheet.Cell(1, 3).Value = "Patient Name";
+                worksheet.Cell(1, 4).Value = "Doctor";
+                worksheet.Cell(1, 5).Value = "Assessment / Diagnosis";
+                worksheet.Cell(1, 6).Value = "Status";
+                
+                var currentRow = 1;
+                foreach (var item in GetFilteredData())
+                {
+                    currentRow++;
+                    worksheet.Cell(currentRow, 1).Value = item.AutoNumber;
+                    worksheet.Cell(currentRow, 2).Value = item.RecordDate?.ToString("MM/dd/yyyy");
+                    worksheet.Cell(currentRow, 3).Value = item.PatientName;
+                    worksheet.Cell(currentRow, 4).Value = item.EmployeeName;
+                    worksheet.Cell(currentRow, 5).Value = item.Assessment;
+                    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", "Medical_Record_List.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", content);
+                    Snackbar.Add("Medical records 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; _selectedRecord = null; StateHasChanged(); } }
+    private void OnPageSizeChanged(int size) { _top = size; _skip = 0; _selectedRecord = null; StateHasChanged(); }
+
+    private async Task InvokeEdit() { if (_selectedRecord != null) { var req = await MapToUpdateRequest(_selectedRecord.Id!); if (req != null) await OnEdit.InvokeAsync(req); } }
+    private async Task InvokeView() { if (_selectedRecord != null) { var req = await MapToUpdateRequest(_selectedRecord.Id!); if (req != null) await OnView.InvokeAsync(req); } }
+
+    private async Task<UpdateMedicalRecordRequest?> MapToUpdateRequest(string id)
+    {
+        var response = await MedicalRecordService.GetMedicalRecordByIdAsync(id);
+        if (response != null && response.IsSuccess && response.Value != null)
+        {
+            var d = response.Value;
+            return new UpdateMedicalRecordRequest
+            {
+                Id = d.Id,
+                AutoNumber = d.AutoNumber,
+                RecordDate = d.RecordDate,
+                PatientId = d.PatientId,
+                EmployeeId = d.EmployeeId,
+                Subjective = d.Subjective,
+                Objective = d.Objective,
+                Assessment = d.Assessment,
+                Planning = d.Planning,
+                BloodPressure = d.BloodPressure,
+                Temperature = d.Temperature,
+                HeartRate = d.HeartRate,
+                Weight = d.Weight,
+                Height = d.Height,
+                Status = d.Status,
+                Description = d.Description,
+                MedicalRecordGroupId = d.MedicalRecordGroupId,
+                MedicalRecordCategoryId = d.MedicalRecordCategoryId,
+                CreatedAt = d.CreatedAt,
+                CreatedBy = d.CreatedBy,
+                UpdatedAt = d.UpdatedAt,
+                UpdatedBy = d.UpdatedBy
+            };
+        }
+        return null;
+    }
+
+    private async Task OnDelete()
+    {
+        if (_selectedRecord == null) return;
+        var parameters = new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, $"{_selectedRecord.AutoNumber} ({_selectedRecord.PatientName})" } };
+        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 success = await MedicalRecordService.DeleteMedicalRecordByIdAsync(_selectedRecord.Id!);
+            if (success) { _selectedRecord = null; await LoadData(); Snackbar.Add("Medical record deleted successfully", Severity.Success); }
+        }
+    }
+}
@@ -0,0 +1,257 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Medical.MedicalRecord
+@using Indotalent.Features.Medical.MedicalRecord.Cqrs
+@using Indotalent.Features.Medical.MedicalRecord.Components
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject MedicalRecordService MedicalRecordService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" 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 ? "Medical Record Detail" : "Edit Medical Record")</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">@(ReadOnly ? "Viewing detailed clinical examination record." : "Update clinical findings and vital signs.")</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    @if (_isDataLoading)
+    {
+        <div class="d-flex justify-center pa-10"><MudProgressCircular Color="Color.Primary" Indeterminate="true" /></div>
+    }
+    else
+    {
+        <MudForm @ref="_form" Model="_model">
+            <MudGrid Spacing="3">
+                <MudItem xs="12">
+                    <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Administration & Metadata</MudText>
+                    <MudDivider Class="mt-2 mb-4" />
+                </MudItem>
+
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Record Number</MudText>
+                    <MudTextField @bind-Value="_model.AutoNumber" ReadOnly="true" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+                </MudItem>
+
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Record Date</MudText>
+                    <MudDatePicker @bind-Date="_model.RecordDate" For="@(() => _model.RecordDate)" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                </MudItem>
+
+                <MudItem xs="12" sm="4">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Record Status</MudText>
+                    <MudSelect @bind-Value="_model.Status" For="@(() => _model.Status)" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Dense="true">
+                        @foreach (var item in _lookupData.Statuses)
+                        {
+                            <MudSelectItem Value="@((Indotalent.Data.Enums.MedicalRecordStatus)item.Value)">@item.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Patient</MudText>
+                    <MudSelect @bind-Value="_model.PatientId" For="@(() => _model.PatientId)" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Dense="true">
+                        @foreach (var item in _lookupData.Patients)
+                        {
+                            <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Examining Doctor</MudText>
+                    <MudSelect @bind-Value="_model.EmployeeId" For="@(() => _model.EmployeeId)" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Dense="true">
+                        @foreach (var item in _lookupData.Doctors)
+                        {
+                            <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Group</MudText>
+                    <MudSelect @bind-Value="_model.MedicalRecordGroupId" For="@(() => _model.MedicalRecordGroupId)" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Dense="true">
+                        @foreach (var item in _lookupData.MedicalRecordGroups)
+                        {
+                            <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Category</MudText>
+                    <MudSelect @bind-Value="_model.MedicalRecordCategoryId" For="@(() => _model.MedicalRecordCategoryId)" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Dense="true">
+                        @foreach (var item in _lookupData.MedicalRecordCategories)
+                        {
+                            <MudSelectItem Value="@item.Id">@item.Name</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+
+                <MudItem xs="12" Class="mt-4">
+                    <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Vital Signs</MudText>
+                    <MudDivider Class="mt-2 mb-4" />
+                </MudItem>
+
+                <MudItem xs="12" sm="2">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Blood Pressure</MudText>
+                    <MudTextField @bind-Value="_model.BloodPressure" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+                </MudItem>
+                <MudItem xs="12" sm="2">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Temperature</MudText>
+                    <MudTextField @bind-Value="_model.Temperature" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+                </MudItem>
+                <MudItem xs="12" sm="2">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Heart Rate</MudText>
+                    <MudTextField @bind-Value="_model.HeartRate" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+                </MudItem>
+                <MudItem xs="12" sm="3">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Weight</MudText>
+                    <MudTextField @bind-Value="_model.Weight" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+                </MudItem>
+                <MudItem xs="12" sm="3">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Height</MudText>
+                    <MudTextField @bind-Value="_model.Height" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+                </MudItem>
+
+                <MudItem xs="12" Class="mt-4">
+                    <MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 800;">Clinical Findings (SOAP)</MudText>
+                    <MudDivider Class="mt-2 mb-4" />
+                </MudItem>
+
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Subjective (S)</MudText>
+                    <MudTextField @bind-Value="_model.Subjective" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Objective (O)</MudText>
+                    <MudTextField @bind-Value="_model.Objective" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Assessment (A)</MudText>
+                    <MudTextField @bind-Value="_model.Assessment" For="@(() => _model.Assessment)" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Planning (P)</MudText>
+                    <MudTextField @bind-Value="_model.Planning" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+                </MudItem>
+
+                <MudItem xs="12">
+                    <MudText Typo="Typo.subtitle2" Class="mb-1">Additional Notes</MudText>
+                    <MudTextField @bind-Value="_model.Description" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Lines="2" FullWidth="true" />
+                </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: 8px; text-transform: none; font-weight: 700;">@(ReadOnly ? "Back to List" : "Cancel")</MudButton>
+                @if (!ReadOnly)
+                {
+                    <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 8px; 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 UpdateMedicalRecordRequest 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 UpdateMedicalRecordValidator _validator = new();
+    private GetMedicalRecordByIdResponse _model = new();
+    private LookupMedicalRecordResponse _lookupData = new();
+    private bool _processing = false;
+    private bool _isDataLoading = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await RefreshData();
+    }
+
+    private async Task RefreshData()
+    {
+        _isDataLoading = true;
+        try
+        {
+            var response = await MedicalRecordService.GetMedicalRecordLookupAsync();
+            if (response != null && response.IsSuccess) { _lookupData = response.Value!; }
+
+            var medical = await MedicalRecordService.GetMedicalRecordByIdAsync(Data.Id!);
+            if (medical != null && medical.IsSuccess) { _model = medical.Value!; }
+        }
+        finally { _isDataLoading = false; }
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var updateRequest = new UpdateMedicalRecordRequest
+            {
+                Id = _model.Id,
+                AutoNumber = _model.AutoNumber,
+                RecordDate = _model.RecordDate,
+                PatientId = _model.PatientId,
+                EmployeeId = _model.EmployeeId,
+                Subjective = _model.Subjective,
+                Objective = _model.Objective,
+                Assessment = _model.Assessment,
+                Planning = _model.Planning,
+                BloodPressure = _model.BloodPressure,
+                Temperature = _model.Temperature,
+                HeartRate = _model.HeartRate,
+                Weight = _model.Weight,
+                Height = _model.Height,
+                Status = _model.Status,
+                Description = _model.Description,
+                MedicalRecordGroupId = _model.MedicalRecordGroupId,
+                MedicalRecordCategoryId = _model.MedicalRecordCategoryId
+            };
+
+            var response = await MedicalRecordService.UpdateMedicalRecordAsync(updateRequest);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess) { Snackbar.Add("Medical record updated successfully", Severity.Success); await OnSuccess.InvokeAsync(); }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,84 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Data.Enums;
+
+namespace Indotalent.Features.Medical.MedicalRecord.Cqrs;
+
+public class CreateMedicalRecordRequest
+{
+    public DateTime? RecordDate { get; set; }
+    public string? PatientId { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? Subjective { get; set; }
+    public string? Objective { get; set; }
+    public string? Assessment { get; set; }
+    public string? Planning { get; set; }
+    public string? BloodPressure { get; set; }
+    public string? Temperature { get; set; }
+    public string? HeartRate { get; set; }
+    public string? Weight { get; set; }
+    public string? Height { get; set; }
+    public MedicalRecordStatus Status { get; set; }
+    public string? Description { get; set; }
+    public string? MedicalRecordGroupId { get; set; }
+    public string? MedicalRecordCategoryId { get; set; }
+}
+
+public class CreateMedicalRecordResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+}
+
+public record CreateMedicalRecordCommand(CreateMedicalRecordRequest Data) : IRequest<CreateMedicalRecordResponse>;
+
+public class CreateMedicalRecordHandler : IRequestHandler<CreateMedicalRecordCommand, CreateMedicalRecordResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateMedicalRecordHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateMedicalRecordResponse> Handle(CreateMedicalRecordCommand request, CancellationToken cancellationToken)
+    {
+        var entityName = nameof(Data.Entities.MedicalRecord);
+
+        var autoNo = await _context.GenerateAutoNumberAsync(
+            entityName: entityName,
+            prefixTemplate: $"MR/{{Year}}/{{Month}}/",
+            ct: cancellationToken
+        );
+
+        var entity = new Data.Entities.MedicalRecord
+        {
+            AutoNumber = autoNo,
+            RecordDate = request.Data.RecordDate ?? DateTime.Now,
+            PatientId = request.Data.PatientId,
+            EmployeeId = request.Data.EmployeeId,
+            Subjective = request.Data.Subjective,
+            Objective = request.Data.Objective,
+            Assessment = request.Data.Assessment,
+            Planning = request.Data.Planning,
+            BloodPressure = request.Data.BloodPressure,
+            Temperature = request.Data.Temperature,
+            HeartRate = request.Data.HeartRate,
+            Weight = request.Data.Weight,
+            Height = request.Data.Height,
+            Status = request.Data.Status,
+            Description = request.Data.Description,
+            MedicalRecordGroupId = request.Data.MedicalRecordGroupId,
+            MedicalRecordCategoryId = request.Data.MedicalRecordCategoryId
+        };
+
+        _context.MedicalRecord.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateMedicalRecordResponse
+        {
+            Id = entity.Id,
+            AutoNumber = entity.AutoNumber
+        };
+    }
+}
@@ -0,0 +1,53 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Medical.MedicalRecord.Cqrs;
+
+public class CreateMedicalRecordValidator : AbstractValidator<CreateMedicalRecordRequest>
+{
+    public CreateMedicalRecordValidator()
+    {
+        RuleFor(x => x.RecordDate)
+            .NotEmpty().WithMessage("Record Date is required");
+
+        RuleFor(x => x.PatientId)
+            .NotEmpty().WithMessage("Patient is required");
+
+        RuleFor(x => x.EmployeeId)
+            .NotEmpty().WithMessage("Examining Doctor is required");
+
+        RuleFor(x => x.MedicalRecordGroupId)
+            .NotEmpty().WithMessage("Medical Record Group is required");
+
+        RuleFor(x => x.MedicalRecordCategoryId)
+            .NotEmpty().WithMessage("Medical Record Category is required");
+
+        RuleFor(x => x.Assessment)
+            .NotEmpty().WithMessage("Assessment (Diagnosis) is required")
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+
+        RuleFor(x => x.Subjective)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+
+        RuleFor(x => x.Objective)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+
+        RuleFor(x => x.Planning)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+
+        RuleFor(x => x.BloodPressure)
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Temperature)
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.HeartRate)
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Weight)
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Height)
+            .MaximumLength(GlobalConsts.StringLengthShort);
+    }
+}
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Medical.MedicalRecord.Cqrs;
+
+public record DeleteMedicalRecordByIdRequest(string Id);
+
+public record DeleteMedicalRecordByIdCommand(DeleteMedicalRecordByIdRequest Data) : IRequest<bool>;
+
+public class DeleteMedicalRecordByIdHandler : IRequestHandler<DeleteMedicalRecordByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteMedicalRecordByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteMedicalRecordByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.MedicalRecord
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.MedicalRecord.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,80 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Data.Enums;
+
+namespace Indotalent.Features.Medical.MedicalRecord.Cqrs;
+
+public class GetMedicalRecordByIdResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public DateTime? RecordDate { get; set; }
+    public string? PatientId { get; set; }
+    public string? PatientName { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? Subjective { get; set; }
+    public string? Objective { get; set; }
+    public string? Assessment { get; set; }
+    public string? Planning { get; set; }
+    public string? BloodPressure { get; set; }
+    public string? Temperature { get; set; }
+    public string? HeartRate { get; set; }
+    public string? Weight { get; set; }
+    public string? Height { get; set; }
+    public MedicalRecordStatus Status { get; set; }
+    public string? Description { get; set; }
+    public string? MedicalRecordGroupId { get; set; }
+    public string? MedicalRecordCategoryId { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetMedicalRecordByIdQuery(string Id) : IRequest<GetMedicalRecordByIdResponse?>;
+
+public class GetMedicalRecordByIdHandler : IRequestHandler<GetMedicalRecordByIdQuery, GetMedicalRecordByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetMedicalRecordByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetMedicalRecordByIdResponse?> Handle(GetMedicalRecordByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.MedicalRecord
+            .AsNoTracking()
+            .Include(x => x.Patient)
+            .Include(x => x.Employee)
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetMedicalRecordByIdResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                RecordDate = x.RecordDate,
+                PatientId = x.PatientId,
+                PatientName = x.Patient != null ? x.Patient.Name : string.Empty,
+                EmployeeId = x.EmployeeId,
+                EmployeeName = x.Employee != null ? x.Employee.Name : string.Empty,
+                Subjective = x.Subjective,
+                Objective = x.Objective,
+                Assessment = x.Assessment,
+                Planning = x.Planning,
+                BloodPressure = x.BloodPressure,
+                Temperature = x.Temperature,
+                HeartRate = x.HeartRate,
+                Weight = x.Weight,
+                Height = x.Height,
+                Status = x.Status,
+                Description = x.Description,
+                MedicalRecordGroupId = x.MedicalRecordGroupId,
+                MedicalRecordCategoryId = x.MedicalRecordCategoryId,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,52 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Data.Enums;
+
+namespace Indotalent.Features.Medical.MedicalRecord.Cqrs;
+
+public class GetMedicalRecordListResponse
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public DateTime? RecordDate { get; set; }
+    public string? PatientName { get; set; }
+    public string? EmployeeName { get; set; }
+    public string? Assessment { get; set; }
+    public MedicalRecordStatus Status { get; set; }
+    public string? MedicalRecordGroupName { get; set; }
+    public string? MedicalRecordCategoryName { get; set; }
+}
+
+public record GetMedicalRecordListQuery() : IRequest<List<GetMedicalRecordListResponse>>;
+
+public class GetMedicalRecordListHandler : IRequestHandler<GetMedicalRecordListQuery, List<GetMedicalRecordListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetMedicalRecordListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetMedicalRecordListResponse>> Handle(GetMedicalRecordListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.MedicalRecord
+            .AsNoTracking()
+            .Include(x => x.Patient)
+            .Include(x => x.Employee)
+            .Include(x => x.MedicalRecordGroup)
+            .Include(x => x.MedicalRecordCategory)
+            .OrderByDescending(x => x.RecordDate)
+            .Select(x => new GetMedicalRecordListResponse
+            {
+                Id = x.Id,
+                AutoNumber = x.AutoNumber,
+                RecordDate = x.RecordDate,
+                PatientName = x.Patient != null ? x.Patient.Name : string.Empty,
+                EmployeeName = x.Employee != null ? x.Employee.Name : string.Empty,
+                Assessment = x.Assessment,
+                Status = x.Status,
+                MedicalRecordGroupName = x.MedicalRecordGroup != null ? x.MedicalRecordGroup.Name : string.Empty,
+                MedicalRecordCategoryName = x.MedicalRecordCategory != null ? x.MedicalRecordCategory.Name : string.Empty
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,78 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Data.Enums;
+using Indotalent.Shared.Utils;
+
+namespace Indotalent.Features.Medical.MedicalRecord.Cqrs;
+
+public class LookupMedicalRecordResponse
+{
+    public List<LookupItem> MedicalRecordGroups { get; set; } = new();
+    public List<LookupItem> MedicalRecordCategories { get; set; } = new();
+    public List<LookupItem> Patients { get; set; } = new();
+    public List<LookupItem> Doctors { get; set; } = new();
+    public List<StatusLookupItem> Statuses { get; set; } = new();
+}
+
+public class LookupItem
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+}
+
+public class StatusLookupItem
+{
+    public int Value { get; set; }
+    public string? Name { get; set; }
+}
+
+public record LookupMedicalRecordQuery() : IRequest<LookupMedicalRecordResponse>;
+
+public class LookupMedicalRecordHandler : IRequestHandler<LookupMedicalRecordQuery, LookupMedicalRecordResponse>
+{
+    private readonly AppDbContext _context;
+
+    public LookupMedicalRecordHandler(AppDbContext context) => _context = context;
+
+    public async Task<LookupMedicalRecordResponse> Handle(LookupMedicalRecordQuery request, CancellationToken cancellationToken)
+    {
+        var result = new LookupMedicalRecordResponse();
+
+        result.MedicalRecordGroups = await _context.MedicalRecordGroup
+            .AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        result.MedicalRecordCategories = await _context.MedicalRecordCategory
+            .AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        result.Patients = await _context.Patient
+            .AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        result.Doctors = await _context.Employee
+            .AsNoTracking()
+            .Where(x => x.Name!.StartsWith("Dr.") || x.JobTitle!.Contains("Practitioner") || x.JobTitle!.Contains("Surgeon"))
+            .OrderBy(x => x.Name)
+            .Select(x => new LookupItem { Id = x.Id, Name = x.Name })
+            .ToListAsync(cancellationToken);
+
+        result.Statuses = Enum.GetValues(typeof(MedicalRecordStatus))
+            .Cast<MedicalRecordStatus>()
+            .Select(x => new StatusLookupItem
+            {
+                Value = (int)x,
+                Name = x.ToString()
+            })
+            .ToList();
+
+        return result;
+    }
+}
@@ -0,0 +1,84 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+using Indotalent.Data.Enums;
+
+namespace Indotalent.Features.Medical.MedicalRecord.Cqrs;
+
+public class UpdateMedicalRecordRequest
+{
+    public string? Id { get; set; }
+    public string? AutoNumber { get; set; }
+    public DateTime? RecordDate { get; set; }
+    public string? PatientId { get; set; }
+    public string? EmployeeId { get; set; }
+    public string? Subjective { get; set; }
+    public string? Objective { get; set; }
+    public string? Assessment { get; set; }
+    public string? Planning { get; set; }
+    public string? BloodPressure { get; set; }
+    public string? Temperature { get; set; }
+    public string? HeartRate { get; set; }
+    public string? Weight { get; set; }
+    public string? Height { get; set; }
+    public MedicalRecordStatus Status { get; set; }
+    public string? Description { get; set; }
+    public string? MedicalRecordGroupId { get; set; }
+    public string? MedicalRecordCategoryId { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateMedicalRecordResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateMedicalRecordCommand(UpdateMedicalRecordRequest Data) : IRequest<UpdateMedicalRecordResponse>;
+
+public class UpdateMedicalRecordHandler : IRequestHandler<UpdateMedicalRecordCommand, UpdateMedicalRecordResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateMedicalRecordHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateMedicalRecordResponse> Handle(UpdateMedicalRecordCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.MedicalRecord
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateMedicalRecordResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.RecordDate = request.Data.RecordDate;
+        entity.PatientId = request.Data.PatientId;
+        entity.EmployeeId = request.Data.EmployeeId;
+        entity.Subjective = request.Data.Subjective;
+        entity.Objective = request.Data.Objective;
+        entity.Assessment = request.Data.Assessment;
+        entity.Planning = request.Data.Planning;
+        entity.BloodPressure = request.Data.BloodPressure;
+        entity.Temperature = request.Data.Temperature;
+        entity.HeartRate = request.Data.HeartRate;
+        entity.Weight = request.Data.Weight;
+        entity.Height = request.Data.Height;
+        entity.Status = request.Data.Status;
+        entity.Description = request.Data.Description;
+        entity.MedicalRecordGroupId = request.Data.MedicalRecordGroupId;
+        entity.MedicalRecordCategoryId = request.Data.MedicalRecordCategoryId;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateMedicalRecordResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,56 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Medical.MedicalRecord.Cqrs;
+
+public class UpdateMedicalRecordValidator : AbstractValidator<UpdateMedicalRecordRequest>
+{
+    public UpdateMedicalRecordValidator()
+    {
+        RuleFor(x => x.Id)
+            .NotEmpty().WithMessage("ID is required for update");
+
+        RuleFor(x => x.RecordDate)
+            .NotEmpty().WithMessage("Record Date is required");
+
+        RuleFor(x => x.PatientId)
+            .NotEmpty().WithMessage("Patient is required");
+
+        RuleFor(x => x.EmployeeId)
+            .NotEmpty().WithMessage("Examining Doctor is required");
+
+        RuleFor(x => x.MedicalRecordGroupId)
+            .NotEmpty().WithMessage("Medical Record Group is required");
+
+        RuleFor(x => x.MedicalRecordCategoryId)
+            .NotEmpty().WithMessage("Medical Record Category is required");
+
+        RuleFor(x => x.Assessment)
+            .NotEmpty().WithMessage("Assessment (Diagnosis) is required")
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+
+        RuleFor(x => x.Subjective)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+
+        RuleFor(x => x.Objective)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+
+        RuleFor(x => x.Planning)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+
+        RuleFor(x => x.BloodPressure)
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Temperature)
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.HeartRate)
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Weight)
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Height)
+            .MaximumLength(GlobalConsts.StringLengthShort);
+    }
+}
@@ -0,0 +1,75 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Medical.MedicalRecord.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Medical.MedicalRecord;
+
+public static class MedicalRecordEndpoint
+{
+    public static void MapMedicalRecordEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/medical-record").WithTags("MedicalRecords")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetMedicalRecordListQuery());
+            return result.ToApiResponse("Medical record list retrieved successfully");
+        })
+        .WithName("GetMedicalRecordList")
+        .WithTags("MedicalRecords");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetMedicalRecordByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Medical record detail retrieved successfully"
+                : $"Medical record with ID {id} not found");
+        })
+        .WithName("GetMedicalRecordById")
+        .WithTags("MedicalRecords");
+
+        group.MapGet("/lookup", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new LookupMedicalRecordQuery());
+            return result.ToApiResponse("Medical record lookup data retrieved successfully");
+        })
+        .WithName("GetMedicalRecordLookup")
+        .WithTags("MedicalRecords");
+
+        group.MapPost("/", async (CreateMedicalRecordRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateMedicalRecordCommand(request));
+            return result.ToApiResponse("Medical record has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateMedicalRecord")
+        .WithTags("MedicalRecords");
+
+        group.MapPost("/update", async (UpdateMedicalRecordRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateMedicalRecordCommand(request));
+            if (!result.Success)
+            {
+                return ((object?)null).ToApiResponse("Update failed. The medical record data could not be found.");
+            }
+            return result.ToApiResponse("Medical record has been updated successfully");
+        })
+        .WithName("UpdateMedicalRecord")
+        .WithTags("MedicalRecords");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteMedicalRecordByIdCommand(new DeleteMedicalRecordByIdRequest(id)));
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Delete failed. The medical record data could not be found.");
+            }
+            return true.ToApiResponse("Medical record has been deleted successfully");
+        })
+        .WithName("DeleteMedicalRecordById")
+        .WithTags("MedicalRecords");
+
+    }
+}
@@ -0,0 +1,65 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Medical.MedicalRecord.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Medical.MedicalRecord;
+
+public class MedicalRecordService : BaseService
+{
+    private readonly RestClient _client;
+
+    public MedicalRecordService(
+            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<GetMedicalRecordListResponse>>?> GetMedicalRecordListAsync()
+    {
+        var request = new RestRequest("api/medical-record", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetMedicalRecordListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetMedicalRecordByIdResponse>?> GetMedicalRecordByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/medical-record/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetMedicalRecordByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<LookupMedicalRecordResponse>?> GetMedicalRecordLookupAsync()
+    {
+        var request = new RestRequest("api/medical-record/lookup", Method.Get);
+        return await ExecuteWithResponseAsync<LookupMedicalRecordResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateMedicalRecordResponse>?> CreateMedicalRecordAsync(CreateMedicalRecordRequest data)
+    {
+        var request = new RestRequest("api/medical-record", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateMedicalRecordResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteMedicalRecordByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/medical-record/delete/{id}", Method.Post);
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdateMedicalRecordResponse>?> UpdateMedicalRecordAsync(UpdateMedicalRecordRequest data)
+    {
+        var request = new RestRequest("api/medical-record/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateMedicalRecordResponse>(_client, request);
+    }
+}
@@ -0,0 +1,28 @@
+@page "/medical/medical-record-category"
+@using Indotalent.Features.Medical.MedicalRecordCategory
+@using Indotalent.Features.Medical.MedicalRecordCategory.Cqrs
+@using Indotalent.Features.Medical.MedicalRecordCategory.Components
+@using MudBlazor
+
+@if (_currentView == ViewMode.Create)
+{
+    <_MedicalRecordCategoryCreateForm OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else if (_currentView == ViewMode.Update || _currentView == ViewMode.View)
+{
+    <_MedicalRecordCategoryUpdateForm Data="_selectedData!" ReadOnly="@(_currentView == ViewMode.View)" OnCancel="BackToTable" OnSuccess="HandleSuccess" />
+}
+else
+{
+    <_MedicalRecordCategoryDataTable 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 UpdateMedicalRecordCategoryRequest? _selectedData;
+    private void ShowCreate() => _currentView = ViewMode.Create;
+    private void ShowUpdate(UpdateMedicalRecordCategoryRequest 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,68 @@
+@using Indotalent.Features.Medical.MedicalRecordCategory
+@using Indotalent.Features.Medical.MedicalRecordCategory.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject MedicalRecordCategoryService MedicalRecordCategoryService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+    <div class="d-flex align-center gap-4">
+        <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
+        <div>
+            <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Add New Category</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Establish new classification for your medicalRecords.</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Category Name</MudText>
+                <MudTextField @bind-Value="_model.Name" For="@(() => _model.Name)" Validation="@(_validator.ValidateValue())" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" Placeholder="e.g. Premium, Standard, New" />
+            </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: 8px; text-transform: none; font-weight: 700;">Cancel</MudButton>
+            <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 8px; 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 Category</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudForm>
+</MudPaper>
+
+@code {
+    [Parameter] public EventCallback OnCancel { get; set; }
+    [Parameter] public EventCallback OnSuccess { get; set; }
+    private MudForm _form = default!;
+    private CreateMedicalRecordCategoryValidator _validator = new();
+    private CreateMedicalRecordCategoryRequest _model = new();
+    private bool _processing = false;
+
+    private async Task Submit()
+    {
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await MedicalRecordCategoryService.CreateMedicalRecordCategoryAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess) { Snackbar.Add("MedicalRecord category created successfully", Severity.Success); await OnSuccess.InvokeAsync(); }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,329 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Medical.MedicalRecordCategory
+@using Indotalent.Features.Medical.MedicalRecordCategory.Cqrs
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using MudBlazor
+@using Features.Root.Shared
+@using ClosedXML.Excel
+@using System.IO
+@inject MedicalRecordCategoryService MedicalRecordCategoryService
+@inject IDialogService DialogService
+@inject ISnackbar Snackbar
+@inject IJSRuntime JSRuntime
+
+<MudPaper Elevation="0" 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;">Medical Record Category</MudText>
+        <MudText Typo="Typo.body2" Style="color: #9CA3AF;">Organize and define medical record classifications.</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;">Medical</MudText>
+        <MudText Typo="Typo.caption" Style="color: #9CA3AF;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #111827;">Medical Record Category</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; overflow: hidden; background-color: #ffffff; border: 1px solid #E5E7EB;">
+
+    <div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; min-height: 80px;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <MudTextField @bind-Value="_searchString"
+                          Placeholder="Search..."
+                          Adornment="Adornment.Start"
+                          AdornmentIcon="@Icons.Material.Filled.Search"
+                          IconSize="Size.Small"
+                          Class="mt-0"
+                          Variant="Variant.Outlined"
+                          Margin="Margin.Dense"
+                          Style="background-color: white; width: 280px; border-radius: 12px;"
+                          OnKeyDown="@HandleSearchKeyDown" />
+            
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Primary"
+                           OnClick="OnSearchClick"
+                           Size="Size.Small"
+                           Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                Search
+            </MudButton>
+        </div>
+
+        <div style="display: flex; gap: 8px; align-items: center;">
+            <MudButton Variant="Variant.Text"
+                           Color="Color.Success"
+                           OnClick="ExportToExcel"
+                           Size="Size.Small"
+                           Disabled="_isExporting"
+                           StartIcon="@(_isExporting ? null : Icons.Custom.FileFormats.FileExcel)"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @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.Text"
+                           Color="Color.Primary"
+                           OnClick="LoadData"
+                           Size="Size.Small"
+                           StartIcon="@(_isRefreshing ? null : Icons.Material.Filled.Refresh)"
+                           Disabled="_isRefreshing"
+                           Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                @if (_isRefreshing)
+                {
+                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                    <MudText Class="ms-2" Typo="Typo.button" Style="text-transform: none !important;">Refreshing...</MudText>
+                }
+                else
+                {
+                    <MudText Typo="Typo.button" Style="text-transform: none !important;">Refresh</MudText>
+                }
+            </MudButton>
+
+            @if (_selectedCategory != null)
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Info"
+                               StartIcon="@Icons.Material.Filled.Visibility"
+                               OnClick="InvokeView"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">View</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Edit"
+                               OnClick="InvokeEdit"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #D1D5DB; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">Edit</MudButton>
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Error"
+                               StartIcon="@Icons.Material.Filled.Delete"
+                               OnClick="OnDelete"
+                               Size="Size.Small"
+                               Style="background:white; border:1px solid #FCA5A5; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 12px;">
+                Remove
+            </MudButton>
+                <MudIconButton Icon="@Icons.Material.Filled.Close" Size="Size.Small" OnClick="() => _selectedCategory = null" />
+            }
+            else
+            {
+                <MudButton Variant="Variant.Text"
+                               Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Add"
+                               OnClick="() => OnAdd.InvokeAsync()"
+                               Size="Size.Small"
+                               Style="background:#3B82F6; color:white; font-weight:500; border-radius:6px; text-transform:none; height:34px; padding:0 16px;">
+                        Add New
+                    </MudButton>
+            }
+        </div>
+    </div>
+
+    <MudTable Items="@GetPagedData()" Striped="true" Class="mud-table-styled" Hover="true" Elevation="0" CustomHeader="true" Dense="true" T="GetMedicalRecordCategoryListResponse" OnRowClick="@((args) => _selectedCategory = args.Item)" Loading="@_isRefreshing">
+        <HeaderContent>
+            <MudTh Style="width: 50px; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB;"></MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">
+                <MudTableSortLabel SortBy="new Func<GetMedicalRecordCategoryListResponse, object>(x => x.Name!)">Category Name</MudTableSortLabel>
+            </MudTh>
+            <MudTh Style="font-weight: 600; color: #6B7280; text-transform: uppercase; font-size: 0.6875rem; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; letter-spacing: 0.05em; white-space: nowrap;">Description</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd>
+                <MudCheckBox T="bool" Value="@(_selectedCategory?.Id == context.Id)" Color="Color.Primary" Dense="true" Size="Size.Small" ReadOnly="true" />
+            </MudTd>
+            <MudTd>
+                <div class="d-flex align-center gap-2">
+                    <MudAvatar Color="Color.Info" Variant="Variant.Filled" Size="Size.Small" Style="border-radius: 50%; font-size: 10px; font-weight: 700;">
+                        @(!string.IsNullOrWhiteSpace(context.Name) ? context.Name.ToInitial() : "?")
+                    </MudAvatar>
+                    <MudText Typo="Typo.body2" Style="font-weight: 600; color: #374151;">@context.Name</MudText>
+                </div>
+            </MudTd>
+            <MudTd Style="padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6B7280; font-size: 0.875rem;">@context.Description</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: 110px; background-color: white; font-size: 12px; font-weight: 600; border-radius: 6px;" 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;">
+                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: #374151;")">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: #374151;")">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-input-outlined-border { border-radius: 6px !important; }
+    .custom-select-dense .mud-input { min-height: 24px !important; max-height: 24px !important; }
+    .custom-select-dense .mud-input-slot { padding-top: 1px !important; padding-bottom: 1px !important; padding-left: 6px !important; padding-right: 2px !important; font-size: 11px !important; min-height: unset !important; line-height: 1.2 !important; }
+    .custom-select-dense .mud-select-input { padding-top: 1px !important; padding-bottom: 1px !important; font-size: 11px !important; }
+        .mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
+</style>
+
+
+@code {
+    [Parameter] public EventCallback OnAdd { get; set; }
+    [Parameter] public EventCallback<UpdateMedicalRecordCategoryRequest> OnEdit { get; set; }
+    [Parameter] public EventCallback<UpdateMedicalRecordCategoryRequest> OnView { get; set; }
+
+    private List<GetMedicalRecordCategoryListResponse> _categories = new();
+    private GetMedicalRecordCategoryListResponse? _selectedCategory;
+    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;
+        _selectedCategory = null;
+        StateHasChanged();
+        try
+        {
+            var response = await MedicalRecordCategoryService.GetMedicalRecordCategoryListAsync();
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                _categories = response.Value ?? new List<GetMedicalRecordCategoryListResponse>();
+            }
+        }
+        finally
+        {
+            _isRefreshing = false;
+            StateHasChanged();
+        }
+    }
+
+    private IEnumerable<GetMedicalRecordCategoryListResponse> GetFilteredData()
+    {
+        if (string.IsNullOrWhiteSpace(_searchString)) return _categories;
+        return _categories.Where(x =>
+            (x.Name?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false) ||
+            (x.Description?.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ?? false)
+        );
+    }
+
+    private IEnumerable<GetMedicalRecordCategoryListResponse> GetPagedData() => GetFilteredData().Skip(_skip).Take(_top);
+
+    private void OnSearchClick() { _skip = 0; _selectedCategory = 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("MedicalRecordCategories");
+                
+                var headerRange = worksheet.Range(1, 1, 1, 2);
+                headerRange.Style.Font.Bold = true;
+                headerRange.Style.Fill.BackgroundColor = XLColor.FromHtml("#9CA3AF");
+                headerRange.Style.Font.FontColor = XLColor.White;
+
+                worksheet.Cell(1, 1).Value = "Category Name";
+                worksheet.Cell(1, 2).Value = "Description";
+
+                var currentRow = 1;
+                foreach (var item in GetFilteredData())
+                {
+                    currentRow++;
+                    worksheet.Cell(currentRow, 1).Value = item.Name;
+                    worksheet.Cell(currentRow, 2).Value = item.Description;
+                }
+                worksheet.Columns().AdjustToContents();
+                using (var stream = new MemoryStream())
+                {
+                    workbook.SaveAs(stream);
+                    var content = Convert.ToBase64String(stream.ToArray());
+                    await JSRuntime.InvokeVoidAsync("downloadFile", "MedicalRecordCategory_List.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", content);
+                    Snackbar.Add("Category list 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; _selectedCategory = null; StateHasChanged(); } }
+    private void OnPageSizeChanged(int size) { _top = size; _skip = 0; _selectedCategory = null; StateHasChanged(); }
+
+    private async Task InvokeEdit() { if (_selectedCategory != null) { var req = await MapToUpdateRequest(_selectedCategory.Id!); if (req != null) await OnEdit.InvokeAsync(req); } }
+    private async Task InvokeView() { if (_selectedCategory != null) { var req = await MapToUpdateRequest(_selectedCategory.Id!); if (req != null) await OnView.InvokeAsync(req); } }
+
+    private async Task<UpdateMedicalRecordCategoryRequest?> MapToUpdateRequest(string id)
+    {
+        var response = await MedicalRecordCategoryService.GetMedicalRecordCategoryByIdAsync(id);
+        if (response != null && response.IsSuccess && response.Value != null)
+        {
+            var d = response.Value;
+            return new UpdateMedicalRecordCategoryRequest { Id = d.Id, Name = d.Name, Description = d.Description, CreatedAt = d.CreatedAt, CreatedBy = d.CreatedBy, UpdatedAt = d.UpdatedAt, UpdatedBy = d.UpdatedBy };
+        }
+        return null;
+    }
+
+    private async Task OnDelete()
+    {
+        if (_selectedCategory == null) return;
+        var parameters = new DialogParameters<_DeleteConfirmation> { { x => x.ContentText, _selectedCategory.Name } };
+        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 MedicalRecordCategoryService.DeleteMedicalRecordCategoryByIdAsync(_selectedCategory.Id!);
+            if (isSuccess) { _selectedCategory = null; await LoadData(); Snackbar.Add("Category deleted successfully", Severity.Success); }
+        }
+    }
+}
@@ -0,0 +1,83 @@
+@using Indotalent.ConfigBackEnd.Extensions
+@using Indotalent.Features.Medical.MedicalRecordCategory
+@using Indotalent.Features.Medical.MedicalRecordCategory.Cqrs
+@using Indotalent.Shared.Utils
+@using MudBlazor
+@inject MedicalRecordCategoryService MedicalRecordCategoryService
+@inject ISnackbar Snackbar
+
+<MudPaper Elevation="0" Class="pa-6 mb-3 d-flex align-center justify-space-between" Style="border: 1px solid #DCEBFA;">
+    <div class="d-flex align-center gap-4">
+        <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="() => OnCancel.InvokeAsync()" />
+        <div>
+            <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">@(ReadOnly ? "Category Details" : "Edit Category")</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">@(ReadOnly ? "Viewing category specification." : "Modify existing category information.")</MudText>
+        </div>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    <MudForm @ref="_form" Model="_model">
+        <MudGrid Spacing="3">
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Category Name</MudText>
+                <MudTextField @bind-Value="_model.Name" For="@(() => _model.Name)" Validation="@(_validator.ValidateValue())" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" FullWidth="true" />
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.subtitle2" Class="mb-1">Description</MudText>
+                <MudTextField @bind-Value="_model.Description" For="@(() => _model.Description)" ReadOnly="ReadOnly" Variant="Variant.Outlined" Margin="Margin.Dense" Lines="3" FullWidth="true" />
+            </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: 8px; text-transform: none; font-weight: 700;">@(ReadOnly ? "Back to List" : "Cancel")</MudButton>
+            @if (!ReadOnly)
+            {
+                <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="Submit" Disabled="_processing" Style="border-radius: 8px; 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 UpdateMedicalRecordCategoryRequest 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 UpdateMedicalRecordCategoryValidator _validator = new();
+    private UpdateMedicalRecordCategoryRequest _model = new();
+    private bool _processing = false;
+
+    protected override void OnInitialized()
+    {
+        _model = Data;
+    }
+
+    private async Task Submit()
+    {
+        if (ReadOnly) return;
+        await _form.Validate();
+        if (!_form.IsValid) return;
+        _processing = true;
+        try
+        {
+            var response = await MedicalRecordCategoryService.UpdateMedicalRecordCategoryAsync(_model);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess) { Snackbar.Add("MedicalRecord category updated successfully", Severity.Success); await OnSuccess.InvokeAsync(); }
+        }
+        finally { _processing = false; }
+    }
+}
@@ -0,0 +1,54 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Medical.MedicalRecordCategory.Cqrs;
+
+public class CreateMedicalRecordCategoryRequest
+{
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+}
+
+public class CreateMedicalRecordCategoryResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+}
+
+public record CreateMedicalRecordCategoryCommand(CreateMedicalRecordCategoryRequest Data) : IRequest<CreateMedicalRecordCategoryResponse>;
+
+public class CreateMedicalRecordCategoryHandler : IRequestHandler<CreateMedicalRecordCategoryCommand, CreateMedicalRecordCategoryResponse>
+{
+    private readonly AppDbContext _context;
+
+    public CreateMedicalRecordCategoryHandler(AppDbContext context) => _context = context;
+
+    public async Task<CreateMedicalRecordCategoryResponse> Handle(CreateMedicalRecordCategoryCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.MedicalRecordCategory
+            .AnyAsync(x => x.Name == request.Data.Name, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("MedicalRecord Category", request.Data.Name ?? string.Empty);
+        }
+
+        var entity = new Data.Entities.MedicalRecordCategory
+        {
+            Name = request.Data.Name,
+            Description = request.Data.Description
+        };
+
+        _context.MedicalRecordCategory.Add(entity);
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new CreateMedicalRecordCategoryResponse
+        {
+            Id = entity.Id,
+            Name = entity.Name
+        };
+    }
+}
@@ -0,0 +1,17 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Medical.MedicalRecordCategory.Cqrs;
+
+public class CreateMedicalRecordCategoryValidator : AbstractValidator<CreateMedicalRecordCategoryRequest>
+{
+    public CreateMedicalRecordCategoryValidator()
+    {
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Category Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Description)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+    }
+}
@@ -0,0 +1,27 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Medical.MedicalRecordCategory.Cqrs;
+
+public record DeleteMedicalRecordCategoryByIdRequest(string Id);
+
+public record DeleteMedicalRecordCategoryByIdCommand(DeleteMedicalRecordCategoryByIdRequest Data) : IRequest<bool>;
+
+public class DeleteMedicalRecordCategoryByIdHandler : IRequestHandler<DeleteMedicalRecordCategoryByIdCommand, bool>
+{
+    private readonly AppDbContext _context;
+
+    public DeleteMedicalRecordCategoryByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<bool> Handle(DeleteMedicalRecordCategoryByIdCommand request, CancellationToken cancellationToken)
+    {
+        var entity = await _context.MedicalRecordCategory
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null) return false;
+
+        _context.MedicalRecordCategory.Remove(entity);
+        return await _context.SaveChangesAsync(cancellationToken) > 0;
+    }
+}
@@ -0,0 +1,43 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Medical.MedicalRecordCategory.Cqrs;
+
+public class GetMedicalRecordCategoryByIdResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetMedicalRecordCategoryByIdQuery(string Id) : IRequest<GetMedicalRecordCategoryByIdResponse?>;
+
+public class GetMedicalRecordCategoryByIdHandler : IRequestHandler<GetMedicalRecordCategoryByIdQuery, GetMedicalRecordCategoryByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetMedicalRecordCategoryByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetMedicalRecordCategoryByIdResponse?> Handle(GetMedicalRecordCategoryByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.MedicalRecordCategory
+            .AsNoTracking()
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetMedicalRecordCategoryByIdResponse
+            {
+                Id = x.Id,
+                Name = x.Name,
+                Description = x.Description,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,43 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Medical.MedicalRecordCategory.Cqrs;
+
+public class GetMedicalRecordCategoryListResponse
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public record GetMedicalRecordCategoryListQuery() : IRequest<List<GetMedicalRecordCategoryListResponse>>;
+
+public class GetMedicalRecordCategoryListHandler : IRequestHandler<GetMedicalRecordCategoryListQuery, List<GetMedicalRecordCategoryListResponse>>
+{
+    private readonly AppDbContext _context;
+
+    public GetMedicalRecordCategoryListHandler(AppDbContext context) => _context = context;
+
+    public async Task<List<GetMedicalRecordCategoryListResponse>> Handle(GetMedicalRecordCategoryListQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.MedicalRecordCategory
+            .AsNoTracking()
+            .OrderBy(x => x.Name)
+            .Select(x => new GetMedicalRecordCategoryListResponse
+            {
+                Id = x.Id,
+                Name = x.Name,
+                Description = x.Description,
+                CreatedAt = x.CreatedAt,
+                CreatedBy = x.CreatedBy,
+                UpdatedAt = x.UpdatedAt,
+                UpdatedBy = x.UpdatedBy,
+            })
+            .ToListAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,61 @@
+using Indotalent.ConfigBackEnd.Exceptions;
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Medical.MedicalRecordCategory.Cqrs;
+
+public class UpdateMedicalRecordCategoryRequest
+{
+    public string? Id { get; set; }
+    public string? Name { get; set; }
+    public string? Description { get; set; }
+    public DateTimeOffset? CreatedAt { get; set; }
+    public string? CreatedBy { get; set; }
+    public DateTimeOffset? UpdatedAt { get; set; }
+    public string? UpdatedBy { get; set; }
+}
+
+public class UpdateMedicalRecordCategoryResponse
+{
+    public string? Id { get; set; }
+    public bool Success { get; set; }
+}
+
+public record UpdateMedicalRecordCategoryCommand(UpdateMedicalRecordCategoryRequest Data) : IRequest<UpdateMedicalRecordCategoryResponse>;
+
+public class UpdateMedicalRecordCategoryHandler : IRequestHandler<UpdateMedicalRecordCategoryCommand, UpdateMedicalRecordCategoryResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateMedicalRecordCategoryHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateMedicalRecordCategoryResponse> Handle(UpdateMedicalRecordCategoryCommand request, CancellationToken cancellationToken)
+    {
+        var isExists = await _context.MedicalRecordCategory
+            .AnyAsync(x => x.Name == request.Data.Name && x.Id != request.Data.Id, cancellationToken);
+
+        if (isExists)
+        {
+            throw new AlreadyExistsException("MedicalRecord Category", request.Data.Name ?? string.Empty);
+        }
+
+        var entity = await _context.MedicalRecordCategory
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (entity == null)
+        {
+            return new UpdateMedicalRecordCategoryResponse { Id = request.Data.Id, Success = false };
+        }
+
+        entity.Name = request.Data.Name;
+        entity.Description = request.Data.Description;
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateMedicalRecordCategoryResponse
+        {
+            Id = entity.Id,
+            Success = true
+        };
+    }
+}
@@ -0,0 +1,20 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Medical.MedicalRecordCategory.Cqrs;
+
+public class UpdateMedicalRecordCategoryValidator : AbstractValidator<UpdateMedicalRecordCategoryRequest>
+{
+    public UpdateMedicalRecordCategoryValidator()
+    {
+        RuleFor(x => x.Id)
+            .NotEmpty().WithMessage("ID is required for update");
+
+        RuleFor(x => x.Name)
+            .NotEmpty().WithMessage("Category Name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort);
+
+        RuleFor(x => x.Description)
+            .MaximumLength(GlobalConsts.StringLengthMedium);
+    }
+}
@@ -0,0 +1,73 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Medical.MedicalRecordCategory.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Medical.MedicalRecordCategory;
+
+public static class MedicalRecordCategoryEndpoint
+{
+    public static void MapMedicalRecordCategoryEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/medical-record-category").WithTags("MedicalRecordCategories")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/", async (IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetMedicalRecordCategoryListQuery());
+
+            return result.ToApiResponse("MedicalRecord category list retrieved successfully");
+        })
+        .WithName("GetMedicalRecordCategoryList")
+        .WithTags("MedicalRecordCategories");
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetMedicalRecordCategoryByIdQuery(id));
+
+            return result.ToApiResponse(result is not null
+                ? "MedicalRecord category detail retrieved successfully"
+                : $"MedicalRecord category with ID {id} not found");
+        })
+        .WithName("GetMedicalRecordCategoryById")
+        .WithTags("MedicalRecordCategories");
+
+        group.MapPost("/", async (CreateMedicalRecordCategoryRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new CreateMedicalRecordCategoryCommand(request));
+
+            return result.ToApiResponse("MedicalRecord category has been created successfully", StatusCodes.Status201Created);
+        })
+        .WithName("CreateMedicalRecordCategory")
+        .WithTags("MedicalRecordCategories");
+
+        group.MapPost("/update", async (UpdateMedicalRecordCategoryRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateMedicalRecordCategoryCommand(request));
+
+            if (!result.Success)
+            {
+                return ((object?)null).ToApiResponse("Update failed. The medical-record category data could not be found.");
+            }
+
+            return result.ToApiResponse("MedicalRecord category has been updated successfully");
+        })
+        .WithName("UpdateMedicalRecordCategory")
+        .WithTags("MedicalRecordCategories");
+
+        group.MapPost("/delete/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new DeleteMedicalRecordCategoryByIdCommand(new DeleteMedicalRecordCategoryByIdRequest(id)));
+
+            if (!result)
+            {
+                return ((object?)null).ToApiResponse("Delete failed. The medical-record category data could not be found.");
+            }
+
+            return true.ToApiResponse("MedicalRecord category has been deleted successfully");
+        })
+        .WithName("DeleteMedicalRecordCategoryById")
+        .WithTags("MedicalRecordCategories");
+    }
+}
@@ -0,0 +1,60 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Medical.MedicalRecordCategory.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Medical.MedicalRecordCategory;
+
+public class MedicalRecordCategoryService : BaseService
+{
+    private readonly RestClient _client;
+
+    public MedicalRecordCategoryService(
+            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<GetMedicalRecordCategoryListResponse>>?> GetMedicalRecordCategoryListAsync()
+    {
+        var request = new RestRequest("api/medical-record-category", Method.Get);
+        return await ExecuteWithResponseAsync<List<GetMedicalRecordCategoryListResponse>>(_client, request);
+    }
+
+    public async Task<ApiResponse<GetMedicalRecordCategoryByIdResponse>?> GetMedicalRecordCategoryByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/medical-record-category/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetMedicalRecordCategoryByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<CreateMedicalRecordCategoryResponse>?> CreateMedicalRecordCategoryAsync(CreateMedicalRecordCategoryRequest data)
+    {
+        var request = new RestRequest("api/medical-record-category", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<CreateMedicalRecordCategoryResponse>(_client, request);
+    }
+
+    public async Task<bool> DeleteMedicalRecordCategoryByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/medical-record-category/delete/{id}", Method.Post);
+
+        var response = await ExecuteWithResponseAsync<object>(_client, request);
+        return response?.IsSuccess ?? false;
+    }
+
+    public async Task<ApiResponse<UpdateMedicalRecordCategoryResponse>?> UpdateMedicalRecordCategoryAsync(UpdateMedicalRecordCategoryRequest data)
+    {
+        var request = new RestRequest("api/medical-record-category/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateMedicalRecordCategoryResponse>(_client, request);
+    }
+}
--- a/Show More
+++ b/Show More