Added tenant management

Applied basic access control
2026-10-04 09:13:55 +02:00
parent 8100518549
commit 8fed46961a
7 changed files with 1349 additions and 22 deletions
@@ -0,0 +1,174 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  ShieldAlert,
+  LogOut,
+  Ban,
+  Mail,
+  Building2,
+  Fingerprint,
+  Lock,
+} from 'lucide-react';
+import { BrandLogo } from '../ui/BrandLogo';
+import { AuthUserProfile, UserClaims } from '../../auth/AuthProvider';
+import { cancelSessionExpiration, dismissSubordinateModals } from '../../services/sessionExpiration';
+
+interface PartnerAccessDeniedModalProps {
+  user: AuthUserProfile | null;
+  claims: UserClaims;
+  sub: string;
+  onLogout: () => Promise<void>;
+}
+
+export const PartnerAccessDeniedModal: React.FC<PartnerAccessDeniedModalProps> = ({
+  user,
+  claims,
+  sub,
+  onLogout,
+}) => {
+  const navigate = useNavigate();
+
+  // Clear any existing session prompt and close background dialogs
+  useEffect(() => {
+    cancelSessionExpiration();
+    dismissSubordinateModals();
+  }, []);
+
+  const displayName =
+    user?.name ||
+    (claims.name as string) ||
+    (claims.preferred_username as string) ||
+    'Authenticated User';
+
+  const displayEmail =
+    user?.email ||
+    (claims.email as string) ||
+    (claims['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] as string) ||
+    '';
+
+  const tenant = user?.tenant || (claims.tenant as string) || (claims.org as string) || 'Statutory Enterprise';
+  const role = user?.role || (claims.role as string) || 'Partner';
+
+  const handleLogoutClick = async () => {
+    await onLogout();
+    navigate('/', { replace: true });
+  };
+
+  return (
+    <div
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="partner-denied-title"
+      aria-describedby="partner-denied-description"
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-md animate-in fade-in duration-200"
+    >
+      <div className="relative w-full max-w-lg overflow-hidden rounded-2xl bg-[#0e1424] border border-rose-900/60 shadow-2xl shadow-rose-950/50">
+        {/* Glow Header Accent */}
+        <div className="h-2 w-full bg-linear-to-r from-rose-600 via-red-500 to-amber-500" />
+
+        <div className="p-6 sm:p-8 space-y-6">
+          {/* Header */}
+          <div className="flex items-start gap-4">
+            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-rose-500/15 border border-rose-500/30 text-rose-400">
+              <Ban className="h-6 w-6 text-rose-400" />
+            </div>
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-rose-400 bg-rose-950/60 px-2 py-0.5 rounded-md border border-rose-800/60">
+                  <Lock className="w-3 h-3" />
+                  Restricted Role
+                </span>
+                <span className="text-xs text-slate-500">Security Policy</span>
+              </div>
+              <h2 id="partner-denied-title" className="text-lg font-bold text-white tracking-tight">
+                Access Denied: Partner Role
+              </h2>
+              <p id="partner-denied-description" className="text-xs text-slate-400 leading-relaxed">
+                Users assigned the <strong className="text-rose-300">Partner</strong> role by security are not permitted to access the PFM Backoffice Console.
+              </p>
+            </div>
+          </div>
+
+          {/* User & Identity Summary Card */}
+          <div className="rounded-xl bg-slate-900/80 border border-slate-800 p-4 space-y-3 text-xs">
+            <div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
+              <span className="text-slate-400 font-medium">Account Name</span>
+              <span className="text-white font-semibold">{displayName}</span>
+            </div>
+
+            {displayEmail && (
+              <div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
+                <span className="text-slate-400 font-medium flex items-center gap-1.5">
+                  <Mail className="w-3.5 h-3.5 text-slate-500" />
+                  Email
+                </span>
+                <span className="text-slate-200 font-mono">{displayEmail}</span>
+              </div>
+            )}
+
+            <div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
+              <span className="text-slate-400 font-medium flex items-center gap-1.5">
+                <Building2 className="w-3.5 h-3.5 text-slate-500" />
+                Assigned Role
+              </span>
+              <span className="text-rose-400 font-semibold bg-rose-950/60 px-2 py-0.5 rounded border border-rose-800/50">
+                {role}
+              </span>
+            </div>
+
+            {tenant && (
+              <div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
+                <span className="text-slate-400 font-medium flex items-center gap-1.5">
+                  <Building2 className="w-3.5 h-3.5 text-slate-500" />
+                  Tenant Context
+                </span>
+                <span className="text-slate-200 font-medium truncate max-w-[220px]">{tenant}</span>
+              </div>
+            )}
+
+            {sub && (
+              <div className="flex items-center justify-between text-[11px] text-slate-500">
+                <span className="flex items-center gap-1">
+                  <Fingerprint className="w-3 h-3" />
+                  Subject Key
+                </span>
+                <span className="font-mono text-slate-400 truncate max-w-[200px]">{sub}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Security Policy Information */}
+          <div className="p-4 rounded-xl bg-rose-950/20 border border-rose-900/40 text-xs text-rose-200 leading-relaxed space-y-1.5">
+            <p className="font-semibold text-rose-300 flex items-center gap-1.5">
+              <ShieldAlert className="w-4 h-4 text-rose-400" />
+              Administrative Boundary Notice
+            </p>
+            <p className="text-[11px] text-rose-300/90">
+              The PFM Console is reserved for statutory administrators, sponsors, programme managers, and governance officers. Partner credentials cannot access this environment. If you require backoffice administrative access, please request an updated role assignment from your system administrator.
+            </p>
+          </div>
+
+          {/* Actions */}
+          <div className="pt-2">
+            <button
+              onClick={handleLogoutClick}
+              className="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 hover:text-white text-xs font-semibold border border-slate-700 transition cursor-pointer shadow-sm"
+            >
+              <LogOut className="w-4 h-4 text-rose-400" />
+              <span>Sign Out & Return to Home</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Footer Brand watermark */}
+        <div className="px-6 py-3 bg-[#0a0f1d] border-t border-slate-800/80 flex items-center justify-between text-[11px] text-slate-500">
+          <div className="flex items-center gap-2">
+            <BrandLogo size={16} showGlow={false} animateOnHover={false} />
+            <span>Post Fund Management (PFM)</span>
+          </div>
+          <span>National Security Gateway</span>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -25,7 +25,7 @@ import { BrandLogo } from '../ui/BrandLogo';
 import { HelpTooltip } from '../ui/HelpTooltip';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { useQuery } from '@tanstack/react-query';
-import { getUsers } from '../../services/api';
+import { getUsers, getTenant } from '../../services/api';
 import { getUserEmail, registerUserEmail } from '../../lib/formatters';

 interface SubNavItem {
@@ -94,6 +94,12 @@ const navItems: NavItem[] = [
    icon: ShieldAlert,
    help: 'Monitoring & Evaluation (M&E) framework, indicator tracking, ISO 31000 risk registers, mitigation plans, and compliance audits.',
  },
+  {
+    name: 'Tenant Management',
+    path: '/tenants',
+    icon: Database,
+    help: 'Multi-tenant partition directory, organizational onboarding, status lifecycle controls, and system-wide isolation boundaries.',
+  },
  {
    name: 'Settings & Communications',
    path: '/settings',
@@ -103,7 +109,7 @@ const navItems: NavItem[] = [
 ];

 export const AppLayout: React.FC = () => {
-  const { user, claims, sub, tenantId, hashedTenantId, logout } = useAuth();
+  const { user, claims, sub, tenantId, hashedTenantId, tenantName: authTenantName, canManageTenants, logout } = useAuth();
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const navigate = useNavigate();
@@ -112,6 +118,14 @@ export const AppLayout: React.FC = () => {
    await logout();
  };

+  // Only show Tenant Management if user's tenant_id == 1 and their role list has Admin in it
+  const visibleNavItems = navItems.filter((item) => {
+    if (item.path === '/tenants') {
+      return canManageTenants;
+    }
+    return true;
+  });
+
  // Pre-populate user directory cache so all components and modals resolve user emails instantly
  useQuery({
    queryKey: ['users-directory'],
@@ -119,6 +133,14 @@ export const AppLayout: React.FC = () => {
    staleTime: 5 * 60 * 1000,
  });

+  // Query tenant endpoint to resolve tenant name if not provided in claims or profile
+  const { data: remoteTenant } = useQuery({
+    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
  const effectiveEmail = ((user?.email || claims?.email || claims?.['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] || claims?.upn) as string);
  if (sub && effectiveEmail) {
@@ -143,14 +165,16 @@ export const AppLayout: React.FC = () => {
    (claims.upn as string) ||
    (sub ? getUserEmail(sub) : '');

-  // Extract tenant name directly from the user claim named 'tenant'
+  // Extract tenant name from user claim 'tenant', auth context, remote tenant endpoint, or organization name
  const tenantName =
    (claims?.tenant as string) ||
-    user?.tenant ||
    (claims?.['tenant'] as string) ||
+    authTenantName ||
+    user?.tenant ||
+    remoteTenant?.name ||
    user?.organisationName ||
    (claims?.organisation as string) ||
-    'Department of Science, Innovation & Technology (DSI)';
+    (tenantId ? `Tenant #${tenantId}` : 'Department of Science, Innovation & Technology (DSI)');

  return (
    <div className="flex h-screen w-full overflow-hidden bg-[#090d16] font-sans text-slate-100 selection:bg-blue-600 selection:text-white">
@@ -189,7 +213,7 @@ export const AppLayout: React.FC = () => {

        {/* Navigation Items */}
        <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1.5">
-          {navItems.map((item) => {
+          {visibleNavItems.map((item) => {
            const Icon = item.icon;
            const hasSub = item.subItems && item.subItems.length > 0;

@@ -289,21 +313,40 @@ export const AppLayout: React.FC = () => {

            <div className="hidden sm:flex items-center gap-2 text-xs font-medium text-slate-300">
              <span className="text-slate-400">Tenant:</span>
-              <span
-                className="bg-slate-900/80 text-slate-200 px-2.5 py-1 rounded-lg border border-slate-800 flex items-center gap-1.5 font-medium shadow-xs max-w-[320px] truncate"
-                title={`${tenantName}${hashedTenantId ? ` (Partition: ${hashedTenantId})` : ''}`}
-              >
-                <Database className="w-3.5 h-3.5 text-blue-400 shrink-0" />
-                <span className="truncate">{tenantName}</span>
-                {hashedTenantId && (
-                  <span
-                    className="text-[10px] font-mono text-blue-400 bg-blue-950/60 px-1.5 py-0.5 rounded border border-blue-800/60 shrink-0"
-                    title={`Tenant Partition HashID: ${hashedTenantId}`}
-                  >
-                    {hashedTenantId}
-                  </span>
-                )}
-              </span>
+              {canManageTenants ? (
+                <Link
+                  to="/tenants"
+                  className="bg-slate-900/80 hover:bg-slate-800/90 text-slate-200 hover:text-white px-2.5 py-1 rounded-lg border border-slate-800 hover:border-slate-700 flex items-center gap-1.5 font-medium shadow-xs max-w-[320px] truncate transition group cursor-pointer"
+                  title={`Manage Tenants • Current: ${tenantName}${hashedTenantId ? ` (Partition: ${hashedTenantId})` : ''}`}
+                >
+                  <Database className="w-3.5 h-3.5 text-blue-400 shrink-0 group-hover:text-blue-300 transition" />
+                  <span className="truncate">{tenantName}</span>
+                  {hashedTenantId && (
+                    <span
+                      className="text-[10px] font-mono text-blue-400 bg-blue-950/60 px-1.5 py-0.5 rounded border border-blue-800/60 shrink-0"
+                      title={`Tenant Partition HashID: ${hashedTenantId}`}
+                    >
+                      {hashedTenantId}
+                    </span>
+                  )}
+                </Link>
+              ) : (
+                <span
+                  className="bg-slate-900/80 text-slate-200 px-2.5 py-1 rounded-lg border border-slate-800 flex items-center gap-1.5 font-medium shadow-xs max-w-[320px] truncate"
+                  title={`${tenantName}${hashedTenantId ? ` (Partition: ${hashedTenantId})` : ''}`}
+                >
+                  <Database className="w-3.5 h-3.5 text-blue-400 shrink-0" />
+                  <span className="truncate">{tenantName}</span>
+                  {hashedTenantId && (
+                    <span
+                      className="text-[10px] font-mono text-blue-400 bg-blue-950/60 px-1.5 py-0.5 rounded border border-blue-800/60 shrink-0"
+                      title={`Tenant Partition HashID: ${hashedTenantId}`}
+                    >
+                      {hashedTenantId}
+                    </span>
+                  )}
+                </span>
+              )}
              <HelpTooltip
                title="Tenant Context"
                content={`Identifies the multi-tenant organization partition and database boundary within the national PFM environment.${