feat(frontend): Implement Admin Dashboard for moderation

frontend/app/mod/page.tsx

@@ -2,10 +2,11 @@
 
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Check, X, ShieldAlert } from "lucide-react"
+import { Check, X, ShieldAlert, AlertTriangle } from "lucide-react"
 import { useEffect, useState } from "react"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { getApiUrl } from "@/lib/api-config"
+import { Badge } from "@/components/ui/badge"
 
 interface PendingNickname {
     id: number
@@ -15,8 +16,20 @@ interface PendingNickname {
     created_at: string
 }
 
+interface PendingReport {
+    id: number
+    entity_type: string
+    entity_id: number
+    reason: string
+    details?: string
+    user_id: number
+    created_at: string
+    status: string
+}
+
 export default function ModDashboardPage() {
     const [pendingNicknames, setPendingNicknames] = useState<PendingNickname[]>([])
+    const [pendingReports, setPendingReports] = useState<PendingReport[]>([])
     const [loading, setLoading] = useState(true)
     const [error, setError] = useState("")
 
@@ -33,20 +46,21 @@ export default function ModDashboardPage() {
         }
 
         try {
-            const res = await fetch(`${getApiUrl()}/moderation/queue/nicknames`, {
+            const [nicknamesRes, reportsRes] = await Promise.all([
-                headers: { Authorization: `Bearer ${token}` }
+                fetch(`${getApiUrl()}/moderation/queue/nicknames`, { headers: { Authorization: `Bearer ${token}` } }),
-            })
+                fetch(`${getApiUrl()}/moderation/queue/reports`, { headers: { Authorization: `Bearer ${token}` } })
+            ])
 
-            if (res.status === 403) {
+            if (nicknamesRes.status === 403 || reportsRes.status === 403) {
                 setError("Access denied: Moderators only")
                 setLoading(false)
                 return
             }
 
-            if (!res.ok) throw new Error("Failed to fetch queue")
+            if (!nicknamesRes.ok || !reportsRes.ok) throw new Error("Failed to fetch queue")
 
-            const data = await res.json()
+            setPendingNicknames(await nicknamesRes.json())
-            setPendingNicknames(data)
+            setPendingReports(await reportsRes.json())
         } catch (err) {
             console.error(err)
             setError("Failed to load moderation queue")
@@ -55,13 +69,14 @@ export default function ModDashboardPage() {
         }
     }
 
-    const handleAction = async (id: number, action: "approve" | "reject") => {
+    const handleNicknameAction = async (id: number, action: "approve" | "reject") => {
         const token = localStorage.getItem("token")
         if (!token) return
 
         try {
+            // Note: Updated backend uses PUT for nicknames
             const res = await fetch(`${getApiUrl()}/moderation/nicknames/${id}/${action}`, {
-                method: "POST",
+                method: "PUT",
                 headers: { Authorization: `Bearer ${token}` }
             })
 
@@ -75,22 +90,93 @@ export default function ModDashboardPage() {
         }
     }
 
+    const handleReportAction = async (id: number, action: "resolve" | "dismiss") => {
+        const token = localStorage.getItem("token")
+        if (!token) return
+
+        try {
+            // Note: Updated backend uses PUT for reports
+            const res = await fetch(`${getApiUrl()}/moderation/reports/${id}/${action}`, {
+                method: "PUT",
+                headers: { Authorization: `Bearer ${token}` }
+            })
+
+            if (!res.ok) throw new Error(`Failed to ${action}`)
+
+            setPendingReports(prev => prev.filter(r => r.id !== id))
+        } catch (err) {
+            console.error(err)
+            alert(`Error: ${err}`)
+        }
+    }
+
     if (loading) return <div className="p-8 text-center">Loading dashboard...</div>
     if (error) return <div className="p-8 text-center text-red-500 font-bold">{error}</div>
 
     return (
-        <div className="flex flex-col gap-6">
+        <div className="container py-8 flex flex-col gap-6 max-w-5xl">
             <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
                 <ShieldAlert className="h-8 w-8 text-primary" />
                 Moderator Dashboard
             </h1>
 
-            <Tabs defaultValue="nicknames">
+            <Tabs defaultValue="reports">
                 <TabsList>
+                    <TabsTrigger value="reports">Reports ({pendingReports.length})</TabsTrigger>
                     <TabsTrigger value="nicknames">Nicknames ({pendingNicknames.length})</TabsTrigger>
-                    <TabsTrigger value="reports">Reports (0)</TabsTrigger>
                 </TabsList>
 
+                <TabsContent value="reports">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>User Reports</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            {pendingReports.length === 0 ? (
+                                <p className="text-muted-foreground py-8 text-center">No pending reports. Community is safe! 🛡️</p>
+                            ) : (
+                                <div className="space-y-4">
+                                    {pendingReports.map(report => (
+                                        <div key={report.id} className="flex flex-col md:flex-row gap-4 justify-between border p-4 rounded-lg bg-red-50/10 border-red-100 dark:border-red-900/20">
+                                            <div>
+                                                <div className="flex items-center gap-2 mb-1">
+                                                    <Badge variant="destructive" className="uppercase text-[10px]">
+                                                        {report.reason}
+                                                    </Badge>
+                                                    <span className="font-semibold">{report.entity_type} #{report.entity_id}</span>
+                                                </div>
+                                                {report.details && (
+                                                    <p className="text-sm italic text-muted-foreground mb-2">"{report.details}"</p>
+                                                )}
+                                                <p className="text-xs text-muted-foreground">
+                                                    Reported by User #{report.user_id} • {new Date(report.created_at).toLocaleString()}
+                                                </p>
+                                            </div>
+                                            <div className="flex gap-2 items-center">
+                                                <Button
+                                                    size="sm"
+                                                    variant="default"
+                                                    className="bg-red-600 hover:bg-red-700"
+                                                    onClick={() => handleReportAction(report.id, "resolve")}
+                                                >
+                                                    <Check className="h-4 w-4 mr-1" /> Resolve (Ban/Delete)
+                                                </Button>
+                                                <Button
+                                                    size="sm"
+                                                    variant="outline"
+                                                    onClick={() => handleReportAction(report.id, "dismiss")}
+                                                >
+                                                    <X className="h-4 w-4 mr-1" /> Dismiss
+                                                </Button>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+
                 <TabsContent value="nicknames">
                     <Card>
                         <CardHeader>
@@ -98,7 +184,7 @@ export default function ModDashboardPage() {
                         </CardHeader>
                         <CardContent>
                             {pendingNicknames.length === 0 ? (
-                                <p className="text-muted-foreground py-8 text-center">No pending nicknames. Good job!</p>
+                                <p className="text-muted-foreground py-8 text-center">No pending nicknames.</p>
                             ) : (
                                 <div className="space-y-4">
                                     {pendingNicknames.map((item) => (
@@ -117,7 +203,7 @@ export default function ModDashboardPage() {
                                                     size="sm"
                                                     variant="outline"
                                                     className="text-green-600 hover:text-green-700 hover:bg-green-50"
-                                                    onClick={() => handleAction(item.id, "approve")}
+                                                    onClick={() => handleNicknameAction(item.id, "approve")}
                                                 >
                                                     <Check className="h-4 w-4 mr-1" /> Approve
                                                 </Button>
@@ -125,7 +211,7 @@ export default function ModDashboardPage() {
                                                     size="sm"
                                                     variant="outline"
                                                     className="text-red-600 hover:text-red-700 hover:bg-red-50"
-                                                    onClick={() => handleAction(item.id, "reject")}
+                                                    onClick={() => handleNicknameAction(item.id, "reject")}
                                                 >
                                                     <X className="h-4 w-4 mr-1" /> Reject
                                                 </Button>
@@ -137,17 +223,6 @@ export default function ModDashboardPage() {
                         </CardContent>
                     </Card>
                 </TabsContent>
-
-                <TabsContent value="reports">
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>User Reports</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            <p className="text-muted-foreground">Report queue coming soon...</p>
-                        </CardContent>
-                    </Card>
-                </TabsContent>
             </Tabs>
         </div>
     )