Add Admin Reports page #2

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

@@ -0,0 +1,82 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Eye } from "lucide-react";
+import { fetchReportDetails, handleMarkAsResolved } from "../actions";
+
+export default function ReportDetailsPage({
+	params: paramsPromise,
+}: {
+	params: Promise<{ id: number }>;
+}) {
+	const [params, setParams] = useState<{ id: number } | null>(null);
+	const [report, setReport] = useState<any>(null);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		async function unwrapParams() {
+			const resolvedParams = await paramsPromise;
+			setParams(resolvedParams);
+		}
+		unwrapParams();
+	}, [paramsPromise]);
+
+	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>;
+
+	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>
+			<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>
+		</div>
+	);
+}