feat: Implement automatic MFA verification modal

src/pages/AdminDashboard.tsx

@@ -4,7 +4,7 @@ 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 { MFAGuard } from '@/components/auth/MFAGuard';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
@@ -158,15 +158,6 @@ export default function AdminDashboard() {
   if (!user || !isModerator()) {
     return null;
   }
-  
-  // MFA enforcement
-  if (needsEnrollment) {
-    return (
-      <AdminLayout>
-        <MFARequiredAlert />
-      </AdminLayout>
-    );
-  }
 
   const statCards = [
     {
@@ -200,113 +191,115 @@ export default function AdminDashboard() {
       lastUpdated={lastUpdated ?? undefined}
       isRefreshing={isRefreshing}
     >
-      <div className="space-y-6">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">Admin Dashboard</h1>
-          <p className="text-muted-foreground mt-1">
-            Central hub for all moderation activity
-          </p>
-        </div>
+      <MFAGuard>
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">Admin Dashboard</h1>
+            <p className="text-muted-foreground mt-1">
+              Central hub for all moderation activity
+            </p>
+          </div>
 
-        {/* Security Warning for Suspicious Versions */}
-        {suspiciousVersionsCount > 0 && (
-          <Alert variant="destructive" className="border-red-500/50 bg-red-500/10">
-            <ShieldAlert className="h-5 w-5" />
-            <AlertDescription className="ml-2">
-              <strong>Security Alert:</strong> {suspiciousVersionsCount} entity version{suspiciousVersionsCount !== 1 ? 's' : ''} detected without user attribution. 
-              This may indicate submission flow bypass. Check admin audit logs for details.
-            </AlertDescription>
-          </Alert>
-        )}
+          {/* Security Warning for Suspicious Versions */}
+          {suspiciousVersionsCount > 0 && (
+            <Alert variant="destructive" className="border-red-500/50 bg-red-500/10">
+              <ShieldAlert className="h-5 w-5" />
+              <AlertDescription className="ml-2">
+                <strong>Security Alert:</strong> {suspiciousVersionsCount} entity version{suspiciousVersionsCount !== 1 ? 's' : ''} detected without user attribution. 
+                This may indicate submission flow bypass. Check admin audit logs for details.
+              </AlertDescription>
+            </Alert>
+          )}
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          {statCards.map((card) => {
-            const Icon = card.icon;
-            const colorClasses = {
-              amber: {
-                card: 'hover:border-amber-500/50',
-                bg: 'bg-amber-500/10',
-                icon: 'text-amber-600 dark:text-amber-400',
-              },
-              red: {
-                card: 'hover:border-red-500/50',
-                bg: 'bg-red-500/10',
-                icon: 'text-red-600 dark:text-red-400',
-              },
-              orange: {
-                card: 'hover:border-orange-500/50',
-                bg: 'bg-orange-500/10',
-                icon: 'text-orange-600 dark:text-orange-400',
-              },
-            };
-            const colors = colorClasses[card.color as keyof typeof colorClasses];
-            
-            return (
-              <Card
-                key={card.label}
-                className={`${colors.card} transition-colors cursor-pointer`}
-                onClick={() => handleStatCardClick(card.type)}
-              >
-                <CardContent className="flex items-center justify-between p-6">
-                  <div className="flex items-center gap-4">
-                    <div className={`p-3 ${colors.bg} rounded-lg`}>
-                      <Icon className={`w-5 h-5 ${colors.icon}`} />
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {statCards.map((card) => {
+              const Icon = card.icon;
+              const colorClasses = {
+                amber: {
+                  card: 'hover:border-amber-500/50',
+                  bg: 'bg-amber-500/10',
+                  icon: 'text-amber-600 dark:text-amber-400',
+                },
+                red: {
+                  card: 'hover:border-red-500/50',
+                  bg: 'bg-red-500/10',
+                  icon: 'text-red-600 dark:text-red-400',
+                },
+                orange: {
+                  card: 'hover:border-orange-500/50',
+                  bg: 'bg-orange-500/10',
+                  icon: 'text-orange-600 dark:text-orange-400',
+                },
+              };
+              const colors = colorClasses[card.color as keyof typeof colorClasses];
+              
+              return (
+                <Card
+                  key={card.label}
+                  className={`${colors.card} transition-colors cursor-pointer`}
+                  onClick={() => handleStatCardClick(card.type)}
+                >
+                  <CardContent className="flex items-center justify-between p-6">
+                    <div className="flex items-center gap-4">
+                      <div className={`p-3 ${colors.bg} rounded-lg`}>
+                        <Icon className={`w-5 h-5 ${colors.icon}`} />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">
+                          {card.label}
+                        </p>
+                      </div>
                     </div>
-                    <div>
-                      <p className="text-sm font-medium text-muted-foreground">
-                        {card.label}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="text-4xl font-bold">{card.value}</div>
-                </CardContent>
-              </Card>
-            );
-          })}
+                    <div className="text-4xl font-bold">{card.value}</div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-3 h-auto p-1">
+              <TabsTrigger value="moderation" className="flex items-center gap-2 py-3">
+                <FileText className="w-4 h-4" />
+                <span className="hidden sm:inline">Moderation Queue</span>
+                <span className="sm:hidden">Queue</span>
+                {stats.pendingSubmissions > 0 && (
+                  <Badge variant="secondary" className="ml-1 bg-amber-500/20 text-amber-700 dark:text-amber-300">
+                    {stats.pendingSubmissions}
+                  </Badge>
+                )}
+              </TabsTrigger>
+              <TabsTrigger value="reports" className="flex items-center gap-2 py-3">
+                <Flag className="w-4 h-4" />
+                <span className="hidden sm:inline">Reports</span>
+                <span className="sm:hidden">Reports</span>
+                {stats.openReports > 0 && (
+                  <Badge variant="secondary" className="ml-1 bg-red-500/20 text-red-700 dark:text-red-300">
+                    {stats.openReports}
+                  </Badge>
+                )}
+              </TabsTrigger>
+              <TabsTrigger value="activity" className="flex items-center gap-2 py-3">
+                <Activity className="w-4 h-4" />
+                <span className="hidden sm:inline">Recent Activity</span>
+                <span className="sm:hidden">Activity</span>
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="moderation" className="mt-6" forceMount={true} hidden={activeTab !== 'moderation'}>
+              <ModerationQueue ref={moderationQueueRef} optimisticallyUpdateStats={optimisticallyUpdateStats} />
+            </TabsContent>
+
+            <TabsContent value="reports" className="mt-6" forceMount={true} hidden={activeTab !== 'reports'}>
+              <ReportsQueue ref={reportsQueueRef} />
+            </TabsContent>
+
+            <TabsContent value="activity" className="mt-6" forceMount={true} hidden={activeTab !== 'activity'}>
+              <RecentActivity ref={recentActivityRef} />
+            </TabsContent>
+          </Tabs>
         </div>
-
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-3 h-auto p-1">
-            <TabsTrigger value="moderation" className="flex items-center gap-2 py-3">
-              <FileText className="w-4 h-4" />
-              <span className="hidden sm:inline">Moderation Queue</span>
-              <span className="sm:hidden">Queue</span>
-              {stats.pendingSubmissions > 0 && (
-                <Badge variant="secondary" className="ml-1 bg-amber-500/20 text-amber-700 dark:text-amber-300">
-                  {stats.pendingSubmissions}
-                </Badge>
-              )}
-            </TabsTrigger>
-            <TabsTrigger value="reports" className="flex items-center gap-2 py-3">
-              <Flag className="w-4 h-4" />
-              <span className="hidden sm:inline">Reports</span>
-              <span className="sm:hidden">Reports</span>
-              {stats.openReports > 0 && (
-                <Badge variant="secondary" className="ml-1 bg-red-500/20 text-red-700 dark:text-red-300">
-                  {stats.openReports}
-                </Badge>
-              )}
-            </TabsTrigger>
-            <TabsTrigger value="activity" className="flex items-center gap-2 py-3">
-              <Activity className="w-4 h-4" />
-              <span className="hidden sm:inline">Recent Activity</span>
-              <span className="sm:hidden">Activity</span>
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="moderation" className="mt-6" forceMount={true} hidden={activeTab !== 'moderation'}>
-            <ModerationQueue ref={moderationQueueRef} optimisticallyUpdateStats={optimisticallyUpdateStats} />
-          </TabsContent>
-
-          <TabsContent value="reports" className="mt-6" forceMount={true} hidden={activeTab !== 'reports'}>
-            <ReportsQueue ref={reportsQueueRef} />
-          </TabsContent>
-
-          <TabsContent value="activity" className="mt-6" forceMount={true} hidden={activeTab !== 'activity'}>
-            <RecentActivity ref={recentActivityRef} />
-          </TabsContent>
-        </Tabs>
-      </div>
+      </MFAGuard>
     </AdminLayout>
   );
 }

src/pages/AdminModeration.tsx

@@ -1,6 +1,6 @@
 import { useRef, useCallback } from 'react';
 import { useAdminGuard } from '@/hooks/useAdminGuard';
-import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
+import { MFAGuard } from '@/components/auth/MFAGuard';
 import { AdminLayout } from '@/components/layout/AdminLayout';
 import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
 import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
@@ -56,14 +56,6 @@ export default function AdminModeration() {
   if (!isAuthorized) {
     return null;
   }
-  
-  if (needsMFA) {
-    return (
-      <AdminLayout>
-        <MFARequiredAlert />
-      </AdminLayout>
-    );
-  }
 
   return (
     <AdminLayout
@@ -72,16 +64,18 @@ export default function AdminModeration() {
       pollInterval={pollInterval}
       lastUpdated={lastUpdated ?? undefined}
     >
-      <div className="space-y-6">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">Moderation Queue</h1>
-          <p className="text-muted-foreground mt-1">
-            Review and manage pending content submissions
-          </p>
-        </div>
+      <MFAGuard>
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">Moderation Queue</h1>
+            <p className="text-muted-foreground mt-1">
+              Review and manage pending content submissions
+            </p>
+          </div>
 
-        <ModerationQueue ref={moderationQueueRef} />
-      </div>
+          <ModerationQueue ref={moderationQueueRef} />
+        </div>
+      </MFAGuard>
     </AdminLayout>
   );
 }

src/pages/AdminReports.tsx

@@ -1,6 +1,6 @@
 import { useRef, useCallback } from 'react';
 import { useAdminGuard } from '@/hooks/useAdminGuard';
-import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
+import { MFAGuard } from '@/components/auth/MFAGuard';
 import { AdminLayout } from '@/components/layout/AdminLayout';
 import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
 import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
@@ -57,14 +57,6 @@ export default function AdminReports() {
   if (!isAuthorized) {
     return null;
   }
-  
-  if (needsMFA) {
-    return (
-      <AdminLayout>
-        <MFARequiredAlert />
-      </AdminLayout>
-    );
-  }
 
   return (
     <AdminLayout
@@ -73,16 +65,18 @@ export default function AdminReports() {
       pollInterval={pollInterval}
       lastUpdated={lastUpdated ?? undefined}
     >
-      <div className="space-y-6">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">User Reports</h1>
-          <p className="text-muted-foreground mt-1">
-            Review and resolve user-submitted reports
-          </p>
-        </div>
+      <MFAGuard>
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">User Reports</h1>
+            <p className="text-muted-foreground mt-1">
+              Review and resolve user-submitted reports
+            </p>
+          </div>
 
-        <ReportsQueue ref={reportsQueueRef} />
-      </div>
+          <ReportsQueue ref={reportsQueueRef} />
+        </div>
+      </MFAGuard>
     </AdminLayout>
   );
 }

src/pages/AdminUsers.tsx

@@ -1,5 +1,5 @@
 import { useAdminGuard } from '@/hooks/useAdminGuard';
-import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
+import { MFAGuard } from '@/components/auth/MFAGuard';
 import { AdminLayout } from '@/components/layout/AdminLayout';
 import { UserManagement } from '@/components/admin/UserManagement';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -43,27 +43,21 @@ export default function AdminUsers() {
   if (!isAuthorized) {
     return null;
   }
-  
-  if (needsMFA) {
-    return (
-      <AdminLayout>
-        <MFARequiredAlert />
-      </AdminLayout>
-    );
-  }
 
   return (
     <AdminLayout>
-      <div className="space-y-6">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">User Management</h1>
-          <p className="text-muted-foreground mt-1">
-            Manage user profiles, roles, and permissions
-          </p>
-        </div>
+      <MFAGuard>
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">User Management</h1>
+            <p className="text-muted-foreground mt-1">
+              Manage user profiles, roles, and permissions
+            </p>
+          </div>
 
-        <UserManagement />
-      </div>
+          <UserManagement />
+        </div>
+      </MFAGuard>
     </AdminLayout>
   );
 }