Implement MFA Enforcement

src/pages/AdminDashboard.tsx

@@ -3,6 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import { FileText, Flag, AlertCircle, Activity, ShieldAlert } from 'lucide-react';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
+import { useRequireMFA } from '@/hooks/useRequireMFA';
+import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
@@ -20,6 +22,7 @@ import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
 export default function AdminDashboard() {
   const { user, loading: authLoading } = useAuth();
   const { isModerator, loading: roleLoading } = useUserRole();
+  const { needsEnrollment, loading: mfaLoading } = useRequireMFA();
   const navigate = useNavigate();
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [activeTab, setActiveTab] = useState('moderation');
@@ -110,7 +113,7 @@ export default function AdminDashboard() {
     }
   }, [user, authLoading, roleLoading, navigate, isModerator]);
 
-  if (authLoading || roleLoading) {
+  if (authLoading || roleLoading || mfaLoading) {
     return (
       <AdminLayout>
         <div className="space-y-6">
@@ -149,6 +152,15 @@ export default function AdminDashboard() {
   if (!user || !isModerator()) {
     return null;
   }
+  
+  // MFA enforcement
+  if (needsEnrollment) {
+    return (
+      <AdminLayout>
+        <MFARequiredAlert />
+      </AdminLayout>
+    );
+  }
 
   const statCards = [
     {