Fixed frozen org editor modal

Reviewed-on: #173

PostFundManagement.Application/Services/Governance/GovernanceService.cs

@@ -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

PostFundManagement.Application/Services/Grants/GrantsService.cs

@@ -159,12 +159,7 @@ public sealed class GrantsService(IDbContextFactory<ApplicationDbContext> contex
             await using var context = await contextFactory.CreateDbContextAsync(cancellationToken);
 
             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."));
+                return Result.Fail(NotFoundError.New);            
 
             var budget = new Domain.Entities.Budget
             {

PostFundManagement.ConsoleUI/src/components/layout/AppLayout.tsx

@@ -186,7 +186,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 +193,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

PostFundManagement.ConsoleUI/src/components/monitoring/ContractsManagement.tsx

@@ -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>
             ) : (
               (() => {

PostFundManagement.ConsoleUI/src/components/monitoring/EvidenceReviewQueue.tsx

@@ -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>
                       ) : (
                         <>

PostFundManagement.ConsoleUI/src/components/notifications/UserSearchPicker.tsx

@@ -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

PostFundManagement.ConsoleUI/src/hooks/useInAppNotifications.ts

@@ -124,7 +124,6 @@ export function useInAppNotifications() {
     },
     // Live polling every 30 seconds
     refetchInterval: 30000,
-    staleTime: 10000,
   });
 
   // InApp notifications (strictly platform === InApp 5) for Bell & Counters

PostFundManagement.ConsoleUI/src/lib/queryClient.ts

@@ -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)

PostFundManagement.ConsoleUI/src/pages/ChangeManagementPage.tsx

@@ -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

PostFundManagement.ConsoleUI/src/pages/GovernancePage.tsx

@@ -11,6 +11,7 @@ import {
   Edit2,
   Mail,
   Shield,
+  ShieldCheck,
   Layers,
   ChevronRight,
   Search,
@@ -24,6 +25,7 @@ import {
   UserPlus,
   ChevronDown,
   ChevronUp,
+  CheckCircle,
   CheckCircle2,
   Loader2,
   Lock,
@@ -69,6 +71,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';
@@ -134,8 +137,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 +244,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 +265,39 @@ export const GovernancePage: React.FC = () => {
     });
   }, [usersDirectory]);
 
+  const modalExecutiveUsers = React.useMemo(() => {
+    const list: User[] = [...executiveAndManagerUsers];
+    const linkedUserId =
+      editingOrg?.userId ||
+      editingOrg?.UserId ||
+      editingOrg?.organisationUser ||
+      editingOrg?.OrganisationUser ||
+      '';
+
+    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, editingOrg?.organisationUser]);
+
   // Quick Add Executive User Subform state
   const [isQuickAddUserOpen, setIsQuickAddUserOpen] = useState(false);
   const [quickUserEmail, setQuickUserEmail] = useState('');
@@ -580,7 +615,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,
     },
   });
@@ -595,6 +630,7 @@ export const GovernancePage: React.FC = () => {
           registrationNo: data.registrationNo,
           email: data.email,
           organisationUser: data.organisationUser,
+          userId: data.organisationUser,
           type: Number(data.type),
           status: data.status !== undefined ? Number(data.status) : ActivityStatus.Active,
         });
@@ -608,6 +644,7 @@ export const GovernancePage: React.FC = () => {
       });
     },
     onSuccess: () => {
+      bumpMutationEpoch();
       queryClient.invalidateQueries({ queryKey: ['organisations'] });
       success(editingOrg ? 'Organisation updated' : 'Organisation registered successfully');
       setIsOrgModalOpen(false);
@@ -639,6 +676,7 @@ export const GovernancePage: React.FC = () => {
       });
     },
     onSuccess: () => {
+      bumpMutationEpoch();
       queryClient.invalidateQueries({ queryKey: ['portfolios'] });
       success(editingPortfolio ? 'Portfolio updated successfully' : 'Portfolio created successfully');
       setIsPortfolioModalOpen(false);
@@ -650,15 +688,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 +735,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);
@@ -707,11 +775,28 @@ export const GovernancePage: React.FC = () => {
       org.createdBy ||
       '';
 
-    const matchedUser = targetUserId
-      ? usersDirectory.find((u) => u.id && String(u.id).toLowerCase() === String(targetUserId).toLowerCase())
-      : null;
+    let selectedUserId = '';
+    if (targetUserId) {
+      const targetStr = String(targetUserId).toLowerCase();
+      const 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);
+        }
+      }
+    }
 
     orgForm.reset({
       name: org.name || '',
@@ -755,7 +840,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 +918,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 +949,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 +968,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 (
@@ -1382,19 +1470,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 +1493,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 +1512,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 +1591,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>
@@ -1640,7 +1765,7 @@ export const GovernancePage: React.FC = () => {
                 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>
@@ -2004,18 +2129,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
@@ -2717,13 +2842,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>
-                  <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>
+                  <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 +2895,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 */}

PostFundManagement.ConsoleUI/src/pages/GrantsPage.tsx

@@ -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,
@@ -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(
@@ -826,8 +832,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}
@@ -919,10 +927,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 +981,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}
@@ -1059,10 +1069,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 +1143,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}
@@ -1549,7 +1561,7 @@ 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;
             }
             updateAwardMutation.mutate({
@@ -1630,7 +1642,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
@@ -1783,7 +1795,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

PostFundManagement.ConsoleUI/src/pages/InboxPage.tsx

@@ -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 {

PostFundManagement.ConsoleUI/src/pages/SettingsPage.tsx

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

PostFundManagement.ConsoleUI/src/pages/SiteVisitsPage.tsx

@@ -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

PostFundManagement.ConsoleUI/src/pages/TenantManagementPage.tsx

@@ -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

PostFundManagement.ConsoleUI/src/services/api.ts

@@ -247,6 +247,7 @@ export const createOrganisation = async (payload: CreateOrganisationRequest): Pr
     email: payload.email,
     idNumber: payload.idNumber || null,
     organisationUser: payload.organisationUser,
+    userId: payload.userId || payload.organisationUser,
     type: payload.type !== undefined ? Number(payload.type) : 5,
   });
   return res.data;
@@ -261,6 +262,7 @@ export const updateOrganisation = async (payload: UpdateOrganisationRequest): Pr
     email: payload.email,
     idNumber: payload.idNumber,
     organisationUser: payload.organisationUser,
+    userId: payload.userId || payload.organisationUser,
     type: Number(payload.type),
     status: orgStatus,
   });
@@ -442,84 +444,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 +474,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 +498,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(),
-  };
+  const res = await apiClient.post<Instrument>('/v1/api/governance/instruments', body);
+  return res.data;
 };
 
 export const createInstruction = createInstrument;
@@ -619,32 +516,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);
-  }
+  const res = await apiClient.put<Instrument>('/v1/api/governance/instruments', body);
   if (isApprovedOrActiveStatus(payload.status)) {
     notifyTenantManagersAndExecutivesOnRecordStatusChange({
       recordType: 'Funding Instrument',
@@ -653,7 +525,7 @@ export const updateInstrument = async (payload: UpdateInstrumentRequest): Promis
       title: payload.name,
     }).catch(console.warn);
   }
-  return updatedInstrument;
+  return res.data;
 };
 
 export const updateInstruction = updateInstrument;
@@ -2246,75 +2118,20 @@ 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');
+  const hashedRuleId = await toolsService.encodeId(ruleId);
+  const res = await apiClient.get<Rule>(`/v1/api/execution/rules/${hashedRuleId}`);
+  if (res.data) {
+    return res.data;
   }
   throw new Error('Rule not found');
 };
@@ -2332,38 +2149,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;
-    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;
+  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,
+  });
+  let result = Array.isArray(res.data) ? res.data : [];
   if (programmeId != null && programmeId !== '' && programmeId !== 'all') {
-    combined = combined.filter((r) => String(r.programmeId) === String(programmeId));
+    result = result.filter((r) => String(r.programmeId) === String(programmeId));
   }
-  return combined;
+  return result;
 };
 
 export const createRule = async (payload: CreateRuleRequest): Promise<Rule> => {
@@ -2375,70 +2170,21 @@ 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(),
-  };
+  const res = await apiClient.post<Rule>('/v1/api/execution/rules', body);
+  return res.data;
 };
 
 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,
-      name: payload.name,
-      description: payload.description,
-      status: Number(payload.status),
-      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);
-  }
+  await apiClient.put('/v1/api/execution/rules', {
+    ruleId: toIntegerId(payload.ruleId),
+    userId: validUserId,
+    name: payload.name,
+    description: payload.description,
+    status: Number(payload.status),
+    version: Number(payload.version || 1),
+    ...(payload.programmeId ? { programmeId: toIntegerId(payload.programmeId) } : {}),
+  });
 };
 
 // ==========================================

PostFundManagement.ConsoleUI/src/services/httpClient.ts

@@ -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,34 +83,16 @@ 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()));
-        } else {
-          config.params = config.params || {};
-          config.params._t = Date.now();
-        }
+      if (config.params instanceof URLSearchParams) {
+        config.params.set('_t', String(Date.now()));
+        config.params.set('_v', String(getMutationEpoch()));
       } 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();
-          }
-        }
+        config.params = config.params || {};
+        config.params._t = Date.now();
+        config.params._v = getMutationEpoch();
       }
     }
 

PostFundManagement.ConsoleUI/src/services/tenantLockoutService.ts

@@ -10,15 +10,8 @@ export interface TenantLockoutResult {
   statusCode?: number;
 }
 
