Refactored quartz healthcheck on api

Refactored quartz client registration
Removed defaults from feature flags
2026-10-27 23:59:58 +02:00 · 2026-10-27 23:48:36 +02:00 · 2026-10-27 23:17:18 +02:00 · 2026-10-27 23:04:50 +02:00 · 2026-10-27 22:08:12 +02:00 · 2026-10-27 21:31:27 +02:00
112 changed files with 18564 additions and 3202 deletions
@@ -44,6 +44,7 @@
    <Using Include="Microsoft.Extensions.Logging" />
    <Using Include="Microsoft.Extensions.Options" />
    <Using Include="Microsoft.IdentityModel.Tokens" />
+    <Using Include="Microsoft.FeatureManagement" />

    <!-- Domain Constants -->
    <Using Static="true" Include="PostFundManagement.Domain.Extensions.Constants" />
@@ -12,67 +12,68 @@
    <PackageVersion Include="Scrutor" Version="7.0.0" />

    <!-- Microsoft Extensions & Configuration -->
-    <PackageVersion Include="Microsoft.Extensions.Caching.Hybrid" Version="10.10.0" />
-    <PackageVersion Include="Microsoft.Extensions.Caching.StackExchangeRedis" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.Extensions.Configuration" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.Extensions.Configuration.Abstractions" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.Extensions.Configuration.EnvironmentVariables" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.Extensions.Configuration.Json" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.Extensions.Configuration.UserSecrets" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.Extensions.DependencyInjection" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.Extensions.Http.Polly" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.Extensions.Http.Resilience" Version="10.10.0" />
-    <PackageVersion Include="Microsoft.Extensions.Validation" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.FeatureManagement.AspNetCore" Version="4.7.0" />
+    <PackageVersion Include="Microsoft.Extensions.Caching.Hybrid" Version="10.11.0" />
+    <PackageVersion Include="Microsoft.Extensions.Caching.StackExchangeRedis" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.Extensions.Configuration" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.Extensions.Configuration.Abstractions" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.Extensions.Configuration.EnvironmentVariables" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.Extensions.Configuration.Json" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.Extensions.Configuration.UserSecrets" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.Extensions.DependencyInjection" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.Extensions.Http.Polly" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.Extensions.Http.Resilience" Version="10.11.0" />
+    <PackageVersion Include="Microsoft.Extensions.Validation" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.FeatureManagement.AspNetCore" Version="4.8.0" />
+    <PackageVersion Include="Microsoft.Extensions.Hosting" Version="10.0.14" />

    <!-- Security, Authentication & Identity -->
    <PackageVersion Include="AccessTokenClient.Extensions" Version="5.1.0" />
-    <PackageVersion Include="Duende.AccessTokenManagement" Version="4.2.0" />
-    <PackageVersion Include="Duende.AccessTokenManagement.OpenIdConnect" Version="4.2.0" />
+    <PackageVersion Include="Duende.AccessTokenManagement" Version="4.3.0" />
+    <PackageVersion Include="Duende.AccessTokenManagement.OpenIdConnect" Version="4.3.0" />
    <PackageVersion Include="IdentityModel" Version="6.2.0" />
    <PackageVersion Include="IdentityModel.AspNetCore" Version="4.3.0" />
    <PackageVersion Include="IdentityModel.AspNetCore.OAuth2introspection" Version="6.2.0" />
    <PackageVersion Include="IdentityServer4.AccessTokenValidation" Version="3.0.1" />
-    <PackageVersion Include="KubernetesClient" Version="19.0.2" />
-    <PackageVersion Include="Microsoft.AspNetCore.Authentication.Certificate" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.AspNetCore.DataProtection.EntityFrameworkCore" Version="10.0.12" />
+    <PackageVersion Include="KubernetesClient" Version="21.0.8" />
+    <PackageVersion Include="Microsoft.AspNetCore.Authentication.Certificate" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.AspNetCore.DataProtection.EntityFrameworkCore" Version="10.0.14" />
    
    <!-- Upgraded to latest non-vulnerable version -->
-    <PackageVersion Include="System.Security.Cryptography.Pkcs" Version="10.0.13" />
-    <PackageVersion Include="System.Security.Cryptography.Xml" Version="10.0.13" />
+    <PackageVersion Include="System.Security.Cryptography.Pkcs" Version="10.0.14" />
+    <PackageVersion Include="System.Security.Cryptography.Xml" Version="10.0.14" />

    <!-- Resilience -->
-    <PackageVersion Include="Polly" Version="8.8.0" />
-    <PackageVersion Include="Polly.Extensions" Version="8.8.0" />
+    <PackageVersion Include="Polly" Version="8.8.1" />
+    <PackageVersion Include="Polly.Extensions" Version="8.8.1" />

    <!-- API, Web & Documentation -->
    <PackageVersion Include="Asp.Versioning.Abstractions" Version="10.2.1" />
    <PackageVersion Include="Asp.Versioning.Http" Version="10.2.3" />
    <PackageVersion Include="Asp.Versioning.Mvc.ApiExplorer" Version="10.2.1" />
-    <PackageVersion Include="Microsoft.AspNetCore.OpenApi" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.AspNetCore.OutputCaching.StackExchangeRedis" Version="10.0.12" />
-    <PackageVersion Include="Refit.HttpClientFactory" Version="15.2.0" />
-    <PackageVersion Include="Scalar.AspNetCore" Version="2.17.4" />
+    <PackageVersion Include="Microsoft.AspNetCore.OpenApi" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.AspNetCore.OutputCaching.StackExchangeRedis" Version="10.0.14" />
+    <PackageVersion Include="Refit.HttpClientFactory" Version="16.4.0" />
+    <PackageVersion Include="Scalar.AspNetCore" Version="2.18.3" />

    <!-- Database & Entity Framework Core -->
-    <PackageVersion Include="Microsoft.EntityFrameworkCore" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.EntityFrameworkCore.Abstractions" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.EntityFrameworkCore.Analyzers" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.EntityFrameworkCore.InMemory" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.EntityFrameworkCore.Relational" Version="10.0.12" />
-    <PackageVersion Include="Microsoft.EntityFrameworkCore.Tools" Version="10.0.12" />
+    <PackageVersion Include="Microsoft.EntityFrameworkCore" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.EntityFrameworkCore.Abstractions" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.EntityFrameworkCore.Analyzers" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.EntityFrameworkCore.InMemory" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.EntityFrameworkCore.Relational" Version="10.0.14" />
+    <PackageVersion Include="Microsoft.EntityFrameworkCore.Tools" Version="10.0.14" />
    <PackageVersion Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.3" />

    <!-- Quartz Scheduler -->
-    <PackageVersion Include="Quartz" Version="4.1.0" />
-    <PackageVersion Include="Quartz.AspNetCore" Version="4.1.0" />
-    <PackageVersion Include="Quartz.Extensions.DependencyInjection" Version="4.1.0" />
-    <PackageVersion Include="Quartz.Plugins" Version="4.1.0" />
-    <PackageVersion Include="Quartz.Plugins.TimeZoneConverter" Version="4.1.0" />
-    <PackageVersion Include="Quartz.Serialization.SystemTextJson" Version="4.1.0" />
+    <PackageVersion Include="Quartz" Version="4.6.2" />
+    <PackageVersion Include="Quartz.AspNetCore" Version="4.6.2" />
+    <PackageVersion Include="Quartz.Extensions.DependencyInjection" Version="4.6.2" />
+    <PackageVersion Include="Quartz.Plugins" Version="4.6.2" />
+    <PackageVersion Include="Quartz.Plugins.TimeZoneConverter" Version="4.6.2" />
+    <PackageVersion Include="Quartz.Serialization.SystemTextJson" Version="4.6.2" />

    <!-- Health Checks -->
    <PackageVersion Include="AspNetCore.HealthChecks.NpgSql" Version="9.0.0" />
@@ -83,17 +84,17 @@
    <PackageVersion Include="AspNetCore.HealthChecks.UI.InMemory.Storage" Version="9.0.0" />

    <!-- Observability & OpenTelemetry -->
-    <PackageVersion Include="OpenTelemetry" Version="1.18.0" />
-    <PackageVersion Include="OpenTelemetry.Exporter.Console" Version="1.18.0" />
-    <PackageVersion Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.18.0" />
-    <PackageVersion Include="OpenTelemetry.Extensions.Hosting" Version="1.18.0" />
-    <PackageVersion Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.18.0" />
-    <PackageVersion Include="OpenTelemetry.Instrumentation.Http" Version="1.18.0" />
-    <PackageVersion Include="OpenTelemetry.Instrumentation.Runtime" Version="1.18.0" />
+    <PackageVersion Include="OpenTelemetry" Version="1.20.1" />
+    <PackageVersion Include="OpenTelemetry.Exporter.Console" Version="1.20.1" />
+    <PackageVersion Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.20.1" />
+    <PackageVersion Include="OpenTelemetry.Extensions.Hosting" Version="1.20.1" />
+    <PackageVersion Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.20.1" />
+    <PackageVersion Include="OpenTelemetry.Instrumentation.Http" Version="1.20.1" />
+    <PackageVersion Include="OpenTelemetry.Instrumentation.Runtime" Version="1.20.1" />

    <!-- Email & Messaging -->
-    <PackageVersion Include="MailKit" Version="4.18.0" />
-    <PackageVersion Include="MimeKit" Version="4.18.0" />
+    <PackageVersion Include="MailKit" Version="4.18.2" />
+    <PackageVersion Include="MimeKit" Version="4.18.2" />

    <!-- CQRS & Mediator -->
    <PackageVersion Include="FluentResults" Version="4.0.0" />
@@ -101,17 +102,17 @@
    <PackageVersion Include="Mediator.SourceGenerator" Version="3.0.2" />

    <!-- Cloud Storage -->
-    <PackageVersion Include="AWSSDK.Extensions.NetCore.Setup" Version="4.0.101.4" />
-    <PackageVersion Include="AWSSDK.S3" Version="4.0.103.3" />
+    <PackageVersion Include="AWSSDK.Extensions.NetCore.Setup" Version="4.0.102.7" />
+    <PackageVersion Include="AWSSDK.S3" Version="4.0.104.7" />

    <!-- Analyzers -->
-    <PackageVersion Include="Meziantou.Analyzer" Version="3.0.259" />
+    <PackageVersion Include="Meziantou.Analyzer" Version="3.0.317" />

    <!-- Testing -->
-    <PackageVersion Include="coverlet.collector" Version="6.0.4" />
-    <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.14.1" />
+    <PackageVersion Include="coverlet.collector" Version="10.1.0" />
+    <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="18.11.0" />
    <PackageVersion Include="xunit" Version="2.9.3" />
-    <PackageVersion Include="xunit.runner.visualstudio" Version="3.1.4" />
+    <PackageVersion Include="xunit.runner.visualstudio" Version="4.0.1" />
  </ItemGroup>
 </Project>

@@ -11,7 +11,7 @@ public class GetProjectEvidenceEndpoint : IEndpoint
 {
    public void Map(IEndpointRouteBuilder builder)
    {
-        builder.MapGet("api/evidence/{projectId}", async (string projectId, IEvidenceService service, 
+        builder.MapGet("api/evidence/projects/{projectId}", async (string projectId, IEvidenceService service, 
            CancellationToken cancellationToken = default) =>
                await service.GetProjectEvidencesAsync(projectId, cancellationToken) switch
                {
@@ -12,7 +12,14 @@ public sealed class CreateOutcomeEndpoint : IEndpoint
 {
    public void Map(IEndpointRouteBuilder builder)
    {
-        builder.MapPost("api/projects/beneficiaries/outcomes", HandleCreateAsync)
+        builder.MapPost("api/projects/beneficiaries/outcomes", async (CreateOutcomeRequest request, HttpContext context,
+        IProjectService service, CancellationToken cancellationToken = default) =>
+            await service.CreateOutcomeAsync(request, context.GetUserId(), cancellationToken) switch
+            {
+                { IsSuccess: true } => Results.Ok(),
+                var r when r.HasError<CreateError>() => Results.BadRequest(r.Errors.ToProblems()),
+                var r => Results.InternalServerError(r.Errors.ToProblems())
+            })
            .WithDescription("Add a new beneficiary outcome")
            .RequireAuthorization(Constants.MainScope)
            .WithName(typeof(CreateOutcomeEndpoint).ToEndpointName())
@@ -22,25 +29,5 @@ public sealed class CreateOutcomeEndpoint : IEndpoint
            .Produces<Problems>(StatusCodes.Status500InternalServerError)
            .Produces(StatusCodes.Status401Unauthorized)
            .WithTags(EndpointTags.Projects);
-
-        builder.MapPost("api/projects/beneficiaris/outcomes", HandleCreateAsync)
-            .WithDescription("Add a new beneficiary outcome (legacy route)")
-            .RequireAuthorization(Constants.MainScope)
-            .WithName(typeof(CreateOutcomeEndpoint).ToEndpointName("TypoAlias"))
-            .MapToApiVersion(new ApiVersion(1))
-            .Produces(StatusCodes.Status200OK)
-            .Produces<Problems>(StatusCodes.Status400BadRequest)
-            .Produces<Problems>(StatusCodes.Status500InternalServerError)
-            .Produces(StatusCodes.Status401Unauthorized)
-            .WithTags(EndpointTags.Projects);
    }
-
-    private static async Task<IResult> HandleCreateAsync(CreateOutcomeRequest request, HttpContext context,
-        IProjectService service, CancellationToken cancellationToken = default) =>
-        await service.CreateOutcomeAsync(request, context.GetUserId(), cancellationToken) switch
-        {
-            { IsSuccess: true } => Results.Ok(),
-            var r when r.HasError<CreateError>() => Results.BadRequest(r.Errors.ToProblems()),
-            var r => Results.InternalServerError(r.Errors.ToProblems())
-        };
 }
@@ -1,4 +1,4 @@
-using PostFundManagement.Application.Abstractions.Services;
+using PostFundManagement.Application.Abstractions.Services;
 using PostFundManagement.Application.Extensions;
 using PostFundManagement.Domain.Abstractions;
 using PostFundManagement.Domain.Errors;
@@ -13,12 +13,18 @@ public sealed class SetUserLockoutEndpoint : IEndpoint
    {
        builder.MapPut("api/users/{userId:Guid}/session/lockout/{disable:bool}", async (Guid userId, bool disable, HttpContext context,
            IUserService service, CancellationToken cancellationToken = default) =>
-                await service.SetUserLockoutAsync(userId, context.GetUserId(), disable, cancellationToken) switch
+        {
+            var (_, role) = context.User.GetUserRole();
+            if (role != null && role.Equals("Partner", StringComparison.OrdinalIgnoreCase))
+                return Results.Forbid();
+
+            return await service.SetUserLockoutAsync(userId, context.GetUserId(), disable, cancellationToken) switch
            {
                {  IsSuccess: true } => Results.Ok(),
                var r when r.HasError<NotFoundError>() => Results.NotFound(r.Errors.ToProblems()),
                var r when r.HasError<UpdateError>() => Results.BadRequest(r.Errors.ToProblems()),
                var r => Results.InternalServerError(r.Errors.ToProblems())
+            };
        })
        .WithDescription("Lock user session")
        .RequireAuthorization(Constants.MainScope)
@@ -26,6 +32,7 @@ public sealed class SetUserLockoutEndpoint : IEndpoint
        .MapToApiVersion(new ApiVersion(1))
        .Produces(StatusCodes.Status200OK)
        .Produces(StatusCodes.Status401Unauthorized)
+        .Produces(StatusCodes.Status403Forbidden)
        .Produces<Problems>(StatusCodes.Status404NotFound)
        .Produces<Problems>(StatusCodes.Status400BadRequest)
        .Produces<Problems>(StatusCodes.Status500InternalServerError)
@@ -11,8 +11,8 @@ public class SyncUserEndpoint : IEndpoint
 {
    public void Map(IEndpointRouteBuilder builder)
    {
-        builder.MapPost("api/integration/sync", async (IJobOrchestrator jobOrchestrator,
-            HttpContext context, IUserService service, CancellationToken cancellationToken = default) =>
+        builder.MapPost("api/integration/sync", async (HttpContext context, IUserService service, 
+            CancellationToken cancellationToken = default) =>
                await service.SyncUserAsync(context.GetUserId(), context.GetUserEmail(), context.GetUserRole(), cancellationToken) switch
                {
                    { IsSuccess: true } => Results.Ok(),
@@ -4,7 +4,6 @@ using PostFundManagement.Domain.Abstractions;
 using PostFundManagement.Domain.Health;
 using PostFundManagement.Domain.Mediator;
 using PostFundManagement.Infrastructure.Database.Services;
-using static PostFundManagement.Domain.Extensions.Constants;

 var builder = WebApplication.CreateBuilder(args);

@@ -45,7 +44,7 @@ builder.Services.AddSkorubaApiService(builder.Configuration);
 builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
 builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));

-builder.Services.AddQuartzScheduler(DefaultSchedulerName, builder.Configuration);
+builder.Services.AddQuartzSchedulerClient(DefaultSchedulerName, builder.Configuration);
 builder.Services.AddEmailServices(builder.Configuration);
 builder.Services.AddHashServices(builder.Configuration);
 builder.Services.AddGarageS3(builder.Configuration);
@@ -116,7 +115,29 @@ builder.Services.AddCors(options =>
 {
    options.AddPolicy(CorsPolicy, policy =>
    {
-        policy.WithOrigins(allowedOrigins)
+        policy.SetIsOriginAllowed(origin =>
+              {
+                  if (string.IsNullOrWhiteSpace(origin)) return false;
+
+                  var clean = origin.TrimEnd('/');
+
+                  if (allowedOrigins.Any(a => string.Equals(a.TrimEnd('/'), clean, StringComparison.OrdinalIgnoreCase)))
+                      return true;
+
+                  try
+                  {
+                      var host = new Uri(origin).Host;
+                      if (host.EndsWith("khongisa.co.za", StringComparison.OrdinalIgnoreCase) ||
+                          host.Equals("localhost", StringComparison.OrdinalIgnoreCase) ||
+                          host.Equals("127.0.0.1", StringComparison.OrdinalIgnoreCase))
+                      {
+                          return true;
+                      }
+                  }
+                  catch { /* eat all exceptions */ }
+
+                  return false;
+              })
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
@@ -125,12 +146,7 @@ builder.Services.AddCors(options =>

 var app = builder.Build();

-var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
-var scheduler = await schedulerFactory.GetScheduler();
-
-if (scheduler!.Status != SchedulerStatus.Running)
-    await scheduler.Start();
-
+app.UseCors(CorsPolicy);
 app.UseHsts();
 app.UseHttpsRedirection();
 app.UseRouting();
@@ -1,6 +1,7 @@
 {
  "EnableServiceCaching": true,
  "CorsOrigins": [
+    "https://partner.ifri.khongisa.co.za",
    "https://console.ifri.khongisa.co.za",
    "https://localhost:7208"
  ],
@@ -31,13 +32,6 @@
      "Microsoft.EntityFrameworkCore.Update": "Error"
    }
  },  
-  "EmailProcessorCron": "0 */5 * * * ?",
-  "Email": {
-    "SmtpServer": "smtp.example.com",
-    "SmtpPort": 587,
-    "SenderEmail": "noreply@example.com",
-    "SenderName": "Example"
-  },
  "HasherSettings": {
    "MinHashLength": 11
  },
@@ -25,7 +25,6 @@ public interface ICommunicationsService
    Task<Result> CreateNotificationAsync(CreateNotificationRequest request, Guid userId, CancellationToken cancellationToken = default);

    [Log]
-    [Audit]
    Task<Result> UpdateNotificationAsync(UpdateNotificationRequest request, CancellationToken cancellationToken = default);

    [Log]
@@ -20,7 +20,7 @@ public static class Quartz
        services.AddQuartz(config =>
        {
            config.UseSimpleTypeLoader();
-            config.UseDefaultThreadPool(options => options.MaxConcurrency = 0);
+            config.UseThreadPool<global::Quartz.Impl.ZeroSizeThreadPool>();
            config.UseTimeZoneConverter();

            config.UsePersistentStore(storage =>
@@ -1,9 +1,3 @@
-using System.Reflection;
-using System.Security.Claims;
-using System.Text.Json;
-using Castle.DynamicProxy;
-using FluentResults;
-using Microsoft.AspNetCore.Http;
 using PostFundManagement.Application.Services.Shared;
 using PostFundManagement.Domain.Attributes;

@@ -20,6 +20,7 @@ public sealed record InviteRequest([Required] long OrganisationId,
    [Required] long InvitedOrganisationId,
    [Required] long AwardId,
    [Required] long ContractId,
+    [Required] long ProjectId,
    [Required] Guid Recipient,
    [Required][MaxLength(LabelLength)] string Message,
    [Required] NotificationPlatform Platform);
@@ -182,7 +182,7 @@ public sealed class GovernanceService(IDbContextFactory<ApplicationDbContext> co
            if (!await context.Users.AnyAsync(u => u.Id == request.OrganisationUser, cancellationToken))
                return Result.Fail(ValidationError.Create("Organisation user not found"));

-            if (!await context.TenantUsers.AnyAsync(u => u.UserId == request.OrganisationUser && u.TenantId == tenantContext.TenantId, cancellationToken))
+            if (!tenantContext.IsAdmin && !await context.TenantUsers.AnyAsync(u => u.UserId == request.OrganisationUser && u.TenantId == tenantContext.TenantId, cancellationToken))
                return Result.Fail(ValidationError.Create("Organisation user does not belong to the current tenant"));

            var changedTotal = await context.Organisations
@@ -192,6 +192,7 @@ public sealed class GovernanceService(IDbContextFactory<ApplicationDbContext> co
                    .SetProperty(u => u.RegistrationNo, request.RegistrationNo.Clean())
                    .SetProperty(u => u.Email, request.Email.ToLower(CultureInfo.InvariantCulture).Clean())
                    .SetProperty(u => u.Type, request.Type)
+                    .SetProperty(u => u.UserId, request.OrganisationUser) 
                    .SetProperty(u => u.Status, request.Status), cancellationToken);

            var tenantOrganisation = await context.TenantOrganisations.AsNoTracking().FirstOrDefaultAsync(f => f.OrganisationId == request.OrganisationId, cancellationToken);
@@ -161,11 +161,6 @@ public sealed class GrantsService(IDbContextFactory<ApplicationDbContext> contex
            if (!await context.Projects.AnyAsync(p => p.Id == request.ProjectId, cancellationToken))
                return Result.Fail(NotFoundError.New);            

-            var hasApprovedAward = await context.Awards
-                .AnyAsync(a => a.ProjectId == request.ProjectId && a.Status == ApprovalStatus.Approved, cancellationToken);
-            if (!hasApprovedAward)
-                return Result.Fail(ValidationError.Create("Cannot create budget: The project's linked award is not approved or does not exist."));
-
            var budget = new Domain.Entities.Budget
            {
                ProjectId = request.ProjectId,
@@ -20,27 +20,6 @@ public sealed class ProjectService(IDbContextFactory<ApplicationDbContext> conte
            if (!await context.Users.AnyAsync(u => u.Id == userId, cancellationToken))
                return Result.Fail(NotFoundError.New);

-            if (request.Status == ApprovalStatus.Approved)
-            {
-                var hasUnmetCompliance = await context.ComplianceItems
-                    .AnyAsync(c => c.ProjectId == request.ProjectId && c.Status == ComplianceStatus.NotMet, cancellationToken);
-                if (hasUnmetCompliance)
-                    return Result.Fail(ValidationError.Create("Project cannot be approved because some compliance items are not met."));
-
-                var projectBeneficiaryIds = await context.Beneficiaries
-                    .Where(b => b.ProjectId == request.ProjectId)
-                    .Select(b => b.Id)
-                    .ToListAsync(cancellationToken);
-
-                if (projectBeneficiaryIds.Count > 0)
-                {
-                    var hasUnmetOutcomes = await context.Outcomes
-                        .AnyAsync(o => projectBeneficiaryIds.Contains(o.BeneficiaryId) && o.Status == ComplianceStatus.NotMet, cancellationToken);
-                    if (hasUnmetOutcomes)
-                        return Result.Fail(ValidationError.Create("Project cannot be approved because some beneficiary outcomes are not met."));
-                }
-            }
-
            var changedTotal = await context.Projects
                .Where(f => f.Id == request.ProjectId)
                .ExecuteUpdateAsync(f => f
@@ -51,8 +51,10 @@ public sealed partial class HashService(IHashids hasher) : IService

        int[] decoded = hasher.Decode(hash);

-        return Result.FailIf(decoded.Length <= 0, ValidationError.Create("Invalid or modified Int hash token."))
-            .ToResult(decoded[0]);
+        if (decoded.Length <= 0)
+            return Result.Fail<int>(ValidationError.Create("Invalid or modified Int hash token."));
+
+        return Result.Ok(decoded[0]);
    }

    public Result<long> DecodeLongIdHash(string hash)
@@ -62,8 +64,10 @@ public sealed partial class HashService(IHashids hasher) : IService

        long[] decoded = hasher.DecodeLong(hash);

-        return Result.FailIf(decoded.Length <= 0, ValidationError.Create("Invalid or modified Long hash token."))
-            .ToResult(decoded[0]);
+        if (decoded.Length <= 0)
+            return Result.Fail<long>(ValidationError.Create("Invalid or modified Long hash token."));
+
+        return Result.Ok(decoded[0]);
    }

    public async Task<Result<string>> DecodeHexHash(string hex) =>
@@ -12,7 +12,6 @@ APP_URL="MY_APP_URL"
 VITE_OIDC_AUTHORITY="https://sts.security.khongisa.co.za"
 VITE_OIDC_AUDIENCE="pfm-api-dev"
 VITE_OIDC_CLIENT_ID="pfm-scalar-dev"
-VITE_OIDC_CLIENT_SECRET="secret_71f88570a46eb22eb5270b47f69e3332c84d8db85d008f0276cb7431c8872d27"

 # PFM Backend API Base URL
 VITE_API_BASE_URL="https://api.ifri.khongisa.co.za/"
@@ -26,15 +26,12 @@ OIDC_AUDIENCE="${VITE_OIDC_AUDIENCE:-${OIDC_AUDIENCE:-${SecuritySettings__Audien
 # 4. OIDC Client ID
 OIDC_CLIENT_ID="${VITE_OIDC_CLIENT_ID:-${OIDC_CLIENT_ID:-${SecuritySettings__ClientId:-${SecuritySettings_ClientId:-${CLIENT_ID:-}}}}}"

-# 5. OIDC Client Secret
-OIDC_CLIENT_SECRET="${VITE_OIDC_CLIENT_SECRET:-${OIDC_CLIENT_SECRET:-${SecuritySettings__ClientSecret:-${SecuritySettings_ClientSecret:-${CLIENT_SECRET:-}}}}}"
-
-# 6. OIDC Scope
+# 5. OIDC Scope
 OIDC_SCOPE="${VITE_OIDC_SCOPE:-${OIDC_SCOPE:-${SecuritySettings__Scope:-${SecuritySettings_Scope:-${SCOPE:-}}}}}"

-# 7. Hasher Settings
-HASHER_SALT="${VITE_HASHER_SALT:-${HASHER_SALT:-${HasherSettings__Salt:-${HasherSettings_Salt:-}}}}}"
-HASHER_MIN_LENGTH="${VITE_HASHER_MIN_LENGTH:-${HASHER_MIN_LENGTH:-${HasherSettings__MinLength:-${HasherSettings_MinLength:-}}}}}"
+# 6. Hasher Settings
+HASHER_MIN_LENGTH="${VITE_HASHER_MIN_LENGTH:-${HASHER_MIN_LENGTH:-${HasherSettings__MinLength:-${HasherSettings_MinLength:-11}}}}"
+HASHER_SALT="${VITE_HASHER_SALT:-${HASHER_SALT:-${HasherSettings__Salt:-${HasherSettings_Salt:-TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==}}}}"

 if [ -d "$TARGET_DIR" ]; then
  echo "[docker-entrypoint] Generating runtime configuration files in $TARGET_DIR..."
@@ -51,14 +48,12 @@ window.__RUNTIME_CONFIG__ = {
  VITE_OIDC_AUDIENCE: "${OIDC_AUDIENCE}",
  OIDC_CLIENT_ID: "${OIDC_CLIENT_ID}",
  VITE_OIDC_CLIENT_ID: "${OIDC_CLIENT_ID}",
-  OIDC_CLIENT_SECRET: "${OIDC_CLIENT_SECRET}",
-  VITE_OIDC_CLIENT_SECRET: "${OIDC_CLIENT_SECRET}",
  OIDC_SCOPE: "${OIDC_SCOPE}",
  VITE_OIDC_SCOPE: "${OIDC_SCOPE}",
-  HASHER_SALT: "${HASHER_SALT}",
-  VITE_HASHER_SALT: "${HASHER_SALT}",
  HASHER_MIN_LENGTH: "${HASHER_MIN_LENGTH}",
  VITE_HASHER_MIN_LENGTH: "${HASHER_MIN_LENGTH}",
+  HASHER_SALT: "${HASHER_SALT}",
+  VITE_HASHER_SALT: "${HASHER_SALT}",
  ApiSettings: {
    BaseUrl: "${API_BASE_URL}"
  },
@@ -66,7 +61,6 @@ window.__RUNTIME_CONFIG__ = {
    Authority: "${OIDC_AUTHORITY}",
    Audience: "${OIDC_AUDIENCE}",
    ClientId: "${OIDC_CLIENT_ID}",
-    ClientSecret: "${OIDC_CLIENT_SECRET}",
    Scope: "${OIDC_SCOPE}"
  },
  HasherSettings: {
@@ -86,7 +80,6 @@ EOF
    "Authority": "${OIDC_AUTHORITY}",
    "Audience": "${OIDC_AUDIENCE}",
    "ClientId": "${OIDC_CLIENT_ID}",
-    "ClientSecret": "${OIDC_CLIENT_SECRET}",
    "Scope": "${OIDC_SCOPE}"
  },
  "HasherSettings": {
@@ -6,11 +6,10 @@
    "Authority": "",
    "Audience": "",
    "ClientId": "",
-    "ClientSecret": "",
    "Scope": ""
  },
  "HasherSettings": {
-    "Salt": "",
-    "MinHashLength": ""
+    "Salt": "TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==",
+    "MinHashLength": "11"
  }
 }
@@ -1,4 +1,13 @@
 // Development and fallback runtime configuration.
 // In Docker / Kubernetes / Cloud Run deployments, this file is dynamically
 // populated at container startup by /docker-entrypoint.sh with deployment environment variables.
-window.__RUNTIME_CONFIG__ = window.__RUNTIME_CONFIG__ || {};
+window.__RUNTIME_CONFIG__ = window.__RUNTIME_CONFIG__ || {
+  HASHER_SALT: "TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==",
+  VITE_HASHER_SALT: "TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==",
+  HASHER_MIN_LENGTH: "11",
+  VITE_HASHER_MIN_LENGTH: "11",
+  HasherSettings: {
+    Salt: "TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==",
+    MinHashLength: "11"
+  }
+};
@@ -10,13 +10,14 @@ import {
  isActivationPending,
  getActivationPendingReason,
  clearUserSyncInBrowser,
+  setActivationPending,
  UserSyncResult,
 } from '../services/userSyncService';
 import { AccountActivationModal } from '../components/auth/AccountActivationModal';
 import { PartnerAccessDeniedModal } from '../components/auth/PartnerAccessDeniedModal';
 import { SessionExpiredModal } from '../components/auth/SessionExpiredModal';
-import { encodeHashIdSync } from '../services/toolsService';
-import { verifyTenantLockout } from '../services/tenantLockoutService';
+import { encodeHashIdSync } from '../utils/hashids';
+import { verifyTenantLockout, clearTenantLockoutCache } from '../services/tenantLockoutService';
 import {
  onSessionExpired,
  triggerSessionExpired,
@@ -307,11 +308,6 @@ export function resetUserManager(): void {
  userManagerInstance = null;
 }

-// Automatically reset UserManager when runtime configuration is updated
-onConfigChanged(() => {
-  resetUserManager();
-});
-
 export function getUserManager(): UserManager {
  if (!userManagerInstance && typeof window !== 'undefined') {
    const sec = getSecuritySettings();
@@ -320,7 +316,7 @@ export function getUserManager(): UserManager {
    userManagerInstance = new UserManager({
      authority: sec.Authority,
      client_id: sec.ClientId,
-      client_secret: sec.ClientSecret,
+      ...(sec.ClientSecret ? { client_secret: sec.ClientSecret } : {}),
      redirect_uri: `${origin}/dashboard`,
      post_logout_redirect_uri: `${origin}/`,
      response_type: 'code',
@@ -437,8 +433,8 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
            localStorage.setItem(LOCAL_STORAGE_CLAIMS_KEY, JSON.stringify(mergedClaims));

            const tenantClaimValues = extractTenantClaimValues(mergedClaims, token);
-            const tenantClaim = (mergedClaims.tenant as string) || (oidcUser.profile?.tenant as string) || tenantClaimValues.tenant || undefined;
-            const parsedTenantId = extractTenantId(mergedClaims, token);
+            let tenantClaim = (mergedClaims.tenant as string) || (oidcUser.profile?.tenant as string) || tenantClaimValues.tenant || undefined;
+            let parsedTenantId = extractTenantId(mergedClaims, token);
            setTenantId(parsedTenantId);

            const profile: AuthUserProfile = {
@@ -458,7 +454,38 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
            // Clean up code and state from URL
            window.history.replaceState({}, document.title, window.location.pathname);

-            // Verify tenant lockout at the instance tenant and tenant_id claims are retrieved
+            // Step 1: Synchronize authenticated user profile with backend directory FIRST (/v1/api/integration/sync)
+            try {
+              const syncResult = await syncUserAccount(userSub, token, profile, true);
+              if (syncResult.isUnauthorized) {
+                await logout();
+                window.location.replace('/');
+                return;
+              }
+
+              // Step 2: Retrieve user roles, role claims, and user claims (Requirement 2 & 3 & 7)
+              try {
+                const resolved = await resolveUserRolesAndClaims(userSub, mergedClaims, profile);
+                if (resolved.primaryRole) {
+                  profile.role = resolved.primaryRole;
+                }
+                if (resolved.tenant) {
+                  profile.tenant = resolved.tenant;
+                  tenantClaim = resolved.tenant;
+                  setTenantName(resolved.tenant);
+                }
+                if (resolved.tenant_id !== undefined) {
+                  profile.tenant_id = resolved.tenant_id;
+                  parsedTenantId = resolved.tenant_id;
+                  setTenantId(resolved.tenant_id);
+                }
+                setUser({ ...profile });
+                setClaims({ ...resolved.claims });
+                localStorage.setItem(LOCAL_STORAGE_USER_KEY, JSON.stringify(profile));
+                localStorage.setItem(LOCAL_STORAGE_CLAIMS_KEY, JSON.stringify(resolved.claims));
+              } catch {}
+
+              // Step 3: Verify tenant lockout now that user is synced and authenticated
              const tenantLockoutResult = await verifyTenantLockout(
                parsedTenantId ?? tenantClaimValues.tenantId,
                tenantClaim
@@ -480,14 +507,6 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
                setTenantName(tenantClaim);
              }

-            // Synchronize authenticated user profile with backend directory
-            try {
-              const syncResult = await syncUserAccount(userSub, token, profile, true);
-              if (syncResult.isUnauthorized) {
-                await logout();
-                window.location.replace('/');
-                return;
-              }
              if (syncResult.isActivationPending) {
                setIsPendingActivation(true);
                setIsSynced(false);
@@ -496,26 +515,6 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
                setIsPendingActivation(false);
                setIsSynced(true);
                setActivationError(null);
-
-                // Retrieve user roles, role claims, and user claims (Requirement 2 & 3 & 7)
-                try {
-                  const resolved = await resolveUserRolesAndClaims(userSub, mergedClaims, profile);
-                  if (resolved.primaryRole) {
-                    profile.role = resolved.primaryRole;
-                  }
-                  if (resolved.tenant) {
-                    profile.tenant = resolved.tenant;
-                    setTenantName(resolved.tenant);
-                  }
-                  if (resolved.tenant_id !== undefined) {
-                    profile.tenant_id = resolved.tenant_id;
-                    setTenantId(resolved.tenant_id);
-                  }
-                  setUser({ ...profile });
-                  setClaims({ ...resolved.claims });
-                  localStorage.setItem(LOCAL_STORAGE_USER_KEY, JSON.stringify(profile));
-                  localStorage.setItem(LOCAL_STORAGE_CLAIMS_KEY, JSON.stringify(resolved.claims));
-                } catch {}
              }
            } catch (syncErr: any) {
              if (syncErr?.response?.status === 401) {
@@ -525,7 +524,9 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
              }
              setIsPendingActivation(true);
              setIsSynced(false);
-              setActivationError(syncErr?.message || 'Account activation pending');
+              const rawMsg = syncErr?.message || 'Account activation pending';
+              const cleanMsg = /network\s*error/i.test(rawMsg) ? rawMsg.replace(/network\s*error/gi, 'Permission Check') : rawMsg;
+              setActivationError(cleanMsg);
            }

            setIsLoading(false);
@@ -561,10 +562,10 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
            setSub(storedSub);
          }

-          const storedTenantId = extractTenantId(parsedClaims, storedToken);
+          let storedTenantId = extractTenantId(parsedClaims, storedToken);
          setTenantId(storedTenantId);
          const tenantClaimValues = extractTenantClaimValues(parsedClaims, storedToken);
-          const storedTenantClaim = (parsedClaims.tenant as string) || tenantClaimValues.tenant || undefined;
+          let storedTenantClaim = (parsedClaims.tenant as string) || tenantClaimValues.tenant || undefined;

          let resolvedUser: AuthUserProfile | null = null;
          if (storedUser) {
@@ -588,9 +589,53 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
          // Initial fast unblock: valid persisted session found, unblock UI immediately
          setIsLoading(false);

-          // Asynchronous background revalidation (Tenant Lockout, User Sync, Role Claims)
+          // Asynchronous background revalidation (User Sync, Role Claims, Tenant Lockout)
          (async () => {
            try {
+              const wasPending = isActivationPending();
+              setIsPendingActivation(wasPending);
+              setActivationError(getActivationPendingReason());
+
+              // Step 1: Sync user account FIRST
+              const syncResult = await syncUserAccount(
+                storedSub || '',
+                storedToken,
+                resolvedUser || undefined,
+                false
+              );
+
+              if (syncResult.isUnauthorized) {
+                await logout();
+                return;
+              }
+
+              // Step 2: Retrieve user roles, role claims, and user claims
+              try {
+                const resolved = await resolveUserRolesAndClaims(
+                  storedSub || '',
+                  parsedClaims,
+                  resolvedUser || {}
+                );
+                if (resolvedUser) {
+                  if (resolved.primaryRole) resolvedUser.role = resolved.primaryRole;
+                  if (resolved.tenant) {
+                    resolvedUser.tenant = resolved.tenant;
+                    storedTenantClaim = resolved.tenant;
+                    setTenantName(resolved.tenant);
+                  }
+                  if (resolved.tenant_id !== undefined) {
+                    resolvedUser.tenant_id = resolved.tenant_id;
+                    storedTenantId = resolved.tenant_id;
+                    setTenantId(resolved.tenant_id);
+                  }
+                  setUser({ ...resolvedUser });
+                  localStorage.setItem(LOCAL_STORAGE_USER_KEY, JSON.stringify(resolvedUser));
+                }
+                setClaims({ ...resolved.claims });
+                localStorage.setItem(LOCAL_STORAGE_CLAIMS_KEY, JSON.stringify(resolved.claims));
+              } catch {}
+
+              // Step 3: Verify tenant lockout now that user is verified active
              const tenantLockoutResult = await verifyTenantLockout(
                storedTenantId ?? tenantClaimValues.tenantId,
                storedTenantClaim
@@ -612,22 +657,6 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
                setTenantName(tenantLockoutResult.tenant.name);
              }

-              const wasPending = isActivationPending();
-              setIsPendingActivation(wasPending);
-              setActivationError(getActivationPendingReason());
-
-              const syncResult = await syncUserAccount(
-                storedSub || '',
-                storedToken,
-                resolvedUser || undefined,
-                false
-              );
-
-              if (syncResult.isUnauthorized) {
-                await logout();
-                return;
-              }
-
              if (syncResult.isActivationPending) {
                setIsPendingActivation(true);
                setIsSynced(false);
@@ -639,27 +668,6 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
                setIsPendingActivation(false);
                setIsSynced(true);
                setActivationError(null);
-
-                const resolved = await resolveUserRolesAndClaims(
-                  storedSub || '',
-                  parsedClaims,
-                  resolvedUser || {}
-                );
-                if (resolvedUser) {
-                  if (resolved.primaryRole) resolvedUser.role = resolved.primaryRole;
-                  if (resolved.tenant) {
-                    resolvedUser.tenant = resolved.tenant;
-                    setTenantName(resolved.tenant);
-                  }
-                  if (resolved.tenant_id !== undefined) {
-                    resolvedUser.tenant_id = resolved.tenant_id;
-                    setTenantId(resolved.tenant_id);
-                  }
-                  setUser({ ...resolvedUser });
-                  localStorage.setItem(LOCAL_STORAGE_USER_KEY, JSON.stringify(resolvedUser));
-                }
-                setClaims({ ...resolved.claims });
-                localStorage.setItem(LOCAL_STORAGE_CLAIMS_KEY, JSON.stringify(resolved.claims));
              }
            } catch (syncErr: any) {
              if (syncErr?.response?.status === 401) {
@@ -668,7 +676,9 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
              }
              setIsPendingActivation(true);
              setIsSynced(false);
-              setActivationError(syncErr?.message || 'Account activation pending');
+              const rawMsg = syncErr?.message || 'Account activation pending';
+              const cleanMsg = /network\s*error/i.test(rawMsg) ? rawMsg.replace(/network\s*error/gi, 'Permission Check') : rawMsg;
+              setActivationError(cleanMsg);
            }
          })();

@@ -687,12 +697,65 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>

  const syncUserSession = async (force = true): Promise<UserSyncResult> => {
    try {
-      // Re-verify tenant status via GetTenant as part of the lockout resolution
-      const tenantClaimValues = extractTenantClaimValues(claims, accessToken);
-      const currentTenantId = tenantId ?? tenantClaimValues.tenantId;
-      const currentTenantClaim = (claims.tenant as string) || user?.tenant || tenantClaimValues.tenant || undefined;
+      await loadRuntimeConfig();
+      clearTenantLockoutCache();

-      const tenantLockoutResult = await verifyTenantLockout(currentTenantId, currentTenantClaim);
+      // Step 1: Proceed with user sync FIRST (/v1/api/integration/sync)
+      const result = await syncUserAccount(sub, accessToken, user || undefined, force);
+      if (result.isUnauthorized) {
+        await logout();
+        return result;
+      }
+      if (result.isActivationPending) {
+        setIsPendingActivation(true);
+        setIsSynced(false);
+        setActivationError(result.errorMessage || null);
+        return result;
+      }
+
+      // Step 2: Refresh user roles and claims from backend
+      let currentTenantId: number | string | null = tenantId;
+      let currentTenantClaim: string | undefined =
+        (claims.tenant as string) || user?.tenant || undefined;
+
+      try {
+        const resolved = await resolveUserRolesAndClaims(sub, claims, user || {});
+        const updatedProfile = user ? { ...user } : null;
+        if (updatedProfile && resolved.primaryRole) {
+          updatedProfile.role = resolved.primaryRole;
+        }
+        if (resolved.tenant) {
+          currentTenantClaim = resolved.tenant;
+          setTenantName(resolved.tenant);
+          if (updatedProfile) updatedProfile.tenant = resolved.tenant;
+        }
+        if (resolved.tenant_id !== undefined) {
+          currentTenantId = resolved.tenant_id;
+          setTenantId(resolved.tenant_id);
+          if (updatedProfile) updatedProfile.tenant_id = resolved.tenant_id;
+        }
+        if (updatedProfile) {
+          setUser(updatedProfile);
+          localStorage.setItem(LOCAL_STORAGE_USER_KEY, JSON.stringify(updatedProfile));
+        }
+        setClaims({ ...resolved.claims });
+        localStorage.setItem(LOCAL_STORAGE_CLAIMS_KEY, JSON.stringify(resolved.claims));
+      } catch {}
+
+      // Step 3: Re-verify tenant status via GetTenant now that user is synced
+      const tenantClaimValues = extractTenantClaimValues(claims, accessToken);
+      const effectiveTenantId =
+        currentTenantId ??
+        result.data?.tenantId ??
+        result.data?.organisationId ??
+        tenantClaimValues.tenantId;
+      const effectiveTenantClaim = currentTenantClaim || tenantClaimValues.tenant || undefined;
+
+      const tenantLockoutResult = await verifyTenantLockout(
+        effectiveTenantId,
+        effectiveTenantClaim,
+        true
+      );
      if (!tenantLockoutResult.isActive) {
        const msg = tenantLockoutResult.errorMessage || 'Tenant is not Active. Lockout active.';
        setIsPendingActivation(true);
@@ -705,28 +768,22 @@ export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
        };
      }

-      // Tenant is verified Active: proceed with user sync
-      const result = await syncUserAccount(sub, accessToken, user || undefined, force);
-      if (result.isUnauthorized) {
-        await logout();
-        return result;
+      if (tenantLockoutResult.tenant?.name) {
+        setTenantName(tenantLockoutResult.tenant.name);
      }
-      if (result.success) {
+
+      setActivationPending(false);
      setIsPendingActivation(false);
      setIsSynced(true);
      setActivationError(null);
-      } else if (result.isActivationPending) {
-        setIsPendingActivation(true);
-        setIsSynced(false);
-        setActivationError(result.errorMessage || null);
-      }
      return result;
    } catch (err: any) {
      if (err?.response?.status === 401) {
        await logout();
        return { success: false, isUnauthorized: true };
      }
-      const msg = err?.message || 'Sync failed';
+      const rawMsg = err?.message || 'Sync failed';
+      const msg = /network\s*error/i.test(rawMsg) ? rawMsg.replace(/network\s*error/gi, 'Permission Check') : rawMsg;
      setIsPendingActivation(true);
      setIsSynced(false);
      setActivationError(msg);
@@ -115,141 +115,94 @@ export const AccountActivationModal: React.FC<AccountActivationModalProps> = ({
    navigate('/');
  };

+  const isTenantIssue = !!errorMessage?.toLowerCase().includes('tenant');
+
  const modalContent = (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="activation-modal-title"
-      className="fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-6 bg-[#060a12]/90 backdrop-blur-md animate-in fade-in duration-200 select-none overflow-y-auto"
+      className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-[#060a12]/85 backdrop-blur-md animate-in fade-in duration-200 select-none overflow-y-auto"
    >
-      {/* Non-dismissable Card Container: No X button, no escape dismiss, no backdrop click */}
      <div
-        className="relative w-full max-w-xl bg-[#0d1322] border border-amber-500/30 rounded-2xl shadow-2xl shadow-black/80 overflow-hidden flex flex-col text-slate-100 my-auto"
+        className="relative w-full max-w-lg bg-[#0d1322] border border-slate-800 rounded-2xl shadow-2xl shadow-black/80 overflow-hidden flex flex-col text-slate-100 my-auto"
        onClick={(e) => e.stopPropagation()}
      >
-        {/* Amber accent top bar */}
-        <div className="h-1.5 w-full bg-gradient-to-r from-amber-500 via-amber-400 to-yellow-500" />
+        {/* Subtle accent top border */}
+        <div className={`h-1 w-full ${isTenantIssue ? 'bg-amber-500' : 'bg-blue-600'}`} />

-        {/* Modal Header */}
-        <div className="p-6 pb-4 border-b border-slate-800/80 bg-[#0f172a]/60">
+        {/* Header */}
+        <div className="p-5 pb-4 border-b border-slate-800/80 bg-[#0f172a]/60">
          <div className="flex items-start justify-between gap-4">
-            <div className="flex items-center gap-3.5">
-              <div className="relative p-2.5 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400">
-                <ShieldAlert className="w-6 h-6" />
-                <span className="absolute -top-1 -right-1 flex h-2.5 w-2.5">
-                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
-                  <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500"></span>
-                </span>
+            <div className="flex items-center gap-3">
+              <div className={`p-2.5 rounded-xl border ${isTenantIssue ? 'bg-amber-500/10 border-amber-500/20 text-amber-400' : 'bg-blue-500/10 border-blue-500/20 text-blue-400'}`}>
+                <ShieldAlert className="w-5 h-5" />
              </div>
              <div>
-                <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wider uppercase text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2 py-0.5 rounded-full mb-1">
-                  Access Restricted • Lockout Active
-                </span>
-                <h2 id="activation-modal-title" className="text-lg sm:text-xl font-bold text-white tracking-tight">
-                  {errorMessage?.toLowerCase().includes('tenant')
-                    ? 'Tenant Lockout • Account Inactive'
-                    : 'Account Pending Administrator Activation'}
+                <h2 id="activation-modal-title" className="text-base font-bold text-white tracking-tight">
+                  {isTenantIssue ? 'Tenant Access Restricted' : 'Account Pending Activation'}
                </h2>
-              </div>
-            </div>
-
-            <BrandLogo size={36} showGlow={false} animateOnHover={false} />
-          </div>
-        </div>
-
-        {/* Modal Body */}
-        <div className="p-6 space-y-5 overflow-y-auto max-h-[70vh]">
-          {/* Status notification block */}
-          <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 space-y-2.5">
-            <div className="flex items-center gap-2 text-emerald-400 text-xs font-semibold">
-              <CheckCircle2 className="w-4 h-4 shrink-0" />
-              <span>Identity Verified & Signed In Successfully</span>
-            </div>
-            <p className="text-xs text-slate-300 leading-relaxed">
-              You are a registered user and have successfully authenticated via Enterprise Single Sign-On.
-              However, your account has not yet been enabled in the system directory by a system administrator.
-            </p>
-            <p className="text-xs text-slate-400 leading-relaxed border-t border-slate-800/80 pt-2 font-medium">
-              If your administrator informs you that your account has been activated, please click the{' '}
-              <strong className="text-white">Sync Account</strong> button below to refresh your status and unlock the system.
+                <p className="text-xs text-slate-400 mt-0.5">
+                  {isTenantIssue
+                    ? 'The assigned tenant partition is currently inactive or restricted.'
+                    : 'Your account is authenticated and awaiting administrator enablement.'}
                </p>
              </div>
-
-          {/* User Profile Card */}
-          <div className="rounded-xl border border-slate-800 bg-[#090e1a]/60 p-4 space-y-3">
-            <div className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider flex items-center justify-between">
-              <span>Authenticated User Profile</span>
-              <span className="text-amber-400/90 text-[10px] font-mono bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/20">
-                Lockout Active
-              </span>
            </div>

-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
-              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
-                <UserCheck className="w-4 h-4 text-blue-400 shrink-0" />
-                <div className="min-w-0">
-                  <span className="text-[10px] text-slate-500 block">Name</span>
+            <BrandLogo size={32} showGlow={false} animateOnHover={false} />
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="p-5 space-y-4">
+          {/* User Profile Summary */}
+          <div className="rounded-xl border border-slate-800/80 bg-slate-900/60 p-3.5 space-y-2 text-xs">
+            <div className="grid grid-cols-2 gap-2.5">
+              <div>
+                <span className="text-[10px] uppercase font-semibold text-slate-500 block">User</span>
                <span className="font-semibold text-white truncate block">{displayName}</span>
              </div>
-              </div>
-
-              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
-                <Mail className="w-4 h-4 text-blue-400 shrink-0" />
-                <div className="min-w-0">
-                  <span className="text-[10px] text-slate-500 block">Email</span>
-                  <span className="font-semibold text-slate-200 truncate block">{displayEmail || 'Not specified'}</span>
+              <div>
+                <span className="text-[10px] uppercase font-semibold text-slate-500 block">Email</span>
+                <span className="text-slate-300 truncate block">{displayEmail || '—'}</span>
              </div>
            </div>
-
-              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
-                <Building2 className="w-4 h-4 text-indigo-400 shrink-0" />
-                <div className="min-w-0">
-                  <span className="text-[10px] text-slate-500 block">Tenant / Role</span>
-                  <span className="font-semibold text-slate-200 truncate block">
-                    {tenant} ({role})
-                  </span>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
-                <Fingerprint className="w-4 h-4 text-slate-400 shrink-0" />
-                <div className="min-w-0">
-                  <span className="text-[10px] text-slate-500 block">Subject ID</span>
-                  <span className="font-mono text-[11px] text-slate-400 truncate block">{sub || 'SSO-Principal'}</span>
+            <div className="grid grid-cols-2 gap-2.5 border-t border-slate-800/60 pt-2">
+              <div>
+                <span className="text-[10px] uppercase font-semibold text-slate-500 block">Tenant</span>
+                <span className="text-slate-300 truncate block">{tenant}</span>
              </div>
+              <div>
+                <span className="text-[10px] uppercase font-semibold text-slate-500 block">Role</span>
+                <span className="text-blue-400 font-medium truncate block">{role}</span>
              </div>
            </div>
          </div>

-          {/* Sync Attempt Feedback / Error Notice */}
+          {/* Feedback notice if sync failed */}
          {errorMessage && (
-            <div className="rounded-xl border border-rose-500/30 bg-rose-500/10 p-3.5 flex items-start gap-3 animate-in fade-in duration-150">
-              <AlertTriangle className="w-4 h-4 text-rose-400 shrink-0 mt-0.5" />
-              <div className="space-y-1">
-                <p className="text-xs font-semibold text-rose-300">
-                  {errorMessage?.toLowerCase().includes('tenant')
-                    ? 'Tenant Lockout In Effect'
-                    : 'Account Not Activated Yet'}
-                </p>
-                <p className="text-xs text-rose-200/90 leading-relaxed">{errorMessage}</p>
-                {syncAttemptCount > 0 && (
-                  <p className="text-[11px] text-rose-400/80 pt-1">
-                    Attempt #{syncAttemptCount} checked at {new Date().toLocaleTimeString()}
-                  </p>
-                )}
+            <div className="rounded-xl border border-amber-500/25 bg-amber-500/10 p-3 flex items-start gap-2.5 text-xs text-amber-200">
+              <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
+              <div className="min-w-0">
+                <span className="font-semibold text-amber-300 block">Notice:</span>
+                <p className="text-[11px] text-amber-200/90 leading-relaxed mt-0.5">{errorMessage}</p>
              </div>
            </div>
          )}
+
+          <p className="text-[11px] text-slate-400 text-center">
+            Once your administrator enables your account, click <strong className="text-white">Sync Account</strong> to enter the console.
+          </p>
        </div>

-        {/* Modal Actions */}
-        <div className="p-5 border-t border-slate-800/80 bg-[#0a0f1d] flex flex-col sm:flex-row items-center justify-between gap-3">
+        {/* Footer Actions */}
+        <div className="p-4 border-t border-slate-800 bg-[#0a0f1d] flex flex-col sm:flex-row items-center justify-between gap-2.5">
          <div className="flex items-center gap-2 w-full sm:w-auto">
            <button
              onClick={handleNavigateLanding}
              type="button"
-              className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-3.5 py-2 text-xs font-medium text-slate-400 hover:text-slate-200 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-xl transition cursor-pointer"
-              title="View public landing page. Entering the console again will display this modal until enabled."
+              className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-slate-400 hover:text-white bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-xl transition cursor-pointer"
            >
              <ArrowLeft className="w-3.5 h-3.5" />
              <span>Landing Page</span>
@@ -258,8 +211,7 @@ export const AccountActivationModal: React.FC<AccountActivationModalProps> = ({
            <button
              onClick={handleSignOut}
              type="button"
-              className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-3.5 py-2 text-xs font-medium text-slate-400 hover:text-rose-400 bg-slate-900 hover:bg-rose-500/10 border border-slate-800 hover:border-rose-500/30 rounded-xl transition cursor-pointer"
-              title="Sign out of current SSO session"
+              className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-slate-400 hover:text-rose-400 bg-slate-900 hover:bg-rose-500/10 border border-slate-800 hover:border-rose-500/20 rounded-xl transition cursor-pointer"
            >
              <LogOut className="w-3.5 h-3.5" />
              <span>Sign Out</span>
@@ -271,10 +223,10 @@ export const AccountActivationModal: React.FC<AccountActivationModalProps> = ({
            disabled={isSyncing}
            type="button"
            id="activation-sync-btn"
-            className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 active:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none rounded-xl shadow-lg shadow-blue-600/30 transition cursor-pointer"
+            className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 active:bg-blue-700 disabled:opacity-50 rounded-xl shadow-md transition cursor-pointer"
          >
-            <RefreshCw className={`w-4 h-4 ${isSyncing ? 'animate-spin' : ''}`} />
-            <span>{isSyncing ? 'Verifying Activation...' : 'Sync Account'}</span>
+            <RefreshCw className={`w-3.5 h-3.5 ${isSyncing ? 'animate-spin' : ''}`} />
+            <span>{isSyncing ? 'Checking...' : 'Sync Account'}</span>
          </button>
        </div>
      </div>
@@ -61,114 +61,57 @@ export const PartnerAccessDeniedModal: React.FC<PartnerAccessDeniedModalProps> =
      aria-modal="true"
      aria-labelledby="partner-denied-title"
      aria-describedby="partner-denied-description"
-      className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/85 backdrop-blur-md animate-in fade-in duration-200 overflow-y-auto"
+      className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-in fade-in duration-150 overflow-y-auto"
    >
-      <div className="relative w-full max-w-lg overflow-hidden rounded-2xl bg-[#0e1424] border border-rose-900/60 shadow-2xl shadow-rose-950/50 my-auto">
-        {/* Glow Header Accent */}
-        <div className="h-2 w-full bg-linear-to-r from-rose-600 via-red-500 to-amber-500" />
+      <div className="relative w-full max-w-md overflow-hidden rounded-2xl bg-[#0d1322] border border-slate-800 shadow-2xl my-auto text-slate-100">
+        <div className="h-1 w-full bg-rose-600" />

-        <div className="p-6 sm:p-8 space-y-6">
-          {/* Header */}
-          <div className="flex items-start gap-4">
-            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-rose-500/15 border border-rose-500/30 text-rose-400">
-              <Ban className="h-6 w-6 text-rose-400" />
+        <div className="p-5 space-y-4">
+          <div className="flex items-start gap-3">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400">
+              <Ban className="h-5 w-5" />
            </div>
-            <div className="space-y-1">
-              <div className="flex items-center gap-2">
-                <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-rose-400 bg-rose-950/60 px-2 py-0.5 rounded-md border border-rose-800/60">
-                  <Lock className="w-3 h-3" />
-                  Restricted Role
-                </span>
-                <span className="text-xs text-slate-500">Security Policy</span>
-              </div>
-              <h2 id="partner-denied-title" className="text-lg font-bold text-white tracking-tight">
-                Access Denied: Partner Role
+            <div>
+              <h2 id="partner-denied-title" className="text-base font-bold text-white tracking-tight">
+                Partner Portal Required
              </h2>
-              <p id="partner-denied-description" className="text-xs text-slate-400 leading-relaxed">
-                Users assigned the <strong className="text-rose-300">Partner</strong> role by security are not permitted to access the PFM Backoffice Console.
+              <p id="partner-denied-description" className="text-xs text-slate-400 mt-0.5">
+                Accounts with the Partner role must access the Partner Portal.
              </p>
            </div>
          </div>

-          {/* User & Identity Summary Card */}
-          <div className="rounded-xl bg-slate-900/80 border border-slate-800 p-4 space-y-3 text-xs">
-            <div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
-              <span className="text-slate-400 font-medium">Account Name</span>
-              <span className="text-white font-semibold">{displayName}</span>
+          <div className="rounded-xl bg-slate-900/60 border border-slate-800 p-3.5 space-y-2 text-xs">
+            <div className="flex items-center justify-between">
+              <span className="text-slate-500 text-[11px] uppercase font-semibold">User</span>
+              <span className="text-white font-medium">{displayName}</span>
            </div>
-
            {displayEmail && (
-              <div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
-                <span className="text-slate-400 font-medium flex items-center gap-1.5">
-                  <Mail className="w-3.5 h-3.5 text-slate-500" />
-                  Email
-                </span>
-                <span className="text-slate-200 font-mono">{displayEmail}</span>
+              <div className="flex items-center justify-between border-t border-slate-800/60 pt-2">
+                <span className="text-slate-500 text-[11px] uppercase font-semibold">Email</span>
+                <span className="text-slate-300 font-mono text-[11px]">{displayEmail}</span>
              </div>
            )}
-
-            <div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
-              <span className="text-slate-400 font-medium flex items-center gap-1.5">
-                <Building2 className="w-3.5 h-3.5 text-slate-500" />
-                Assigned Role
-              </span>
-              <span className="text-rose-400 font-semibold bg-rose-950/60 px-2 py-0.5 rounded border border-rose-800/50">
-                {role}
-              </span>
+            <div className="flex items-center justify-between border-t border-slate-800/60 pt-2">
+              <span className="text-slate-500 text-[11px] uppercase font-semibold">Role</span>
+              <span className="text-rose-400 font-medium">{role}</span>
+            </div>
          </div>

-            {tenant && (
-              <div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
-                <span className="text-slate-400 font-medium flex items-center gap-1.5">
-                  <Building2 className="w-3.5 h-3.5 text-slate-500" />
-                  Tenant Context
-                </span>
-                <span className="text-slate-200 font-medium truncate max-w-[220px]">{tenant}</span>
-              </div>
-            )}
-
-            {sub && (
-              <div className="flex items-center justify-between text-[11px] text-slate-500">
-                <span className="flex items-center gap-1">
-                  <Fingerprint className="w-3 h-3" />
-                  Subject Key
-                </span>
-                <span className="font-mono text-slate-400 truncate max-w-[200px]">{sub}</span>
-              </div>
-            )}
-          </div>
-
-          {/* Security Policy Information */}
-          <div className="p-4 rounded-xl bg-rose-950/20 border border-rose-900/40 text-xs text-rose-200 leading-relaxed space-y-1.5">
-            <p className="font-semibold text-rose-300 flex items-center gap-1.5">
-              <ShieldAlert className="w-4 h-4 text-rose-400" />
-              Administrative Boundary Notice
+          <p className="text-[11px] text-slate-400 text-center leading-relaxed">
+            The Console is reserved for statutory administrators and programme managers.
          </p>
-            <p className="text-[11px] text-rose-300/90">
-              The PFM Console is reserved for statutory administrators, sponsors, programme managers, and governance officers. Partner credentials cannot access this environment. If you require backoffice administrative access, please request an updated role assignment from your system administrator.
-            </p>
-          </div>

-          {/* Actions */}
-          <div className="pt-2">
+          <div className="pt-1">
            <button
              onClick={handleLogoutClick}
-              className="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 hover:text-white text-xs font-semibold border border-slate-700 transition cursor-pointer shadow-sm"
+              className="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold shadow-md transition cursor-pointer"
            >
-              <LogOut className="w-4 h-4 text-rose-400" />
-              <span>Sign Out & Return to Home</span>
+              <LogOut className="w-4 h-4" />
+              <span>Sign Out & Return Home</span>
            </button>
          </div>
        </div>
-
-        {/* Footer Brand watermark */}
-        <div className="px-6 py-3 bg-[#0a0f1d] border-t border-slate-800/80 flex items-center justify-between text-[11px] text-slate-500">
-          <div className="flex items-center gap-2">
-            <BrandLogo size={16} showGlow={false} animateOnHover={false} />
-            <span>Post Fund Management (PFM)</span>
-          </div>
-          <span>National Security Gateway</span>
-        </div>
      </div>
    </div>
  );
@@ -87,7 +87,7 @@ export const SessionExpiredModal: React.FC<SessionExpiredModalProps> = ({
  const modalContent = (
    <div
      id="session-expired-modal-backdrop"
-      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/85 backdrop-blur-md p-4 animate-in fade-in duration-200 overflow-y-auto"
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-md p-4 animate-in fade-in duration-150 overflow-y-auto"
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
      role="dialog"
@@ -96,27 +96,20 @@ export const SessionExpiredModal: React.FC<SessionExpiredModalProps> = ({
    >
      <div
        id="session-expired-modal-content"
-        className="relative w-full max-w-md bg-[#0c121e] border border-amber-500/40 rounded-2xl shadow-2xl shadow-black/90 p-6 overflow-hidden text-slate-200 space-y-5 my-auto"
+        className="relative w-full max-w-md bg-[#0d1322] border border-slate-800 rounded-2xl shadow-2xl p-5 overflow-hidden text-slate-200 space-y-4 my-auto"
      >
-        {/* Subtle decorative top accent bar */}
-        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-500 via-orange-500 to-rose-500" />
+        <div className="absolute top-0 left-0 right-0 h-1 bg-amber-500" />

-        {/* Top bar with close button */}
        <div className="flex items-start justify-between pt-1">
          <div className="flex items-center gap-3">
-            <div className="w-12 h-12 rounded-2xl bg-amber-500/10 border border-amber-500/30 flex items-center justify-center text-amber-400 shrink-0 shadow-lg shadow-amber-500/10">
-              <ShieldAlert className="w-6 h-6" />
+            <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center text-amber-400 shrink-0">
+              <ShieldAlert className="w-5 h-5" />
            </div>
            <div>
-              <div className="flex items-center gap-2">
              <h3 id="session-expired-title" className="text-base font-bold text-white tracking-tight">
                Session Expired
              </h3>
-                <span className="text-[10px] font-mono font-semibold px-2 py-0.5 rounded bg-rose-950/60 text-rose-300 border border-rose-800/60">
-                  HTTP 401
-                </span>
-              </div>
-              <p className="text-xs text-slate-400 mt-0.5">Authorization token invalidated</p>
+              <p className="text-xs text-slate-400">Authorization credentials expired</p>
            </div>
          </div>

@@ -125,60 +118,46 @@ export const SessionExpiredModal: React.FC<SessionExpiredModalProps> = ({
            type="button"
            onClick={handleAction}
            aria-label="Dismiss and return to landing page"
-            className="p-1.5 text-slate-400 hover:text-white rounded-lg hover:bg-slate-800/80 transition-colors"
+            className="p-1.5 text-slate-400 hover:text-white rounded-lg hover:bg-slate-800 transition-colors cursor-pointer"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

-        {/* Informative Explanation (non-technical and clear) */}
-        <div className="space-y-2.5 text-xs text-slate-300 leading-relaxed bg-slate-900/60 p-4 rounded-xl border border-slate-800/80">
+        <div className="text-xs text-slate-300 leading-relaxed bg-slate-900/60 p-3.5 rounded-xl border border-slate-800/80 space-y-1.5">
          <p>
-            Your active working session has ended or your security credentials have expired. To protect your data and prevent unauthorized changes, your session has been closed.
+            Your active session has ended to protect account security. Please sign in again to continue working.
          </p>
          {reason && (
-            <div className="flex items-start gap-2 pt-1 text-[11px] text-amber-300/90 font-mono">
+            <div className="flex items-start gap-1.5 pt-1 text-[11px] text-amber-300/90 font-mono">
              <AlertTriangle className="w-3.5 h-3.5 shrink-0 mt-0.5 text-amber-400" />
              <span className="break-words">{reason}</span>
            </div>
          )}
        </div>

-        {/* Progress Bar Countdown */}
-        <div className="space-y-2">
-          <div className="flex items-center justify-between text-xs">
-            <span className="text-slate-400 flex items-center gap-1.5">
+        <div className="flex items-center justify-between text-xs text-slate-400">
+          <span className="flex items-center gap-1.5">
            <Clock className="w-3.5 h-3.5 text-amber-400" />
-              Returning to landing page in{' '}
-              <strong className="text-white font-mono">{secondsRemaining}s</strong>
+            Redirecting in <strong className="text-white font-mono">{secondsRemaining}s</strong>
          </span>
          {isPaused && (
-              <span className="text-[10px] text-amber-400/80 font-medium px-1.5 py-0.2 rounded bg-amber-950/40 border border-amber-900/60">
-                Paused on hover
+            <span className="text-[10px] text-amber-400/80 px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/20">
+              Paused
            </span>
          )}
        </div>

-          {/* Progress bar line */}
-          <div className="w-full h-2 bg-slate-800/90 rounded-full overflow-hidden border border-slate-700/60 p-0.5">
-            <div
-              className="h-full rounded-full bg-gradient-to-r from-amber-500 via-orange-500 to-rose-500 transition-all duration-75 ease-linear"
-              style={{ width: `${progressPercent}%` }}
-            />
-          </div>
-        </div>
-
-        {/* Actions */}
-        <div className="pt-2 flex flex-col sm:flex-row items-center gap-2.5">
+        <div className="pt-1">
          <button
            id="session-expired-return-btn"
            type="button"
            onClick={handleAction}
-            className="w-full py-2.5 px-4 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-500/20 transition-all flex items-center justify-center gap-2"
+            className="w-full py-2.5 px-4 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-xl shadow-md transition-all flex items-center justify-center gap-2 cursor-pointer"
          >
            <LogOut className="w-4 h-4" />
-            <span>Return to Landing Page Now</span>
-            <ArrowRight className="w-3.5 h-3.5 ml-0.5" />
+            <span>Return to Landing Page</span>
+            <ArrowRight className="w-3.5 h-3.5" />
          </button>
        </div>
      </div>
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { NavLink, Outlet, useNavigate, Link } from 'react-router-dom';
+import { NavLink, Outlet, useNavigate, Link, useLocation } from 'react-router-dom';
 import { NotificationBell } from './NotificationBell';
 import {
  Inbox,
@@ -144,6 +144,27 @@ export const AppLayout: React.FC = () => {
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const navigate = useNavigate();
+  const location = useLocation();
+  const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({});
+
+  const isSectionCollapsed = (path: string, subItems?: SubNavItem[]): boolean => {
+    if (collapsedSections[path] !== undefined) {
+      return collapsedSections[path];
+    }
+    if (subItems?.some((s) => location.pathname.startsWith(s.path))) {
+      return false;
+    }
+    return false;
+  };
+
+  const toggleSection = (path: string, e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setCollapsedSections((prev) => ({
+      ...prev,
+      [path]: !isSectionCollapsed(path),
+    }));
+  };

  const handleLogout = async () => {
    await logout();
@@ -186,7 +207,6 @@ export const AppLayout: React.FC = () => {
  useQuery({
    queryKey: ['users-directory'],
    queryFn: () => getUsers(1, 200),
-    staleTime: 5 * 60 * 1000,
  });

  // Query tenant endpoint to resolve tenant name if not provided in claims or profile
@@ -194,7 +214,6 @@ export const AppLayout: React.FC = () => {
    queryKey: ['active-tenant-header', tenantId],
    queryFn: () => getTenant(tenantId!),
    enabled: !!tenantId && !claims?.tenant && !user?.tenant && !authTenantName,
-    staleTime: 5 * 60 * 1000,
  });

  // Ensure current logged-in user is registered in the email cache
@@ -346,13 +365,16 @@ export const AppLayout: React.FC = () => {
              );
            }

+            const isCollapsed = isSectionCollapsed(item.path, item.subItems);
+
            return (
              <div key={item.path} className="space-y-1">
+                <div className="flex items-center gap-1">
                  <NavLink
                    to={item.path}
                    end={hasSub}
                    className={({ isActive }) =>
-                    `flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-medium transition-all min-w-0 ${
+                      `flex-1 flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-medium transition-all min-w-0 ${
                        isActive
                          ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-600/25 font-semibold'
                          : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/60'
@@ -363,9 +385,25 @@ export const AppLayout: React.FC = () => {
                    <Icon className="w-4.5 h-4.5 shrink-0" />
                    <span className="truncate flex-1">{item.name}</span>
                  </NavLink>
+                  {hasSub && (
+                    <button
+                      type="button"
+                      onClick={(e) => toggleSection(item.path, e)}
+                      className="p-2 text-slate-400 hover:text-white hover:bg-slate-800/80 rounded-lg transition-colors cursor-pointer"
+                      title={isCollapsed ? `Expand ${item.name}` : `Collapse ${item.name}`}
+                      aria-label={isCollapsed ? `Expand ${item.name}` : `Collapse ${item.name}`}
+                    >
+                      <ChevronDown
+                        className={`w-3.5 h-3.5 transition-transform duration-200 ${
+                          isCollapsed ? '-rotate-90 text-slate-500' : 'rotate-0 text-slate-300'
+                        }`}
+                      />
+                    </button>
+                  )}
+                </div>

                {/* Sub-items under parent item */}
-                {hasSub && (
+                {hasSub && !isCollapsed && (
                  <div className="pl-6 pr-1 py-1 space-y-1 border-l border-slate-800/80 ml-5">
                    {item.subItems?.map((subItem) => {
                      const SubIcon = subItem.icon;
@@ -36,7 +36,7 @@ import {
  getAllProgrammes,
  getProjects,
 } from '../../services/api';
-import { toolsService } from '../../services/toolsService';
+import { toolsService } from '../../utils/hashids';
 import { Modal } from '../ui/Modal';
 import { useToast } from '../ui/Toast';
 import { ProblemDetailsAlert } from '../ui/ProblemDetailsAlert';
@@ -1247,7 +1247,7 @@ export const ContractsManagement: React.FC<ContractsManagementProps> = ({
            {Number(contractToUpdate?.status) === ContractStatus.Active ? (
              <div className="w-full bg-[#151b2c] border border-emerald-500/30 rounded-xl px-3 py-2 text-xs text-emerald-300 font-semibold flex items-center gap-1.5 cursor-default">
                <Lock className="w-3.5 h-3.5 text-emerald-400" />
-                <span>Active / Executed (Immutable - Cannot Be Changed)</span>
+                <span>Active / Executed</span>
              </div>
            ) : (
              (() => {
@@ -807,7 +807,7 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
                          title="Approved evidence is immutable. Status cannot be modified."
                        >
                          <Lock className="w-3.5 h-3.5 text-emerald-400" />
-                          <span>Approved (Immutable)</span>
+                          <span>Approved</span>
                        </span>
                      ) : (
                        <>
@@ -58,7 +58,6 @@ export const UserSearchPicker: React.FC<UserSearchPickerProps> = ({
  const { data: users = [], isLoading } = useQuery<User[]>({
    queryKey: ['users-directory'],
    queryFn: () => getUsers(1, 200),
-    staleTime: 5 * 60 * 1000,
  });

  // Filter active users and exclude the current logged-in user so they can never message themselves
@@ -37,7 +37,7 @@ const activitySchema = z.object({
  title: z.string().min(3, 'Activity title required'),
  description: z.string().min(5, 'Description required'),
  category: z.string().min(2, 'Category required'),
-  amount: z.coerce.number().min(1, 'Amount must be positive'),
+  amount: z.coerce.number().min(0, 'Amount must be non-negative'),
  milestoneId: z.string().optional().nullable(),
  performedAt: z.string().optional().nullable(),
 });
@@ -20,6 +20,7 @@ import {
  getProjectIndicators,
  getProjectRisks,
  getBudgets,
+  getDisbursements,
 } from '../../services/api';
 import { Project, ApprovalStatus, Budget } from '../../types';
 import {
@@ -86,9 +87,21 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
  );
  const approvedBudgetTotal = approvedBudgets.reduce((sum, b) => sum + (Number(b.amount) || 0), 0);

+  const { data: disbursements = [] } = useQuery({
+    queryKey: ['disbursements', projectId],
+    queryFn: () => getDisbursements(1, 100),
+  });
+
+  const projectDisbursements = disbursements.filter(
+    (d) => String(d.projectId) === String(projectId) && (Number(d.status) === ApprovalStatus.Approved || Number(d.status) === 3)
+  );
+  const totalDisbursed = projectDisbursements.reduce((sum, d) => sum + (Number(d.amount) || 0), 0);
+
  const verifiedMilestonesCount = milestones.filter((m) => m.status === ApprovalStatus.Approved).length;
  const milestoneProgress = milestones.length > 0 ? Math.round((verifiedMilestonesCount / milestones.length) * 100) : 0;
  const totalActivityBudget = activities.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
+  const projectValue = totalActivityBudget - totalDisbursed;
+  const projectVariance = approvedBudgetTotal - projectValue;

  return (
    <div className="p-4 sm:p-5 lg:p-6 bg-[#090d16]/95 border-t border-b border-blue-500/20 space-y-6 animate-in fade-in duration-200 w-full min-w-0">
@@ -108,6 +121,19 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
                <span className="text-xs text-emerald-400 font-mono font-semibold shrink-0">
                  Approved Budget: {formatZAR(approvedBudgetTotal)}
                </span>
+                <span className="text-slate-600">&bull;</span>
+                <span className="text-xs text-blue-400 font-mono font-semibold shrink-0" title={`Activities: ${formatZAR(totalActivityBudget)} - Disbursements: ${formatZAR(totalDisbursed)}`}>
+                  Project Value: {formatZAR(projectValue)}
+                </span>
+                <span className="text-slate-600">&bull;</span>
+                <span
+                  className={`text-xs font-mono font-semibold shrink-0 ${
+                    projectVariance >= 0 ? 'text-emerald-400' : 'text-rose-400'
+                  }`}
+                  title="Approved Budget minus Net Project Value"
+                >
+                  Variance: {projectVariance >= 0 ? '+' : ''}{formatZAR(projectVariance)}
+                </span>
              </>
            )}
          </div>
@@ -33,6 +33,7 @@ import {
  getProjectIndicators,
  getProjectRisks,
  getBudgets,
+  getDisbursements,
  updateProjectStatus,
 } from '../../services/api';
 import { Project, ApprovalStatus, Programme } from '../../types';
@@ -150,11 +151,23 @@ export const ProjectViewModal: React.FC<ProjectViewModalProps> = ({
  );
  const approvedBudgetTotal = approvedBudgets.reduce((sum, b) => sum + (Number(b.amount) || 0), 0);

-  // Milestone Progress
+  // Milestone Progress & Disbursements
  const verifiedMilestonesCount = milestones.filter((m) => m.status === ApprovalStatus.Approved).length;
  const milestoneProgress = milestones.length > 0 ? Math.round((verifiedMilestonesCount / milestones.length) * 100) : 0;
  const totalActivityBudget = activities.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);

+  const { data: disbursements = [] } = useQuery({
+    queryKey: ['disbursements', project?.id],
+    queryFn: () => getDisbursements(1, 100),
+    enabled: !!project?.id,
+  });
+  const projectDisbursements = disbursements.filter(
+    (d) => String(d.projectId) === String(project?.id) && (Number(d.status) === ApprovalStatus.Approved || Number(d.status) === 3)
+  );
+  const totalDisbursed = projectDisbursements.reduce((sum, d) => sum + (Number(d.amount) || 0), 0);
+  const projectValue = totalActivityBudget - totalDisbursed;
+  const projectVariance = approvedBudgetTotal - projectValue;
+
  // Schedule Risk
  const scheduleRisk = useMemo(() => {
    if (!project) return null;
@@ -244,20 +257,20 @@ export const ProjectViewModal: React.FC<ProjectViewModalProps> = ({
                  Budget: {formatZAR(approvedBudgetTotal)}
                </span>
                <span className="text-slate-600">&bull;</span>
-                <span className="text-blue-400 font-mono font-bold">
-                  Project Value: {formatZAR(totalActivityBudget)}
+                <span className="text-blue-400 font-mono font-bold" title={`Activities Total: ${formatZAR(totalActivityBudget)} minus Disbursements: ${formatZAR(totalDisbursed)}`}>
+                  Project Value: {formatZAR(projectValue)}
                </span>
                <span className="text-slate-600">&bull;</span>
                <span
                  className={`font-mono font-bold px-2 py-0.5 rounded text-[11px] border ${
-                    approvedBudgetTotal - totalActivityBudget >= 0
+                    projectVariance >= 0
                      ? 'text-emerald-400 bg-emerald-500/10 border-emerald-500/30'
                      : 'text-rose-400 bg-rose-500/10 border-rose-500/30'
                  }`}
-                  title="Approved Budget minus Total Project Value"
+                  title={`Approved Budget: ${formatZAR(approvedBudgetTotal)} | Net Project Value: ${formatZAR(projectValue)} (Activities: ${formatZAR(totalActivityBudget)} - Disbursements: ${formatZAR(totalDisbursed)}) | Variance: ${projectVariance >= 0 ? '+' : ''}${formatZAR(projectVariance)}`}
                >
-                  Variance: {approvedBudgetTotal - totalActivityBudget >= 0 ? '+' : ''}
-                  {formatZAR(approvedBudgetTotal - totalActivityBudget)}
+                  Variance: {projectVariance >= 0 ? '+' : ''}
+                  {formatZAR(projectVariance)}
                </span>
              </div>
            </div>
@@ -32,6 +32,7 @@ import { clearCachedUserRbac, fetchAndCacheRoleClaims } from '../../services/rol
 import { HelpTooltip } from '../ui/HelpTooltip';
 import { ObfuscatedIdNumber } from '../ui/ObfuscatedIdNumber';
 import { decodeIdNumberHex } from '../../utils/hashids';
+import { useAuth } from '../../auth/AuthProvider';
 import { User, Role, Claim, ActivityStatus } from '../../types';
 import { formatDate, getActivityStatusBadge, getUserRoleBadge } from '../../lib/formatters';
 import { useRbac, ROLE_CLAIM_DEFINITIONS } from '../../auth/rbac';
@@ -49,9 +50,15 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
 }) => {
  const queryClient = useQueryClient();
  const { success, error: toastError } = useToast();
+  const { user: currentAuthUser } = useAuth();
  const { canApprove, canAdd, canView, canAccess, isUnrestricted } = useRbac();
  const hasTenantSelfHelpAccess = canAccess('tenant_self_service') || canView('tenant_self_service');

+  const userId = user?.id || '';
+  const isSelf =
+    Boolean(currentAuthUser?.id && userId && String(currentAuthUser.id).toLowerCase() === String(userId).toLowerCase()) ||
+    Boolean(currentAuthUser?.email && user?.email && currentAuthUser.email.toLowerCase() === user.email.toLowerCase());
+
  const canManageRolesAndClaims =
    canApprove('settings_users') ||
    canApprove('tenant_management') ||
@@ -63,18 +70,17 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
    hasTenantSelfHelpAccess ||
    isUnrestricted;
  const canChangeStatus =
-    canAdd('settings_users') ||
+    !isSelf &&
+    (canAdd('settings_users') ||
      canAdd('tenant_management') ||
      canAdd('tenant_self_service') ||
      canApprove('settings_users') ||
-    isUnrestricted;
+      isUnrestricted);

  const [activeTab, setActiveTab] = useState<'overview' | 'roles' | 'claims' | 'sessions'>('overview');

  const [selectedRoleToAdd, setSelectedRoleToAdd] = useState('');

-  const userId = user?.id || '';
-
  // 1. Fetch fresh user details
  const { data: freshUser, isLoading: loadingUser, refetch: refetchUser } = useQuery<User | null>({
    queryKey: ['user-detail', userId],
@@ -237,20 +243,35 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
    onError: (err: unknown) => toastError('Logout Failed', err),
  });

-  const lockoutMutation = useMutation({
-    mutationFn: (disableLock: boolean) => setUserLockout(userId, disableLock),
-    onSuccess: (_, disableLock) => {
-      success(
-        disableLock ? 'Account Unlocked' : 'Account Locked',
-        `User account lockout status successfully modified.`
-      );
+  const lockUserMutation = useMutation({
+    mutationFn: () => setUserLockout(userId, true),
+    onSuccess: () => {
+      success('Account Locked', 'User account lockout enabled (disable = true).');
      refetchUser();
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+      queryClient.invalidateQueries({ queryKey: ['user-detail', userId] });
    },
-    onError: (err: unknown) => toastError('Lockout Update Failed', err),
+    onError: (err: unknown) => toastError('Lock User Failed', err),
+  });
+
+  const unlockUserMutation = useMutation({
+    mutationFn: () => setUserLockout(userId, false),
+    onSuccess: () => {
+      success('Account Unlocked', 'User account lockout disabled (disable = false).');
+      refetchUser();
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+      queryClient.invalidateQueries({ queryKey: ['user-detail', userId] });
+    },
+    onError: (err: unknown) => toastError('Unlock User Failed', err),
  });

  const statusMutation = useMutation({
-    mutationFn: (newStatus: ActivityStatus) => updateUserStatus(userId, newStatus),
+    mutationFn: (newStatus: ActivityStatus) => {
+      if (isSelf) {
+        throw new Error('Maker-Checker Violation: You cannot alter your own account activity status.');
+      }
+      return updateUserStatus(userId, newStatus);
+    },
    onSuccess: () => {
      success('Status Updated', 'User activity status changed.');
      refetchUser();
@@ -280,18 +301,18 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
    <Modal
      isOpen={isOpen}
      onClose={onClose}
-      title={`User Administration: ${effectiveUser.email || effectiveUser.id}`}
-      subtitle="Direct tenant-level user, role, claims, and session administration without database intervention."
+      title={`User Security: ${effectiveUser.email || effectiveUser.id}`}
+      subtitle="Manage account status, role assignment, permissions, and active sessions."
    >
      <div className="space-y-4 text-xs">
        {/* Navigation Tabs */}
-        <div className="flex gap-2 border-b border-slate-800 pb-2">
+        <div className="flex gap-1.5 border-b border-slate-800 pb-2">
          <button
            type="button"
            onClick={() => setActiveTab('overview')}
-            className={`px-3 py-1.5 rounded-lg font-semibold transition cursor-pointer ${
+            className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer ${
              activeTab === 'overview'
-                ? 'bg-blue-600 text-white'
+                ? 'bg-blue-600 text-white font-semibold'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
@@ -300,21 +321,21 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
          <button
            type="button"
            onClick={() => setActiveTab('roles')}
-            className={`px-3 py-1.5 rounded-lg font-semibold transition cursor-pointer flex items-center gap-1.5 ${
+            className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
              activeTab === 'roles'
-                ? 'bg-blue-600 text-white'
+                ? 'bg-blue-600 text-white font-semibold'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
            <Shield className="w-3.5 h-3.5" />
-            <span>Roles ({(Array.isArray(userRoles) ? userRoles : []).length})</span>
+            <span>Role ({(Array.isArray(userRoles) ? userRoles : []).length})</span>
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('claims')}
-            className={`px-3 py-1.5 rounded-lg font-semibold transition cursor-pointer flex items-center gap-1.5 ${
+            className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
              activeTab === 'claims'
-                ? 'bg-blue-600 text-white'
+                ? 'bg-blue-600 text-white font-semibold'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
@@ -324,9 +345,9 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
          <button
            type="button"
            onClick={() => setActiveTab('sessions')}
-            className={`px-3 py-1.5 rounded-lg font-semibold transition cursor-pointer flex items-center gap-1.5 ${
+            className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
              activeTab === 'sessions'
-                ? 'bg-blue-600 text-white'
+                ? 'bg-blue-600 text-white font-semibold'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
@@ -386,7 +407,14 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
                  </span>
                </div>
                <div className="flex items-center gap-2">
-                  {effectiveUser?.status === ActivityStatus.Active ? (
+                  {isSelf ? (
+                    <span
+                      className="px-2.5 py-1 text-[11px] font-semibold text-slate-400 bg-slate-900 border border-slate-800 rounded-lg"
+                      title="Maker-Checker policy: Administrators cannot change their own account activity status"
+                    >
+                      Self-Account (Protected)
+                    </span>
+                  ) : effectiveUser?.status === ActivityStatus.Active ? (
                    <button
                      type="button"
                      onClick={() => statusMutation.mutate(ActivityStatus.Inactive)}
@@ -592,70 +620,66 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
          </div>
        )}

-        {/* TAB 4: Sessions & Direct Account Interventions */}
+        {/* TAB 4: Sessions & Security Interventions */}
        {activeTab === 'sessions' && (
          <div className="space-y-3">
            <div className="p-4 bg-slate-900/60 rounded-xl border border-slate-800 space-y-4">
              {/* Force Logout Action */}
-              <div className="flex items-center justify-between border-b border-slate-800/80 pb-3">
+              <div className="flex items-center justify-between border-b border-slate-800/80 pb-3 gap-3">
                <div>
                  <h4 className="text-white font-semibold flex items-center gap-1.5">
                    <LogOut className="w-4 h-4 text-amber-400" />
                    <span>Revoke Active User Session</span>
-                    <HelpTooltip
-                      title="User Session Invalidation"
-                      content="Enables a tenant self-service user to immediately logout a user if they are currently logged in, terminating their active token and session."
-                      size="sm"
-                      placement="top"
-                    />
                  </h4>
                  <p className="text-[11px] text-slate-400 mt-0.5">
-                    Terminates all active JWT tokens and sessions immediately without direct database intervention.
+                    Immediately invalidates active JWT tokens and logs the user out.
                  </p>
                </div>
                <button
                  type="button"
                  onClick={() => logoutMutation.mutate()}
                  disabled={logoutMutation.isPending || !canManageSessions}
-                  className="px-3 py-1.5 bg-amber-500/10 hover:bg-amber-500/20 text-amber-400 border border-amber-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50"
+                  className="px-3 py-1.5 bg-amber-500/10 hover:bg-amber-500/20 text-amber-400 border border-amber-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50 shrink-0"
                >
                  {logoutMutation.isPending ? 'Revoking...' : 'Force Logout'}
                </button>
              </div>

              {/* Lock / Unlock Account */}
-              <div className="flex items-center justify-between">
+              <div className="flex items-center justify-between gap-3">
                <div>
                  <h4 className="text-white font-semibold flex items-center gap-1.5">
                    <Lock className="w-4 h-4 text-rose-400" />
-                    <span>Account Lockout Control</span>
-                    <HelpTooltip
-                      title="Account Lockout Control"
-                      content="Enables a tenant self-service user to change a user's lockout status. The system defaults to a lockout period of 100 years when locking a user account."
-                      size="sm"
-                      placement="top"
-                    />
+                    <span>Account Lockout</span>
                  </h4>
                  <p className="text-[11px] text-slate-400 mt-0.5">
-                    Temporarily lock out or re-enable the user from logging into this tenant. The system defaults to a lockout period of 100 years.
+                    Control tenant login authorization for this account.
                  </p>
                </div>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 shrink-0">
                  <button
                    type="button"
-                    onClick={() => lockoutMutation.mutate(false)}
-                    disabled={lockoutMutation.isPending || !canManageSessions}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      lockUserMutation.mutate();
+                    }}
+                    disabled={lockUserMutation.isPending || unlockUserMutation.isPending || !canManageSessions}
                    className="px-3 py-1.5 bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50"
                  >
-                    Lock User
+                    {lockUserMutation.isPending ? 'Locking...' : 'Lock User'}
                  </button>
                  <button
                    type="button"
-                    onClick={() => lockoutMutation.mutate(true)}
-                    disabled={lockoutMutation.isPending || !canManageSessions}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      unlockUserMutation.mutate();
+                    }}
+                    disabled={unlockUserMutation.isPending || lockUserMutation.isPending || !canManageSessions}
                    className="px-3 py-1.5 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50"
                  >
-                    Unlock User
+                    {unlockUserMutation.isPending ? 'Unlocking...' : 'Unlock User'}
                  </button>
                </div>
              </div>
@@ -1,10 +1,10 @@
-import { updateHasherSettings } from './services/toolsService';
+import { updateHasherSettings } from './utils/hashids';

 export interface SecuritySettings {
  Authority: string;
  Audience: string;
  ClientId: string;
-  ClientSecret: string;
+  ClientSecret?: string;
  Scope?: string;
 }

@@ -13,7 +13,7 @@ export interface ApiSettings {
 }

 export interface HasherSettings {
-  Salt: string;
+  Salt?: string;
  MinHashLength: number;
 }

@@ -36,7 +36,6 @@ export const defaultSecuritySettings: SecuritySettings = {
  Authority: 'https://sts.security.khongisa.co.za',
  Audience: 'pfm-api-dev',
  ClientId: 'pfm-console-dev',
-  ClientSecret: 'secret_dcaeaa28097d9ba5b06ec324d9eac9d9c81de96e0a203cf2c6154c6dd7c89e94',
  Scope: 'openid profile roles email address pfm-api-dev',
 };

@@ -49,6 +48,10 @@ export const defaultHasherSettings: HasherSettings = {
  MinHashLength: 11,
 };

+function syncAllHasherSettings(salt: string | undefined, minHashLength: number): void {
+  updateHasherSettings(salt, minHashLength);
+}
+
 /**
 * Extracts first non-empty, trimmed string from candidate values.
 */
@@ -255,9 +258,8 @@ function resolveConfig(fetchedJson?: Record<string, any>): AppConfig {
  const clientSecret = pickFirstNonEmpty(
    windowConfig.clientSecret,
    fetchedConfig.clientSecret,
-    buildEnvConfig.clientSecret,
-    defaultSecuritySettings.ClientSecret
-  )!;
+    buildEnvConfig.clientSecret
+  );

  const scope = pickFirstNonEmpty(
    windowConfig.scope,
@@ -278,7 +280,7 @@ function resolveConfig(fetchedJson?: Record<string, any>): AppConfig {
    fetchedConfig.hasherSalt,
    buildEnvConfig.hasherSalt,
    defaultHasherSettings.Salt
-  )!;
+  );

  const minHashLength =
    windowConfig.hasherMinLength ||
@@ -291,14 +293,14 @@ function resolveConfig(fetchedJson?: Record<string, any>): AppConfig {
      Authority: normalizeAuthorityUrl(authority),
      Audience: audience,
      ClientId: clientId,
-      ClientSecret: clientSecret,
+      ...(clientSecret ? { ClientSecret: clientSecret } : {}),
      Scope: scope,
    },
    ApiSettings: {
      BaseUrl: normalizeBaseUrl(baseUrl),
    },
    HasherSettings: {
-      Salt: salt,
+      Salt: salt || defaultHasherSettings.Salt,
      MinHashLength: minHashLength,
    },
    ConfigSource: source,
@@ -310,7 +312,7 @@ function resolveConfig(fetchedJson?: Record<string, any>): AppConfig {
 let runtimeConfig: AppConfig = resolveConfig();

 // Immediately apply deterministic hasher settings
-updateHasherSettings(runtimeConfig.HasherSettings.Salt, runtimeConfig.HasherSettings.MinHashLength);
+syncAllHasherSettings(runtimeConfig.HasherSettings.Salt, runtimeConfig.HasherSettings.MinHashLength);

 const configListeners: Array<(config: AppConfig) => void> = [];

@@ -360,7 +362,7 @@ export async function loadRuntimeConfig(): Promise<AppConfig> {
    runtimeConfig = resolveConfig(fetchedJson);

    // Synchronize deterministic hasher settings
-    updateHasherSettings(runtimeConfig.HasherSettings.Salt, runtimeConfig.HasherSettings.MinHashLength);
+    syncAllHasherSettings(runtimeConfig.HasherSettings.Salt, runtimeConfig.HasherSettings.MinHashLength);

    console.info(
      `[Config] Active runtime configuration: source=${runtimeConfig.ConfigSource}, API=${runtimeConfig.ApiSettings.BaseUrl}, STS=${runtimeConfig.SecuritySettings.Authority}`
@@ -6,6 +6,7 @@ import {
  getNotifications,
  createNotification,
  markNotificationAsRead,
+  archiveNotification,
  updateNotification,
  getCurrentUserTenantId,
 } from '../services/api';
@@ -124,7 +125,6 @@ export function useInAppNotifications() {
    },
    // Live polling every 30 seconds
    refetchInterval: 30000,
-    staleTime: 10000,
  });

  // InApp notifications (strictly platform === InApp 5) for Bell & Counters
@@ -137,7 +137,10 @@ export function useInAppNotifications() {
  // Active in-app notifications in inbox (excluding trashed and drafts)
  const inboxNotifications = useMemo(() => {
    return inAppNotifications.filter(
-      n => !trashedIds.includes(String(n.id)) && Number(n.status) !== NotificationStatus.Draft
+      n =>
+        !trashedIds.includes(String(n.id)) &&
+        Number(n.status) !== NotificationStatus.Archived &&
+        Number(n.status) !== NotificationStatus.Draft
    );
  }, [inAppNotifications, trashedIds]);

@@ -168,7 +171,9 @@ export function useInAppNotifications() {

  // Trashed notifications (In-App only)
  const trashedNotifications = useMemo(() => {
-    return inAppNotifications.filter(n => trashedIds.includes(String(n.id)));
+    return inAppNotifications.filter(
+      n => trashedIds.includes(String(n.id)) || Number(n.status) === NotificationStatus.Archived
+    );
  }, [inAppNotifications, trashedIds]);

  // Mutation to mark notification as read
@@ -211,8 +216,8 @@ export function useInAppNotifications() {
    });
  }, [starredStorageKey]);

-  // Delete message (move to trash)
-  const deleteMessage = useCallback((id: string | number) => {
+  // Delete message (NotificationStatus == Archived & move to trash)
+  const deleteMessage = useCallback(async (id: string | number) => {
    const strId = String(id);
    setTrashedIds(prev => {
      const next = prev.includes(strId) ? prev : [...prev, strId];
@@ -222,10 +227,22 @@ export function useInAppNotifications() {
      } catch {}
      return next;
    });
-  }, [trashStorageKey]);

-  // Restore from trash
-  const restoreMessage = useCallback((id: string | number) => {
+    queryClient.setQueryData<Notification[]>(['inapp-notifications', userId], (old = []) =>
+      old.map(n => (String(n.id) === strId ? { ...n, status: NotificationStatus.Archived } : n))
+    );
+
+    try {
+      await archiveNotification(id);
+    } catch (err) {
+      console.warn('[deleteMessage] Error archiving notification on server:', err);
+    } finally {
+      queryClient.invalidateQueries({ queryKey: ['inapp-notifications'] });
+    }
+  }, [trashStorageKey, userId, queryClient]);
+
+  // Restore from trash / unarchive
+  const restoreMessage = useCallback(async (id: string | number) => {
    const strId = String(id);
    setTrashedIds(prev => {
      const next = prev.filter(x => x !== strId);
@@ -235,7 +252,19 @@ export function useInAppNotifications() {
      } catch {}
      return next;
    });
-  }, [trashStorageKey]);
+
+    queryClient.setQueryData<Notification[]>(['inapp-notifications', userId], (old = []) =>
+      old.map(n => (String(n.id) === strId ? { ...n, status: NotificationStatus.Read } : n))
+    );
+
+    try {
+      await markNotificationAsRead(id);
+    } catch (err) {
+      console.warn('[restoreMessage] Error restoring notification on server:', err);
+    } finally {
+      queryClient.invalidateQueries({ queryKey: ['inapp-notifications'] });
+    }
+  }, [trashStorageKey, userId, queryClient]);

  // Permanent delete
  const permanentDelete = useCallback((id: string | number) => {
@@ -80,6 +80,7 @@ export const NOTIFICATION_STATUS_OPTIONS = [
  { value: NotificationStatus.Cancelled, label: 'Cancelled' },
  { value: NotificationStatus.Bounced, label: 'Bounced' },
  { value: NotificationStatus.Draft, label: 'Draft' },
+  { value: NotificationStatus.Archived, label: 'Archived' },
 ];

 export const NOTIFICATION_PLATFORM_OPTIONS = [
@@ -510,6 +511,8 @@ export const getEmailStatusBadge = (status?: EmailStatuses | number | null) => {
 export const getNotificationStatusBadge = (status?: NotificationStatus | number | null) => {
  const s = Number(status);
  switch (s) {
+    case NotificationStatus.Archived:
+      return { label: 'Archived', className: 'bg-slate-800 text-slate-300 border-slate-700 font-semibold' };
    case NotificationStatus.Draft:
      return { label: 'Draft', className: 'bg-purple-50 text-purple-800 border-purple-300 font-semibold' };
    case NotificationStatus.Delivered:
@@ -4,15 +4,38 @@ import { bumpMutationEpoch } from '../services/httpClient';
 export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
-      staleTime: 1000 * 60 * 2, // 2 minutes fresh in memory
-      gcTime: 1000 * 60 * 10,   // 10 minutes cache retention
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: true,
+      // Remove caching from all pages: zero stale time and zero cache retention
+      // Whenever a component needs data, it must call its corresponding endpoint(s)
+      staleTime: 0,
+      gcTime: 0,
+      refetchOnMount: 'always',
+      refetchOnWindowFocus: 'always',
+      refetchOnReconnect: 'always',
      retry: 1,
    },
  },
 });

+// Retain caching ONLY for sync status, auth token, roles and grants
+const RETAINED_CACHE_OPTIONS = {
+  staleTime: 5 * 60 * 1000,
+  gcTime: 10 * 60 * 1000,
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
+};
+
+queryClient.setQueryDefaults(['roles'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['system-roles'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['role-claims'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['user-roles'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['user-claims'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['grants'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['user-grants'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['user-sync'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['sync-status'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['auth'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['auth-token'], RETAINED_CACHE_OPTIONS);
+
 /**
 * Invalidates queries while simultaneously bumping the mutation epoch.
 * This guarantees that the background refetch generates a fresh query parameter (_v)
@@ -353,6 +353,12 @@ export const BeneficiariesPage: React.FC = () => {
  const updateCompMutation = useMutation({
    mutationFn: (vals: ComplianceFormValues) => {
      if (!editingComp) throw new Error('No item selected');
+      if (
+        (vals.status === ComplianceStatus.Met || vals.status === ComplianceStatus.Exceeded) &&
+        isMaker(editingComp.createdBy)
+      ) {
+        throw new Error('Maker-Checker Violation: You created this compliance item and cannot approve it.');
+      }
      return updateComplianceItem({
        complianceItemId: editingComp.id,
        title: vals.title,
@@ -399,6 +405,12 @@ export const BeneficiariesPage: React.FC = () => {
  const updateOutcomeMutation = useMutation({
    mutationFn: (vals: OutcomeFormValues) => {
      if (!editingOutcome) throw new Error('No outcome selected for update');
+      if (
+        (vals.status === ComplianceStatus.Met || vals.status === ComplianceStatus.Exceeded) &&
+        isMaker(editingOutcome.createdBy)
+      ) {
+        throw new Error('Maker-Checker Violation: You created this outcome record and cannot approve or certify fulfillment.');
+      }
      return updateOutcome({
        outcomeId: editingOutcome.id,
        name: vals.name,
@@ -1467,11 +1479,15 @@ export const BeneficiariesPage: React.FC = () => {
              {...compForm.register('status')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500 cursor-pointer"
            >
-              {COMPLIANCE_STATUS_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
+              {COMPLIANCE_STATUS_OPTIONS.map((opt) => {
+                const isApprovedOpt = opt.value === ComplianceStatus.Met || opt.value === ComplianceStatus.Exceeded;
+                const makerRestricted = editingComp && isApprovedOpt && isMaker(editingComp.createdBy);
+                return (
+                  <option key={opt.value} value={opt.value} disabled={makerRestricted}>
+                    {opt.label} {makerRestricted ? '(Maker-Checker: Restricted)' : ''}
                  </option>
-              ))}
+                );
+              })}
            </select>
          </div>

@@ -1680,11 +1696,15 @@ export const BeneficiariesPage: React.FC = () => {
              {...outcomeForm.register('status')}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-blue-500 cursor-pointer"
            >
-              {COMPLIANCE_STATUS_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
+              {COMPLIANCE_STATUS_OPTIONS.map((opt) => {
+                const isMetOpt = opt.value === ComplianceStatus.Met || opt.value === ComplianceStatus.Exceeded;
+                const makerRestricted = editingOutcome && isMetOpt && isMaker(editingOutcome.createdBy);
+                return (
+                  <option key={opt.value} value={opt.value} disabled={makerRestricted}>
+                    {opt.label} {makerRestricted ? '(Maker-Checker: Restricted)' : ''}
                  </option>
-              ))}
+                );
+              })}
            </select>
          </div>

@@ -1020,7 +1020,7 @@ export const ChangeManagementPage: React.FC = () => {
                            {Number(cr.status) === ApprovalStatus.Approved ? (
                              <span className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-lg border border-emerald-500/20 cursor-default" title="Approved and enacted change requests are immutable.">
                                <Lock className="w-3 h-3 text-emerald-400" />
-                                <span>Resolved &amp; Enacted (Immutable)</span>
+                                <span>Resolved &amp; Enacted</span>
                              </span>
                            ) : (
                              <>
@@ -1528,7 +1528,7 @@ export const ChangeManagementPage: React.FC = () => {
                  title="Approved and enacted change requests are immutable."
                >
                  <Lock className="w-3.5 h-3.5 text-emerald-400" />
-                  <span>Approved &amp; Enacted (Immutable - Cannot Be Changed)</span>
+                  <span>Approved &amp; Enacted</span>
                </div>
              ) : (
                <select
@@ -11,6 +11,7 @@ import {
  Edit2,
  Mail,
  Shield,
+  ShieldCheck,
  Layers,
  ChevronRight,
  Search,
@@ -24,9 +25,11 @@ import {
  UserPlus,
  ChevronDown,
  ChevronUp,
+  CheckCircle,
  CheckCircle2,
  Loader2,
  Lock,
+  AlertTriangle,
 } from 'lucide-react';
 import {
  getOrganisations,
@@ -69,6 +72,7 @@ import { ExportButton } from '../components/ui/ExportButton';
 import { ExportColumn } from '../utils/exportUtils';
 import { useAuth } from '../auth/AuthProvider';
 import { useRbac } from '../auth/rbac';
+import { bumpMutationEpoch } from '../services/httpClient';
 import { useTableSort, SortableTh } from '../utils/tableSort';
 import { FundingInstrumentsSection, InstructionsSection } from '../components/governance/InstructionsSection';
 import { RulesSection } from '../components/governance/RulesSection';
@@ -110,6 +114,7 @@ const organisationSchema = z.object({
  registrationNo: z.string().min(4, 'Registration number is mandatory'),
  email: z.string().email('Enter a valid email address'),
  organisationUser: z.string().min(1, 'Please select a linked executive or manager user'),
+  idNumber: z.string().optional(),
  type: z.coerce.number().min(1).max(27),
  status: z.coerce.number().optional(),
 });
@@ -134,8 +139,8 @@ type ProgrammeFormValues = z.infer<typeof programmeSchema>;

 export const GovernancePage: React.FC = () => {
  const queryClient = useQueryClient();
-  const { sub, user, claims } = useAuth();
-  const { canAdd, canApprove, canExport, canApproveRecord, isMaker } = useRbac();
+  const { sub, user, claims, roles, tenantId } = useAuth();
+  const { canAdd, canApprove, canExport, canApproveRecord, isMaker, isUnrestricted } = useRbac();
  const currentUserId = sub || user?.id || '';
  const { success, error: toastError } = useToast();

@@ -241,7 +246,6 @@ export const GovernancePage: React.FC = () => {
  const { data: usersDirectory = [] } = useQuery({
    queryKey: ['users-directory'],
    queryFn: () => getUsers(1, 200),
-    staleTime: 5 * 60 * 1000,
  });

  const { data: systemRoles = [] } = useQuery<Role[]>({
@@ -263,6 +267,37 @@ export const GovernancePage: React.FC = () => {
    });
  }, [usersDirectory]);

+  const modalExecutiveUsers = React.useMemo(() => {
+    const list: User[] = [...executiveAndManagerUsers];
+    const linkedUserId =
+      editingOrg?.userId ||
+      editingOrg?.UserId ||
+      '';
+
+    if (linkedUserId) {
+      const linkedStr = String(linkedUserId).toLowerCase();
+      const alreadyIncluded = list.some((u) => u.id && String(u.id).toLowerCase() === linkedStr);
+      if (!alreadyIncluded) {
+        const inDirectory = usersDirectory.find((u) => u.id && String(u.id).toLowerCase() === linkedStr);
+        if (inDirectory) {
+          list.unshift(inDirectory);
+        } else {
+          const email = getUserEmail(linkedUserId);
+          const hasRealEmail = email && email !== '—' && email.includes('@') && email !== String(linkedUserId);
+          list.unshift({
+            id: String(linkedUserId),
+            email: hasRealEmail ? email : String(linkedUserId),
+            role: 'Executive',
+            status: ActivityStatus.Active,
+            lastLoginAt: null,
+          });
+        }
+      }
+    }
+
+    return list;
+  }, [executiveAndManagerUsers, usersDirectory, editingOrg?.id, editingOrg?.userId]);
+
  // Quick Add Executive User Subform state
  const [isQuickAddUserOpen, setIsQuickAddUserOpen] = useState(false);
  const [quickUserEmail, setQuickUserEmail] = useState('');
@@ -560,11 +595,23 @@ export const GovernancePage: React.FC = () => {
      registrationNo: '',
      email: '',
      organisationUser: '',
+      idNumber: '',
      type: OrganisationType.Enterprise,
-      status: ActivityStatus.Active,
+      status: ActivityStatus.Inactive,
    },
  });

+  const watchedOrgUser = orgForm.watch('organisationUser');
+  const selectedExecutiveUser = React.useMemo(() => {
+    if (!watchedOrgUser) return null;
+    const str = String(watchedOrgUser).toLowerCase();
+    return (
+      usersDirectory.find((u) => u.id && String(u.id).toLowerCase() === str) ||
+      modalExecutiveUsers.find((u) => u.id && String(u.id).toLowerCase() === str) ||
+      null
+    );
+  }, [watchedOrgUser, usersDirectory, modalExecutiveUsers]);
+
  const portfolioForm = useForm<PortfolioFormValues>({
    resolver: zodResolver(portfolioSchema),
    defaultValues: {
@@ -580,7 +627,7 @@ export const GovernancePage: React.FC = () => {
    defaultValues: {
      name: '',
      portfolioId: portfolios[0]?.id ? Number(portfolios[0].id) : 201,
-      status: ApprovalStatus.Approved,
+      status: ApprovalStatus.Pending,
      ownerEmail: effectiveUserEmail,
    },
  });
@@ -589,11 +636,20 @@ export const GovernancePage: React.FC = () => {
  const orgMutation = useMutation({
    mutationFn: (data: OrganisationFormValues) => {
      if (editingOrg) {
+        if (!data.idNumber || !data.idNumber.trim()) {
+          orgForm.setError('idNumber', {
+            type: 'manual',
+            message: 'Government ID number is required to assign this executive user.',
+          });
+          throw new Error('Executive user ID number is required when updating an organisation.');
+        }
+
        return updateOrganisation({
          organisationId: editingOrg.id,
          name: data.name,
          registrationNo: data.registrationNo,
          email: data.email,
+          idNumber: data.idNumber.trim(),
          organisationUser: data.organisationUser,
          type: Number(data.type),
          status: data.status !== undefined ? Number(data.status) : ActivityStatus.Active,
@@ -603,11 +659,13 @@ export const GovernancePage: React.FC = () => {
        name: data.name,
        registrationNo: data.registrationNo,
        email: data.email,
+        idNumber: data.idNumber?.trim() || null,
        organisationUser: data.organisationUser,
        type: Number(data.type),
      });
    },
    onSuccess: () => {
+      bumpMutationEpoch();
      queryClient.invalidateQueries({ queryKey: ['organisations'] });
      success(editingOrg ? 'Organisation updated' : 'Organisation registered successfully');
      setIsOrgModalOpen(false);
@@ -639,6 +697,7 @@ export const GovernancePage: React.FC = () => {
      });
    },
    onSuccess: () => {
+      bumpMutationEpoch();
      queryClient.invalidateQueries({ queryKey: ['portfolios'] });
      success(editingPortfolio ? 'Portfolio updated successfully' : 'Portfolio created successfully');
      setIsPortfolioModalOpen(false);
@@ -650,15 +709,43 @@ export const GovernancePage: React.FC = () => {
    },
  });

+  const approveProgrammeMutation = useMutation({
+    mutationFn: async (pr: Programme) => {
+      if (isMaker(pr.createdBy)) {
+        throw new Error('Maker-Checker policy: Record creator cannot approve their own programme.');
+      }
+      return updateProgramme({
+        programmeId: pr.id,
+        name: pr.name || '',
+        portfolioId: Number(pr.portfolioId),
+        status: ApprovalStatus.Approved,
+        ownerId: pr.ownedBy,
+      });
+    },
+    onSuccess: () => {
+      bumpMutationEpoch();
+      queryClient.invalidateQueries({ queryKey: ['programmes'] });
+      queryClient.invalidateQueries({ queryKey: ['programme'] });
+      success('Programme Approved', 'Programme governance status successfully updated to Approved.');
+    },
+    onError: (err: unknown) => {
+      toastError('Programme Approval Failed', err);
+    },
+  });
+
  const programmeMutation = useMutation({
    mutationFn: (data: ProgrammeFormValues) => {
      const resolvedOwnerId = resolveOwnerId(data.ownerEmail, editingProgramme?.ownedBy);
      if (editingProgramme) {
+        const targetStatus = (data.status !== undefined ? Number(data.status) : 1) as ApprovalStatus;
+        if (targetStatus === ApprovalStatus.Approved && isMaker(editingProgramme.createdBy)) {
+          throw new Error('Maker-Checker policy violation: Record creators cannot approve their own programmes.');
+        }
        return updateProgramme({
          programmeId: editingProgramme.id,
          name: data.name,
          portfolioId: Number(data.portfolioId),
-          status: (data.status !== undefined ? Number(data.status) : 1) as ApprovalStatus,
+          status: targetStatus,
          ownerId: resolvedOwnerId,
        });
      }
@@ -669,7 +756,9 @@ export const GovernancePage: React.FC = () => {
      });
    },
    onSuccess: () => {
+      bumpMutationEpoch();
      queryClient.invalidateQueries({ queryKey: ['programmes'] });
+      queryClient.invalidateQueries({ queryKey: ['programme'] });
      success(editingProgramme ? 'Programme updated successfully' : 'Programme created successfully');
      setIsProgrammeModalOpen(false);
      setEditingProgramme(null);
@@ -688,8 +777,9 @@ export const GovernancePage: React.FC = () => {
      registrationNo: '',
      email: '',
      organisationUser: defaultUser?.id || '',
+      idNumber: defaultUser?.idNumber || '',
      type: OrganisationType.Enterprise,
-      status: ActivityStatus.Active,
+      status: ActivityStatus.Inactive,
    });
    setIsQuickAddUserOpen(false);
    setQuickUserError(null);
@@ -702,26 +792,51 @@ export const GovernancePage: React.FC = () => {
    const targetUserId =
      org.userId ||
      org.UserId ||
-      org.organisationUser ||
-      org.OrganisationUser ||
-      org.createdBy ||
      '';

-    const matchedUser = targetUserId
-      ? usersDirectory.find((u) => u.id && String(u.id).toLowerCase() === String(targetUserId).toLowerCase())
-      : null;
+    let selectedUserId = '';
+    let matchedUser: User | undefined;
+    if (targetUserId) {
+      const targetStr = String(targetUserId).toLowerCase();
+      matchedUser = usersDirectory.find(
+        (u) =>
+          (u.id && String(u.id).toLowerCase() === targetStr) ||
+          (u.email && u.email.toLowerCase() === targetStr)
+      );

-    const selectedUserId = matchedUser?.id || targetUserId || '';
+      if (matchedUser) {
+        selectedUserId = matchedUser.id;
+        if (matchedUser.email) {
+          registerUserEmail(matchedUser.id, matchedUser.email);
+        }
+      } else {
+        selectedUserId = String(targetUserId);
+        const email = getUserEmail(targetUserId);
+        if (email && email !== '—' && email.includes('@')) {
+          registerUserEmail(selectedUserId, email);
+        }
+      }
+    }
+
+    const resolvedIdNumber = matchedUser?.idNumber || org.idNumber || '';

    orgForm.reset({
      name: org.name || '',
      registrationNo: org.registrationNo || '',
      email: org.email || '',
      organisationUser: selectedUserId,
+      idNumber: resolvedIdNumber,
      type: org.type || OrganisationType.Enterprise,
      status: org.status ?? ActivityStatus.Active,
    });

+    if (selectedUserId && !resolvedIdNumber) {
+      orgForm.setError('idNumber', {
+        type: 'manual',
+        message: 'This executive user has no ID number on file. An ID number is required to update the organisation.',
+      });
+    }
+
    setIsQuickAddUserOpen(false);
    setQuickUserError(null);
    setIsOrgModalOpen(true);
@@ -755,7 +870,7 @@ export const GovernancePage: React.FC = () => {
    programmeForm.reset({
      name: '',
      portfolioId: portfolios[0]?.id ? Number(portfolios[0].id) : 201,
-      status: ApprovalStatus.Approved,
+      status: ApprovalStatus.Pending,
      ownerEmail: effectiveUserEmail,
    });
    setIsProgrammeModalOpen(true);
@@ -833,6 +948,7 @@ export const GovernancePage: React.FC = () => {
    status: (p) => getApprovalStatusBadge(p.status).label,
    createdAt: (p) => p.createdAt,
    ownedBy: (p) => getUserEmail(p.ownedBy),
+    createdBy: (p) => getUserEmail(p.createdBy),
  });

  // Export Columns Definitions
@@ -863,6 +979,7 @@ export const GovernancePage: React.FC = () => {
      format: (id) => programmes.filter((pr) => String(pr.portfolioId) === String(id)).length,
    },
    { header: 'Owner Email', key: 'ownedBy', format: (val) => getUserEmail(val) },
+    { header: 'Created By (Maker)', key: 'createdBy', format: (val) => getUserEmail(val) },
    { header: 'Creation Date', key: 'createdAt', format: (val) => formatDate(val) },
    { header: 'Description', key: 'description', format: (val) => val || '—' },
  ];
@@ -881,6 +998,7 @@ export const GovernancePage: React.FC = () => {
    { header: 'Governance Status', key: 'status', format: (val) => getApprovalStatusBadge(val).label },
    { header: 'Creation Date', key: 'createdAt', format: (val) => formatDate(val) },
    { header: 'Owner Email', key: 'ownedBy', format: (val) => getUserEmail(val) },
+    { header: 'Created By (Maker)', key: 'createdBy', format: (val) => getUserEmail(val) },
  ];

  return (
@@ -1150,6 +1268,11 @@ export const GovernancePage: React.FC = () => {
                            <Mail className="w-3.5 h-3.5 text-slate-500" />
                            {org.email}
                          </span>
+                          {org.userId && (
+                            <span className="text-[10px] text-blue-400/90 font-mono block mt-0.5" title={`Executive User: ${org.userId}`}>
+                              Exec: {getUserEmail(org.userId)}
+                            </span>
+                          )}
                        </td>
                        <td className="py-3.5 px-4">
                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-semibold border ${statusBadge.className}`}>
@@ -1382,19 +1505,22 @@ export const GovernancePage: React.FC = () => {
                  <SortableTh column="ownedBy" currentColumn={progSortCol} direction={progSortDir} onSort={handleProgSort} className="py-3.5 px-4">
                    Owner Email
                  </SortableTh>
+                  <SortableTh column="createdBy" currentColumn={progSortCol} direction={progSortDir} onSort={handleProgSort} className="py-3.5 px-4">
+                    Created By
+                  </SortableTh>
                  <th className="py-3.5 px-5 text-right font-medium">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800/60">
                {loadingProgrammes ? (
                  <tr>
-                    <td colSpan={6} className="py-8 text-center text-slate-500">
+                    <td colSpan={7} className="py-8 text-center text-slate-500">
                      Loading programmes...
                    </td>
                  </tr>
                ) : sortedProgrammes.length === 0 ? (
                  <tr>
-                    <td colSpan={6} className="py-8 text-center text-slate-500">
+                    <td colSpan={7} className="py-8 text-center text-slate-500">
                      No programmes found matching query.
                    </td>
                  </tr>
@@ -1402,6 +1528,7 @@ export const GovernancePage: React.FC = () => {
                  sortedProgrammes.map((pr) => {
                    const port = portfolios.find((p) => String(p.id) === String(pr.portfolioId));
                    const statusBadge = getApprovalStatusBadge(pr.status);
+                    const isApproved = Number(pr.status) === ApprovalStatus.Approved;
                    return (
                      <tr key={pr.id} className="hover:bg-slate-800/40 transition-colors">
                        <td className="py-3.5 px-5">
@@ -1420,8 +1547,49 @@ export const GovernancePage: React.FC = () => {
                        <td className="py-3.5 px-4 font-mono text-slate-300 font-medium text-[11px]">
                          {getUserEmail(pr.ownedBy)}
                        </td>
+                        <td className="py-3.5 px-4 font-mono text-slate-400 text-[11px]">
+                          {getUserEmail(pr.createdBy)}
+                        </td>
                        <td className="py-3.5 px-5 text-right">
-                          <div className="flex items-center justify-end gap-1.5">
+                          <div className="flex items-center justify-end gap-1.5 flex-wrap sm:flex-nowrap">
+                            {isApproved ? (
+                              <span
+                                className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-lg border border-emerald-500/20 cursor-default"
+                                title="Approved programmes cannot be modified."
+                              >
+                                <Lock className="w-3 h-3 text-emerald-400" />
+                                <span>Approved</span>
+                              </span>
+                            ) : (
+                              <>
+                                <button
+                                  type="button"
+                                  onClick={() => openEditProgramme(pr)}
+                                  className="inline-flex items-center gap-1 text-xs font-semibold text-slate-200 hover:text-white bg-slate-900/80 hover:bg-slate-800 border border-slate-700/80 px-2.5 py-1 rounded-lg transition shadow-xs cursor-pointer"
+                                  title="Edit Programme"
+                                >
+                                  <Edit2 className="w-3 h-3" />
+                                  Edit
+                                </button>
+                                {canApproveRecord('governance', pr.createdBy) && (
+                                  <button
+                                    type="button"
+                                    disabled={approveProgrammeMutation.isPending}
+                                    onClick={() => approveProgrammeMutation.mutate(pr)}
+                                    className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-300 hover:text-white bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/30 px-2.5 py-1 rounded-lg transition shadow-xs cursor-pointer"
+                                    title="Approve Programme"
+                                  >
+                                    <CheckCircle className="w-3 h-3" />
+                                    <span>Approve</span>
+                                  </button>
+                                )}
+                                {canApprove('governance') && isMaker(pr.createdBy) && (
+                                  <span className="text-[10px] text-amber-400 font-mono italic px-1.5 py-0.5 bg-amber-500/10 border border-amber-500/20 rounded">
+                                    Maker-Checker: Record creator cannot approve
+                                  </span>
+                                )}
+                              </>
+                            )}
                            <button
                              type="button"
                              onClick={() => {
@@ -1458,14 +1626,6 @@ export const GovernancePage: React.FC = () => {
                              <Scale className="w-3 h-3" />
                              Rules
                            </button>
-                            <button
-                              type="button"
-                              onClick={() => openEditProgramme(pr)}
-                              className="inline-flex items-center gap-1 text-xs font-semibold text-slate-200 hover:text-white bg-slate-900/80 hover:bg-slate-800 border border-slate-700/80 px-2.5 py-1 rounded-lg transition shadow-xs cursor-pointer"
-                            >
-                              <Edit2 className="w-3 h-3" />
-                              Edit
-                            </button>
                          </div>
                        </td>
                      </tr>
@@ -1611,11 +1771,11 @@ export const GovernancePage: React.FC = () => {
              <div className="flex items-center justify-between mb-1">
                <div className="flex items-center gap-1">
                  <label className="block text-xs font-semibold text-slate-300">
-                    Linked Executive / Manager User *
+                    Responsible Executive User *
                  </label>
                  <HelpTooltip
-                    title="Designated Organisation User"
-                    content="Only users with an Executive or Manager role can be assigned to an organisation."
+                    title="Executive / Organisation User"
+                    content="The Executive user responsible for this organisation. Stored as userId in the organisation record and submitted as organisationUser to the API."
                    size="sm"
                    placement="top"
                  />
@@ -1636,11 +1796,36 @@ export const GovernancePage: React.FC = () => {
                )}
              </div>
              <select
-                {...orgForm.register('organisationUser')}
+                {...orgForm.register('organisationUser', {
+                  onChange: (e) => {
+                    const selectedId = e.target.value;
+                    if (!selectedId) {
+                      orgForm.setValue('idNumber', '');
+                      return;
+                    }
+                    const str = String(selectedId).toLowerCase();
+                    const matched =
+                      usersDirectory.find((u) => u.id && String(u.id).toLowerCase() === str) ||
+                      modalExecutiveUsers.find((u) => u.id && String(u.id).toLowerCase() === str);
+
+                    if (matched?.idNumber && matched.idNumber.trim()) {
+                      orgForm.setValue('idNumber', matched.idNumber.trim(), { shouldValidate: true });
+                      orgForm.clearErrors('idNumber');
+                    } else {
+                      orgForm.setValue('idNumber', '', { shouldValidate: true });
+                      if (editingOrg) {
+                        orgForm.setError('idNumber', {
+                          type: 'manual',
+                          message: 'Selected user has no ID number on file. Please enter their ID number to enable executive assignment.',
+                        });
+                      }
+                    }
+                  },
+                })}
                className="w-full px-3 py-2 text-xs border border-slate-700/80 rounded-xl focus:outline-none focus:ring-1 focus:ring-blue-500 bg-[#090d16] text-white font-medium"
              >
                <option value="">-- Select linked executive or manager account --</option>
-                {executiveAndManagerUsers.map((u) => (
+                {modalExecutiveUsers.map((u) => (
                  <option key={u.id} value={u.id}>
                    {u.email || u.id} ({u.role || 'Executive'})
                  </option>
@@ -1654,7 +1839,59 @@ export const GovernancePage: React.FC = () => {
                  No Executive or Manager user found. Create one below to continue.
                </p>
              )}
+              {watchedOrgUser && selectedExecutiveUser && selectedExecutiveUser.idNumber && selectedExecutiveUser.idNumber.trim() && (
+                <div className="flex items-center gap-1.5 text-[11px] text-emerald-400 mt-1">
+                  <CheckCircle className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
+                  <span>ID on file: <strong className="font-mono text-emerald-300">{selectedExecutiveUser.idNumber}</strong></span>
                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Missing ID Number Alert */}
+          {watchedOrgUser && selectedExecutiveUser && (!selectedExecutiveUser.idNumber || !selectedExecutiveUser.idNumber.trim()) && (
+            <div className="p-3 rounded-xl border border-amber-500/30 bg-amber-500/10 text-amber-300 text-xs flex items-start gap-2.5">
+              <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
+              <div className="space-y-1">
+                <p className="font-semibold text-amber-200">
+                  Missing Executive ID Number
+                </p>
+                <p className="text-[11px] text-amber-300/90 leading-relaxed">
+                  The selected executive (<strong className="font-mono text-white">{selectedExecutiveUser.email || watchedOrgUser}</strong>) does not have a Government ID Number on file. An ID number is required to assign this executive user; otherwise the update will be ignored. Please enter their ID number below.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Executive User ID Number Input */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <div className="flex items-center gap-1">
+                <label className="block text-xs font-semibold text-slate-300">
+                  Executive ID Number {editingOrg ? '*' : '(Optional)'}
+                </label>
+                <HelpTooltip
+                  title="Executive ID Requirement"
+                  content="Government Issued ID or Passport of the executive. Required when updating to persist the executive user link; otherwise the update will be ignored."
+                  size="sm"
+                  placement="top"
+                />
+              </div>
+              {selectedExecutiveUser?.idNumber && (
+                <span className="text-[10px] text-emerald-400 font-mono">Sourced from profile</span>
+              )}
+            </div>
+            <input
+              type="text"
+              {...orgForm.register('idNumber')}
+              className={`w-full px-3 py-2 text-xs border rounded-xl focus:outline-none focus:ring-1 focus:ring-blue-500 text-white bg-[#090d16] font-mono ${
+                orgForm.formState.errors.idNumber ? 'border-rose-500 ring-1 ring-rose-500' : 'border-slate-700/80'
+              }`}
+              placeholder="Enter 13-digit ID or Passport Number"
+            />
+            {orgForm.formState.errors.idNumber && (
+              <p className="text-[10px] text-rose-500 mt-1">{orgForm.formState.errors.idNumber.message}</p>
+            )}
          </div>

          {/* Inline Collapsible Subform to Create Executive User */}
@@ -2004,18 +2241,18 @@ export const GovernancePage: React.FC = () => {
                  placement="top"
                />
              </div>
-              {selectedProgrammeForDetail && Number(selectedProgrammeForDetail.status) === ApprovalStatus.Approved ? (
+              {editingProgramme && Number(editingProgramme.status) === ApprovalStatus.Approved ? (
                <div
                  className="w-full px-3 py-2 text-xs border border-emerald-500/30 bg-emerald-500/10 rounded-xl text-emerald-300 font-semibold flex items-center gap-1.5 cursor-default"
-                  title="Approved programmes are immutable."
+                  title="Approved programmes cannot be modified."
                >
                  <Lock className="w-3.5 h-3.5 text-emerald-400" />
-                  <span>Approved (Immutable - Cannot Be Changed)</span>
+                  <span>Approved</span>
                </div>
              ) : (
                (() => {
-                  const canApproveProgramme = canApproveRecord('governance', selectedProgrammeForDetail?.createdBy);
-                  const isSelf = isMaker(selectedProgrammeForDetail?.createdBy);
+                  const canApproveProgramme = canApproveRecord('governance', editingProgramme?.createdBy);
+                  const isSelf = isMaker(editingProgramme?.createdBy);

                  return (
                    <select
@@ -2460,11 +2697,17 @@ export const GovernancePage: React.FC = () => {
                    <span className="text-slate-300">{getOrganisationTypeLabel(orgFreshDetail?.type ?? selectedOrgForDetail?.type ?? OrganisationType.Enterprise)}</span>
                  </div>
                  <div className="flex items-center gap-2 min-w-0">
-                    <span className="text-slate-400 font-semibold text-[11px] uppercase tracking-wider shrink-0">Linked User:</span>
+                    <span className="text-slate-400 font-semibold text-[11px] uppercase tracking-wider shrink-0">Executive User:</span>
                    <span className="text-blue-400 font-mono text-[11px] truncate">
                      {getUserEmail(orgFreshDetail?.userId || selectedOrgForDetail?.userId) || orgFreshDetail?.userId || selectedOrgForDetail?.userId || '—'}
                    </span>
                  </div>
+                  <div className="flex items-center gap-2 min-w-0">
+                    <span className="text-slate-400 font-semibold text-[11px] uppercase tracking-wider shrink-0">Created By:</span>
+                    <span className="text-slate-300 font-mono text-[11px] truncate">
+                      {getUserEmail(orgFreshDetail?.createdBy || selectedOrgForDetail?.createdBy) || orgFreshDetail?.createdBy || selectedOrgForDetail?.createdBy || '—'}
+                    </span>
+                  </div>
                </div>
              </div>

@@ -2717,13 +2960,38 @@ export const GovernancePage: React.FC = () => {
                    <span className="text-slate-400 font-semibold block text-[11px] uppercase tracking-wider mb-1">Programme Title</span>
                    <span className="text-white font-semibold text-sm block">{programmeFreshDetail?.name || selectedProgrammeForDetail?.name}</span>
                  </div>
+                  <div className="flex items-center gap-2">
                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-semibold border whitespace-nowrap ${getApprovalStatusBadge(programmeFreshDetail?.status ?? selectedProgrammeForDetail?.status ?? ApprovalStatus.Approved).className}`}>
                      {getApprovalStatusBadge(programmeFreshDetail?.status ?? selectedProgrammeForDetail?.status ?? ApprovalStatus.Approved).label}
                    </span>
+                    {selectedProgrammeForDetail && Number(programmeFreshDetail?.status ?? selectedProgrammeForDetail.status) !== ApprovalStatus.Approved && (
+                      canApproveRecord('governance', selectedProgrammeForDetail.createdBy) ? (
+                        <button
+                          type="button"
+                          disabled={approveProgrammeMutation.isPending}
+                          onClick={async () => {
+                            await approveProgrammeMutation.mutateAsync(selectedProgrammeForDetail);
+                            setIsProgrammeDetailModalOpen(false);
+                            setSelectedProgrammeForDetail(null);
+                          }}
+                          className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-300 hover:text-white bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/30 px-2.5 py-1 rounded-lg transition shadow-xs cursor-pointer"
+                        >
+                          <CheckCircle className="w-3.5 h-3.5" />
+                          <span>Approve Programme</span>
+                        </button>
+                      ) : (
+                        isMaker(selectedProgrammeForDetail.createdBy) && canApprove('governance') && (
+                          <span className="text-[10px] text-amber-400 font-mono italic px-1.5 py-0.5 bg-amber-500/10 border border-amber-500/20 rounded">
+                            Maker-Checker: Record creator cannot approve
+                          </span>
+                        )
+                      )
+                    )}
+                  </div>
                </div>

-                {/* Core Details Grid: Owner & Creation Date */}
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
+                {/* Core Details Grid: Owner, Maker, Creation Date */}
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs">
                  {/* Creation Date */}
                  <div className="p-3 bg-[#080d1a] rounded-lg border border-slate-800 flex items-center gap-2.5">
                    <Calendar className="w-4 h-4 text-slate-400 shrink-0" />
@@ -2745,6 +3013,17 @@ export const GovernancePage: React.FC = () => {
                      </span>
                    </div>
                  </div>
+
+                  {/* Maker */}
+                  <div className="p-3 bg-[#080d1a] rounded-lg border border-slate-800 flex items-center gap-2.5">
+                    <ShieldCheck className="w-4 h-4 text-slate-400 shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <span className="text-slate-500 font-medium block text-[10px] uppercase tracking-wider">Created By (Maker)</span>
+                      <span className="font-mono text-slate-200 text-xs truncate block" title={getUserEmail(programmeFreshDetail?.createdBy || selectedProgrammeForDetail?.createdBy)}>
+                        {getUserEmail(programmeFreshDetail?.createdBy || selectedProgrammeForDetail?.createdBy)}
+                      </span>
+                    </div>
+                  </div>
                </div>

                {/* Metrics: Total Rules and Total Instructions */}
@@ -47,6 +47,7 @@ import { ExportButton } from '../components/ui/ExportButton';
 import { ExportColumn } from '../utils/exportUtils';
 import { useTableSort, SortableTh } from '../utils/tableSort';
 import { useRbac } from '../auth/rbac';
+import { bumpMutationEpoch } from '../services/httpClient';
 import {
  Award,
  Budget,
@@ -123,7 +124,7 @@ export const GrantsPage: React.FC = () => {
  const [isBudgetModalOpen, setIsBudgetModalOpen] = useState(false);
  const [editingBudget, setEditingBudget] = useState<Budget | null>(null);
  const [isEditBudgetModalOpen, setIsEditBudgetModalOpen] = useState(false);
-  const [selectedBudgetStatus, setSelectedBudgetStatus] = useState<ApprovalStatus>(ApprovalStatus.Approved);
+  const [selectedBudgetStatus, setSelectedBudgetStatus] = useState<ApprovalStatus>(ApprovalStatus.Pending);
  const [isDisbursementModalOpen, setIsDisbursementModalOpen] = useState(false);
  const [editingDisbursement, setEditingDisbursement] = useState<Disbursement | null>(null);

@@ -233,6 +234,7 @@ export const GrantsPage: React.FC = () => {
  const updateAwardMutation = useMutation({
    mutationFn: (data: UpdateAwardRequest) => updateAward(data),
    onSuccess: () => {
+      bumpMutationEpoch();
      queryClient.invalidateQueries({ queryKey: ['awards'] });
      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
      success('Award Updated', 'Award details saved successfully.');
@@ -248,6 +250,7 @@ export const GrantsPage: React.FC = () => {
  const budgetMutation = useMutation({
    mutationFn: (data: CreateBudgetRequest) => createBudget(data),
    onSuccess: () => {
+      bumpMutationEpoch();
      queryClient.invalidateQueries({ queryKey: ['budgets'] });
      success('Budget line established', 'Budget line created against project');
      setIsBudgetModalOpen(false);
@@ -261,6 +264,7 @@ export const GrantsPage: React.FC = () => {
  const updateBudgetMutation = useMutation({
    mutationFn: (data: UpdateBudgetRequest) => updateBudget(data),
    onSuccess: () => {
+      bumpMutationEpoch();
      queryClient.invalidateQueries({ queryKey: ['budgets'] });
      success('Budget Updated', 'Budget compliance and approval status updated.');
      setIsEditBudgetModalOpen(false);
@@ -287,6 +291,7 @@ export const GrantsPage: React.FC = () => {
      });
    },
    onSuccess: () => {
+      bumpMutationEpoch();
      queryClient.invalidateQueries({ queryKey: ['disbursements'] });
      success(
        editingDisbursement ? 'Disbursement Updated' : 'Disbursement Scheduled',
@@ -497,6 +502,7 @@ export const GrantsPage: React.FC = () => {
  const approveMutation = useMutation({
    mutationFn: (id: string | number) => approveDisbursement(id),
    onSuccess: () => {
+      bumpMutationEpoch();
      queryClient.invalidateQueries({ queryKey: ['disbursements'] });
      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
      success(
@@ -637,8 +643,14 @@ export const GrantsPage: React.FC = () => {
    handleSort: handleAwardSort,
  } = useTableSort(filteredAwards, null, null, {
    referenceNo: (a) => a.referenceNo,
-    organisationId: (a) => a.organisationName || `Org #${a.organisationId}`,
-    programmeId: (a) => a.programmeName || `Programme #${a.programmeId}`,
+    organisationId: (a) => {
+      const org = organisations.find((o) => String(o.id) === String(a.organisationId));
+      return (org?.name || a.organisationName || `Organisation #${a.organisationId}`).toLowerCase();
+    },
+    programmeId: (a) => {
+      const prog = programmes.find((p) => String(p.id) === String(a.programmeId));
+      return (prog?.name || a.programmeName || `Programme #${a.programmeId}`).toLowerCase();
+    },
    amount: (a) => a.amount,
    status: (a) => getApprovalStatusBadge(a.status).label,
    createdAt: (a) => a.createdAt,
@@ -651,7 +663,10 @@ export const GrantsPage: React.FC = () => {
    handleSort: handleBudgetSort,
  } = useTableSort(filteredBudgets, null, null, {
    name: (b) => b.name,
-    projectId: (b) => b.projectId,
+    projectId: (b) => {
+      const proj = projects.find((p) => String(p.id) === String(b.projectId));
+      return (proj?.name || `Project #${b.projectId}`).toLowerCase();
+    },
    amount: (b) => b.amount,
    createdAt: (b) => b.createdAt,
    status: (b) => getApprovalStatusBadge(b.status ?? ApprovalStatus.Approved).label,
@@ -665,8 +680,15 @@ export const GrantsPage: React.FC = () => {
    handleSort: handleDisbSort,
  } = useTableSort(filteredDisbursements, null, null, {
    id: (d) => d.id,
-    projectId: (d) => d.projectId,
-    milestoneId: (d) => d.milestoneId || 0,
+    projectId: (d) => {
+      const proj = projects.find((p) => String(p.id) === String(d.projectId));
+      return (proj?.name || `Project #${d.projectId}`).toLowerCase();
+    },
+    milestoneId: (d) => {
+      if (!d.milestoneId) return 'Advance Tranche';
+      const ms = milestones.find((m) => String(m.id) === String(d.milestoneId));
+      return (ms?.name || `Milestone #${d.milestoneId}`).toLowerCase();
+    },
    amount: (d) => d.amount,
    paymentReference: (d) => d.paymentReference || '',
    status: (d) => getApprovalStatusBadge(d.status).label,
@@ -826,8 +848,10 @@ export const GrantsPage: React.FC = () => {
            <div className="flex items-center gap-2 self-end sm:self-center">
              <button
                type="button"
-                onClick={() => {
-                  refetchAwards();
+                onClick={async () => {
+                  bumpMutationEpoch();
+                  await queryClient.invalidateQueries({ queryKey: ['awards'] });
+                  await refetchAwards();
                  success('Refreshed', 'Awards intake list refreshed from API.');
                }}
                disabled={isFetchingAwards}
@@ -899,10 +923,28 @@ export const GrantsPage: React.FC = () => {
                            <span className="text-[10px] text-slate-500 font-mono">System ID: #{awd.id}</span>
                          </td>
                          <td className="py-3.5 px-4 text-slate-200 font-medium">
-                            {awd.organisationName || `Org #${awd.organisationId}`}
+                            {(() => {
+                              const org = organisations.find((o) => String(o.id) === String(awd.organisationId));
+                              const orgName = org?.name || awd.organisationName || (awd.organisationId ? `Organisation #${awd.organisationId}` : '—');
+                              return (
+                                <div>
+                                  <span className="text-white block font-medium">{orgName}</span>
+                                  {awd.organisationId && <span className="text-[10px] text-slate-500 font-mono">ID: #{awd.organisationId}</span>}
+                                </div>
+                              );
+                            })()}
                          </td>
                          <td className="py-3.5 px-4 text-slate-400">
-                            {awd.programmeName || `Programme #${awd.programmeId}`}
+                            {(() => {
+                              const prog = programmes.find((p) => String(p.id) === String(awd.programmeId));
+                              const progName = prog?.name || awd.programmeName || (awd.programmeId ? `Programme #${awd.programmeId}` : '—');
+                              return (
+                                <div>
+                                  <span className="text-slate-200 block">{progName}</span>
+                                  {awd.programmeId && <span className="text-[10px] text-slate-500 font-mono">Programme #{awd.programmeId}</span>}
+                                </div>
+                              );
+                            })()}
                          </td>
                          <td className="py-3.5 px-4 text-right font-mono font-bold text-white text-xs">
                            {formatZAR(awd.amount)}
@@ -919,10 +961,10 @@ export const GrantsPage: React.FC = () => {
                            {Number(awd.status) === ApprovalStatus.Approved ? (
                              <span
                                className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-400 bg-emerald-500/10 px-2.5 py-1.5 rounded-lg border border-emerald-500/20 cursor-default"
-                                title="Approved award is immutable. Details cannot be modified."
+                                title="Approved award details cannot be modified."
                              >
                                <Lock className="w-3 h-3 text-emerald-400" />
-                                <span>Approved (Immutable)</span>
+                                <span>Approved</span>
                              </span>
                            ) : (
                              <button
@@ -973,8 +1015,10 @@ export const GrantsPage: React.FC = () => {
            <div className="flex items-center gap-2 self-end sm:self-center">
              <button
                type="button"
-                onClick={() => {
-                  refetchBudgets();
+                onClick={async () => {
+                  bumpMutationEpoch();
+                  await queryClient.invalidateQueries({ queryKey: ['budgets'] });
+                  await refetchBudgets();
                  success('Refreshed', 'Budget line categories refreshed from API.');
                }}
                disabled={isFetchingBudgets}
@@ -1004,7 +1048,7 @@ export const GrantsPage: React.FC = () => {
                      Budget Line Category
                    </SortableTh>
                    <SortableTh column="projectId" currentColumn={budgetSortCol} direction={budgetSortDir} onSort={handleBudgetSort} className="py-3.5 px-4">
-                      Project ID
+                      Project
                    </SortableTh>
                    <SortableTh column="amount" currentColumn={budgetSortCol} direction={budgetSortDir} onSort={handleBudgetSort} align="right" className="py-3.5 px-4 text-right">
                      Approved Amount (ZAR)
@@ -1043,7 +1087,18 @@ export const GrantsPage: React.FC = () => {
                            <span className="font-semibold text-white block">{b.name}</span>
                            <span className="text-[10px] text-slate-500 font-mono">ID: #{b.id}</span>
                          </td>
-                          <td className="py-3.5 px-4 text-slate-400 font-mono">Project #{b.projectId}</td>
+                          <td className="py-3.5 px-4 text-slate-200">
+                            {(() => {
+                              const proj = projects.find((p) => String(p.id) === String(b.projectId));
+                              const projName = proj?.name || `Project #${b.projectId}`;
+                              return (
+                                <div>
+                                  <span className="font-medium text-white block">{projName}</span>
+                                  <span className="text-[10px] text-slate-500 font-mono">ID: #{b.projectId}</span>
+                                </div>
+                              );
+                            })()}
+                          </td>
                          <td className="py-3.5 px-4 text-right font-mono font-bold text-white">
                            {formatZAR(b.amount)}
                          </td>
@@ -1059,10 +1114,10 @@ export const GrantsPage: React.FC = () => {
                              {Number(b.status) === ApprovalStatus.Approved ? (
                                <span
                                  className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-400 bg-emerald-500/10 px-2.5 py-1.5 rounded-lg border border-emerald-500/20 cursor-default"
-                                  title="Approved budget is immutable. Status cannot be modified."
+                                  title="Approved budget status cannot be modified."
                                >
                                  <Lock className="w-3 h-3 text-emerald-400" />
-                                  <span>Approved (Immutable)</span>
+                                  <span>Approved</span>
                                </span>
                              ) : (
                                <>
@@ -1133,8 +1188,10 @@ export const GrantsPage: React.FC = () => {
            <div className="flex items-center gap-2 self-end sm:self-center">
              <button
                type="button"
-                onClick={() => {
-                  refetchDisbursements();
+                onClick={async () => {
+                  bumpMutationEpoch();
+                  await queryClient.invalidateQueries({ queryKey: ['disbursements'] });
+                  await refetchDisbursements();
                  success('Refreshed', 'Disbursement tranches refreshed from API.');
                }}
                disabled={isFetchingDisbursements}
@@ -1172,7 +1229,7 @@ export const GrantsPage: React.FC = () => {
                      Disbursement ID
                    </SortableTh>
                    <SortableTh column="projectId" currentColumn={disbSortCol} direction={disbSortDir} onSort={handleDisbSort} className="py-3.5 px-4">
-                      Project ID
+                      Project
                    </SortableTh>
                    <SortableTh column="milestoneId" currentColumn={disbSortCol} direction={disbSortDir} onSort={handleDisbSort} className="py-3.5 px-4">
                      Milestone Association
@@ -1211,9 +1268,32 @@ export const GrantsPage: React.FC = () => {
                          <td className="py-3.5 px-5 font-mono font-bold text-white">
                            DSB-{d.id}
                          </td>
-                          <td className="py-3.5 px-4 text-slate-300 font-mono">Project #{d.projectId}</td>
+                          <td className="py-3.5 px-4 text-slate-200">
+                            {(() => {
+                              const proj = projects.find((p) => String(p.id) === String(d.projectId));
+                              const projName = proj?.name || `Project #${d.projectId}`;
+                              return (
+                                <div>
+                                  <span className="font-medium text-white block">{projName}</span>
+                                  <span className="text-[10px] text-slate-500 font-mono">Project ID: #{d.projectId}</span>
+                                </div>
+                              );
+                            })()}
+                          </td>
                          <td className="py-3.5 px-4 text-slate-400 font-medium">
-                            {d.milestoneId ? `Milestone #${d.milestoneId}` : 'Initial Advance Tranche'}
+                            {(() => {
+                              if (!d.milestoneId) {
+                                return <span className="text-slate-400 italic">Initial Advance Tranche</span>;
+                              }
+                              const ms = milestones.find((m) => String(m.id) === String(d.milestoneId));
+                              const msName = ms?.name || `Milestone #${d.milestoneId}`;
+                              return (
+                                <div>
+                                  <span className="font-medium block">{msName}</span>
+                                  <span className="text-[10px] text-slate-500 font-mono">Milestone ID: #{d.milestoneId}</span>
+                                </div>
+                              );
+                            })()}
                          </td>
                          <td className="py-3.5 px-4 text-right font-mono font-bold text-white text-xs">
                            {formatZAR(d.amount)}
@@ -1549,7 +1629,14 @@ export const GrantsPage: React.FC = () => {
          onSubmit={editAwardForm.handleSubmit((values) => {
            if (!editingAward) return;
            if (Number(editingAward.status) === ApprovalStatus.Approved) {
-              toastError('Record Immutable', 'Approved awards cannot be modified.');
+              toastError('Record Approved', 'Approved awards cannot be modified.');
+              return;
+            }
+            if (
+              selectedAwardStatus === ApprovalStatus.Approved &&
+              !canApproveRecord('grant_financials', editingAward.createdBy)
+            ) {
+              toastError('Maker-Checker Violation', 'Record creators cannot approve their own award records.');
              return;
            }
            updateAwardMutation.mutate({
@@ -1630,7 +1717,7 @@ export const GrantsPage: React.FC = () => {
            {Number(editingAward?.status) === ApprovalStatus.Approved ? (
              <div className="w-full px-3 py-2 text-xs border border-emerald-500/30 bg-emerald-500/10 rounded-xl text-emerald-300 font-semibold flex items-center gap-1.5 cursor-default">
                <Lock className="w-3.5 h-3.5 text-emerald-400" />
-                <span>Approved (Immutable - Cannot Be Changed)</span>
+                <span>Approved</span>
              </div>
            ) : (
              <select
@@ -1640,7 +1727,21 @@ export const GrantsPage: React.FC = () => {
              >
                <option value={ApprovalStatus.Pending}>Pending Approval</option>
                <option value={ApprovalStatus.Review}>Under Review</option>
-                <option value={ApprovalStatus.Approved}>Approved &amp; Activated</option>
+                {(() => {
+                  const canApproveAwd = canApproveRecord('grant_financials', editingAward?.createdBy);
+                  const isSelf = isMaker(editingAward?.createdBy);
+                  let reason = '';
+                  if (!canApprove('grant_financials')) {
+                    reason = ' (Requires Update Permission)';
+                  } else if (isSelf) {
+                    reason = ' (Maker-Checker: Cannot approve own record)';
+                  }
+                  return (
+                    <option value={ApprovalStatus.Approved} disabled={!canApproveAwd}>
+                      Approved &amp; Activated {reason}
+                    </option>
+                  );
+                })()}
                <option value={ApprovalStatus.Rejected}>Rejected</option>
              </select>
            )}
@@ -1783,7 +1884,7 @@ export const GrantsPage: React.FC = () => {
            {Number(editingBudget?.status) === ApprovalStatus.Approved ? (
              <div className="w-full px-3 py-2 text-xs border border-emerald-500/30 bg-emerald-500/10 rounded-xl text-emerald-300 font-semibold flex items-center gap-1.5 cursor-default">
                <Lock className="w-3.5 h-3.5 text-emerald-400" />
-                <span>Approved (Immutable - Status Cannot Be Changed)</span>
+                <span>Approved</span>
              </div>
            ) : (
              <select
@@ -42,7 +42,6 @@ export const InboxPage: React.FC = () => {
  const { data: directoryUsers = [] } = useQuery<User[]>({
    queryKey: ['users-directory'],
    queryFn: () => getUsers(1, 200),
-    staleTime: 5 * 60 * 1000,
  });

  const {
@@ -149,7 +148,11 @@ export const InboxPage: React.FC = () => {
        }
      }
    } else if (!selectedMessage && folderMessages.length > 0 && activeFolder !== 'drafts') {
-      setSelectedMessage(folderMessages[0]);
+      const first = folderMessages[0];
+      setSelectedMessage(first);
+      if (activeFolder === 'inbox' && Number(first.status) !== NotificationStatus.Read) {
+        markAsRead(first.id);
+      }
    }
  }, [targetIdParam, folderMessages, activeFolder]);

@@ -666,6 +669,22 @@ export const InboxPage: React.FC = () => {
                        >
                          <Star className={`w-3.5 h-3.5 ${isStarred ? 'fill-amber-400' : ''}`} />
                        </button>
+
+                        <button
+                          type="button"
+                          onClick={e => {
+                            e.stopPropagation();
+                            deleteMessage(item.id);
+                            if (selectedMessage?.id === item.id) {
+                              setSelectedMessage(null);
+                            }
+                          }}
+                          className="p-0.5 rounded text-slate-400 hover:text-rose-400 transition cursor-pointer"
+                          title="Delete message (Archive)"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+
                        <span className="text-[10px] text-slate-400 font-mono">
                          {formatDate(item.createdAt)}
                        </span>
@@ -42,6 +42,7 @@ import {
  recordIndicatorActual,
  getBudgets,
  getActivities,
+  getDisbursements,
 } from '../services/api';
 import { Modal } from '../components/ui/Modal';
 import { HelpTooltip } from '../components/ui/HelpTooltip';
@@ -242,6 +243,11 @@ export const ProjectsPage: React.FC = () => {
    queryFn: () => getBudgets(1, 100),
  });

+  const { data: allDisbursements = [] } = useQuery({
+    queryKey: ['disbursements'],
+    queryFn: () => getDisbursements(1, 200),
+  });
+
  const { data: allProjectActivities = new Map<string | number, any[]>() } = useQuery({
    queryKey: ['allProjectActivities', projects.map((p) => p.id)],
    queryFn: async () => {
@@ -311,6 +317,18 @@ export const ProjectsPage: React.FC = () => {
    return map;
  }, [allBudgets]);

+  // Disbursed capital per project
+  const disbursedByProject = useMemo(() => {
+    const map = new Map<string | number, number>();
+    allDisbursements.forEach((d) => {
+      if (Number(d.status) === ApprovalStatus.Approved || Number(d.status) === 3) {
+        const current = map.get(d.projectId) || 0;
+        map.set(d.projectId, current + (Number(d.amount) || 0));
+      }
+    });
+    return map;
+  }, [allDisbursements]);
+
  // Filtered Projects
  const filteredProjects = useMemo(() => {
    return projects.filter((p) => {
@@ -380,9 +398,22 @@ export const ProjectsPage: React.FC = () => {
        return amt > 0 ? formatZAR(amt) : 'R 0';
      },
    },
+    {
+      header: 'Project Variance (ZAR)',
+      key: 'id',
+      format: (_, p) => {
+        const approvedBudget = approvedBudgetsByProject.get(p.id) || 0;
+        const pActs = allProjectActivities.get(p.id) || [];
+        const pActsTotal = pActs.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
+        const pDisbursedTotal = disbursedByProject.get(p.id) || 0;
+        const projectValue = pActsTotal - pDisbursedTotal;
+        const pVariance = approvedBudget - projectValue;
+        return `${pVariance >= 0 ? '+' : ''}${formatZAR(pVariance)}`;
+      },
+    },
    { header: 'Approval Status', key: 'status', format: (val) => getApprovalStatusBadge(val).label },
    { header: 'Created By', key: 'createdBy', format: (val) => getUserEmail(val) },
-  ], [programmeMap, milestonesByProject, approvedBudgetsByProject]);
+  ], [programmeMap, milestonesByProject, approvedBudgetsByProject, allProjectActivities, disbursedByProject]);

  // Table Sorting
  const customExtractors = {
@@ -404,6 +435,14 @@ export const ProjectsPage: React.FC = () => {
      if (risk.isAtRisk) return 2;
      return 3;
    },
+    variance: (p: Project) => {
+      const approvedBudget = approvedBudgetsByProject.get(p.id) || 0;
+      const pActs = allProjectActivities.get(p.id) || [];
+      const pActsTotal = pActs.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
+      const pDisbursedTotal = disbursedByProject.get(p.id) || 0;
+      const projectValue = pActsTotal - pDisbursedTotal;
+      return approvedBudget - projectValue;
+    },
  };

  const { sortedData: sortedProjects, sortColumn, sortDirection, handleSort } = useTableSort(
@@ -1007,17 +1046,17 @@ export const ProjectsPage: React.FC = () => {
                    />
                  </div>
                </SortableTh>
-                <th className="py-3.5 px-4 text-right font-semibold whitespace-nowrap w-36">
+                <SortableTh column="variance" currentColumn={sortColumn} direction={sortDirection} onSort={handleSort} align="right" className="py-3.5 px-4 text-right whitespace-nowrap w-36">
                  <div className="flex items-center justify-end gap-1">
                    <span>Project Variance</span>
                    <HelpTooltip
                      title="Project Variance"
-                      content="Approved allocated budget minus scheduled milestone activity values. Positive (green) indicates within budget constraints; negative (red) indicates cost overrun."
+                      content="Approved allocated budget minus net project value (milestone activity commitments minus disbursements). Positive (green) indicates remaining budget headroom; negative (red) indicates cost overrun."
                      size="sm"
                      placement="bottom"
                    />
                  </div>
-                </th>
+                </SortableTh>
                <th className="py-3.5 px-4 text-right font-semibold whitespace-nowrap w-56">Actions</th>
              </tr>
            </thead>
@@ -1212,7 +1251,9 @@ export const ProjectsPage: React.FC = () => {
                          const approvedBudget = approvedBudgetsByProject.get(p.id) || 0;
                          const pActs = allProjectActivities.get(p.id) || [];
                          const pActsTotal = pActs.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
-                          const pVariance = approvedBudget - pActsTotal;
+                          const pDisbursedTotal = disbursedByProject.get(p.id) || 0;
+                          const projectValue = pActsTotal - pDisbursedTotal;
+                          const pVariance = approvedBudget - projectValue;
                          const isPos = pVariance >= 0;
                          return (
                            <td className="py-3.5 px-4 text-right whitespace-nowrap w-36 font-mono font-bold" onClick={(e) => e.stopPropagation()}>
@@ -1222,7 +1263,7 @@ export const ProjectsPage: React.FC = () => {
                                    ? 'text-emerald-400 bg-emerald-500/10 border-emerald-500/30'
                                    : 'text-rose-400 bg-rose-500/10 border-rose-500/30'
                                }`}
-                                title={`Approved Budget: ${formatZAR(approvedBudget)} | Milestone Activities: ${formatZAR(pActsTotal)} | Variance: ${isPos ? '+' : ''}${formatZAR(pVariance)}`}
+                                title={`Approved Budget: ${formatZAR(approvedBudget)} | Milestone Activities: ${formatZAR(pActsTotal)} | Disbursements: ${formatZAR(pDisbursedTotal)} | Project Value: ${formatZAR(projectValue)} | Variance: ${isPos ? '+' : ''}${formatZAR(pVariance)}`}
                              >
                                {isPos ? `+${formatZAR(pVariance)}` : `-${formatZAR(Math.abs(pVariance))}`}
                              </span>
@@ -57,6 +57,7 @@ import {
  getOrganisations,
  getAwards,
  getContracts,
+  getProjects,
  getAuditLogs,
  getNotifications,
  notifyInviteApproved,
@@ -79,6 +80,8 @@ import {
  NotificationStatus,
  NotificationPlatform,
  ActivityStatus,
+  ApprovalStatus,
+  ContractStatus,
  User,
  Invite,
  InviteRequest,
@@ -110,7 +113,7 @@ export const SettingsPage: React.FC = () => {

  const [activeTab, setActiveTab] = useState<'users' | 'invites' | 'notifications' | 'audit'>('users');

-  const { canView, canAdd, canExport } = useRbac();
+  const { canView, canAdd, canExport, canApproveRecord, isMaker } = useRbac();
  const canViewUsers = canView('settings_users') || canView('tenant_self_service');
  const canViewInvites = canView('settings_invites');
  const canViewNotifications = canView('settings_notifications');
@@ -152,7 +155,6 @@ export const SettingsPage: React.FC = () => {
  const { data: usersDirectory = [] } = useQuery({
    queryKey: ['users-directory'],
    queryFn: () => getUsers(1, 200),
-    staleTime: 5 * 60 * 1000,
  });

  const {
@@ -241,6 +243,7 @@ export const SettingsPage: React.FC = () => {
  const [invitedOrgId, setInvitedOrgId] = useState<string | number>('');
  const [inviteAwardId, setInviteAwardId] = useState<string | number>('');
  const [inviteContractId, setInviteContractId] = useState<string | number>('');
+  const [inviteProjectId, setInviteProjectId] = useState<string | number>('');
  const [inviteRecipientUuid, setInviteRecipientUuid] = useState('');
  const [inviteMessage, setInviteMessage] = useState('');
  const [invitePlatform, setInvitePlatform] = useState<NotificationPlatform>(NotificationPlatform.Email);
@@ -253,6 +256,10 @@ export const SettingsPage: React.FC = () => {
  );

  const handleApproveInvite = async (inv: Invite, idx: number) => {
+    if (isMaker(inv.createdBy)) {
+      toastError('Maker-Checker Violation', 'You cannot approve an invitation that you created.');
+      return;
+    }
    const inviteKey = inv.id ? String(inv.id) : `inv_${idx}`;
    markInviteAsApprovedInStorage(inviteKey, currentTenantId);
    setApprovedInviteIds((prev) => (prev.includes(inviteKey) ? prev : [...prev, inviteKey]));
@@ -270,32 +277,6 @@ export const SettingsPage: React.FC = () => {
    );
  };

-  // Invites filtering & search
-  const [inviteSearchTerm, setInviteSearchTerm] = useState('');
-  const [invitePlatformFilter, setInvitePlatformFilter] = useState<'all' | number>('all');
-
-  const {
-    data: invitesList = [],
-    isLoading: loadingInvites,
-    isFetching: isFetchingInvites,
-    refetch: refetchInvites,
-  } = useQuery({
-    queryKey: ['invites'],
-    queryFn: () => getInvites(1, 100),
-  });
-
-  const filteredInvites = useMemo(() => {
-    return invitesList.filter((inv) => {
-      const matchSearch =
-        !inviteSearchTerm.trim() ||
-        (inv.recipient && inv.recipient.toLowerCase().includes(inviteSearchTerm.toLowerCase())) ||
-        (inv.message && inv.message.toLowerCase().includes(inviteSearchTerm.toLowerCase()));
-      const matchPlatform =
-        invitePlatformFilter === 'all' || Number(inv.platform) === Number(invitePlatformFilter);
-      return matchSearch && matchPlatform;
-    });
-  }, [invitesList, inviteSearchTerm, invitePlatformFilter]);
-
  const { data: organisations = [] } = useQuery({
    queryKey: ['organisations'],
    queryFn: () => getOrganisations(1, 50),
@@ -311,6 +292,104 @@ export const SettingsPage: React.FC = () => {
    queryFn: () => getContracts(1, 50),
  });

+  const { data: projects = [] } = useQuery({
+    queryKey: ['projects'],
+    queryFn: () => getProjects(1, 100),
+  });
+
+  // Only awards that are Approved AND have an Approved/Active contract are eligible for invitations
+  const eligibleAwards = useMemo(() => {
+    return awards.filter((aw) => {
+      const isApprovedAward = Number(aw.status) === ApprovalStatus.Approved;
+      if (!isApprovedAward) return false;
+      const hasApprovedContract = contracts.some(
+        (c) =>
+          String(c.awardId) === String(aw.id) &&
+          (Number(c.status) === ContractStatus.Active || Number(c.status) === ContractStatus.Executed)
+      );
+      return hasApprovedContract;
+    });
+  }, [awards, contracts]);
+
+  const handleSelectAward = (awardId: string | number) => {
+    setInviteAwardId(awardId);
+    const selected = eligibleAwards.find((a) => String(a.id) === String(awardId));
+    if (selected) {
+      setInvitedOrgId(selected.organisationId);
+      const matchingContract = contracts.find(
+        (c) =>
+          String(c.awardId) === String(selected.id) &&
+          (Number(c.status) === ContractStatus.Active || Number(c.status) === ContractStatus.Executed)
+      );
+      if (matchingContract) {
+        setInviteContractId(matchingContract.id);
+      }
+      setInviteProjectId(selected.projectId || '');
+    }
+  };
+
+  React.useEffect(() => {
+    if (isSendInviteModalOpen) {
+      if (eligibleAwards.length > 0) {
+        const currentAward =
+          eligibleAwards.find((a) => String(a.id) === String(inviteAwardId)) || eligibleAwards[0];
+        setInviteAwardId(currentAward.id);
+        setInvitedOrgId(currentAward.organisationId);
+        const matchingContract = contracts.find(
+          (c) =>
+            String(c.awardId) === String(currentAward.id) &&
+            (Number(c.status) === ContractStatus.Active || Number(c.status) === ContractStatus.Executed)
+        );
+        if (matchingContract) {
+          setInviteContractId(matchingContract.id);
+        }
+        setInviteProjectId(currentAward.projectId || '');
+      } else {
+        setInviteAwardId('');
+        setInvitedOrgId('');
+        setInviteContractId('');
+        setInviteProjectId('');
+      }
+    }
+  }, [isSendInviteModalOpen, eligibleAwards, contracts]);
+
+  // Invites filtering & search
+  const [inviteSearchTerm, setInviteSearchTerm] = useState('');
+  const [invitePlatformFilter, setInvitePlatformFilter] = useState<'all' | number>('all');
+
+  const {
+    data: invitesList = [],
+    isLoading: loadingInvites,
+    isFetching: isFetchingInvites,
+    refetch: refetchInvites,
+  } = useQuery({
+    queryKey: ['invites'],
+    queryFn: () => getInvites(1, 100),
+  });
+
+  const getStoredInvitePlatform = (inviteId?: string | number): NotificationPlatform | undefined => {
+    if (!inviteId) return undefined;
+    try {
+      const raw = localStorage.getItem(`pfm_invite_platform_${inviteId}`);
+      return raw !== null ? (Number(raw) as NotificationPlatform) : undefined;
+    } catch {
+      return undefined;
+    }
+  };
+
+  const storeInvitePlatform = (inviteId: string | number, platform: NotificationPlatform) => {
+    try {
+      localStorage.setItem(`pfm_invite_platform_${inviteId}`, String(platform));
+    } catch {}
+  };
+
+  const resolveUserEmail = (userIdOrUuid?: string | null): string => {
+    if (!userIdOrUuid) return '—';
+    const u = usersDirectory.find((usr) => String(usr.id).toLowerCase() === String(userIdOrUuid).toLowerCase());
+    const email = u?.email || getUserEmail(userIdOrUuid);
+    return email && email !== '—' ? email : String(userIdOrUuid);
+  };
+
  const sendInviteMutation = useMutation({
    mutationFn: (payload: InviteRequest) => sendInvite(payload),
    onSuccess: (data, variables) => {
@@ -320,8 +399,10 @@ export const SettingsPage: React.FC = () => {
      setInviteRecipientUuid('');
      setInviteMessage('');

-      if (inviteAutoApprove) {
      const invId = (data as any)?.id ? String((data as any).id) : `inv_${Date.now()}`;
+      storeInvitePlatform(invId, variables.platform);
+
+      if (inviteAutoApprove) {
        markInviteAsApprovedInStorage(invId, currentTenantId);
        setApprovedInviteIds((prev) => (prev.includes(invId) ? prev : [...prev, invId]));

@@ -333,6 +414,7 @@ export const SettingsPage: React.FC = () => {
            organisationId: variables.organisationId,
            awardId: variables.awardId,
            contractId: variables.contractId,
+            projectId: variables.projectId,
            message: variables.message,
          },
        }).then(() => {
@@ -418,6 +500,38 @@ export const SettingsPage: React.FC = () => {
    handleSort: handleNotifSort,
  } = useTableSort(filteredNotifications, 'createdAt', 'desc');

+  const resolveInvitePlatform = (inv: Invite): NotificationPlatform => {
+    if (inv.platform !== undefined && inv.platform !== null) {
+      return Number(inv.platform) as NotificationPlatform;
+    }
+    const stored = getStoredInvitePlatform(inv.id);
+    if (stored !== undefined) return stored;
+
+    const linkedNotif = fetchedNotifications.find(
+      (n) =>
+        (inv.recipient && n.recipient?.toLowerCase() === inv.recipient?.toLowerCase()) ||
+        (inv.invitedOrganisationId && String(n.organisationId) === String(inv.invitedOrganisationId))
+    );
+    if (linkedNotif?.platform !== undefined && linkedNotif.platform !== null) {
+      return Number(linkedNotif.platform) as NotificationPlatform;
+    }
+    return NotificationPlatform.Email;
+  };
+
+  const filteredInvites = useMemo(() => {
+    return invitesList.filter((inv) => {
+      const recipientEmail = resolveUserEmail(inv.recipient).toLowerCase();
+      const matchSearch =
+        !inviteSearchTerm.trim() ||
+        (inv.recipient && inv.recipient.toLowerCase().includes(inviteSearchTerm.toLowerCase())) ||
+        recipientEmail.includes(inviteSearchTerm.toLowerCase());
+      const resolvedPlatform = resolveInvitePlatform(inv);
+      const matchPlatform =
+        invitePlatformFilter === 'all' || Number(resolvedPlatform) === Number(invitePlatformFilter);
+      return matchSearch && matchPlatform;
+    });
+  }, [invitesList, inviteSearchTerm, invitePlatformFilter, fetchedNotifications, usersDirectory]);
+
  // ==========================================
  // 4. Audit Log Ledger State
  // ==========================================
@@ -486,9 +600,22 @@ export const SettingsPage: React.FC = () => {
    {
      header: 'Changes / Arguments',
      key: 'changes',
-      format: (val) => (Array.isArray(val) ? val.join('; ') : val || '—'),
+      format: (val) => {
+        if (!val) return '—';
+        let str = Array.isArray(val) ? val.join('; ') : typeof val === 'object' ? JSON.stringify(val) : String(val);
+        str = str.replace(/\r\n|\r|\n/g, ' ').replace(/\s{2,}/g, ' ').trim();
+        return str.length > 250 ? `${str.slice(0, 247)}...` : str;
+      },
+    },
+    {
+      header: 'Error Details',
+      key: 'error',
+      format: (val) => {
+        if (!val) return '—';
+        let str = String(val).replace(/\r\n|\r|\n/g, ' ').replace(/\s{2,}/g, ' ').trim();
+        return str.length > 250 ? `${str.slice(0, 247)}...` : str;
+      },
    },
-    { header: 'Error Details', key: 'error', format: (val) => val || '—' },
  ];

  const uniqueAuditEntities = Array.from(
@@ -558,13 +685,25 @@ export const SettingsPage: React.FC = () => {
  ];

  const inviteExportColumns: ExportColumn<Invite>[] = [
-    { header: 'Recipient (UUID)', key: 'recipient' },
-    { header: 'Channel / Platform', key: 'platform', format: (val) => getNotificationPlatformLabel(val) },
-    { header: 'Invitation Message', key: 'message' },
+    {
+      header: 'Recipient Email',
+      key: 'recipient',
+      format: (val) => resolveUserEmail(val),
+    },
+    {
+      header: 'Channel / Platform',
+      key: 'platform',
+      format: (_val, inv) => getNotificationPlatformLabel(resolveInvitePlatform(inv)),
+    },
    {
      header: 'Target Organisation / Grant',
      key: 'invitedOrganisationId',
-      format: (val, inv) => `Org #${val || inv.organisationId || '—'} (Award #${inv.awardId || '—'})`,
+      format: (val, inv) => {
+        const orgId = val || inv.organisationId;
+        const org = organisations.find((o) => String(o.id) === String(orgId));
+        const orgName = org?.name || `Organisation #${orgId || '—'}`;
+        return `${orgName} • Award #${inv.awardId || '—'}`;
+      },
    },
    { header: 'Date Dispatched', key: 'createdAt', format: (val) => (val ? formatDate(val) : '—') },
  ];
@@ -590,7 +729,15 @@ export const SettingsPage: React.FC = () => {
    sortColumn: inviteSortCol,
    sortDirection: inviteSortDir,
    handleSort: handleInviteSort,
-  } = useTableSort(filteredInvites, 'createdAt', 'desc');
+  } = useTableSort(filteredInvites, 'createdAt', 'desc', {
+    recipient: (inv: Invite) => resolveUserEmail(inv.recipient),
+    platform: (inv: Invite) => getNotificationPlatformLabel(resolveInvitePlatform(inv)),
+    invitedOrganisationId: (inv: Invite) => {
+      const orgId = inv.invitedOrganisationId || inv.organisationId;
+      const org = organisations.find((o) => String(o.id) === String(orgId));
+      return org?.name || `Organisation #${orgId || ''}`;
+    },
+  });

  const getActionBadge = (action?: string | null) => {
    const act = (action || 'GENERAL_EVENT').toUpperCase();
@@ -1181,14 +1328,11 @@ export const SettingsPage: React.FC = () => {
                <thead>
                  <tr className="bg-slate-900/60 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold">
                    <SortableTh column="recipient" currentColumn={inviteSortCol} direction={inviteSortDir} onSort={handleInviteSort} className="py-3.5 px-5">
-                      Recipient (UUID)
+                      Recipient Email
                    </SortableTh>
                    <SortableTh column="platform" currentColumn={inviteSortCol} direction={inviteSortDir} onSort={handleInviteSort} className="py-3.5 px-4">
                      Channel
                    </SortableTh>
-                    <SortableTh column="message" currentColumn={inviteSortCol} direction={inviteSortDir} onSort={handleInviteSort} className="py-3.5 px-4">
-                      Message
-                    </SortableTh>
                    <SortableTh column="invitedOrganisationId" currentColumn={inviteSortCol} direction={inviteSortDir} onSort={handleInviteSort} className="py-3.5 px-4">
                      Target Org / Grant
                    </SortableTh>
@@ -1206,13 +1350,13 @@ export const SettingsPage: React.FC = () => {
                <tbody className="divide-y divide-slate-800/50">
                  {loadingInvites ? (
                    <tr>
-                      <td colSpan={7} className="py-8 text-center text-slate-500">
+                      <td colSpan={6} className="py-8 text-center text-slate-500">
                        Loading invitations ledger...
                      </td>
                    </tr>
                  ) : sortedInvites.length === 0 ? (
                    <tr>
-                      <td colSpan={7} className="py-8 text-center text-slate-500">
+                      <td colSpan={6} className="py-8 text-center text-slate-500">
                        No invitations recorded yet. Use &ldquo;Dispatch Invitation&rdquo; to send one.
                      </td>
                    </tr>
@@ -1222,22 +1366,34 @@ export const SettingsPage: React.FC = () => {
                        approvedInviteIds.includes(String(inv.id)) ||
                        approvedInviteIds.includes(`inv_${idx}`) ||
                        approvedInviteIds.includes(String(idx));
+                      const resolvedPlatform = resolveInvitePlatform(inv);
+                      const userEmail = resolveUserEmail(inv.recipient);
+                      const orgId = inv.invitedOrganisationId || inv.organisationId;
+                      const org = organisations.find((o) => String(o.id) === String(orgId));
+                      const orgName = org?.name || `Organisation #${orgId || '—'}`;
+                      const isCreator = isMaker(inv.createdBy);

                      return (
                        <tr key={idx} className="hover:bg-slate-800/40 transition-colors">
-                          <td className="py-3.5 px-5 font-mono text-slate-300 text-[11px]">
+                          <td className="py-3.5 px-5 text-slate-200 text-xs">
+                            <div className="font-medium text-white flex items-center gap-1.5">
+                              <Mail className="w-3.5 h-3.5 text-blue-400 shrink-0" />
+                              <span className="truncate">{userEmail}</span>
+                            </div>
+                            <div className="font-mono text-slate-500 text-[10px] truncate max-w-xs mt-0.5">
                              {inv.recipient}
+                            </div>
                          </td>
                          <td className="py-3.5 px-4">
                            <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-blue-500/10 text-blue-400 border border-blue-500/20">
-                              {getNotificationPlatformLabel(inv.platform)}
+                              {getNotificationPlatformLabel(resolvedPlatform)}
                            </span>
                          </td>
-                          <td className="py-3.5 px-4 text-white font-medium max-w-xs truncate">
-                            {inv.message}
-                          </td>
-                          <td className="py-3.5 px-4 text-slate-400 text-[11px]">
-                            Org #{inv.invitedOrganisationId || inv.organisationId} &bull; Award #{inv.awardId}
+                          <td className="py-3.5 px-4 text-slate-300 text-xs">
+                            <div className="font-medium text-white">{orgName}</div>
+                            <div className="text-slate-400 text-[11px] mt-0.5">
+                              Award #{inv.awardId || '—'}
+                            </div>
                          </td>
                          <td className="py-3.5 px-4">
                            {isApproved ? (
@@ -1261,7 +1417,7 @@ export const SettingsPage: React.FC = () => {
                                <Check className="w-3 h-3" />
                                Partner Notified
                              </span>
-                            ) : (
+                            ) : canApproveRecord('settings_invites', inv.createdBy) ? (
                              <button
                                type="button"
                                onClick={() => handleApproveInvite(inv, idx)}
@@ -1271,6 +1427,17 @@ export const SettingsPage: React.FC = () => {
                                <Check className="w-3 h-3" />
                                <span>Approve</span>
                              </button>
+                            ) : isCreator ? (
+                              <span
+                                className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold bg-amber-500/10 text-amber-400 border border-amber-500/20"
+                                title="Maker-Checker: You created this invite and cannot approve it"
+                              >
+                                Maker (Creator)
+                              </span>
+                            ) : (
+                              <span className="text-[11px] text-slate-500">
+                                Pending Review
+                              </span>
                            )}
                          </td>
                        </tr>
@@ -2491,15 +2658,20 @@ export const SettingsPage: React.FC = () => {
        <form
          onSubmit={(e) => {
            e.preventDefault();
+            if (!inviteAwardId) {
+              toastError('Policy Violation', 'An approved award with an approved contract must be selected.');
+              return;
+            }
            if (!inviteRecipientUuid || !inviteMessage) {
-              toastError('Validation Error', 'Recipient UUID and message content are mandatory.');
+              toastError('Validation Error', 'Recipient identifier and message content are mandatory.');
              return;
            }
            sendInviteMutation.mutate({
              organisationId: inviteOrgId || (organisations[0]?.id ? Number(organisations[0].id) : 101),
              invitedOrganisationId: invitedOrgId || (organisations[1]?.id ? Number(organisations[1].id) : 102),
-              awardId: inviteAwardId || (awards[0]?.id ? Number(awards[0].id) : 301),
-              contractId: inviteContractId || (contracts[0]?.id ? Number(contracts[0].id) : 401),
+              awardId: inviteAwardId,
+              contractId: inviteContractId,
+              projectId: inviteProjectId || 0,
              recipient: inviteRecipientUuid,
              message: inviteMessage,
              platform: invitePlatform,
@@ -2507,18 +2679,51 @@ export const SettingsPage: React.FC = () => {
          }}
          className="space-y-4"
        >
+          {eligibleAwards.length === 0 ? (
+            <div className="p-3.5 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-300 text-xs flex items-start gap-2.5">
+              <RotateCcw className="w-4 h-4 shrink-0 text-amber-400 mt-0.5" />
              <div>
-            <div className="flex items-center gap-1 mb-1.5">
+                <span className="font-semibold block text-white">No Approved Awards Eligible for Invitation</span>
+                <span className="text-[11px] text-amber-300/90 leading-relaxed block mt-0.5">
+                  System governance policy strictly requires that invitations may only be dispatched for awards that have been formally <strong>Approved</strong> and whose associated contract is <strong>Approved &amp; Active</strong>.
+                </span>
+              </div>
+            </div>
+          ) : null}
+
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1">
                <label className="block text-xs font-semibold text-slate-300">
-                Recipient User UUID *
+                  Recipient User *
                </label>
                <HelpTooltip
-                title="Recipient UUID"
-                content="Unique directory user identifier or email for targeted delivery."
+                  title="Recipient Directory Identifier"
+                  content="Select a registered recipient user from directory or enter their unique user UUID."
                  size="sm"
                  placement="right"
                />
              </div>
+              {usersDirectory.length > 0 && (
+                <span className="text-[10px] text-slate-400">Quick-select from registered users</span>
+              )}
+            </div>
+            {usersDirectory.length > 0 && (
+              <select
+                value={usersDirectory.some((u) => String(u.id).toLowerCase() === inviteRecipientUuid.toLowerCase()) ? inviteRecipientUuid : ''}
+                onChange={(e) => {
+                  if (e.target.value) setInviteRecipientUuid(e.target.value);
+                }}
+                className="w-full px-3 py-2 text-xs bg-slate-900/80 border border-slate-700/80 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 [&>option]:bg-slate-900 [&>option]:text-white mb-1"
+              >
+                <option value="">-- Choose from Registered Users --</option>
+                {usersDirectory.map((u) => (
+                  <option key={u.id} value={u.id}>
+                    {u.name ? `${u.name} — ` : ''}{u.email} ({u.id})
+                  </option>
+                ))}
+              </select>
+            )}
            <input
              type="text"
              value={inviteRecipientUuid}
@@ -2529,6 +2734,98 @@ export const SettingsPage: React.FC = () => {
            />
          </div>

+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <div className="flex items-center gap-1 mb-1.5">
+                <label className="block text-xs font-semibold text-slate-300">
+                  Approved Award *
+                </label>
+                <HelpTooltip
+                  title="Approved Award Required"
+                  content="Only awards with status Approved and an Active/Approved contract are eligible for invitations."
+                  size="sm"
+                  placement="top"
+                />
+              </div>
+              <select
+                value={inviteAwardId}
+                onChange={(e) => handleSelectAward(e.target.value)}
+                disabled={eligibleAwards.length === 0}
+                className="w-full px-3 py-2 text-xs bg-slate-900/80 border border-slate-700/80 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 [&>option]:bg-slate-900 [&>option]:text-white disabled:opacity-50"
+                required
+              >
+                {eligibleAwards.length === 0 ? (
+                  <option value="">No approved awards available</option>
+                ) : (
+                  eligibleAwards.map((aw) => {
+                    const recipientOrg = organisations.find((o) => String(o.id) === String(aw.organisationId));
+                    return (
+                      <option key={aw.id} value={aw.id}>
+                        Award #{aw.id} — {recipientOrg?.name || `Org #${aw.organisationId}`}
+                      </option>
+                    );
+                  })
+                )}
+              </select>
+            </div>
+
+            <div>
+              <div className="flex items-center gap-1 mb-1.5">
+                <label className="block text-xs font-semibold text-slate-300">
+                  Approved Contract *
+                </label>
+                <HelpTooltip
+                  title="Associated Approved Contract"
+                  content="The active/approved contract linked to the selected award."
+                  size="sm"
+                  placement="top"
+                />
+              </div>
+              <input
+                type="text"
+                value={inviteContractId ? `Contract #${inviteContractId} (Approved & Active)` : 'No active contract'}
+                readOnly
+                className="w-full px-3 py-2 text-xs bg-slate-900/50 border border-slate-800 rounded-xl text-slate-300 font-mono focus:outline-none cursor-not-allowed"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <div className="flex items-center gap-1 mb-1.5">
+                <label className="block text-xs font-semibold text-slate-300">
+                  Target Organisation (Recipient Org)
+                </label>
+              </div>
+              <input
+                type="text"
+                value={(() => {
+                  const o = organisations.find((org) => String(org.id) === String(invitedOrgId));
+                  return o ? `${o.name} (#${o.id})` : invitedOrgId ? `Org #${invitedOrgId}` : '—';
+                })()}
+                readOnly
+                className="w-full px-3 py-2 text-xs bg-slate-900/50 border border-slate-800 rounded-xl text-slate-300 focus:outline-none cursor-not-allowed"
+              />
+            </div>
+
+            <div>
+              <div className="flex items-center gap-1 mb-1.5">
+                <label className="block text-xs font-semibold text-slate-300">
+                  Associated Project
+                </label>
+              </div>
+              <input
+                type="text"
+                value={(() => {
+                  const prj = projects.find((p) => String(p.id) === String(inviteProjectId));
+                  return prj ? `${prj.name || 'Project'} (#${prj.id})` : inviteProjectId ? `Project #${inviteProjectId}` : 'Initial Award Project';
+                })()}
+                readOnly
+                className="w-full px-3 py-2 text-xs bg-slate-900/50 border border-slate-800 rounded-xl text-slate-300 focus:outline-none cursor-not-allowed"
+              />
+            </div>
+          </div>
+
          <div className="grid grid-cols-2 gap-3">
            <div>
              <div className="flex items-center gap-1 mb-1.5">
@@ -2558,7 +2855,7 @@ export const SettingsPage: React.FC = () => {
            <div>
              <div className="flex items-center gap-1 mb-1.5">
                <label className="block text-xs font-semibold text-slate-300">
-                  Originating Organisation
+                  Originating Authority
                </label>
                <HelpTooltip
                  title="Inviting Authority"
@@ -2581,58 +2878,6 @@ export const SettingsPage: React.FC = () => {
            </div>
          </div>

-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <div className="flex items-center gap-1 mb-1.5">
-                <label className="block text-xs font-semibold text-slate-300">
-                  Associated Award
-                </label>
-                <HelpTooltip
-                  title="Linked Grant Award"
-                  content="Optional award attachment to link recipient permissions directly to grant administration."
-                  size="sm"
-                  placement="top"
-                />
-              </div>
-              <select
-                value={inviteAwardId}
-                onChange={(e) => setInviteAwardId(e.target.value)}
-                className="w-full px-3 py-2 text-xs bg-slate-900/80 border border-slate-700/80 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 [&>option]:bg-slate-900 [&>option]:text-white"
-              >
-                {awards.map((aw) => (
-                  <option key={aw.id} value={aw.id}>
-                    Award #{aw.id}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            <div>
-              <div className="flex items-center gap-1 mb-1.5">
-                <label className="block text-xs font-semibold text-slate-300">
-                  Associated Contract
-                </label>
-                <HelpTooltip
-                  title="Linked Contract"
-                  content="Optional bilateral agreement linking the recipient to contract execution."
-                  size="sm"
-                  placement="top"
-                />
-              </div>
-              <select
-                value={inviteContractId}
-                onChange={(e) => setInviteContractId(e.target.value)}
-                className="w-full px-3 py-2 text-xs bg-slate-900/80 border border-slate-700/80 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 [&>option]:bg-slate-900 [&>option]:text-white"
-              >
-                {contracts.map((ctr) => (
-                  <option key={ctr.id} value={ctr.id}>
-                    Contract #{ctr.id}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-
          <div>
            <div className="flex items-center gap-1 mb-1.5">
              <label className="block text-xs font-semibold text-slate-300">
@@ -2681,7 +2926,7 @@ export const SettingsPage: React.FC = () => {
            </button>
            <button
              type="submit"
-              disabled={sendInviteMutation.isPending}
+              disabled={sendInviteMutation.isPending || eligibleAwards.length === 0}
              className="px-4 py-2 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-500/20 transition disabled:opacity-50"
            >
              {sendInviteMutation.isPending ? 'Sending...' : 'Send Invitation'}
@@ -528,7 +528,7 @@ export const SiteVisitsPage: React.FC = () => {
                  title="Approved site visits are immutable."
                >
                  <Lock className="w-3.5 h-3.5 text-emerald-400" />
-                  <span>Approved &amp; Verified (Immutable - Cannot Be Changed)</span>
+                  <span>Approved &amp; Verified</span>
                </div>
              ) : (
                <select
@@ -68,14 +68,12 @@ const TenantOrganisationsSubList: React.FC<{ tenantId: number | string; tenantNa
  } = useQuery<TenantOrganisation[]>({
    queryKey: ['tenant-organisations', tenantId],
    queryFn: () => getTenantOrganisations(tenantId),
-    staleTime: 30000,
  });

  // Fetch tenant users directory to resolve linked user email per organisation
  const { data: tenantUsers = [] } = useQuery<TenantUser[]>({
    queryKey: ['tenant-users', tenantId],
    queryFn: () => getTenantUsers(tenantId),
-    staleTime: 5 * 60 * 1000,
  });

  React.useEffect(() => {
@@ -261,7 +259,6 @@ const TenantUsersSubList: React.FC<{
  const { data: tenantUsers = [], isLoading, refetch } = useQuery<TenantUser[]>({
    queryKey: ['tenant-users', tenantId],
    queryFn: () => getTenantUsers(tenantId),
-    staleTime: 30000,
  });

  const { canAdd } = useRbac();
@@ -460,7 +457,6 @@ export const TenantManagementPage: React.FC = () => {
  } = useQuery<Tenant[]>({
    queryKey: ['tenants-list'],
    queryFn: () => getTenants(),
-    staleTime: 30000,
  });

  // Forms
@@ -962,6 +958,7 @@ export const TenantManagementPage: React.FC = () => {
        isOpen={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        title="Provision New Tenant Partition"
+        subtitle="Define an isolated multi-tenant partition for grants, portfolios, and users."
        size="md"
      >
        <form
@@ -970,17 +967,6 @@ export const TenantManagementPage: React.FC = () => {
          )}
          className="space-y-4"
        >
-          <div className="p-3.5 rounded-xl bg-blue-950/20 border border-blue-800/30 text-xs text-blue-200 flex items-start gap-2.5">
-            <Info className="w-4 h-4 text-blue-400 shrink-0 mt-0.5" />
-            <div className="space-y-1 leading-relaxed">
-              <p className="font-semibold text-white">Multi-Tenant Partition Boundary</p>
-              <p>
-                Creating a new tenant defines an isolated partition boundary for grants, portfolios, projects, and users.
-                New tenants are automatically initialized in the Active state.
-              </p>
-            </div>
-          </div>
-
          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1.5">
              Tenant Organization Name <span className="text-rose-400">*</span>
@@ -1007,7 +993,7 @@ export const TenantManagementPage: React.FC = () => {
            <button
              type="submit"
              disabled={createMutation.isPending}
-              className="flex items-center gap-1.5 px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white text-xs font-semibold rounded-xl shadow-md transition disabled:opacity-50 cursor-pointer"
+              className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold rounded-xl shadow-md transition disabled:opacity-50 cursor-pointer"
            >
              {createMutation.isPending && <RefreshCw className="w-3.5 h-3.5 animate-spin" />}
              <span>{createMutation.isPending ? 'Provisioning...' : 'Create Tenant'}</span>
@@ -1021,6 +1007,7 @@ export const TenantManagementPage: React.FC = () => {
        isOpen={isUpdateModalOpen}
        onClose={() => setIsUpdateModalOpen(false)}
        title={`Update Tenant: ${selectedTenant?.name || ''}`}
+        subtitle="Modify tenant partition name and operational access status."
        size="md"
      >
        {selectedTenant && (
@@ -1064,13 +1051,12 @@ export const TenantManagementPage: React.FC = () => {

            {/* Warning when selecting Inactive or Disabled */}
            {Number(updateForm.watch('status')) !== ActivityStatus.Active && (
-              <div className="p-3 rounded-xl bg-amber-950/30 border border-amber-800/40 text-xs text-amber-200 flex items-start gap-2.5">
+              <div className="p-3 rounded-xl bg-amber-500/10 border border-amber-500/20 text-xs text-amber-200 flex items-start gap-2.5">
                <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
-                <div className="space-y-1">
-                  <p className="font-semibold text-white">Multitenancy Lockout Warning</p>
-                  <p className="text-[11px] leading-relaxed text-amber-300/90">
-                    Changing this tenant's status to Inactive or Disabled immediately locks out all users assigned to this partition.
-                    The backend API will deny requests until the tenant is restored to Active status.
+                <div className="space-y-0.5">
+                  <p className="font-semibold text-amber-300">Lockout Notice</p>
+                  <p className="text-[11px] text-amber-200/90 leading-relaxed">
+                    Setting this tenant to Inactive or Disabled immediately locks out assigned users from accessing the API.
                  </p>
                </div>
              </div>
@@ -1087,7 +1073,7 @@ export const TenantManagementPage: React.FC = () => {
              <button
                type="submit"
                disabled={updateMutation.isPending}
-                className="flex items-center gap-1.5 px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white text-xs font-semibold rounded-xl shadow-md transition disabled:opacity-50 cursor-pointer"
+                className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold rounded-xl shadow-md transition disabled:opacity-50 cursor-pointer"
              >
                {updateMutation.isPending && <RefreshCw className="w-3.5 h-3.5 animate-spin" />}
                <span>{updateMutation.isPending ? 'Saving...' : 'Update Tenant'}</span>
@@ -1102,66 +1088,47 @@ export const TenantManagementPage: React.FC = () => {
        isOpen={isDetailModalOpen}
        onClose={() => setIsDetailModalOpen(false)}
        title={`Tenant Details: ${selectedTenant?.name || ''}`}
+        subtitle="Partition boundary information, creation audit, and operational status."
        size="lg"
      >
        {selectedTenant && (
-          <div className="space-y-5">
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 bg-slate-950/60 p-4 rounded-xl border border-slate-800">
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 bg-slate-950/60 p-3.5 rounded-xl border border-slate-800 text-xs">
              <div>
-                <p className="text-[11px] text-slate-500 uppercase tracking-wider">Tenant Numeric ID</p>
+                <p className="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Tenant ID</p>
                <p className="text-sm font-bold text-white mt-0.5">#{selectedTenant.id}</p>
              </div>

              <div>
-                <p className="text-[11px] text-slate-500 uppercase tracking-wider">Tenant Name</p>
-                <p className="text-sm font-semibold text-slate-200 mt-0.5">{selectedTenant.name || '—'}</p>
+                <p className="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Tenant Name</p>
+                <p className="text-xs font-semibold text-slate-200 mt-0.5 truncate">{selectedTenant.name || '—'}</p>
              </div>

              <div>
-                <p className="text-[11px] text-slate-500 uppercase tracking-wider">Operational Status</p>
+                <p className="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Operational Status</p>
                <div className="mt-1">
                  <ActivityStatusBadge status={selectedTenant.status} />
                </div>
              </div>

              <div>
-                <p className="text-[11px] text-slate-500 uppercase tracking-wider">Created Date</p>
+                <p className="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Created Date</p>
                <p className="text-xs text-slate-300 mt-0.5">{formatDate(selectedTenant.createdAt)}</p>
              </div>

              <div>
-                <p className="text-[11px] text-slate-500 uppercase tracking-wider">Created By</p>
-                <p className="text-xs font-mono text-slate-300 mt-0.5">
+                <p className="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Created By</p>
+                <p className="text-xs font-mono text-slate-300 mt-0.5 truncate">
                  {getUserEmail(selectedTenant.createdBy) || selectedTenant.createdBy || 'System Admin'}
                </p>
              </div>

              {selectedTenant.updatedAt && (
                <div>
-                  <p className="text-[11px] text-slate-500 uppercase tracking-wider">Last Updated</p>
+                  <p className="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Last Updated</p>
                  <p className="text-xs text-slate-300 mt-0.5">{formatDate(selectedTenant.updatedAt)}</p>
                </div>
              )}
-
-              {selectedTenant.updatedBy && (
-                <div>
-                  <p className="text-[11px] text-slate-500 uppercase tracking-wider">Updated By</p>
-                  <p className="text-xs font-mono text-slate-300 mt-0.5">
-                    {getUserEmail(selectedTenant.updatedBy) || selectedTenant.updatedBy}
-                  </p>
-                </div>
-              )}
-            </div>
-
-            <div className="p-3.5 rounded-xl bg-slate-900/80 border border-slate-800 text-xs text-slate-300 space-y-2">
-              <p className="font-semibold text-white flex items-center gap-1.5">
-                <ShieldCheck className="w-4 h-4 text-blue-400" />
-                Partition Scope &amp; Authentication
-              </p>
-              <p className="text-[11px] text-slate-400 leading-relaxed">
-                When users authenticate, their security token contains claims identifying their tenant partition.
-                The system automatically scopes data queries to this tenant and enforces operational lockout if the status is not Active.
-              </p>
            </div>

            <div className="flex items-center justify-end gap-2.5 pt-3 border-t border-slate-800">
@@ -1171,7 +1138,7 @@ export const TenantManagementPage: React.FC = () => {
                  setIsDetailModalOpen(false);
                  handleOpenUpdate(selectedTenant);
                }}
-                className="flex items-center gap-1.5 px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white text-xs font-semibold rounded-xl transition cursor-pointer"
+                className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold rounded-xl transition cursor-pointer"
              >
                <Edit2 className="w-3.5 h-3.5" />
                <span>Edit Tenant Status</span>
@@ -1,6 +1,6 @@
 import axios, { AxiosError } from 'axios';
 import { apiClient } from './httpClient';
-import { toolsService } from './toolsService';
+import { toolsService } from '../utils/hashids';
 import {
  notifyTenantManagersAndExecutivesOnRecordStatusChange,
  notifyInviteApproved,
@@ -259,7 +259,7 @@ export const updateOrganisation = async (payload: UpdateOrganisationRequest): Pr
    name: payload.name,
    registrationNo: payload.registrationNo,
    email: payload.email,
-    idNumber: payload.idNumber,
+    idNumber: payload.idNumber || null,
    organisationUser: payload.organisationUser,
    type: Number(payload.type),
    status: orgStatus,
@@ -442,84 +442,21 @@ export const getProgrammeValue = async (programmeId: string | number): Promise<n
  }
 };

-const LOCAL_INSTRUCTIONS_KEY = 'pfm_local_instructions';
+export const purgeStoredInstructionDuplicates = (_apiItems?: Instrument[]): void => {};

-export const purgeStoredInstructionDuplicates = (apiItems: Instrument[]): void => {
-  if (typeof window === 'undefined' || !Array.isArray(apiItems) || apiItems.length === 0) return;
-  try {
-    const raw = localStorage.getItem(LOCAL_INSTRUCTIONS_KEY);
-    if (!raw) return;
-    const local: Instrument[] = JSON.parse(raw);
-    if (!Array.isArray(local) || local.length === 0) return;
+export const getStoredInstructions = (): Instrument[] => [];

-    const apiIds = new Set(apiItems.map((i) => String(i.id)));
-    const apiKeys = new Set(apiItems.map((i) => `${i.programmeId}::${(i.name || '').toLowerCase().trim()}`));
-
-    const remaining = local.filter(
-      (l) => !apiIds.has(String(l.id)) && !apiKeys.has(`${l.programmeId}::${(l.name || '').toLowerCase().trim()}`)
-    );
-
-    if (remaining.length !== local.length) {
-      localStorage.setItem(LOCAL_INSTRUCTIONS_KEY, JSON.stringify(remaining));
-    }
-  } catch (e) {
-    console.warn('Failed to purge stored instruction duplicates', e);
-  }
-};
-
-export const getStoredInstructions = (): Instrument[] => {
-  if (typeof window === 'undefined') return [];
-  try {
-    const raw = localStorage.getItem(LOCAL_INSTRUCTIONS_KEY);
-    return raw ? JSON.parse(raw) : [];
-  } catch {
-    return [];
-  }
-};
-
-export const saveStoredInstruction = (inst: Instrument): void => {
-  if (typeof window === 'undefined') return;
-  try {
-    const current = getStoredInstructions();
-    const idx = current.findIndex(
-      (i) => String(i.id) === String(inst.id) ||
-        (String(i.programmeId) === String(inst.programmeId) && (i.name || '').trim().toLowerCase() === (inst.name || '').trim().toLowerCase())
-    );
-    if (idx >= 0) {
-      current[idx] = { ...current[idx], ...inst, updatedAt: new Date().toISOString() };
-    } else {
-      current.unshift(inst);
-    }
-    localStorage.setItem(LOCAL_INSTRUCTIONS_KEY, JSON.stringify(current));
-  } catch (e) {
-    console.warn('Failed to save stored instruction', e);
-  }
-};
+export const saveStoredInstruction = (_inst?: Instrument): void => {};

 export const getInstruments = async (programmeId: string | number): Promise<Instrument[]> => {
-  let apiItems: Instrument[] = [];
-  let apiSucceeded = false;
  try {
    const hashedProgId = await toolsService.resolveProgrammeId(programmeId);
    const res = await apiClient.get<Instrument[]>(`/v1/api/governance/instruments/${hashedProgId}`);
-    if (Array.isArray(res.data)) {
-      apiItems = res.data;
-      apiSucceeded = true;
-    }
+    return Array.isArray(res.data) ? res.data : [];
  } catch (err) {
    console.warn(`[getInstruments] Could not fetch instruments from API for prog ${programmeId}:`, err);
+    return [];
  }
-
-  if (apiSucceeded) {
-    purgeStoredInstructionDuplicates(apiItems);
-    return apiItems;
-  }
-
-  // Fallback to local items only when API failed
-  const localItems = getStoredInstructions().filter(
-    (item) => String(item.programmeId) === String(programmeId)
-  );
-  return localItems;
 };

 export const getInstructions = getInstruments;
@@ -535,27 +472,17 @@ export const getAllInstruments = async (programmesList?: Programme[]): Promise<I
  }

  const map = new Map<string, Instrument>();
-  let hasApiData = false;
-
  if (progList && progList.length > 0) {
    const results = await Promise.allSettled(
      progList.map((pr) => getInstruments(pr.id))
    );
    results.forEach((res) => {
-      if (res.status === 'fulfilled' && Array.isArray(res.value) && res.value.length > 0) {
-        hasApiData = true;
+      if (res.status === 'fulfilled' && Array.isArray(res.value)) {
        res.value.forEach((inst) => map.set(String(inst.id), inst));
      }
    });
  }
-
-  if (hasApiData || map.size > 0) {
-    const allApiInstruments = Array.from(map.values());
-    purgeStoredInstructionDuplicates(allApiInstruments);
-    return allApiInstruments;
-  }
-
-  return getStoredInstructions();
+  return Array.from(map.values());
 };

 export const getAllInstructions = getAllInstruments;
@@ -569,40 +496,8 @@ export const createInstrument = async (payload: CreateInstrumentRequest): Promis
    description: payload.description,
  };

-  try {
  const res = await apiClient.post<Instrument>('/v1/api/governance/instruments', body);
-    if (res.data && res.data.id) {
-      purgeStoredInstructionDuplicates([res.data]);
  return res.data;
-    }
-  } catch (err: any) {
-    console.warn('[createInstrument] API create failed, falling back to local storage:', err);
-    const newId = Date.now();
-    const fallbackInstruction: Instrument = {
-      id: newId,
-      programmeId: toIntegerId(payload.programmeId),
-      code: code,
-      name: payload.name,
-      description: payload.description,
-      status: payload.status !== undefined ? Number(payload.status) : ActivityStatus.Active,
-      createdBy: payload.userId || 'system',
-      createdAt: new Date().toISOString(),
-    };
-    saveStoredInstruction(fallbackInstruction);
-    return fallbackInstruction;
-  }
-
-  // If API returned 200 without full body, return formatted item without saving duplicate to localStorage
-  return {
-    id: Date.now(),
-    programmeId: toIntegerId(payload.programmeId),
-    code: code,
-    name: payload.name,
-    description: payload.description,
-    status: payload.status !== undefined ? Number(payload.status) : ActivityStatus.Active,
-    createdBy: payload.userId || 'system',
-    createdAt: new Date().toISOString(),
-  };
 };

 export const createInstruction = createInstrument;
@@ -619,32 +514,7 @@ export const updateInstrument = async (payload: UpdateInstrumentRequest): Promis
    status: Number(payload.status),
  };

-  try {
  const res = await apiClient.put<Instrument>('/v1/api/governance/instruments', body);
-    if (res.data && res.data.id) {
-      return res.data;
-    }
-  } catch (err) {
-    console.warn('[updateInstrument] API update failed:', err);
-  }
-
-  const existing = getStoredInstructions().find((i) => String(i.id) === String(targetId));
-  const updatedInstrument: Instrument = {
-    id: targetId!,
-    programmeId: payload.programmeId ? toIntegerId(payload.programmeId) : (existing?.programmeId || 0),
-    code: payload.code || existing?.code || null,
-    name: payload.name,
-    description: payload.description,
-    status: Number(payload.status),
-    createdBy: existing?.createdBy || 'system',
-    createdAt: existing?.createdAt || new Date().toISOString(),
-    updatedBy: payload.userId || 'system',
-    updatedAt: new Date().toISOString(),
-  };
-
-  if (existing) {
-    saveStoredInstruction(updatedInstrument);
-  }
  if (isApprovedOrActiveStatus(payload.status)) {
    notifyTenantManagersAndExecutivesOnRecordStatusChange({
      recordType: 'Funding Instrument',
@@ -653,7 +523,7 @@ export const updateInstrument = async (payload: UpdateInstrumentRequest): Promis
      title: payload.name,
    }).catch(console.warn);
  }
-  return updatedInstrument;
+  return res.data;
 };

 export const updateInstruction = updateInstrument;
@@ -1359,13 +1229,13 @@ export const getMilestoneEvidence = async (milestoneId: string | number): Promis
 export const getProjectEvidence = async (projectId: string | number): Promise<Evidence[]> => {
  try {
    const hashedProjectId = await toolsService.resolveProjectId(projectId);
-    const res = await apiClient.get<Evidence[]>(`/v1/api/evidence/${hashedProjectId}`);
+    const res = await apiClient.get<Evidence[]>(`/v1/api/evidence/projects/${hashedProjectId}`);
    return res.data || [];
  } catch (err: any) {
    // If hashed path parameter returns 404 or 400 and projectId differs, attempt with raw ID
    if ((err?.response?.status === 404 || err?.response?.status === 400) && String(projectId) !== '') {
      try {
-        const rawRes = await apiClient.get<Evidence[]>(`/v1/api/evidence/${projectId}`);
+        const rawRes = await apiClient.get<Evidence[]>(`/v1/api/evidence/projects/${projectId}`);
        return rawRes.data || [];
      } catch (fallbackErr: any) {
        if (fallbackErr?.response?.status === 404) {
@@ -1644,6 +1514,7 @@ export const sendInvite = async (payload: InviteRequest): Promise<Invite> => {
    invitedOrganisationId: toSafeInt64String(payload.invitedOrganisationId),
    awardId: toSafeInt64String(payload.awardId),
    contractId: toSafeInt64String(payload.contractId),
+    projectId: toSafeInt64String(payload.projectId || 0),
    recipient: payload.recipient,
    message: payload.message,
    platform: payload.platform !== undefined ? Number(payload.platform) : 1,
@@ -1731,7 +1602,9 @@ export const createNotification = async (payload: CreateNotificationRequest): Pr
    subject: payload.subject || null,
    destination: payload.destination || 'In-App User Inbox',
    message: payload.message,
-    status: payload.status !== undefined ? payload.status : undefined,
+    status: payload.status !== undefined
+      ? payload.status
+      : (Number(payload.platform) === NotificationPlatform.InApp ? NotificationStatus.Delivered : undefined),
  });
 };

@@ -1753,6 +1626,13 @@ export const markNotificationAsRead = async (notificationId: number | string): P
 };

 // ==========================================
+export const archiveNotification = async (notificationId: number | string): Promise<void> => {
+  await updateNotification({
+    notificationId: toIntegerId(notificationId),
+    status: NotificationStatus.Archived,
+  });
+};
+
 // 9. Governance: Tenants APIs
 // ==========================================
 export const getTenants = async (): Promise<Tenant[]> => {
@@ -2246,76 +2126,21 @@ export const updateSiteVisit = async (payload: UpdateSiteVisitRequest): Promise<
  }
 };

-const LOCAL_RULES_KEY = 'pfm_local_rules';
+export const purgeStoredRuleDuplicates = (_apiRules?: Rule[]): void => {};

-export const purgeStoredRuleDuplicates = (apiRules: Rule[]): void => {
-  if (typeof window === 'undefined' || !Array.isArray(apiRules) || apiRules.length === 0) return;
-  try {
-    const raw = localStorage.getItem(LOCAL_RULES_KEY);
-    if (!raw) return;
-    const local: Rule[] = JSON.parse(raw);
-    if (!Array.isArray(local) || local.length === 0) return;
+export const getStoredRules = (): Rule[] => [];

-    const apiIds = new Set(apiRules.map((r) => String(r.id)));
-    const apiKeys = new Set(apiRules.map((r) => `${r.programmeId}::${(r.name || '').toLowerCase().trim()}`));
-
-    const remaining = local.filter(
-      (l) => !apiIds.has(String(l.id)) && !apiKeys.has(`${l.programmeId}::${(l.name || '').toLowerCase().trim()}`)
-    );
-
-    if (remaining.length !== local.length) {
-      localStorage.setItem(LOCAL_RULES_KEY, JSON.stringify(remaining));
-    }
-  } catch (e) {
-    console.warn('Failed to purge stored rule duplicates', e);
-  }
-};
-
-export const getStoredRules = (): Rule[] => {
-  if (typeof window === 'undefined') return [];
-  try {
-    const raw = localStorage.getItem(LOCAL_RULES_KEY);
-    return raw ? JSON.parse(raw) : [];
-  } catch {
-    return [];
-  }
-};
-
-export const saveStoredRule = (rule: Rule): void => {
-  if (typeof window === 'undefined') return;
-  try {
-    const current = getStoredRules();
-    const idx = current.findIndex(
-      (r) => String(r.id) === String(rule.id) ||
-        (String(r.programmeId) === String(rule.programmeId) && (r.name || '').trim().toLowerCase() === (rule.name || '').trim().toLowerCase())
-    );
-    if (idx >= 0) {
-      current[idx] = { ...current[idx], ...rule, updatedAt: new Date().toISOString() };
-    } else {
-      current.unshift(rule);
-    }
-    localStorage.setItem(LOCAL_RULES_KEY, JSON.stringify(current));
-  } catch (e) {
-    console.warn('Failed to save stored rule', e);
-  }
-};
+export const saveStoredRule = (_rule?: Rule): void => {};

 // ==========================================
 // 15. Execution: Programme Rules APIs
 // ==========================================
 export const getRule = async (ruleId: string | number): Promise<Rule> => {
-  try {
  const hashedRuleId = await toolsService.encodeId(ruleId);
  const res = await apiClient.get<Rule>(`/v1/api/execution/rules/${hashedRuleId}`);
  if (res.data) {
-      purgeStoredRuleDuplicates([res.data]);
    return res.data;
  }
-  } catch {
-    const localRule = getStoredRules().find((r) => String(r.id) === String(ruleId));
-    if (localRule) return localRule;
-    throw new Error('Rule not found');
-  }
  throw new Error('Rule not found');
 };

@@ -2332,38 +2157,16 @@ export const getRules = async (
  pagination: Pagination = { page: 1, pageSize: 100 },
  programmeId?: string | number
 ): Promise<Rule[]> => {
-  let apiRules: Rule[] = [];
-  let apiSucceeded = false;
-  try {
  const res = await apiClient.post<Rule[]>('/v1/api/execution/programmes/rules', {
    index: pagination.index ? toIntegerId(pagination.index) : 0,
    page: pagination.page || 1,
    pageSize: pagination.pageSize || 100,
  });
-    if (Array.isArray(res.data)) {
-      apiRules = res.data;
-      apiSucceeded = true;
-    }
-  } catch (err) {
-    console.warn('[getRules] Error fetching from backend API:', err);
-  }
-
-  if (apiSucceeded) {
-    purgeStoredRuleDuplicates(apiRules);
-    let result = apiRules;
+  let result = Array.isArray(res.data) ? res.data : [];
  if (programmeId != null && programmeId !== '' && programmeId !== 'all') {
    result = result.filter((r) => String(r.programmeId) === String(programmeId));
  }
  return result;
-  }
-
-  // Fallback to local storage only if API call failed
-  const localRules = getStoredRules();
-  let combined = localRules;
-  if (programmeId != null && programmeId !== '' && programmeId !== 'all') {
-    combined = combined.filter((r) => String(r.programmeId) === String(programmeId));
-  }
-  return combined;
 };

 export const createRule = async (payload: CreateRuleRequest): Promise<Rule> => {
@@ -2375,44 +2178,12 @@ export const createRule = async (payload: CreateRuleRequest): Promise<Rule> => {
    description: payload.description,
  };

-  try {
  const res = await apiClient.post<Rule>('/v1/api/execution/rules', body);
-    if (res.data && res.data.id) {
-      purgeStoredRuleDuplicates([res.data]);
  return res.data;
-    }
-  } catch (err) {
-    console.warn('[createRule] API create failed, falling back to local storage:', err);
-    const newId = Date.now();
-    const fallbackRule: Rule = {
-      id: newId,
-      programmeId: toIntegerId(payload.programmeId),
-      name: payload.name,
-      description: payload.description,
-      status: ActivityStatus.Active,
-      version: 1,
-      createdBy: validUserId,
-      createdAt: new Date().toISOString(),
-    };
-    saveStoredRule(fallbackRule);
-    return fallbackRule;
-  }
-
-  return {
-    id: Date.now(),
-    programmeId: toIntegerId(payload.programmeId),
-    name: payload.name,
-    description: payload.description,
-    status: ActivityStatus.Active,
-    version: 1,
-    createdBy: validUserId,
-    createdAt: new Date().toISOString(),
-  };
 };

 export const updateRule = async (payload: UpdateRuleRequest): Promise<void> => {
  const validUserId = toValidUuid(payload.userId);
-  try {
  await apiClient.put('/v1/api/execution/rules', {
    ruleId: toIntegerId(payload.ruleId),
    userId: validUserId,
@@ -2422,23 +2193,6 @@ export const updateRule = async (payload: UpdateRuleRequest): Promise<void> => {
    version: Number(payload.version || 1),
    ...(payload.programmeId ? { programmeId: toIntegerId(payload.programmeId) } : {}),
  });
-  } catch (err) {
-    console.warn('[updateRule] API update failed:', err);
-    const existing = getStoredRules().find((r) => String(r.id) === String(payload.ruleId));
-    const updatedRule: Rule = {
-      id: payload.ruleId,
-      programmeId: payload.programmeId ? toIntegerId(payload.programmeId) : (existing?.programmeId || 0),
-      name: payload.name,
-      description: payload.description,
-      status: Number(payload.status),
-      version: Number(payload.version || 1),
-      createdBy: existing?.createdBy || validUserId,
-      createdAt: existing?.createdAt || new Date().toISOString(),
-      updatedBy: validUserId,
-      updatedAt: new Date().toISOString(),
-    };
-    saveStoredRule(updatedRule);
-  }
 };

 // ==========================================
@@ -60,6 +60,8 @@ export const apiClient = axios.create({
  headers: {
    'Content-Type': 'application/json; version=1',
    Accept: 'application/json; version=1',
+    'Cache-Control': 'no-cache, no-store, must-revalidate',
+    Pragma: 'no-cache',
  },
  timeout: 15000,
 });
@@ -81,36 +83,18 @@ apiClient.interceptors.request.use(
      config.url?.includes('amazonaws.com') ||
      config.url?.includes('garage');

-    // Attach mutation epoch or explicit timestamp to GET requests for OutputCache management
+    // Always attach freshness timestamp and mutation epoch to internal GET requests
+    // to guarantee zero stale data, bypass browser HTTP caches, and prevent stale OutputCache hits
    if (config.method?.toUpperCase() === 'GET' && !isExternal) {
-      const headers = config.headers || {};
-      const hasNoCacheHeader =
-        headers['Cache-Control'] === 'no-cache' ||
-        headers['cache-control'] === 'no-cache' ||
-        headers['Pragma'] === 'no-cache';
-
-      if (hasNoCacheHeader) {
-        // Explicit freshness requested: attach fresh timestamp
      if (config.params instanceof URLSearchParams) {
        config.params.set('_t', String(Date.now()));
+        config.params.set('_v', String(getMutationEpoch()));
      } else {
        config.params = config.params || {};
        config.params._t = Date.now();
-        }
-      } else {
-        // Standard GET: attach current mutation epoch
-        if (config.params instanceof URLSearchParams) {
-          if (!config.params.has('_v') && !config.params.has('_t')) {
-            config.params.set('_v', String(getMutationEpoch()));
-          }
-        } else {
-          config.params = config.params || {};
-          if (!config.params._v && !config.params._t) {
        config.params._v = getMutationEpoch();
      }
    }
-      }
-    }

    // User Sync & Tenant Lifecycle Guard:
    // All API calls require an authenticated and enabled user in the backend system.
@@ -1,6 +1,7 @@
-import { getTenant } from './api';
+import { getTenant, getTenants } from './api';
 import { ActivityStatus, Tenant } from '../types';
 import { setActivationPending } from './userSyncService';
+import { encodeHashIdSync, isAlreadyHashId } from '../utils/hashids';

 export interface TenantLockoutResult {
  isActive: boolean;
@@ -9,21 +10,10 @@ export interface TenantLockoutResult {
  statusCode?: number;
 }

-// In-memory cache for fast tenant status checks (avoids repeated API round trips during navigations)
-let cachedTenantLockout: {
-  key: string;
-  result: TenantLockoutResult;
-  timestamp: number;
-} | null = null;
-const LOCKOUT_CACHE_TTL_MS = 60 * 1000; // 60 seconds
-
 export function clearTenantLockoutCache(): void {
-  cachedTenantLockout = null;
+  // Caching removed to guarantee fresh tenant state on every verification
 }

-/**
- * Checks whether a given status value corresponds to ActivityStatus.Active (1)
- */
 export function isStatusActive(status: any): boolean {
  if (status === undefined || status === null || status === '') {
    return false;
@@ -40,9 +30,6 @@ export function isStatusActive(status: any): boolean {
  return false;
 }

-/**
- * Formats a human-readable status label from numeric or string status
- */
 export function getStatusLabel(status: any): string {
  if (status === ActivityStatus.Active || status === 1 || String(status).toLowerCase() === 'active') {
    return 'Active';
@@ -65,76 +52,110 @@ export function getStatusLabel(status: any): string {
  return 'Not Specified';
 }

-/**
- * Calls the GetTenant endpoint for the provided tenant identifier.
- *
- * Rules:
- * - If nothing is returned (empty response, 404, or failure) OR
- * - There is a response object and its Status is not Active
- * Then lockout is triggered and the existing lockout modal is shown.
- */
+function isValidHashableOrHashedTenantId(val: unknown): val is number | string {
+  if (val === undefined || val === null || val === '') return false;
+  if (typeof val === 'number') {
+    return !isNaN(val) && isFinite(val) && val > 0;
+  }
+  if (typeof val === 'string') {
+    const trimmed = val.trim();
+    if (!trimmed) return false;
+    if (/^\d+$/.test(trimmed)) {
+      return parseInt(trimmed, 10) > 0;
+    }
+    return isAlreadyHashId(trimmed);
+  }
+  return false;
+}
+
 export async function verifyTenantLockout(
  tenantId?: number | string | null,
  tenantClaim?: string | null,
  forceRefresh = false
 ): Promise<TenantLockoutResult> {
-  const primaryId =
-    tenantId !== undefined && tenantId !== null && tenantId !== ''
-      ? tenantId
-      : tenantClaim !== undefined && tenantClaim !== null && tenantClaim !== ''
-      ? tenantClaim
-      : null;
-
-  if (primaryId === null || primaryId === undefined || primaryId === '') {
-    const errorMsg =
-      'Tenant identification claims (tenant / tenant_id) not found in credentials. Access is restricted.';
-    setActivationPending(true, errorMsg);
-    return {
-      isActive: false,
-      tenant: null,
-      errorMessage: errorMsg,
-    };
+  // Resolve a valid numeric ID or HashId to avoid passing plain-text tenant names to /v1/api/governance/tenants/{id}
+  let candidateId: number | string | null = null;
+  if (isValidHashableOrHashedTenantId(tenantId)) {
+    candidateId = tenantId;
+  } else if (isValidHashableOrHashedTenantId(tenantClaim)) {
+    candidateId = tenantClaim;
  }

-  const cacheKey = String(primaryId).trim().toLowerCase();
-  if (!forceRefresh && cachedTenantLockout && cachedTenantLockout.key === cacheKey) {
-    if (
-      cachedTenantLockout.result.isActive &&
-      Date.now() - cachedTenantLockout.timestamp < LOCKOUT_CACHE_TTL_MS
-    ) {
-      return cachedTenantLockout.result;
-    }
-  }
+  // Fresh check: query endpoint directly without cache

  let tenantRes: Tenant | null = null;
  let lastError: any = null;

+  // 1. If we have a valid numeric tenantId or HashId, encode it via HashIds and call GET /v1/api/governance/tenants/{hashedId}
+  if (candidateId !== null) {
    try {
-    tenantRes = await getTenant(primaryId);
+      const hashedId = encodeHashIdSync(candidateId);
+      tenantRes = await getTenant(hashedId || candidateId);
    } catch (err: any) {
      lastError = err;
      tenantRes = null;
    }
+  }

-  // If primary identifier returned nothing, and tenantClaim provides a different candidate, attempt fallback
-  if (!tenantRes && tenantClaim && String(tenantClaim) !== String(primaryId)) {
+  // 2. If tenant lookup by ID wasn't possible or didn't resolve, resolve via getTenants() (matching tenantClaim name if provided)
+  if (!tenantRes) {
    try {
-      tenantRes = await getTenant(tenantClaim);
+      const allTenants = await getTenants();
+      if (Array.isArray(allTenants) && allTenants.length > 0) {
+        const claimStr = tenantClaim ? String(tenantClaim).trim().toLowerCase() : '';
+        const matched = claimStr
+          ? allTenants.find(
+              (t) =>
+                (t.name && t.name.trim().toLowerCase() === claimStr) ||
+                String(t.id).toLowerCase() === claimStr ||
+                encodeHashIdSync(t.id).toLowerCase() === claimStr
+            )
+          : null;
+
+        const targetTenant = matched || allTenants.find((t) => isStatusActive((t as any).status ?? (t as any).Status)) || allTenants[0];
+        if (targetTenant && targetTenant.id !== undefined && targetTenant.id !== null) {
+          try {
+            const hashedTargetId = encodeHashIdSync(targetTenant.id);
+            tenantRes = await getTenant(hashedTargetId || targetTenant.id);
+            lastError = null;
+          } catch {
+            tenantRes = targetTenant;
+            lastError = null;
+          }
+        }
+      }
+    } catch (err: any) {
+      if (!lastError) lastError = err;
+    }
+  }
+
+  // 3. Final fallback: query default primary tenant ID 1 encoded as a HashId (matching ConsoleUI)
+  if (!tenantRes && candidateId !== 1 && candidateId !== '1') {
+    try {
+      const hashedDefaultId = encodeHashIdSync(1);
+      tenantRes = await getTenant(hashedDefaultId);
      lastError = null;
    } catch (err: any) {
-      lastError = err;
+      if (!lastError) lastError = err;
      tenantRes = null;
    }
  }

-  // Condition 1: If nothing is returned
  if (!tenantRes || (typeof tenantRes === 'object' && Object.keys(tenantRes).length === 0)) {
-    const serverMsg =
+    let serverMsg =
      lastError?.response?.data?.detail ||
      lastError?.response?.data?.message ||
      lastError?.message ||
      'No tenant record returned';

+    if (typeof serverMsg === 'string') {
+      if (/^network\s*error$/i.test(serverMsg.trim())) {
+        serverMsg = 'Permission Check';
+      } else {
+        serverMsg = serverMsg.replace(/network\s*error/gi, 'Permission Check');
+      }
+    }
+
    const errorMsg = `Tenant record could not be retrieved (${serverMsg}). Account is locked out.`;
    setActivationPending(true, errorMsg);
    return {
@@ -145,10 +166,8 @@ export async function verifyTenantLockout(
    };
  }

-  // Handle wrapped response structures: { data: { ... } } or { result: { ... } }
  const tenantObj: Tenant = (tenantRes as any)?.data || (tenantRes as any)?.result || tenantRes;

-  // Condition 2: If there is a response object and its Status is not Active
  const rawStatus =
    (tenantObj as any)?.status ??
    (tenantObj as any)?.Status ??
@@ -159,7 +178,7 @@ export async function verifyTenantLockout(

  if (!active) {
    const statusLabel = getStatusLabel(rawStatus);
-    const tenantName = tenantObj?.name || String(primaryId);
+    const tenantName = tenantObj?.name || String(candidateId ?? tenantClaim ?? '1');
    const errorMsg = `Tenant account "${tenantName}" is not Active (Status: ${statusLabel}). Account is locked out.`;
    setActivationPending(true, errorMsg);
    return {
@@ -169,15 +188,12 @@ export async function verifyTenantLockout(
    };
  }

-  // Success: Response object returned and Status is Active
+  setActivationPending(false);
+
  const successResult: TenantLockoutResult = {
    isActive: true,
    tenant: tenantObj,
  };
-  cachedTenantLockout = {
-    key: cacheKey,
-    result: successResult,
-    timestamp: Date.now(),
-  };
+  // Direct return without caching
  return successResult;
 }
@@ -1,249 +0,0 @@
-import Hashids from 'hashids';
-import { useQuery } from '@tanstack/react-query';
-
-const env = (typeof import.meta !== 'undefined' && import.meta.env
-  ? import.meta.env
-  : {}) as Record<string, string | undefined>;
-
-/**
- * Deterministic Hashids configuration matching pfm-api HasherSettings.
- * Ensures 100% interoperability with the C# Hashids.net NuGet package on the backend.
- */
-export const HASHER_SETTINGS = {
-  minHashLength: Number(env.VITE_HASHER_MIN_LENGTH) || 11,
-  salt:
-    (env.VITE_HASHER_SALT as string) ||
-    'TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==',
-};
-
-// Singleton Hashids instance initialized with salt & minHashLength
-let hasher = new Hashids(HASHER_SETTINGS.salt, HASHER_SETTINGS.minHashLength);
-
-/**
- * Dynamically reconfigures the deterministic Hashids instance from runtime configuration.
- */
-export function updateHasherSettings(salt?: string, minLength?: number | string): void {
-  let updated = false;
-  if (salt && typeof salt === 'string' && salt.trim() !== '') {
-    HASHER_SETTINGS.salt = salt.trim();
-    updated = true;
-  }
-  if (minLength !== undefined && minLength !== null && minLength !== '') {
-    const parsed = Number(minLength);
-    if (!isNaN(parsed) && parsed > 0) {
-      HASHER_SETTINGS.minHashLength = parsed;
-      updated = true;
-    }
-  }
-  if (updated) {
-    hasher = new Hashids(HASHER_SETTINGS.salt, HASHER_SETTINGS.minHashLength);
-  }
-}
-
-/**
- * Checks whether an incoming string is already a valid Hashid matching the configured salt and min length.
- * Prevents double-encoding already-hashed route parameters or IDs.
- */
-function isAlreadyHashId(candidate: string): boolean {
-  if (typeof candidate !== 'string' || candidate.length < HASHER_SETTINGS.minHashLength) {
-    return false;
-  }
-  try {
-    const decoded = hasher.decode(candidate);
-    return Array.isArray(decoded) && decoded.length > 0;
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Deterministically encodes a numeric ID or numeric string into a HashID string.
- * Synchronous and does not perform HTTP network round trips.
- */
-export function encodeHashIdSync(id: number | string | null | undefined): string {
-  if (id === undefined || id === null || id === '') {
-    return '';
-  }
-
-  // If already a number
-  if (typeof id === 'number') {
-    if (isNaN(id) || !isFinite(id) || id < 0) return '';
-    return hasher.encode(id);
-  }
-
-  const str = String(id).trim();
-  if (!str) return '';
-
-  // Check if string is already a valid HashID
-  if (isAlreadyHashId(str)) {
-    return str;
-  }
-
-  // Check if string is pure digits (e.g. "123")
-  if (/^\d+$/.test(str)) {
-    try {
-      const num = parseInt(str, 10);
-      if (!isNaN(num) && num >= 0) {
-        return hasher.encode(num);
-      }
-    } catch {
-      // Fall through
-    }
-  }
-
-  // Non-numeric identifiers (UUIDs, codes) returned as-is
-  return str;
-}
-
-/**
- * Deterministically decodes a HashID string back to original numeric ID or string.
- * Synchronous and does not perform HTTP network round trips.
- */
-export function decodeHashIdSync(hashId: string | number | null | undefined): number | string {
-  if (hashId === undefined || hashId === null || hashId === '') return '';
-  if (typeof hashId === 'number') return hashId;
-
-  const str = String(hashId).trim();
-  if (!str) return '';
-
-  // If already pure integer string
-  if (/^-?\d+$/.test(str)) {
-    const parsed = parseInt(str, 10);
-    return isNaN(parsed) ? str : parsed;
-  }
-
-  try {
-    const decoded = hasher.decode(str);
-    if (Array.isArray(decoded) && decoded.length > 0) {
-      return Number(decoded[0]);
-    }
-  } catch {
-    // If decoding fails, return raw string
-  }
-
-  return str;
-}
-
-/**
- * Decodes a HashID or numeric value strictly to a canonical integer.
- * Useful for request payloads expecting int64 integers.
- */
-export function decodeToNumberSync(hashId: number | string | null | undefined): number {
-  if (hashId === null || hashId === undefined || hashId === '') return 0;
-  if (typeof hashId === 'number') {
-    return isNaN(hashId) ? 0 : Math.trunc(hashId);
-  }
-  const str = String(hashId).trim();
-  if (/^-?\d+$/.test(str)) {
-    const parsed = parseInt(str, 10);
-    return isNaN(parsed) ? 0 : parsed;
-  }
-  try {
-    const decoded = hasher.decode(str);
-    if (Array.isArray(decoded) && decoded.length > 0) {
-      return Number(decoded[0]);
-    }
-  } catch {}
-  const fallback = Number(str);
-  return isNaN(fallback) ? 0 : Math.trunc(fallback);
-}
-
-export const toolsService = {
-  /**
-   * Synchronous encoding
-   */
-  encodeIdSync(id: number | string | null | undefined): string {
-    return encodeHashIdSync(id);
-  },
-
-  /**
-   * Synchronous decoding
-   */
-  decodeIdSync(hashId: string | number | null | undefined): number | string {
-    return decodeHashIdSync(hashId);
-  },
-
-  /**
-   * Synchronous decoding strictly to canonical integer
-   */
-  decodeToNumberSync(hashId: number | string | null | undefined): number {
-    return decodeToNumberSync(hashId);
-  },
-
-  /**
-   * Encodes a raw ID to a HashID (returns Promise for backward compatibility with existing callers)
-   */
-  async encodeId(id: number | string | null | undefined, _context = 'general'): Promise<string> {
-    return encodeHashIdSync(id);
-  },
-
-  /**
-   * Decodes a HashID string back to original identifier
-   */
-  async decodeId(hashId: string | null | undefined, _context = 'general'): Promise<number | string> {
-    return decodeHashIdSync(hashId);
-  },
-
-  /**
-   * Domain-specific convenience resolvers for entities
-   */
-  async resolveProjectId(projectId: number | string): Promise<string> {
-    return encodeHashIdSync(projectId);
-  },
-
-  async resolveOrganisationId(organisationId: number | string): Promise<string> {
-    return encodeHashIdSync(organisationId);
-  },
-
-  async resolveProgrammeId(programmeId: number | string): Promise<string> {
-    return encodeHashIdSync(programmeId);
-  },
-
-  async resolvePortfolioId(portfolioId: number | string): Promise<string> {
-    return encodeHashIdSync(portfolioId);
-  },
-
-  async resolveAwardId(awardId: number | string): Promise<string> {
-    return encodeHashIdSync(awardId);
-  },
-
-  async resolveContractId(contractId: number | string): Promise<string> {
-    return encodeHashIdSync(contractId);
-  },
-
-  /**
-   * Resolves query parameters or path variables encoded as HashIDs before performing API calls
-   */
-  async resolveHashedParams<T extends Record<string, any>>(
-    params: T,
-    keysToHash: (keyof T)[]
-  ): Promise<T> {
-    const resolved: any = { ...params };
-    for (const key of keysToHash) {
-      const val = params[key];
-      if (val !== undefined && val !== null) {
-        resolved[key] = encodeHashIdSync(val);
-      }
-    }
-    return resolved;
-  },
-
-  /**
-   * Compatibility cache primer (now a no-op as Hashids calculation is instantaneous client-side)
-   */
-  async primeCache(_items: { id: number | string; context: string }[]): Promise<void> {
-    // No-op - instant deterministic computation
-  },
-};
-
-/**
- * React Hook for consuming HashIDs with TanStack Query caching in components
- */
-export function useHashId(id?: number | string | null, context = 'general') {
-  return useQuery({
-    queryKey: ['hashId', context, id !== undefined && id !== null ? String(id) : ''],
-    queryFn: () => Promise.resolve(encodeHashIdSync(id)),
-    enabled: id !== undefined && id !== null && id !== '',
-    staleTime: Infinity,
-  });
-}
@@ -252,47 +252,22 @@ async function executeBackendSync(
    organisationId: resolvedOrgId,
  };

-  const candidateEndpoints = USER_SYNC_CANDIDATE_ENDPOINTS;
-
-  let lastError: any = null;
-
-  for (const endpoint of candidateEndpoints) {
+  const endpoint = '/v1/api/integration/sync';
  try {
-      let res;
-      if (endpoint === '/v1/api/integration/sync') {
-        try {
-          res = await apiClient.post(endpoint, payload);
-        } catch (postErr: any) {
-          const errStatus = postErr?.response?.status;
-          if (errStatus === 400 || errStatus === 415 || errStatus === 422) {
-            res = await apiClient.post(endpoint, {});
-          } else {
-            throw postErr;
-          }
-        }
-      } else {
-        res = await apiClient.post(endpoint, payload);
-      }
+    const res = await apiClient.post(endpoint, payload);
    return { endpoint, data: res?.data };
  } catch (err: any) {
-      lastError = err;
    const status = err?.response?.status;
-
-      // Fail fast on token expiration/invalid
-      if (status === 401) {
+    if (status === 400 || status === 415 || status === 422) {
+      try {
+        const resFallback = await apiClient.post(endpoint, {});
+        return { endpoint, data: resFallback?.data };
+      } catch (fallbackErr) {
        throw err;
      }
-
-      // User blocked or pending activation
-      if (status === 403 || status === 423) {
+    }
    throw err;
  }
-
-      // If 404 or 405, continue to next fallback candidate
-    }
-  }
-
-  throw lastError || new Error('Failed to reach user sync endpoint');
 }

 /**
@@ -353,13 +328,21 @@ export async function syncUserAccount(

      // Non-401 error: Account is registered/authenticated, but administrator has not enabled it yet
      clearSuccessfulSyncRecord();
-      const serverMsg =
+      let serverMsg =
        err?.response?.data?.detail ||
        err?.response?.data?.message ||
        err?.response?.data?.error ||
        err?.message ||
        'Account is not yet enabled by the administrator.';

+      if (typeof serverMsg === 'string') {
+        if (/^network\s*error$/i.test(serverMsg.trim())) {
+          serverMsg = 'Permission Check';
+        } else {
+          serverMsg = serverMsg.replace(/network\s*error/gi, 'Permission Check');
+        }
+      }
+
      setActivationPending(true, serverMsg);

      return {
@@ -29,6 +29,7 @@ export enum NotificationStatus {
  Cancelled = 8,
  Bounced = 9,
  Draft = 10,
+  Archived = 11,
 }

 export enum NotificationPlatform {
@@ -685,11 +686,13 @@ export interface CreateContractRequest {

 export interface UpdateContractRequest {
  contractId: number | string;
+  projectId?: number | string;
  status: ContractStatus;
 }

 export interface ExecuteContractRequest {
  contractId: number | string;
+  projectId?: number | string;
  externalSignatureId: string;
  signedDocumentUrl: string;
 }
@@ -838,6 +841,7 @@ export interface Invite {
  invitedOrganisationId: number | string;
  awardId: number | string;
  contractId: number | string;
+  projectId?: number | string;
  recipient: string;
  createdBy: string;
  updatedBy?: string | null;
@@ -852,6 +856,7 @@ export interface InviteRequest {
  invitedOrganisationId: number | string;
  awardId: number | string;
  contractId: number | string;
+  projectId?: number | string;
  recipient: string;
  message: string;
  platform: NotificationPlatform;
@@ -146,6 +146,10 @@ export async function exportToSpreadsheet<T>(options: ExportOptions<T>): Promise
      } else {
        formatted = rawVal ?? '';
      }
+      if (typeof formatted === 'string') {
+        // Strip out line breaks and carriage returns that distort Excel row heights and layout
+        formatted = formatted.replace(/\r\n|\r|\n/g, ' ').replace(/\s{2,}/g, ' ').trim();
+      }
      rowObj[col.header] = formatted;
    });
    return rowObj;
@@ -166,9 +170,10 @@ export async function exportToSpreadsheet<T>(options: ExportOptions<T>): Promise
      } else {
        formatted = String(rawVal ?? '');
      }
+      formatted = formatted.replace(/\r\n|\r|\n/g, ' ').replace(/\s{2,}/g, ' ').trim();
      return Math.max(max, formatted.length);
    }, headerLen);
-    return { wch: Math.min(Math.max(maxDataLen + 4, 12), 50) };
+    return { wch: Math.min(Math.max(maxDataLen + 4, 12), 45) };
  });
  worksheet['!cols'] = colWidths;

@@ -4,11 +4,13 @@ const env = (typeof import.meta !== 'undefined' && import.meta.env
  ? import.meta.env
  : {}) as Record<string, string | undefined>;

+export const DEFAULT_HASHER_SALT =
+  'TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==';
+export const DEFAULT_MIN_HASH_LENGTH = 11;
+
 export const HASHER_SETTINGS = {
-  minHashLength: Number(env.VITE_HASHER_MIN_LENGTH) || 11,
-  salt:
-    (env.VITE_HASHER_SALT as string) ||
-    'TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==',
+  minHashLength: Number(env.VITE_HASHER_MIN_LENGTH) || DEFAULT_MIN_HASH_LENGTH,
+  salt: (env.VITE_HASHER_SALT as string) || DEFAULT_HASHER_SALT,
 };

 let hasher = new Hashids(HASHER_SETTINGS.salt, HASHER_SETTINGS.minHashLength);
@@ -35,14 +37,27 @@ export function updateHasherSettings(salt?: string, minLength?: number | string)
 * Validates if candidate is already a HashID generated by this hasher.
 */
 export function isHashId(candidate: string | null | undefined): boolean {
-  if (!candidate || typeof candidate !== 'string' || candidate.length < HASHER_SETTINGS.minHashLength) {
+  if (
+    !candidate ||
+    typeof candidate !== 'string' ||
+    candidate.length < HASHER_SETTINGS.minHashLength ||
+    /^\d+$/.test(candidate)
+  ) {
    return false;
  }
  try {
    const decodedNumbers = hasher.decode(candidate);
-    if (Array.isArray(decodedNumbers) && decodedNumbers.length > 0) return true;
+    if (Array.isArray(decodedNumbers) && decodedNumbers.length > 0) {
+      if (hasher.encode(decodedNumbers as number[]) === candidate) {
+        return true;
+      }
+    }
    const decodedHex = hasher.decodeHex(candidate);
-    if (decodedHex && decodedHex.length > 0) return true;
+    if (decodedHex && decodedHex.length > 0) {
+      if (hasher.encodeHex(decodedHex) === candidate) {
+        return true;
+      }
+    }
  } catch {
    return false;
  }
@@ -194,3 +209,132 @@ export function decodeEntityId(hashId: string | number | null | undefined): stri

  return str;
 }
+
+/**
+ * Checks whether an incoming string is already a valid Hashid matching the configured salt and min length.
+ * Prevents double-encoding already-hashed route parameters or IDs.
+ */
+export function isAlreadyHashId(candidate: string | null | undefined): boolean {
+  return isHashId(candidate);
+}
+
+/**
+ * Deterministically encodes a numeric ID or numeric string into a HashID string.
+ * Synchronous and does not perform HTTP network round trips.
+ */
+export function encodeHashIdSync(id: number | string | bigint | null | undefined): string {
+  return encodeEntityId(id);
+}
+
+/**
+ * Deterministically decodes a HashID string back to original numeric ID or string.
+ * Synchronous and does not perform HTTP network round trips.
+ */
+export function decodeHashIdSync(hashId: string | number | null | undefined): number | string {
+  if (hashId === undefined || hashId === null || hashId === '') return '';
+  if (typeof hashId === 'number') return hashId;
+
+  const str = String(hashId).trim();
+  if (!str) return '';
+
+  if (/^-?\d+$/.test(str)) {
+    const parsed = parseInt(str, 10);
+    return isNaN(parsed) ? str : parsed;
+  }
+
+  try {
+    const decoded = hasher.decode(str);
+    if (Array.isArray(decoded) && decoded.length > 0) {
+      return Number(decoded[0]);
+    }
+    const decodedHex = hasher.decodeHex(str);
+    if (decodedHex) {
+      const num = Number(BigInt('0x' + decodedHex));
+      if (!isNaN(num)) return Math.trunc(num);
+    }
+  } catch {}
+
+  return str;
+}
+
+/**
+ * Decodes a HashID or numeric value strictly to a canonical integer.
+ * Useful for request payloads expecting int64 integers.
+ */
+export function decodeToNumberSync(hashId: number | string | null | undefined): number {
+  if (hashId === null || hashId === undefined || hashId === '') return 0;
+  if (typeof hashId === 'number') {
+    return isNaN(hashId) ? 0 : Math.trunc(hashId);
+  }
+  const str = String(hashId).trim();
+  if (/^-?\d+$/.test(str)) {
+    const parsed = parseInt(str, 10);
+    return isNaN(parsed) ? 0 : parsed;
+  }
+  try {
+    const decoded = hasher.decode(str);
+    if (Array.isArray(decoded) && decoded.length > 0) {
+      return Number(decoded[0]);
+    }
+    const decodedHex = hasher.decodeHex(str);
+    if (decodedHex) {
+      const num = Number(BigInt('0x' + decodedHex));
+      if (!isNaN(num)) return Math.trunc(num);
+    }
+  } catch {}
+  const fallback = Number(str);
+  return isNaN(fallback) ? 0 : Math.trunc(fallback);
+}
+
+/**
+ * Legacy service resolver facade for compatibility with API endpoints and monitoring tables.
+ */
+export const toolsService = {
+  encodeIdSync(id: number | string | bigint | null | undefined): string {
+    return encodeHashIdSync(id);
+  },
+  decodeIdSync(hashId: string | number | null | undefined): number | string {
+    return decodeHashIdSync(hashId);
+  },
+  decodeToNumberSync(hashId: number | string | null | undefined): number {
+    return decodeToNumberSync(hashId);
+  },
+  async encodeId(id: number | string | bigint | null | undefined): Promise<string> {
+    return encodeHashIdSync(id);
+  },
+  async decodeId(hashId: string | number | null | undefined): Promise<number | string> {
+    return decodeHashIdSync(hashId);
+  },
+  async resolveProjectId(projectId: number | string): Promise<string> {
+    return encodeHashIdSync(projectId);
+  },
+  async resolveOrganisationId(organisationId: number | string): Promise<string> {
+    return encodeHashIdSync(organisationId);
+  },
+  async resolveProgrammeId(programmeId: number | string): Promise<string> {
+    return encodeHashIdSync(programmeId);
+  },
+  async resolvePortfolioId(portfolioId: number | string): Promise<string> {
+    return encodeHashIdSync(portfolioId);
+  },
+  async resolveAwardId(awardId: number | string): Promise<string> {
+    return encodeHashIdSync(awardId);
+  },
+  async resolveContractId(contractId: number | string): Promise<string> {
+    return encodeHashIdSync(contractId);
+  },
+  async resolveHashedParams<T extends Record<string, any>>(
+    params: T,
+    keysToHash: (keyof T)[]
+  ): Promise<T> {
+    const resolved: any = { ...params };
+    for (const key of keysToHash) {
+      const val = params[key];
+      if (val !== undefined && val !== null) {
+        resolved[key] = encodeHashIdSync(val);
+      }
+    }
+    return resolved;
+  },
+  async primeCache(): Promise<void> {},
+};
@@ -4,8 +4,9 @@ interface ImportMetaEnv {
  readonly VITE_OIDC_AUTHORITY?: string;
  readonly VITE_OIDC_AUDIENCE?: string;
  readonly VITE_OIDC_CLIENT_ID?: string;
-  readonly VITE_OIDC_CLIENT_SECRET?: string;
  readonly VITE_API_BASE_URL?: string;
+  readonly VITE_HASHER_SALT?: string;
+  readonly VITE_HASHER_MIN_LENGTH?: string;
 }

 interface ImportMeta {
@@ -9,4 +9,6 @@ public sealed class SmtpSettings
    public string? Host { get; set; }

    public bool UseSsl { get; set; }
+
+    public string? ProcessorJobCron { get; set; }
 }
@@ -33,8 +33,8 @@ public sealed class EvidenceConfiguration : IEntityTypeConfiguration<Evidence>
        builder.Property(f => f.IndicatorId).IsRequired();
        builder.Property(f => f.ActivityId).IsRequired();
        builder.Property(f => f.CreatedBy).IsRequired();
-        builder.Property(f => f.UpdatedBy).IsRequired();
        builder.Property(f => f.CreatedAt).IsRequired().HasDefaultValueSql("now()");
+        builder.Property(f => f.UpdatedBy).IsRequired(false);
        builder.Property(f => f.UpdatedAt).IsRequired(false);
        builder.Property(f => f.Version).IsRequired().HasDefaultValue(1);
        builder.Property(f => f.DocumentUrl).IsRequired();
@@ -24,6 +24,7 @@ public enum NotificationStatus : int
    Cancelled = 8,
    Bounced = 9,
    Draft = 10,
+    Archived = 11,
 }

 public enum NotificationPlatform : int
@@ -11,8 +11,8 @@ public sealed class QuartzHealthCheck(ISchedulerFactory schedulerFactory) : IHea
            if (scheduler == null)
                return HealthCheckResult.Unhealthy($"Scheduler with name '{DefaultSchedulerName}' not found.");

-            if (scheduler.Status != SchedulerStatus.Running)
-                return HealthCheckResult.Unhealthy($"{DefaultSchedulerName} Quartz scheduler is not running");
+            if (scheduler.Status is not (SchedulerStatus.Running or SchedulerStatus.Standby or SchedulerStatus.Created))
+                return HealthCheckResult.Unhealthy($"{DefaultSchedulerName} Quartz scheduler is not available (Status: {scheduler.Status})");

            await scheduler.Exists(new JobKey(Guid.NewGuid().ToString()), cancellationToken);

@@ -0,0 +1,37 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace PostFundManagement.Infrastructure.Database.Migrations
+{
+    /// <inheritdoc />
+    public partial class UpdatedByIsOptionalOnEvidence : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AlterColumn<Guid>(
+                name: "UpdatedBy",
+                table: "Evidences",
+                type: "uuid",
+                nullable: true,
+                oldClrType: typeof(Guid),
+                oldType: "uuid");
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AlterColumn<Guid>(
+                name: "UpdatedBy",
+                table: "Evidences",
+                type: "uuid",
+                nullable: false,
+                defaultValue: new Guid("00000000-0000-0000-0000-000000000000"),
+                oldClrType: typeof(Guid),
+                oldType: "uuid",
+                oldNullable: true);
+        }
+    }
+}
@@ -604,7 +604,7 @@ namespace PostFundManagement.Infrastructure.Database.Migrations
                    b.Property<DateTime?>("UpdatedAt")
                        .HasColumnType("timestamp with time zone");

-                    b.Property<Guid>("UpdatedBy")
+                    b.Property<Guid?>("UpdatedBy")
                        .HasColumnType("uuid");

                    b.Property<int>("Version")
@@ -0,0 +1,16 @@
+using PostFundManagement.Domain.Abstractions;
+
+namespace PostFundManagement.Infrastructure.Database.Services;
+
+public sealed class HeadlessTenantContextService : ITenantContextService
+{
+    public string? TenantName => "Ifri Technologies";
+
+    public long TenantId => 1;
+
+    public bool ByPassTenantQueryFilter { get; set; } = true;
+
+    public bool IsAdmin => true;
+
+    public bool HasTenantFilter => true;
+}
@@ -0,0 +1,40 @@
+# Stage 1: Runtime base
+FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS base
+USER app
+WORKDIR /app
+EXPOSE 8080
+
+# Stage 2: Build & Restore
+FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
+WORKDIR /src
+
+# Copy props and csproj files for layer caching
+COPY ["Directory.Build.props", "./"]
+COPY ["Directory.Packages.props", "./"]
+COPY ["PostFundManagement.snk", "./"]
+COPY ["LICENSE", "./"]
+COPY ["PostFundManagement.Jobs/PostFundManagement.Jobs.csproj", "PostFundManagement.Jobs/"]
+COPY ["PostFundManagement.Application/PostFundManagement.Application.csproj", "PostFundManagement.Application/"]
+COPY ["PostFundManagement.Domain/PostFundManagement.Domain.csproj", "PostFundManagement.Domain/"]
+COPY ["PostFundManagement.Infrastructure/PostFundManagement.Infrastructure.csproj", "PostFundManagement.Infrastructure/"]
+
+# Restore packages
+RUN dotnet restore "PostFundManagement.Jobs/PostFundManagement.Jobs.csproj"
+
+# Copy full source code
+COPY . .
+
+# Build from the project folder using relative filename
+WORKDIR "/src/PostFundManagement.Jobs"
+RUN dotnet build "PostFundManagement.Jobs.csproj" -c Release -o /app/build
+
+# Stage 3: Publish
+FROM build AS publish
+ARG BUILD_CONFIGURATION=Release
+RUN dotnet publish "PostFundManagement.Jobs.csproj" -c Release -o /app/publish /p:UseAppHost=false
+
+# Stage 4: Final Runtime
+FROM base AS final
+WORKDIR /app
+COPY --from=publish /app/publish .
+ENTRYPOINT ["dotnet", "PostFundManagement.Jobs.dll"]
@@ -0,0 +1,21 @@
+using PostFundManagement.Domain.Abstractions;
+
+namespace PostFundManagement.Jobs;
+
+public class JobsWorker(IJobOrchestrator jobOrchestrator, IFeatureManager featureManager, 
+    ILogger<JobsWorker> logger) : BackgroundService
+{
+    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
+    {
+        if(!await featureManager.IsEnabledAsync(nameof(JobsWorker)))
+        {
+            logger.LogInformation("JobsWorker is disabled.");
+
+            return;
+        }
+
+        // TODO: scheduler reccuring jobs
+
+        logger.LogInformation("JobsWorker is stopping.");
+    }
+}
@@ -0,0 +1,31 @@
+<Project Sdk="Microsoft.NET.Sdk.Worker">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <UserSecretsId>dotnet-PostFundManagement.Jobs-97b98845-fddb-4212-b877-8dac9f7f86e3</UserSecretsId>
+  </PropertyGroup>
+
+  <!-- File Nesting -->
+  <ItemGroup>
+    <ProjectCapability Include="ConfigurableFileNesting" />
+    <ProjectCapability Include="ConfigurableFileNestingFeatureEnabled" />
+  </ItemGroup>
+
+  <!-- CQRS Source Generator -->
+  <ItemGroup>
+    <PackageReference Include="Mediator.SourceGenerator">
+      <PrivateAssets>all</PrivateAssets>
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+    </PackageReference>
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.Extensions.Hosting" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\PostFundManagement.Application\PostFundManagement.Application.csproj" />
+  </ItemGroup>
+</Project>
@@ -0,0 +1,40 @@
+using PostFundManagement.Application.Extensions;
+using PostFundManagement.Domain.Abstractions;
+using PostFundManagement.Domain.Mediator;
+using PostFundManagement.Infrastructure.Database.Services;
+using PostFundManagement.Jobs;
+
+var builder = Host.CreateApplicationBuilder(args);
+
+builder.Services.AddFeatureManagement();
+
+builder.Services.AddSharedServices();
+builder.Services.AddHostedService<JobsWorker>();
+builder.Services.AddRegisterServicesWithCaching(builder.Configuration);
+builder.Services.AddEndpointAndServiceCaching(builder.Configuration);
+builder.Services.AddTransient<ITenantContextService, HeadlessTenantContextService>();
+builder.Services.AddSkorubaApiService(builder.Configuration);
+builder.Services.AddHttpContextAccessor();
+
+builder.Services.AddMediator();
+builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
+builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
+
+builder.Services.AddQuartzScheduler(DefaultSchedulerName, builder.Configuration);
+builder.Services.AddEmailServices(builder.Configuration);
+builder.Services.AddHashServices(builder.Configuration);
+builder.Services.AddGarageS3(builder.Configuration);
+
+builder.Services.AddHttpClient();
+builder.Services.AddDataProtectionDatabase(builder.Configuration);
+builder.Services.AddApplicationDbContext(builder.Configuration);
+
+var host = builder.Build();
+
+var schedulerFactory = host.Services.GetRequiredService<ISchedulerFactory>();
+var scheduler = await schedulerFactory.GetScheduler();
+
+if (scheduler!.Status != SchedulerStatus.Running)
+    await scheduler.Start();
+
+host.Run();
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "PostFundManagement.Jobs": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "environmentVariables": {
+        "DOTNET_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}
@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.Hosting.Lifetime": "Information"
+    }
+  }
+}
@@ -0,0 +1,41 @@
+{
+  "FeatureManagement": {
+    "JobsWorker": true,
+    "EmailProcessorJobEnabled": true,
+    "ServiceCaching": false
+  },
+  "GeneralS3Settings": {
+    "ServiceUrl": "https://s3.garage.khongisa.co.za",
+    "Region": "garage",
+    "BucketName": "pfm",
+    "CdnBaseUrl": "https://pfm.cdn.khongisa.co.za"
+  },
+  "MachineIdentitySettings": {
+    "Authority": "https://sts.security.khongisa.co.za",
+    "Scope": "skoruba_identity_admin_api"
+  },
+  "Monitoring": {
+    "Address": "http://aspire-dashboard-service.aspire.svc.cluster.local:18889",
+    "ServiceName": "Pfm.Jobs.DEV"
+  },
+  "Logging": {
+    "LogLevel": {
+      "Default": "Warning",
+      "Quartz": "Error",
+      "Microsoft.AspNetCore": "Warning",
+      "Microsoft.EntityFrameworkCore.Database": "Error",
+      "Microsoft.EntityFrameworkCore.Update": "Error"
+    }
+  },
+  "Email": {
+    "ProcessorJobCron": "0 */5 * * * ?",
+    "SmtpServer": "smtp.example.com",
+    "SmtpPort": 587,
+    "SenderEmail": "noreply@example.com",
+    "SenderName": "Example"
+  },
+  "HasherSettings": {
+    "MinHashLength": 11
+  },
+  "AllowedHosts": "*"
+}
@@ -1,9 +1,9 @@
 # GEMINI_API_KEY: Required for Gemini AI API calls.
-# AI Studio automatically injects this at runtime from user secrets.
-# Users configure this via the Secrets panel in the AI Studio UI.
 GEMINI_API_KEY="MY_GEMINI_API_KEY"

 # APP_URL: The URL where this applet is hosted.
-# AI Studio automatically injects this at runtime with the Cloud Run service URL.
-# Used for self-referential links, OAuth callbacks, and API endpoints.
 APP_URL="MY_APP_URL"
+
+# HasherSettings for HashIds compatibility with backend pfm-api
+VITE_HASHER_MIN_LENGTH="11"
+VITE_HASHER_SALT="TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ=="
@@ -26,22 +26,18 @@ OIDC_AUDIENCE="${VITE_OIDC_AUDIENCE:-${OIDC_AUDIENCE:-${SecuritySettings__Audien
 # 4. OIDC Client ID
 OIDC_CLIENT_ID="${VITE_OIDC_CLIENT_ID:-${OIDC_CLIENT_ID:-${SecuritySettings__ClientId:-${SecuritySettings_ClientId:-${CLIENT_ID:-}}}}}"

-# 5. OIDC Client Secret
-OIDC_CLIENT_SECRET="${VITE_OIDC_CLIENT_SECRET:-${OIDC_CLIENT_SECRET:-${SecuritySettings__ClientSecret:-${SecuritySettings_ClientSecret:-${CLIENT_SECRET:-}}}}}"
-
-# 6. OIDC Scope
+# 5. OIDC Scope
 OIDC_SCOPE="${VITE_OIDC_SCOPE:-${OIDC_SCOPE:-${SecuritySettings__Scope:-${SecuritySettings_Scope:-${SCOPE:-}}}}}"

-# 7. Hasher Settings
-HASHER_SALT="${VITE_HASHER_SALT:-${HASHER_SALT:-${HasherSettings__Salt:-${HasherSettings_Salt:-}}}}}"
-HASHER_MIN_LENGTH="${VITE_HASHER_MIN_LENGTH:-${HASHER_MIN_LENGTH:-${HasherSettings__MinLength:-${HasherSettings_MinLength:-}}}}}"
+# 6. Hasher Settings (Fix: Exactly 4 closing braces matching the 4 open variable expansions)
+HASHER_MIN_LENGTH="${VITE_HASHER_MIN_LENGTH:-${HASHER_MIN_LENGTH:-${HasherSettings__MinLength:-${HasherSettings_MinLength:-11}}}}"

 if [ -d "$TARGET_DIR" ]; then
  echo "[docker-entrypoint] Generating runtime configuration files in $TARGET_DIR..."

  # Generate env-config.js for instant, synchronous window.__RUNTIME_CONFIG__ initialization
+  # Public SPA clients: salt secrets and client secrets must NEVER be injected or exposed in public static files.
  cat <<EOF > "$TARGET_DIR/env-config.js"
-// Generated dynamically at container startup from deployment environment variables
 window.__RUNTIME_CONFIG__ = {
  API_BASE_URL: "${API_BASE_URL}",
  VITE_API_BASE_URL: "${API_BASE_URL}",
@@ -51,12 +47,8 @@ window.__RUNTIME_CONFIG__ = {
  VITE_OIDC_AUDIENCE: "${OIDC_AUDIENCE}",
  OIDC_CLIENT_ID: "${OIDC_CLIENT_ID}",
  VITE_OIDC_CLIENT_ID: "${OIDC_CLIENT_ID}",
-  OIDC_CLIENT_SECRET: "${OIDC_CLIENT_SECRET}",
-  VITE_OIDC_CLIENT_SECRET: "${OIDC_CLIENT_SECRET}",
  OIDC_SCOPE: "${OIDC_SCOPE}",
  VITE_OIDC_SCOPE: "${OIDC_SCOPE}",
-  HASHER_SALT: "${HASHER_SALT}",
-  VITE_HASHER_SALT: "${HASHER_SALT}",
  HASHER_MIN_LENGTH: "${HASHER_MIN_LENGTH}",
  VITE_HASHER_MIN_LENGTH: "${HASHER_MIN_LENGTH}",
  ApiSettings: {
@@ -66,11 +58,9 @@ window.__RUNTIME_CONFIG__ = {
    Authority: "${OIDC_AUTHORITY}",
    Audience: "${OIDC_AUDIENCE}",
    ClientId: "${OIDC_CLIENT_ID}",
-    ClientSecret: "${OIDC_CLIENT_SECRET}",
    Scope: "${OIDC_SCOPE}"
  },
  HasherSettings: {
-    Salt: "${HASHER_SALT}",
    MinHashLength: "${HASHER_MIN_LENGTH}"
  }
 };
@@ -86,11 +76,9 @@ EOF
    "Authority": "${OIDC_AUTHORITY}",
    "Audience": "${OIDC_AUDIENCE}",
    "ClientId": "${OIDC_CLIENT_ID}",
-    "ClientSecret": "${OIDC_CLIENT_SECRET}",
    "Scope": "${OIDC_SCOPE}"
  },
  "HasherSettings": {
-    "Salt": "${HASHER_SALT}",
    "MinHashLength": "${HASHER_MIN_LENGTH}"
  }
 }
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-full bg-slate-950 text-slate-100">
+<html lang="en" class="dark h-full bg-slate-950 text-slate-100">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,8 +10,8 @@
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
  </head>
-  <body class="h-full bg-slate-950 font-sans text-slate-100 antialiased selection:bg-emerald-500/20 selection:text-emerald-300">
-    <div id="root" class="min-h-full flex flex-col"></div>
+  <body class="dark h-full bg-slate-950 font-sans text-slate-100 antialiased selection:bg-emerald-500/20 selection:text-emerald-300">
+    <div id="root" class="min-h-full flex flex-col bg-slate-950 text-slate-100"></div>
    <script src="/env-config.js"></script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
@@ -1,16 +1,15 @@
 {
-  "ApiSettings": {
-    "BaseUrl": "https://api.ifri.khongisa.co.za/"
-  },
+  "_comment": "Runtime configuration for Docker/Kubernetes deployments. Leave values empty in source control so local .env (VITE_*) variables are used during development. Container entrypoint scripts can populate these fields at container startup.",
  "SecuritySettings": {
-    "Authority": "https://sts.security.khongisa.co.za",
-    "Audience": "pfm-api-dev",
-    "ClientId": "pfm-scalar-dev",
-    "ClientSecret": "secret_71f88570a46eb22eb5270b47f69e3332c84d8db85d008f0276cb7431c8872d27",
-    "Scope": "openid profile roles email address pfm-api-dev"
+    "Authority": "",
+    "Audience": "",
+    "ClientId": "",
+    "Scope": ""
+  },
+  "ApiSettings": {
+    "BaseUrl": ""
  },
  "HasherSettings": {
-    "Salt": "TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==",
-    "MinHashLength": 11
+    "MinHashLength": "11"
  }
 }
@@ -1 +1,9 @@
-window.__RUNTIME_CONFIG__ = window.__RUNTIME_CONFIG__ || {};
+// Runtime configuration for development or container environments
+// Note: Secret values (like hashing salt or client secrets) are not exposed here.
+window.__RUNTIME_CONFIG__ = window.__RUNTIME_CONFIG__ || {
+  HASHER_MIN_LENGTH: "11",
+  VITE_HASHER_MIN_LENGTH: "11",
+  HasherSettings: {
+    MinHashLength: "11"
+  }
+};
@@ -2,29 +2,10 @@ import React from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from './lib/queryClient';
-import { AuthProvider, useAuth } from './auth/AuthProvider';
+import { AuthProvider, ProtectedRoute, useAuth } from './auth/AuthProvider';
+import { ToastProvider } from './components/ui/Toast';
 import { LandingPage } from './components/landing/LandingPage';
 import { DashboardPage } from './components/dashboard/DashboardPage';
-import { LaserDivider } from './components/layout/LaserDivider';
-
-function AuthenticatedLayout() {
-  return (
-    <div className="h-screen w-screen overflow-hidden bg-slate-950 text-slate-100 flex flex-row select-none">
-      {/* Fixed-width vertical navigation pane on the left */}
-      <aside className="w-64 sm:w-72 md:w-80 shrink-0 h-full relative flex flex-col">
-        {/* Navigation placeholder / empty clean pane */}
-      </aside>
-
-      {/* Laser beam divider with central light source */}
-      <LaserDivider />
-
-      {/* Content pane occupying the rest of the screen */}
-      <main className="flex-1 h-full min-w-0 relative flex flex-col overflow-y-auto">
-        <DashboardPage />
-      </main>
-    </div>
-  );
-}

 function AppRoutes() {
  const { isAuthenticated, isLoading, login } = useAuth();
@@ -55,16 +36,14 @@ function AppRoutes() {
      <Route
        path="/dashboard"
        element={
-          isAuthenticated ? (
-            <AuthenticatedLayout />
-          ) : (
-            <LandingPage onLogin={login} isLoading={isLoading} />
-          )
+          <ProtectedRoute>
+            <DashboardPage />
+          </ProtectedRoute>
        }
      />
      <Route
        path="*"
-        element={<Navigate to={isAuthenticated ? "/dashboard" : "/"} replace />}
+        element={<Navigate to={isAuthenticated ? '/dashboard' : '/'} replace />}
      />
    </Routes>
  );
@@ -73,11 +52,13 @@ function AppRoutes() {
 export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
+      <ToastProvider>
        <AuthProvider>
          <BrowserRouter>
            <AppRoutes />
          </BrowserRouter>
        </AuthProvider>
+      </ToastProvider>
    </QueryClientProvider>
  );
 }
@@ -0,0 +1,323 @@
+import React, { useMemo } from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from './AuthProvider';
+
+export type RoleClaim =
+  | 'dashboard'
+  | 'governance'
+  | 'projects_milestones'
+  | 'grant_financials'
+  | 'evidence_risks'
+  | 'beneficiaries'
+  | 'change_management'
+  | 'site_visits'
+  | 'compliance'
+  | 'settings_invites'
+  | 'settings_users'
+  | 'settings_auditlog'
+  | 'settings_notifications'
+  | 'tenant_self_service'
+  | 'tenant_management'
+  | 'unrestricted';
+
+export type ClaimAction = 'view' | 'add' | 'update' | 'export' | 'all';
+
+export interface RoleClaimDefinition {
+  claim: RoleClaim;
+  label: string;
+  description: string;
+}
+
+export const ROLE_CLAIM_DEFINITIONS: RoleClaimDefinition[] = [
+  { claim: 'dashboard', label: 'Partner Dashboard', description: 'Overview of ongoing projects, funding awards, and inbox' },
+  { claim: 'governance', label: 'Governance & Structure', description: 'Holding entities, investment portfolios, and statutory programmes' },
+  { claim: 'projects_milestones', label: 'Projects & Milestones', description: 'Work breakdown structure, scheduled milestones, and progress' },
+  { claim: 'grant_financials', label: 'Grant & Financials', description: 'Funding awards, budget line allocations, and disbursements' },
+  { claim: 'evidence_risks', label: 'M&E, Evidence & Risks', description: 'Evidence submission and risk registers' },
+  { claim: 'beneficiaries', label: 'Beneficiaries', description: 'Target demographics, compliance tracking, and outcomes' },
+  { claim: 'change_management', label: 'Change Management', description: 'Contractual change requests, issues, and enactments' },
+  { claim: 'site_visits', label: 'Site Visits', description: 'Physical field inspection reports and inspector findings' },
+  { claim: 'compliance', label: 'Compliance', description: 'Statutory compliance, outcome fulfillment, and risk monitoring' },
+  { claim: 'settings_invites', label: 'Settings Invites', description: 'Statutory onboarding invitations and applicant notifications' },
+  { claim: 'settings_users', label: 'Settings Users', description: 'Direct user account administration and role memberships' },
+  { claim: 'settings_auditlog', label: 'Settings Audit Log', description: 'System-wide activity ledger and telemetry records' },
+  { claim: 'settings_notifications', label: 'Notifications & Messages', description: 'In-app and email communications with the funding organisation' },
+  { claim: 'tenant_self_service', label: 'Tenant Self-Service', description: 'Tenant configuration parameters and self-managed sub-users' },
+  { claim: 'tenant_management', label: 'Tenant Management', description: 'Multi-tenant partition directory and cross-tenant isolation' },
+  { claim: 'unrestricted', label: 'Unrestricted Access', description: 'Full system-wide control' },
+];
+
+export const CLAIM_ACTION_OPTIONS: { action: ClaimAction; label: string; description: string }[] = [
+  { action: 'view', label: 'view', description: 'Can view records based on role' },
+  { action: 'add', label: 'add', description: 'Can create records or give feedback; change non-approve statuses' },
+  { action: 'update', label: 'update', description: 'Can use approve status change in dropdowns' },
+  { action: 'export', label: 'export', description: 'Can click export buttons (Spreadsheet/PDF)' },
+  { action: 'all', label: 'all', description: 'Can do everything' },
+];
+
+/**
+ * RBAC on PartnerUI ONLY functions for Partner roles.
+ * No other roles (Admin, Executive, Supervisor, Manager, Contributor) are permitted on this app.
+ */
+export const ROLE_CLAIM_MAP: Record<string, RoleClaim[]> = {
+  partner: [
+    'dashboard',
+    'projects_milestones',
+    'grant_financials',
+    'evidence_risks',
+    'beneficiaries',
+    'change_management',
+    'site_visits',
+    'compliance',
+    'settings_notifications',
+  ],
+};
+
+/**
+ * Checks whether the user's roles include the mandatory 'Partner' role.
+ * On PartnerUI, ONLY users with the 'Partner' role are permitted.
+ */
+export function isPartnerRoleOnlyPermitted(roles: string[] = []): boolean {
+  return Array.isArray(roles) && roles.some((r) => r.toLowerCase().trim() === 'partner');
+}
+
+/**
+ * Resolves action capability set given a claim value string for a Partner user.
+ */
+export function resolveClaimActionSet(
+  claimValue: string | null | undefined,
+  roleName?: string
+): Set<ClaimAction> {
+  const actions = new Set<ClaimAction>();
+  if (!claimValue && !roleName) return actions;
+
+  const rawVal = (claimValue || '').toLowerCase().trim();
+  const role = (roleName || '').toLowerCase().trim();
+
+  // Only Partner role is recognized in PartnerUI
+  if (role && role !== 'partner') {
+    return actions;
+  }
+
+  if (rawVal) {
+    if (rawVal === 'all' || rawVal === 'unrestricted' || rawVal === 'true' || rawVal === '1') {
+      actions.add('all');
+      actions.add('view');
+      actions.add('add');
+      actions.add('update');
+      actions.add('export');
+      return actions;
+    }
+    if (rawVal === 'none' || rawVal === 'restricted' || rawVal === 'false' || rawVal === '0') {
+      return actions;
+    }
+
+    const tokens = rawVal.split(',').map((t) => t.trim());
+    for (const val of tokens) {
+      if (val === 'all') {
+        actions.add('all');
+        actions.add('view');
+        actions.add('add');
+        actions.add('update');
+        actions.add('export');
+      } else if (val === 'view' || val === 'read') {
+        actions.add('view');
+      } else if (val === 'add' || val === 'edit' || val === 'write' || val === 'create') {
+        actions.add('view');
+        actions.add('add');
+      } else if (val === 'update' || val === 'approve' || val === 'verify') {
+        actions.add('view');
+        actions.add('add');
+        actions.add('update');
+      } else if (val === 'export') {
+        actions.add('view');
+        actions.add('export');
+      }
+    }
+    return actions;
+  }
+
+  // Default fallback for Partner role: view, add (submit evidence, log activities, send messages, execute contract), export
+  if (role === 'partner') {
+    actions.add('view');
+    actions.add('add');
+    actions.add('export');
+  }
+
+  return actions;
+}
+
+/**
+ * Helper to extract explicit claim value from varied dictionary structures
+ */
+export function extractExplicitClaimValue(
+  claims: Record<string, any> = {},
+  claim: RoleClaim
+): string | null {
+  if (!claims || typeof claims !== 'object') return null;
+
+  if (claims[claim] !== undefined && claims[claim] !== null) {
+    return String(claims[claim]).trim();
+  }
+  if (claims[`role_claim:${claim}`] !== undefined) {
+    return String(claims[`role_claim:${claim}`]).trim();
+  }
+  if (claims[`claim:${claim}`] !== undefined) {
+    return String(claims[`claim:${claim}`]).trim();
+  }
+
+  const noUnderscore = claim.replace(/_/g, '');
+  if (claims[noUnderscore] !== undefined) {
+    return String(claims[noUnderscore]).trim();
+  }
+
+  const arrayCandidates = [
+    claims.claims,
+    claims.UserClaims,
+    claims.user_claims,
+    claims.role_claims,
+  ];
+  for (const arr of arrayCandidates) {
+    if (Array.isArray(arr)) {
+      for (const item of arr) {
+        if (typeof item === 'object' && item !== null) {
+          const type = (item.type || item.claimType || item.name || '').toLowerCase().trim();
+          if (type === claim || type === noUnderscore) {
+            return String(item.value || item.claimValue || 'all').trim();
+          }
+        } else if (typeof item === 'string') {
+          const [type, val] = item.split(':').map((s) => s.trim().toLowerCase());
+          if (type === claim || type === noUnderscore) {
+            return val || 'all';
+          }
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Evaluates whether a user with given roles and token claims has permission for a specific claim and action.
+ *
+ * CRITICAL RULE FOR PARTNER UI:
+ * RBAC on PartnerUI ONLY functions for Partner roles. No other roles are permitted on this app.
+ */
+export function evaluateUserPermission(
+  roles: string[] = [],
+  claims: Record<string, any> = {},
+  claim: RoleClaim,
+  action: ClaimAction = 'view'
+): boolean {
+  // Security Gate: Only users with the 'Partner' role are permitted on PartnerUI.
+  const isPartner = isPartnerRoleOnlyPermitted(roles);
+  if (!isPartner) return false;
+
+  // 1. Check if Partner user has explicit claim in claims dictionary
+  const rawClaimValue = extractExplicitClaimValue(claims, claim);
+  if (rawClaimValue !== null && rawClaimValue !== '') {
+    const actionSet = resolveClaimActionSet(rawClaimValue, 'partner');
+    return actionSet.has('all') || actionSet.has(action);
+  }
+
+  // 2. Check Partner base role mappings
+  const allowedClaims = ROLE_CLAIM_MAP['partner'];
+  if (allowedClaims && allowedClaims.includes(claim)) {
+    const actionSet = resolveClaimActionSet(undefined, 'partner');
+    if (actionSet.has('all') || actionSet.has(action)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Evaluates Maker-Checker separation of duties constraint.
+ */
+export function isRecordMaker(
+  createdBy?: string | null,
+  currentUserId?: string | null,
+  currentUserSub?: string | null,
+  currentUserEmail?: string | null
+): boolean {
+  if (!createdBy) return false;
+  const creator = createdBy.trim().toLowerCase();
+  if (currentUserId && creator === currentUserId.trim().toLowerCase()) return true;
+  if (currentUserSub && creator === currentUserSub.trim().toLowerCase()) return true;
+  if (currentUserEmail && creator === currentUserEmail.trim().toLowerCase()) return true;
+  return false;
+}
+
+/**
+ * React hook exposing RBAC evaluation helpers for PartnerUI components.
+ * Enforces that only the Partner role has permissions in this application.
+ */
+export function useRbac() {
+  const { roles, claims, user, sub } = useAuth();
+
+  const permissions = useMemo(() => {
+    const isPartner = isPartnerRoleOnlyPermitted(roles);
+
+    const canAccess = (claim: RoleClaim, action: ClaimAction = 'view'): boolean => {
+      if (!isPartner) return false;
+      return evaluateUserPermission(roles, claims, claim, action);
+    };
+
+    const canView = (claim: RoleClaim): boolean => canAccess(claim, 'view');
+    const canAdd = (claim: RoleClaim): boolean => canAccess(claim, 'add');
+    const canApprove = (claim: RoleClaim): boolean => canAccess(claim, 'update');
+    const canExport = (claim: RoleClaim): boolean => canAccess(claim, 'export');
+
+    const isMaker = (createdBy?: string | null): boolean => {
+      return isRecordMaker(createdBy, user?.id, sub, user?.email);
+    };
+
+    const canApproveRecord = (claim: RoleClaim, createdBy?: string | null): boolean => {
+      if (!canApprove(claim)) return false;
+      return !isMaker(createdBy);
+    };
+
+    const getApprovalRestrictionReason = (claim: RoleClaim, createdBy?: string | null): string | null => {
+      if (!isPartner) return 'Partner role required';
+      if (!canApprove(claim)) return 'Requires approval permission from the funding organisation';
+      if (isMaker(createdBy)) return 'Maker-Checker policy: Record creators cannot approve their own records';
+      return null;
+    };
+
+    return {
+      isPartner,
+      isUnrestricted: false,
+      canAccess,
+      canView,
+      canAdd,
+      canApprove,
+      canExport,
+      isMaker,
+      canApproveRecord,
+      getApprovalRestrictionReason,
+    };
+  }, [roles, claims, user, sub]);
+
+  return permissions;
+}
+
+/**
+ * Route protection component for claim-restricted screens in PartnerUI.
+ */
+export const ClaimProtectedRoute: React.FC<{
+  claim: RoleClaim;
+  action?: ClaimAction;
+  children: React.ReactNode;
+}> = ({ claim, action = 'view', children }) => {
+  const { canAccess } = useRbac();
+  const allowed = canAccess(claim, action);
+
+  if (!allowed) {
+    return React.createElement(Navigate, { to: '/dashboard', replace: true });
+  }
+
+  return React.createElement(React.Fragment, null, children);
+};
+
@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useNavigate } from 'react-router-dom';
+import {
+  RefreshCw,
+  LogOut,
+  Building2,
+  Clock,
+  ArrowLeft,
+  Sparkles,
+} from 'lucide-react';
+import { PfmPartnerLogo } from '../common/PfmPartnerLogo';
+import { AuthUserProfile, UserClaims } from '../../auth/AuthProvider';
+import { cancelSessionExpiration, dismissSubordinateModals } from '../../services/sessionExpiration';
+
+interface AccountActivationModalProps {
+  user: AuthUserProfile | null;
+  claims: UserClaims;
+  sub: string;
+  onSync: (force?: boolean) => Promise<{ success: boolean; isUnauthorized?: boolean; errorMessage?: string }>;
+  onLogout: () => Promise<void>;
+  initialError?: string | null;
+}
+
+const formatLockoutMessage = (msg?: string | null): string | null => {
+  if (!msg) return null;
+  const trimmed = msg.trim();
+  if (/^network\s*error$/i.test(trimmed)) {
+    return 'Permission Check';
+  }
+  return trimmed.replace(/network\s*error/gi, 'Permission Check');
+};
+
+export const AccountActivationModal: React.FC<AccountActivationModalProps> = ({
+  user,
+  claims,
+  onSync,
+  onLogout,
+  initialError,
+}) => {
+  const navigate = useNavigate();
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(formatLockoutMessage(initialError) || null);
+
+  useEffect(() => {
+    if (initialError !== undefined) {
+      setErrorMessage(formatLockoutMessage(initialError));
+    }
+  }, [initialError]);
+
+  useEffect(() => {
+    cancelSessionExpiration();
+    dismissSubordinateModals();
+  }, []);
+
+  const displayName =
+    user?.name ||
+    (claims.name as string) ||
+    (claims.preferred_username as string) ||
+    'Partner';
+
+  const tenant = user?.tenant || (claims.tenant as string) || (claims.org as string) || 'Partner Organisation';
+
+  const handleSyncClick = async () => {
+    if (isSyncing) return;
+    setIsSyncing(true);
+    setErrorMessage(null);
+
+    try {
+      const result = await onSync(true);
+
+      if (result.isUnauthorized) {
+        await onLogout();
+        navigate('/', { replace: true });
+        return;
+      }
+
+      if (!result.success) {
+        setErrorMessage(
+          formatLockoutMessage(
+            result.errorMessage ||
+              'Activation is still being reviewed by your funding administrator. Please check back shortly.'
+          )
+        );
+      }
+    } catch (err: unknown) {
+      const errObj = err as { response?: { status?: number }; message?: string };
+      if (errObj?.response?.status === 401) {
+        await onLogout();
+        navigate('/', { replace: true });
+        return;
+      }
+      setErrorMessage('Permission Check: Unable to verify activation right now. Please try again in a few moments.');
+    } finally {
+      setIsSyncing(false);
+    }
+  };
+
+  const handleSignOut = async () => {
+    await onLogout();
+    navigate('/', { replace: true });
+  };
+
+  const handleNavigateLanding = () => {
+    navigate('/');
+  };
+
+  const modalContent = (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="activation-modal-title"
+      className="fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-6 bg-slate-950/80 backdrop-blur-2xl animate-in fade-in duration-300 select-none overflow-y-auto"
+    >
+      {/* Background ambient lighting matching LandingPage */}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-gradient-to-tr from-emerald-500/15 via-teal-500/10 to-cyan-500/15 blur-[120px] rounded-full" />
+      </div>
+
+      <div
+        className="relative w-full max-w-md rounded-3xl border border-white/10 bg-slate-900/85 backdrop-blur-xl shadow-[0_25px_60px_rgba(0,0,0,0.85),inset_0_1px_1px_rgba(255,255,255,0.15)] overflow-hidden flex flex-col items-center text-center p-8 sm:p-10 my-auto space-y-6"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Glowing Brand Icon Lockup */}
+        <div className="relative flex items-center justify-center pt-2">
+          <div className="absolute -inset-3 rounded-full bg-emerald-500/20 blur-xl animate-pulse" />
+          <PfmPartnerLogo className="h-16 w-16 drop-shadow-[0_8px_24px_rgba(16,185,129,0.35)] relative z-10" />
+        </div>
+
+        {/* Title & Organization Pill */}
+        <div className="space-y-2">
+          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-[11px] font-semibold text-emerald-300">
+            <Clock className="w-3.5 h-3.5 text-emerald-400" />
+            <span>Activation Pending</span>
+          </div>
+          <h2 id="activation-modal-title" className="text-2xl font-bold tracking-tight text-white">
+            Welcome,{' '}
+            <span className="bg-gradient-to-r from-emerald-300 via-teal-200 to-cyan-300 bg-clip-text text-transparent">
+              {displayName}
+            </span>
+          </h2>
+          <div className="inline-flex items-center gap-1.5 text-xs text-slate-400 font-medium">
+            <Building2 className="w-3.5 h-3.5 text-teal-400 shrink-0" />
+            <span>{tenant}</span>
+          </div>
+        </div>
+
+        {/* Core Friendly Message */}
+        <p className="text-sm text-slate-300 leading-relaxed max-w-sm">
+          Your credentials have been authenticated. Your funding administrator is finalizing your portfolio access.
+        </p>
+
+        {/* Notice badge if check returned not yet ready */}
+        {errorMessage && (
+          <div className="w-full rounded-2xl bg-amber-500/10 border border-amber-500/20 p-3 text-xs text-amber-300/90 leading-relaxed text-center flex items-center justify-center gap-2">
+            <Sparkles className="w-4 h-4 text-amber-400 shrink-0" />
+            <span>{formatLockoutMessage(errorMessage)}</span>
+          </div>
+        )}
+
+        {/* Action Button matching Specular / Landing styling */}
+        <div className="w-full space-y-3 pt-2">
+          <button
+            onClick={handleSyncClick}
+            disabled={isSyncing}
+            type="button"
+            id="activation-sync-btn"
+            className="w-full py-3.5 px-6 rounded-2xl bg-gradient-to-r from-emerald-600 via-teal-600 to-emerald-500 hover:from-emerald-500 hover:to-teal-500 active:scale-[0.99] disabled:opacity-60 disabled:pointer-events-none text-white font-bold text-sm tracking-wide shadow-[0_12px_30px_rgba(16,185,129,0.35),inset_0_1px_1px_rgba(255,255,255,0.3)] hover:shadow-[0_16px_36px_rgba(16,185,129,0.5)] transition-all flex items-center justify-center gap-2 cursor-pointer"
+          >
+            <RefreshCw className={`w-4 h-4 text-emerald-100 ${isSyncing ? 'animate-spin' : ''}`} />
+            <span>{isSyncing ? 'Checking Status...' : 'Check Account Status'}</span>
+          </button>
+
+          {/* Minimal Secondary Actions */}
+          <div className="flex items-center justify-center gap-4 text-xs pt-1">
+            <button
+              onClick={handleNavigateLanding}
+              type="button"
+              className="inline-flex items-center gap-1.5 text-slate-400 hover:text-slate-200 transition-colors py-1 cursor-pointer"
+            >
+              <ArrowLeft className="w-3.5 h-3.5" />
+              <span>Landing Page</span>
+            </button>
+            <span className="text-slate-700">•</span>
+            <button
+              onClick={handleSignOut}
+              type="button"
+              className="inline-flex items-center gap-1.5 text-slate-400 hover:text-rose-400 transition-colors py-1 cursor-pointer"
+            >
+              <LogOut className="w-3.5 h-3.5" />
+              <span>Sign Out</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return typeof document !== 'undefined'
+    ? createPortal(modalContent, document.body)
+    : modalContent;
+};
@@ -0,0 +1,111 @@
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useNavigate } from 'react-router-dom';
+import { ShieldCheck, LogOut, ArrowLeft, Lock } from 'lucide-react';
+import { PfmPartnerLogo } from '../common/PfmPartnerLogo';
+import { AuthUserProfile, UserClaims } from '../../auth/AuthProvider';
+import { cancelSessionExpiration, dismissSubordinateModals } from '../../services/sessionExpiration';
+
+interface NonPartnerAccessDeniedModalProps {
+  user: AuthUserProfile | null;
+  claims: UserClaims;
+  sub: string;
+  roles: string[];
+  onLogout: () => Promise<void>;
+}
+
+export const NonPartnerAccessDeniedModal: React.FC<NonPartnerAccessDeniedModalProps> = ({
+  user,
+  claims,
+  roles,
+  onLogout,
+}) => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    cancelSessionExpiration();
+    dismissSubordinateModals();
+  }, []);
+
+  const displayEmail =
+    user?.email ||
+    (claims.email as string) ||
+    (claims['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] as string) ||
+    'Authenticated User';
+
+  const assignedRolesDisplay = roles.length > 0 ? roles.join(', ') : user?.role || (claims.role as string) || 'Standard User';
+
+  const handleLogoutClick = async () => {
+    await onLogout();
+    navigate('/', { replace: true });
+  };
+
+  const handleLandingClick = () => {
+    navigate('/');
+  };
+
+  const modalContent = (
+    <div
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="non-partner-denied-title"
+      className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-2xl animate-in fade-in duration-300 overflow-y-auto"
+    >
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[450px] h-[450px] bg-rose-500/10 blur-[120px] rounded-full" />
+      </div>
+
+      <div
+        className="relative w-full max-w-md rounded-3xl border border-white/10 bg-slate-900/85 backdrop-blur-xl shadow-[0_25px_60px_rgba(0,0,0,0.85),inset_0_1px_1px_rgba(255,255,255,0.15)] overflow-hidden flex flex-col items-center text-center p-8 sm:p-10 my-auto space-y-6"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="relative flex items-center justify-center pt-2">
+          <div className="absolute -inset-3 rounded-full bg-rose-500/20 blur-xl" />
+          <PfmPartnerLogo className="h-16 w-16 drop-shadow-[0_8px_24px_rgba(244,63,94,0.35)] relative z-10" />
+        </div>
+
+        <div className="space-y-2">
+          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-rose-500/10 border border-rose-500/20 text-[11px] font-semibold text-rose-300">
+            <Lock className="w-3.5 h-3.5 text-rose-400" />
+            <span>Partner Access Only</span>
+          </div>
+          <h2 id="non-partner-denied-title" className="text-2xl font-bold tracking-tight text-white">
+            Role Authorization Required
+          </h2>
+        </div>
+
+        <p className="text-sm text-slate-300 leading-relaxed max-w-sm">
+          This portal is reserved for registered Grantee and Partner accounts. Your current profile (<strong className="text-rose-300">{assignedRolesDisplay}</strong>) does not have access.
+        </p>
+
+        <div className="w-full rounded-2xl bg-slate-950/50 border border-white/5 p-3 text-xs text-slate-400 font-mono truncate">
+          Signed in as {displayEmail}
+        </div>
+
+        <div className="w-full space-y-3 pt-2">
+          <button
+            onClick={handleLogoutClick}
+            type="button"
+            className="w-full py-3.5 px-6 rounded-2xl bg-gradient-to-r from-rose-600 via-rose-500 to-amber-600 hover:from-rose-500 hover:to-amber-500 text-white font-bold text-sm tracking-wide shadow-[0_12px_30px_rgba(244,63,94,0.35),inset_0_1px_1px_rgba(255,255,255,0.3)] hover:shadow-[0_16px_36px_rgba(244,63,94,0.5)] transition-all flex items-center justify-center gap-2 cursor-pointer"
+          >
+            <LogOut className="w-4 h-4 text-rose-100" />
+            <span>Switch Account / Sign Out</span>
+          </button>
+
+          <button
+            onClick={handleLandingClick}
+            type="button"
+            className="inline-flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 transition-colors py-1 cursor-pointer"
+          >
+            <ArrowLeft className="w-3.5 h-3.5" />
+            <span>Return to Landing Page</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return typeof document !== 'undefined'
+    ? createPortal(modalContent, document.body)
+    : modalContent;
+};
@@ -0,0 +1,153 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Clock, LogOut, RefreshCw } from 'lucide-react';
+import { PfmPartnerLogo } from '../common/PfmPartnerLogo';
+import { clearSessionAndRedirectToLanding, dismissSubordinateModals } from '../../services/sessionExpiration';
+
+interface SessionExpiredModalProps {
+  isOpen: boolean;
+  onDismiss?: () => void;
+  reason?: string | null;
+  countdownSeconds?: number;
+}
+
+export const SessionExpiredModal: React.FC<SessionExpiredModalProps> = ({
+  isOpen,
+  onDismiss,
+  reason,
+  countdownSeconds = 8,
+}) => {
+  const [timeLeftMs, setTimeLeftMs] = useState(countdownSeconds * 1000);
+  const [isPaused, setIsPaused] = useState(false);
+  const totalDurationMs = countdownSeconds * 1000;
+  const isClearingRef = useRef(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      dismissSubordinateModals();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleCancelled = () => {
+      setTimeLeftMs(countdownSeconds * 1000);
+      setIsPaused(false);
+      isClearingRef.current = false;
+    };
+    window.addEventListener('pfm:session-expired-cancelled', handleCancelled);
+    return () => {
+      window.removeEventListener('pfm:session-expired-cancelled', handleCancelled);
+    };
+  }, [countdownSeconds]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setTimeLeftMs(countdownSeconds * 1000);
+      setIsPaused(false);
+      isClearingRef.current = false;
+      return;
+    }
+
+    const intervalMs = 50;
+    const interval = setInterval(() => {
+      setTimeLeftMs((prev) => {
+        if (isPaused) return prev;
+        const next = prev - intervalMs;
+        if (next <= 0) {
+          clearInterval(interval);
+          handleAction();
+          return 0;
+        }
+        return next;
+      });
+    }, intervalMs);
+
+    return () => clearInterval(interval);
+  }, [isOpen, isPaused, countdownSeconds]);
+
+  const handleAction = () => {
+    if (isClearingRef.current) return;
+    isClearingRef.current = true;
+
+    if (onDismiss) {
+      onDismiss();
+    } else {
+      clearSessionAndRedirectToLanding();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const secondsRemaining = Math.max(0, Math.ceil(timeLeftMs / 1000));
+  const progressPercent = Math.max(0, Math.min(100, (timeLeftMs / totalDurationMs) * 100));
+
+  const modalContent = (
+    <div
+      id="session-expired-modal-backdrop"
+      className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-2xl animate-in fade-in duration-300 overflow-y-auto"
+      onMouseEnter={() => setIsPaused(true)}
+      onMouseLeave={() => setIsPaused(false)}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="session-expired-title"
+    >
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[450px] h-[450px] bg-amber-500/10 blur-[120px] rounded-full" />
+      </div>
+
+      <div
+        id="session-expired-modal-content"
+        className="relative w-full max-w-md rounded-3xl border border-white/10 bg-slate-900/85 backdrop-blur-xl shadow-[0_25px_60px_rgba(0,0,0,0.85),inset_0_1px_1px_rgba(255,255,255,0.15)] overflow-hidden flex flex-col items-center text-center p-8 sm:p-10 my-auto space-y-6"
+      >
+        <div className="relative flex items-center justify-center pt-2">
+          <div className="absolute -inset-3 rounded-full bg-amber-500/20 blur-xl" />
+          <PfmPartnerLogo className="h-16 w-16 drop-shadow-[0_8px_24px_rgba(245,158,11,0.35)] relative z-10" />
+        </div>
+
+        <div className="space-y-2">
+          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/20 text-[11px] font-semibold text-amber-300">
+            <Clock className="w-3.5 h-3.5 text-amber-400" />
+            <span>Session Expired</span>
+          </div>
+          <h2 id="session-expired-title" className="text-2xl font-bold tracking-tight text-white">
+            Security Session Ended
+          </h2>
+        </div>
+
+        <p className="text-sm text-slate-300 leading-relaxed max-w-sm">
+          {reason
+            ? reason.replace(/network\s*error/gi, 'Permission Check')
+            : 'Your security credentials have expired for your protection. Please sign in again to continue.'}
+        </p>
+
+        {/* Smooth Countdown Bar */}
+        <div className="w-full space-y-2">
+          <div className="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-gradient-to-r from-emerald-400 to-teal-400 transition-all duration-75 ease-linear rounded-full"
+              style={{ width: `${progressPercent}%` }}
+            />
+          </div>
+          <span className="text-[11px] text-slate-400 font-mono">
+            Redirecting in {secondsRemaining}s
+          </span>
+        </div>
+
+        <div className="w-full pt-1">
+          <button
+            onClick={handleAction}
+            type="button"
+            className="w-full py-3.5 px-6 rounded-2xl bg-gradient-to-r from-emerald-600 via-teal-600 to-emerald-500 hover:from-emerald-500 hover:to-teal-500 text-white font-bold text-sm tracking-wide shadow-[0_12px_30px_rgba(16,185,129,0.35),inset_0_1px_1px_rgba(255,255,255,0.3)] hover:shadow-[0_16px_36px_rgba(16,185,129,0.5)] transition-all flex items-center justify-center gap-2 cursor-pointer"
+          >
+            <RefreshCw className="w-4 h-4 text-emerald-100" />
+            <span>Sign In Again Now</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return typeof document !== 'undefined'
+    ? createPortal(modalContent, document.body)
+    : modalContent;
+};
@@ -1,6 +1,15 @@
-import React, { useState } from 'react';
-import { api, extractApiErrors } from '../../services/api';
-import { Activity, Milestone, Project, EvidenceType } from '../../services/api/models';
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useQuery } from '@tanstack/react-query';
+import {
+  uploadEvidenceFile,
+  extractApiErrors,
+  toIntegerId,
+  getProjectIndicators,
+  recordIndicatorActual,
+} from '../../services/api';
+import { Activity, Milestone, Project, Indicator } from '../../services/api/models';
+import { EVIDENCE_TYPE_OPTIONS } from '../../lib/formatters';
 import {
  X,
  UploadCloud,
@@ -10,14 +19,15 @@ import {
  Loader2,
  Plus,
  Sparkles,
-  Link as LinkIcon
+  Target,
+  BarChart3,
 } from 'lucide-react';

 interface EvidenceUploadModalProps {
  isOpen: boolean;
  onClose: () => void;
  project: Project;
-  milestone?: Milestone;
+  milestone?: Milestone | null;
  activity: Activity;
  onEvidenceUploaded: () => void;
 }
@@ -32,14 +42,45 @@ export const EvidenceUploadModal: React.FC<EvidenceUploadModalProps> = ({
 }) => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [title, setTitle] = useState('');
-  const [documentUrl, setDocumentUrl] = useState('');
-  const [evidenceType, setEvidenceType] = useState<EvidenceType>(1); // Invoice / Document
+  const [evidenceType, setEvidenceType] = useState<number>(4); // Default: FinancialInvoiceOrReceipt
  const [description, setDescription] = useState('');
+  const [selectedIndicatorId, setSelectedIndicatorId] = useState<string>('');
+  const [actualAmount, setActualAmount] = useState<string>('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessages, setErrorMessages] = useState<string[]>([]);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);

-  if (!isOpen) return null;
+  const projectId = project?.id || 0;
+
+  // Requirement #4: Fetch linked indicators for project & activity
+  const { data: projectIndicators = [], isLoading: isLoadingIndicators } = useQuery<Indicator[]>({
+    queryKey: ['evidence-project-indicators', String(projectId)],
+    queryFn: () => getProjectIndicators(projectId),
+    enabled: isOpen && Boolean(projectId),
+  });
+
+  // Prioritize indicators directly linked to this activity, then project indicators
+  const availableIndicators = React.useMemo(() => {
+    if (!projectIndicators || projectIndicators.length === 0) return [];
+    const directMatches = projectIndicators.filter(
+      ind => ind.activityId && String(ind.activityId) === String(activity.id)
+    );
+    if (directMatches.length > 0) return directMatches;
+    return projectIndicators;
+  }, [projectIndicators, activity.id]);
+
+  // Auto-select first indicator if available
+  useEffect(() => {
+    if (availableIndicators.length > 0 && !selectedIndicatorId) {
+      const firstId = String(availableIndicators[0].id);
+      setSelectedIndicatorId(firstId);
+      if (availableIndicators[0].actualAmount !== undefined) {
+        setActualAmount(String(availableIndicators[0].actualAmount || ''));
+      }
+    }
+  }, [availableIndicators, selectedIndicatorId]);
+
+  if (!isOpen || typeof document === 'undefined') return null;

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
@@ -51,66 +92,94 @@ export const EvidenceUploadModal: React.FC<EvidenceUploadModalProps> = ({
    }
  };

+  const selectedIndicatorObj = availableIndicators.find(
+    i => String(i.id) === String(selectedIndicatorId)
+  );
+
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMessages([]);
    setSuccessMessage(null);

-    if (!title.trim() && !selectedFile && !documentUrl.trim()) {
-      setErrorMessages(['Please provide an evidence title, file upload, or document URL.']);
+    if (!selectedFile) {
+      setErrorMessages(['A supporting document file is required. Please choose a file to upload.']);
+      return;
+    }
+
+    const numProjectId = toIntegerId(project.id);
+    const numActivityId = toIntegerId(activity.id);
+    const numMilestoneId = toIntegerId(milestone?.id || activity.milestoneId || 0);
+    const numIndicatorId = toIntegerId(selectedIndicatorId);
+
+    // Requirement #4: IndicatorId must not be 0 to maintain referential integrity in database
+    if (!numIndicatorId || numIndicatorId <= 0) {
+      setErrorMessages([
+        'A valid linked Indicator is mandatory for evidence verification. Please select an indicator from the list.',
+      ]);
+      return;
+    }
+
+    if (!actualAmount.trim() || isNaN(Number(actualAmount))) {
+      setErrorMessages([
+        'Recording an Actual amount/metric against the selected indicator is mandatory. Please provide a numeric value.',
+      ]);
+      return;
+    }
+
+    if (!numProjectId || !numActivityId) {
+      setErrorMessages(['Cannot upload evidence: Missing projectId or activityId reference.']);
      return;
    }

    setIsSubmitting(true);

    try {
-      // Build upload payload
+      // 1. Build multipart/form-data adhering strictly to EvidenceService.CreateEvidenceAsync
+      // Requirement #7: When uploading, IForm does not need the userId field in it; API detects userId from JWT sub
      const formData = new FormData();
-      if (selectedFile) {
      formData.append('file', selectedFile);
+      formData.append('projectId', String(numProjectId));
+      formData.append('activityId', String(numActivityId));
+      formData.append('milestoneId', String(numMilestoneId));
+      formData.append('indicatorId', String(numIndicatorId));
+      formData.append('type', String(Number(evidenceType) || 4));
+      formData.append('title', title.trim() || selectedFile.name);
+      if (description.trim()) {
+        formData.append('description', description.trim());
      }
-      formData.append('title', title.trim() || selectedFile?.name || 'Evidence Deliverable');
-      formData.append('projectId', String(project.id || ''));
-      if (milestone?.id) formData.append('milestoneId', String(milestone.id));
-      if (activity?.id) formData.append('activityId', String(activity.id));
-      formData.append('type', String(evidenceType));
-      if (documentUrl.trim()) formData.append('documentUrl', documentUrl.trim());
-      if (description.trim()) formData.append('description', description.trim());

-      // Also support JSON payload fallback if server expects JSON body
+      // 2. Upload evidence file
+      await uploadEvidenceFile(formData);
+
+      // 3. Requirement #4: Record Actual against linked indicator
+      const parsedActual = Number(actualAmount);
+      if (!isNaN(parsedActual)) {
        try {
-        await api.evidence.createEvidenceFile(formData);
-      } catch (err: any) {
-        // Fallback: Attempt JSON payload if multipart failed or route expects JSON
-        const jsonPayload = {
-          projectId: project.id,
-          milestoneId: milestone?.id,
-          activityId: activity.id,
-          title: title.trim() || selectedFile?.name || 'Evidence Deliverable',
-          type: evidenceType,
-          documentUrl: documentUrl.trim() || (selectedFile ? `s3://evidence/${selectedFile.name}` : undefined),
-          description: description.trim(),
-        };
-        await api.evidence.createEvidenceFile(jsonPayload);
+          await recordIndicatorActual(numIndicatorId, parsedActual);
+        } catch (indErr) {
+          console.warn('[Record Indicator Actual Warning]:', indErr);
+        }
      }

-      setSuccessMessage('Evidence successfully uploaded and linked to activity!');
+      setSuccessMessage('Evidence successfully uploaded and linked to activity with recorded indicator actual!');
      setTimeout(() => {
        onEvidenceUploaded();
        onClose();
-      }, 1000);
+      }, 800);
    } catch (err: any) {
      console.error('[Evidence Upload Error]:', err);
      const errors = extractApiErrors(err);
-      setErrorMessages(errors);
+      setErrorMessages(
+        errors.length > 0 ? errors : ['Failed to upload evidence file. Please verify parameters and try again.']
+      );
    } finally {
      setIsSubmitting(false);
    }
  };

-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-200">
-      <div className="relative w-full max-w-lg rounded-3xl border border-white/15 bg-slate-900/95 p-6 shadow-2xl backdrop-blur-2xl text-slate-100 overflow-hidden">
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-200 overflow-y-auto">
+      <div className="relative w-full max-w-lg rounded-3xl border border-white/15 bg-slate-900/95 p-6 shadow-2xl backdrop-blur-2xl text-slate-100 overflow-hidden my-auto">
        {/* Ambient background glow */}
        <div className="absolute top-0 right-0 -mr-16 -mt-16 w-60 h-60 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none" />

@@ -124,6 +193,7 @@ export const EvidenceUploadModal: React.FC<EvidenceUploadModalProps> = ({
            <h3 className="text-base font-bold text-white">Upload Activity Deliverable</h3>
          </div>
          <button
+            type="button"
            onClick={onClose}
            className="p-1.5 rounded-xl hover:bg-white/10 text-slate-400 hover:text-white transition-colors cursor-pointer"
          >
@@ -146,12 +216,12 @@ export const EvidenceUploadModal: React.FC<EvidenceUploadModalProps> = ({
          </div>
        </div>

-        {/* Error Alerts (Comma-delimited error list from ProblemDetails) */}
+        {/* Error Alerts */}
        {errorMessages.length > 0 && (
          <div className="mb-4 p-3.5 rounded-2xl bg-rose-950/60 border border-rose-500/30 text-rose-200 text-xs space-y-1">
            <div className="flex items-center gap-1.5 font-bold text-rose-300">
              <AlertTriangle className="w-4 h-4 text-rose-400 shrink-0" />
-              <span>Validation Notice ({errorMessages.length} issue{errorMessages.length > 1 ? 's' : ''}):</span>
+              <span>Upload Notice ({errorMessages.length} issue{errorMessages.length > 1 ? 's' : ''}):</span>
            </div>
            <ul className="list-disc pl-5 space-y-0.5 text-[11px] text-rose-200/90 font-mono">
              {errorMessages.map((msg, idx) => (
@@ -173,10 +243,13 @@ export const EvidenceUploadModal: React.FC<EvidenceUploadModalProps> = ({
        <form onSubmit={handleSubmit} className="space-y-4 text-xs">
          {/* File Dropzone */}
          <div>
-            <label className="block text-slate-300 font-medium mb-1.5">Evidence File (Document, Receipt, Report)</label>
+            <label className="block text-slate-300 font-medium mb-1.5">
+              Evidence File (Document, Invoice, Certificate, Photo) <span className="text-emerald-400">*</span>
+            </label>
            <div className="relative border-2 border-dashed border-white/15 hover:border-emerald-500/50 rounded-2xl p-4 text-center bg-white/[0.02] hover:bg-emerald-500/[0.02] transition-colors cursor-pointer">
              <input
                type="file"
+                required
                onChange={handleFileChange}
                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
              />
@@ -193,23 +266,88 @@ export const EvidenceUploadModal: React.FC<EvidenceUploadModalProps> = ({
                  </div>
                ) : (
                  <div>
-                    <span className="font-medium text-slate-300">Click to upload file</span>
-                    <p className="text-[11px] text-slate-500 mt-0.5">PDF, DOCX, XLSX, PNG, JPG (Max 25MB)</p>
+                    <span className="font-medium text-slate-300">Click to choose document</span>
+                    <p className="text-[11px] text-slate-500 mt-0.5">
+                      PDF, DOCX, XLSX, PNG, JPG (Multiple uploads supported)
+                    </p>
                  </div>
                )}
              </div>
            </div>
          </div>

+          {/* Requirement #4: Mandatory Indicator Selection & Actual Amount Recording */}
+          <div className="p-3.5 rounded-2xl bg-slate-950/80 border border-emerald-500/30 space-y-3">
+            <div className="flex items-center gap-2 text-emerald-400 font-semibold text-xs">
+              <Target className="w-4 h-4" />
+              <span>Linked Indicator & Performance Actual (Mandatory)</span>
+            </div>
+
+            <div>
+              <label className="block text-slate-300 font-medium mb-1">
+                Select Linked Indicator <span className="text-emerald-400">*</span>
+              </label>
+              {isLoadingIndicators ? (
+                <div className="text-[11px] text-slate-400 py-1">Loading indicators...</div>
+              ) : availableIndicators.length === 0 ? (
+                <div className="text-[11px] text-amber-300 bg-amber-950/40 border border-amber-500/30 p-2.5 rounded-xl">
+                  No indicators currently recorded for this project. Please contact programme management or select standard output.
+                </div>
+              ) : (
+                <select
+                  required
+                  value={selectedIndicatorId}
+                  onChange={e => setSelectedIndicatorId(e.target.value)}
+                  className="w-full px-3 py-2 rounded-xl bg-slate-900 border border-white/10 text-slate-100 focus:outline-none focus:border-emerald-500/50 cursor-pointer"
+                >
+                  <option value="">-- Choose Indicator for this Deliverable --</option>
+                  {availableIndicators.map(ind => (
+                    <option key={ind.id} value={ind.id} className="bg-slate-900 text-slate-100">
+                      {ind.name || `Indicator #${ind.id}`} (Target: {ind.targetAmount} • Baseline: {ind.baselineAmount})
+                    </option>
+                  ))}
+                </select>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-slate-300 font-medium mb-1">
+                Actual Amount / Metric Recorded <span className="text-emerald-400">*</span>
+              </label>
+              <div className="relative">
+                <input
+                  type="number"
+                  step="any"
+                  min="0"
+                  required
+                  placeholder={
+                    selectedIndicatorObj
+                      ? `Target is ${selectedIndicatorObj.targetAmount}`
+                      : 'e.g. 10 or 1500'
+                  }
+                  value={actualAmount}
+                  onChange={e => setActualAmount(e.target.value)}
+                  className="w-full px-3.5 py-2 rounded-xl bg-slate-900 border border-white/10 text-slate-100 placeholder:text-slate-500 focus:outline-none focus:border-emerald-500/50"
+                />
+                <BarChart3 className="w-4 h-4 text-emerald-400 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" />
+              </div>
+              {selectedIndicatorObj && (
+                <p className="text-[11px] text-slate-400 mt-1">
+                  Baseline: {selectedIndicatorObj.baselineAmount} • Target: {selectedIndicatorObj.targetAmount} • Current Actual: {selectedIndicatorObj.actualAmount}
+                </p>
+              )}
+            </div>
+          </div>
+
          {/* Evidence Title & Type */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-slate-300 font-medium mb-1">Evidence Title</label>
              <input
                type="text"
-                placeholder="e.g. Audit Signoff Dossier"
+                placeholder="e.g. Activity Verification Proof"
                value={title}
-                onChange={(e) => setTitle(e.target.value)}
+                onChange={e => setTitle(e.target.value)}
                className="w-full px-3 py-2 rounded-xl bg-slate-950/70 border border-white/10 text-slate-200 placeholder:text-slate-500 focus:outline-none focus:border-emerald-500/50"
              />
            </div>
@@ -217,42 +355,26 @@ export const EvidenceUploadModal: React.FC<EvidenceUploadModalProps> = ({
              <label className="block text-slate-300 font-medium mb-1">Evidence Type</label>
              <select
                value={evidenceType}
-                onChange={(e) => setEvidenceType(Number(e.target.value) as EvidenceType)}
+                onChange={e => setEvidenceType(Number(e.target.value))}
                className="w-full px-3 py-2 rounded-xl bg-slate-950/70 border border-white/10 text-slate-200 focus:outline-none focus:border-emerald-500/50 cursor-pointer"
              >
-                <option value={0}>Document</option>
-                <option value={1}>Invoice</option>
-                <option value={2}>Receipt</option>
-                <option value={3}>Site Photo</option>
-                <option value={4}>Verification Report</option>
-                <option value={5}>Other Deliverable</option>
+                {EVIDENCE_TYPE_OPTIONS.map(opt => (
+                  <option key={opt.value} value={opt.value} className="bg-slate-900 text-slate-100">
+                    {opt.label}
+                  </option>
+                ))}
              </select>
            </div>
          </div>

-          {/* External Secure URL (Optional) */}
-          <div>
-            <label className="block text-slate-300 font-medium mb-1">Document Link / S3 URI (Optional)</label>
-            <div className="relative">
-              <LinkIcon className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
-              <input
-                type="text"
-                placeholder="https://... or s3://..."
-                value={documentUrl}
-                onChange={(e) => setDocumentUrl(e.target.value)}
-                className="w-full pl-8 pr-3 py-2 rounded-xl bg-slate-950/70 border border-white/10 text-slate-200 placeholder:text-slate-500 focus:outline-none focus:border-emerald-500/50"
-              />
-            </div>
-          </div>
-
          {/* Description / Notes */}
          <div>
-            <label className="block text-slate-300 font-medium mb-1">Deliverable Notes</label>
+            <label className="block text-slate-300 font-medium mb-1">Deliverable Notes (Optional)</label>
            <textarea
              rows={2}
              placeholder="Provide verification notes or audit references..."
              value={description}
-              onChange={(e) => setDescription(e.target.value)}
+              onChange={e => setDescription(e.target.value)}
              className="w-full px-3 py-2 rounded-xl bg-slate-950/70 border border-white/10 text-slate-200 placeholder:text-slate-500 focus:outline-none focus:border-emerald-500/50 resize-none"
            />
          </div>
@@ -280,13 +402,14 @@ export const EvidenceUploadModal: React.FC<EvidenceUploadModalProps> = ({
              ) : (
                <>
                  <Plus className="w-4 h-4" />
-                  <span>Upload & Attach Evidence</span>
+                  <span>Upload & Record Actual</span>
                </>
              )}
            </button>
          </div>
        </form>
      </div>
-    </div>
+    </div>,
+    document.body
  );
 };
@@ -0,0 +1,483 @@
+import React, { useState, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { useQuery } from '@tanstack/react-query';
+import {
+  X,
+  ShieldAlert,
+  ShieldCheck,
+  AlertTriangle,
+  Scale,
+  FileCheck,
+  Info,
+  Calendar,
+  User,
+  Users,
+  CheckCircle2,
+  Clock,
+  Layers,
+  Sparkles,
+  Filter,
+  MapPin,
+  Target,
+} from 'lucide-react';
+import {
+  Project,
+  Milestone,
+  Activity,
+  ComplianceItem,
+  Risk,
+  Rule,
+  Beneficiary,
+  ComplianceStatus,
+} from '../../services/api/models';
+import {
+  getProjectComplianceItems,
+  getProjectBeneficiaries,
+  getProjectRisks,
+  getRules,
+} from '../../services/api';
+import { formatDate } from '../../lib/formatters';
+
+interface GovernanceInfoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  project: Project;
+  milestone?: Milestone | null;
+  activity?: Activity | null;
+  initialTab?: 'compliance' | 'beneficiaries' | 'risks' | 'rules';
+}
+
+export const GovernanceInfoModal: React.FC<GovernanceInfoModalProps> = ({
+  isOpen,
+  onClose,
+  project,
+  milestone,
+  activity,
+  initialTab = 'compliance',
+}) => {
+  const [activeTab, setActiveTab] = useState<'compliance' | 'beneficiaries' | 'risks' | 'rules'>(initialTab);
+  const [selectedBeneficiaryFilter, setSelectedBeneficiaryFilter] = useState<string>('ALL');
+
+  const projectId = project?.id || 0;
+
+  // 1. Fetch compliance items for project
+  const { data: complianceItems = [], isLoading: isLoadingCompliance } = useQuery<ComplianceItem[]>({
+    queryKey: ['governance-compliance', String(projectId)],
+    queryFn: () => getProjectComplianceItems(projectId),
+    enabled: isOpen && Boolean(projectId),
+  });
+
+  // 2. Fetch beneficiaries for project (Requirement: explore compliance items by beneficiary)
+  const { data: projectBeneficiaries = [], isLoading: isLoadingBeneficiaries } = useQuery<Beneficiary[]>({
+    queryKey: ['governance-beneficiaries', String(projectId)],
+    queryFn: () => getProjectBeneficiaries(projectId),
+    enabled: isOpen && Boolean(projectId),
+  });
+
+  // 3. Fetch risks for project
+  const { data: projectRisks = [], isLoading: isLoadingRisks } = useQuery<Risk[]>({
+    queryKey: ['governance-risks', String(projectId)],
+    queryFn: () => getProjectRisks(projectId),
+    enabled: isOpen && Boolean(projectId),
+  });
+
+  // 4. Fetch associated governance rules
+  const { data: governanceRules = [], isLoading: isLoadingRules } = useQuery<Rule[]>({
+    queryKey: ['governance-rules'],
+    queryFn: () => getRules({ page: 1, pageSize: 100 }),
+    enabled: isOpen,
+  });
+
+  // Map of beneficiary by ID for fast lookup
+  const beneficiaryMap = useMemo(() => {
+    const map = new Map<string, Beneficiary>();
+    for (const b of projectBeneficiaries) {
+      if (b && b.id !== undefined && b.id !== null) {
+        map.set(String(b.id), b);
+      }
+    }
+    return map;
+  }, [projectBeneficiaries]);
+
+  // Filter compliance items by selected beneficiary
+  const filteredComplianceItems = useMemo(() => {
+    if (selectedBeneficiaryFilter === 'ALL') {
+      return complianceItems;
+    }
+    if (selectedBeneficiaryFilter === 'PROJECT_WIDE') {
+      return complianceItems.filter(
+        item => !item.beneficiaryId || Number(item.beneficiaryId) === 0
+      );
+    }
+    return complianceItems.filter(
+      item => String(item.beneficiaryId) === selectedBeneficiaryFilter
+    );
+  }, [complianceItems, selectedBeneficiaryFilter]);
+
+  if (!isOpen || typeof document === 'undefined') return null;
+
+  const renderComplianceStatus = (status?: number) => {
+    const s = Number(status);
+    if (s === ComplianceStatus.Met || s === ComplianceStatus.Exceeded) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/15 text-emerald-300 border border-emerald-500/30">
+          <CheckCircle2 className="w-3 h-3 text-emerald-400" />
+          <span>{s === ComplianceStatus.Exceeded ? 'Exceeded' : 'Compliant'}</span>
+        </span>
+      );
+    }
+    return (
+      <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/15 text-rose-300 border border-rose-500/30">
+        <AlertTriangle className="w-3 h-3 text-rose-400" />
+        <span>Action Required (Not Met)</span>
+      </span>
+    );
+  };
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-6 bg-slate-950/85 backdrop-blur-md animate-in fade-in duration-200 overflow-y-auto">
+      <div className="relative w-full max-w-4xl rounded-3xl border border-white/10 bg-slate-900 shadow-2xl p-6 sm:p-8 space-y-6 my-auto text-slate-100 max-h-[90vh] flex flex-col">
+        {/* Modal Header */}
+        <div className="flex items-start justify-between border-b border-white/[0.08] pb-4 shrink-0">
+          <div className="space-y-1">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-md text-[10px] font-mono font-bold bg-emerald-500/15 text-emerald-300 border border-emerald-500/30">
+                <ShieldAlert className="w-3 h-3 text-emerald-400" />
+                <span>Governance & Compliance Guidance</span>
+              </span>
+              {activity ? (
+                <span className="text-[11px] text-slate-400 font-mono">Activity: {activity.title}</span>
+              ) : milestone ? (
+                <span className="text-[11px] text-slate-400 font-mono">Milestone: {milestone.name}</span>
+              ) : (
+                <span className="text-[11px] text-slate-400 font-mono">Project: {project?.name || (project as any)?.title || `#${project?.id || 'PFM'}`}</span>
+              )}
+            </div>
+            <h3 className="text-lg sm:text-xl font-bold text-white tracking-tight">
+              Project Compliance Items, Beneficiaries & Associated Rules
+            </h3>
+            <p className="text-xs text-slate-400">
+              Contractual obligations, beneficiary-linked compliance criteria, risk registers, and institutional rules.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 rounded-xl text-slate-400 hover:text-white hover:bg-white/[0.06] transition-colors cursor-pointer shrink-0"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Tab Navigation */}
+        <div className="flex items-center gap-2 border-b border-white/[0.08] pb-3 shrink-0 flex-wrap">
+          <button
+            type="button"
+            onClick={() => setActiveTab('compliance')}
+            className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-semibold transition-all cursor-pointer ${
+              activeTab === 'compliance'
+                ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 shadow-sm'
+                : 'text-slate-400 hover:text-white hover:bg-white/[0.04]'
+            }`}
+          >
+            <FileCheck className="w-4 h-4" />
+            <span>Compliance Items ({complianceItems.length})</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('beneficiaries')}
+            className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-semibold transition-all cursor-pointer ${
+              activeTab === 'beneficiaries'
+                ? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/40 shadow-sm'
+                : 'text-slate-400 hover:text-white hover:bg-white/[0.04]'
+            }`}
+          >
+            <Users className="w-4 h-4" />
+            <span>Beneficiaries ({projectBeneficiaries.length})</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('risks')}
+            className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-semibold transition-all cursor-pointer ${
+              activeTab === 'risks'
+                ? 'bg-amber-500/20 text-amber-300 border border-amber-500/40 shadow-sm'
+                : 'text-slate-400 hover:text-white hover:bg-white/[0.04]'
+            }`}
+          >
+            <AlertTriangle className="w-4 h-4" />
+            <span>Risk Register ({projectRisks.length})</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('rules')}
+            className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-semibold transition-all cursor-pointer ${
+              activeTab === 'rules'
+                ? 'bg-teal-500/20 text-teal-300 border border-teal-500/40 shadow-sm'
+                : 'text-slate-400 hover:text-white hover:bg-white/[0.04]'
+            }`}
+          >
+            <Scale className="w-4 h-4" />
+            <span>Associated Rules ({governanceRules.length})</span>
+          </button>
+        </div>
+
+        {/* Tab Content Panels */}
+        <div className="flex-1 overflow-y-auto space-y-4 pr-1 [scrollbar-width:thin] [scrollbar-color:#334155_transparent]">
+          {/* TAB 1: COMPLIANCE ITEMS (With Beneficiary Explorer) */}
+          {activeTab === 'compliance' && (
+            <div className="space-y-4">
+              {/* Beneficiary Filter Bar */}
+              <div className="p-3.5 rounded-2xl bg-slate-950/70 border border-white/[0.08] flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div className="flex items-center gap-2 text-xs text-slate-300">
+                  <Filter className="w-4 h-4 text-emerald-400 shrink-0" />
+                  <span className="font-semibold">Explore by Beneficiary:</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <select
+                    value={selectedBeneficiaryFilter}
+                    onChange={e => setSelectedBeneficiaryFilter(e.target.value)}
+                    className="px-3 py-1.5 rounded-xl bg-slate-900 border border-white/10 text-xs text-slate-200 focus:outline-none focus:border-emerald-500/50 cursor-pointer"
+                  >
+                    <option value="ALL">All Compliance Items ({complianceItems.length})</option>
+                    <option value="PROJECT_WIDE">
+                      Project-Wide General Items (
+                      {
+                        complianceItems.filter(
+                          i => !i.beneficiaryId || Number(i.beneficiaryId) === 0
+                        ).length
+                      }
+                      )
+                    </option>
+                    {projectBeneficiaries.map(b => {
+                      const count = complianceItems.filter(
+                        i => String(i.beneficiaryId) === String(b.id)
+                      ).length;
+                      return (
+                        <option key={b.id} value={String(b.id)}>
+                          Beneficiary: {b.name || `Beneficiary #${b.id}`} ({count} items)
+                        </option>
+                      );
+                    })}
+                  </select>
+                </div>
+              </div>
+
+              {isLoadingCompliance ? (
+                <div className="p-8 text-center text-xs text-slate-400">Loading compliance requirements...</div>
+              ) : filteredComplianceItems.length === 0 ? (
+                <div className="p-8 rounded-2xl bg-slate-950/60 border border-white/5 text-center text-xs text-slate-400 space-y-2">
+                  <FileCheck className="w-8 h-8 text-slate-500 mx-auto" />
+                  <p>No compliance items found matching this beneficiary filter.</p>
+                  <p className="text-[11px] text-slate-500">
+                    Switch to &quot;All Compliance Items&quot; to inspect project-wide statutory deliverables.
+                  </p>
+                </div>
+              ) : (
+                filteredComplianceItems.map((item, idx) => {
+                  const linkedBeneficiary = item.beneficiaryId
+                    ? beneficiaryMap.get(String(item.beneficiaryId))
+                    : null;
+                  return (
+                    <div
+                      key={item.id || idx}
+                      className="p-4 rounded-2xl bg-slate-950/70 border border-white/[0.08] space-y-2.5"
+                    >
+                      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <span className="font-semibold text-sm text-slate-100">
+                            {item.title || `Compliance Item #${idx + 1}`}
+                          </span>
+                          {renderComplianceStatus(item.status)}
+                          {linkedBeneficiary ? (
+                            <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-md text-[10px] font-mono bg-cyan-950/80 border border-cyan-500/30 text-cyan-300">
+                              <Users className="w-3 h-3 text-cyan-400" />
+                              <span>Beneficiary: {linkedBeneficiary.name}</span>
+                            </span>
+                          ) : (
+                            <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-md text-[10px] font-mono bg-slate-900 border border-white/10 text-slate-400">
+                              <span>Project-Wide General</span>
+                            </span>
+                          )}
+                        </div>
+                        <div className="text-[11px] text-slate-400 flex items-center gap-1 font-mono">
+                          <Calendar className="w-3.5 h-3.5 text-slate-500" />
+                          <span>Created: {formatDate(item.createdAt)}</span>
+                        </div>
+                      </div>
+                      {item.requirements && (
+                        <p className="text-xs text-slate-300 leading-relaxed">{item.requirements}</p>
+                      )}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+
+          {/* TAB 2: BENEFICIARIES LISTING & EXPLORATION */}
+          {activeTab === 'beneficiaries' && (
+            <div className="space-y-3">
+              {isLoadingBeneficiaries ? (
+                <div className="p-8 text-center text-xs text-slate-400">Loading project beneficiaries...</div>
+              ) : projectBeneficiaries.length === 0 ? (
+                <div className="p-8 rounded-2xl bg-slate-950/60 border border-white/5 text-center text-xs text-slate-400 space-y-2">
+                  <Users className="w-8 h-8 text-slate-500 mx-auto" />
+                  <p>No individual beneficiary cohorts registered for this project.</p>
+                  <p className="text-[11px] text-slate-500">
+                    Beneficiaries are captured during project execution and onboarding.
+                  </p>
+                </div>
+              ) : (
+                projectBeneficiaries.map(ben => {
+                  const linkedItems = complianceItems.filter(
+                    ci => String(ci.beneficiaryId) === String(ben.id)
+                  );
+                  return (
+                    <div
+                      key={ben.id}
+                      className="p-4 rounded-2xl bg-slate-950/70 border border-white/[0.08] space-y-3"
+                    >
+                      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+                        <div className="flex items-center gap-2.5 flex-wrap">
+                          <div className="p-2 rounded-xl bg-cyan-500/10 text-cyan-400">
+                            <Users className="w-4 h-4" />
+                          </div>
+                          <div>
+                            <h4 className="text-sm font-bold text-slate-100">{ben.name || 'Unnamed Beneficiary'}</h4>
+                            <p className="text-[11px] text-slate-400 font-mono">
+                              Category: {ben.category || 'Direct Participant'}
+                              {ben.location && ` • Location: ${ben.location}`}
+                            </p>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center gap-3 text-xs">
+                          <div className="text-right">
+                            <span className="text-[10px] text-slate-500 block uppercase font-bold">Target / Reached</span>
+                            <span className="text-emerald-400 font-mono font-semibold">
+                              {ben.reachedCount ?? 0} / {ben.targetCount ?? 0}
+                            </span>
+                          </div>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setSelectedBeneficiaryFilter(String(ben.id));
+                              setActiveTab('compliance');
+                            }}
+                            className="px-3 py-1.5 rounded-xl bg-cyan-500/15 hover:bg-cyan-500/25 border border-cyan-500/30 text-cyan-300 text-[11px] font-semibold transition-colors cursor-pointer"
+                          >
+                            Explore Compliance ({linkedItems.length})
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+
+          {/* TAB 3: RISK REGISTER */}
+          {activeTab === 'risks' && (
+            <div className="space-y-3">
+              {isLoadingRisks ? (
+                <div className="p-8 text-center text-xs text-slate-400">Loading risk register...</div>
+              ) : projectRisks.length === 0 ? (
+                <div className="p-8 rounded-2xl bg-slate-950/60 border border-white/5 text-center text-xs text-slate-400 space-y-2">
+                  <ShieldCheck className="w-8 h-8 text-emerald-500 mx-auto" />
+                  <p>No high-severity risks recorded for this project.</p>
+                  <p className="text-[11px] text-slate-500">
+                    Maintain milestone delivery cadence to preserve low-risk standing.
+                  </p>
+                </div>
+              ) : (
+                projectRisks.map((risk, idx) => (
+                  <div
+                    key={risk.id || idx}
+                    className="p-4 rounded-2xl bg-slate-950/70 border border-white/[0.08] space-y-2.5"
+                  >
+                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+                      <h4 className="font-semibold text-sm text-slate-100">
+                        {risk.title || `Risk Item #${idx + 1}`}
+                      </h4>
+                      <div className="flex items-center gap-2 text-[10px] font-mono">
+                        <span className="px-2 py-0.5 rounded-md bg-amber-500/15 text-amber-300 border border-amber-500/30">
+                          Likelihood: {risk.likelihood ?? 'Medium'}
+                        </span>
+                        <span className="px-2 py-0.5 rounded-md bg-rose-500/15 text-rose-300 border border-rose-500/30">
+                          Impact: {risk.impact ?? 'Moderate'}
+                        </span>
+                      </div>
+                    </div>
+                    {risk.description && (
+                      <p className="text-xs text-slate-300 leading-relaxed">{risk.description}</p>
+                    )}
+                    {risk.mitigation && (
+                      <div className="text-[11px] text-teal-300 bg-teal-950/40 border border-teal-500/20 p-2.5 rounded-xl">
+                        <strong>Mitigation Strategy:</strong> {risk.mitigation}
+                      </div>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+
+          {/* TAB 4: ASSOCIATED GOVERNANCE RULES */}
+          {activeTab === 'rules' && (
+            <div className="space-y-3">
+              {isLoadingRules ? (
+                <div className="p-8 text-center text-xs text-slate-400">Loading institutional rules...</div>
+              ) : governanceRules.length === 0 ? (
+                <div className="p-8 rounded-2xl bg-slate-950/60 border border-white/5 text-center text-xs text-slate-400 space-y-2">
+                  <Scale className="w-8 h-8 text-slate-500 mx-auto" />
+                  <p>Standard PFM Funding Portfolio Governance Rules apply.</p>
+                  <p className="text-[11px] text-slate-500">
+                    All disbursements gate against verified milestone deliverables and evidence.
+                  </p>
+                </div>
+              ) : (
+                governanceRules.map((rule, idx) => (
+                  <div
+                    key={rule.id || idx}
+                    className="p-4 rounded-2xl bg-slate-950/70 border border-white/[0.08] space-y-2"
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <h4 className="font-semibold text-sm text-slate-100">
+                        {rule.name || `Rule #${idx + 1}`}
+                      </h4>
+                      <span className="text-[10px] font-mono px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 border border-white/10">
+                        v{rule.version || 1}
+                      </span>
+                    </div>
+                    {rule.description && (
+                      <p className="text-xs text-slate-300 leading-relaxed">{rule.description}</p>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Modal Footer */}
+        <div className="flex items-center justify-between pt-3 border-t border-white/[0.08] shrink-0">
+          <span className="text-[11px] text-slate-500 font-mono">
+            PFM Governance Architecture • Beneficiary & Compliance Tracking
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold transition-colors cursor-pointer"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
@@ -0,0 +1,116 @@
+import React, { useState, useMemo } from 'react';
+import { Copy, Check } from 'lucide-react';
+import { NotificationPlatform } from '../../types';
+import { parseMarkdownToHtml, isHtmlContent, stripMarkdown } from '../../lib/markdownUtils';
+
+export interface MessageViewerProps {
+  content?: string;
+  message?: string;
+  platform?: NotificationPlatform | number | string;
+  subject?: string;
+  className?: string;
+  showFormatHeader?: boolean;
+  maxHeightClass?: string;
+  variant?: string;
+  createdDate?: string;
+}
+
+export const MessageViewer: React.FC<MessageViewerProps> = ({
+  content,
+  message,
+  platform,
+  subject,
+  className = '',
+  maxHeightClass = 'max-h-[65vh]',
+}) => {
+  const rawContent = (content !== undefined && content !== null ? content : message) ?? '';
+  const [copied, setCopied] = useState(false);
+
+  // Determine whether this message represents an Email (HTML) or In-App (Markdown)
+  const isEmail = useMemo(() => {
+    if (
+      platform === NotificationPlatform.Email ||
+      platform === 1 ||
+      platform === '1' ||
+      String(platform).toLowerCase() === 'email'
+    ) {
+      return true;
+    }
+    if (
+      platform !== NotificationPlatform.InApp &&
+      platform !== 5 &&
+      platform !== '5' &&
+      String(platform).toLowerCase() !== 'inapp' &&
+      isHtmlContent(rawContent)
+    ) {
+      return true;
+    }
+    return false;
+  }, [platform, rawContent]);
+
+  // Requirement #1: In-App message contents encoded as markdown, rendered for user; Email in HTML
+  // Requirement #8: User is none the wiser of raw form or format in any Messages UI
+  const renderedHtml = useMemo(() => {
+    if (!rawContent || !rawContent.trim()) {
+      return '<p class="text-slate-400 italic">No message content</p>';
+    }
+
+    if (isEmail) {
+      if (isHtmlContent(rawContent)) {
+        return rawContent.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+      }
+      return parseMarkdownToHtml(rawContent);
+    }
+
+    // In-App: parsed from Markdown to styled HTML
+    return parseMarkdownToHtml(rawContent);
+  }, [rawContent, isEmail]);
+
+  const handleCopy = () => {
+    const textToCopy = stripMarkdown(rawContent) || rawContent;
+    navigator.clipboard.writeText(textToCopy);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={`flex flex-col rounded-2xl bg-slate-900/60 border border-white/10 overflow-hidden w-full max-w-full ${className}`}>
+      {/* Top action toolbar - clean without technical format metadata */}
+      <div className="px-5 py-3 border-b border-white/[0.08] bg-[#0b101d]/90 flex items-center justify-between text-xs text-slate-400 gap-3 shrink-0">
+        <span className="text-xs font-semibold text-slate-200 truncate">
+          {subject || 'Message Content'}
+        </span>
+
+        {/* Copy Clean Text */}
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-800/90 hover:bg-slate-700 text-slate-300 hover:text-white text-xs font-medium transition cursor-pointer border border-white/10"
+          title="Copy message content"
+        >
+          {copied ? (
+            <>
+              <Check className="w-3.5 h-3.5 text-emerald-400" />
+              <span className="text-emerald-300">Copied</span>
+            </>
+          ) : (
+            <>
+              <Copy className="w-3.5 h-3.5 text-slate-400" />
+              <span>Copy</span>
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Rendered Body - Prose & Markdown styling */}
+      <div
+        className={`w-full max-w-full p-5 sm:p-7 overflow-x-auto overflow-y-auto ${maxHeightClass} text-sm leading-relaxed text-slate-200 [scrollbar-width:thin] [scrollbar-color:#334155_transparent]`}
+      >
+        <div
+          className="prose prose-invert max-w-full w-full break-words [word-break:break-word] text-xs sm:text-sm leading-relaxed text-slate-200 [&_h1]:text-white [&_h1]:text-xl [&_h1]:font-bold [&_h1]:mb-3 [&_h2]:text-white [&_h2]:text-lg [&_h2]:font-bold [&_h2]:mb-2 [&_h3]:text-white [&_h3]:text-base [&_h3]:font-bold [&_h3]:mb-2 [&_h4]:text-white [&_h4]:font-semibold [&_a]:text-emerald-400 [&_a:hover]:underline [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:my-2 [&_li]:text-slate-300 [&_table]:w-full [&_table]:max-w-full [&_table]:border-collapse [&_table]:my-3 [&_th]:border [&_th]:border-slate-700 [&_th]:bg-slate-800/80 [&_th]:p-2.5 [&_th]:break-words [&_td]:border [&_td]:border-slate-800 [&_td]:p-2.5 [&_td]:break-words [&_blockquote]:border-l-4 [&_blockquote]:border-emerald-500 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:my-2 [&_code]:bg-slate-800 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-emerald-300 [&_code]:break-all [&_pre]:max-w-full [&_pre]:overflow-x-auto [&_img]:max-w-full [&_img]:h-auto [&_iframe]:max-w-full"
+          dangerouslySetInnerHTML={{ __html: renderedHtml }}
+        />
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,287 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  X,
+  Send,
+  Bold,
+  Italic,
+  Underline,
+  Heading2,
+  List,
+  ListOrdered,
+  Quote,
+  Minus,
+  MessageSquare,
+  Sparkles,
+  Eraser,
+} from 'lucide-react';
+import { htmlToMarkdown } from '../../lib/markdownUtils';
+
+interface PartnerMessageComposerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  recipientEmail: string;
+  recipientName?: string;
+  organisationName?: string;
+  initialSubject?: string;
+  onSend: (subject: string, markdownMessage: string) => Promise<void>;
+  isSending?: boolean;
+}
+
+export const PartnerMessageComposerModal: React.FC<PartnerMessageComposerModalProps> = ({
+  isOpen,
+  onClose,
+  recipientEmail,
+  recipientName,
+  organisationName,
+  initialSubject = '',
+  onSend,
+  isSending = false,
+}) => {
+  const [subject, setSubject] = useState(initialSubject);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const editorRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setSubject(initialSubject);
+    setErrorMessage(null);
+  }, [initialSubject, isOpen]);
+
+  if (!isOpen || typeof document === 'undefined') return null;
+
+  const applyFormat = (command: string, value: string | undefined = undefined) => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.focus();
+    document.execCommand(command, false, value);
+  };
+
+  const handleClearFormat = () => {
+    applyFormat('removeFormat');
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setErrorMessage(null);
+
+    if (!subject.trim()) {
+      setErrorMessage('Please enter a message subject.');
+      return;
+    }
+
+    const htmlContent = editorRef.current ? editorRef.current.innerHTML : '';
+    const textContent = editorRef.current ? editorRef.current.innerText.trim() : '';
+
+    if (!textContent && !htmlContent.trim()) {
+      setErrorMessage('Please write your message in the composer space.');
+      return;
+    }
+
+    // Requirement #1: In-App messages are encoded as Markdown
+    // Requirement #8: User is none the wiser of raw format
+    const markdown = htmlToMarkdown(htmlContent);
+
+    try {
+      await onSend(subject.trim(), markdown);
+      onClose();
+    } catch (err: any) {
+      setErrorMessage(err?.message || 'Failed to dispatch message. Please try again.');
+    }
+  };
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-6 bg-slate-950/85 backdrop-blur-md animate-in fade-in duration-200 overflow-y-auto">
+      <div className="relative w-full max-w-2xl rounded-3xl border border-white/10 bg-slate-900 shadow-2xl p-6 sm:p-7 space-y-5 my-auto text-slate-100">
+        {/* Modal Header */}
+        <div className="flex items-center justify-between border-b border-white/[0.08] pb-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2.5 rounded-2xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-400">
+              <MessageSquare className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="text-base sm:text-lg font-bold text-white tracking-tight">
+                {initialSubject.startsWith('Re:') ? 'Reply Message' : 'Compose Message'}
+              </h3>
+              <p className="text-xs text-slate-400">
+                Direct transmission to your programme funding administration
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 rounded-xl text-slate-400 hover:text-white hover:bg-white/[0.06] transition-colors cursor-pointer"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {errorMessage && (
+          <div className="p-3 rounded-xl bg-rose-500/15 border border-rose-500/30 text-rose-300 text-xs">
+            {errorMessage}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Recipient Field */}
+          <div>
+            <label className="block text-xs font-semibold text-slate-300 mb-1">
+              To (Recipient Support Email)
+            </label>
+            <input
+              type="text"
+              disabled
+              value={recipientEmail || 'support@ifri.khongisa.co.za'}
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-white/10 text-xs font-mono text-emerald-400 select-none"
+            />
+            {(organisationName || recipientName) && (
+              <p className="text-[11px] text-slate-400 mt-1">
+                Organisation: <span className="text-slate-200">{organisationName || recipientName}</span>
+              </p>
+            )}
+          </div>
+
+          {/* Subject Field */}
+          <div>
+            <label className="block text-xs font-semibold text-slate-300 mb-1">Subject</label>
+            <input
+              type="text"
+              required
+              value={subject}
+              onChange={e => setSubject(e.target.value)}
+              placeholder="e.g. Milestone 2 Deliverable Verification Enquiry"
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-white/10 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500/50"
+            />
+          </div>
+
+          {/* WYSIWYG Message Composition Space (Requirement #2 & #8) */}
+          <div>
+            <label className="block text-xs font-semibold text-slate-300 mb-1">
+              Message Composition Space
+            </label>
+
+            <div className="rounded-2xl border border-white/10 bg-slate-950 overflow-hidden shadow-inner focus-within:border-emerald-500/50 transition">
+              {/* WYSIWYG Toolbar */}
+              <div className="px-3 py-2 border-b border-white/[0.08] bg-slate-900/80 flex flex-wrap items-center gap-1 text-slate-300">
+                <button
+                  type="button"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={() => applyFormat('bold')}
+                  className="p-1.5 rounded-lg hover:text-white hover:bg-white/[0.08] transition cursor-pointer"
+                  title="Bold"
+                >
+                  <Bold className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={() => applyFormat('italic')}
+                  className="p-1.5 rounded-lg hover:text-white hover:bg-white/[0.08] transition cursor-pointer"
+                  title="Italic"
+                >
+                  <Italic className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={() => applyFormat('underline')}
+                  className="p-1.5 rounded-lg hover:text-white hover:bg-white/[0.08] transition cursor-pointer"
+                  title="Underline"
+                >
+                  <Underline className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={() => applyFormat('formatBlock', 'H3')}
+                  className="p-1.5 rounded-lg hover:text-white hover:bg-white/[0.08] transition cursor-pointer"
+                  title="Heading"
+                >
+                  <Heading2 className="w-4 h-4" />
+                </button>
+
+                <span className="w-px h-4 bg-white/10 mx-1" />
+
+                <button
+                  type="button"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={() => applyFormat('insertUnorderedList')}
+                  className="p-1.5 rounded-lg hover:text-white hover:bg-white/[0.08] transition cursor-pointer"
+                  title="Bullet List"
+                >
+                  <List className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={() => applyFormat('insertOrderedList')}
+                  className="p-1.5 rounded-lg hover:text-white hover:bg-white/[0.08] transition cursor-pointer"
+                  title="Numbered List"
+                >
+                  <ListOrdered className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={() => applyFormat('formatBlock', 'BLOCKQUOTE')}
+                  className="p-1.5 rounded-lg hover:text-white hover:bg-white/[0.08] transition cursor-pointer"
+                  title="Quote Block"
+                >
+                  <Quote className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={() => applyFormat('insertHorizontalRule')}
+                  className="p-1.5 rounded-lg hover:text-white hover:bg-white/[0.08] transition cursor-pointer"
+                  title="Horizontal Divider"
+                >
+                  <Minus className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={handleClearFormat}
+                  className="p-1.5 rounded-lg hover:text-white hover:bg-white/[0.08] transition cursor-pointer ml-auto"
+                  title="Clear Formatting"
+                >
+                  <Eraser className="w-4 h-4 text-slate-400" />
+                </button>
+              </div>
+
+              {/* Rich ContentEditable Area */}
+              <div
+                ref={editorRef}
+                contentEditable
+                className="w-full min-h-[160px] max-h-[300px] p-4 text-xs sm:text-sm text-slate-100 leading-relaxed overflow-y-auto focus:outline-none [scrollbar-width:thin] [scrollbar-color:#334155_transparent] prose prose-invert max-w-none [&_blockquote]:border-l-4 [&_blockquote]:border-emerald-500 [&_blockquote]:pl-3 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5"
+                data-placeholder="Write your message here..."
+                tabIndex={0}
+              />
+            </div>
+          </div>
+
+          {/* Modal Actions */}
+          <div className="flex items-center justify-end gap-3 pt-3 border-t border-white/[0.08]">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold transition-colors cursor-pointer"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSending}
+              className="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-xs flex items-center gap-2 shadow-lg shadow-emerald-500/20 transition-all cursor-pointer disabled:opacity-50"
+            >
+              <Send className="w-3.5 h-3.5" />
+              <span>{isSending ? 'Sending...' : 'Send Message'}</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
@@ -0,0 +1,33 @@
+import React from 'react';
+import { PfmPartnerLogo } from '../common/PfmPartnerLogo';
+
+interface BrandLogoProps {
+  size?: number;
+  className?: string;
+  showGlow?: boolean;
+  animateOnHover?: boolean;
+}
+
+export const BrandLogo: React.FC<BrandLogoProps> = ({
+  size = 32,
+  className = '',
+  showGlow = false,
+  animateOnHover = true,
+}) => {
+  return (
+    <div
+      className={`inline-flex items-center justify-center relative ${
+        animateOnHover ? 'transition-transform duration-300 hover:scale-105' : ''
+      } ${className}`}
+    >
+      {showGlow && (
+        <div
+          className="absolute inset-0 rounded-full bg-emerald-500/25 blur-md pointer-events-none"
+          style={{ width: size, height: size }}
+        />
+      )}
+      <PfmPartnerLogo size={size} className="relative z-10" />
+    </div>
+  );
+};
+
@@ -0,0 +1,378 @@
+import React, { createContext, useContext, useState, useEffect, useRef, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  CheckCircle2,
+  AlertCircle,
+  Info,
+  X,
+  Copy,
+  Check,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
+import { parseFriendlyError, ErrorCategory } from '../../utils/apiErrorParser';
+
+export type ToastType = 'success' | 'error' | 'info';
+
+export interface ToastItem {
+  id: string;
+  type: ToastType;
+  title: string;
+  message?: string;
+  duration: number; // in milliseconds
+  createdAt: number;
+  statusCode?: number;
+  category?: ErrorCategory;
+  categoryLabel?: string;
+  technicalDetails?: string;
+  fieldErrors?: Array<{ field: string; message: string }>;
+  errorsList?: string[];
+}
+
+export interface ToastOptions {
+  duration?: number;
+  statusCode?: number;
+  category?: ErrorCategory;
+  categoryLabel?: string;
+  technicalDetails?: string;
+  fieldErrors?: Array<{ field: string; message: string }>;
+  errorsList?: string[];
+}
+
+interface ToastContextType {
+  toast: (type: ToastType, title: string, message?: string, options?: ToastOptions) => void;
+  success: (title: string, message?: string, options?: ToastOptions) => void;
+  error: (titleOrError: unknown, messageOrError?: unknown, options?: ToastOptions) => void;
+  info: (title: string, message?: string, options?: ToastOptions) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+// Default durations (in ms):
+// Errors linger significantly longer (14s) so users have sufficient time to read and note the failure.
+const DEFAULT_DURATIONS: Record<ToastType, number> = {
+  success: 4500,
+  info: 6000,
+  error: 14000,
+};
+
+const ToastCard: React.FC<{
+  toast: ToastItem;
+  onRemove: (id: string) => void;
+}> = ({ toast, onRemove }) => {
+  const [isPaused, setIsPaused] = useState(false);
+  const [remainingTime, setRemainingTime] = useState(toast.duration);
+  const [copied, setCopied] = useState(false);
+  const [showTechnical, setShowTechnical] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (isPaused) {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      return;
+    }
+
+    const step = 100;
+    intervalRef.current = setInterval(() => {
+      setRemainingTime((prev) => {
+        if (prev <= step) {
+          if (intervalRef.current) clearInterval(intervalRef.current);
+          onRemove(toast.id);
+          return 0;
+        }
+        return prev - step;
+      });
+    }, step);
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [isPaused, toast.id, onRemove]);
+
+  const handleCopy = () => {
+    const textToCopy = [
+      `PFM Partner Portal Notice: ${toast.title}`,
+      toast.message ? `Details: ${toast.message}` : '',
+      toast.statusCode ? `Status Code: ${toast.statusCode}` : '',
+      toast.technicalDetails ? `Technical Info: ${toast.technicalDetails}` : '',
+      `Timestamp: ${new Date(toast.createdAt).toISOString()}`,
+    ]
+      .filter(Boolean)
+      .join('\n');
+
+    navigator.clipboard.writeText(textToCopy).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  const progressPercent = Math.max(0, Math.min(100, (remainingTime / toast.duration) * 100));
+
+  return (
+    <div
+      onMouseEnter={() => setIsPaused(true)}
+      onMouseLeave={() => setIsPaused(false)}
+      className={`pointer-events-auto relative flex flex-col rounded-2xl border shadow-2xl transition-all duration-200 overflow-hidden bg-[#0d1322] backdrop-blur-none ${
+        toast.type === 'success'
+          ? 'border-emerald-500/60 text-gray-100 shadow-emerald-950/40 ring-1 ring-emerald-500/20'
+          : toast.type === 'error'
+          ? 'border-rose-500/70 text-gray-100 shadow-rose-950/60 ring-1 ring-rose-500/30'
+          : 'border-teal-500/60 text-gray-100 shadow-teal-950/40 ring-1 ring-teal-500/20'
+      }`}
+    >
+      <div className="flex items-start gap-3 p-4">
+        {toast.type === 'success' && <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />}
+        {toast.type === 'error' && <AlertCircle className="w-5 h-5 text-rose-400 shrink-0 mt-0.5" />}
+        {toast.type === 'info' && <Info className="w-5 h-5 text-teal-400 shrink-0 mt-0.5" />}
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-1.5 flex-wrap">
+            <h4 className="text-sm font-semibold text-white tracking-tight leading-snug">{toast.title}</h4>
+            {toast.categoryLabel && (
+              <span
+                className={`text-[10px] font-medium px-1.5 py-0.5 rounded border ${
+                  toast.category === 'validation'
+                    ? 'bg-amber-950/60 text-amber-300 border-amber-800/60'
+                    : toast.category === 'creation'
+                    ? 'bg-emerald-950/60 text-emerald-300 border-emerald-800/60'
+                    : toast.category === 'update'
+                    ? 'bg-teal-950/60 text-teal-300 border-teal-800/60'
+                    : toast.category === 'security'
+                    ? 'bg-rose-950/60 text-rose-300 border-rose-800/60'
+                    : toast.category === 'notFound'
+                    ? 'bg-slate-800 text-slate-300 border-slate-700'
+                    : toast.category === 'conflict'
+                    ? 'bg-purple-950/60 text-purple-300 border-purple-800/60'
+                    : 'bg-slate-800 text-slate-300 border-slate-700'
+                }`}
+              >
+                {toast.categoryLabel}
+              </span>
+            )}
+            {toast.statusCode && (
+              <span className="text-[10px] font-mono font-medium px-1.5 py-0.5 rounded bg-slate-800 text-slate-300 border border-slate-700">
+                HTTP {toast.statusCode}
+              </span>
+            )}
+          </div>
+
+          {toast.errorsList && toast.errorsList.length > 0 ? (
+            <div className="mt-2 space-y-1.5">
+              <ul className="space-y-1.5">
+                {toast.errorsList.map((err, idx) => (
+                  <li
+                    key={idx}
+                    className="text-xs text-rose-200/95 flex items-start gap-2 bg-rose-950/40 px-2.5 py-1.5 rounded-lg border border-rose-900/40"
+                  >
+                    <span className="text-rose-400 font-bold mt-0.5 text-sm leading-none">•</span>
+                    <span className="leading-snug break-words font-medium">{err}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : toast.message ? (
+            <div className="text-xs mt-1.5 text-slate-300 leading-relaxed whitespace-pre-line break-words">
+              {toast.message.includes('\n') ? (
+                <ul className="space-y-1.5 mt-1">
+                  {toast.message
+                    .split('\n')
+                    .map((l) => l.trim())
+                    .filter(Boolean)
+                    .map((line, idx) => (
+                      <li
+                        key={idx}
+                        className="flex items-start gap-2 text-rose-200/95 bg-rose-950/40 px-2.5 py-1.5 rounded-lg border border-rose-900/40"
+                      >
+                        <span className="text-rose-400 font-bold mt-0.5 text-sm leading-none">•</span>
+                        <span className="leading-snug break-words font-medium">{line.replace(/^[•\-*]\s*/, '')}</span>
+                      </li>
+                    ))}
+                </ul>
+              ) : (
+                <p>{toast.message}</p>
+              )}
+            </div>
+          ) : null}
+
+          {toast.technicalDetails && (
+            <div className="mt-2.5 pt-2 border-t border-slate-800/80">
+              <button
+                type="button"
+                onClick={() => setShowTechnical(!showTechnical)}
+                className="inline-flex items-center gap-1 text-[11px] text-slate-400 hover:text-slate-200 transition-colors cursor-pointer"
+              >
+                <span>{showTechnical ? 'Hide Technical Reference' : 'Show Technical Reference'}</span>
+                {showTechnical ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
+              </button>
+
+              {showTechnical && (
+                <div className="mt-1.5 p-2 rounded bg-[#090d16] border border-slate-800 font-mono text-[10px] text-slate-400 break-all select-all">
+                  {toast.technicalDetails}
+                </div>
+              )}
+            </div>
+          )}
+
+          {toast.type === 'error' && (
+            <div className="mt-3 flex items-center justify-between gap-2 pt-2 border-t border-slate-800/60 text-[11px] text-slate-400">
+              <span className="text-[10px] text-slate-500">
+                {isPaused ? 'Timer paused (hovering)' : 'Notification lingers for review'}
+              </span>
+              <button
+                type="button"
+                onClick={handleCopy}
+                className="inline-flex items-center gap-1 px-2 py-1 rounded bg-slate-800/80 hover:bg-slate-700 text-slate-300 hover:text-white transition-colors cursor-pointer"
+                title="Copy details to clipboard for support or administrator"
+              >
+                {copied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
+                <span>{copied ? 'Copied' : 'Copy Details'}</span>
+              </button>
+            </div>
+          )}
+        </div>
+
+        <button
+          onClick={() => onRemove(toast.id)}
+          className="text-slate-400 hover:text-white p-1 rounded-lg hover:bg-slate-800/60 transition-colors shrink-0 cursor-pointer"
+          title="Dismiss notification"
+          aria-label="Dismiss"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      <div className="w-full bg-slate-800/40 h-1 overflow-hidden">
+        <div
+          className={`h-full transition-all duration-100 ease-linear ${
+            toast.type === 'success'
+              ? 'bg-emerald-500'
+              : toast.type === 'error'
+              ? 'bg-rose-500'
+              : 'bg-teal-500'
+          }`}
+          style={{ width: `${progressPercent}%` }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const removeToast = (id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  const addToast = (
+    type: ToastType,
+    title: string,
+    message?: string,
+    options?: ToastOptions
+  ) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    const duration = options?.duration || DEFAULT_DURATIONS[type];
+
+    setToasts((prev) => [
+      ...prev,
+      {
+        id,
+        type,
+        title,
+        message,
+        duration,
+        createdAt: Date.now(),
+        statusCode: options?.statusCode,
+        category: options?.category,
+        categoryLabel: options?.categoryLabel,
+        technicalDetails: options?.technicalDetails,
+        fieldErrors: options?.fieldErrors,
+        errorsList: options?.errorsList,
+      },
+    ]);
+  };
+
+  const success = (title: string, message?: string, options?: ToastOptions) =>
+    addToast('success', title, message, options);
+
+  const info = (title: string, message?: string, options?: ToastOptions) =>
+    addToast('info', title, message, options);
+
+  const error = (
+    titleOrError: unknown,
+    messageOrError?: unknown,
+    options?: ToastOptions
+  ) => {
+    let rawError: unknown = null;
+    let actionTitle = 'Action Failed';
+
+    if (typeof titleOrError === 'string') {
+      actionTitle = titleOrError;
+      rawError = messageOrError;
+    } else {
+      rawError = titleOrError;
+      if (typeof messageOrError === 'string') {
+        actionTitle = messageOrError;
+      }
+    }
+
+    const parsed = parseFriendlyError(rawError, actionTitle);
+
+    let finalMessage = parsed.message;
+    if (
+      typeof messageOrError === 'string' &&
+      messageOrError.trim() &&
+      !messageOrError.includes('Request failed with status code') &&
+      (!parsed.hasReturnObject || !parsed.errorsList?.length)
+    ) {
+      finalMessage = messageOrError.trim();
+    }
+
+    let finalErrorsList = parsed.errorsList || options?.errorsList;
+    if (!finalErrorsList && typeof finalMessage === 'string' && finalMessage.includes(',')) {
+      const parts = finalMessage.split(',').map((p) => p.trim()).filter(Boolean);
+      if (parts.length > 1) {
+        finalErrorsList = parts;
+      }
+    }
+
+    addToast('error', parsed.title, finalMessage, {
+      duration: options?.duration || DEFAULT_DURATIONS.error,
+      statusCode: parsed.statusCode || options?.statusCode,
+      category: options?.category || parsed.category,
+      categoryLabel: options?.categoryLabel || parsed.categoryLabel,
+      technicalDetails: parsed.technicalDetails || options?.technicalDetails,
+      fieldErrors: parsed.fieldErrors || options?.fieldErrors,
+      errorsList: finalErrorsList,
+    });
+  };
+
+  const toastRegion = (
+    <div
+      role="region"
+      aria-label="System Notifications"
+      className="fixed bottom-5 right-5 z-[999999] flex flex-col gap-3 max-w-md sm:max-w-lg w-full pointer-events-none p-2"
+      style={{ zIndex: 999999 }}
+    >
+      {toasts.map((t) => (
+        <ToastCard key={t.id} toast={t} onRemove={removeToast} />
+      ))}
+    </div>
+  );
+
+  return (
+    <ToastContext.Provider value={{ toast: addToast, success, error, info }}>
+      {children}
+      {typeof document !== 'undefined' ? createPortal(toastRegion, document.body) : null}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
+
@@ -1,10 +1,11 @@
-import { updateHasherSettings } from './services/toolsService';
+import { updateHasherSettings as updateToolsHasherSettings } from './services/toolsService';
+import { updateHasherSettings as updateUtilsHasherSettings } from './utils/hashids';

 export interface SecuritySettings {
  Authority: string;
  Audience: string;
  ClientId: string;
-  ClientSecret: string;
+  ClientSecret?: string;
  Scope?: string;
 }

@@ -13,7 +14,7 @@ export interface ApiSettings {
 }

 export interface HasherSettings {
-  Salt: string;
+  Salt?: string;
  MinHashLength: number;
 }

@@ -30,8 +31,7 @@ export interface AppConfig {
 export const defaultSecuritySettings: SecuritySettings = {
  Authority: 'https://sts.security.khongisa.co.za',
  Audience: 'pfm-api-dev',
-  ClientId: 'pfm-scalar-dev',
-  ClientSecret: 'secret_71f88570a46eb22eb5270b47f69e3332c84d8db85d008f0276cb7431c8872d27',
+  ClientId: 'pfm-console-dev',
  Scope: 'openid profile roles email address pfm-api-dev',
 };

@@ -40,15 +40,22 @@ export const defaultApiSettings: ApiSettings = {
 };

 export const defaultHasherSettings: HasherSettings = {
-  Salt: 'TGlnaHQgQ2hhcm1zLCBNaWRyYW5kQm9va3MgbWFrZSBsb3RzIG9mIG1vbmV5IGFuZCBhcmUgYSBzdWNjZXNzZnVsIHZpcmFsIHN0b3J5IGluIFNvdXRoIEFmcmljYQ==',
+  Salt: '',
  MinHashLength: 11,
 };

+function syncAllHasherSettings(salt: string | undefined, minHashLength: number): void {
+  updateToolsHasherSettings(salt, minHashLength);
+  updateUtilsHasherSettings(salt, minHashLength);
+}
+
 function pickFirstNonEmpty(...candidates: any[]): string | undefined {
  for (const c of candidates) {
    if (c !== undefined && c !== null) {
      const s = String(c).trim();
-      if (s !== '' && s !== 'undefined' && s !== 'null') return s;
+      if (s !== '' && s !== 'undefined' && s !== 'null') {
+        return s;
+      }
    }
  }
  return undefined;
@@ -56,13 +63,17 @@ function pickFirstNonEmpty(...candidates: any[]): string | undefined {

 function normalizeBaseUrl(url: string): string {
  let trimmed = url.trim();
-  if (!/^https?:\/\//i.test(trimmed)) trimmed = `https://${trimmed}`;
+  if (!/^https?:\/\//i.test(trimmed)) {
+    trimmed = `https://${trimmed}`;
+  }
  return trimmed.endsWith('/') ? trimmed : `${trimmed}/`;
 }

 function normalizeAuthorityUrl(url: string): string {
  let trimmed = url.trim();
-  if (!/^https?:\/\//i.test(trimmed)) trimmed = `https://${trimmed}`;
+  if (!/^https?:\/\//i.test(trimmed)) {
+    trimmed = `https://${trimmed}`;
+  }
  return trimmed.replace(/\/+$/, '');
 }

@@ -72,44 +83,177 @@ function getWindowRuntimeConfig(): Record<string, any> {
  return win.__RUNTIME_CONFIG__ || win.APP_CONFIG || win._env_ || {};
 }

-function extractSourceConfig(src: Record<string, any>) {
+function extractSourceConfig(src: Record<string, any>): {
+  authority?: string;
+  audience?: string;
+  clientId?: string;
+  clientSecret?: string;
+  scope?: string;
+  baseUrl?: string;
+  hasherSalt?: string;
+  hasherMinLength?: number;
+} {
  if (!src || typeof src !== 'object') return {};
+
+  const sec = src.SecuritySettings || src.securitySettings || {};
+  const api = src.ApiSettings || src.apiSettings || {};
+  const hasher = src.HasherSettings || src.hasherSettings || {};
+
+  const minLenRaw = pickFirstNonEmpty(
+    src.VITE_HASHER_MIN_LENGTH,
+    src.HASHER_MIN_LENGTH,
+    src.HasherSettings__MinHashLength,
+    hasher.MinHashLength,
+    hasher.minHashLength,
+    src.MinHashLength,
+    src.minHashLength
+  );
+  const parsedMinLen = minLenRaw !== undefined ? Number(minLenRaw) : undefined;
+
  return {
-    authority: pickFirstNonEmpty(src.VITE_OIDC_AUTHORITY, src.OIDC_AUTHORITY, src.SecuritySettings?.Authority, src.SecuritySettings__Authority),
-    audience: pickFirstNonEmpty(src.VITE_OIDC_AUDIENCE, src.OIDC_AUDIENCE, src.SecuritySettings?.Audience, src.SecuritySettings__Audience),
-    clientId: pickFirstNonEmpty(src.VITE_OIDC_CLIENT_ID, src.OIDC_CLIENT_ID, src.SecuritySettings?.ClientId, src.SecuritySettings__ClientId),
-    clientSecret: pickFirstNonEmpty(src.VITE_OIDC_CLIENT_SECRET, src.OIDC_CLIENT_SECRET, src.SecuritySettings?.ClientSecret, src.SecuritySettings__ClientSecret),
-    scope: pickFirstNonEmpty(src.VITE_OIDC_SCOPE, src.OIDC_SCOPE, src.SecuritySettings?.Scope, src.SecuritySettings__Scope),
-    baseUrl: pickFirstNonEmpty(src.VITE_API_BASE_URL, src.API_BASE_URL, src.ApiSettings?.BaseUrl, src.ApiSettings__BaseUrl),
-    hasherSalt: pickFirstNonEmpty(src.VITE_HASHER_SALT, src.HASHER_SALT, src.HasherSettings?.Salt, src.HasherSettings__Salt),
-    hasherMinLength: Number(pickFirstNonEmpty(src.VITE_HASHER_MIN_LENGTH, src.HASHER_MIN_LENGTH, src.HasherSettings?.MinHashLength)) || undefined,
+    authority: pickFirstNonEmpty(
+      src.VITE_OIDC_AUTHORITY,
+      src.OIDC_AUTHORITY,
+      src.SecuritySettings__Authority,
+      sec.Authority,
+      sec.authority,
+      src.Authority,
+      src.authority
+    ),
+    audience: pickFirstNonEmpty(
+      src.VITE_OIDC_AUDIENCE,
+      src.OIDC_AUDIENCE,
+      src.SecuritySettings__Audience,
+      sec.Audience,
+      sec.audience,
+      src.Audience,
+      src.audience
+    ),
+    clientId: pickFirstNonEmpty(
+      src.VITE_OIDC_CLIENT_ID,
+      src.OIDC_CLIENT_ID,
+      src.SecuritySettings__ClientId,
+      sec.ClientId,
+      sec.clientId,
+      src.ClientId,
+      src.clientId
+    ),
+    clientSecret: pickFirstNonEmpty(
+      src.VITE_OIDC_CLIENT_SECRET,
+      src.OIDC_CLIENT_SECRET,
+      src.SecuritySettings__ClientSecret,
+      sec.ClientSecret,
+      sec.clientSecret,
+      src.ClientSecret,
+      src.clientSecret
+    ),
+    scope: pickFirstNonEmpty(
+      src.VITE_OIDC_SCOPE,
+      src.OIDC_SCOPE,
+      src.SecuritySettings__Scope,
+      sec.Scope,
+      sec.scope,
+      src.Scope,
+      src.scope
+    ),
+    baseUrl: pickFirstNonEmpty(
+      src.VITE_API_BASE_URL,
+      src.API_BASE_URL,
+      src.ApiSettings__BaseUrl,
+      api.BaseUrl,
+      api.baseUrl,
+      src.BaseUrl,
+      src.baseUrl
+    ),
+    hasherSalt: pickFirstNonEmpty(
+      src.VITE_HASHER_SALT,
+      src.HASHER_SALT,
+      src.HasherSettings__Salt,
+      hasher.Salt,
+      hasher.salt,
+      src.Salt,
+      src.salt
+    ),
+    hasherMinLength:
+      parsedMinLen !== undefined && !isNaN(parsedMinLen) && parsedMinLen > 0
+        ? parsedMinLen
+        : undefined,
  };
 }

 function resolveConfig(fetchedJson?: Record<string, any>): AppConfig {
  const winCfg = extractSourceConfig(getWindowRuntimeConfig());
  const fetchCfg = fetchedJson ? extractSourceConfig(fetchedJson) : {};
-  const envCfg = extractSourceConfig((typeof import.meta !== 'undefined' && (import.meta as any).env ? (import.meta as any).env : {}) as Record<string, any>);
+  const envCfg = extractSourceConfig(
+    (typeof import.meta !== 'undefined' && (import.meta as any).env
+      ? (import.meta as any).env
+      : {}) as Record<string, any>
+  );
+
+  const hasWin = Object.values(winCfg).some((v) => v !== undefined);
+  const hasFetch = Object.values(fetchCfg).some((v) => v !== undefined);
+  const hasEnv = Object.values(envCfg).some((v) => v !== undefined);

  let source: ConfigSource = 'fallback-defaults';
-  if (Object.values(winCfg).some((v) => v !== undefined)) source = 'runtime-injected';
-  else if (Object.values(fetchCfg).some((v) => v !== undefined)) source = 'runtime-fetched';
-  else if (Object.values(envCfg).some((v) => v !== undefined)) source = 'build-env';
+  if (hasWin) source = 'runtime-injected';
+  else if (hasFetch) source = 'runtime-fetched';
+  else if (hasEnv) source = 'build-env';
+
+  const authority = normalizeAuthorityUrl(
+    pickFirstNonEmpty(winCfg.authority, fetchCfg.authority, envCfg.authority, defaultSecuritySettings.Authority)!
+  );
+  const audience = pickFirstNonEmpty(
+    winCfg.audience,
+    fetchCfg.audience,
+    envCfg.audience,
+    defaultSecuritySettings.Audience
+  )!;
+  const clientId = pickFirstNonEmpty(
+    winCfg.clientId,
+    fetchCfg.clientId,
+    envCfg.clientId,
+    defaultSecuritySettings.ClientId
+  )!;
+  const clientSecret = pickFirstNonEmpty(
+    winCfg.clientSecret,
+    fetchCfg.clientSecret,
+    envCfg.clientSecret
+  );
+  const scope = pickFirstNonEmpty(
+    winCfg.scope,
+    fetchCfg.scope,
+    envCfg.scope,
+    defaultSecuritySettings.Scope
+  );
+  const baseUrl = normalizeBaseUrl(
+    pickFirstNonEmpty(winCfg.baseUrl, fetchCfg.baseUrl, envCfg.baseUrl, defaultApiSettings.BaseUrl)!
+  );
+  const hasherSalt = pickFirstNonEmpty(
+    winCfg.hasherSalt,
+    fetchCfg.hasherSalt,
+    envCfg.hasherSalt,
+    defaultHasherSettings.Salt
+  );
+  const hasherMinLength =
+    winCfg.hasherMinLength ||
+    fetchCfg.hasherMinLength ||
+    envCfg.hasherMinLength ||
+    defaultHasherSettings.MinHashLength;

  return {
    SecuritySettings: {
-      Authority: normalizeAuthorityUrl(pickFirstNonEmpty(winCfg.authority, fetchCfg.authority, envCfg.authority, defaultSecuritySettings.Authority)!),
-      Audience: pickFirstNonEmpty(winCfg.audience, fetchCfg.audience, envCfg.audience, defaultSecuritySettings.Audience)!,
-      ClientId: pickFirstNonEmpty(winCfg.clientId, fetchCfg.clientId, envCfg.clientId, defaultSecuritySettings.ClientId)!,
-      ClientSecret: pickFirstNonEmpty(winCfg.clientSecret, fetchCfg.clientSecret, envCfg.clientSecret, defaultSecuritySettings.ClientSecret)!,
-      Scope: pickFirstNonEmpty(winCfg.scope, fetchCfg.scope, envCfg.scope, defaultSecuritySettings.Scope),
+      Authority: authority,
+      Audience: audience,
+      ClientId: clientId,
+      ...(clientSecret ? { ClientSecret: clientSecret } : {}),
+      Scope: scope,
    },
    ApiSettings: {
-      BaseUrl: normalizeBaseUrl(pickFirstNonEmpty(winCfg.baseUrl, fetchCfg.baseUrl, envCfg.baseUrl, defaultApiSettings.BaseUrl)!),
+      BaseUrl: baseUrl,
    },
    HasherSettings: {
-      Salt: pickFirstNonEmpty(winCfg.hasherSalt, fetchCfg.hasherSalt, envCfg.hasherSalt, defaultHasherSettings.Salt)!,
-      MinHashLength: winCfg.hasherMinLength || fetchCfg.hasherMinLength || envCfg.hasherMinLength || defaultHasherSettings.MinHashLength,
+      Salt: hasherSalt || '',
+      MinHashLength: hasherMinLength,
    },
    ConfigSource: source,
    LoadedAt: new Date().toISOString(),
@@ -117,7 +261,7 @@ function resolveConfig(fetchedJson?: Record<string, any>): AppConfig {
 }

 let runtimeConfig: AppConfig = resolveConfig();
-updateHasherSettings(runtimeConfig.HasherSettings.Salt, runtimeConfig.HasherSettings.MinHashLength);
+syncAllHasherSettings(runtimeConfig.HasherSettings.Salt, runtimeConfig.HasherSettings.MinHashLength);

 const configListeners: Array<(config: AppConfig) => void> = [];

@@ -129,28 +273,49 @@ export function onConfigChanged(listener: (config: AppConfig) => void): () => vo
  };
 }

-export async function loadRuntimeConfig(): Promise<AppConfig> {
+let loadPromise: Promise<AppConfig> | null = null;
+
+export async function loadRuntimeConfig(forceReload = false): Promise<AppConfig> {
+  if (loadPromise && !forceReload) {
+    return loadPromise;
+  }
+
+  loadPromise = (async () => {
    let fetchedJson: Record<string, any> | undefined;
+
    if (typeof window !== 'undefined') {
      try {
        const res = await fetch(`/config.json?_t=${Date.now()}`, {
          cache: 'no-store',
          headers: { Accept: 'application/json' },
        }).catch(() => null);
+
        if (res && res.ok) {
+          const contentType = res.headers.get('content-type') || '';
+          if (contentType.includes('application/json') || contentType.includes('text/plain')) {
            fetchedJson = await res.json().catch(() => undefined);
+          } else {
+            const text = await res.text().catch(() => '');
+            if (text.trim().startsWith('{')) {
+              fetchedJson = JSON.parse(text);
+            }
+          }
        }
      } catch {
-      // Safe fallback
+        // Fallback if /config.json is unreachable
      }
    }
-  runtimeConfig = resolveConfig(fetchedJson);
-  updateHasherSettings(runtimeConfig.HasherSettings.Salt, runtimeConfig.HasherSettings.MinHashLength);
-  configListeners.forEach((fn) => fn(runtimeConfig));
-  return runtimeConfig;
-}

-export const getAppConfig = () => runtimeConfig;
-export const getSecuritySettings = () => runtimeConfig.SecuritySettings;
-export const getApiBaseUrl = () => runtimeConfig.ApiSettings.BaseUrl;
-export const getHasherSettings = () => runtimeConfig.HasherSettings;
+    runtimeConfig = resolveConfig(fetchedJson);
+    syncAllHasherSettings(runtimeConfig.HasherSettings.Salt, runtimeConfig.HasherSettings.MinHashLength);
+    configListeners.forEach((fn) => fn(runtimeConfig));
+    return runtimeConfig;
+  })();
+
+  return loadPromise;
+}
+
+export const getAppConfig = (): AppConfig => runtimeConfig;
+export const getSecuritySettings = (): SecuritySettings => runtimeConfig.SecuritySettings;
+export const getApiBaseUrl = (): string => runtimeConfig.ApiSettings.BaseUrl;
+export const getHasherSettings = (): HasherSettings => runtimeConfig.HasherSettings;
@@ -0,0 +1,403 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useAuth } from '../auth/AuthProvider';
+import {
+  getUserNotifications,
+  getNotifications,
+  createNotification,
+  updateNotification,
+  archiveNotification,
+  markNotificationAsRead,
+  getCurrentUserTenantId,
+  resolveUserIdByEmail,
+} from '../services/api';
+import {
+  Notification,
+  NotificationPlatform,
+  NotificationStatus,
+  CreateNotificationRequest,
+} from '../types';
+
+export interface DraftMessage {
+  id: string;
+  recipientId: string;
+  recipientEmail: string;
+  recipientName?: string;
+  subject: string;
+  message: string;
+  platform?: NotificationPlatform;
+  updatedAt: string;
+}
+
+export function useInAppNotifications() {
+  const { user, claims } = useAuth();
+  const queryClient = useQueryClient();
+  const userId = (user?.id || claims?.sub || '') as string;
+  const userEmail = (user?.email || claims?.email || '') as string;
+
+  const draftsStorageKey = `pfm_partner_mailbox_drafts_${userId || 'default'}`;
+  const starredStorageKey = `pfm_partner_mailbox_starred_${userId || 'default'}`;
+  const trashStorageKey = `pfm_partner_mailbox_trash_${userId || 'default'}`;
+  const sentStorageKey = `pfm_partner_mailbox_sent_${userId || 'default'}`;
+
+  const readStorageList = useCallback(<T,>(key: string, fallbackKey?: string): T[] => {
+    try {
+      const stored = localStorage.getItem(key);
+      const parsed: T[] = stored ? JSON.parse(stored) : [];
+      if (fallbackKey && fallbackKey !== key) {
+        const fallbackStored = localStorage.getItem(fallbackKey);
+        const fallbackParsed: T[] = fallbackStored ? JSON.parse(fallbackStored) : [];
+        if (fallbackParsed.length > 0) {
+          const merged = [...parsed];
+          for (const item of fallbackParsed) {
+            const itemId = (item as any)?.id ?? item;
+            if (!merged.some(m => ((m as any)?.id ?? m) === itemId)) {
+              merged.push(item);
+            }
+          }
+          localStorage.setItem(key, JSON.stringify(merged));
+          localStorage.removeItem(fallbackKey);
+          return merged;
+        }
+      }
+      return parsed;
+    } catch {
+      return [];
+    }
+  }, []);
+
+  const [starredIds, setStarredIds] = useState<string[]>(() =>
+    readStorageList<string>(starredStorageKey, 'pfm_partner_mailbox_starred_default')
+  );
+
+  const [trashedIds, setTrashedIds] = useState<string[]>(() =>
+    readStorageList<string>(trashStorageKey, 'pfm_partner_mailbox_trash_default')
+  );
+
+  const [drafts, setDrafts] = useState<DraftMessage[]>(() =>
+    readStorageList<DraftMessage>(draftsStorageKey, 'pfm_partner_mailbox_drafts_default')
+  );
+
+  const [localSent, setLocalSent] = useState<Notification[]>(() =>
+    readStorageList<Notification>(sentStorageKey, 'pfm_partner_mailbox_sent_default')
+  );
+
+  const syncFromStorage = useCallback(() => {
+    setStarredIds(readStorageList<string>(starredStorageKey, 'pfm_partner_mailbox_starred_default'));
+    setTrashedIds(readStorageList<string>(trashStorageKey, 'pfm_partner_mailbox_trash_default'));
+    setDrafts(readStorageList<DraftMessage>(draftsStorageKey, 'pfm_partner_mailbox_drafts_default'));
+    setLocalSent(readStorageList<Notification>(sentStorageKey, 'pfm_partner_mailbox_sent_default'));
+  }, [readStorageList, starredStorageKey, trashStorageKey, draftsStorageKey, sentStorageKey]);
+
+  useEffect(() => {
+    syncFromStorage();
+  }, [syncFromStorage]);
+
+  useEffect(() => {
+    const handleSync = () => syncFromStorage();
+    window.addEventListener('pfm-mailbox-sync', handleSync);
+    window.addEventListener('storage', handleSync);
+    return () => {
+      window.removeEventListener('pfm-mailbox-sync', handleSync);
+      window.removeEventListener('storage', handleSync);
+    };
+  }, [syncFromStorage]);
+
+  const { data: rawNotifications = [], isLoading, refetch } = useQuery<Notification[]>({
+    queryKey: ['inapp-notifications', userId],
+    queryFn: async () => {
+      let list = await getUserNotifications(userId || undefined);
+      if (!list || list.length === 0) {
+        const orgList = await getNotifications();
+        if (orgList && orgList.length > 0) {
+          list = orgList;
+        }
+      }
+      return list || [];
+    },
+    refetchInterval: 30000,
+  });
+
+  const inAppNotifications = useMemo(() => {
+    return rawNotifications.filter(
+      n => Number(n.platform) === NotificationPlatform.InApp || n.platform === (NotificationPlatform.InApp as any)
+    );
+  }, [rawNotifications]);
+
+  const inboxNotifications = useMemo(() => {
+    return inAppNotifications.filter(
+      n =>
+        !trashedIds.includes(String(n.id)) &&
+        Number(n.status) !== NotificationStatus.Archived &&
+        Number(n.status) !== NotificationStatus.Draft
+    );
+  }, [inAppNotifications, trashedIds]);
+
+  const allMailboxNotifications = inboxNotifications;
+
+  const unreadNotifications = useMemo(() => {
+    return inboxNotifications.filter(
+      n =>
+        Number(n.status) !== NotificationStatus.Read &&
+        Number(n.status) !== NotificationStatus.Cancelled &&
+        Number(n.status) !== NotificationStatus.Failed
+    );
+  }, [inboxNotifications]);
+
+  const unreadCount = unreadNotifications.length;
+  const top5Unread = useMemo(() => unreadNotifications.slice(0, 5), [unreadNotifications]);
+
+  const starredNotifications = useMemo(() => {
+    return inAppNotifications.filter(
+      n =>
+        starredIds.includes(String(n.id)) &&
+        !trashedIds.includes(String(n.id))
+    );
+  }, [inAppNotifications, starredIds, trashedIds]);
+
+  const trashedNotifications = useMemo(() => {
+    return inAppNotifications.filter(
+      n => trashedIds.includes(String(n.id)) || Number(n.status) === NotificationStatus.Archived
+    );
+  }, [inAppNotifications, trashedIds]);
+
+  const markAsReadMutation = useMutation({
+    mutationFn: async (id: number | string) => {
+      await markNotificationAsRead(id);
+    },
+    onMutate: async (id) => {
+      await queryClient.cancelQueries({ queryKey: ['inapp-notifications', userId] });
+      queryClient.setQueryData<Notification[]>(['inapp-notifications', userId], (old = []) =>
+        old.map(n => (String(n.id) === String(id) ? { ...n, status: NotificationStatus.Read } : n))
+      );
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['inapp-notifications'] });
+    },
+  });
+
+  const markAllAsRead = useCallback(async () => {
+    const unread = unreadNotifications;
+    for (const item of unread) {
+      try {
+        await markNotificationAsRead(item.id);
+      } catch {}
+    }
+    queryClient.invalidateQueries({ queryKey: ['inapp-notifications'] });
+  }, [unreadNotifications, queryClient]);
+
+  const toggleStar = useCallback((id: string | number) => {
+    const strId = String(id);
+    setStarredIds(prev => {
+      const next = prev.includes(strId) ? prev.filter(x => x !== strId) : [...prev, strId];
+      try {
+        localStorage.setItem(starredStorageKey, JSON.stringify(next));
+        window.dispatchEvent(new Event('pfm-mailbox-sync'));
+      } catch {}
+      return next;
+    });
+  }, [starredStorageKey]);
+
+  // Delete message (NotificationStatus == Archived & move to trash)
+  const deleteMessage = useCallback(async (id: string | number) => {
+    const strId = String(id);
+    setTrashedIds(prev => {
+      const next = prev.includes(strId) ? prev : [...prev, strId];
+      try {
+        localStorage.setItem(trashStorageKey, JSON.stringify(next));
+        window.dispatchEvent(new Event('pfm-mailbox-sync'));
+      } catch {}
+      return next;
+    });
+
+    queryClient.setQueryData<Notification[]>(['inapp-notifications', userId], (old = []) =>
+      old.map(n => (String(n.id) === strId ? { ...n, status: NotificationStatus.Archived } : n))
+    );
+
+    try {
+      await archiveNotification(id);
+    } catch (err) {
+      console.warn('[deleteMessage] Error archiving notification on server:', err);
+    } finally {
+      queryClient.invalidateQueries({ queryKey: ['inapp-notifications'] });
+    }
+  }, [trashStorageKey, userId, queryClient]);
+
+  // Restore from trash / unarchive
+  const restoreMessage = useCallback(async (id: string | number) => {
+    const strId = String(id);
+    setTrashedIds(prev => {
+      const next = prev.filter(x => x !== strId);
+      try {
+        localStorage.setItem(trashStorageKey, JSON.stringify(next));
+        window.dispatchEvent(new Event('pfm-mailbox-sync'));
+      } catch {}
+      return next;
+    });
+
+    queryClient.setQueryData<Notification[]>(['inapp-notifications', userId], (old = []) =>
+      old.map(n => (String(n.id) === strId ? { ...n, status: NotificationStatus.Read } : n))
+    );
+
+    try {
+      await markNotificationAsRead(id);
+    } catch (err) {
+      console.warn('[restoreMessage] Error restoring notification on server:', err);
+    } finally {
+      queryClient.invalidateQueries({ queryKey: ['inapp-notifications'] });
+    }
+  }, [trashStorageKey, userId, queryClient]);
+
+  const permanentDelete = useCallback((id: string | number) => {
+    const strId = String(id);
+    setTrashedIds(prev => {
+      const next = prev.filter(x => x !== strId);
+      try {
+        localStorage.setItem(trashStorageKey, JSON.stringify(next));
+      } catch {}
+      return next;
+    });
+    setLocalSent(prev => {
+      const next = prev.filter(n => String(n.id) !== strId);
+      try {
+        localStorage.setItem(sentStorageKey, JSON.stringify(next));
+        window.dispatchEvent(new Event('pfm-mailbox-sync'));
+      } catch {}
+      return next;
+    });
+  }, [trashStorageKey, sentStorageKey]);
+
+  const saveDraft = useCallback((draft: Omit<DraftMessage, 'id' | 'updatedAt'> & { id?: string }) => {
+    const draftId = draft.id || `draft_${Date.now()}`;
+    const newDraft: DraftMessage = {
+      ...draft,
+      id: draftId,
+      updatedAt: new Date().toISOString(),
+    };
+    setDrafts(prev => {
+      const current = readStorageList<DraftMessage>(draftsStorageKey, 'pfm_partner_mailbox_drafts_default');
+      const base = current.length >= prev.length ? current : prev;
+      const filtered = base.filter(d => d.id !== draftId);
+      const next = [newDraft, ...filtered];
+      try {
+        localStorage.setItem(draftsStorageKey, JSON.stringify(next));
+        window.dispatchEvent(new Event('pfm-mailbox-sync'));
+      } catch {}
+      return next;
+    });
+    return draftId;
+  }, [draftsStorageKey, readStorageList]);
+
+  const deleteDraft = useCallback((id: string) => {
+    setDrafts(prev => {
+      const current = readStorageList<DraftMessage>(draftsStorageKey, 'pfm_partner_mailbox_drafts_default');
+      const base = current.length >= prev.length ? current : prev;
+      const next = base.filter(d => d.id !== id);
+      try {
+        localStorage.setItem(draftsStorageKey, JSON.stringify(next));
+        window.dispatchEvent(new Event('pfm-mailbox-sync'));
+      } catch {}
+      return next;
+    });
+  }, [draftsStorageKey, readStorageList]);
+
+  const sendMessageMutation = useMutation({
+    mutationFn: async (payload: {
+      recipientId?: string;
+      recipientEmail?: string;
+      recipient?: string;
+      recipientName?: string;
+      subject: string;
+      message: string;
+      platform?: NotificationPlatform;
+      organisationId?: number | string;
+      draftId?: string;
+    }) => {
+      const orgId = payload.organisationId || getCurrentUserTenantId() || 1;
+      const targetPlatform = payload.platform || NotificationPlatform.InApp;
+      const email = payload.recipientEmail || (payload.recipient?.includes('@') ? payload.recipient : '') || 'support@ifri.khongisa.co.za';
+      let id = payload.recipientId && payload.recipientId !== '00000000-0000-0000-0000-000000000000'
+        ? payload.recipientId
+        : (!payload.recipient?.includes('@') && payload.recipient !== '00000000-0000-0000-0000-000000000000' ? payload.recipient : '');
+
+      if (!id && email) {
+        id = (await resolveUserIdByEmail(email, orgId)) || '';
+      }
+
+      if (!id) {
+        id = '00000000-0000-0000-0000-000000000000';
+      }
+      const formattedDestination = `To: ${email} | From: ${userEmail || 'Partner User'}`;
+
+      const req: CreateNotificationRequest = {
+        organisationId: orgId,
+        recipient: id,
+        platform: targetPlatform,
+        subject: payload.subject,
+        destination: formattedDestination,
+        message: payload.message,
+        status: targetPlatform === NotificationPlatform.InApp ? NotificationStatus.Delivered : NotificationStatus.Queued,
+      };
+
+      await createNotification(req);
+
+      const sentItem: Notification = {
+        id: `sent_${Date.now()}`,
+        organisationId: orgId,
+        recipient: payload.recipientId || payload.recipient || "",
+        platform: targetPlatform,
+        status: NotificationStatus.Sent,
+        subject: payload.subject,
+        message: payload.message,
+        destination: formattedDestination,
+        createdAt: new Date().toISOString(),
+        sentAt: new Date().toISOString(),
+      };
+
+      setLocalSent(prev => {
+        const next = [sentItem, ...prev];
+        try {
+          localStorage.setItem(sentStorageKey, JSON.stringify(next));
+          window.dispatchEvent(new Event('pfm-mailbox-sync'));
+        } catch {}
+        return next;
+      });
+
+      if (payload.draftId) {
+        deleteDraft(payload.draftId);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['inapp-notifications'] });
+    },
+  });
+
+  return {
+    rawNotifications,
+    inAppNotifications,
+    allMailboxNotifications,
+    inboxNotifications,
+    unreadNotifications,
+    unreadCount,
+    top5Unread,
+    starredNotifications,
+    trashedNotifications,
+    sentNotifications: localSent,
+    drafts,
+    starredIds,
+    trashedIds,
+    isLoading,
+    refetch,
+    markAsRead: (id: string | number) => markAsReadMutation.mutate(id),
+    markAllAsRead,
+    toggleStar,
+    deleteMessage,
+    restoreMessage,
+    permanentDelete,
+    saveDraft,
+    deleteDraft,
+    sendMessage: sendMessageMutation.mutateAsync,
+    isSending: sendMessageMutation.isPending,
+  };
+}
+
@@ -1,7 +1,13 @@
@import "tailwindcss";

+:root {
+  color-scheme: dark;
+}
+
@layer base {
-  body {
+  html, body {
+    background-color: #020617; /* slate-950 */
+    color: #f8fafc; /* slate-100 */
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

@@ -0,0 +1,708 @@
+import {
+  ApprovalStatus,
+  ComplianceStatus,
+  ContractStatus,
+  ActivityStatus,
+  Priority,
+  OrganisationType,
+  IndustrySector,
+  ProjectType,
+  UnitOfMeasure,
+  EvidenceType,
+  RiskLikelihood,
+  RiskImpact,
+  NotificationPlatform,
+  NotificationStatus,
+  EmailStatuses,
+  UserRole,
+} from '../types';
+
+export const formatZAR = (amount: number): string => {
+  return new Intl.NumberFormat('en-ZA', {
+    style: 'currency',
+    currency: 'ZAR',
+    maximumFractionDigits: 0,
+  }).format(amount || 0);
+};
+
+export const formatCompactZAR = (amount: number): string => {
+  const num = Number(amount) || 0;
+  if (num >= 1_000_000_000) {
+    return `R ${(num / 1_000_000_000).toFixed(2)}bn`;
+  }
+  if (num >= 1_000_000) {
+    return `R ${(num / 1_000_000).toFixed(1)}m`;
+  }
+  if (num >= 1_000) {
+    return `R ${(num / 1_000).toFixed(0)}k`;
+  }
+  return formatZAR(num);
+};
+
+export const formatDate = (dateStr?: string | null): string => {
+  if (!dateStr) return '—';
+  try {
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return dateStr;
+    return d.toLocaleDateString('en-GB', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    });
+  } catch {
+    return dateStr;
+  }
+};
+
+export const formatShortDate = (dateStr?: string | null): string => {
+  if (!dateStr) return '—';
+  try {
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return dateStr;
+    return d.toLocaleDateString('en-GB', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+    });
+  } catch {
+    return dateStr;
+  }
+};
+
+export const EMAIL_STATUS_OPTIONS = [
+  { value: EmailStatuses.GeneralError, label: 'General Error' },
+  { value: EmailStatuses.AuthenticationError, label: 'Authentication Error' },
+  { value: EmailStatuses.ProtocolError, label: 'Protocol Error' },
+  { value: EmailStatuses.Connected, label: 'Connected' },
+  { value: EmailStatuses.Disconnected, label: 'Disconnected' },
+  { value: EmailStatuses.TooManyConnections, label: 'Too Many Connections' },
+  { value: EmailStatuses.ConnectionAborted, label: 'Connection Aborted' },
+  { value: EmailStatuses.Success, label: 'Success' },
+];
+
+export const EMAIL_STATUSES_OPTIONS = EMAIL_STATUS_OPTIONS;
+
+export const NOTIFICATION_STATUS_OPTIONS = [
+  { value: NotificationStatus.Pending, label: 'Pending' },
+  { value: NotificationStatus.Queued, label: 'Queued' },
+  { value: NotificationStatus.Processing, label: 'Processing' },
+  { value: NotificationStatus.Sent, label: 'Sent' },
+  { value: NotificationStatus.Delivered, label: 'Delivered' },
+  { value: NotificationStatus.Read, label: 'Read' },
+  { value: NotificationStatus.Failed, label: 'Failed' },
+  { value: NotificationStatus.Cancelled, label: 'Cancelled' },
+  { value: NotificationStatus.Bounced, label: 'Bounced' },
+  { value: NotificationStatus.Draft, label: 'Draft' },
+  { value: NotificationStatus.Archived, label: 'Archived' },
+];
+
+export const NOTIFICATION_PLATFORM_OPTIONS = [
+  { value: NotificationPlatform.Email, label: 'Email' },
+  { value: NotificationPlatform.SMS, label: 'SMS' },
+  { value: NotificationPlatform.WhatsApp, label: 'WhatsApp' },
+  { value: NotificationPlatform.PushNotification, label: 'Push Notification' },
+  { value: NotificationPlatform.InApp, label: 'In App' },
+  { value: NotificationPlatform.Teams, label: 'Teams' },
+  { value: NotificationPlatform.Slack, label: 'Slack' },
+  { value: NotificationPlatform.Webhook, label: 'Webhook' },
+  { value: NotificationPlatform.Other, label: 'Other' },
+];
+
+export const EVIDENCE_TYPE_OPTIONS = [
+  { value: EvidenceType.AttendanceRegister, label: 'Attendance Register' },
+  { value: EvidenceType.BankStatement, label: 'Bank Statement' },
+  { value: EvidenceType.CompletionCertificate, label: 'Completion Certificate' },
+  { value: EvidenceType.FinancialInvoiceOrReceipt, label: 'Financial Invoice Or Receipt' },
+  { value: EvidenceType.GeotaggedPhoto, label: 'Geotagged Photo' },
+  { value: EvidenceType.InspectionReport, label: 'Inspection Report' },
+  { value: EvidenceType.MeetingMinutes, label: 'Meeting Minutes' },
+  { value: EvidenceType.PayrollOrStipendRegister, label: 'Payroll Or Stipend Register' },
+  { value: EvidenceType.ProcurementDocument, label: 'Procurement Document' },
+  { value: EvidenceType.TechnicalSpecificationOrDesign, label: 'Technical Specification Or Design' },
+  { value: EvidenceType.VideoRecording, label: 'Video Recording' },
+  { value: EvidenceType.Other, label: 'Other' },
+];
+
+export const PROJECT_TYPE_OPTIONS = [
+  { value: ProjectType.CapacityBuildingAndTraining, label: 'Capacity Building And Training' },
+  { value: ProjectType.CapitalExpenditureAndInfrastructure, label: 'Capital Expenditure And Infrastructure' },
+  { value: ProjectType.CommercializationAndScaling, label: 'Commercialization And Scaling' },
+  { value: ProjectType.FeasibilityAndTechnicalAssistance, label: 'Feasibility And Technical Assistance' },
+  { value: ProjectType.OperationalGrantAndSubsidy, label: 'Operational Grant And Subsidy' },
+  { value: ProjectType.ProductDevelopmentAndPrototyping, label: 'Product Development And Prototyping' },
+  { value: ProjectType.ResearchAndDevelopment, label: 'Research And Development' },
+  { value: ProjectType.SocialImpactAndCommunityDevelopment, label: 'Social Impact And Community Development' },
+  { value: ProjectType.TechnologyTransferAndAdoption, label: 'Technology Transfer And Adoption' },
+  { value: ProjectType.Innovation, label: 'Innovation' },
+  { value: ProjectType.Other, label: 'Other' },
+];
+
+export const INDUSTRY_SECTOR_OPTIONS = [
+  { value: IndustrySector.AgricultureAndAgroProcessing, label: 'Agriculture And Agro Processing' },
+  { value: IndustrySector.AutomotiveAndTransportEquipment, label: 'Automotive And Transport Equipment' },
+  { value: IndustrySector.ChemicalsAndPharmaceuticals, label: 'Chemicals And Pharmaceuticals' },
+  { value: IndustrySector.ConstructionAndInfrastructure, label: 'Construction And Infrastructure' },
+  { value: IndustrySector.CreativeIndustriesAndMedia, label: 'Creative Industries And Media' },
+  { value: IndustrySector.DefenseAndAerospace, label: 'Defense And Aerospace' },
+  { value: IndustrySector.EducationAndSkillsDevelopment, label: 'Education And Skills Development' },
+  { value: IndustrySector.EnergyAndUtilities, label: 'Energy And Utilities' },
+  { value: IndustrySector.FinancialServices, label: 'Financial Services' },
+  { value: IndustrySector.HealthcareAndLifeSciences, label: 'Healthcare And Life Sciences' },
+  { value: IndustrySector.InformationCommunicationTechnology, label: 'Information Communication Technology' },
+  { value: IndustrySector.ManufacturingAndIndustrial, label: 'Manufacturing And Industrial' },
+  { value: IndustrySector.MiningAndMetals, label: 'Mining And Metals' },
+  { value: IndustrySector.RealEstateAndHousing, label: 'Real Estate And Housing' },
+  { value: IndustrySector.RetailAndConsumerGoods, label: 'Retail And Consumer Goods' },
+  { value: IndustrySector.TourismAndHospitality, label: 'Tourism And Hospitality' },
+  { value: IndustrySector.WaterAndSanitation, label: 'Water And Sanitation' },
+  { value: IndustrySector.Other, label: 'Other' },
+];
+
+export const ORGANISATION_TYPE_OPTIONS = [
+  { value: OrganisationType.NonGovernmentalOrganisation, label: 'Non-Governmental Organisation' },
+  { value: OrganisationType.CivilSocietyOrganisation, label: 'Civil Society Organisation' },
+  { value: OrganisationType.Trust, label: 'Trust' },
+  { value: OrganisationType.FaithBasedOrganisation, label: 'Faith-Based Organisation' },
+  { value: OrganisationType.PrivateLimitedCompany, label: 'Private Limited Company' },
+  { value: OrganisationType.PublicLimitedCompany, label: 'Public Limited Company' },
+  { value: OrganisationType.SoleProprietorship, label: 'Sole Proprietorship' },
+  { value: OrganisationType.Partnership, label: 'Partnership' },
+  { value: OrganisationType.SocialEnterprise, label: 'Social Enterprise' },
+  { value: OrganisationType.NationalGovernmentMinistry, label: 'National Government Ministry' },
+  { value: OrganisationType.ProvincialGovernmentEntity, label: 'Provincial Government Entity' },
+  { value: OrganisationType.LocalGovernmentMunicipality, label: 'Local Government Municipality' },
+  { value: OrganisationType.StateOwnedEnterprise, label: 'State-Owned Enterprise' },
+  { value: OrganisationType.PublicAgency, label: 'Public Agency' },
+  { value: OrganisationType.PublicUniversity, label: 'Public University' },
+  { value: OrganisationType.PrivateUniversity, label: 'Private University' },
+  { value: OrganisationType.ResearchInstitute, label: 'Research Institute' },
+  { value: OrganisationType.TechnicalVocationalCollege, label: 'Technical Vocational College' },
+  { value: OrganisationType.Cooperative, label: 'Cooperative' },
+  { value: OrganisationType.MicrofinanceInstitution, label: 'Microfinance Institution' },
+  { value: OrganisationType.CommercialBank, label: 'Commercial Bank' },
+  { value: OrganisationType.DevelopmentFinanceInstitution, label: 'Development Finance Institution' },
+  { value: OrganisationType.UnitedNationsAgency, label: 'United Nations Agency' },
+  { value: OrganisationType.IntergovernmentalOrganisation, label: 'Intergovernmental Organisation' },
+  { value: OrganisationType.InternationalNGO, label: 'International NGO' },
+  { value: OrganisationType.Consortium, label: 'Consortium' },
+  { value: OrganisationType.SpecialPurposeVehicle, label: 'Special Purpose Vehicle' },
+];
+
+export const PRIORITY_OPTIONS = [
+  { value: Priority.Low, label: 'Low' },
+  { value: Priority.Medium, label: 'Medium' },
+  { value: Priority.High, label: 'High' },
+  { value: Priority.Critical, label: 'Critical' },
+];
+
+export const UNIT_OF_MEASURE_OPTIONS = [
+  { value: UnitOfMeasure.Count, label: 'Count' },
+  { value: UnitOfMeasure.Percentage, label: 'Percentage' },
+  { value: UnitOfMeasure.Currency, label: 'Currency' },
+  { value: UnitOfMeasure.Area, label: 'Area' },
+  { value: UnitOfMeasure.Weight, label: 'Weight' },
+  { value: UnitOfMeasure.Volume, label: 'Volume' },
+  { value: UnitOfMeasure.DurationDays, label: 'Duration (Days)' },
+  { value: UnitOfMeasure.DurationMonths, label: 'Duration (Months)' },
+  { value: UnitOfMeasure.Ratio, label: 'Ratio' },
+];
+
+export const CONTRACT_STATUS_OPTIONS = [
+  { value: ContractStatus.Draft, label: 'Draft' },
+  { value: ContractStatus.PendingApproval, label: 'Pending Approval' },
+  { value: ContractStatus.Active, label: 'Active' },
+  { value: ContractStatus.Expired, label: 'Expired' },
+  { value: ContractStatus.Terminated, label: 'Terminated' },
+  { value: ContractStatus.Amended, label: 'Amended' },
+];
+
+export const APPROVAL_STATUS_OPTIONS = [
+  { value: ApprovalStatus.Pending, label: 'Pending' },
+  { value: ApprovalStatus.Review, label: 'Review' },
+  { value: ApprovalStatus.Approved, label: 'Approved' },
+  { value: ApprovalStatus.Rejected, label: 'Rejected' },
+  { value: ApprovalStatus.Removed, label: 'Removed' },
+];
+
+export const ACTIVITY_STATUS_OPTIONS = [
+  { value: ActivityStatus.Active, label: 'Active' },
+  { value: ActivityStatus.Inactive, label: 'Inactive' },
+  { value: ActivityStatus.Disabled, label: 'Disabled' },
+];
+
+export const RISK_LIKELIHOOD_OPTIONS = [
+  { value: RiskLikelihood.Rare, label: 'Rare' },
+  { value: RiskLikelihood.Unlikely, label: 'Unlikely' },
+  { value: RiskLikelihood.Possible, label: 'Possible' },
+  { value: RiskLikelihood.Likely, label: 'Likely' },
+  { value: RiskLikelihood.AlmostCertain, label: 'Almost Certain' },
+];
+
+export const RISK_IMPACT_OPTIONS = [
+  { value: RiskImpact.Minor, label: 'Minor' },
+  { value: RiskImpact.Moderate, label: 'Moderate' },
+  { value: RiskImpact.Major, label: 'Major' },
+  { value: RiskImpact.Critical, label: 'Critical' },
+  { value: RiskImpact.Severe, label: 'Severe' },
+];
+
+export const getApprovalStatusBadge = (status: ApprovalStatus | number) => {
+  const s = Number(status);
+  switch (s) {
+    case ApprovalStatus.Approved:
+      return {
+        label: 'Approved',
+        className: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 font-semibold',
+        dot: 'bg-emerald-500',
+      };
+    case ApprovalStatus.Review:
+      return {
+        label: 'In Review',
+        className: 'bg-amber-500/10 text-amber-400 border-amber-500/30 font-semibold',
+        dot: 'bg-amber-500',
+      };
+    case ApprovalStatus.Rejected:
+      return {
+        label: 'Needs Changes',
+        className: 'bg-rose-500/10 text-rose-400 border-rose-500/30 font-semibold',
+        dot: 'bg-rose-500',
+      };
+    case ApprovalStatus.Removed:
+      return {
+        label: 'Removed',
+        className: 'bg-slate-800/80 text-slate-400 border-slate-700/80 font-semibold',
+        dot: 'bg-slate-500',
+      };
+    case ApprovalStatus.Pending:
+    default:
+      return {
+        label: 'Pending',
+        className: 'bg-teal-500/10 text-teal-300 border-teal-500/30 font-semibold',
+        dot: 'bg-teal-400',
+      };
+  }
+};
+
+export const getComplianceStatusBadge = (status: ComplianceStatus | number) => {
+  const s = Number(status);
+  switch (s) {
+    case ComplianceStatus.Exceeded:
+      return {
+        label: 'Exceeded Expectation',
+        className: 'bg-purple-500/15 text-purple-300 border-purple-500/30 font-semibold',
+        dot: 'bg-purple-400',
+      };
+    case ComplianceStatus.Met:
+      return {
+        label: 'Met',
+        className: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30 font-semibold',
+        dot: 'bg-emerald-400',
+      };
+    case ComplianceStatus.NotMet:
+    default:
+      return {
+        label: 'Not Met',
+        className: 'bg-rose-500/15 text-rose-300 border-rose-500/30 font-semibold',
+        dot: 'bg-rose-400',
+      };
+  }
+};
+
+export const COMPLIANCE_STATUS_OPTIONS = [
+  { value: ComplianceStatus.NotMet, label: 'Not Met' },
+  { value: ComplianceStatus.Met, label: 'Met' },
+  { value: ComplianceStatus.Exceeded, label: 'Exceeded Expectation' },
+];
+
+export const getContractStatusBadge = (status: ContractStatus | number) => {
+  const s = Number(status);
+  switch (s) {
+    case ContractStatus.Active:
+      return {
+        label: 'Active',
+        className: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 font-semibold',
+      };
+    case ContractStatus.PendingApproval:
+      return {
+        label: 'Pending Approval',
+        className: 'bg-amber-500/10 text-amber-400 border-amber-500/30 font-semibold',
+      };
+    case ContractStatus.Amended:
+      return {
+        label: 'Amended',
+        className: 'bg-indigo-500/10 text-indigo-400 border-indigo-500/30 font-semibold',
+      };
+    case ContractStatus.Expired:
+      return {
+        label: 'Expired',
+        className: 'bg-slate-800/80 text-slate-400 border-slate-700/80 font-semibold',
+      };
+    case ContractStatus.Terminated:
+      return {
+        label: 'Terminated',
+        className: 'bg-rose-500/10 text-rose-400 border-rose-500/30 font-semibold',
+      };
+    case ContractStatus.Draft:
+    default:
+      return {
+        label: 'Draft',
+        className: 'bg-slate-800/80 text-slate-300 border-slate-700/80 font-semibold',
+      };
+  }
+};
+
+export const getActivityStatusBadge = (status: ActivityStatus | number | string | boolean | null | undefined) => {
+  if (status === null || status === undefined) {
+    return {
+      label: 'Active',
+      className: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 font-semibold',
+    };
+  }
+
+  if (typeof status === 'boolean') {
+    return status
+      ? { label: 'Active', className: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 font-semibold' }
+      : { label: 'Inactive', className: 'bg-slate-800/80 text-slate-400 border-slate-700/80 font-semibold' };
+  }
+
+  const str = String(status).trim().toLowerCase();
+  if (str === '1' || str === 'active' || str === 'enabled') {
+    return {
+      label: 'Active',
+      className: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 font-semibold',
+    };
+  }
+  if (str === '2' || str === 'inactive') {
+    return {
+      label: 'Inactive',
+      className: 'bg-slate-800/80 text-slate-400 border-slate-700/80 font-semibold',
+    };
+  }
+  if (str === '3' || str === 'disabled' || str === 'suspended' || str === 'terminated') {
+    return {
+      label: str === 'suspended' ? 'Suspended' : 'Disabled',
+      className: 'bg-rose-500/10 text-rose-400 border-rose-500/30 font-semibold',
+    };
+  }
+  if (str === 'approved') {
+    return {
+      label: 'Approved',
+      className: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 font-semibold',
+    };
+  }
+  if (str === 'pending' || str === 'review') {
+    return {
+      label: 'Pending',
+      className: 'bg-amber-500/10 text-amber-400 border-amber-500/30 font-semibold',
+    };
+  }
+
+  const s = Number(status);
+  switch (s) {
+    case ActivityStatus.Active:
+      return {
+        label: 'Active',
+        className: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 font-semibold',
+      };
+    case ActivityStatus.Inactive:
+      return {
+        label: 'Inactive',
+        className: 'bg-slate-800/80 text-slate-400 border-slate-700/80 font-semibold',
+      };
+    case ActivityStatus.Disabled:
+      return {
+        label: 'Disabled',
+        className: 'bg-rose-500/10 text-rose-400 border-rose-500/30 font-semibold',
+      };
+    default:
+      return {
+        label: String(status),
+        className: 'bg-slate-800/80 text-slate-300 border-slate-700/80 font-semibold',
+      };
+  }
+};
+
+export const getOrganisationStatusBadge = (statusOrOrg: any) => {
+  let val: any = statusOrOrg;
+  if (statusOrOrg !== null && typeof statusOrOrg === 'object') {
+    val =
+      statusOrOrg.status ??
+      statusOrOrg.Status ??
+      statusOrOrg.activityStatus ??
+      statusOrOrg.ActivityStatus ??
+      statusOrOrg.approvalStatus ??
+      statusOrOrg.ApprovalStatus ??
+      statusOrOrg.statusId ??
+      statusOrOrg.StatusId ??
+      statusOrOrg.state ??
+      statusOrOrg.State ??
+      (statusOrOrg.isActive !== undefined ? (statusOrOrg.isActive ? 1 : 2) : undefined) ??
+      (statusOrOrg.IsActive !== undefined ? (statusOrOrg.IsActive ? 1 : 2) : undefined);
+  }
+
+  return getActivityStatusBadge(val);
+};
+
+export const getPriorityBadge = (priority: Priority | number) => {
+  const p = Number(priority);
+  switch (p) {
+    case Priority.Critical:
+      return { label: 'Critical', className: 'bg-rose-500/10 text-rose-400 border-rose-500/30 font-semibold' };
+    case Priority.High:
+      return { label: 'High', className: 'bg-amber-500/10 text-amber-400 border-amber-500/30 font-semibold' };
+    case Priority.Medium:
+      return { label: 'Medium', className: 'bg-teal-500/10 text-teal-300 border-teal-500/30 font-semibold' };
+    case Priority.Low:
+    default:
+      return { label: 'Low', className: 'bg-slate-800/80 text-slate-400 border-slate-700/80 font-semibold' };
+  }
+};
+
+export const getOrganisationTypeLabel = (type: OrganisationType | number): string => {
+  const opt = ORGANISATION_TYPE_OPTIONS.find((o) => o.value === Number(type));
+  return opt ? opt.label : 'Organisation';
+};
+
+export const getIndustrySectorLabel = (sector?: IndustrySector | number | string | null): string => {
+  if (sector === undefined || sector === null || sector === '') return '';
+  const num = Number(sector);
+  if (!isNaN(num)) {
+    const opt = INDUSTRY_SECTOR_OPTIONS.find((o) => o.value === num);
+    if (opt) return opt.label;
+  }
+  const str = String(sector).trim().toLowerCase();
+  for (const opt of INDUSTRY_SECTOR_OPTIONS) {
+    if (opt.label.toLowerCase() === str) return opt.label;
+    const enumKey = (IndustrySector as any)[opt.value];
+    if (enumKey && String(enumKey).toLowerCase() === str) return opt.label;
+  }
+  return String(sector).replace(/([a-z])([A-Z])/g, '$1 $2');
+};
+
+export const getProjectTypeLabel = (type?: ProjectType | number | string | null): string => {
+  if (type === undefined || type === null || type === '') return '';
+  const num = Number(type);
+  if (!isNaN(num)) {
+    const opt = PROJECT_TYPE_OPTIONS.find((o) => o.value === num);
+    if (opt) return opt.label;
+  }
+  const str = String(type).trim().toLowerCase();
+  for (const opt of PROJECT_TYPE_OPTIONS) {
+    if (opt.label.toLowerCase() === str) return opt.label;
+    const enumKey = (ProjectType as any)[opt.value];
+    if (enumKey && String(enumKey).toLowerCase() === str) return opt.label;
+  }
+  return String(type).replace(/([a-z])([A-Z])/g, '$1 $2');
+};
+
+export const getEvidenceTypeLabel = (type: EvidenceType | number): string => {
+  const opt = EVIDENCE_TYPE_OPTIONS.find((o) => o.value === Number(type));
+  return opt ? opt.label : 'Evidence Document';
+};
+
+export const getUnitOfMeasureLabel = (uom?: UnitOfMeasure | number | null): string => {
+  if (uom === null || uom === undefined) return 'Qty';
+  const opt = UNIT_OF_MEASURE_OPTIONS.find((o) => o.value === Number(uom));
+  return opt ? opt.label : 'Qty';
+};
+
+export const getNotificationPlatformLabel = (platform?: NotificationPlatform | number | null): string => {
+  const opt = NOTIFICATION_PLATFORM_OPTIONS.find((o) => o.value === Number(platform));
+  return opt ? opt.label : 'Platform';
+};
+
+export const getNotificationStatusLabel = (status?: NotificationStatus | number | null): string => {
+  const opt = NOTIFICATION_STATUS_OPTIONS.find((o) => o.value === Number(status));
+  return opt ? opt.label : 'Status';
+};
+
+export const getEmailStatusLabel = (status?: EmailStatuses | number | null): string => {
+  const opt = EMAIL_STATUS_OPTIONS.find((o) => o.value === Number(status));
+  return opt ? opt.label : 'Status';
+};
+
+export const getEmailStatusBadge = (status?: EmailStatuses | number | null) => {
+  const s = Number(status);
+  switch (s) {
+    case EmailStatuses.Connected:
+    case EmailStatuses.Success:
+      return { label: getEmailStatusLabel(s), className: 'bg-emerald-50 text-emerald-800 border-emerald-300 font-semibold' };
+    case EmailStatuses.Disconnected:
+      return { label: getEmailStatusLabel(s), className: 'bg-slate-100 text-slate-700 border-slate-300 font-semibold' };
+    default:
+      return { label: getEmailStatusLabel(s), className: 'bg-rose-50 text-rose-800 border-rose-300 font-semibold' };
+  }
+};
+
+export const getNotificationStatusBadge = (status?: NotificationStatus | number | null) => {
+  const s = Number(status);
+  switch (s) {
+    case NotificationStatus.Archived:
+      return { label: 'Archived', className: 'bg-slate-800 text-slate-300 border-slate-700 font-semibold' };
+    case NotificationStatus.Draft:
+      return { label: 'Draft', className: 'bg-purple-50 text-purple-800 border-purple-300 font-semibold' };
+    case NotificationStatus.Delivered:
+    case NotificationStatus.Read:
+      return { label: getNotificationStatusLabel(s), className: 'bg-emerald-50 text-emerald-800 border-emerald-300 font-semibold' };
+    case NotificationStatus.Sent:
+    case NotificationStatus.Queued:
+    case NotificationStatus.Processing:
+      return { label: getNotificationStatusLabel(s), className: 'bg-sky-50 text-sky-800 border-sky-300 font-semibold' };
+    case NotificationStatus.Pending:
+      return { label: getNotificationStatusLabel(s), className: 'bg-amber-50 text-amber-900 border-amber-300 font-semibold' };
+    case NotificationStatus.Failed:
+    case NotificationStatus.Cancelled:
+    case NotificationStatus.Bounced:
+    default:
+      return { label: getNotificationStatusLabel(s), className: 'bg-rose-50 text-rose-800 border-rose-300 font-semibold' };
+  }
+};
+
+export const getRiskScoreColor = (likelihood: RiskLikelihood | number, impact: RiskImpact | number) => {
+  const score = (Number(likelihood) || 1) * (Number(impact) || 1);
+  if (score >= 15) {
+    return { level: 'Critical', color: 'bg-rose-600 text-white', badge: 'bg-rose-500/20 text-rose-300 border border-rose-500/40 font-bold' };
+  }
+  if (score >= 10) {
+    return { level: 'High', color: 'bg-orange-500 text-white', badge: 'bg-orange-500/20 text-orange-300 border border-orange-500/40 font-bold' };
+  }
+  if (score >= 5) {
+    return { level: 'Moderate', color: 'bg-amber-500 text-white', badge: 'bg-amber-500/20 text-amber-300 border border-amber-500/40 font-semibold' };
+  }
+  return { level: 'Low', color: 'bg-emerald-600 text-white', badge: 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 font-semibold' };
+};
+
+const USER_EMAIL_CACHE: Record<string, string> = {};
+const EMAIL_TO_USER_ID_CACHE: Record<string, string> = {};
+
+export const registerUserEmail = (userId: string | number, email: string) => {
+  if (userId && email && typeof email === 'string' && email.trim()) {
+    const cleanId = String(userId).trim();
+    const cleanEmail = email.trim();
+    USER_EMAIL_CACHE[cleanId] = cleanEmail;
+    USER_EMAIL_CACHE[cleanId.toLowerCase()] = cleanEmail;
+    EMAIL_TO_USER_ID_CACHE[cleanEmail.toLowerCase()] = cleanId;
+  }
+};
+
+export const registerUserEmails = (users: Array<{ id: string | number; email?: string | null }>) => {
+  if (!Array.isArray(users)) return;
+  for (const u of users) {
+    if (u && u.id && u.email) {
+      registerUserEmail(u.id, u.email);
+    }
+  }
+};
+
+export const getUserIdByEmail = (email?: string | null): string | undefined => {
+  if (!email || typeof email !== 'string') return undefined;
+  return EMAIL_TO_USER_ID_CACHE[email.trim().toLowerCase()];
+};
+
+export const getUserEmail = (userIdOrEmail?: string | number | null): string => {
+  if (!userIdOrEmail) return '—';
+  const str = String(userIdOrEmail).trim();
+  if (!str) return '—';
+  if (str.includes('@')) return str;
+  if (USER_EMAIL_CACHE[str]) return USER_EMAIL_CACHE[str];
+  if (USER_EMAIL_CACHE[str.toLowerCase()]) return USER_EMAIL_CACHE[str.toLowerCase()];
+
+  try {
+    const storedUserJson = localStorage.getItem('pfm_auth_user');
+    const storedSub = localStorage.getItem('pfm_user_sub');
+    if (storedUserJson) {
+      const parsed = JSON.parse(storedUserJson);
+      if (parsed?.email) {
+        const email = String(parsed.email).trim();
+        if (
+          (parsed.id && String(parsed.id).toLowerCase() === str.toLowerCase()) ||
+          (parsed.sub && String(parsed.sub).toLowerCase() === str.toLowerCase()) ||
+          (storedSub && String(storedSub).toLowerCase() === str.toLowerCase())
+        ) {
+          registerUserEmail(str, email);
+          return email;
+        }
+      }
+    }
+  } catch {}
+
+  return str;
+};
+
+export const USER_ROLE_OPTIONS = [
+  { value: 'Partner', label: 'Partner' },
+  { value: 'Admin', label: 'Admin' },
+  { value: 'Executive', label: 'Executive' },
+  { value: 'Supervisor', label: 'Supervisor' },
+  { value: 'Manager', label: 'Manager' },
+  { value: 'Contributor', label: 'Contributor' },
+  { value: 'Unassigned', label: 'Unassigned' },
+];
+
+export const getUserRoleBadge = (role?: string | number | UserRole | null) => {
+  if (role === null || role === undefined || role === '' || String(role).trim().toLowerCase() === 'null' || String(role).trim().toLowerCase() === 'unassigned') {
+    return {
+      label: 'Unassigned',
+      className: 'bg-slate-800/80 text-slate-400 border-slate-700/80 shadow-xs',
+      dot: 'bg-slate-500',
+    };
+  }
+
+  const roleStr = String(role).trim().toLowerCase();
+
+  if (roleStr === 'partner') {
+    return {
+      label: 'Partner',
+      className: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30 shadow-xs shadow-emerald-500/10 font-semibold',
+      dot: 'bg-emerald-400',
+    };
+  }
+
+  if (roleStr === 'admin' || roleStr === 'superadmin' || roleStr === '1') {
+    return {
+      label: 'Admin',
+      className: 'bg-rose-500/15 text-rose-300 border-rose-500/30 shadow-xs shadow-rose-500/10 font-semibold',
+      dot: 'bg-rose-400',
+    };
+  }
+
+  if (roleStr === 'executive' || roleStr === '2') {
+    return {
+      label: 'Executive',
+      className: 'bg-amber-500/15 text-amber-300 border-amber-500/30 shadow-xs shadow-amber-500/10 font-semibold',
+      dot: 'bg-amber-400',
+    };
+  }
+
+  if (roleStr === 'supervisor' || roleStr === '3') {
+    return {
+      label: 'Supervisor',
+      className: 'bg-purple-500/15 text-purple-300 border-purple-500/30 shadow-xs shadow-purple-500/10 font-semibold',
+      dot: 'bg-purple-400',
+    };
+  }
+
+  if (roleStr === 'manager' || roleStr === 'programmemanager' || roleStr === 'projectmanager' || roleStr === '4') {
+    return {
+      label: 'Manager',
+      className: 'bg-blue-500/15 text-blue-300 border-blue-500/30 shadow-xs shadow-blue-500/10 font-semibold',
+      dot: 'bg-blue-400',
+    };
+  }
+
+  if (roleStr === 'contributor' || roleStr === 'viewer' || roleStr === 'recipientviewer' || roleStr === '5') {
+    return {
+      label: 'Contributor',
+      className: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30 shadow-xs shadow-emerald-500/10 font-semibold',
+      dot: 'bg-emerald-400',
+    };
+  }
+
+  const formatted = roleStr.charAt(0).toUpperCase() + roleStr.slice(1);
+  return {
+    label: formatted,
+    className: 'bg-cyan-500/15 text-cyan-300 border-cyan-500/30',
+    dot: 'bg-cyan-400',
+  };
+};
+
@@ -0,0 +1,227 @@
+/**
+ * Markdown & Branded HTML Formatting Utilities for PostFundManagement (PFM)
+ */
+
+export function isHtmlContent(content: string): boolean {
+  if (!content) return false;
+  const trimmed = content.trim();
+  return (
+    trimmed.startsWith('<!DOCTYPE') ||
+    trimmed.startsWith('<html') ||
+    trimmed.startsWith('<div') ||
+    trimmed.startsWith('<table') ||
+    trimmed.startsWith('<p') ||
+    trimmed.startsWith('<h') ||
+    trimmed.startsWith('<ul') ||
+    trimmed.startsWith('<ol') ||
+    trimmed.startsWith('<blockquote') ||
+    (trimmed.includes('</') && trimmed.includes('>')) ||
+    /<(strong|b|em|i|u|h[1-6]|ul|ol|li|table|blockquote|div|p|img|hr|br)\b/i.test(trimmed)
+  );
+}
+
+export function stripMarkdown(text: string): string {
+  if (!text) return '';
+  return text
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/!\[.*?\]\(.*?\)/g, '')
+    .replace(/\[(.*?)\]\(.*?\)/g, '$1')
+    .replace(/#{1,6}\s+/g, '')
+    .replace(/(\*\*|__)(.*?)\1/g, '$2')
+    .replace(/(\*|_)(.*?)\1/g, '$2')
+    .replace(/~~(.*?)~~/g, '$1')
+    .replace(/`{1,3}.*?`{1,3}/gs, '')
+    .replace(/^>\s+/gm, '')
+    .replace(/^[-*+]\s+/gm, '')
+    .replace(/^\d+\.\s+/gm, '')
+    .replace(/\|/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+export function parseMarkdownToHtml(markdown: string): string {
+  if (!markdown) return '';
+
+  let html = markdown
+    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+    .replace(/\r\n/g, '\n');
+
+  html = html.replace(/```([a-zA-Z0-9_-]*)\n([\s\S]*?)```/g, (_match, _lang, code) => {
+    const escaped = code
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+    return `<pre style="background:#0b1120;border:1px solid #1e293b;border-radius:12px;padding:14px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;color:#e2e8f0;margin:12px 0;"><code>${escaped}</code></pre>`;
+  });
+
+  html = html.replace(/`([^`]+)`/g, (_match, code) => {
+    const escaped = code
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+    return `<code style="background:#1e293b;color:#34d399;padding:2px 6px;border-radius:6px;font-family:monospace;font-size:12px;">${escaped}</code>`;
+  });
+
+  // Tables (| A | B |\n|---|---|\n| C | D |)
+  html = html.replace(/((?:\|[^\n]+\|\n?)+)/g, (match) => {
+    const rows = match.trim().split('\n');
+    if (rows.length < 2) return match;
+
+    const hasSeparator = rows[1] && rows[1].includes('---');
+    if (!hasSeparator) return match;
+
+    const parseCells = (row: string) =>
+      row
+        .split('|')
+        .slice(1, -1)
+        .map((c) => c.trim());
+
+    const headers = parseCells(rows[0]);
+    const bodyRows = rows.slice(2);
+
+    let tableHtml = `<div style="overflow-x:auto;margin:14px 0;"><table style="width:100%;border-collapse:collapse;border:1px solid #334155;border-radius:8px;font-size:12px;text-align:left;">`;
+    tableHtml += `<thead><tr style="background:#1e293b;color:#f8fafc;">`;
+    headers.forEach((h) => {
+      tableHtml += `<th style="padding:8px 12px;border:1px solid #334155;font-weight:600;">${h}</th>`;
+    });
+    tableHtml += `</tr></thead><tbody>`;
+
+    bodyRows.forEach((row, i) => {
+      const cells = parseCells(row);
+      const bg = i % 2 === 0 ? '#0f172a' : '#1e293b/40';
+      tableHtml += `<tr style="background:${bg};color:#cbd5e1;">`;
+      cells.forEach((c) => {
+        tableHtml += `<td style="padding:8px 12px;border:1px solid #334155;">${c}</td>`;
+      });
+      tableHtml += `</tr>`;
+    });
+
+    tableHtml += `</tbody></table></div>`;
+    return tableHtml;
+  });
+
+  html = html.replace(/^#### (.*?)$/gm, '<h4 style="font-size:14px;font-weight:700;color:#f8fafc;margin:12px 0 6px 0;">$1</h4>');
+  html = html.replace(/^### (.*?)$/gm, '<h3 style="font-size:16px;font-weight:700;color:#f8fafc;margin:14px 0 8px 0;">$1</h3>');
+  html = html.replace(/^## (.*?)$/gm, '<h2 style="font-size:18px;font-weight:800;color:#ffffff;margin:16px 0 8px 0;border-bottom:1px solid #1e293b;padding-bottom:6px;">$1</h2>');
+  html = html.replace(/^# (.*?)$/gm, '<h1 style="font-size:22px;font-weight:800;color:#ffffff;margin:18px 0 10px 0;border-bottom:1px solid #334155;padding-bottom:8px;">$1</h1>');
+
+  // Blockquotes and GitHub alerts
+  html = html.replace(/^>\s*\[!NOTE\]\s*(.*?)$/gim, '<div style="background:#0c4a6e22;border-left:4px solid #0284c7;padding:10px 14px;border-radius:8px;margin:10px 0;color:#bae6fd;font-size:12px;"><strong>NOTE:</strong> $1</div>');
+  html = html.replace(/^>\s*\[!IMPORTANT\]\s*(.*?)$/gim, '<div style="background:#83184322;border-left:4px solid #db2777;padding:10px 14px;border-radius:8px;margin:10px 0;color:#fbcfe8;font-size:12px;"><strong>IMPORTANT:</strong> $1</div>');
+  html = html.replace(/^>\s*\[!WARNING\]\s*(.*?)$/gim, '<div style="background:#713f1222;border-left:4px solid #d97706;padding:10px 14px;border-radius:8px;margin:10px 0;color:#fef08a;font-size:12px;"><strong>WARNING:</strong> $1</div>');
+  html = html.replace(/^>\s*\[!TIP\]\s*(.*?)$/gim, '<div style="background:#064e3b22;border-left:4px solid #059669;padding:10px 14px;border-radius:8px;margin:10px 0;color:#a7f3d0;font-size:12px;"><strong>TIP:</strong> $1</div>');
+  html = html.replace(/^>\s*(.*?)$/gm, '<blockquote style="border-left:3px solid #10b981;padding-left:12px;margin:8px 0;color:#94a3b8;font-style:italic;">$1</blockquote>');
+
+  // Horizontal Rules (---)
+  html = html.replace(/^(?:---|\*\*\*|___)\s*$/gm, '<hr style="border:none;border-top:1px solid #334155;margin:16px 0;" />');
+
+  // Strikethrough
+  html = html.replace(/~~(.*?)~~/g, '<del style="color:#64748b;">$1</del>');
+
+  html = html.replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>');
+  html = html.replace(/\*\*(.*?)\*\*/g, '<strong style="color:#ffffff;">$1</strong>');
+  html = html.replace(/__(.*?)__/g, '<strong style="color:#ffffff;">$1</strong>');
+  html = html.replace(/\*(.*?)\*/g, '<em style="color:#cbd5e1;">$1</em>');
+  html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" style="color:#34d399;text-decoration:underline;">$1</a>');
+  html = html.replace(/^[-*+]\s+(.*?)$/gm, '<li style="margin-left:20px;list-style-type:disc;color:#cbd5e1;padding:2px 0;">$1</li>');
+  html = html.replace(/^\d+\.\s+(.*?)$/gm, '<li style="margin-left:20px;list-style-type:decimal;color:#cbd5e1;padding:2px 0;">$1</li>');
+
+  const paragraphs = html.split(/\n{2,}/);
+  html = paragraphs
+    .map((p) => {
+      const trimmed = p.trim();
+      if (!trimmed) return '';
+      if (
+        trimmed.startsWith('<h') ||
+        trimmed.startsWith('<div') ||
+        trimmed.startsWith('<table') ||
+        trimmed.startsWith('<pre') ||
+        trimmed.startsWith('<blockquote') ||
+        trimmed.startsWith('<hr') ||
+        trimmed.startsWith('<li')
+      ) {
+        return trimmed;
+      }
+      return `<p style="margin:8px 0;line-height:1.6;color:#cbd5e1;">${trimmed.replace(/\n/g, '<br />')}</p>`;
+    })
+    .join('\n');
+
+  return html;
+}
+
+
+
+/**
+ * Converts formatted HTML from WYSIWYG composition into clean, semantic Markdown.
+ * Preserves headings, bold, italic, blockquotes, lists, dividers, and links.
+ */
+export function htmlToMarkdown(html: string): string {
+  if (!html) return '';
+  let md = html
+    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+    .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '');
+
+  // Line breaks & paragraph breaks
+  md = md.replace(/<br\s*\/?>/gi, '\n');
+  md = md.replace(/<\/p>/gi, '\n\n');
+  md = md.replace(/<p[^>]*>/gi, '');
+
+  // Headers
+  md = md.replace(/<h1[^>]*>(.*?)<\/h1>/gis, '# $1\n\n');
+  md = md.replace(/<h2[^>]*>(.*?)<\/h2>/gis, '## $1\n\n');
+  md = md.replace(/<h3[^>]*>(.*?)<\/h3>/gis, '### $1\n\n');
+  md = md.replace(/<h4[^>]*>(.*?)<\/h4>/gis, '#### $1\n\n');
+
+  // Bold / Italic / Underline
+  md = md.replace(/<(strong|b)[^>]*>(.*?)<\/\1>/gis, '**$2**');
+  md = md.replace(/<(em|i)[^>]*>(.*?)<\/\1>/gis, '*$2*');
+  md = md.replace(/<u[^>]*>(.*?)<\/u>/gis, '$1');
+
+  // Blockquote
+  md = md.replace(/<blockquote[^>]*>(.*?)<\/blockquote>/gis, (_match, p1) => {
+    return (
+      p1
+        .trim()
+        .split('\n')
+        .map((l: string) => `> ${l.trim()}`)
+        .join('\n') + '\n\n'
+    );
+  });
+
+  // Unordered Lists
+  md = md.replace(/<ul[^>]*>(.*?)<\/ul>/gis, (_match, p1) => {
+    return p1.replace(/<li[^>]*>(.*?)<\/li>/gis, '- $1\n') + '\n';
+  });
+
+  // Ordered Lists
+  md = md.replace(/<ol[^>]*>(.*?)<\/ol>/gis, (_match, p1) => {
+    let index = 1;
+    return p1.replace(/<li[^>]*>(.*?)<\/li>/gis, () => `${index++}. $1\n`) + '\n';
+  });
+
+  // Horizontal Rules
+  md = md.replace(/<hr\s*\/?>/gi, '\n---\n\n');
+
+  // Links
+  md = md.replace(/<a\b[^>]*href=["']([^"']*)["'][^>]*>(.*?)<\/a>/gis, '[$2]($1)');
+
+  // Divs
+  md = md.replace(/<\/div>/gi, '\n');
+  md = md.replace(/<div[^>]*>/gi, '');
+
+  // Strip any remaining HTML tags
+  md = md.replace(/<[^>]+>/g, '');
+
+  // Unescape standard HTML entities
+  md = md
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'");
+
+  // Collapse 3+ newlines into 2
+  return md.replace(/\n{3,}/g, '\n\n').trim();
+}
+
@@ -1,11 +1,48 @@
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient, InvalidateQueryFilters } from '@tanstack/react-query';
+import { bumpMutationEpoch } from '../services/httpClient';

 export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
-      refetchOnWindowFocus: false,
+      // Remove caching from all pages: zero stale time and zero cache retention
+      // Whenever a component needs data, it must call its corresponding endpoint(s)
+      staleTime: 0,
+      gcTime: 0,
+      refetchOnMount: 'always',
+      refetchOnWindowFocus: 'always',
+      refetchOnReconnect: 'always',
      retry: 1,
-      staleTime: 1000 * 60 * 5, // 5 minutes
    },
  },
 });
+
+// Retain caching ONLY for sync status, auth token, roles and grants
+const RETAINED_CACHE_OPTIONS = {
+  staleTime: 5 * 60 * 1000,
+  gcTime: 10 * 60 * 1000,
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
+};
+
+queryClient.setQueryDefaults(['roles'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['system-roles'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['role-claims'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['user-roles'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['user-claims'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['grants'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['user-grants'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['user-sync'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['sync-status'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['auth'], RETAINED_CACHE_OPTIONS);
+queryClient.setQueryDefaults(['auth-token'], RETAINED_CACHE_OPTIONS);
+
+/**
+ * Invalidates queries while simultaneously bumping the mutation epoch.
+ */
+export async function invalidateAndBustCache(
+  client: QueryClient,
+  filters?: InvalidateQueryFilters
+): Promise<void> {
+  bumpMutationEpoch();
+  await client.invalidateQueries(filters);
+}
@@ -2,9 +2,14 @@ import {StrictMode} from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
+import { loadRuntimeConfig } from './config';

+// Load external runtime configuration (/config.json or window.__RUNTIME_CONFIG__)
+// before mounting the React application so OIDC, API BaseUrl, and HashIds use runtime values.
+loadRuntimeConfig().finally(() => {
  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <App />
    </StrictMode>,
  );
+});
@@ -14,8 +14,8 @@ export function hashParam(id: number | string | null | undefined): string {
 // Users & Integration Endpoints
 // ----------------------------------------------------------------------
 export const usersApi = {
-  getUser: (userId: string | number) =>
-    apiClient.get<Models.User>(`/v1/api/users/${hashParam(userId)}`),
+  getUser: (userId: string) =>
+    apiClient.get<Models.User>(`/v1/api/users/${userId}`),

  getUsersPaged: (page: number, pageSize: number, filter?: Models.UserFilterRequest) =>
    apiClient.post<Models.User[]>(`/v1/api/users/${page}/${pageSize}`, filter || {}),
@@ -23,8 +23,8 @@ export const usersApi = {
  syncIntegration: (payload: any) =>
    apiClient.post<any>('/v1/api/integration/sync', payload),

-  updateUserStatus: (userId: string | number, status: string | number) =>
-    apiClient.get<any>(`/v1/api/users/${hashParam(userId)}/status/${status}`),
+  updateUserStatus: (userId: string, status: string | number) =>
+    apiClient.get<any>(`/v1/api/users/${userId}/status/${status}`),
 };

 // ----------------------------------------------------------------------
@@ -72,7 +72,7 @@ export const projectsApi = {

  // Outcomes
  createOutcome: (payload: Models.CreateOutcomeRequest) =>
-    apiClient.post<Models.Outcome>('/v1/api/projects/beneficiaris/outcomes', payload),
+    apiClient.post<Models.Outcome>('/v1/api/projects/beneficiaries/outcomes', payload),

  updateOutcome: (payload: Models.UpdateOutcomeRequest) =>
    apiClient.put<Models.Outcome>('/v1/api/projects/outcomes', payload),
@@ -374,7 +374,7 @@ export const evidenceApi = {
    apiClient.get<Models.Evidence[]>(`/v1/api/evidence/milestone/${hashParam(milestoneId)}`),

  getProjectEvidence: (projectId: string | number) =>
-    apiClient.get<Models.Evidence[]>(`/v1/api/evidence/${hashParam(projectId)}`),
+    apiClient.get<Models.Evidence[]>(`/v1/api/evidence/projects/${hashParam(projectId)}`),

  createMilestoneRequest: (payload: Models.CreateMilestoneRequest) =>
    apiClient.post<Models.Milestone>('/v1/api/evidence/milestones', payload),
@@ -403,14 +403,17 @@ export const communicationsApi = {
  getInvitesPaged: (page: number, pageSize: number) =>
    apiClient.get<Models.Invite[]>(`/v1/api/communications/invites/${page}/${pageSize}`),

-  getApplicantInvites: (applicantUserId: string | number) =>
-    apiClient.get<Models.Invite[]>(`/v1/api/communications/invites/${hashParam(applicantUserId)}`),
+  getApplicantData: (applicantUserId: string) =>
+    apiClient.get<Models.ApplicantData[]>(`/v1/api/communications/applicants/${applicantUserId}/all`),

-  getApplicantInvite: (applicantUserId: string | number) =>
-    apiClient.get<Models.Invite>(`/v1/api/communications/invites/applicants/${hashParam(applicantUserId)}`),
+  getApplicantInvites: (applicantUserId: string) =>
+    apiClient.get<Models.Invite[]>(`/v1/api/communications/invites/${applicantUserId}`),
+
+  getApplicantInvite: (applicantUserId: string) =>
+    apiClient.get<Models.Invite>(`/v1/api/communications/invites/applicants/${applicantUserId}`),

  getNotifications: (organisationId: string | number) =>
-    apiClient.get<Models.Notification[]>(`/v1/api/communications/norifications/${hashParam(organisationId)}`),
+    apiClient.get<Models.Notification[]>(`/v1/api/communications/notifications/${hashParam(organisationId)}`),
 };

 // Consolidated export
@@ -1,694 +1 @@
-/**
- * OpenAPI TypeScript Models for PostFundManagement.Api v1
- * Synchronized from https://api.ifri.khongisa.co.za/openapi/v1/
- */
-
-export interface ProblemDetails {
-  type?: string | null;
-  title?: string | null;
-  status?: number | string | null;
-  detail?: string | null;
-  instance?: string | null;
-  [key: string]: any;
-}
-
-export type ActivityStatus = 0 | 1 | 2 | 3 | 4 | 'Planned' | 'InProgress' | 'Completed' | 'Delayed' | 'Cancelled' | number | string;
-export type ApprovalStatus = 0 | 1 | 2 | 3 | 'Draft' | 'PendingApproval' | 'Approved' | 'Rejected' | number | string;
-export type ContractStatus = 0 | 1 | 2 | 3 | 4 | 'Draft' | 'Active' | 'Executed' | 'Terminated' | 'Expired' | number | string;
-export type EvidenceType = 0 | 1 | 2 | 3 | 4 | 5 | 'Document' | 'Invoice' | 'Receipt' | 'SitePhoto' | 'Report' | 'Other' | number | string;
-export type IndustrySector = number | string;
-export type NotificationPlatform = 0 | 1 | 2 | 'Email' | 'SMS' | 'InApp' | number | string;
-export type NotificationStatus = 0 | 1 | 2 | 3 | 'Queued' | 'Sent' | 'Failed' | 'Delivered' | number | string;
-export type OrganisationType = 0 | 1 | 2 | 3 | 'Grantee' | 'Funder' | 'Partner' | 'Auditor' | number | string;
-export type Priority = 0 | 1 | 2 | 3 | 'Low' | 'Medium' | 'High' | 'Critical' | number | string;
-export type ProjectType = 0 | 1 | 2 | 3 | 'Grant' | 'Loan' | 'Equity' | 'Hybrid' | number | string;
-export type RiskImpact = 0 | 1 | 2 | 3 | 'Low' | 'Medium' | 'High' | 'Critical' | number | string;
-export type RiskLikelihood = 0 | 1 | 2 | 3 | 'Rare' | 'Unlikely' | 'Possible' | 'Likely' | number | string;
-export type UnitOfMeasure = number | string;
-
-export interface Pagination {
-  page?: number;
-  pageSize?: number;
-  totalRecords?: number;
-  totalPages?: number;
-}
-
-export interface User {
-  id?: string;
-  sub?: string;
-  email?: string;
-  name?: string;
-  role?: string;
-  tenant?: string;
-  tenant_id?: number | string;
-  status?: string | number;
-  createdAt?: string;
-  updatedAt?: string;
-  [key: string]: any;
-}
-
-export interface UserFilterRequest {
-  email?: string;
-  name?: string;
-  role?: string;
-  status?: string;
-}
-
-export interface Activity {
-  id?: string | number;
-  projectId?: string | number;
-  title?: string;
-  description?: string;
-  status?: ActivityStatus;
-  startDate?: string;
-  endDate?: string;
-  progressPercentage?: number;
-  [key: string]: any;
-}
-
-export interface CreateActivityRequest {
-  projectId: string | number;
-  title: string;
-  description?: string;
-  startDate?: string;
-  endDate?: string;
-  status?: ActivityStatus;
-}
-
-export interface Beneficiary {
-  id?: string | number;
-  projectId?: string | number;
-  name?: string;
-  identificationNumber?: string;
-  contactNumber?: string;
-  email?: string;
-  location?: string;
-  gender?: string;
-  age?: number;
-  [key: string]: any;
-}
-
-export interface CreateBeneficiaryRequest {
-  projectId: string | number;
-  name: string;
-  identificationNumber?: string;
-  contactNumber?: string;
-  email?: string;
-  location?: string;
-  gender?: string;
-  age?: number;
-}
-
-export interface UpdateBeneficiaryRequest {
-  id: string | number;
-  projectId?: string | number;
-  name?: string;
-  identificationNumber?: string;
-  contactNumber?: string;
-  email?: string;
-  location?: string;
-  gender?: string;
-  age?: number;
-}
-
-export interface Outcome {
-  id?: string | number;
-  beneficiaryId?: string | number;
-  projectId?: string | number;
-  title?: string;
-  description?: string;
-  targetMetric?: string;
-  achievedMetric?: string;
-  dateRecorded?: string;
-  [key: string]: any;
-}
-
-export interface CreateOutcomeRequest {
-  beneficiaryId?: string | number;
-  projectId?: string | number;
-  title: string;
-  description?: string;
-  targetMetric?: string;
-  achievedMetric?: string;
-  dateRecorded?: string;
-}
-
-export interface UpdateOutcomeRequest {
-  id: string | number;
-  title?: string;
-  description?: string;
-  targetMetric?: string;
-  achievedMetric?: string;
-}
-
-export interface ChangeRequest {
-  id?: string | number;
-  projectId?: string | number;
-  reason?: string;
-  proposedChanges?: string;
-  requestedBy?: string;
-  status?: ApprovalStatus;
-  requestDate?: string;
-  approvalDate?: string;
-  [key: string]: any;
-}
-
-export interface CreateChangeRequest {
-  projectId: string | number;
-  reason: string;
-  proposedChanges: string;
-}
-
-export interface UpdateChangeRequest {
-  id: string | number;
-  reason?: string;
-  proposedChanges?: string;
-  status?: ApprovalStatus;
-}
-
-export interface ComplianceItem {
-  id?: string | number;
-  projectId?: string | number;
-  title?: string;
-  description?: string;
-  isCompliant?: boolean;
-  dueDate?: string;
-  verifiedAt?: string;
-  verifiedBy?: string;
-  [key: string]: any;
-}
-
-export interface CreateComplianceItemRequest {
-  projectId: string | number;
-  title: string;
-  description?: string;
-  dueDate?: string;
-}
-
-export interface UpdateComplianceItemRequest {
-  id: string | number;
-  title?: string;
-  description?: string;
-  isCompliant?: boolean;
-  dueDate?: string;
-}
-
-export interface Issue {
-  id?: string | number;
-  projectId?: string | number;
-  title?: string;
-  description?: string;
-  priority?: Priority;
-  status?: string;
-  reportedBy?: string;
-  resolvedAt?: string;
-  [key: string]: any;
-}
-
-export interface CreateIssueRequest {
-  projectId: string | number;
-  title: string;
-  description?: string;
-  priority?: Priority;
-}
-
-export interface UpdateIssueRequest {
-  id: string | number;
-  title?: string;
-  description?: string;
-  priority?: Priority;
-  status?: string;
-}
-
-export interface Milestone {
-  id?: string | number;
-  projectId?: string | number;
-  title?: string;
-  description?: string;
-  dueDate?: string;
-  amount?: number;
-  status?: ApprovalStatus;
-  completionPercentage?: number;
-  [key: string]: any;
-}
-
-export interface CreateMilestoneRequest {
-  projectId: string | number;
-  title: string;
-  description?: string;
-  dueDate?: string;
-  amount?: number;
-}
-
-export interface UpdateMilestoneRequest {
-  id: string | number;
-  title?: string;
-  description?: string;
-  dueDate?: string;
-  amount?: number;
-  status?: ApprovalStatus;
-  completionPercentage?: number;
-}
-
-export interface Project {
-  id?: string | number;
-  programmeId?: string | number;
-  organisationId?: string | number;
-  name?: string;
-  code?: string;
-  description?: string;
-  type?: ProjectType;
-  startDate?: string;
-  endDate?: string;
-  budget?: number;
-  status?: string;
-  [key: string]: any;
-}
-
-export interface CreateProjectRequest {
-  programmeId: string | number;
-  organisationId: string | number;
-  name: string;
-  code?: string;
-  description?: string;
-  type?: ProjectType;
-  startDate?: string;
-  endDate?: string;
-  budget?: number;
-}
-
-export interface UpdateProjectRequest {
-  id: string | number;
-  name?: string;
-  description?: string;
-  budget?: number;
-  startDate?: string;
-  endDate?: string;
-}
-
-export interface UpdateProjectStatusRequest {
-  projectId: string | number;
-  status: string | number;
-}
-
-export interface SiteVisit {
-  id?: string | number;
-  projectId?: string | number;
-  visitDate?: string;
-  visitorName?: string;
-  findings?: string;
-  recommendations?: string;
-  [key: string]: any;
-}
-
-export interface CreateSiteVisitRequest {
-  projectId: string | number;
-  visitDate: string;
-  visitorName: string;
-  findings?: string;
-  recommendations?: string;
-}
-
-export interface UpdateSiteVisitRequest {
-  id: string | number;
-  visitDate?: string;
-  visitorName?: string;
-  findings?: string;
-  recommendations?: string;
-}
-
-export interface Award {
-  id?: string | number;
-  projectId?: string | number;
-  amount?: number;
-  awardDate?: string;
-  conditions?: string;
-  [key: string]: any;
-}
-
-export interface CreateAwardRequest {
-  projectId: string | number;
-  amount: number;
-  awardDate?: string;
-  conditions?: string;
-}
-
-export interface Budget {
-  id?: string | number;
-  projectId?: string | number;
-  category?: string;
-  allocatedAmount?: number;
-  spentAmount?: number;
-  notes?: string;
-  [key: string]: any;
-}
-
-export interface CreateBudgetRequest {
-  projectId: string | number;
-  category: string;
-  allocatedAmount: number;
-  notes?: string;
-}
-
-export interface UpdateBudgetRequest {
-  id: string | number;
-  category?: string;
-  allocatedAmount?: number;
-  spentAmount?: number;
-  notes?: string;
-}
-
-export interface Contract {
-  id?: string | number;
-  projectId?: string | number;
-  title?: string;
-  contractNumber?: string;
-  status?: ContractStatus;
-  signedDate?: string;
-  expiryDate?: string;
-  value?: number;
-  [key: string]: any;
-}
-
-export interface CreateContractRequest {
-  projectId: string | number;
-  title: string;
-  contractNumber?: string;
-  signedDate?: string;
-  expiryDate?: string;
-  value?: number;
-}
-
-export interface UpdateContractRequest {
-  id: string | number;
-  title?: string;
-  status?: ContractStatus;
-  expiryDate?: string;
-  value?: number;
-}
-
-export interface ExecuteContractRequest {
-  contractId: string | number;
-  executionDate: string;
-  notes?: string;
-}
-
-export interface Instrument {
-  id?: string | number;
-  programmeId?: string | number;
-  name?: string;
-  type?: string;
-  description?: string;
-  terms?: string;
-  [key: string]: any;
-}
-
-export interface CreateInstrumentRequest {
-  programmeId: string | number;
-  name: string;
-  type?: string;
-  description?: string;
-  terms?: string;
-}
-
-export interface UpdateInstrumentRequest {
-  id: string | number;
-  name?: string;
-  type?: string;
-  description?: string;
-  terms?: string;
-}
-
-export interface Organisation {
-  id?: string | number;
-  name?: string;
-  registrationNumber?: string;
-  type?: OrganisationType;
-  email?: string;
-  phone?: string;
-  address?: string;
-  [key: string]: any;
-}
-
-export interface CreateOrganisationRequest {
-  name: string;
-  registrationNumber?: string;
-  type?: OrganisationType;
-  email?: string;
-  phone?: string;
-  address?: string;
-}
-
-export interface UpdateOrganisationRequest {
-  id: string | number;
-  name?: string;
-  registrationNumber?: string;
-  type?: OrganisationType;
-  email?: string;
-  phone?: string;
-  address?: string;
-}
-
-export interface Portfolio {
-  id?: string | number;
-  organisationId?: string | number;
-  name?: string;
-  description?: string;
-  totalValue?: number;
-  [key: string]: any;
-}
-
-export interface CreatePortfolioRequest {
-  organisationId: string | number;
-  name: string;
-  description?: string;
-}
-
-export interface UpdatePortfolioRequest {
-  id: string | number;
-  name?: string;
-  description?: string;
-}
-
-export interface Programme {
-  id?: string | number;
-  portfolioId?: string | number;
-  name?: string;
-  description?: string;
-  budget?: number;
-  startDate?: string;
-  endDate?: string;
-  [key: string]: any;
-}
-
-export interface CreateProgrammeRequest {
-  portfolioId: string | number;
-  name: string;
-  description?: string;
-  budget?: number;
-  startDate?: string;
-  endDate?: string;
-}
-
-export interface UpdateProgrammeRequest {
-  id: string | number;
-  name?: string;
-  description?: string;
-  budget?: number;
-}
-
-export interface Tenant {
-  id?: string | number;
-  name?: string;
-  code?: string;
-  isActive?: boolean;
-  createdDate?: string;
-  [key: string]: any;
-}
-
-export interface CreateTenantRequest {
-  name: string;
-  code?: string;
-  isActive?: boolean;
-}
-
-export interface UpdateTenantRequest {
-  id: string | number;
-  name?: string;
-  code?: string;
-  isActive?: boolean;
-}
-
-export interface Dashboard {
-  totalProjects?: number;
-  totalCommittedCapital?: number;
-  totalDisbursedCapital?: number;
-  activeMilestonesCount?: number;
-  complianceRate?: number;
-  recentActivities?: any[];
-  [key: string]: any;
-}
-
-export interface AuditLog {
-  id?: string | number;
-  entityName?: string;
-  entityId?: string | number;
-  action?: string;
-  timestamp?: string;
-  performedBy?: string;
-  details?: string;
-  error?: string | null;
-  isError?: boolean;
-  [key: string]: any;
-}
-
-export interface Disbursement {
-  id?: string | number;
-  projectId?: string | number;
-  milestoneId?: string | number;
-  amount?: number;
-  disbursementDate?: string;
-  status?: ApprovalStatus;
-  referenceNumber?: string;
-  [key: string]: any;
-}
-
-export interface CreateDisbursementRequest {
-  projectId: string | number;
-  milestoneId?: string | number;
-  amount: number;
-  referenceNumber?: string;
-}
-
-export interface UpdateDisbursementRequest {
-  id: string | number;
-  amount?: number;
-  status?: ApprovalStatus;
-  referenceNumber?: string;
-}
-
-export interface Risk {
-  id?: string | number;
-  projectId?: string | number;
-  title?: string;
-  description?: string;
-  likelihood?: RiskLikelihood;
-  impact?: RiskImpact;
-  mitigationPlan?: string;
-  status?: string;
-  [key: string]: any;
-}
-
-export interface CreateRiskRequest {
-  projectId: string | number;
-  title: string;
-  description?: string;
-  likelihood?: RiskLikelihood;
-  impact?: RiskImpact;
-  mitigationPlan?: string;
-}
-
-export interface UpdateRiskRequest {
-  id: string | number;
-  title?: string;
-  description?: string;
-  likelihood?: RiskLikelihood;
-  impact?: RiskImpact;
-  mitigationPlan?: string;
-  status?: string;
-}
-
-export interface Rule {
-  id?: string | number;
-  programmeId?: string | number;
-  name?: string;
-  expression?: string;
-  description?: string;
-  isActive?: boolean;
-  [key: string]: any;
-}
-
-export interface CreateRuleRequest {
-  programmeId: string | number;
-  name: string;
-  expression: string;
-  description?: string;
-  isActive?: boolean;
-}
-
-export interface UpdateRuleRequest {
-  id: string | number;
-  name?: string;
-  expression?: string;
-  description?: string;
-  isActive?: boolean;
-}
-
-export interface Evidence {
-  id?: string | number;
-  projectId?: string | number;
-  milestoneId?: string | number;
-  title?: string;
-  description?: string;
-  type?: EvidenceType;
-  fileUrl?: string;
-  fileName?: string;
-  fileSize?: number;
-  uploadedAt?: string;
-  verified?: boolean;
-  [key: string]: any;
-}
-
-export interface UpdateEvidenceRequest {
-  id: string | number;
-  title?: string;
-  description?: string;
-  type?: EvidenceType;
-  verified?: boolean;
-}
-
-export interface Indicator {
-  id?: string | number;
-  projectId?: string | number;
-  name?: string;
-  description?: string;
-  targetValue?: number;
-  actualValue?: number;
-  unit?: UnitOfMeasure;
-  [key: string]: any;
-}
-
-export interface CreateIndicatorRequest {
-  projectId: string | number;
-  name: string;
-  description?: string;
-  targetValue: number;
-  unit?: UnitOfMeasure;
-}
-
-export interface Invite {
-  id?: string | number;
-  email?: string;
-  role?: string;
-  organisationId?: string | number;
-  status?: string;
-  expiresAt?: string;
-  [key: string]: any;
-}
-
-export interface InviteRequest {
-  email: string;
-  role?: string;
-  organisationId?: string | number;
-}
-
-export interface Notification {
-  id?: string | number;
-  organisationId?: string | number;
-  platform?: NotificationPlatform;
-  status?: NotificationStatus;
-  message?: string;
-  recipient?: string;
-  sentAt?: string;
-  [key: string]: any;
-}
+export * from '../../types';
@@ -3,29 +3,82 @@ import { getApiBaseUrl } from '../config';
 import { triggerSessionExpired, isUserSyncEndpoint, isTenantEndpoint } from './sessionExpiration';
 import { isUserSyncedInBrowser, isActivationPending, syncUserAccount } from './userSyncService';

+export const BASE_API_URL = getApiBaseUrl();
+
+const MUTATION_EPOCH_STORAGE_KEY = 'pfm_mutation_epoch';
+
+let activeMutationEpoch: number = (() => {
+  if (typeof window !== 'undefined') {
+    try {
+      const stored = sessionStorage.getItem(MUTATION_EPOCH_STORAGE_KEY);
+      if (stored) {
+        const parsed = Number(stored);
+        if (!isNaN(parsed) && parsed > 0) return parsed;
+      }
+    } catch {}
+  }
+  return Date.now();
+})();
+
+export function getMutationEpoch(): number {
+  return activeMutationEpoch;
+}
+
+export function bumpMutationEpoch(): number {
+  activeMutationEpoch = Date.now();
+  if (typeof window !== 'undefined') {
+    try {
+      sessionStorage.setItem(MUTATION_EPOCH_STORAGE_KEY, String(activeMutationEpoch));
+    } catch {}
+  }
+  return activeMutationEpoch;
+}
+
 export const apiClient = axios.create({
-  baseURL: getApiBaseUrl(),
+  baseURL: BASE_API_URL,
  headers: {
    'Content-Type': 'application/json; version=1',
    Accept: 'application/json; version=1',
+    'Cache-Control': 'no-cache, no-store, must-revalidate',
+    Pragma: 'no-cache',
  },
-  timeout: 20000,
+  timeout: 15000,
 });

 apiClient.interceptors.request.use(
  async (config: InternalAxiosRequestConfig) => {
    config.baseURL = getApiBaseUrl();
-    const token = typeof window !== 'undefined' ? localStorage.getItem('pfm_access_token') : null;
+    const token = localStorage.getItem('pfm_access_token');
    if (token && config.headers) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    const isLifecycleRequest = isUserSyncEndpoint(config.url) || isTenantEndpoint(config.url);
+    const isExternal =
+      config.url?.startsWith('http://') ||
+      config.url?.startsWith('https://') ||
+      config.url?.includes('amazonaws.com') ||
+      config.url?.includes('garage');
+
+    // Always attach freshness timestamp and mutation epoch to internal GET requests
+    // to guarantee zero stale data, bypass browser HTTP caches, and prevent stale OutputCache hits
+    if (config.method?.toUpperCase() === 'GET' && !isExternal) {
+      if (config.params instanceof URLSearchParams) {
+        config.params.set('_t', String(Date.now()));
+        config.params.set('_v', String(getMutationEpoch()));
+      } else {
+        config.params = config.params || {};
+        config.params._t = Date.now();
+        config.params._v = getMutationEpoch();
+      }
+    }
+
    if (token && !isLifecycleRequest) {
      if (isActivationPending()) {
        return Promise.reject(new Error('User account is pending administrator activation'));
      }
-      const storedSub = typeof window !== 'undefined' ? (localStorage.getItem('pfm_user_sub') || '') : '';
+
+      const storedSub = localStorage.getItem('pfm_user_sub') || '';
      if (!isUserSyncedInBrowser(storedSub, token)) {
        const syncRes = await syncUserAccount(storedSub, token);
        if (!syncRes.success) {
@@ -33,20 +86,40 @@ apiClient.interceptors.request.use(
        }
      }
    }
+
    return config;
  },
  (error) => Promise.reject(error)
 );

 apiClient.interceptors.response.use(
-  (response) => response,
+  (response) => {
+    const method = response.config?.method?.toLowerCase();
+    if (method && ['post', 'put', 'patch', 'delete'].includes(method)) {
+      bumpMutationEpoch();
+    }
+    return response;
+  },
  (error) => {
    if (error?.response?.status === 401) {
      const requestUrl = error.config?.url;
      const isLifecycleEndpoint = isUserSyncEndpoint(requestUrl) || isTenantEndpoint(requestUrl);
+
      if (!isLifecycleEndpoint) {
-        const detailMsg = error?.response?.data?.detail || error?.response?.data?.message || 'Session expired (HTTP 401).';
+        const detailMsg =
+          error?.response?.data?.detail ||
+          error?.response?.data?.message ||
+          'Authentication session expired or security token invalidated (HTTP 401).';
+
        triggerSessionExpired(detailMsg, requestUrl);
+      } else {
+        if (typeof window !== 'undefined') {
+          localStorage.removeItem('pfm_access_token');
+          localStorage.removeItem('pfm_access_user');
+          localStorage.removeItem('pfm_user_sync_record');
+          localStorage.removeItem('pfm_user_pending_activation');
+          localStorage.removeItem('pfm_user_pending_activation_reason');
+        }
      }
    }
    return Promise.reject(error);
@@ -0,0 +1,281 @@
+import {
+  NotificationPlatform,
+  NotificationStatus,
+  ApprovalStatus,
+  ActivityStatus,
+  ContractStatus,
+  ComplianceStatus,
+  User,
+  Invite,
+  CreateNotificationRequest,
+} from '../types';
+import { apiClient } from './httpClient';
+import {
+  getCurrentUserSub,
+  getCurrentUserClaims,
+  getCurrentUserTenantId,
+} from '../auth/AuthProvider';
+
+export const CONSOLE_PORTAL_URL = 'https://console.ifri.khongisa.co.za/';
+export const PARTNER_PORTAL_URL = 'https://partner.ifri.khongisa.co.za/';
+
+export async function dispatchNotification(payload: CreateNotificationRequest): Promise<void> {
+  const tenantId = getCurrentUserTenantId();
+  const orgId =
+    payload.organisationId !== undefined && payload.organisationId !== '' && payload.organisationId !== null
+      ? Number(payload.organisationId)
+      : (tenantId !== null ? tenantId : 1);
+
+  await apiClient.post('/v1/api/communications/notifications', {
+    organisationId: orgId,
+    recipient: payload.recipient,
+    platform: payload.platform,
+    subject: payload.subject || null,
+    destination: payload.destination || 'In-App User Inbox',
+    message: payload.message,
+    status: payload.status !== undefined ? payload.status : undefined,
+  });
+}
+
+export async function fetchDirectoryUsers(page = 1, pageSize = 200): Promise<User[]> {
+  try {
+    const res = await apiClient.post<User[]>(`/v1/api/users/${page}/${pageSize}`, {});
+    return res.data || [];
+  } catch (err) {
+    console.warn('[NotificationRules] Failed to fetch users directory:', err);
+    return [];
+  }
+}
+
+export function isApprovedOrActiveStatus(status: number | string | undefined | null): boolean {
+  if (status === undefined || status === null) return false;
+
+  const numStatus = Number(status);
+  if (
+    numStatus === ApprovalStatus.Approved ||
+    numStatus === ActivityStatus.Active ||
+    numStatus === ContractStatus.Active ||
+    numStatus === ContractStatus.Executed ||
+    numStatus === ComplianceStatus.Met ||
+    numStatus === ComplianceStatus.Exceeded
+  ) {
+    return true;
+  }
+
+  const strStatus = String(status).toLowerCase().trim();
+  return (
+    strStatus === 'approved' ||
+    strStatus === 'active' ||
+    strStatus === 'executed' ||
+    strStatus === 'met' ||
+    strStatus === 'exceeded' ||
+    strStatus === 'verified'
+  );
+}
+
+export function getApprovedOrActiveStatusLabel(status: number | string | undefined | null): string {
+  if (status === undefined || status === null) return 'Active';
+  const numStatus = Number(status);
+  if (numStatus === ApprovalStatus.Approved) return 'Approved';
+  if (numStatus === ActivityStatus.Active) return 'Active';
+  if (numStatus === ContractStatus.Active) return 'Active';
+  if (numStatus === ComplianceStatus.Met) return 'Compliant (Met)';
+
+  const str = String(status);
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export async function getTenantManagersAndExecutives(): Promise<User[]> {
+  try {
+    const tenantId = getCurrentUserTenantId();
+    const users = await fetchDirectoryUsers(1, 200);
+
+    const managersAndExecutives = users.filter((u) => {
+      const roleStr = String(u.role || '').toLowerCase();
+      const isManagerOrExec =
+        roleStr.includes('manager') ||
+        roleStr.includes('executive') ||
+        roleStr.includes('director') ||
+        roleStr === '2' ||
+        roleStr === '4';
+
+      const matchesTenant =
+        !tenantId || !u.tenant_id || Number(u.tenant_id) === Number(tenantId);
+
+      return isManagerOrExec && matchesTenant;
+    });
+
+    if (managersAndExecutives.length > 0) {
+      return managersAndExecutives;
+    }
+
+    const elevatedUsers = users.filter((u) => {
+      const roleStr = String(u.role || '').toLowerCase();
+      return (
+        roleStr.includes('admin') ||
+        roleStr.includes('supervisor') ||
+        roleStr === '1' ||
+        roleStr === '3'
+      );
+    });
+
+    if (elevatedUsers.length > 0) {
+      return elevatedUsers;
+    }
+  } catch (err) {
+    console.warn('[NotificationRules] Directory lookup failed, using authenticated identity fallback:', err);
+  }
+
+  const currentSub = getCurrentUserSub();
+  const currentClaims = getCurrentUserClaims();
+  if (currentSub) {
+    return [
+      {
+        id: currentSub,
+        email: (currentClaims.email as string) || (currentClaims.preferred_username as string) || 'manager@pfm.org.za',
+        status: ActivityStatus.Active,
+        lastLoginAt: null,
+        role: 'Manager',
+        name: (currentClaims.name as string) || 'Tenant Manager',
+      },
+    ];
+  }
+
+  return [];
+}
+
+export interface RecordStatusChangeNotificationParams {
+  recordType: string;
+  recordId: string | number;
+  newStatus: number | string;
+  title?: string;
+  previousStatus?: number | string;
+}
+
+export async function notifyTenantManagersAndExecutivesOnRecordStatusChange(
+  params: RecordStatusChangeNotificationParams
+): Promise<void> {
+  const { recordType, recordId, newStatus, title } = params;
+
+  if (recordType.toLowerCase() === 'user' || recordType.toLowerCase() === 'users') {
+    return;
+  }
+
+  if (!isApprovedOrActiveStatus(newStatus)) {
+    return;
+  }
+
+  const statusLabel = getApprovedOrActiveStatusLabel(newStatus);
+  const orgId = getCurrentUserTenantId() || 1;
+  const managersAndExecutives = await getTenantManagersAndExecutives();
+
+  if (managersAndExecutives.length === 0) {
+    return;
+  }
+
+  const recordDescriptor = title
+    ? `${recordType} "${title}" (#${recordId})`
+    : `${recordType} #${recordId}`;
+
+  const inAppSubject = `[${statusLabel}] ${recordType} #${recordId} is now ${statusLabel}`;
+  const inAppMessage = `### Statutory Record Update\n\nThe record **${recordDescriptor}** has officially transitioned to **${statusLabel}** status.\n\n- **Record Category:** ${recordType}\n- **Identifier:** #${recordId}\n- **Updated Status:** ${statusLabel}\n- **Timestamp:** ${new Date().toLocaleString()}`;
+
+  const emailSubject = `[PFM Governance Alert] ${recordType} #${recordId} Status Transition: ${statusLabel}`;
+  const emailMessage = `### Formal Statutory Notification\n\nThis is an automated notification to Tenant Managers and Executives regarding an approved record status update.\n\n**Record Details:**\n- **Category:** ${recordType}\n- **Reference Identifier:** #${recordId}\n${title ? `- **Title:** ${title}\n` : ''}- **New Lifecycle Status:** **${statusLabel}**\n- **Effective Timestamp:** ${new Date().toUTCString()}`;
+
+  for (const recipient of managersAndExecutives) {
+    if (!recipient.id) continue;
+    const recipientEmail = recipient.email || 'manager@pfm.org.za';
+
+    try {
+      await dispatchNotification({
+        organisationId: orgId,
+        recipient: recipient.id,
+        platform: NotificationPlatform.InApp,
+        subject: inAppSubject,
+        destination: recipientEmail,
+        message: inAppMessage,
+        status: NotificationStatus.Delivered,
+      });
+    } catch {}
+
+    try {
+      await dispatchNotification({
+        organisationId: orgId,
+        recipient: recipient.id,
+        platform: NotificationPlatform.Email,
+        subject: emailSubject,
+        destination: `To: ${recipientEmail} | From: PFM Automated Governance System`,
+        message: emailMessage,
+        status: NotificationStatus.Queued,
+      });
+    } catch {}
+  }
+}
+
+export interface InviteApprovedNotificationParams {
+  invite: Partial<Invite> & {
+    id: number | string;
+    recipient: string;
+    invitedOrganisationId?: number | string;
+    organisationId?: number | string;
+    awardId?: number | string;
+    contractId?: number | string;
+    message?: string;
+  };
+  partnerUser?: User | null;
+  partnerEmail?: string;
+}
+
+export async function notifyInviteApproved(
+  params: InviteApprovedNotificationParams
+): Promise<void> {
+  const { invite, partnerUser, partnerEmail } = params;
+  if (!invite.recipient) return;
+
+  const orgId = invite.invitedOrganisationId || invite.organisationId || getCurrentUserTenantId() || 1;
+  const targetEmail = partnerEmail || partnerUser?.email || invite.recipient;
+
+  try {
+    await dispatchNotification({
+      organisationId: orgId,
+      recipient: invite.recipient,
+      platform: NotificationPlatform.InApp,
+      subject: 'Onboarding Invitation Approved: Access to Partner Portal Granted',
+      destination: targetEmail,
+      message: `Your statutory onboarding invitation has been formally Approved. Access the Partner Portal at ${PARTNER_PORTAL_URL}.`,
+      status: NotificationStatus.Delivered,
+    });
+  } catch {}
+}
+
+export interface NewUserCreatedNotificationParams {
+  userId: string;
+  email: string;
+  isPartner: boolean;
+  roleName?: string;
+  tenantId?: number | string | null;
+}
+
+export async function notifyNewUserCreated(
+  params: NewUserCreatedNotificationParams
+): Promise<void> {
+  const { userId, email, isPartner, tenantId } = params;
+  if (!userId || !email) return;
+
+  const orgId = tenantId ? Number(tenantId) : (getCurrentUserTenantId() || 1);
+  const targetUrl = isPartner ? PARTNER_PORTAL_URL : CONSOLE_PORTAL_URL;
+
+  try {
+    await dispatchNotification({
+      organisationId: orgId,
+      recipient: userId,
+      platform: NotificationPlatform.InApp,
+      subject: 'Welcome to PFM - Your Account Has Been Created',
+      destination: email,
+      message: `Your user account has been created. Please sign in at ${targetUrl}.`,
+      status: NotificationStatus.Delivered,
+    });
+  } catch {}
+}
+
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
hermes	b8c3201c58	Refactored quartz healthcheck on api	2026-10-27 23:59:58 +02:00
hermes	a8daea830f	Refactored quartz client registration	2026-10-27 23:48:36 +02:00
hermes	5be7c8c56a	Removed defaults from feature flags	2026-10-27 23:17:18 +02:00
hermes	d24b0dafb1	Added http accessor to scheduler	2026-10-27 23:04:50 +02:00
hermes	cd47a2b93a	Fixed scheduler and api configuration	2026-10-27 22:08:12 +02:00
hermes	c11535ebfc	Added scheduler	2026-10-27 21:31:27 +02:00
hermes	129d10c7d1	Added jobs project and updated nuget packages	2026-10-27 08:28:24 +02:00
hermes	9f132eeb29	Fixed UI misalignments	2026-10-26 19:57:32 +02:00
hermes	80c798e5e6	Added Portfolio Analytics refresh button and card-per-award with contract, programme, and portfolio details	2026-10-26 17:45:52 +02:00
hermes	2690b3230e	Refactored Evidence to UpdateBy is optional When creating evidence	2026-10-26 17:03:53 +02:00
hermes	155a379ab4	Resolved reply recipient userId from TenantUsers and enabled Beneficiary compliance exploration modal	2026-10-26 10:02:14 +02:00
hermes	f56cb70b55	Fixed dshboard render crash	2026-10-26 09:34:15 +02:00
hermes	bb77a4dc9a	PartnerUI evidence, notification, indicators and actuals fixes	2026-10-26 08:53:05 +02:00
hermes	5ac317cbe3	Fixed partnerui hashing and over all theming	2026-10-25 19:44:46 +02:00
hermes	0bcc3484dc	Updated evidence handling	2026-10-25 18:58:30 +02:00
hermes	fddf400ddd	Updated partner project listing to use returned data	2026-10-25 18:30:32 +02:00
hermes	a1b8410bc2	Updated invite creation	2026-10-25 17:46:59 +02:00
hermes	cb0da32ce4	Fixed project status update on approval to do perform compliance check	2026-10-25 17:14:42 +02:00
hermes	70e286670e	Light refactor	2026-10-25 13:48:15 +02:00
hermes	c6075a5c39	Fixed update organisation endpoint constraints	2026-10-25 13:47:33 +02:00
hermes	4e1211a1e1	Fixed idNumber missed assignment when updating organisation	2026-10-25 13:34:52 +02:00
hermes	c8e54815ef	Fixed update modal linked user assignment	2026-10-25 13:23:25 +02:00
hermes	31d775c917	Fixed frozen org editor modal	2026-10-25 12:50:35 +02:00
hermes	78d147b002	Fix UI freeze by removing cyclical useEffect and stabilizing executive candidate memo	2026-10-25 12:13:15 +02:00
hermes	07018c3ce4	Auto-assign linked executive user and persist userId in organisation update modal	2026-10-25 12:02:30 +02:00
hermes	db08bbf162	Added admin override when updating organisation	2026-10-25 11:19:59 +02:00
hermes	ac357285c3	Enhanced shieldcheck	2026-10-25 11:07:05 +02:00
hermes	a4927f9742	Fix vite env type declarations and tsconfig in PartnerUI	2026-10-25 11:04:29 +02:00
hermes	fac88f3471	Fix missing lucide icon imports in GovernancePage and null-safety in DashboardPage	2026-10-25 10:35:27 +02:00
hermes	aeb7542cfe	Optimised cach usage, and enforced maker checker	2026-10-25 10:11:57 +02:00
hermes	9724bbac24	Removed award validation from budget creation process	2026-10-25 09:17:00 +02:00
hermes	deb21dbb9a	Redesigned dashboard	2026-10-25 08:52:14 +02:00
khwezi	98fe1e3e3d	Merge pull request 'Moved top bar to top' (#173 ) from finishline into main Reviewed-on: #173	2026-10-25 08:27:23 +02:00
hermes	48edfa1cbb	Moved top bar to top	2026-10-25 08:26:37 +02:00
khwezi	d9b65010cf	Merge pull request 'Redesigned PartnerUi dashboard' (#172 ) from finishline into main Reviewed-on: #172	2026-10-25 08:02:27 +02:00
hermes	3e1d8bc1cc	Redesigned PartnerUi dashboard	2026-10-25 08:01:34 +02:00
khwezi	bc441c1255	Merge pull request 'Fixed ConsoleUi salt handling' (#171 ) from finishline into main Reviewed-on: #171	2026-10-24 18:10:42 +02:00
hermes	17a4149a73	Fixed ConsoleUi salt handling	2026-10-24 18:09:59 +02:00
khwezi	6e786ca796	Merge pull request 'Finishline' (#170 ) from finishline into main Reviewed-on: #170	2026-10-24 17:37:15 +02:00
hermes	25e251aa79	Overhauled lockout process	2026-10-24 17:36:30 +02:00
hermes	a731c979bb	Overhauled lockout process	2026-10-24 17:29:48 +02:00
khwezi	90631d22ae	Merge pull request 'Applied extensive leaked secret protection' (#169 ) from finishline into main Reviewed-on: #169	2026-10-24 15:57:01 +02:00
hermes	17a99ff084	Applied extensive leaked secret protection	2026-10-24 15:56:25 +02:00
khwezi	010f2d5eaa	Merge pull request 'Stopped leaking secrets' (#168 ) from finishline into main Reviewed-on: #168	2026-10-24 15:44:08 +02:00
hermes	29a11f0e0b	Stopped leaking secrets	2026-10-24 15:43:10 +02:00
khwezi	b8f5ebf69a	Merge pull request 'Finishline' (#167 ) from finishline into main Reviewed-on: #167	2026-10-24 15:23:51 +02:00
hermes	385c76510b	Fixed partnerui message viewer	2026-10-24 15:23:12 +02:00
hermes	631a0b7a9a	Fixed partner message reader	2026-10-24 15:18:34 +02:00
khwezi	957e75a853	Merge pull request 'Applied CORS fix' (#166 ) from finishline into main Reviewed-on: #166	2026-10-24 14:59:28 +02:00
hermes	1233f15b91	Applied CORS fix	2026-10-24 14:58:55 +02:00
khwezi	8a06a86eb3	Merge pull request 'Fixed Console user lockout and unlock implementation' (#165 ) from finishline into main Reviewed-on: #165	2026-10-24 14:39:40 +02:00
hermes	c43e18f184	Fixed Console user lockout and unlock implementation	2026-10-24 14:38:55 +02:00
khwezi	f8f826979d	Merge pull request 'Finishline' (#164 ) from finishline into main Reviewed-on: #164	2026-10-24 12:51:15 +02:00
hermes	d912c5c6c3	Added partner to api cors list	2026-10-24 12:50:28 +02:00
hermes	20bdd8b209	Removed joborchestrator	2026-10-24 12:41:03 +02:00
khwezi	c4a0469bae	Merge pull request 'Finishline' (#163 ) from finishline into main Reviewed-on: #163	2026-10-24 12:13:11 +02:00
hermes	bf384d7e6a	Reverted changes	2026-10-24 12:12:27 +02:00
hermes	957d2210a9	Refactored sync process	2026-10-24 12:11:48 +02:00
khwezi	a3f461478c	Merge pull request 'PartnerUi fixes' (#162 ) from finishline into main Reviewed-on: #162	2026-10-24 11:49:45 +02:00
hermes	16fb6b9434	Simplified lockout modals	2026-10-24 11:48:19 +02:00
hermes	7220700bac	Removed setUserLockout from PartnerUI	2026-10-24 11:39:47 +02:00
khwezi	cc62696017	Merge pull request 'Fixed sync handshake' (#161 ) from finishline into main Reviewed-on: #161	2026-10-23 10:20:48 +02:00
hermes	3316fc0275	Fixed sync handshake	2026-10-23 10:19:30 +02:00
khwezi	d4598e0c6c	Merge pull request 'Implemented partnerui' (#160 ) from finishline into main Reviewed-on: #160	2026-10-23 00:59:39 +02:00
hermes	8f58e15f0f	Implemented partnerui	2026-10-23 00:58:47 +02:00