dev

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

@@ -1,6 +1,7 @@
-import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { ReasonForm } from "(app)/admin/penalty/_components/form";
 import { prisma } from "@repo/db";
 import { Error } from "_components/Error";
+import { Shield } from "lucide-react";
 
 export default async function Page({ params }: { params: Promise<{ id: string }> }) {
 	const { id } = await params;
@@ -15,16 +16,62 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
 		},
 	});
 
-	if (!penalty) return <Error statusCode={404} title="User not found" />;
+	const userReports = await prisma.report.findMany({
+		where: {
+			reportedUserId: penalty?.User.id,
+		},
+		include: {
+			Reported: true,
+		},
+	});
+
+	if (!penalty) return <Error statusCode={404} title="Penalty not found" />;
 
 	return (
 		<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" />
+					<Shield className="w-5 h-5" />
 					Strafe #{penalty.id}
 				</p>
 			</div>
+			<div className="col-span-6 md:col-span-3">
+				<div className="card bg-base-200 shadow-md p-4">
+					<p className="text-lg font-semibold mb-2">Details</p>
+					<hr className="mb-4" />
+					<p>
+						<span className="font-semibold">Benutzer:</span> {penalty.User.firstname}{" "}
+						{penalty.User.lastname} ({penalty.User.publicId})
+					</p>
+					<p>
+						<span className="font-semibold">Erstellt von:</span> {penalty.CreatedUser.firstname}{" "}
+						{penalty.CreatedUser.lastname} ({penalty.CreatedUser.publicId})
+					</p>
+					<p>
+						<span className="font-semibold">Typ:</span> {penalty.type}
+					</p>
+
+					<p>
+						<span className="font-semibold">Erstellt am:</span>{" "}
+						{new Date(penalty.timestamp).toLocaleString("de-DE", {
+							dateStyle: "medium",
+							timeStyle: "short",
+						})}
+					</p>
+					{penalty.until && (
+						<p>
+							<span className="font-semibold">Gültig bis:</span>{" "}
+							{new Date(penalty.until).toLocaleString("de-DE", {
+								dateStyle: "medium",
+								timeStyle: "short",
+							})}
+						</p>
+					)}
+				</div>
+			</div>
+			<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
+				<ReasonForm penalty={penalty} userReports={userReports} />
+			</div>
 		</div>
 	);
 }