added reports page

apps/hub/app/(app)/admin/report/[id]/page.tsx

@@ -1,81 +1,44 @@
-"use client";
-import { useEffect, useState } from "react";
-import { Eye } from "lucide-react";
-import { fetchReportDetails, handleMarkAsResolved } from "../actions";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { prisma } from "@repo/db";
+import { Error } from "_components/Error";
+import {
+	ReportAdmin,
+	ReportSenderInfo,
+} from "(app)/admin/report/_components/form";
 
-export default function ReportDetailsPage({
-	params: paramsPromise,
+export default async function ReportDetailsPage({
+	params,
 }: {
-	params: Promise<{ id: number }>;
+	params: { id: string };
 }) {
-	const [params, setParams] = useState<{ id: number } | null>(null);
-	const [report, setReport] = useState<any>(null);
-	const [loading, setLoading] = useState(true);
+	const { id } = await params;
 
-	useEffect(() => {
-		async function unwrapParams() {
-			const resolvedParams = await paramsPromise;
-			setParams(resolvedParams);
-		}
-		unwrapParams();
-	}, [paramsPromise]);
+	const report = await prisma.report.findUnique({
+		where: {
+			id: Number(id),
+		},
+		include: {
+			Reported: true,
+			Reviewer: true,
+			Sender: true,
+		},
+	});
 
-	useEffect(() => {
-		if (!params) return;
-
-		async function loadReport() {
-			if (!params) return;
-			const fetchedReport = await fetchReportDetails(parseInt(params.id));
-			setReport(fetchedReport);
-			setLoading(false);
-		}
-		loadReport();
-	}, [params]);
-
-	if (!params || loading) return <div>Loading...</div>;
-	if (!report) return <div>Report not found</div>;
+	if (!report) return <Error statusCode={404} title="User not found" />;
 
 	return (
-		<div className="p-4">
-			<h1 className="text-2xl font-bold mb-4 flex items-center gap-2">
-				<Eye className="w-6 h-6" /> Report Details
-			</h1>
-			<div className="grid grid-cols-2 gap-4">
-				<div>
-					<p>
-						<b>Sender:</b> {report.sender.firstname} {report.sender.lastname} (
-						{report.sender.publicId})
-					</p>
-					<p>
-						<b>Reported:</b> {report.reported.firstname}{" "}
-						{report.reported.lastname} ({report.reported.publicId})
-					</p>
-					<p>
-						<b>Timestamp:</b> {new Date(report.timestamp).toLocaleString()}
-					</p>
-				</div>
-				<div>
-					<p>
-						<b>Message:</b>
-					</p>
-					<p>{report.text}</p>
-				</div>
+		<div className="grid grid-cols-6 gap-4">
+			<div className="col-span-full">
+				<p className="text-2xl font-semibold text-left flex items-center gap-2">
+					<ExclamationTriangleIcon className="w-5 h-5" />
+					Report #{report.id}
+				</p>
 			</div>
-			<div className="mt-4 flex gap-2">
-				<button
-					className="btn btn-success btn-outline"
-					onClick={async () => {
-						await handleMarkAsResolved(report.id);
-					}}
-				>
-					Erledigen
-				</button>
-				<button
-					className="btn btn-primary btn-outline"
-					onClick={() => window.history.back()}
-				>
-					Zurück
-				</button>
+			<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
+				<ReportSenderInfo report={report} />
+			</div>
+			<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
+				<ReportAdmin report={report} />
 			</div>
 		</div>
 	);