-let cachedTenantLockout: {
-  key: string;
-  result: TenantLockoutResult;
-  timestamp: number;
-} | null = null;
-const LOCKOUT_CACHE_TTL_MS = 60 * 1000;
-
 export function clearTenantLockoutCache(): void {
-  cachedTenantLockout = null;
+  // Caching removed to guarantee fresh tenant state on every verification
 }
 
 export function isStatusActive(status: any): boolean {
@@ -88,15 +81,7 @@ export async function verifyTenantLockout(
     candidateId = tenantClaim;
   }
 
-  const cacheKey = String(candidateId ?? tenantClaim ?? 'default-1').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;
@@ -209,10 +194,6 @@ export async function verifyTenantLockout(
     isActive: true,
     tenant: tenantObj,
   };
-  cachedTenantLockout = {
-    key: cacheKey,
-    result: successResult,
-    timestamp: Date.now(),
-  };
+  // Direct return without caching
   return successResult;
 }

PostFundManagement.ConsoleUI/src/types.ts

@@ -388,6 +388,7 @@ export interface CreateOrganisationRequest {
   email: string;
   idNumber?: string | null;
   organisationUser: string;
+  userId?: string | null;
   type: OrganisationType;
 }
 
@@ -398,6 +399,7 @@ export interface UpdateOrganisationRequest {
   email: string;
   idNumber?: string | null;
   organisationUser: string;
+  userId?: string | null;
   type: OrganisationType;
   status?: ActivityStatus;
 }

PostFundManagement.PartnerUI/src/components/dashboard/DashboardPage.tsx

@@ -293,7 +293,6 @@ export function DashboardPage() {
     queryKey: ['partner-applicant-data', applicantUserId],
     queryFn: () => getApplicantData(applicantUserId),
     enabled: Boolean(applicantUserId),
-    staleTime: 30_000,
   });
 
   // Extract all unique projects, contracts, awards, and organisations from ApplicantData[]
@@ -426,7 +425,6 @@ export function DashboardPage() {
       return Object.fromEntries(results);
     },
     enabled: partnerSummary.projectEntries.length > 0,
-    staleTime: 30_000,
   });
 
   // Combine into EnrichedPartnerProject[]
