Add Admin Reports page #2

apps/hub/app/(app)/admin/report/page.tsx

@@ -0,0 +1,122 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Check, Eye, X } from "lucide-react";
+import Link from "next/link";
+import { getReports, handleMarkAsResolved } from "./actions";
+
+export default function ReportPage() {
+	const [reports, setReports] = useState<
+		{
+			id: number;
+			timestamp: string;
+			erledigt: boolean;
+			sender: {
+				id: string;
+				firstname: string;
+				lastname: string;
+				publicId: string;
+			};
+			reported: {
+				id: string;
+				firstname: string;
+				lastname: string;
+				publicId: string;
+			};
+		}[]
+	>([]);
+
+	useEffect(() => {
+		const fetchReports = async () => {
+			const reps = await getReports();
+			const transformedReports = reps.map((report) => ({
+				id: report.id,
+				timestamp: report.timestamp.toISOString(),
+				erledigt: report.erledigt,
+				sender: {
+					id: report.sender.id,
+					firstname: report.sender.firstname,
+					lastname: report.sender.lastname,
+					publicId: report.sender.publicId,
+				},
+				reported: {
+					id: report.reported.id,
+					firstname: report.reported.firstname,
+					lastname: report.reported.lastname,
+					publicId: report.reported.publicId,
+				},
+			}));
+			setReports(transformedReports);
+		};
+		fetchReports();
+	}, []);
+
+	return (
+		<>
+			<div className="flex items-center gap-2 mb-4">
+				<Eye className="w-5 h-5" />{" "}
+				<span className="text-lg font-bold">Reports</span>
+			</div>
+			<div className="overflow-x-auto">
+				<table className="table table-zebra w-full">
+					<thead>
+						<tr>
+							<th>Erledigt</th>
+							<th>Sender</th>
+							<th>Reported</th>
+							<th>Time</th>
+							<th>ID</th>
+							<th>Actions</th>
+						</tr>
+					</thead>
+					<tbody>
+						{reports.map((report) => (
+							<tr key={report.id}>
+								<td className="text-center">
+									{report.erledigt ? (
+										<Check className="text-green-500 w-5 h-5" />
+									) : (
+										<X className="text-red-500 w-5 h-5" />
+									)}
+								</td>
+								<td>{`${report.sender.firstname} ${report.sender.lastname} (${report.sender.publicId})`}</td>
+								<td>{`${report.reported.firstname} ${report.reported.lastname} (${report.reported.publicId})`}</td>
+								<td>{new Date(report.timestamp).toLocaleString()}</td>
+								<td>{report.id}</td>
+								<td>
+									<div className="flex gap-2">
+										<Link href={`/admin/report/${report.id}`}>
+											<button className="btn btn-sm btn-outline btn-info flex items-center gap-2">
+												<Eye className="w-4 h-4" /> Anzeigen
+											</button>
+										</Link>
+										{!report.erledigt && (
+											<button
+												className="btn btn-sm btn-outline btn-success flex items-center gap-2"
+												onClick={async () => {
+													const result = await handleMarkAsResolved(report.id);
+													if (result.success) {
+														setReports((prevReports) =>
+															prevReports.map((r) =>
+																r.id === report.id
+																	? { ...r, erledigt: true }
+																	: r,
+															),
+														);
+													} else {
+														alert("Error: " + result.error);
+													}
+												}}
+											>
+												<Check className="w-4 h-4" /> Erledigen
+											</button>
+										)}
+									</div>
+								</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+		</>
+	);
+}