added Badges to Dashboard, warning for full events

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

@@ -3,11 +3,13 @@ import { DrawingPinFilledIcon, EnterIcon } from "@radix-ui/react-icons";
 import { Event, Participant, EventAppointment, User } from "@repo/db";
 import ModalBtn from "./modalBtn";
 import MDEditor from "@uiw/react-md-editor";
+import { Badge } from "../../../_components/Badge/Badge";
 
 export const KursItem = ({
 	user,
 	event,
 	selectedAppointments,
+	appointments,
 }: {
 	user: User;
 	event: Event & {
@@ -15,6 +17,7 @@ export const KursItem = ({
 		participants: Participant[];
 	};
 	selectedAppointments: EventAppointment[];
+	appointments: EventAppointment[];
 }) => {
 	return (
 		<div className="col-span-full">
@@ -45,7 +48,11 @@ export const KursItem = ({
 								/>
 							</div>
 						</div>
-						<div className="col-span-2">{event.finishedBadges}</div>
+						<div className="col-span-2">
+							{event.finishedBadges.map((b) => {
+								return <Badge name={b} key={b} />;
+							})}
+						</div>
 					</div>
 					<div className="card-actions flex justify-between items-center mt-5">
 						<div>
@@ -55,10 +62,13 @@ export const KursItem = ({
 							</p>
 							{!!event.requiredBadges.length && (
 								<div className="flex ml-6">
-									<b className="text-gray-600 text-left">Abzeichen:</b>
+									<b className="text-gray-600 text-left mr-2">Abzeichen:</b>
 									<div className="flex gap-2">
 										{event.requiredBadges.map((badge) => (
-											<div className="badge badge-secondary badge-outline">
+											<div
+												className="badge badge-secondary badge-outline"
+												key={badge}
+											>
 												{badge}
 											</div>
 										))}
@@ -71,7 +81,7 @@ export const KursItem = ({
 							user={user}
 							event={event}
 							title={event.name}
-							dates={event.appointments}
+							dates={appointments}
 							participant={event.participants[0]}
 							modalId={`${event.name}_modal.${event.id}`}
 						/>

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>