upgrade pnpm, Table auf Event seite

apps/hub/app/(app)/admin/event/[id]/participant/[participantId]/page.tsx

@@ -11,6 +11,7 @@ export default async function Page({
 	params: Promise<{ id: string; participantId: string }>;
 }) {
 	const { id: eventId, participantId } = await params;
+	console.log(eventId, participantId);
 
 	const event = await prisma.event.findUnique({
 		where: { id: parseInt(eventId) },
@@ -20,11 +21,15 @@ export default async function Page({
 		where: { id: parseInt(participantId) },
 	});
 
+	if (!participant) {
+		return <Error title="Teilnehmer nicht gefunden" statusCode={404} />;
+	}
+
 	const user = await prisma.user.findUnique({
 		where: { id: participant?.userId },
 	});
 
-	if (!event) return <div>Event nicht gefunden</div>;
+	if (!event) return <Error title="Event nicht gefunden" statusCode={404} />;
 
 	if (!participant || !user) {
 		return <Error title="Teilnehmer nicht gefunden" statusCode={404} />;

apps/hub/app/(app)/admin/event/_components/Form.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { BADGES, Event, EVENT_TYPE, PERMISSION } from "@repo/db";
+import { BADGES, Event, EVENT_TYPE, Participant, PERMISSION, Prisma } from "@repo/db";
 import { EventOptionalDefaults, EventOptionalDefaultsSchema } from "@repo/db/zod";
-import { Bot, FileText } from "lucide-react";
+import { Bot, FileText, UserIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import "react-datepicker/dist/react-datepicker.css";
 import { useForm } from "react-hook-form";
@@ -13,6 +13,10 @@ import { Select } from "../../../../_components/ui/Select";
 import { Switch } from "../../../../_components/ui/Switch";
 import { deleteEvent, upsertEvent } from "../action";
 import toast from "react-hot-toast";
+import { PaginatedTable } from "_components/PaginatedTable";
+import Link from "next/link";
+import { ColumnDef } from "@tanstack/react-table";
+import { User } from "next-auth";
 
 export const Form = ({ event }: { event?: Event }) => {
 	const form = useForm<EventOptionalDefaults>({
@@ -21,7 +25,6 @@ export const Form = ({ event }: { event?: Event }) => {
 			? {
 					...event,
 					discordRoleId: event.discordRoleId ?? undefined,
-					maxParticipants: event.maxParticipants ?? undefined,
 					finisherMoodleCourseId: event.finisherMoodleCourseId ?? undefined,
 				}
 			: undefined,
@@ -103,19 +106,115 @@ export const Form = ({ event }: { event?: Event }) => {
 							label="Discord Rolle für eingeschriebene Teilnehmer"
 							className="input-sm"
 						/>
-						<Input
-							form={form}
-							label="Maximale Teilnehmer (Nur für live Events)"
-							className="input-sm"
-							{...form.register("maxParticipants", {
-								valueAsNumber: true,
-							})}
-						/>
 						<div className="divider w-full" />
 
 						<Switch form={form} name="hidden" label="Event verstecken" />
 					</div>
 				</div>
+				<div className="card bg-base-200 col-span-6 shadow-xl">
+					<div className="card-body">
+						{
+							<PaginatedTable
+								leftOfSearch={
+									<h2 className="card-title">
+										<UserIcon className="h-5 w-5" /> Teilnehmer
+									</h2>
+								}
+								prismaModel={"participant"}
+								showSearch
+								getFilter={(searchTerm) =>
+									({
+										AND: [{ eventId: event?.id }],
+										OR: [
+											{
+												User: {
+													OR: [
+														{ firstname: { contains: searchTerm, mode: "insensitive" } },
+														{ lastname: { contains: searchTerm, mode: "insensitive" } },
+														{ publicId: { contains: searchTerm, mode: "insensitive" } },
+													],
+												},
+											},
+										],
+									}) as Prisma.ParticipantWhereInput
+								}
+								include={{
+									User: true,
+								}}
+								supressQuery={!event}
+								columns={
+									[
+										{
+											header: "Vorname",
+											accessorKey: "User.firstname",
+											cell: ({ row }) => {
+												return (
+													<Link
+														className="hover:underline"
+														href={`/admin/user/${row.original.User.id}`}
+													>
+														{row.original.User.firstname}
+													</Link>
+												);
+											},
+										},
+										{
+											header: "Nachname",
+											accessorKey: "User.lastname",
+											cell: ({ row }) => {
+												return (
+													<Link
+														className="hover:underline"
+														href={`/admin/user/${row.original.User.id}`}
+													>
+														{row.original.User.lastname}
+													</Link>
+												);
+											},
+										},
+										{
+											header: "VAR-Nummer",
+											accessorKey: "User.publicId",
+											cell: ({ row }) => {
+												return (
+													<Link
+														className="hover:underline"
+														href={`/admin/user/${row.original.User.id}`}
+													>
+														{row.original.User.publicId}
+													</Link>
+												);
+											},
+										},
+										{
+											header: "Moodle Kurs abgeschlossen",
+											accessorKey: "finisherMoodleCurseCompleted",
+										},
+										{
+											header: "Aktionen",
+											cell: ({ row }) => {
+												return (
+													<Link
+														href={`/admin/event/${event?.id}/participant/${row.original.id}`}
+														className="flex gap-2"
+													>
+														<button
+															onSubmit={() => false}
+															type="button"
+															className="btn btn-sm btn-outline"
+														>
+															Ansehen
+														</button>
+													</Link>
+												);
+											},
+										},
+									] as ColumnDef<Participant & { User: User }>[]
+								}
+							/>
+						}
+					</div>
+				</div>
 				<div className="card bg-base-200 col-span-6 shadow-xl">
 					<div className="card-body">
 						<div className="flex w-full gap-4">