Add moderation queue tables

src/pages/Admin.tsx

@@ -0,0 +1,162 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Shield, Users, FileText, Flag, AlertCircle } from 'lucide-react';
+import { useUserRole } from '@/hooks/useUserRole';
+import { useAuth } from '@/hooks/useAuth';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ModerationQueue } from '@/components/moderation/ModerationQueue';
+import { ReportsQueue } from '@/components/moderation/ReportsQueue';
+import { UserRoleManager } from '@/components/moderation/UserRoleManager';
+
+export default function Admin() {
+  const { user, loading: authLoading } = useAuth();
+  const { isModerator, loading: roleLoading } = useUserRole();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!authLoading && !roleLoading) {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+      
+      if (!isModerator()) {
+        navigate('/');
+        return;
+      }
+    }
+  }, [user, authLoading, roleLoading, isModerator, navigate]);
+
+  if (authLoading || roleLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading admin panel...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user || !isModerator()) {
+    return null;
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-8">
+        <div className="flex items-center gap-3 mb-2">
+          <Shield className="w-8 h-8 text-primary" />
+          <h1 className="text-3xl font-bold">Admin Dashboard</h1>
+        </div>
+        <p className="text-muted-foreground">
+          Manage content moderation and user roles
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Pending Reviews</CardTitle>
+            <FileText className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">--</div>
+            <p className="text-xs text-muted-foreground">
+              Reviews awaiting moderation
+            </p>
+          </CardContent>
+        </Card>
+        
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Open Reports</CardTitle>
+            <Flag className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">--</div>
+            <p className="text-xs text-muted-foreground">
+              User reports to review
+            </p>
+          </CardContent>
+        </Card>
+        
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Flagged Content</CardTitle>
+            <AlertCircle className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">--</div>
+            <p className="text-xs text-muted-foreground">
+              Auto-flagged items
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="queue" className="space-y-6">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="queue" className="flex items-center gap-2">
+            <FileText className="w-4 h-4" />
+            Moderation Queue
+          </TabsTrigger>
+          <TabsTrigger value="reports" className="flex items-center gap-2">
+            <Flag className="w-4 h-4" />
+            Reports
+          </TabsTrigger>
+          <TabsTrigger value="users" className="flex items-center gap-2">
+            <Users className="w-4 h-4" />
+            User Roles
+          </TabsTrigger>
+        </TabsList>
+        
+        <TabsContent value="queue">
+          <Card>
+            <CardHeader>
+              <CardTitle>Content Moderation Queue</CardTitle>
+              <CardDescription>
+                Review and moderate pending content submissions and flagged reviews
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ModerationQueue />
+            </CardContent>
+          </Card>
+        </TabsContent>
+        
+        <TabsContent value="reports">
+          <Card>
+            <CardHeader>
+              <CardTitle>User Reports</CardTitle>
+              <CardDescription>
+                Review reports submitted by users about inappropriate content
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ReportsQueue />
+            </CardContent>
+          </Card>
+        </TabsContent>
+        
+        <TabsContent value="users">
+          <Card>
+            <CardHeader>
+              <CardTitle>User Role Management</CardTitle>
+              <CardDescription>
+                Manage moderator and admin privileges for users
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <UserRoleManager />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}