initial commit

2026-07-21 13:52:43 +07:00
commit f0e6f38940
881 changed files with 66309 additions and 0 deletions
@@ -0,0 +1,54 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Profile.Avatar.Cqrs;
+using Indotalent.Infrastructure.File;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+using Microsoft.Extensions.Options;
+
+namespace Indotalent.Features.Profile.Avatar;
+
+public static class AvatarEndpoint
+{
+    public static void MapAvatarEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/profile-avatar").WithTags("Profile Avatar")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/info/{userId}", async (string userId, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetAvatarInfoQuery(userId));
+            return result.ToApiResponse("Avatar info retrieved successfully");
+        })
+        .WithName("GetMyAvatarInfo");
+
+        group.MapPost("/change", async (ChangeAvatarRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new ChangeAvatarCommand(request));
+            return result.IsSuccess
+                ? result.ToApiResponse(result.Message)
+                : result.ToApiResponse(result.Message, StatusCodes.Status400BadRequest);
+        })
+        .WithName("ProfileChangeAvatar");
+
+        group.MapGet("/avatar-image/{fileName}", async (string fileName, IOptions<FileStorageSettingsModel> options, IWebHostEnvironment env) =>
+        {
+            var avatarSettings = options.Value.Avatar;
+            var folderPath = Path.Combine(env.WebRootPath, avatarSettings.StoragePath);
+            var filePath = Path.Combine(folderPath, fileName);
+
+            if (!System.IO.File.Exists(filePath)) return Results.NotFound();
+
+            var bytes = await System.IO.File.ReadAllBytesAsync(filePath);
+            var extension = Path.GetExtension(fileName).ToLower();
+            var contentType = extension switch
+            {
+                ".png" => "image/png",
+                ".jpg" or ".jpeg" => "image/jpeg",
+                _ => "application/octet-stream"
+            };
+            return Results.File(bytes, contentType);
+        })
+        .WithName("ProfileGetAvatarImage");
+    }
+}
@@ -0,0 +1,53 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Profile.Avatar.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Profile.Avatar;
+
+public class AvatarService : BaseService
+{
+    private readonly RestClient _client;
+
+    public AvatarService(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<GetAvatarInfoResponse>?> GetAvatarInfoAsync(string userId)
+    {
+        var request = new RestRequest($"api/profile-avatar/info/{userId}", Method.Get);
+        return await ExecuteWithResponseAsync<GetAvatarInfoResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<ChangeAvatarResponse>?> ChangeAvatarAsync(ChangeAvatarRequest data)
+    {
+        var request = new RestRequest("api/profile-avatar/change", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<ChangeAvatarResponse>(_client, request);
+    }
+
+    public async Task<byte[]?> GetAvatarBlobAsync(string fileName)
+    {
+        var request = new RestRequest($"api/profile-avatar/avatar-image/{fileName}", Method.Get);
+
+        if (!string.IsNullOrEmpty(TokenProvider.Token))
+        {
+            request.AddHeader("Authorization", $"Bearer {TokenProvider.Token}");
+        }
+
+        if (!string.IsNullOrEmpty(CurrentUserService.UserId))
+        {
+            request.AddHeader("X-UserId", CurrentUserService.UserId);
+        }
+
+        var response = await _client.ExecuteAsync(request);
+
+        return response.IsSuccessful ? response.RawBytes : null;
+    }
+}
@@ -0,0 +1,198 @@
+@page "/profile/avatar"
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Components.Forms
+@using MudBlazor
+@using System.IO
+@using Indotalent.Features.Profile.Avatar
+@using Indotalent.Features.Profile.Avatar.Cqrs
+@using Indotalent.ConfigBackEnd.Interfaces
+@inject ISnackbar Snackbar
+@inject AvatarService AvatarService
+@inject ICurrentUserService CurrentUserService
+
+<MudPaper Elevation="0" Class="pa-6 mb-3 d-flex align-center justify-space-between">
+    <div>
+        <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Profile Picture</MudText>
+        <MudText Typo="Typo.body2" Style="color: #64748b;">Update your avatar and how you appear to other members.</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;">Profile</MudText>
+        <MudText Typo="Typo.caption" Style="color: #94a3b8;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #1a1a1a;">Avatar</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; background-color: #ffffff;">
+    <MudStack Spacing="8">
+        <MudGrid>
+            <MudItem xs="12" md="4">
+                <MudText Typo="Typo.h6" Class="fw-bold">Your Avatar</MudText>
+                <MudText Typo="Typo.body2">Recommended size: 200x200px. Supported formats: JPG, JPEG, PNG. (max 2MB).</MudText>
+            </MudItem>
+            
+            <MudItem xs="12" md="8">
+                <div style="border: 2px dashed #e2e8f0; border-radius: 8px; background-color: #f8fafc;" class="pa-10">
+                    <MudStack Spacing="6" AlignItems="AlignItems.Center">
+                        
+                        @if (_isLoading)
+                        {
+                            <MudProgressCircular Color="Color.Primary" Indeterminate="true" Style="width: 150px; height: 150px;" />
+                        }
+                        else if (!string.IsNullOrEmpty(_previewUrl))
+                        {
+                            <div style="width:150px; height:150px; border-radius: 50%; overflow: hidden; border: 4px solid white; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+                                <img src="@_previewUrl" style="width: 100%; height: 100%; object-fit: cover;" />
+                            </div>
+                        }
+                        else
+                        {
+                            <MudAvatar Color="Color.Primary" Variant="Variant.Filled" Style="width:150px; height:150px; font-size: 3rem; font-weight: 800;">
+                                @(CurrentUserService.FullName?.Substring(0, 1).ToUpper() ?? "U")
+                            </MudAvatar>
+                        }
+                        
+                        <div class="text-center">
+                            <MudText Typo="Typo.subtitle1" Class="fw-bold">Avatar Preview</MudText>
+                            <MudText Typo="Typo.body2" Class="text-muted">This is how your photo will look.</MudText>
+                        </div>
+
+                        <MudFileUpload T="IBrowserFile" FilesChanged="HandleFileSelected" Accept=".jpg, .jpeg, .png" Class="w-100">
+                            <MudButton HtmlTag="label"
+                                       Variant="Variant.Filled"
+                                       Color="Color.Primary"
+                                       Size="Size.Large"
+                                       FullWidth="true"
+                                       StartIcon="@Icons.Material.Filled.CloudUpload"
+                                       Style="text-transform: none; height: 50px; font-weight: 700;">
+                                @(_selectedFile == null ? "Browse File" : _selectedFile.Name)
+                            </MudButton>
+                        </MudFileUpload>
+                    </MudStack>
+                </div>
+            </MudItem>
+        </MudGrid>
+
+        <div class="d-flex justify-end align-center gap-4 mt-4">
+            <MudButton Variant="Variant.Filled"
+                       Color="Color.Primary"
+                       OnClick="SubmitAvatar"
+                       Disabled="@(_selectedFile == null || _processing)"
+                       Class="px-10"
+                       Style="height: 45px; 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>Save Changes</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudStack>
+</MudPaper>
+
+@code {
+    private IBrowserFile? _selectedFile;
+    private string? _previewUrl;
+    private bool _processing = false;
+    private bool _isLoading = false;
+    private string? _fullName;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadExistingAvatar();
+    }
+
+    private async Task LoadExistingAvatar()
+    {
+        var userId = CurrentUserService.UserId;
+        if (string.IsNullOrEmpty(userId)) return;
+
+        _isLoading = true;
+        try
+        {
+            var response = await AvatarService.GetAvatarInfoAsync(userId);
+            
+            if (response != null && response.IsSuccess && response.Value != null)
+            {
+                _fullName = response.Value.FullName;
+
+                if (!string.IsNullOrEmpty(response.Value.AvatarFile))
+                {
+                    var bytes = await AvatarService.GetAvatarBlobAsync(response.Value.AvatarFile);
+                    if (bytes != null && bytes.Length > 0)
+                    {
+                        _previewUrl = $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
+                    }
+                }
+            }
+        }
+        catch (Exception) { }
+        finally
+        {
+            _isLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task HandleFileSelected(IBrowserFile file)
+    {
+        if (file == null) return;
+        if (file.Size > 2 * 1024 * 1024)
+        {
+            Snackbar.Add("File too large. Max 2MB allowed.", Severity.Warning);
+            return;
+        }
+        _selectedFile = file;
+        using var stream = file.OpenReadStream(2 * 1024 * 1024);
+        using var ms = new MemoryStream();
+        await stream.CopyToAsync(ms);
+        _previewUrl = $"data:{file.ContentType};base64,{Convert.ToBase64String(ms.ToArray())}";
+        StateHasChanged();
+    }
+
+    private async Task SubmitAvatar()
+    {
+        if (_selectedFile == null) return;
+        var userId = CurrentUserService.UserId;
+        if (string.IsNullOrEmpty(userId)) return;
+
+        _processing = true;
+        try
+        {
+            using var stream = _selectedFile.OpenReadStream(2 * 1024 * 1024);
+            using var ms = new MemoryStream();
+            await stream.CopyToAsync(ms);
+
+            var request = new ChangeAvatarRequest
+            {
+                UserId = userId,
+                FileData = ms.ToArray(),
+                FileName = _selectedFile.Name
+            };
+
+            var response = await AvatarService.ChangeAvatarAsync(request);
+            await Task.Delay(500);
+            if (response != null && response.IsSuccess)
+            {
+                Snackbar.Add("Avatar updated successfully", Severity.Success);
+                _selectedFile = null;
+                await LoadExistingAvatar();
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Upload failed: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _processing = false;
+            StateHasChanged();
+        }
+    }
+}
@@ -0,0 +1,66 @@
+using Indotalent.Data.Entities;
+using Indotalent.Infrastructure.File;
+using MediatR;
+using Microsoft.AspNetCore.Identity;
+
+namespace Indotalent.Features.Profile.Avatar.Cqrs;
+
+public class ChangeAvatarRequest
+{
+    public string UserId { get; set; } = string.Empty;
+    public byte[] FileData { get; set; } = Array.Empty<byte>();
+    public string FileName { get; set; } = string.Empty;
+}
+
+public class ChangeAvatarResponse
+{
+    public bool IsSuccess { get; set; }
+    public string Message { get; set; } = string.Empty;
+}
+
+public record ChangeAvatarCommand(ChangeAvatarRequest Data) : IRequest<ChangeAvatarResponse>;
+
+public class ChangeAvatarHandler : IRequestHandler<ChangeAvatarCommand, ChangeAvatarResponse>
+{
+    private readonly UserManager<ApplicationUser> _userManager;
+    private readonly FileStorageService _fileStorage;
+
+    public ChangeAvatarHandler(UserManager<ApplicationUser> userManager, FileStorageService fileStorage)
+    {
+        _userManager = userManager;
+        _fileStorage = fileStorage;
+    }
+
+    public async Task<ChangeAvatarResponse> Handle(ChangeAvatarCommand request, CancellationToken cancellationToken)
+    {
+        var user = await _userManager.FindByIdAsync(request.Data.UserId);
+        if (user == null) return new ChangeAvatarResponse { IsSuccess = false, Message = "User not found" };
+
+        try
+        {
+            var extension = Path.GetExtension(request.Data.FileName);
+
+            if (!string.IsNullOrEmpty(user.AvatarFile))
+            {
+                _fileStorage.DeleteOldAvatar(user.AvatarFile);
+            }
+
+            var newFileName = await _fileStorage.SaveAvatarAsync(user.Id, request.Data.FileData, extension);
+
+            user.AvatarFile = newFileName;
+            user.UpdatedAt = DateTime.Now;
+
+            var result = await _userManager.UpdateAsync(user);
+
+            return new ChangeAvatarResponse
+            {
+                IsSuccess = result.Succeeded,
+                Message = result.Succeeded ? "Avatar updated successfully" : "Failed to update user profile"
+            };
+        }
+        catch (Exception ex)
+        {
+            return new ChangeAvatarResponse { IsSuccess = false, Message = ex.Message };
+        }
+    }
+}
@@ -0,0 +1,37 @@
+using Indotalent.Data.Entities;
+using MediatR;
+using Microsoft.AspNetCore.Identity;
+
+namespace Indotalent.Features.Profile.Avatar.Cqrs;
+
+public class GetAvatarInfoResponse
+{
+    public string Id { get; set; } = string.Empty;
+    public string? FullName { get; set; }
+    public string? AvatarFile { get; set; }
+}
+
+public record GetAvatarInfoQuery(string UserId) : IRequest<GetAvatarInfoResponse?>;
+
+public class GetAvatarInfoHandler : IRequestHandler<GetAvatarInfoQuery, GetAvatarInfoResponse?>
+{
+    private readonly UserManager<ApplicationUser> _userManager;
+
+    public GetAvatarInfoHandler(UserManager<ApplicationUser> userManager)
+    {
+        _userManager = userManager;
+    }
+
+    public async Task<GetAvatarInfoResponse?> Handle(GetAvatarInfoQuery request, CancellationToken cancellationToken)
+    {
+        var user = await _userManager.FindByIdAsync(request.UserId);
+        if (user == null) return null;
+
+        return new GetAvatarInfoResponse
+        {
+            Id = user.Id,
+            FullName = user.FullName,
+            AvatarFile = user.AvatarFile
+        };
+    }
+}
@@ -0,0 +1,195 @@
+@page "/profile/password"
+@using System.ComponentModel.DataAnnotations
+@using MudBlazor
+@using Indotalent.Features.Profile.Password
+@using Indotalent.Features.Profile.Password.Cqrs
+@using Indotalent.ConfigBackEnd.Interfaces
+@using Indotalent.Shared.Utils
+@inject ISnackbar Snackbar
+@inject PasswordService PasswordService
+@inject ICurrentUserService CurrentUserService
+
+<MudPaper Elevation="0" Class="pa-6 mb-3 d-flex align-center justify-space-between">
+    <div>
+        <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Security Settings</MudText>
+        <MudText Typo="Typo.body2" Style="color: #64748b;">Manage your password and protect your account security.</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;">Profile</MudText>
+        <MudText Typo="Typo.caption" Style="color: #94a3b8;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #1a1a1a;">Password</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; background-color: #ffffff;">
+    <MudForm @ref="_form" Model="_model" Validation="_validator.ValidateValue()" ValidationDelay="300">
+        <MudStack Spacing="8">
+            <MudGrid>
+                <MudItem xs="12" md="4">
+                    <MudText Typo="Typo.h6" Class="fw-bold">Change Password</MudText>
+                    <MudText Typo="Typo.body2">Update your password to keep your account secure. We recommend using a strong password.</MudText>
+                </MudItem>
+                <MudItem xs="12" md="8">
+                    <MudStack Spacing="4">
+                        <div>
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">Current Password</MudText>
+                            <MudTextField @bind-Value="_model.CurrentPassword"
+                                          For="@(() => _model.CurrentPassword)"
+                                          Variant="Variant.Outlined"
+                                          FullWidth="true"
+                                          Margin="Margin.Dense"
+                                          InputType="@_currentPasswordInput"
+                                          Adornment="Adornment.End"
+                                          AdornmentIcon="@_currentPasswordIcon"
+                                          OnAdornmentClick="ToggleCurrentPasswordVisibility" />
+                        </div>
+
+                        <MudDivider Class="my-2" />
+
+                        <div>
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">New Password</MudText>
+                            <MudTextField @bind-Value="_model.NewPassword"
+                                          For="@(() => _model.NewPassword)"
+                                          Variant="Variant.Outlined"
+                                          FullWidth="true"
+                                          Margin="Margin.Dense"
+                                          InputType="@_newPasswordInput"
+                                          Adornment="Adornment.End"
+                                          AdornmentIcon="@_newPasswordIcon"
+                                          OnAdornmentClick="ToggleNewPasswordVisibility"
+                                          HelperText="Minimum 4 characters with numbers and symbols" />
+                        </div>
+
+                        <div>
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">Confirm New Password</MudText>
+                            <MudTextField @bind-Value="_model.ConfirmPassword"
+                                          For="@(() => _model.ConfirmPassword)"
+                                          Variant="Variant.Outlined"
+                                          FullWidth="true"
+                                          Margin="Margin.Dense"
+                                          InputType="@_newPasswordInput" />
+                        </div>
+                    </MudStack>
+                </MudItem>
+            </MudGrid>
+
+            <div class="d-flex justify-end align-center gap-4 mt-4">
+                <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="UpdatePassword" Disabled="@_isProcessing">
+                    @if (_isProcessing)
+                    {
+                        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                        <MudText Class="ms-2">Updating Password...</MudText>
+                    }
+                    else
+                    {
+                        <MudText>Update Password</MudText>
+                    }
+                </MudButton>
+            </div>
+        </MudStack>
+    </MudForm>
+</MudPaper>
+
+@code {
+    private MudForm _form = default!;
+    private UpdatePasswordValidator _validator = new();
+    private bool _isProcessing = false;
+    private PasswordChangeModel _model = new();
+
+    private bool _currentPasswordVisibility;
+    private InputType _currentPasswordInput = InputType.Password;
+    private string _currentPasswordIcon = Icons.Material.Filled.VisibilityOff;
+
+    private bool _newPasswordVisibility;
+    private InputType _newPasswordInput = InputType.Password;
+    private string _newPasswordIcon = Icons.Material.Filled.VisibilityOff;
+
+    private void ToggleCurrentPasswordVisibility()
+    {
+        if (_currentPasswordVisibility)
+        {
+            _currentPasswordVisibility = false;
+            _currentPasswordIcon = Icons.Material.Filled.VisibilityOff;
+            _currentPasswordInput = InputType.Password;
+        }
+        else
+        {
+            _currentPasswordVisibility = true;
+            _currentPasswordIcon = Icons.Material.Filled.Visibility;
+            _currentPasswordInput = InputType.Text;
+        }
+    }
+
+    private void ToggleNewPasswordVisibility()
+    {
+        if (_newPasswordVisibility)
+        {
+            _newPasswordVisibility = false;
+            _newPasswordIcon = Icons.Material.Filled.VisibilityOff;
+            _newPasswordInput = InputType.Password;
+        }
+        else
+        {
+            _newPasswordVisibility = true;
+            _newPasswordIcon = Icons.Material.Filled.Visibility;
+            _newPasswordInput = InputType.Text;
+        }
+    }
+
+    private async Task UpdatePassword()
+    {
+        await _form.Validate();
+
+        if (!_form.IsValid)
+        {
+            Snackbar.Add("Please correct the validation errors.", Severity.Warning);
+            return;
+        }
+
+        if (_model.NewPassword != _model.ConfirmPassword)
+        {
+            Snackbar.Add("New password and confirmation do not match.", Severity.Error);
+            return;
+        }
+
+        var userId = CurrentUserService.UserId;
+        if (string.IsNullOrEmpty(userId))
+        {
+            Snackbar.Add("User session not found.", Severity.Error);
+            return;
+        }
+
+        _isProcessing = true;
+
+        var request = new UpdatePasswordRequest
+        {
+            Id = userId,
+            CurrentPassword = _model.CurrentPassword,
+            NewPassword = _model.NewPassword
+        };
+
+        var response = await PasswordService.UpdatePasswordAsync(request);
+        await Task.Delay(500);
+
+        if (response != null && response.IsSuccess)
+        {
+            Snackbar.Add("Password updated successfully!", Severity.Success);
+            _model = new PasswordChangeModel();
+            await _form.ResetAsync();
+        }
+        else
+        {
+            Snackbar.Add(response?.Message ?? "Failed to update password", Severity.Error);
+        }
+
+        _isProcessing = false;
+    }
+
+    public class PasswordChangeModel : UpdatePasswordRequest
+    {
+        public string ConfirmPassword { get; set; } = string.Empty;
+    }
+}
@@ -0,0 +1,50 @@
+using Indotalent.Data.Entities;
+using MediatR;
+using Microsoft.AspNetCore.Identity;
+
+namespace Indotalent.Features.Profile.Password.Cqrs;
+
+public class UpdatePasswordRequest
+{
+    public string Id { get; set; } = string.Empty;
+    public string CurrentPassword { get; set; } = string.Empty;
+    public string NewPassword { get; set; } = string.Empty;
+}
+
+public class UpdatePasswordResponse
+{
+    public bool Success { get; set; }
+    public string Message { get; set; } = string.Empty;
+    public List<string>? Errors { get; set; }
+}
+
+public record UpdatePasswordCommand(UpdatePasswordRequest Data) : IRequest<UpdatePasswordResponse>;
+
+public class UpdatePasswordHandler : IRequestHandler<UpdatePasswordCommand, UpdatePasswordResponse>
+{
+    private readonly UserManager<ApplicationUser> _userManager;
+
+    public UpdatePasswordHandler(UserManager<ApplicationUser> userManager)
+    {
+        _userManager = userManager;
+    }
+
+    public async Task<UpdatePasswordResponse> Handle(UpdatePasswordCommand request, CancellationToken cancellationToken)
+    {
+        var user = await _userManager.FindByIdAsync(request.Data.Id);
+        if (user == null)
+            return new UpdatePasswordResponse { Success = false, Message = "User not found" };
+
+        var result = await _userManager.ChangePasswordAsync(user, request.Data.CurrentPassword, request.Data.NewPassword);
+
+        if (result.Succeeded)
+            return new UpdatePasswordResponse { Success = true };
+
+        return new UpdatePasswordResponse
+        {
+            Success = false,
+            Message = "Failed to update password",
+            Errors = result.Errors.Select(x => x.Description).ToList()
+        };
+    }
+}
@@ -0,0 +1,18 @@
+using FluentValidation;
+
+namespace Indotalent.Features.Profile.Password.Cqrs;
+
+public class UpdatePasswordValidator : AbstractValidator<UpdatePasswordRequest>
+{
+    public UpdatePasswordValidator()
+    {
+        RuleFor(x => x.Id).NotEmpty();
+
+        RuleFor(x => x.CurrentPassword)
+            .NotEmpty().WithMessage("Current password is required");
+
+        RuleFor(x => x.NewPassword)
+            .NotEmpty().WithMessage("New password is required")
+            .MinimumLength(4).WithMessage("Password must be at least 4 characters");
+    }
+}
@@ -0,0 +1,26 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Profile.Password.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Profile.Password;
+
+public static class PasswordEndpoint
+{
+    public static void MapPasswordEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/profile-password").WithTags("Profile Password")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapPost("/update", async (UpdatePasswordRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdatePasswordCommand(request));
+            if (!result.Success)
+                return ((object?)null).ToApiResponse(result.Message ?? "Failed to update password", StatusCodes.Status400BadRequest);
+
+            return result.ToApiResponse("Password has been updated successfully");
+        })
+        .WithName("UpdateProfilePassword");
+    }
+}
@@ -0,0 +1,28 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Profile.Password.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Profile.Password;
+
+public class PasswordService : BaseService
+{
+    private readonly RestClient _client;
+
+    public PasswordService(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<UpdatePasswordResponse>?> UpdatePasswordAsync(UpdatePasswordRequest data)
+    {
+        var request = new RestRequest("api/profile-password/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdatePasswordResponse>(_client, request);
+    }
+}
@@ -0,0 +1,275 @@
+@page "/profile/personal-information"
+@using System.ComponentModel.DataAnnotations
+@using MudBlazor
+@using Indotalent.Features.Profile.PersonalInformation
+@using Indotalent.Features.Profile.PersonalInformation.Cqrs
+@using Indotalent.ConfigBackEnd.Interfaces
+@inject ISnackbar Snackbar
+@inject PersonalInformationService PersonalInformationService
+@inject ICurrentUserService CurrentUserService
+
+<MudPaper Elevation="0" Class="pa-6 mb-3 d-flex align-center justify-space-between">
+    <div>
+        <MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Personal Information</MudText>
+        <MudText Typo="Typo.body2" Style="color: #64748b;">Manage your personal details, contact information, and how others see you.</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;">Profile</MudText>
+        <MudText Typo="Typo.caption" Style="color: #94a3b8;">/</MudText>
+        <MudText Typo="Typo.caption" Style="font-weight: 600; color: #1a1a1a;">Personal Information</MudText>
+    </div>
+</MudPaper>
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; background-color: #ffffff;">
+    <MudStack Spacing="8">
+        <MudGrid>
+            <MudItem xs="12" md="4">
+                <MudText Typo="Typo.h6" Class="fw-bold">Basic Profile</MudText>
+                <MudText Typo="Typo.body2">Your public identity and bio.</MudText>
+            </MudItem>
+            <MudItem xs="12" md="8">
+                <MudStack Spacing="4">
+                    <MudGrid Spacing="2">
+                        <MudItem xs="12" sm="6">
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">First Name</MudText>
+                            <MudTextField @bind-Value="user.FirstName" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
+                        </MudItem>
+                        <MudItem xs="12" sm="6">
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">Last Name</MudText>
+                            <MudTextField @bind-Value="user.LastName" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
+                        </MudItem>
+                    </MudGrid>
+
+                    <div>
+                        <MudText Typo="Typo.subtitle2" Class="mb-2">Short Bio</MudText>
+                        <MudTextField @bind-Value="user.Bio" Variant="Variant.Outlined" Lines="3" FullWidth="true" Margin="Margin.Dense" Placeholder="Tell us a little about yourself..." />
+                    </div>
+
+                    <MudGrid Spacing="2">
+                        <MudItem xs="12" sm="6">
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">Job Title / Position</MudText>
+                            <MudTextField @bind-Value="user.JobTitle" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
+                        </MudItem>
+                        <MudItem xs="12" sm="6">
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">Date of Birth</MudText>
+                            <MudDatePicker @bind-Date="user.DateOfBirth" Variant="Variant.Outlined" Margin="Margin.Dense" Editable="true" />
+                        </MudItem>
+                    </MudGrid>
+                </MudStack>
+            </MudItem>
+        </MudGrid>
+
+        <MudDivider />
+
+        <MudGrid>
+            <MudItem xs="12" md="4">
+                <MudText Typo="Typo.h6" Class="fw-bold">Contact & Location</MudText>
+                <MudText Typo="Typo.body2">How we can reach you and where you're based.</MudText>
+            </MudItem>
+            <MudItem xs="12" md="8">
+                <MudStack Spacing="4">
+                    <MudGrid Spacing="2">
+                        <MudItem xs="12" sm="6">
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">Email Address</MudText>
+                            <MudTextField @bind-Value="user.Contact.Email" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Email" Disabled="true" />
+                        </MudItem>
+                        <MudItem xs="12" sm="6">
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">Phone Number</MudText>
+                            <MudTextField @bind-Value="user.Contact.Phone" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Phone" />
+                        </MudItem>
+                    </MudGrid>
+
+                    <div>
+                        <MudText Typo="Typo.subtitle2" Class="mb-2">Residential Address</MudText>
+                        <MudTextField @bind-Value="user.Contact.Address" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Placeholder="Street name, Building, Apartment No." />
+                    </div>
+
+                    <MudGrid Spacing="2">
+                        <MudItem xs="12" sm="4">
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">City</MudText>
+                            <MudTextField @bind-Value="user.Contact.City" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
+                        </MudItem>
+                        <MudItem xs="12" sm="4">
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">Country</MudText>
+                            <MudTextField @bind-Value="user.Contact.Country" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
+                        </MudItem>
+                        <MudItem xs="12" sm="4">
+                            <MudText Typo="Typo.subtitle2" Class="mb-2">Postal Code</MudText>
+                            <MudTextField @bind-Value="user.Contact.PostalCode" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
+                        </MudItem>
+                    </MudGrid>
+                </MudStack>
+            </MudItem>
+        </MudGrid>
+
+        <MudDivider />
+
+        <MudGrid>
+            <MudItem xs="12" md="4">
+                <MudText Typo="Typo.h6" Class="fw-bold">Social Profiles</MudText>
+                <MudText Typo="Typo.body2">Your professional and social networking links.</MudText>
+            </MudItem>
+            <MudItem xs="12" md="8">
+                <MudStack Spacing="4">
+                    <div>
+                        <MudText Typo="Typo.subtitle2" Class="mb-2">LinkedIn Profile</MudText>
+                        <MudTextField @bind-Value="user.Socials.LinkedIn" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Custom.Brands.LinkedIn" Placeholder="https://linkedin.com/in/username" />
+                    </div>
+
+                    <div>
+                        <MudText Typo="Typo.subtitle2" Class="mb-2">GitHub / Portfolio</MudText>
+                        <MudTextField @bind-Value="user.Socials.GitHub" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Custom.Brands.GitHub" Placeholder="https://github.com/username" />
+                    </div>
+
+                    <div>
+                        <MudText Typo="Typo.subtitle2" Class="mb-2">Instagram</MudText>
+                        <MudTextField @bind-Value="user.Socials.Instagram" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Custom.Brands.Instagram" Placeholder="@("@username")" />
+                    </div>
+                </MudStack>
+            </MudItem>
+        </MudGrid>
+
+        <div class="d-flex justify-end align-center gap-4 mt-4">
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveProfile" Disabled="@_isProcessing">
+                @if (_isProcessing)
+                {
+                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                    <MudText Class="ms-2">Saving...</MudText>
+                }
+                else
+                {
+                    <MudText>Save Changes</MudText>
+                }
+            </MudButton>
+        </div>
+    </MudStack>
+</MudPaper>
+
+@code {
+    private bool _isProcessing = false;
+    private UserProfileModel user = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadProfile();
+    }
+
+    private async Task LoadProfile()
+    {
+        var userId = CurrentUserService.UserId;
+        if (string.IsNullOrEmpty(userId)) return;
+
+        _isProcessing = true;
+
+        var response = await PersonalInformationService.GetPersonalInformationByIdAsync(userId);
+        
+        if (response != null && response.IsSuccess && response.Value != null)
+        {
+            var profile = response.Value;
+
+            user = new UserProfileModel
+            {
+                FirstName = profile.FirstName ?? string.Empty,
+                LastName = profile.LastName ?? string.Empty,
+                Bio = profile.ShortBio ?? string.Empty,
+                JobTitle = profile.JobTitle ?? string.Empty,
+                DateOfBirth = profile.DateOfBirth,
+                Contact = new ContactModel
+                {
+                    Email = profile.Email ?? string.Empty,
+                    Phone = profile.PhoneNumber ?? string.Empty,
+                    Address = profile.StreetAddress ?? string.Empty,
+                    City = profile.City ?? string.Empty,
+                    Country = profile.Country ?? string.Empty,
+                    PostalCode = profile.ZipCode ?? string.Empty
+                },
+                Socials = new UserSocialModel
+                {
+                    LinkedIn = profile.SocialMediaLinkedIn ?? string.Empty,
+                    Instagram = profile.SocialMediaInstagram ?? string.Empty,
+                    GitHub = profile.SocialMediaX ?? string.Empty
+                }
+            };
+        }
+        _isProcessing = false;
+    }
+
+    private async Task SaveProfile()
+    {
+        var userId = CurrentUserService.UserId;
+        if (string.IsNullOrEmpty(userId))
+        {
+            Snackbar.Add("User session not found.", Severity.Error);
+            return;
+        }
+
+        _isProcessing = true;
+
+        var updateRequest = new UpdateProfileRequest
+        {
+            Id = userId,
+            FirstName = user.FirstName,
+            LastName = user.LastName,
+            ShortBio = user.Bio,
+            JobTitle = user.JobTitle,
+            DateOfBirth = user.DateOfBirth,
+            PhoneNumber = user.Contact.Phone,
+            StreetAddress = user.Contact.Address,
+            City = user.Contact.City,
+            Country = user.Contact.Country,
+            ZipCode = user.Contact.PostalCode,
+            SocialMediaLinkedIn = user.Socials.LinkedIn,
+            SocialMediaInstagram = user.Socials.Instagram,
+            SocialMediaX = user.Socials.GitHub
+        };
+
+        var result = await PersonalInformationService.UpdatePersonalInformationAsync(updateRequest);
+        await Task.Delay(500);
+
+        if (result != null && result.IsSuccess)
+        {
+            Snackbar.Add("Profile updated! Please re-login to see all changes in the session.", Severity.Success, config =>
+            {
+                config.VisibleStateDuration = 5000;
+            });
+
+        }
+        else
+        {
+            Snackbar.Add(result?.Message ?? "Update failed", Severity.Error);
+        }
+
+        _isProcessing = false;
+    }
+
+    public class UserProfileModel
+    {
+        public string FirstName { get; set; } = string.Empty;
+        public string LastName { get; set; } = string.Empty;
+        public string Bio { get; set; } = string.Empty;
+        public string JobTitle { get; set; } = string.Empty;
+        public DateTime? DateOfBirth { get; set; }
+        public ContactModel Contact { get; set; } = new();
+        public UserSocialModel Socials { get; set; } = new();
+    }
+
+    public class ContactModel
+    {
+        public string Email { get; set; } = string.Empty;
+        public string Phone { get; set; } = string.Empty;
+        public string Address { get; set; } = string.Empty;
+        public string City { get; set; } = string.Empty;
+        public string Country { get; set; } = string.Empty;
+        public string PostalCode { get; set; } = string.Empty;
+    }
+
+    public class UserSocialModel
+    {
+        public string LinkedIn { get; set; } = string.Empty;
+        public string GitHub { get; set; } = string.Empty;
+        public string Instagram { get; set; } = string.Empty;
+    }
+}
@@ -0,0 +1,59 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Profile.PersonalInformation.Cqrs;
+
+public class GetProfileByIdResponse
+{
+    public string Id { get; set; } = string.Empty;
+    public string? FirstName { get; set; }
+    public string? LastName { get; set; }
+    public string? ShortBio { get; set; }
+    public string? JobTitle { get; set; }
+    public DateTime? DateOfBirth { get; set; }
+    public string? Email { get; set; }
+    public string? PhoneNumber { get; set; }
+    public string? StreetAddress { get; set; }
+    public string? City { get; set; }
+    public string? Country { get; set; }
+    public string? ZipCode { get; set; }
+    public string? SocialMediaLinkedIn { get; set; }
+    public string? SocialMediaInstagram { get; set; }
+    public string? SocialMediaX { get; set; }
+}
+
+public record GetProfileByIdQuery(string Id) : IRequest<GetProfileByIdResponse?>;
+
+public class GetProfileByIdHandler : IRequestHandler<GetProfileByIdQuery, GetProfileByIdResponse?>
+{
+    private readonly AppDbContext _context;
+
+    public GetProfileByIdHandler(AppDbContext context) => _context = context;
+
+    public async Task<GetProfileByIdResponse?> Handle(GetProfileByIdQuery request, CancellationToken cancellationToken)
+    {
+        return await _context.Users
+            .AsNoTracking()
+            .Where(x => x.Id == request.Id)
+            .Select(x => new GetProfileByIdResponse
+            {
+                Id = x.Id,
+                FirstName = x.FirstName,
+                LastName = x.LastName,
+                ShortBio = x.ShortBio,
+                JobTitle = x.JobTitle,
+                DateOfBirth = x.DateOfBirth,
+                Email = x.Email,
+                PhoneNumber = x.PhoneNumber,
+                StreetAddress = x.StreetAddress,
+                City = x.City,
+                Country = x.Country,
+                ZipCode = x.ZipCode,
+                SocialMediaLinkedIn = x.SocialMediaLinkedIn,
+                SocialMediaInstagram = x.SocialMediaInstagram,
+                SocialMediaX = x.SocialMediaX
+            })
+            .FirstOrDefaultAsync(cancellationToken);
+    }
+}
@@ -0,0 +1,67 @@
+using Indotalent.Infrastructure.Database;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace Indotalent.Features.Profile.PersonalInformation.Cqrs;
+
+public class UpdateProfileRequest
+{
+    public string Id { get; set; } = string.Empty;
+    public string? FirstName { get; set; }
+    public string? LastName { get; set; }
+    public string? ShortBio { get; set; }
+    public string? JobTitle { get; set; }
+    public DateTime? DateOfBirth { get; set; }
+    public string? PhoneNumber { get; set; }
+    public string? StreetAddress { get; set; }
+    public string? City { get; set; }
+    public string? Country { get; set; }
+    public string? ZipCode { get; set; }
+    public string? SocialMediaLinkedIn { get; set; }
+    public string? SocialMediaInstagram { get; set; }
+    public string? SocialMediaX { get; set; }
+}
+
+public class UpdateProfileResponse
+{
+    public bool Success { get; set; }
+    public string Message { get; set; } = string.Empty;
+}
+
+public record UpdateProfileCommand(UpdateProfileRequest Data) : IRequest<UpdateProfileResponse>;
+
+public class UpdateProfileHandler : IRequestHandler<UpdateProfileCommand, UpdateProfileResponse>
+{
+    private readonly AppDbContext _context;
+
+    public UpdateProfileHandler(AppDbContext context) => _context = context;
+
+    public async Task<UpdateProfileResponse> Handle(UpdateProfileCommand request, CancellationToken cancellationToken)
+    {
+        var user = await _context.Users
+            .FirstOrDefaultAsync(x => x.Id == request.Data.Id, cancellationToken);
+
+        if (user == null)
+            return new UpdateProfileResponse { Success = false, Message = "User not found" };
+
+        user.FullName = $"{request.Data.FirstName} {request.Data.LastName}";
+        user.FirstName = request.Data.FirstName;
+        user.LastName = request.Data.LastName;
+        user.ShortBio = request.Data.ShortBio;
+        user.JobTitle = request.Data.JobTitle;
+        user.DateOfBirth = request.Data.DateOfBirth ?? user.DateOfBirth;
+        user.PhoneNumber = request.Data.PhoneNumber;
+        user.StreetAddress = request.Data.StreetAddress;
+        user.City = request.Data.City;
+        user.Country = request.Data.Country;
+        user.ZipCode = request.Data.ZipCode;
+        user.SocialMediaLinkedIn = request.Data.SocialMediaLinkedIn ?? string.Empty;
+        user.SocialMediaInstagram = request.Data.SocialMediaInstagram ?? string.Empty;
+        user.SocialMediaX = request.Data.SocialMediaX ?? string.Empty;
+        user.UpdatedAt = DateTime.Now;
+
+        await _context.SaveChangesAsync(cancellationToken);
+
+        return new UpdateProfileResponse { Success = true };
+    }
+}
@@ -0,0 +1,26 @@
+using FluentValidation;
+using Indotalent.Shared.Consts;
+
+namespace Indotalent.Features.Profile.PersonalInformation.Cqrs;
+
+public class UpdateProfileValidator : AbstractValidator<UpdateProfileRequest>
+{
+    public UpdateProfileValidator()
+    {
+        RuleFor(x => x.Id).NotEmpty();
+
+        RuleFor(x => x.FirstName)
+            .NotEmpty().WithMessage("First name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort).WithMessage($"First name cannot exceed {GlobalConsts.StringLengthShort} characters");
+
+        RuleFor(x => x.LastName)
+            .NotEmpty().WithMessage("Last name is required")
+            .MaximumLength(GlobalConsts.StringLengthShort).WithMessage($"Last name cannot exceed {GlobalConsts.StringLengthShort} characters");
+
+        RuleFor(x => x.PhoneNumber)
+            .MaximumLength(GlobalConsts.StringLengthShort).WithMessage($"Phone cannot exceed {GlobalConsts.StringLengthShort} characters");
+
+        RuleFor(x => x.ShortBio)
+            .MaximumLength(GlobalConsts.StringLengthShort).WithMessage($"Bio cannot exceed {GlobalConsts.StringLengthShort} characters");
+    }
+}
@@ -0,0 +1,35 @@
+using Indotalent.ConfigBackEnd.Extensions;
+using Indotalent.Features.Profile.PersonalInformation.Cqrs;
+using MediatR;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+
+namespace Indotalent.Features.Profile.PersonalInformation;
+
+public static class PersonalInformationEndpoint
+{
+    public static void MapPersonalInformationEndpoints(this IEndpointRouteBuilder app)
+    {
+        var group = app.MapGroup("/personal-information").WithTags("Personal Information")
+            .RequireAuthorization(policy => policy.AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme)
+            .RequireAuthenticatedUser());
+
+        group.MapGet("/{id}", async (string id, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new GetProfileByIdQuery(id));
+            return result.ToApiResponse(result is not null
+                ? "Personal information retrieved successfully"
+                : $"User with ID {id} not found");
+        })
+        .WithName("GetPersonalInformationById");
+
+        group.MapPost("/update", async (UpdateProfileRequest request, IMediator mediator) =>
+        {
+            var result = await mediator.Send(new UpdateProfileCommand(request));
+            if (!result.Success)
+                return ((object?)null).ToApiResponse(result.Message ?? "Update failed.", StatusCodes.Status400BadRequest);
+
+            return result.ToApiResponse("Personal information has been updated successfully");
+        })
+        .WithName("UpdatePersonalInformation");
+    }
+}
@@ -0,0 +1,34 @@
+using Indotalent.ConfigBackEnd.Interfaces;
+using Indotalent.ConfigFrontEnd.Common;
+using Indotalent.Features.Profile.PersonalInformation.Cqrs;
+using Indotalent.Infrastructure.Authentication.Identity;
+using Indotalent.Shared.Models;
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using RestSharp;
+
+namespace Indotalent.Features.Profile.PersonalInformation;
+
+public class PersonalInformationService : BaseService
+{
+    private readonly RestClient _client;
+
+    public PersonalInformationService(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<GetProfileByIdResponse>?> GetPersonalInformationByIdAsync(string id)
+    {
+        var request = new RestRequest($"api/personal-information/{id}", Method.Get);
+        return await ExecuteWithResponseAsync<GetProfileByIdResponse>(_client, request);
+    }
+
+    public async Task<ApiResponse<UpdateProfileResponse>?> UpdatePersonalInformationAsync(UpdateProfileRequest data)
+    {
+        var request = new RestRequest("api/personal-information/update", Method.Post);
+        request.AddJsonBody(data);
+        return await ExecuteWithResponseAsync<UpdateProfileResponse>(_client, request);
+    }
+}
@@ -0,0 +1,103 @@
+@page "/profile"
+@using Indotalent.Features.Profile.Session
+@using Microsoft.AspNetCore.Authorization
+@using Indotalent.Infrastructure.Authorization.Identity
+@attribute [Authorize(Roles = $"{ApplicationRoles.Admin},{ApplicationRoles.Member}")]
+@using Indotalent.Features.Profile.Avatar.Components
+@using Indotalent.Features.Profile.Password.Components
+@using Indotalent.Features.Profile.PersonalInformation
+@using Indotalent.Features.Profile.Password
+@using Indotalent.Features.Profile.Avatar
+@using Indotalent.Features.Profile.PersonalInformation.Components
+@using MudBlazor
+@inject NavigationManager NavigationManager
+
+<style>
+    .clean-white-tabs .mud-tabs-toolbar {
+        background-color: white !important;
+        border-bottom: 2px solid #DCEBFA;
+        border-radius: 0px !important;
+    }
+
+    .clean-white-tabs .mud-tab {
+        color: #94a3b8 !important;
+        text-transform: none;
+        font-weight: 500;
+        min-width: 160px;
+        border-radius: 0px !important;
+    }
+
+    .clean-white-tabs .mud-tab-active {
+        color: var(--mud-palette-primary) !important;
+        font-weight: 800;
+    }
+
+    .clean-white-tabs .mud-tabs-slider {
+        background-color: var(--mud-palette-primary) !important;
+        height: 3px !important;
+        bottom: 0;
+    }
+</style>
+
+<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-2 mb-8">
+    <div class="clean-white-tabs">
+        <MudTabs Elevation="0"
+                 ActivePanelIndex="@_activeTabIndex"
+                 ActivePanelIndexChanged="OnTabChanged"
+                 ApplyEffectsToContainer="true"
+                 TabPanelsClass="pt-4">
+
+            <MudTabPanel Text="Personal Info" Icon="@Icons.Material.Outlined.Person">
+                <PersonalInformationPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Password" Icon="@Icons.Material.Outlined.Lock">
+                <PasswordPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Avatar" Icon="@Icons.Material.Outlined.AccountCircle">
+                <AvatarPage />
+            </MudTabPanel>
+
+            <MudTabPanel Text="Session" Icon="@Icons.Material.Outlined.VpnKey">
+                <SessionPage />
+            </MudTabPanel>
+
+        </MudTabs>
+    </div>
+</MudContainer>
+
+@code {
+    private int _activeTabIndex = 0;
+
+    protected override void OnInitialized()
+    {
+        var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
+        if (Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("tab", out var tabValue))
+        {
+            _activeTabIndex = tabValue.ToString().ToLower() switch
+            {
+                "personal" => 0,
+                "password" => 1,
+                "avatar" => 2,
+                "session" => 3,
+                _ => 0
+            };
+        }
+    }
+
+    private void OnTabChanged(int index)
+    {
+        _activeTabIndex = index;
+        string tabName = index switch
+        {
+            0 => "personal",
+            1 => "password",
+            2 => "avatar",
+            3 => "session",
+            _ => "personal"
+        };
+
+        NavigationManager.NavigateTo($"/profile?tab={tabName}", replace: false);
+    }
+}
@@ -0,0 +1,105 @@
+@page "/profile/session"
+@using Indotalent.ConfigBackEnd.Interfaces
+@using Indotalent.ConfigFrontEnd.Common
+@using Indotalent.Infrastructure.Authentication
+@using Indotalent.Infrastructure.Authentication.Identity
+@using Microsoft.JSInterop
+@using MudBlazor
+@inject ICurrentUserService CurrentUserService
+@inject TokenProvider TokenProvider
+@inject IDialogService DialogService
+@inject ISnackbar Snackbar
+@inject IJSRuntime JSRuntime
+
+<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 8px; border: 1px solid #DCEBFA;">
+    <MudText Typo="Typo.h6" GutterBottom="true" Style="font-weight: 800;">Active Session Information</MudText>
+    <MudText Typo="Typo.body2" Class="mb-6 text-muted">Detailed information about your current authentication state.</MudText>
+
+    <div class="d-flex flex-column gap-1">
+        <div class="pa-4" style="border-left: 4px solid var(--mud-palette-success); background: #f8fafc; border-bottom: 1px solid #eff6ff;">
+            <MudText Typo="Typo.caption" Style="font-weight: 700; color: #64748b; text-transform: uppercase;">Full Name</MudText>
+            <MudText Typo="Typo.body1" Style="font-weight: 600;">@(CurrentUserService.FullName ?? "Not Identified")</MudText>
+        </div>
+
+        <div class="pa-4" style="border-left: 4px solid var(--mud-palette-primary); background: #f8fafc; border-bottom: 1px solid #eff6ff;">
+            <MudText Typo="Typo.caption" Style="font-weight: 700; color: #64748b; text-transform: uppercase;">User ID</MudText>
+            <MudText Typo="Typo.body1" Style="font-family: monospace; font-weight: 600;">@(CurrentUserService.UserId ?? "Not Identified")</MudText>
+        </div>
+        
+        <div class="pa-4" style="border-left: 4px solid var(--mud-palette-info); background: #f8fafc; border-bottom: 1px solid #eff6ff;">
+            <MudText Typo="Typo.caption" Style="font-weight: 700; color: #64748b; text-transform: uppercase;">Username</MudText>
+            <MudText Typo="Typo.body1" Style="font-weight: 600;">@(CurrentUserService.UserName ?? "Not Identified")</MudText>
+        </div>
+
+        <div class="pa-4" style="border-left: 4px solid var(--mud-palette-secondary); background: #f8fafc;">
+            <MudText Typo="Typo.caption" Style="font-weight: 700; color: #64748b; text-transform: uppercase;">Email Address</MudText>
+            <MudText Typo="Typo.body1" Style="font-weight: 600;">@(CurrentUserService.Email ?? "Not Identified")</MudText>
+        </div>
+    </div>
+
+    <MudDivider Class="my-8" />
+
+    <div class="d-flex align-center justify-space-between pa-6" style="background-color: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 4px;">
+        <div>
+            <MudText Typo="Typo.subtitle1" Style="font-weight: 700;">JSON Web Token (JWT)</MudText>
+            <MudText Typo="Typo.body2" Style="color: #64748b;">Copy this token to use in Swagger Authorization.</MudText>
+        </div>
+        <MudButton Variant="Variant.Filled"
+                   Color="Color.Primary"
+                   StartIcon="@Icons.Material.Filled.ContentCopy"
+                   OnClick="CopyToClipboard"
+                   Style="text-transform: none; font-weight: 700; border-radius: 8px; height: 48px; min-width: 180px;">
+            Copy JWT Token
+        </MudButton>
+    </div>
+</MudPaper>
+
+@code {
+    [Inject] private IHttpContextAccessor HttpContextAccessor { get; set; } = default!;
+
+    protected override void OnInitialized()
+    {
+        if (string.IsNullOrEmpty(TokenProvider.Token))
+        {
+            var tokenFromCookie = HttpContextAccessor.HttpContext?.Request.Cookies["X-Auth-Token"];
+            if (!string.IsNullOrEmpty(tokenFromCookie))
+            {
+                TokenProvider.Token = tokenFromCookie;
+            }
+        }
+    }
+
+    private async Task CopyToClipboard()
+    {
+        var tokenValue = TokenProvider.Token;
+
+        if (string.IsNullOrEmpty(tokenValue))
+        {
+            Snackbar.Add("Token not found. Please re-login.", Severity.Error);
+            return;
+        }
+
+        await JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", tokenValue);
+        Snackbar.Add("Token copied to clipboard!", Severity.Success);
+    }
+
+    private async Task ShowJwtDialog()
+    {
+        var tokenValue = TokenProvider.Token;
+
+        if (string.IsNullOrEmpty(tokenValue))
+        {
+            await DialogService.ShowMessageBoxAsync("System Note", "Token is not available.");
+            return;
+        }
+
+        var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.Medium, FullWidth = true };
+
+        await DialogService.ShowMessageBoxAsync(
+            "Your JWT Token",
+            (MarkupString)$@"<div style='background: #1e293b; color: #f8fafc; padding: 20px; border-radius: 4px; margin-top: 10px;'>                                <p style='font-size: 10px; color: #94a3b8; margin-bottom: 10px;'>RAW TOKEN:</p>                                <code style='word-break: break-all; font-size: 11px; font-family: monospace;'>{tokenValue}</code>                             </div>",
+            "Close",
+            options: options
+        );
+    }
+}