Implement MFA Enforcement

src/pages/AdminReports.tsx

@@ -2,6 +2,8 @@ import { useRef, useEffect, useCallback } 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 { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
 import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
@@ -11,6 +13,7 @@ import { useModerationStats } from '@/hooks/useModerationStats';
 export default function AdminReports() {
   const { user, loading: authLoading } = useAuth();
   const { isModerator, loading: roleLoading } = useUserRole();
+  const { needsEnrollment, loading: mfaLoading } = useRequireMFA();
   const navigate = useNavigate();
   const reportsQueueRef = useRef<ReportsQueueRef>(null);
   
@@ -47,7 +50,7 @@ export default function AdminReports() {
     }
   }, [user, authLoading, roleLoading, navigate, isModerator]);
 
-  if (authLoading || roleLoading) {
+  if (authLoading || roleLoading || mfaLoading) {
     return (
       <AdminLayout
         onRefresh={handleRefresh}
@@ -72,6 +75,15 @@ export default function AdminReports() {
   if (!user || !isModerator()) {
     return null;
   }
+  
+  // MFA enforcement
+  if (needsEnrollment) {
+    return (
+      <AdminLayout>
+        <MFARequiredAlert />
+      </AdminLayout>
+    );
+  }
 
   return (
     <AdminLayout