Implement MFA Enforcement

src/pages/AdminUsers.tsx

@@ -2,6 +2,8 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
+import { useRequireMFA } from '@/hooks/useRequireMFA';
+import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
 import { AdminLayout } from '@/components/layout/AdminLayout';
 import { UserManagement } from '@/components/admin/UserManagement';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -10,6 +12,7 @@ import { Card, CardContent } from '@/components/ui/card';
 export default function AdminUsers() {
   const { user, loading: authLoading } = useAuth();
   const { isModerator, loading: roleLoading } = useUserRole();
+  const { needsEnrollment, loading: mfaLoading } = useRequireMFA();
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -26,7 +29,7 @@ export default function AdminUsers() {
     }
   }, [user, authLoading, roleLoading, navigate, isModerator]);
 
-  if (authLoading || roleLoading) {
+  if (authLoading || roleLoading || mfaLoading) {
     return (
       <AdminLayout>
         <div className="space-y-6">
@@ -59,6 +62,15 @@ export default function AdminUsers() {
   if (!user || !isModerator()) {
     return null;
   }
+  
+  // MFA enforcement
+  if (needsEnrollment) {
+    return (
+      <AdminLayout>
+        <MFARequiredAlert />
+      </AdminLayout>
+    );
+  }
 
   return (
     <AdminLayout>