Finalized Event modal

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

@@ -1,7 +1,7 @@
 "use client";
 import { DrawingPinFilledIcon } from "@radix-ui/react-icons";
 import { Event, Participant, EventAppointment, User } from "@repo/db";
-import ModalBtn from "./modalBtn";
+import ModalBtn from "./Modal";
 import MDEditor from "@uiw/react-md-editor";
 import { Badge } from "@repo/shared-components";
 

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

@@ -4,7 +4,17 @@ import { CheckCircledIcon, EnterIcon, DrawingPinFilledIcon } from "@radix-ui/rea
 import { Event, EventAppointment, Participant, User } from "@repo/db";
 import { cn } from "@repo/shared-components";
 import { inscribeToMoodleCourse, upsertParticipant } from "../actions";
-import { Check, Clock10Icon, ExternalLink, EyeIcon, TriangleAlert } from "lucide-react";
+import {
+	BookCheck,
+	Calendar,
+	Check,
+	CirclePlay,
+	Clock10Icon,
+	ExternalLink,
+	EyeIcon,
+	Info,
+	TriangleAlert,
+} from "lucide-react";
 import { useForm } from "react-hook-form";
 import { ParticipantOptionalDefaults, ParticipantOptionalDefaultsSchema } from "@repo/db/zod";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -15,6 +25,7 @@ import { eventCompleted } from "@repo/shared-components";
 import MDEditor from "@uiw/react-md-editor";
 import { DayPicker } from "react-day-picker";
 import toast from "react-hot-toast";
