added Badges to Dashboard, warning for full events

apps/hub/app/(app)/events/_components/modalBtn.tsx

@@ -8,20 +8,23 @@ import {
 import { Event, EventAppointment, Participant, prisma, User } from "@repo/db";
 import { cn } from "../../../../helper/cn";
 import { inscribeToMoodleCourse, upsertParticipant } from "../actions";
-import { Check, Clock10Icon, Cross, EyeIcon } from "lucide-react";
+import {
+	Check,
+	Clock10Icon,
+	Cross,
+	EyeIcon,
+	MessageCircleWarning,
+	TriangleAlert,
+} from "lucide-react";
 import { useForm } from "react-hook-form";
 import {
-	EventAppointmentOptionalDefaults,
-	EventAppointmentSchema,
 	ParticipantOptionalDefaults,
 	ParticipantOptionalDefaultsSchema,
-	ParticipantSchema,
 } from "@repo/db/zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Select } from "../../../_components/ui/Select";
 import toast from "react-hot-toast";
 import { useRouter } from "next/navigation";
-import { JsonArray } from "../../../../../../packages/database/generated/client/runtime/library";
 import { eventCompleted } from "@repo/ui";
 
 interface ModalBtnProps {
@@ -85,6 +88,11 @@ const ModalBtn = ({
 		},
 	});
 	const selectedAppointment = selectedAppointments[0];
+	const selectedDate = dates.find(
+		(date) =>
+			date.id === selectAppointmentForm.watch("eventAppointmentId") ||
+			selectedAppointment?.id,
+	);
 	return (
 		<>
 			<button
@@ -124,7 +132,9 @@ const ModalBtn = ({
 										<Select
 											form={selectAppointmentForm as any}
 											options={dates.map((date) => ({
-												label: new Date(date.appointmentDate).toLocaleString(),
+												label: `${new Date(
+													date.appointmentDate,
+												).toLocaleString()} - (${(date as any)._count.Participants}/${event.maxParticipants})`,
 												value: date.id,
 											}))}
 											name="eventAppointmentId"
@@ -132,6 +142,7 @@ const ModalBtn = ({
 											className="min-w-[200px]"
 										/>
 									)}
+									{}
 									{!dates.length && (
 										<p className="text-center text-info">
 											Keine Termine verfügbar
@@ -145,6 +156,22 @@ const ModalBtn = ({
 									Du hast an dem Presenztermin teilgenommen
 								</p>
 							)}
+							{selectedDate &&
+								event.maxParticipants !== null &&
+								(selectedDate as any)._count.Participants >=
+									event.maxParticipants && (
+									<p
+										role="alert"
+										className="py-4 my-5 flex items-center gap-2 justify-center border alert alert-error alert-outline"
+									>
+										<TriangleAlert
+											className="h-6 w-6 shrink-0 stroke-current"
+											fill="none"
+										/>
+										Dieser Termin ist ausgebucht, wahrscheinlich wirst du nicht
+										teilnehmen können
+									</p>
+								)}
 							{selectedAppointment && !participant?.appointmentCancelled && (
 								<>
 									<div className="flex items-center gap-2 justify-center">
@@ -182,6 +209,7 @@ const ModalBtn = ({
 											absagen
 										</button>
 									</div>
+
 									<p className="mt-3 text-center">
 										Bitte finde dich an diesem Termin in unserem Discord ein.
 									</p>