Fixed UI misalignments

PostFundManagement.ConsoleUI/src/components/users/UserSecurityModal.tsx

@@ -32,6 +32,7 @@ import { clearCachedUserRbac, fetchAndCacheRoleClaims } from '../../services/rol
 import { HelpTooltip } from '../ui/HelpTooltip';
 import { ObfuscatedIdNumber } from '../ui/ObfuscatedIdNumber';
 import { decodeIdNumberHex } from '../../utils/hashids';
+import { useAuth } from '../../auth/AuthProvider';
 import { User, Role, Claim, ActivityStatus } from '../../types';
 import { formatDate, getActivityStatusBadge, getUserRoleBadge } from '../../lib/formatters';
 import { useRbac, ROLE_CLAIM_DEFINITIONS } from '../../auth/rbac';
@@ -49,9 +50,15 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
 }) => {
   const queryClient = useQueryClient();
   const { success, error: toastError } = useToast();
+  const { user: currentAuthUser } = useAuth();
   const { canApprove, canAdd, canView, canAccess, isUnrestricted } = useRbac();
   const hasTenantSelfHelpAccess = canAccess('tenant_self_service') || canView('tenant_self_service');
 
+  const userId = user?.id || '';
+  const isSelf =
+    Boolean(currentAuthUser?.id && userId && String(currentAuthUser.id).toLowerCase() === String(userId).toLowerCase()) ||
+    Boolean(currentAuthUser?.email && user?.email && currentAuthUser.email.toLowerCase() === user.email.toLowerCase());
+
   const canManageRolesAndClaims =
     canApprove('settings_users') ||
     canApprove('tenant_management') ||
@@ -63,18 +70,17 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
     hasTenantSelfHelpAccess ||
     isUnrestricted;
   const canChangeStatus =
-    canAdd('settings_users') ||
-    canAdd('tenant_management') ||
-    canAdd('tenant_self_service') ||
-    canApprove('settings_users') ||
-    isUnrestricted;
+    !isSelf &&
+    (canAdd('settings_users') ||
+      canAdd('tenant_management') ||
+      canAdd('tenant_self_service') ||
+      canApprove('settings_users') ||
+      isUnrestricted);
 
   const [activeTab, setActiveTab] = useState<'overview' | 'roles' | 'claims' | 'sessions'>('overview');
 
   const [selectedRoleToAdd, setSelectedRoleToAdd] = useState('');
 
-  const userId = user?.id || '';
-
   // 1. Fetch fresh user details
   const { data: freshUser, isLoading: loadingUser, refetch: refetchUser } = useQuery<User | null>({
     queryKey: ['user-detail', userId],
@@ -260,7 +266,12 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
   });
 
   const statusMutation = useMutation({
-    mutationFn: (newStatus: ActivityStatus) => updateUserStatus(userId, newStatus),
+    mutationFn: (newStatus: ActivityStatus) => {
+      if (isSelf) {
+        throw new Error('Maker-Checker Violation: You cannot alter your own account activity status.');
+      }
+      return updateUserStatus(userId, newStatus);
+    },
     onSuccess: () => {
       success('Status Updated', 'User activity status changed.');
       refetchUser();
@@ -396,7 +407,14 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
                   </span>
                 </div>
                 <div className="flex items-center gap-2">
-                  {effectiveUser?.status === ActivityStatus.Active ? (
+                  {isSelf ? (
+                    <span
+                      className="px-2.5 py-1 text-[11px] font-semibold text-slate-400 bg-slate-900 border border-slate-800 rounded-lg"
+                      title="Maker-Checker policy: Administrators cannot change their own account activity status"
+                    >
+                      Self-Account (Protected)
+                    </span>
+                  ) : effectiveUser?.status === ActivityStatus.Active ? (
                     <button
                       type="button"
                       onClick={() => statusMutation.mutate(ActivityStatus.Inactive)}