page.tsx (6329B)
1 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" 2 import { mockReports } from "../mockData"; 3 import TabNavigation from "../../../components/dashboard/tab-navigation" 4 import LayoutWrapper from "@/components/dashboard/layoutWrapper" 5 import { cookies } from "next/headers" 6 import { User } from "@/lib/auth" 7 import { listBots } from "@/lib/api" 8 import ReportList from "@/components/dashboard/report-list" 9 import { redirect } from "next/navigation"; 10 import Link from "next/link"; 11 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; 12 import { Button } from "@/components/ui/button"; 13 import { ChevronDown } from "lucide-react"; 14 15 export default async function ReportsPage({ 16 searchParams, 17 }: { 18 searchParams: Promise<{ [key: string]: string | string[] | undefined }> 19 }) { 20 const params = await searchParams; 21 const teamIdParam = params.team as string | undefined; 22 const filter = (params.filter as "all" | "message" | "invite" | "high" | undefined) ?? "all" 23 if (!["all", "message", "invite", "high"].includes(filter)) { 24 redirect(`/dashboard/reports?team=${teamIdParam}&filter=all`); 25 } 26 const cookieStore = await cookies() 27 const session: User = JSON.parse(cookieStore.get("d4all_session")?.value || "{}") 28 if (!session.token) { 29 return <div className="flex h-screen w-full items-center justify-center">Loading...</div> 30 } 31 const listData = await listBots(session.matrixId, session.token); 32 33 if (!listData) { 34 return <div className="flex h-screen w-full items-center justify-center">Loading...</div> 35 } 36 37 const selectedBot = listData.bots.find((team) => team.id === teamIdParam) ?? listData.bots[0]; 38 if (!selectedBot) { 39 // TODO: Redirect to register page? 40 return <div className="flex h-screen w-full items-center justify-center">Loading...</div> 41 } 42 // Filter reports based on selected team 43 // TODO: Fetch from API 44 const reports = mockReports 45 46 return ( 47 <LayoutWrapper listData={listData} activeTab="reports" teamIdParam={teamIdParam}> 48 <TabNavigation selectedBot={selectedBot} currentTab="reports" /> 49 <Card className="border-gray-800 bg-gray-950"> 50 <CardHeader className="pb-2"> 51 <div className="flex items-center justify-between"> 52 <CardTitle>Active Reports</CardTitle> 53 <div className="flex items-center gap-2"> 54 <DropdownMenu> 55 <DropdownMenuTrigger asChild> 56 <Button className="h-8 w-[120px] bg-gray-900 border border-gray-800 text-gray-400 rounded-md px-2 flex items-center justify-between cursor-pointer"> 57 <span>{filter.charAt(0).toUpperCase() + filter.slice(1)}</span> 58 <ChevronDown className="ml-2 h-4 w-4" /> 59 </Button> 60 </DropdownMenuTrigger> 61 <DropdownMenuContent className="flex flex-col gap-1 bg-gray-900 border border-gray-800 rounded-md p-2 w-[150px]"> 62 <DropdownMenuItem asChild> 63 <Link 64 href={`/dashboard/reports?team=${selectedBot.id}&filter=all`} 65 className={` block px-3 py-2 rounded-md text-sm ${filter === "all" ? "bg-gray-800 text-white" : "text-gray-400 hover:bg-gray-800" 66 }`} 67 > 68 All Reports 69 </Link> 70 </DropdownMenuItem> 71 <DropdownMenuItem asChild> 72 <Link 73 href={`/dashboard/reports?team=${selectedBot.id}&filter=message`} 74 className={`block px-3 py-2 rounded-md text-sm ${filter === "message" ? "bg-gray-800 text-white" : "text-gray-400 hover:bg-gray-800" 75 }`} 76 > 77 Messages 78 </Link> 79 </DropdownMenuItem> 80 <DropdownMenuItem asChild> 81 <Link 82 href={`/dashboard/reports?team=${selectedBot.id}&filter=invite`} 83 className={`block px-3 py-2 rounded-md text-sm ${filter === "invite" ? "bg-gray-800 text-white" : "text-gray-400 hover:bg-gray-800" 84 }`} 85 > 86 Invites 87 </Link> 88 </DropdownMenuItem> 89 <DropdownMenuItem asChild> 90 <Link 91 href={`/dashboard/reports?team=${selectedBot.id}&filter=high`} 92 className={`block px-3 py-2 rounded-md text-sm ${filter === "high" ? "bg-gray-800 text-white" : "text-gray-400 hover:bg-gray-800" 93 }`} 94 > 95 High Priority 96 </Link> 97 </DropdownMenuItem> 98 </DropdownMenuContent> 99 </DropdownMenu> 100 </div> 101 </div> 102 <CardDescription className="text-gray-400">Reports requiring moderation action</CardDescription> 103 </CardHeader> 104 <CardContent> 105 <ReportList reports={reports} filter={filter} /> 106 </CardContent> 107 </Card> 108 </LayoutWrapper > 109 ) 110 }