added reports page

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

@@ -1,122 +1,71 @@
 "use client";
-import { useEffect, useState } from "react";
 import { Check, Eye, X } from "lucide-react";
 import Link from "next/link";
-import { getReports, handleMarkAsResolved } from "./actions";
+import { PaginatedTable } from "_components/PaginatedTable";
+import { Report, User } from "@repo/db";
+import { ColumnDef } from "@tanstack/react-table";
 
 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 ? (
+		<PaginatedTable
+			prismaModel="report"
+			include={{
+				Sender: true,
+				Reported: true,
+			}}
+			columns={
+				[
+					{
+						accessorKey: "reviewed",
+						header: "Erledigt",
+
+						cell: ({ row }) => {
+							return (
+								<div className="text-center">
+									{row.getValue("reviewed") ? (
 										<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>
-		</>
+								</div>
+							);
+						},
+					},
+					{
+						accessorKey: "Sender",
+						header: "Sender",
+						cell: ({ row }) => {
+							const user = row.getValue("Sender") as User;
+							return `${user.firstname} ${user.lastname} (${user.publicId})`;
+						},
+					},
+					{
+						accessorKey: "Reported",
+						header: "Reported",
+						cell: ({ row }) => {
+							const user = row.getValue("Reported") as User;
+							return `${user.firstname} ${user.lastname} (${user.publicId})`;
+						},
+					},
+					{
+						accessorKey: "timestamp",
+						header: "Time",
+						cell: ({ row }) =>
+							new Date(row.getValue("timestamp")).toLocaleString(),
+					},
+					{
+						accessorKey: "actions",
+						header: "Actions",
+						cell: ({ row }) => (
+							<Link href={`/admin/report/${row.original.id}`}>
+								<button className="btn btn-sm btn-outline btn-info flex items-center gap-2">
+									<Eye className="w-4 h-4" /> Anzeigen
+								</button>
+							</Link>
+						),
+					},
+				] as ColumnDef<Report>[]
+			}
+		/>
 	);
 }