@@ -761,25 +759,25 @@ export function DashboardPage() {
   }, [inboxNotifications, partnerSummary]);
 
   return (
-    <div className="min-h-screen w-full bg-[#090D16] text-slate-100 p-3 sm:p-6 lg:p-8 selection:bg-indigo-500/30 selection:text-indigo-200">
+    <div className="min-h-screen w-full bg-[#0F0E17] text-[#F1F1F6] flex flex-col selection:bg-[#8B5CF6]/30 selection:text-[#F1F1F6]">
       {/* =====================================================================
-          TOP NAVIGATION BAR — STANDALONE ELEVATED CONTAINER SEPARATED FROM BODY
+          TOP NAVIGATION BAR — SNAPPED TO TOP, 72PX, FULL-WIDTH EDGE-TO-EDGE
       ===================================================================== */}
-      <header className="mx-auto max-w-[1460px] rounded-[24px] sm:rounded-[28px] bg-[#0E1526] border border-white/[0.08] shadow-[0_15px_45px_rgba(0,0,0,0.5)] px-5 sm:px-8 py-3.5 mb-6 sm:mb-8 transition-all">
-        <div className="flex flex-wrap items-center justify-between gap-4">
+      <header className="sticky top-0 z-30 w-full bg-[#0F0E17]/95 backdrop-blur-md border-b border-white/[0.06] h-[72px] flex items-center transition-all">
+        <div className="max-w-[1440px] mx-auto px-6 h-full flex items-center justify-between gap-4 w-full">
           {/* Left: Brand Glyph & Horizontal Navigation Links */}
-          <div className="flex items-center gap-6 sm:gap-10">
+          <div className="flex items-center gap-6 sm:gap-10 h-full">
             {/* Flat black infinity icon rotated with top lobe pointing to 2 o'clock */}
             <div
-              className="w-8 h-8 rounded-xl bg-white flex items-center justify-center shrink-0 cursor-pointer shadow-sm hover:opacity-90 transition-opacity"
+              className="w-8 h-8 rounded-lg bg-white flex items-center justify-center shrink-0 cursor-pointer shadow-sm hover:opacity-90 transition-opacity"
               onClick={() => setActiveTab('dashboard')}
               title="Dashboard Home"
             >
-              <InfinityIcon className="w-5 h-5 text-black -rotate-[30deg]" strokeWidth={2.75} />
+              <InfinityIcon className="w-5 h-5 text-black -rotate-[30deg]" strokeWidth={2.5} />
             </div>
 
-            {/* Nav Tabs with bottom underline on active */}
-            <nav className="hidden md:flex items-center gap-6 lg:gap-8">
+            {/* Nav Tabs with bottom indicator on active */}
+            <nav className="hidden md:flex items-center gap-6 h-full">
               {navTabs.map(tab => {
                 const isActive = activeTab === tab.id;
                 return (
@@ -787,15 +785,15 @@ export function DashboardPage() {
                     key={tab.id}
                     type="button"
                     onClick={() => setActiveTab(tab.id)}
-                    className={`relative py-1 text-sm transition-colors cursor-pointer ${
+                    className={`relative h-full flex items-center text-sm transition-colors cursor-pointer ${
                       isActive
-                        ? 'font-bold text-white'
-                        : 'font-medium text-slate-400 hover:text-slate-200'
+                        ? 'font-bold text-[#F1F1F6]'
+                        : 'font-medium text-[#9A95B0] hover:text-[#F1F1F6]'
                     }`}
                   >
                     <span>{tab.label}</span>
                     {isActive && (
-                      <span className="absolute -bottom-2.5 left-0 right-0 h-[2.5px] rounded-full bg-slate-100" />
+                      <span className="absolute bottom-0 left-0 right-0 h-[3px] bg-[#8B5CF6] rounded-t-[2px]" />
                     )}
                   </button>
                 );
@@ -805,21 +803,21 @@ export function DashboardPage() {
 
           {/* Right: Search Pill + Refresh + Notification Bell + Profile */}
           <div className="flex items-center gap-3 sm:gap-4 ml-auto">
-            {/* Pill Search Input */}
-            <div className="relative w-44 sm:w-56 lg:w-64">
-              <Search className="w-3.5 h-3.5 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
+            {/* Search Input: 280px x 38px */}
+            <div className="relative w-44 sm:w-56 lg:w-[280px] h-[38px]">
+              <Search className="w-3.5 h-3.5 text-[#9A95B0] absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
               <input
                 type="text"
                 value={searchQuery}
                 onChange={e => setSearchQuery(e.target.value)}
                 placeholder="Search ...."
-                className="w-full pl-9 pr-3 py-1.5 rounded-full bg-[#182136] border border-white/[0.07] text-xs text-slate-200 placeholder:text-slate-500 focus:outline-none focus:border-indigo-400 transition-all"
+                className="w-full h-full pl-9 pr-8 rounded-[8px] bg-white/[0.05] border border-white/[0.08] text-xs text-[#F1F1F6] placeholder:text-[#9A95B0]/70 focus:outline-none focus:border-[#8B5CF6] transition-all"
               />
               {searchQuery && (
                 <button
                   type="button"
                   onClick={() => setSearchQuery('')}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300"
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[#9A95B0] hover:text-[#F1F1F6]"
                 >
                   <X className="w-3 h-3" />
                 </button>
@@ -831,9 +829,9 @@ export function DashboardPage() {
               type="button"
               onClick={() => refetchApplicantData()}
               title="Refresh Partner Data"
-              className="p-2 text-slate-400 hover:text-white transition-colors cursor-pointer"
+              className="p-2 text-[#9A95B0] hover:text-[#F1F1F6] transition-colors cursor-pointer"
             >
-              <RefreshCw className={`w-4 h-4 ${isRefreshingApplicantData ? 'animate-spin text-indigo-400' : ''}`} />
+              <RefreshCw className={`w-4 h-4 ${isRefreshingApplicantData ? 'animate-spin text-[#8B5CF6]' : ''}`} />
             </button>
 
             {/* Notification Bell */}
@@ -841,22 +839,22 @@ export function DashboardPage() {
               <button
                 type="button"
                 onClick={() => setShowBellDropdown(prev => !prev)}
-                className="relative p-2 text-slate-400 hover:text-white transition-colors cursor-pointer"
+                className="relative p-2 text-[#9A95B0] hover:text-[#F1F1F6] transition-colors cursor-pointer"
                 aria-label="Notifications"
               >
                 <Bell className="w-4 h-4" />
                 {unreadCount > 0 && (
-                  <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-rose-500 ring-2 ring-[#0E1526]" />
+                  <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-[#EF4444] ring-2 ring-[#0F0E17]" />
                 )}
               </button>
 
               {showBellDropdown && (
-                <div className="absolute right-0 mt-3 w-80 sm:w-96 rounded-2xl bg-[#141C30] border border-white/10 shadow-2xl p-4 z-50">
+                <div className="absolute right-0 mt-3 w-80 sm:w-96 rounded-2xl bg-[#181622] border border-white/[0.08] shadow-2xl p-4 z-50 text-[#F1F1F6]">
                   <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
                     <div className="flex items-center gap-2">
-                      <span className="text-sm font-semibold text-white">Notifications</span>
+                      <span className="text-sm font-semibold text-[#F1F1F6]">Notifications</span>
                       {unreadCount > 0 && (
-                        <span className="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-indigo-500/20 text-indigo-300">
+                        <span className="px-2 py-0.5 text-[11px] font-semibold rounded-full bg-[#8B5CF6]/20 text-[#8B5CF6]">
                           {unreadCount} unread
                         </span>
                       )}
@@ -865,7 +863,7 @@ export function DashboardPage() {
                       <button
                         type="button"
                         onClick={() => markAllAsRead()}
-                        className="text-xs text-indigo-400 hover:text-indigo-300 font-medium cursor-pointer"
+                        className="text-xs text-[#8B5CF6] hover:text-[#8B5CF6]/80 font-medium cursor-pointer"
                       >
                         Mark all read
                       </button>
@@ -873,7 +871,7 @@ export function DashboardPage() {
                   </div>
                   <div className="divide-y divide-white/[0.06] max-h-72 overflow-y-auto my-2">
                     {top5Unread.length === 0 ? (
-                      <div className="py-6 text-center text-xs text-slate-400">
+                      <div className="py-6 text-center text-xs text-[#9A95B0]">
                         You are all caught up! No unread notifications.
                       </div>
                     ) : (
@@ -888,12 +886,12 @@ export function DashboardPage() {
                           }}
                           className="w-full text-left py-3 px-2 hover:bg-white/[0.04] rounded-lg transition-colors flex items-start gap-3 cursor-pointer"
                         >
-                          <span className="h-2 w-2 rounded-full bg-rose-500 mt-1.5 shrink-0" />
+                          <span className="h-2 w-2 rounded-full bg-[#EF4444] mt-1.5 shrink-0" />
                           <div className="min-w-0 flex-1">
-                            <p className="text-xs font-semibold text-white truncate">
+                            <p className="text-xs font-semibold text-[#F1F1F6] truncate">
                               {item.subject || 'Partner Notification'}
                             </p>
-                            <p className="text-xs text-slate-400 line-clamp-2 mt-0.5">
+                            <p className="text-xs text-[#9A95B0] line-clamp-2 mt-0.5">
                               {item.message}
                             </p>
                           </div>
@@ -907,7 +905,7 @@ export function DashboardPage() {
                       setShowBellDropdown(false);
                       setActiveTab('messages');
                     }}
-                    className="w-full py-2 text-center text-xs font-semibold text-indigo-300 hover:text-indigo-200 bg-indigo-500/10 hover:bg-indigo-500/15 rounded-xl transition-colors cursor-pointer"
+                    className="w-full py-2 text-center text-xs font-semibold text-[#8B5CF6] hover:text-white bg-[#8B5CF6]/10 hover:bg-[#8B5CF6]/20 rounded-xl transition-colors cursor-pointer"
                   >
                     See All Messages
                   </button>
@@ -922,24 +920,24 @@ export function DashboardPage() {
                 onClick={() => setShowUserDropdown(prev => !prev)}
                 className="flex items-center gap-2 text-left group cursor-pointer focus:outline-none"
               >
-                <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-amber-400 via-rose-400 to-indigo-500 p-0.5 flex items-center justify-center shrink-0">
-                  <div className="w-full h-full rounded-full bg-[#0E1526] flex items-center justify-center text-[11px] font-bold text-amber-200">
+                <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-amber-400 via-rose-400 to-[#8B5CF6] p-0.5 flex items-center justify-center shrink-0">
+                  <div className="w-full h-full rounded-full bg-[#181622] flex items-center justify-center text-[11px] font-bold text-amber-200">
                     {getInitials(user?.name || 'Samia Afrin Mithila')}
                   </div>
                 </div>
-                <span className="hidden sm:inline-block text-xs font-semibold text-slate-200 group-hover:text-white transition-colors">
+                <span className="hidden sm:inline-block text-xs font-semibold text-[#F1F1F6] group-hover:text-white transition-colors">
                   {user?.name || 'Samia Afrin Mithila'}
                 </span>
-                <ChevronDown className="w-3.5 h-3.5 text-slate-400 group-hover:text-white transition-colors" />
+                <ChevronDown className="w-3.5 h-3.5 text-[#9A95B0] group-hover:text-[#F1F1F6] transition-colors" />
               </button>
 
               {showUserDropdown && (
-                <div className="absolute right-0 mt-3 w-56 rounded-2xl bg-[#141C30] border border-white/10 shadow-2xl p-2 z-50">
+                <div className="absolute right-0 mt-3 w-56 rounded-2xl bg-[#181622] border border-white/[0.08] shadow-2xl p-2 z-50 text-[#F1F1F6]">
                   <div className="px-3 py-2 border-b border-white/[0.06]">
-                    <p className="text-xs font-bold text-white truncate">{user?.name || 'Samia Afrin Mithila'}</p>
-                    <p className="text-[11px] text-slate-400 truncate">{user?.email || 'partner@grantee.org'}</p>
+                    <p className="text-xs font-bold text-[#F1F1F6] truncate">{user?.name || 'Samia Afrin Mithila'}</p>
+                    <p className="text-[11px] text-[#9A95B0] truncate">{user?.email || 'partner@grantee.org'}</p>
                     {partnerSummary.primaryInvitedOrg && (
-                      <p className="text-[10px] text-indigo-400 mt-1 truncate">
+                      <p className="text-[10px] text-[#8B5CF6] mt-1 truncate">
                         {partnerSummary.primaryInvitedOrg.name}
                       </p>
                     )}
@@ -962,7 +960,7 @@ export function DashboardPage() {
         </div>
 
         {/* Mobile Navigation bar for smaller screens */}
-        <div className="flex md:hidden items-center gap-2 pt-3 border-t border-white/[0.06] mt-3 overflow-x-auto">
+        <div className="flex md:hidden items-center gap-2 px-6 pb-2.5 border-t border-white/[0.06] overflow-x-auto bg-[#0F0E17] w-full">
           {navTabs.map(tab => (
             <button
               key={tab.id}
@@ -970,8 +968,8 @@ export function DashboardPage() {
               onClick={() => setActiveTab(tab.id)}
               className={`px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap ${
                 activeTab === tab.id
-                  ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 font-bold'
-                  : 'text-slate-400'
+                  ? 'bg-[#8B5CF6]/20 text-[#8B5CF6] border border-[#8B5CF6]/30 font-bold'
+                  : 'text-[#9A95B0]'
               }`}
             >
               {tab.label}
@@ -981,31 +979,31 @@ export function DashboardPage() {
       </header>
 
       {/* =====================================================================
-          MAIN BODY SECTION (Separated from Top Bar)
+          MAIN BODY SECTION (max-w-[1440px] centered with outer ambient margin)
       ===================================================================== */}
-      <main className="mx-auto max-w-[1460px]">
+      <main className="w-full max-w-[1440px] mx-auto px-6 py-6 sm:py-8 flex-1">
         <div>
           {isLoadingApplicantData ? (
             <div className="py-24 flex flex-col items-center justify-center gap-4 text-center">
-              <div className="h-10 w-10 animate-spin rounded-full border-2 border-indigo-400 border-t-transparent" />
+              <div className="h-10 w-10 animate-spin rounded-full border-2 border-[#8B5CF6] border-t-transparent" />
               <div>
-                <p className="text-base font-semibold text-white">Loading Workspace...</p>
-                <p className="text-xs text-slate-400 mt-1">Retrieving ongoing projects and milestones.</p>
+                <p className="text-base font-semibold text-[#F1F1F6]">Loading Workspace...</p>
+                <p className="text-xs text-[#9A95B0] mt-1">Retrieving ongoing projects and milestones.</p>
               </div>
             </div>
           ) : activeTab === 'dashboard' ? (
             /* =================================================================
-               DASHBOARD: 2-COLUMN DRIBBBLE LAYOUT (Left ~68%, Right ~32%)
+               DASHBOARD: ASYMMETRICAL 2-COLUMN GRID (1fr 340px, gap 24px)
             ================================================================= */
-            <div className="grid grid-cols-1 lg:grid-cols-12 gap-7 items-start">
+            <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-6 items-start">
               
               {/* ===============================================================
-                  LEFT COLUMN: ONGOING PROJECTS (8 of 12 cols)
+                  LEFT MAIN SECTION: ONGOING PROJECTS (~70% width)
               =============================================================== */}
-              <div className="lg:col-span-8 space-y-6">
-                {/* Title + Sort Row */}
+              <div className="space-y-5">
+                {/* Title + Sort Row: 20px / 28px / font-weight 700 / #F1F1F6 */}
                 <div className="flex items-center justify-between">
-                  <h2 className="text-2xl font-bold text-white tracking-tight">
+                  <h2 className="text-[20px] leading-[28px] font-bold text-[#F1F1F6]">
                     Ongoing Projects
                   </h2>
 
@@ -1014,19 +1012,19 @@ export function DashboardPage() {
                     <select
                       value={sortBy}
                       onChange={e => setSortBy(e.target.value as SortOption)}
-                      className="appearance-none bg-transparent hover:text-white pr-6 py-1 text-xs font-medium text-slate-300 focus:outline-none cursor-pointer transition-colors"
+                      className="appearance-none bg-transparent hover:text-[#F1F1F6] pr-6 py-1 text-xs font-medium text-[#9A95B0] focus:outline-none cursor-pointer transition-colors"
                     >
-                      <option value="date_added" className="bg-[#141C30] text-slate-200">Sort by date added</option>
-                      <option value="grant_amount" className="bg-[#141C30] text-slate-200">Sort by spend / grant</option>
-                      <option value="days_left" className="bg-[#141C30] text-slate-200">Sort by days left</option>
-                      <option value="name" className="bg-[#141C30] text-slate-200">Sort by project name</option>
+                      <option value="date_added" className="bg-[#181622] text-[#F1F1F6]">Sort by date added</option>
+                      <option value="grant_amount" className="bg-[#181622] text-[#F1F1F6]">Sort by spend / grant</option>
+                      <option value="days_left" className="bg-[#181622] text-[#F1F1F6]">Sort by days left</option>
+                      <option value="name" className="bg-[#181622] text-[#F1F1F6]">Sort by project name</option>
                     </select>
-                    <ChevronDown className="w-3.5 h-3.5 text-slate-400 absolute right-0 top-1/2 -translate-y-1/2 pointer-events-none" />
+                    <ChevronDown className="w-3.5 h-3.5 text-[#9A95B0] absolute right-0 top-1/2 -translate-y-1/2 pointer-events-none" />
                   </div>
                 </div>
 
-                {/* Render Real Projects if available, or Showcase Projects */}
-                <div className="space-y-6">
+                {/* Stacked Project Cards */}
+                <div className="space-y-4">
                   {filteredProjects.length > 0 ? (
                     filteredProjects.map((item, pIdx) => {
                       const { project, award, contract, fundingOrganisation, milestones, evidence, disbursements } = item;
@@ -1074,101 +1072,97 @@ export function DashboardPage() {
                       const leadRole = 'Programme Manager';
                       const avatarColors = [
                         'bg-gradient-to-tr from-sky-400 to-blue-600',
-                        'bg-gradient-to-tr from-amber-400 to-orange-500',
-                        'bg-gradient-to-tr from-purple-500 to-indigo-600',
+                        'bg-gradient-to-tr from-amber-400 to-[#F97316]',
+                        'bg-gradient-to-tr from-[#8B5CF6] to-indigo-600',
                       ];
 
                       return (
                         <div
                           key={project.id}
-                          className="rounded-[22px] bg-[#141C30] border border-white/[0.07] p-6 sm:p-7 shadow-lg hover:border-slate-700 transition-all"
+                          className="rounded-[16px] bg-[#181622] border border-white/[0.06] p-6 shadow-sm hover:border-white/[0.12] transition-all"
                         >
                           <div className="flex flex-col lg:flex-row gap-6 justify-between">
                             {/* Left Sub-portion (~70%): Title, Description, 4 Metrics, Horizontal Timeline */}
-                            <div className="flex-1 flex flex-col justify-between gap-6 min-w-0">
+                            <div className="flex-1 flex flex-col justify-between gap-5 min-w-0">
                               <div>
-                                <h3 className="text-lg font-bold text-white tracking-tight">
+                                <h3 className="text-[18px] leading-[24px] font-semibold text-[#F1F1F6]">
                                   {project.name || 'Funded Project'}
                                 </h3>
-                                <p className="text-xs text-slate-400 line-clamp-2 leading-relaxed mt-1.5 max-w-2xl">
+                                <p className="text-[14px] leading-[22px] font-normal text-[#9A95B0] line-clamp-2 mt-1.5 max-w-2xl">
                                   {project.description || 'Funding award execution, deliverable submissions, and post-fund milestone tracking.'}
                                 </p>
                               </div>
 
-                              {/* 4 Metrics in a horizontal inline row */}
+                              {/* 4 Metrics in a horizontal inline row: 13px font-weight 500 #D1CBDD */}
                               <div className="flex flex-wrap items-center gap-4 sm:gap-6 py-1">
-                                <div className="flex items-center gap-1.5 text-xs">
+                                <div className="flex items-center gap-1.5 text-[13px] font-medium text-[#D1CBDD]">
                                   <span className="p-1 rounded-md bg-emerald-500/10 text-emerald-400 flex items-center justify-center">
                                     <Hourglass className="w-3.5 h-3.5" />
                                   </span>
-                                  <span className="font-bold text-white">{formatCompactZAR(grantAmount)}</span>
-                                  <span className="text-slate-400">Award</span>
+                                  <span className="font-semibold text-[#F1F1F6]">{formatCompactZAR(grantAmount)}</span>
+                                  <span className="text-[#9A95B0]">Award</span>
                                 </div>
 
-                                <div className="flex items-center gap-1.5 text-xs">
-                                  <span className="p-1 rounded-md bg-rose-500/10 text-rose-400 flex items-center justify-center">
+                                <div className="flex items-center gap-1.5 text-[13px] font-medium text-[#D1CBDD]">
+                                  <span className="p-1 rounded-md bg-[#F97316]/10 text-[#F97316] flex items-center justify-center">
                                     <DollarSign className="w-3.5 h-3.5" />
                                   </span>
-                                  <span className="font-bold text-white">{formatCompactZAR(disbursedAmount)}</span>
-                                  <span className="text-slate-400">Spend</span>
+                                  <span className="font-semibold text-[#F1F1F6]">{formatCompactZAR(disbursedAmount)}</span>
+                                  <span className="text-[#9A95B0]">Spend</span>
                                 </div>
 
-                                <div className="flex items-center gap-1.5 text-xs">
+                                <div className="flex items-center gap-1.5 text-[13px] font-medium text-[#D1CBDD]">
                                   <span className="p-1 rounded-md bg-amber-500/10 text-amber-400 flex items-center justify-center">
                                     <Calendar className="w-3.5 h-3.5" />
                                   </span>
-                                  <span className="font-bold text-white">{daysLeft}</span>
-                                  <span className="text-slate-400">Days left</span>
+                                  <span className="font-semibold text-[#F1F1F6]">{daysLeft}</span>
+                                  <span className="text-[#9A95B0]">Days left</span>
                                 </div>
 
-                                <div className="flex items-center gap-1.5 text-xs">
+                                <div className="flex items-center gap-1.5 text-[13px] font-medium text-[#D1CBDD]">
                                   <span className="p-1 rounded-md bg-cyan-500/10 text-cyan-400 flex items-center justify-center">
                                     <Paperclip className="w-3.5 h-3.5" />
                                   </span>
-                                  <span className="font-bold text-white">{docsSubmitted}</span>
-                                  <span className="text-slate-400">Docs submitted</span>
+                                  <span className="font-semibold text-[#F1F1F6]">{docsSubmitted}</span>
+                                  <span className="text-[#9A95B0]">Docs submitted</span>
                                 </div>
                               </div>
 
-                              {/* Horizontal Timeline Stepper */}
+                              {/* Horizontal Timeline Stepper: height 2px, 10px nodes */}
                               <div className="pt-2 overflow-x-auto">
                                 <div className="min-w-[460px] flex items-start justify-between relative">
                                   {stepperNodes.map((step, sIdx) => {
                                     const isLast = sIdx === stepperNodes.length - 1;
-                                    const isDotted = sIdx === 2; // Exact connector style from Dribbble mock
+                                    const isDotted = sIdx === 2; // Exact connector style from reference
                                     return (
                                       <div key={step.id} className="flex-1 flex flex-col items-start relative">
                                         <div className="w-full flex items-center">
                                           {step.type === 'done' ? (
-                                            <div className="h-5 w-5 rounded-full bg-[#1E293B] border border-indigo-400/50 text-indigo-400 flex items-center justify-center shrink-0 z-10 shadow-sm">
-                                              <Check className="w-3 h-3 stroke-[3]" />
-                                            </div>
+                                            <div className="w-2.5 h-2.5 rounded-full bg-[#8B5CF6] ring-4 ring-[#8B5CF6]/20 shrink-0 z-10 shadow-sm" />
                                           ) : step.type === 'current' ? (
-                                            <div className="h-5 w-5 rounded-full bg-slate-900 border-2 border-indigo-400 flex items-center justify-center shrink-0 z-10">
-                                              <div className="h-1.5 w-1.5 rounded-full bg-indigo-400 animate-pulse" />
-                                            </div>
+                                            <div className="w-2.5 h-2.5 rounded-full bg-[#8B5CF6] ring-4 ring-[#8B5CF6]/30 animate-pulse shrink-0 z-10" />
                                           ) : (
-                                            <div className="h-5 w-5 rounded-full bg-slate-900 border-2 border-slate-700 shrink-0 z-10" />
+                                            <div className="w-2.5 h-2.5 rounded-full border border-white/30 bg-[#181622] shrink-0 z-10" />
                                           )}
 
                                           {!isLast && (
                                             <div
                                               className={`flex-1 mx-2 ${
                                                 isDotted
-                                                  ? 'border-t-2 border-dotted border-slate-600'
+                                                  ? 'border-t-2 border-dotted border-white/20'
                                                   : step.type === 'done'
-                                                  ? 'h-[2px] bg-slate-600'
-                                                  : 'h-[2px] bg-slate-800'
+                                                  ? 'h-[2px] bg-[#8B5CF6]'
+                                                  : 'h-[2px] bg-white/10'
                                               }`}
                                             />
                                           )}
                                         </div>
 
                                         <div className="mt-2.5 pr-2">
-                                          <p className="text-[11px] font-semibold text-slate-200 truncate max-w-[105px]">
+                                          <p className="text-[11px] font-medium text-[#F1F1F6] truncate max-w-[105px]">
                                             {step.label}
                                           </p>
-                                          <p className="text-[10px] text-slate-500 mt-0.5">
+                                          <p className="text-[10px] text-[#9A95B0] mt-0.5">
                                             {step.date}
                                           </p>
                                         </div>
@@ -1179,32 +1173,32 @@ export function DashboardPage() {
                               </div>
                             </div>
 
-                            {/* Right Sub-portion (~30%): Contact Lead, 3 Meta Rows, 2 Stacked Action Buttons */}
-                            <div className="w-full lg:w-[220px] shrink-0 lg:pl-6 lg:border-l lg:border-white/[0.07] flex flex-col justify-between gap-5 pt-4 lg:pt-0 border-t lg:border-t-0 border-white/[0.07]">
+                            {/* Right Sub-portion (~30% / 220px): Contact Lead, 3 Meta Rows, 2 Stacked Action Buttons */}
+                            <div className="w-full lg:w-[220px] shrink-0 lg:pl-6 lg:border-l lg:border-white/[0.06] flex flex-col justify-between gap-4 pt-4 lg:pt-0 border-t lg:border-t-0 border-white/[0.06]">
                               {/* Contact Person */}
                               <div className="flex items-start justify-between gap-3">
                                 <div>
-                                  <h4 className="text-sm font-bold text-white leading-tight truncate max-w-[140px]">
+                                  <h4 className="text-[14px] font-semibold text-[#F1F1F6] leading-tight truncate max-w-[140px]">
                                     {leadName}
                                   </h4>
-                                  <p className="text-xs text-slate-400 mt-0.5">{leadRole}</p>
+                                  <p className="text-[12px] text-[#9A95B0] mt-0.5">{leadRole}</p>
                                 </div>
                                 <div className="relative shrink-0">
                                   <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-xs ${avatarColors[pIdx % 3]} text-white shadow-sm`}>
                                     {getInitials(leadName)}
                                   </div>
-                                  <span className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-emerald-400 ring-2 ring-[#141C30]" />
+                                  <span className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-emerald-400 ring-2 ring-[#181622]" />
                                 </div>
                               </div>
 
-                              {/* 3 Meta Rows */}
-                              <div className="space-y-1.5 text-xs text-slate-300">
+                              {/* 3 Meta Rows: Location, Time, Star Rating */}
+                              <div className="space-y-1.5 text-[13px] font-medium text-[#D1CBDD]">
                                 <div className="flex items-center gap-2">
-                                  <MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                                  <MapPin className="w-3.5 h-3.5 text-[#9A95B0] shrink-0" />
                                   <span className="truncate">Gauteng, South Africa</span>
                                 </div>
                                 <div className="flex items-center gap-2">
-                                  <Clock className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                                  <Clock className="w-3.5 h-3.5 text-[#9A95B0] shrink-0" />
                                   <span>01:23 pm</span>
                                 </div>
                                 <div className="flex items-center gap-2">
@@ -1218,7 +1212,7 @@ export function DashboardPage() {
                                 <button
                                   type="button"
                                   onClick={() => openContactModalForProject(item)}
-                                  className="w-full py-2 px-3 rounded-xl border border-slate-600 hover:border-slate-400 hover:bg-white/[0.04] text-slate-200 text-xs font-semibold transition-all cursor-pointer"
+                                  className="w-full py-2 px-3 rounded-xl border border-white/10 hover:border-white/20 hover:bg-white/[0.04] text-[#F1F1F6] text-xs font-semibold transition-all cursor-pointer"
                                 >
                                   Contact
                                 </button>
@@ -1228,7 +1222,7 @@ export function DashboardPage() {
                                     setSelectedProjectItem(item);
                                     setProjectModalTab('milestones');
                                   }}
-                                  className="w-full py-2 px-3 rounded-xl bg-[#222C44] hover:bg-[#2B3856] text-slate-100 text-xs font-semibold transition-all cursor-pointer shadow-sm"
+                                  className="w-full py-2 px-3 rounded-xl bg-white/[0.06] hover:bg-white/[0.1] text-[#F1F1F6] text-xs font-semibold transition-all cursor-pointer shadow-sm"
                                 >
                                   View Details
                                 </button>
@@ -1240,28 +1234,28 @@ export function DashboardPage() {
                     })
                   ) : (
                     /* Friendly Empty State with Refresh Button & Informative Section */
-                    <div className="rounded-[24px] bg-[#141C30] border border-white/[0.08] p-8 sm:p-12 shadow-xl flex flex-col items-center justify-center text-center relative overflow-hidden">
+                    <div className="rounded-[16px] bg-[#181622] border border-white/[0.06] p-8 sm:p-12 shadow-sm flex flex-col items-center justify-center text-center relative overflow-hidden">
                       {/* Ambient background glow */}
-                      <div className="absolute -top-24 left-1/2 -translate-x-1/2 w-80 h-80 rounded-full bg-indigo-500/10 blur-[100px] pointer-events-none" />
+                      <div className="absolute -top-24 left-1/2 -translate-x-1/2 w-80 h-80 rounded-full bg-[#8B5CF6]/10 blur-[100px] pointer-events-none" />
 
                       {/* Friendly Icon Badge */}
                       <div className="relative mb-5">
-                        <div className="w-16 h-16 rounded-2xl bg-indigo-500/15 border border-indigo-500/25 text-indigo-400 flex items-center justify-center shadow-lg shadow-indigo-500/10">
-                          <Sparkles className="w-8 h-8" />
+                        <div className="w-14 h-14 rounded-2xl bg-[#8B5CF6]/15 border border-[#8B5CF6]/25 text-[#8B5CF6] flex items-center justify-center shadow-lg shadow-[#8B5CF6]/10">
+                          <Sparkles className="w-7 h-7" />
                         </div>
-                        <span className="absolute -bottom-1 -right-1 flex h-4 w-4">
-                          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75" />
-                          <span className="relative inline-flex rounded-full h-4 w-4 bg-indigo-500" />
+                        <span className="absolute -bottom-1 -right-1 flex h-3.5 w-3.5">
+                          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#8B5CF6] opacity-75" />
+                          <span className="relative inline-flex rounded-full h-3.5 w-3.5 bg-[#8B5CF6]" />
                         </span>
                       </div>
 
-                      {/* Friendly Heading */}
-                      <h3 className="text-xl sm:text-2xl font-bold text-white tracking-tight">
+                      {/* Friendly Heading: 20px font-bold #F1F1F6 */}
+                      <h3 className="text-[20px] font-bold text-[#F1F1F6] tracking-tight">
                         {searchQuery ? 'No Matching Projects Found' : 'No Active Projects Assigned Yet'}
                       </h3>
 
-                      {/* Friendly Message */}
-                      <p className="text-xs sm:text-sm text-slate-400 max-w-lg mt-2.5 leading-relaxed">
+                      {/* Friendly Message: 14px / 22px / #9A95B0 */}
+                      <p className="text-[14px] leading-[22px] font-normal text-[#9A95B0] max-w-lg mt-2">
                         {searchQuery
                           ? `We couldn't find any ongoing projects matching "${searchQuery}". Clear your search query to see your full workspace portfolio.`
                           : "Welcome to your Partner Workspace! Your funding organisation hasn't assigned any active project records to your profile just yet. If your funding award was recently approved or updated, click below to sync and retrieve your latest project schedule."}
@@ -1273,7 +1267,7 @@ export function DashboardPage() {
                           <button
                             type="button"
                             onClick={() => setSearchQuery('')}
-                            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold transition-all cursor-pointer"
+                            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-white/[0.06] hover:bg-white/[0.1] text-[#F1F1F6] text-xs font-semibold transition-all cursor-pointer"
                           >
                             <X className="w-4 h-4" />
                             <span>Clear Search</span>
@@ -1284,7 +1278,7 @@ export function DashboardPage() {
                           type="button"
                           onClick={() => refetchApplicantData()}
                           disabled={isRefreshingApplicantData}
-                          className="inline-flex items-center gap-2.5 px-6 py-3 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white font-semibold text-xs tracking-wide shadow-lg shadow-indigo-500/25 active:scale-95 transition-all cursor-pointer disabled:opacity-60"
+                          className="inline-flex items-center gap-2.5 px-6 py-2.5 rounded-xl bg-[#8B5CF6] hover:bg-[#7C3AED] text-white font-semibold text-xs tracking-wide shadow-lg shadow-[#8B5CF6]/25 active:scale-95 transition-all cursor-pointer disabled:opacity-60"
                         >
                           <RefreshCw className={`w-4 h-4 ${isRefreshingApplicantData ? 'animate-spin' : ''}`} />
                           <span>{isRefreshingApplicantData ? 'Refreshing Workspace...' : 'Refresh Projects'}</span>
@@ -1292,61 +1286,61 @@ export function DashboardPage() {
                       </div>
 
                       {/* Elegantly placed informative text below all that */}
-                      <div className="mt-10 w-full max-w-xl text-left border-t border-white/[0.08] pt-8">
+                      <div className="mt-10 w-full max-w-xl text-left border-t border-white/[0.06] pt-8">
                         <div className="flex items-center justify-between gap-2 mb-4">
-                          <div className="flex items-center gap-2 text-indigo-300">
+                          <div className="flex items-center gap-2 text-[#8B5CF6]">
                             <Info className="w-4 h-4" />
-                            <span className="text-xs font-bold uppercase tracking-wider">How Project Activation Works</span>
+                            <span className="text-[11px] font-semibold uppercase tracking-[0.05em]">How Project Activation Works</span>
                           </div>
-                          <span className="text-[11px] text-slate-500 font-medium">Post-Fund Lifecycle</span>
+                          <span className="text-[11px] text-[#9A95B0] font-medium">Post-Fund Lifecycle</span>
                         </div>
 
                         <div className="space-y-3">
-                          <div className="p-4 rounded-2xl bg-[#0E1526]/80 border border-white/[0.05] hover:border-white/[0.1] transition-colors flex items-start gap-3.5">
-                            <div className="h-6 w-6 rounded-lg bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">
+                          <div className="p-4 rounded-[14px] bg-[#0F0E17]/90 border border-white/[0.05] hover:border-white/[0.1] transition-colors flex items-start gap-3.5">
+                            <div className="h-6 w-6 rounded-lg bg-[#8B5CF6]/20 border border-[#8B5CF6]/30 text-[#8B5CF6] flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">
                               1
                             </div>
                             <div className="min-w-0">
-                              <p className="text-xs font-bold text-white">Award Handover & Formal Agreement</p>
-                              <p className="text-[11px] text-slate-400 mt-0.5 leading-relaxed">
+                              <p className="text-[13px] font-semibold text-[#F1F1F6]">Award Handover & Formal Agreement</p>
+                              <p className="text-[12px] leading-[18px] text-[#9A95B0] mt-0.5">
                                 Following sanction by the approval committee, your funding organisation registers the award. A legally binding grant agreement is automatically drafted for your review and digital execution.
                               </p>
                             </div>
                           </div>
 
-                          <div className="p-4 rounded-2xl bg-[#0E1526]/80 border border-white/[0.05] hover:border-white/[0.1] transition-colors flex items-start gap-3.5">
-                            <div className="h-6 w-6 rounded-lg bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">
+                          <div className="p-4 rounded-[14px] bg-[#0F0E17]/90 border border-white/[0.05] hover:border-white/[0.1] transition-colors flex items-start gap-3.5">
+                            <div className="h-6 w-6 rounded-lg bg-[#8B5CF6]/20 border border-[#8B5CF6]/30 text-[#8B5CF6] flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">
                               2
                             </div>
                             <div className="min-w-0">
-                              <p className="text-xs font-bold text-white">Milestones & Evidence Submission</p>
-                              <p className="text-[11px] text-slate-400 mt-0.5 leading-relaxed">
+                              <p className="text-[13px] font-semibold text-[#F1F1F6]">Milestones & Evidence Submission</p>
+                              <p className="text-[12px] leading-[18px] text-[#9A95B0] mt-0.5">
                                 Once the project is active, your work breakdown structure, deliverable due dates, and mandatory evidence requirements appear here so you can easily upload progress reports, invoices, and certificates.
                               </p>
                             </div>
                           </div>
 
-                          <div className="p-4 rounded-2xl bg-[#0E1526]/80 border border-white/[0.05] hover:border-white/[0.1] transition-colors flex items-start gap-3.5">
-                            <div className="h-6 w-6 rounded-lg bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">
+                          <div className="p-4 rounded-[14px] bg-[#0F0E17]/90 border border-white/[0.05] hover:border-white/[0.1] transition-colors flex items-start gap-3.5">
+                            <div className="h-6 w-6 rounded-lg bg-[#8B5CF6]/20 border border-[#8B5CF6]/30 text-[#8B5CF6] flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">
                               3
                             </div>
                             <div className="min-w-0">
-                              <p className="text-xs font-bold text-white">Payment Requests & Controlled Tranches</p>
-                              <p className="text-[11px] text-slate-400 mt-0.5 leading-relaxed">
+                              <p className="text-[13px] font-semibold text-[#F1F1F6]">Payment Requests & Controlled Tranches</p>
+                              <p className="text-[12px] leading-[18px] text-[#9A95B0] mt-0.5">
                                 Funds are released safely against verified milestone deliverables and satisfied conditions precedent. You can initiate drawdown requests directly from your project workspace.
                               </p>
                             </div>
                           </div>
 
-                          <div className="p-3.5 rounded-xl bg-indigo-950/30 border border-indigo-500/20 flex items-center justify-between gap-3 text-xs text-indigo-200">
+                          <div className="p-3.5 rounded-xl bg-[#8B5CF6]/10 border border-[#8B5CF6]/20 flex items-center justify-between gap-3 text-xs text-[#8B5CF6]">
                             <div className="flex items-center gap-2">
-                              <MessageSquare className="w-4 h-4 text-indigo-400 shrink-0" />
+                              <MessageSquare className="w-4 h-4 text-[#8B5CF6] shrink-0" />
                               <span>Need status clarification? Contact your assigned Programme Officer.</span>
                             </div>
                             <button
                               type="button"
                               onClick={() => setActiveTab('messages')}
-                              className="text-xs font-semibold text-white underline hover:text-indigo-300 cursor-pointer shrink-0"
+                              className="text-xs font-semibold text-[#F1F1F6] underline hover:text-[#8B5CF6] cursor-pointer shrink-0"
                             >
                               Open Messages
                             </button>
@@ -1359,76 +1353,76 @@ export function DashboardPage() {
               </div>
 
               {/* ===============================================================
-                  RIGHT COLUMN: OVERVIEW (2x2 Grid) + INBOX (4 of 12 cols)
+                  RIGHT COLUMN: SIDEBAR WIDGETS (Overview & Inbox, 340px)
               =============================================================== */}
-              <div className="lg:col-span-4 space-y-6">
+              <div className="w-full lg:w-[340px] space-y-5">
                 
                 {/* 1. OVERVIEW CARD (2x2 Grid with vertical divider) */}
-                <div className="rounded-[22px] bg-[#141C30] border border-white/[0.07] p-6 sm:p-7 shadow-lg">
-                  <h3 className="text-base sm:text-lg font-bold text-white tracking-tight mb-6">
+                <div className="rounded-[16px] bg-[#181622] border border-white/[0.06] p-6 shadow-sm">
+                  <h3 className="text-[20px] leading-[28px] font-bold text-[#F1F1F6] mb-5">
                     Overview
                   </h3>
 
                   <div className="grid grid-cols-2 gap-4 relative">
                     {/* Subtle vertical divider between the 2 columns */}
-                    <div className="absolute top-1 bottom-1 left-1/2 -translate-x-1/2 w-px bg-white/[0.07]" />
+                    <div className="absolute top-1 bottom-1 left-1/2 -translate-x-1/2 w-px bg-white/[0.06]" />
 
                     {/* Left Column: Running Project & Completed Project */}
-                    <div className="space-y-7 pr-3">
+                    <div className="space-y-6 pr-3">
                       <div>
-                        <p className="text-3xl font-extrabold text-white tracking-tight leading-none">
+                        <p className="text-[24px] font-bold text-[#F1F1F6] leading-none">
                           {overviewMetrics.runningProjects}
                         </p>
-                        <p className="text-xs text-slate-400 mt-2 font-medium">Running Project</p>
+                        <p className="text-[12px] font-normal text-[#9A95B0] mt-1.5">Running Project</p>
                       </div>
 
                       <div>
-                        <p className="text-3xl font-extrabold text-white tracking-tight leading-none">
+                        <p className="text-[24px] font-bold text-[#F1F1F6] leading-none">
                           {overviewMetrics.completedProjects}
                         </p>
-                        <p className="text-xs text-slate-400 mt-2 font-medium">Completed Project</p>
+                        <p className="text-[12px] font-normal text-[#9A95B0] mt-1.5">Completed Project</p>
                       </div>
                     </div>
 
                     {/* Right Column: Have to Pay & Total Payment */}
-                    <div className="space-y-7 pl-4 sm:pl-6">
+                    <div className="space-y-6 pl-4 sm:pl-6">
                       <div>
-                        <p className="text-3xl font-extrabold text-white tracking-tight leading-none">
+                        <p className="text-[24px] font-bold text-[#F1F1F6] leading-none">
                           {overviewMetrics.pendingPayment}
                         </p>
-                        <p className="text-xs text-slate-400 mt-2 font-medium">Have to Pay</p>
+                        <p className="text-[12px] font-normal text-[#9A95B0] mt-1.5">Have to Pay</p>
                       </div>
 
                       <div>
-                        <p className="text-3xl font-extrabold text-white tracking-tight leading-none">
+                        <p className="text-[24px] font-bold text-[#F1F1F6] leading-none">
                           {overviewMetrics.totalPayment}
                         </p>
-                        <p className="text-xs text-slate-400 mt-2 font-medium">Total Payment</p>
+                        <p className="text-[12px] font-normal text-[#9A95B0] mt-1.5">Total Payment</p>
                       </div>
                     </div>
                   </div>
                 </div>
 
                 {/* 2. INBOX CARD (Matching Dribbble design: Inbox + badge, See All, and clean avatar list) */}
-                <div className="rounded-[22px] bg-[#141C30] border border-white/[0.07] p-6 sm:p-7 shadow-lg">
-                  <div className="flex items-center justify-between mb-5">
+                <div className="rounded-[16px] bg-[#181622] border border-white/[0.06] p-6 shadow-sm">
+                  <div className="flex items-center justify-between mb-4">
                     <div className="flex items-center gap-2">
-                      <h3 className="text-base sm:text-lg font-bold text-white tracking-tight">Inbox</h3>
-                      <span className="h-5 min-w-[20px] px-1.5 rounded-full bg-rose-500 text-white text-[11px] font-bold flex items-center justify-center">
+                      <h3 className="text-[20px] leading-[28px] font-bold text-[#F1F1F6]">Inbox</h3>
+                      <span className="h-5 min-w-[20px] px-1.5 rounded-full bg-[#EF4444] text-white text-[11px] font-bold flex items-center justify-center">
                         {unreadCount > 0 ? unreadCount : 3}
                       </span>
                     </div>
                     <button
                       type="button"
                       onClick={() => setActiveTab('messages')}
-                      className="text-xs font-medium text-slate-400 hover:text-white transition-colors cursor-pointer"
+                      className="text-[12px] font-medium text-[#9A95B0] hover:text-[#F1F1F6] transition-colors cursor-pointer"
                     >
                       See All
                     </button>
                   </div>
 
-                  {/* List of Contacts & Messages */}
-                  <div className="space-y-3.5 divide-y divide-white/[0.05]">
+                  {/* List of Contacts & Messages: Compact vertical list */}
+                  <div className="space-y-1 divide-y divide-white/[0.04]">
                     {combinedInbox.map((item) => (
                       <div
                         key={item.id}
@@ -1447,21 +1441,21 @@ export function DashboardPage() {
                             setMessageBody('');
                           }
                         }}
-                        className="pt-3.5 first:pt-0 flex items-center gap-3.5 group cursor-pointer hover:bg-white/[0.02] p-1.5 rounded-xl transition-colors"
+                        className="flex items-center gap-3 py-2 px-1 hover:bg-white/[0.02] rounded-xl transition-colors cursor-pointer"
                       >
-                        <div className={`w-10 h-10 rounded-full shrink-0 flex items-center justify-center font-bold text-xs ${item.avatarBg} text-white shadow-sm`}>
+                        <div className={`w-9 h-9 rounded-full shrink-0 flex items-center justify-center font-bold text-xs ${item.avatarBg} text-white shadow-sm`}>
                           {item.avatarInitials}
                         </div>
                         <div className="min-w-0 flex-1">
-                          <div className="flex items-center gap-1.5">
-                            <span className="text-xs font-bold text-white truncate group-hover:text-indigo-300 transition-colors">
+                          <div className="flex items-center justify-between gap-1.5">
+                            <span className="text-[13px] font-semibold text-[#F1F1F6] truncate group-hover:text-[#8B5CF6] transition-colors">
                               {item.name}
                             </span>
                             {item.unread && (
-                              <span className="w-1.5 h-1.5 rounded-full bg-rose-500 shrink-0" />
+                              <span className="w-1.5 h-1.5 rounded-full bg-[#EF4444] shrink-0" />
                             )}
                           </div>
-                          <p className="text-[11px] text-slate-400 truncate mt-0.5 leading-tight">
+                          <p className="text-[12px] font-normal text-[#9A95B0] truncate mt-0.5 leading-tight">
                             {item.snippet}
                           </p>
                         </div>
@@ -1479,8 +1473,8 @@ export function DashboardPage() {
             <div className="space-y-6">
               <div className="flex flex-wrap items-center justify-between gap-4">
                 <div>
-                  <h1 className="text-2xl font-bold text-white">Messages & Communications</h1>
-                  <p className="text-xs text-slate-400 mt-0.5">
+                  <h1 className="text-[20px] font-bold text-[#F1F1F6]">Messages & Communications</h1>
+                  <p className="text-[12px] text-[#9A95B0] mt-0.5">
                     Direct communication with your funding programme officers.
                   </p>
                 </div>
@@ -1494,16 +1488,16 @@ export function DashboardPage() {
                     setMessageSubject('');
                     setMessageBody('');
                   }}
-                  className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white font-semibold text-xs shadow-lg shadow-indigo-500/20 transition-all cursor-pointer"
+                  className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[#8B5CF6] hover:bg-[#7C3AED] text-white font-semibold text-xs shadow-lg shadow-[#8B5CF6]/20 transition-all cursor-pointer"
                 >
                   <Plus className="w-4 h-4" />
                   <span>New Message</span>
                 </button>
               </div>
 
-              <div className="rounded-[22px] bg-[#141C30] border border-white/[0.07] divide-y divide-white/[0.06] overflow-hidden">
+              <div className="rounded-[16px] bg-[#181622] border border-white/[0.06] divide-y divide-white/[0.06] overflow-hidden">
                 {inboxNotifications.length === 0 ? (
-                  <div className="p-12 text-center text-slate-400 text-sm">
+                  <div className="p-12 text-center text-[#9A95B0] text-sm">
                     No new messages in your inbox yet. Messages sent by programme managers will be displayed here.
                   </div>
                 ) : (
@@ -1519,24 +1513,24 @@ export function DashboardPage() {
                         className="p-5 hover:bg-white/[0.03] transition-colors flex items-start justify-between gap-4 cursor-pointer"
                       >
                         <div className="flex items-start gap-4 min-w-0">
-                          <div className="h-10 w-10 rounded-full bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 font-bold text-xs flex items-center justify-center shrink-0">
+                          <div className="h-10 w-10 rounded-full bg-[#8B5CF6]/15 border border-[#8B5CF6]/30 text-[#8B5CF6] font-bold text-xs flex items-center justify-center shrink-0">
                             {getInitials(msg.subject || 'PFM')}
                           </div>
                           <div className="min-w-0">
                             <div className="flex items-center gap-2">
-                              <h3 className="text-sm font-bold text-white truncate">
+                              <h3 className="text-sm font-semibold text-[#F1F1F6] truncate">
                                 {msg.subject || 'Programme Notification'}
                               </h3>
                               {isUnread && (
-                                <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-rose-500 text-white">
+                                <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#EF4444] text-white">
                                   New
                                 </span>
                               )}
                             </div>
-                            <p className="text-xs text-slate-300 mt-1 line-clamp-2">{stripMarkdown(msg.message)}</p>
+                            <p className="text-xs text-[#9A95B0] mt-1 line-clamp-2">{stripMarkdown(msg.message || '')}</p>
                           </div>
                         </div>
-                        <span className="text-xs text-slate-500 shrink-0">
+                        <span className="text-xs text-[#9A95B0]/70 shrink-0">
                           {formatFullDate(msg.createdAt)}
                         </span>
                       </div>
@@ -1547,19 +1541,19 @@ export function DashboardPage() {
             </div>
           ) : activeTab === 'contracts' ? (
             /* =================================================================
-               CONTRACTS & ORDERS TAB
+               CONTRACTS & AWARDS TAB
             ================================================================= */
             <div className="space-y-6">
               <div>
-                <h1 className="text-2xl font-bold text-white">Contracts & Approved Grants</h1>
-                <p className="text-xs text-slate-400 mt-0.5">
+                <h1 className="text-[20px] font-bold text-[#F1F1F6]">Contracts & Approved Awards</h1>
+                <p className="text-[12px] text-[#9A95B0] mt-0.5">
                   Review your approved funding awards and download or sign grant agreements.
                 </p>
               </div>
 
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 {partnerSummary.contractEntries.length === 0 ? (
-                  <div className="col-span-full rounded-[22px] bg-[#141C30] border border-white/[0.07] p-10 text-center text-sm text-slate-400">
+                  <div className="col-span-full rounded-[16px] bg-[#181622] border border-white/[0.06] p-10 text-center text-sm text-[#9A95B0]">
                     No contracts have been issued to your organisation yet.
                   </div>
                 ) : (
@@ -1569,47 +1563,47 @@ export function DashboardPage() {
                     return (
                       <div
                         key={contract.id}
-                        className="rounded-[22px] bg-[#141C30] border border-white/[0.07] p-6 flex flex-col justify-between gap-5"
+                        className="rounded-[16px] bg-[#181622] border border-white/[0.06] p-6 flex flex-col justify-between gap-5"
                       >
                         <div className="space-y-3">
                           <div className="flex items-center justify-between gap-2">
-                            <span className="text-xs font-semibold text-indigo-400 uppercase tracking-wider">
+                            <span className="text-xs font-semibold text-[#8B5CF6] uppercase tracking-wider">
                               Agreement v{contractVer}
                             </span>
                             <span
                               className={`px-2.5 py-0.5 rounded-full text-xs font-semibold ${
                                 isExecuted
                                   ? 'bg-emerald-500/15 text-emerald-300 border border-emerald-500/30'
-                                  : 'bg-amber-500/15 text-amber-300 border border-amber-500/30'
+                                  : 'bg-[#F97316]/15 text-[#F97316] border border-[#F97316]/30'
                               }`}
                             >
                               {isExecuted ? 'Signed & Executed' : 'Action Required: Review & Sign'}
                             </span>
                           </div>
-                          <h3 className="text-lg font-bold text-white">
+                          <h3 className="text-lg font-bold text-[#F1F1F6]">
                             {fundingOrganisation?.name || 'Grant Funding Agreement'}
                           </h3>
                           <div className="grid grid-cols-2 gap-4 pt-2 text-xs">
                             <div>
-                              <p className="text-slate-400">Contract Value</p>
-                              <p className="text-sm font-bold text-white mt-0.5">
+                              <p className="text-[#9A95B0]">Contract Value</p>
+                              <p className="text-sm font-bold text-[#F1F1F6] mt-0.5">
                                 {formatZAR(contract.totalValue || award?.amount || 0)}
                               </p>
                             </div>
                             <div>
-                              <p className="text-slate-400">Valid Period</p>
-                              <p className="text-slate-200 font-medium mt-0.5">
+                              <p className="text-[#9A95B0]">Valid Period</p>
+                              <p className="text-[#D1CBDD] font-medium mt-0.5">
                                 {formatShortDate(contract.effectiveAt)} – {formatFullDate(contract.expiresAt)}
                               </p>
                             </div>
                           </div>
                         </div>
 
-                        <div className="flex flex-wrap items-center gap-3 pt-4 border-t border-white/[0.07]">
+                        <div className="flex flex-wrap items-center gap-3 pt-4 border-t border-white/[0.06]">
                           <button
                             type="button"
                             onClick={() => handleOpenSecureFile('contract', contract.id)}
-                            className="flex-1 py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold flex items-center justify-center gap-2 transition-colors cursor-pointer"
+                            className="flex-1 py-2.5 px-4 rounded-xl bg-white/[0.06] hover:bg-white/[0.1] text-[#F1F1F6] text-xs font-semibold flex items-center justify-center gap-2 transition-colors cursor-pointer"
                           >
                             <ExternalLink className="w-3.5 h-3.5" />
                             <span>Download PDF</span>
@@ -1619,7 +1613,7 @@ export function DashboardPage() {
                               type="button"
                               onClick={() => signContractMutation.mutate(contract)}
                               disabled={signContractMutation.isPending}
-                              className="flex-1 py-2.5 px-4 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white text-xs font-semibold flex items-center justify-center gap-2 transition-colors cursor-pointer disabled:opacity-50"
+                              className="flex-1 py-2.5 px-4 rounded-xl bg-[#8B5CF6] hover:bg-[#7C3AED] text-white text-xs font-semibold flex items-center justify-center gap-2 transition-colors cursor-pointer disabled:opacity-50"
                             >
                               <CheckCircle2 className="w-3.5 h-3.5" />
                               <span>{signContractMutation.isPending ? 'Signing...' : 'Accept & Sign'}</span>
@@ -1638,38 +1632,38 @@ export function DashboardPage() {
             ================================================================= */
             <div className="space-y-6">
               <div>
-                <h1 className="text-2xl font-bold text-white">Portfolio Analytics</h1>
-                <p className="text-xs text-slate-400 mt-0.5">
+                <h1 className="text-[20px] font-bold text-[#F1F1F6]">Portfolio Analytics</h1>
+                <p className="text-[12px] text-[#9A95B0] mt-0.5">
                   Performance metrics, milestone velocity, and financial drawdown burn rates.
                 </p>
               </div>
 
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
-                <div className="p-6 rounded-[22px] bg-[#141C30] border border-white/[0.07]">
-                  <div className="flex items-center justify-between text-indigo-400 mb-2">
+                <div className="p-6 rounded-[16px] bg-[#181622] border border-white/[0.06]">
+                  <div className="flex items-center justify-between text-[#8B5CF6] mb-2">
                     <TrendingUp className="w-5 h-5" />
                     <span className="text-xs font-semibold text-emerald-400">+18% vs target</span>
                   </div>
-                  <p className="text-2xl font-bold text-white">92.4%</p>
-                  <p className="text-xs text-slate-400 mt-1">Milestone Completion Rate</p>
+                  <p className="text-2xl font-bold text-[#F1F1F6]">92.4%</p>
+                  <p className="text-xs text-[#9A95B0] mt-1">Milestone Completion Rate</p>
                 </div>
 
-                <div className="p-6 rounded-[22px] bg-[#141C30] border border-white/[0.07]">
+                <div className="p-6 rounded-[16px] bg-[#181622] border border-white/[0.06]">
                   <div className="flex items-center justify-between text-teal-400 mb-2">
                     <Briefcase className="w-5 h-5" />
-                    <span className="text-xs font-semibold text-indigo-400">On Track</span>
+                    <span className="text-xs font-semibold text-[#8B5CF6]">On Track</span>
                   </div>
-                  <p className="text-2xl font-bold text-white">{overviewMetrics.runningProjects} Active</p>
-                  <p className="text-xs text-slate-400 mt-1">Funded Projects in Execution</p>
+                  <p className="text-2xl font-bold text-[#F1F1F6]">{overviewMetrics.runningProjects} Active</p>
+                  <p className="text-xs text-[#9A95B0] mt-1">Funded Projects in Execution</p>
                 </div>
 
-                <div className="p-6 rounded-[22px] bg-[#141C30] border border-white/[0.07]">
+                <div className="p-6 rounded-[16px] bg-[#181622] border border-white/[0.06]">
                   <div className="flex items-center justify-between text-amber-400 mb-2">
                     <AwardIcon className="w-5 h-5" />
                     <span className="text-xs font-semibold text-amber-400">Audited</span>
                   </div>
-                  <p className="text-2xl font-bold text-white">100%</p>
-                  <p className="text-xs text-slate-400 mt-1">Compliance & Evidence Health</p>
+                  <p className="text-2xl font-bold text-[#F1F1F6]">100%</p>
+                  <p className="text-xs text-[#9A95B0] mt-1">Compliance & Evidence Health</p>
                 </div>
               </div>
             </div>
@@ -1679,16 +1673,16 @@ export function DashboardPage() {
             ================================================================= */
             <div className="space-y-6">
               <div>
-                <h1 className="text-2xl font-bold text-white">Deliverables & Evidence Documents</h1>
-                <p className="text-xs text-slate-400 mt-0.5">
+                <h1 className="text-[20px] font-bold text-[#F1F1F6]">Deliverables & Evidence Documents</h1>
+                <p className="text-[12px] text-[#9A95B0] mt-0.5">
                   Invoices, payment requests, and verified deliverable proofs submitted across projects.
                 </p>
               </div>
 
-              <div className="rounded-[22px] bg-[#141C30] border border-white/[0.07] overflow-hidden">
+              <div className="rounded-[16px] bg-[#181622] border border-white/[0.06] overflow-hidden">
                 {enrichedProjects.flatMap(p => p.evidence.map(ev => ({ ev, project: p.project }))).length === 0 ? (
                   <div className="p-12 text-center space-y-3">
-                    <p className="text-sm text-slate-400">
+                    <p className="text-sm text-[#9A95B0]">
                       No documents uploaded yet. Open any project on your Dashboard and click "View Details" to submit proof files.
                     </p>
                   </div>
@@ -1705,17 +1699,17 @@ export function DashboardPage() {
                             className="p-4 sm:p-5 flex items-center justify-between gap-4 hover:bg-white/[0.02]"
                           >
                             <div className="flex items-center gap-3.5 min-w-0">
-                              <div className="p-2.5 rounded-xl bg-indigo-500/10 text-indigo-300">
+                              <div className="p-2.5 rounded-xl bg-[#8B5CF6]/10 text-[#8B5CF6]">
                                 <FileText className="w-5 h-5" />
                               </div>
                               <div className="min-w-0">
-                                <p className="text-sm font-semibold text-white truncate">
+                                <p className="text-sm font-semibold text-[#F1F1F6] truncate">
                                   {EVIDENCE_TYPE_LABELS[evType] || 'Supporting Document'}{' '}
-                                  <span className="text-xs font-normal text-slate-400">
+                                  <span className="text-xs font-normal text-[#9A95B0]">
                                     (v{ev.version || 1})
                                   </span>
                                 </p>
-                                <p className="text-xs text-slate-400 truncate mt-0.5">
+                                <p className="text-xs text-[#9A95B0] truncate mt-0.5">
                                   Project: {project.name} • Submitted {formatFullDate(evDate)}
                                 </p>
                               </div>
@@ -1723,7 +1717,7 @@ export function DashboardPage() {
                             <button
                               type="button"
                               onClick={() => handleOpenSecureFile('evidence', ev.id)}
-                              className="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs font-semibold text-indigo-300 flex items-center gap-1.5 shrink-0 cursor-pointer"
+                              className="px-3.5 py-2 rounded-xl bg-white/[0.06] hover:bg-white/[0.1] text-xs font-semibold text-[#8B5CF6] flex items-center gap-1.5 shrink-0 cursor-pointer"
                             >
                               <ExternalLink className="w-3.5 h-3.5" />
                               <span>View File</span>
@@ -2177,7 +2171,7 @@ export function DashboardPage() {
               <MessageViewer
                 content={selectedNotification.message || ''}
                 platform={selectedNotification.platform}
-                subject={selectedNotification.subject}
+                subject={selectedNotification.subject || undefined}
               />
             </div>
 

PostFundManagement.PartnerUI/src/hooks/useInAppNotifications.ts

@@ -113,7 +113,6 @@ export function useInAppNotifications() {
       return list || [];
     },
     refetchInterval: 30000,
-    staleTime: 10000,
   });
 
   const inAppNotifications = useMemo(() => {

PostFundManagement.PartnerUI/src/lib/queryClient.ts

@@ -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.
  */

PostFundManagement.PartnerUI/src/services/httpClient.ts

@@ -39,6 +39,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,
 });
@@ -58,31 +60,16 @@ apiClient.interceptors.request.use(
       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) {
-      const headers = config.headers || {};
-      const hasNoCacheHeader =
-        headers['Cache-Control'] === 'no-cache' ||
-        headers['cache-control'] === 'no-cache' ||
-        headers['Pragma'] === 'no-cache';
-
-      if (hasNoCacheHeader) {
-        if (config.params instanceof URLSearchParams) {
-          config.params.set('_t', String(Date.now()));
-        } else {
-          config.params = config.params || {};
-          config.params._t = Date.now();
-        }
+      if (config.params instanceof URLSearchParams) {
+        config.params.set('_t', String(Date.now()));
+        config.params.set('_v', String(getMutationEpoch()));
       } else {
-        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();
-          }
-        }
+        config.params = config.params || {};
+        config.params._t = Date.now();
+        config.params._v = getMutationEpoch();
       }
     }
 

PostFundManagement.PartnerUI/src/vite-env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_OIDC_AUTHORITY?: string;
+  readonly VITE_OIDC_AUDIENCE?: string;
+  readonly VITE_OIDC_CLIENT_ID?: string;
+  readonly VITE_API_BASE_URL?: string;
+  readonly VITE_HASHER_SALT?: string;
+  readonly VITE_HASHER_MIN_LENGTH?: string;
+  readonly [key: string]: any;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+

PostFundManagement.PartnerUI/tsconfig.json

@@ -4,7 +4,6 @@
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
     "module": "ESNext",
-    "types": ["vite/client"],
     "lib": [
       "ES2022",
       "DOM",