+import { se } from "date-fns/locale";
 
 interface ModalBtnProps {
 	title: string;
@@ -131,8 +142,11 @@ const ModalBtn = ({
 						<button className="btn btn-sm btn-circle btn-ghost absolute right-3 top-3">✕</button>
 					</form>
 					<h3 className="font-bold text-lg text-left">{title}</h3>
-					<div className="grid grid-cols-6 gap-4 mt-4">
-						<div className="col-span-4">
+					<div className="flex flex-wrap gap-4 mt-4">
+						<div className="flex flex-col gap-2 flex-1 p-3 bg-base-300 min-w-[300px] shadow rounded-lg">
+							<h2 className="flex gap-2 text-lg font-bold">
+								<Info /> Details
+							</h2>
 							<div className="text-left text-balance">
 								<MDEditor.Markdown
 									source={event.description}
@@ -144,102 +158,98 @@ const ModalBtn = ({
 							</div>
 						</div>
 						{event.hasPresenceEvents && (
-							<div className="flex col-span-2 justify-end">
-								{canSelectDate && (
-									<div className="flex flex-col items-center justify-center gap-2">
-										{!!dates.length && (
-											<>
-												<p className="text-center text-info">Melde dich zu einem Termin an</p>
-												<Select
-													form={selectAppointmentForm}
-													options={dates.map((date) => ({
-														label: `${new Date(date.appointmentDate).toLocaleString("de-DE", {
-															year: "numeric",
-															month: "2-digit",
-															day: "2-digit",
-															hour: "2-digit",
-															minute: "2-digit",
-														})} - (${(date as any).Participants.length}/${event.maxParticipants})`,
-														value: date.id,
-													}))}
-													name="eventAppointmentId"
-													label={""}
-													placeholder="Wähle einen Termin"
-													className="min-w-[250px]"
-												/>
-											</>
-										)}
-										{!dates.length && (
-											<p className="text-center text-error">Aktuell sind keine Termine verfügbar</p>
-										)}
-									</div>
-								)}
-								{!canSelectDate && participant?.attended && (
-									<p className="py-4 flex items-center gap-2 justify-center">
-										<CheckCircledIcon className="text-success" />
-										Du hast an dem Presenztermin teilgenommen
-									</p>
-								)}
-								{!!selectedDate &&
-									!!event.maxParticipants &&
-									!!ownPlaceInParticipantList &&
-									!!(ownPlaceInParticipantList > 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.
-											(Listenplatz: {ownPlaceInParticipantList} , max. {event.maxParticipants})
-										</p>
+							<div className="flex flex-col gap-2 flex-1 p-3 bg-base-300 min-w-[300px] shadow rounded-lg">
+								<h2 className="flex gap-2 text-lg font-bold">
+									<Calendar /> Termine
+								</h2>
+								<div className="flex flex-1 flex-col justify-center items-center">
+									{!!dates.length && !selectedDate && (
+										<>
+											<p className="text-center text-info">Melde dich zu einem Termin an</p>
+											<Select
+												form={selectAppointmentForm}
+												options={dates.map((date) => ({
+													label: `${new Date(date.appointmentDate).toLocaleString("de-DE", {
+														year: "numeric",
+														month: "2-digit",
+														day: "2-digit",
+														hour: "2-digit",
+														minute: "2-digit",
+													})} - (${(date as any).Participants.length}/${event.maxParticipants})`,
+													value: date.id,
+												}))}
+												name="eventAppointmentId"
+												label={""}
+												placeholder="Wähle einen Termin"
+												className="min-w-[250px]"
+											/>
+										</>
 									)}
-								{selectedAppointment && !participant?.appointmentCancelled && (
-									<div className="flex flex-col items-center justify-center gap-2">
-										<span>Dein ausgewählter Termin (Deutsche Zeit)</span>
-										<div>
-											<button
-												popoverTarget="rdp-popover"
-												className="input input-border  min-w-[250px]"
-												style={{ anchorName: "--rdp" } as React.CSSProperties}
-											>
-												{selectedAppointment.appointmentDate
-													? new Date(selectedAppointment.appointmentDate).toLocaleString("de-DE", {
-															year: "numeric",
-															month: "2-digit",
-															day: "2-digit",
-															hour: "2-digit",
-															minute: "2-digit",
-														})
-													: "Keinen Termin ausgewählt"}
-											</button>
-											<div
-												popover="auto"
-												id="rdp-popover"
-												className="dropdown"
-												style={{ positionAnchor: "--rdp" } as React.CSSProperties}
-											>
-												<DayPicker
-													className="react-day-picker"
-													mode="single"
-													selected={selectedAppointment.appointmentDate}
-													disabled
-												/>
+									{selectedAppointment && !participant?.appointmentCancelled && (
+										<div className="flex flex-col items-center justify-center gap-2">
+											<span>Dein ausgewählter Termin (Deutsche Zeit)</span>
+											<div>
+												<button
+													className="input input-border min-w-[250px] pointer-events-none"
+													style={{ anchorName: "--rdp" } as React.CSSProperties}
+												>
+													{new Date(selectedAppointment.appointmentDate).toLocaleString("de-DE", {
+														year: "numeric",
+														month: "2-digit",
+														day: "2-digit",
+														hour: "2-digit",
+														minute: "2-digit",
+													})}
+												</button>
 											</div>
+											{participant?.attended ? (
+												<p className="py-4 flex items-center gap-2 justify-center">
+													<CheckCircledIcon className="text-success" />
+													Du hast an dem Presenztermin teilgenommen
+												</p>
+											) : (
+												<p className="py-4 flex items-center gap-2 justify-center">
+													Bitte erscheine ~5 minuten vor dem Termin im Discord
+												</p>
+											)}
 										</div>
-										<span>Bitte erscheine pünktlich im Discord.</span>
-									</div>
-								)}
+									)}
+
+									{!dates.length && (
+										<p className="text-center text-error">Aktuell sind keine Termine verfügbar</p>
+									)}
+
+									{!!selectedDate &&
+										!!event.maxParticipants &&
+										!!ownPlaceInParticipantList &&
+										!!(ownPlaceInParticipantList > 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. (Listenplatz: {ownPlaceInParticipantList} , max.{" "}
+												{event.maxParticipants})
+											</p>
+										)}
+								</div>
 							</div>
 						)}
 						{event.finisherMoodleCourseId && (
-							<div className="flex col-span-2 justify-end">
-								<MoodleCourseIndicator
-									participant={participant}
-									user={user}
-									moodleCourseId={event.finisherMoodleCourseId}
-									completed={participant?.finisherMoodleCurseCompleted || false}
-									event={event}
-								/>
+							<div className="flex flex-col gap-2 flex-1 p-3 bg-base-300 min-w-[300px] shadow rounded-lg">
+								<h2 className="flex gap-2 text-lg font-bold">
+									<BookCheck /> Moodle-Kurs
+								</h2>
+								<div className="flex flex-col items-center justify-center h-full">
+									<MoodleCourseIndicator
+										participant={participant}
+										user={user}
+										moodleCourseId={event.finisherMoodleCourseId}
+										completed={participant?.finisherMoodleCurseCompleted || false}
+										event={event}
+									/>
+								</div>
 							</div>
 						)}
 					</div>
@@ -278,34 +288,36 @@ const ModalBtn = ({
 									<EnterIcon /> Anmelden
 								</button>
 							)}
-							{selectedAppointment && !participant?.appointmentCancelled && (
-								<button
-									onClick={async () => {
-										await upsertParticipant({
-											eventId: event.id,
-											userId: participant!.userId,
-											appointmentCancelled: true,
-											statusLog: [
-												...(participant?.statusLog as any),
-												{
-													data: {
-														appointmentId: selectedAppointment.id,
-														appointmentDate: selectedAppointment.appointmentDate,
+							{selectedAppointment &&
+								!participant?.appointmentCancelled &&
+								!participant?.attended && (
+									<button
+										onClick={async () => {
+											await upsertParticipant({
+												eventId: event.id,
+												userId: participant!.userId,
+												appointmentCancelled: true,
+												statusLog: [
+													...(participant?.statusLog as any),
+													{
+														data: {
+															appointmentId: selectedAppointment.id,
+															appointmentDate: selectedAppointment.appointmentDate,
+														},
+														user: `${user?.firstname} ${user?.lastname} - ${user?.publicId}`,
+														event: "Termin abgesagt",
+														timestamp: new Date(),
 													},
-													user: `${user?.firstname} ${user?.lastname} - ${user?.publicId}`,
-													event: "Termin abgesagt",
-													timestamp: new Date(),
-												},
-											],
-										});
-										toast.success("Termin abgesagt");
-										router.refresh();
-									}}
-									className="btn btn-error btn-outline btn-wide"
-								>
-									Termin Absagen
-								</button>
-							)}
+												],
+											});
+											toast.success("Termin abgesagt");
+											router.refresh();
+										}}
+										className="btn btn-error btn-outline btn-wide"
+									>
+										Termin Absagen
+									</button>
+								)}
 						</div>
 					</div>
 				</div>
@@ -349,7 +361,9 @@ const MoodleCourseIndicator = ({
 		);
 	return (
 		<div className="flex flex-col items-center justify-center gap-2">
-			<p>Moodle-Kurs Benötigt</p>
+			<p className="text-sm flex items-center gap-2">
+				<CirclePlay className="text-warning" /> Moodle-Kurs bereit
+			</p>
 			<button
 				className="btn btn-sm btn-outline btn-info ml-2"
 				onClick={async () => {
@@ -372,6 +386,10 @@ const MoodleCourseIndicator = ({
 				<ExternalLink size={16} />
 				Zum Moodle Kurs
 			</button>
+			<p className="text-xs text-gray-400">
+				Wenn du nach dem Anmelden den moodle Kurs nicht siehst, warte ein paar Sekunden und lade die
+				Seite neu.
+			</p>
 		</div>
 	);
 };

apps/hub/app/(app)/events/page.tsx

@@ -1,6 +1,6 @@
 import { prisma } from "@repo/db";
 import { getServerSession } from "../../api/auth/[...nextauth]/auth";
-import { EventCard } from "./_components/item";
+import { EventCard } from "./_components/EventCard";
 import { RocketIcon } from "@radix-ui/react-icons";
 
 const page = async () => {
@@ -38,6 +38,9 @@ const page = async () => {
 					id: true,
 					userId: true,
 				},
+				where: {
+					appointmentCancelled: false,
+				},
 				orderBy: {
 					enscriptionDate: "asc",
 				},