PostFundManagement.ConsoleUI/src/pages/TenantManagementPage.tsx

@@ -26,6 +26,7 @@ import {
   createTenant,
   updateTenant,
   getTenantOrganisations,
+  getOrganisations,
 } from '../services/api';
 import { Modal } from '../components/ui/Modal';
 import { useToast } from '../components/ui/Toast';
@@ -34,7 +35,7 @@ import { ExportButton } from '../components/ui/ExportButton';
 import { ExportColumn } from '../utils/exportUtils';
 import { useTableSort, SortableTh } from '../utils/tableSort';
 import { ActivityStatusBadge } from '../components/ui/StatusBadge';
-import { Tenant, TenantOrganisation, ActivityStatus, CreateTenantRequest, UpdateTenantRequest } from '../types';
+import { Tenant, Organisation, TenantOrganisation, ActivityStatus, CreateTenantRequest, UpdateTenantRequest } from '../types';
 import { formatDate, getOrganisationTypeLabel, getUserEmail } from '../lib/formatters';
 import { useAuth } from '../auth/AuthProvider';
 
@@ -57,7 +58,7 @@ const TenantOrganisationsSubList: React.FC<{ tenantId: number | string; tenantNa
 }) => {
   const {
     data: tenantOrganisations = [],
-    isLoading,
+    isLoading: loadingTenantOrgs,
     isError,
     refetch,
   } = useQuery<TenantOrganisation[]>({
@@ -66,6 +67,15 @@ const TenantOrganisationsSubList: React.FC<{ tenantId: number | string; tenantNa
     staleTime: 30000,
   });
 
+  // Fetch all organisations directory (from governance cache) to resolve complete organisation details
+  const { data: allOrganisations = [], isLoading: loadingAllOrgs } = useQuery<Organisation[]>({
+    queryKey: ['organisations'],
+    queryFn: () => getOrganisations(),
+    staleTime: 60000,
+  });
+
+  const isLoading = loadingTenantOrgs || (loadingAllOrgs && tenantOrganisations.length > 0 && allOrganisations.length === 0);
+
   return (
     <div className="py-4 px-6 border-l-4 border-blue-500 bg-linear-to-r from-blue-950/20 via-slate-900/40 to-slate-950/60 space-y-3">
       {/* Sub-list Header */}
@@ -144,20 +154,25 @@ const TenantOrganisationsSubList: React.FC<{ tenantId: number | string; tenantNa
             </thead>
             <tbody className="divide-y divide-slate-800/50">
               {tenantOrganisations.map((tOrg) => {
-                const org = tOrg.organisation;
-                const orgId = org?.id || tOrg.organisationId || tOrg.id;
-                const orgName = org?.name || 'Unnamed Organisation';
-                const regNo = org?.registrationNo || '—';
-                const orgType = org?.type;
-                const orgEmail = org?.email || '—';
+                const orgId = tOrg.organisationId || tOrg.organisation?.id || tOrg.id;
+                // Use the organisationId to fetch/match the organisation detail
+                const detailedOrg = allOrganisations.find(
+                  (o) => String(o.id) === String(orgId) || String(o.id) === String(tOrg.organisationId)
+                );
+                const org = detailedOrg || tOrg.organisation;
+                const orgName = org?.name || tOrg.organisation?.name || 'Unnamed Organisation';
+                const regNo = org?.registrationNo || tOrg.organisation?.registrationNo || '—';
+                const orgType = org?.type ?? tOrg.organisation?.type;
+                const orgEmail = org?.email || tOrg.organisation?.email || '—';
                 const userEmailDisplay =
                   tOrg.creator?.email ||
                   getUserEmail(org?.userId) ||
                   getUserEmail(tOrg.createdBy) ||
+                  getUserEmail(org?.createdBy) ||
                   org?.userId ||
                   '—';
-                const status = org?.status ?? tOrg.status;
-                const createdAt = tOrg.createdAt || org?.createdAt;
+                const status = org?.status ?? tOrg.organisation?.status ?? tOrg.status;
+                const createdAt = org?.createdAt || tOrg.createdAt || tOrg.organisation?.createdAt;
 
                 return (
                   <tr key={String(tOrg.id) + '-' + String(orgId)} className="hover:bg-slate-800/30 transition">