Finalized Event modal

apps/hub/app/(app)/_components/FeaturedEvents.tsx

@@ -1,6 +1,6 @@
 import { getServerSession } from "../../api/auth/[...nextauth]/auth";
 import { prisma } from "@repo/db";
-import { EventCard } from "../events/_components/item";
+import { EventCard } from "../events/_components/EventCard";
 import { RocketIcon } from "lucide-react";
 import { eventCompleted } from "@repo/shared-components";
 

apps/hub/app/(app)/_components/FirstPath.tsx

@@ -6,7 +6,7 @@ import { useSession } from "next-auth/react";
 import { useRef, useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { getEvents } from "../../../helper/events";
-import { EventCard } from "(app)/events/_components/item";
+import { EventCard } from "(app)/events/_components/EventCard";
 
 const PathsOptions = ({
 	selected,

apps/hub/app/(app)/_components/StatsToggle.tsx

@@ -9,7 +9,7 @@ export const StatsToggle = () => {
 	const session = useSession();
 	const router = useRouter();
 	const searchParams = useSearchParams();
-
+	const user = session.data?.user;
 	useEffect(() => {
 		const statsPage = searchParams.get("stats") || "pilot";
 		if (statsPage === "dispo") {
@@ -30,11 +30,7 @@ export const StatsToggle = () => {
 	return (
 		<header className="flex justify-between items-center pb-4">
 			<h1 className="text-2xl font-bold">
-				Hallo,{" "}
-				{session.status === "authenticated"
-					? session.data?.user.firstname + " <" + session.data?.user.publicId + ">"
-					: "<username>"}
-				{"!"}
+				Hallo, {user?.firstname} <span className="text-gray-500">{" #" + user?.publicId}</span>!
 			</h1>
 			<div>
 				<div className="tooltip tooltip-left" data-tip="Disponent / Pilot">

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

@@ -35,7 +35,7 @@ export const AppointmentModal = ({
 
 	return (
 		<dialog ref={ref} className="modal ">
-			<div className="modal-box min-w-[900px]">
+			<div className="modal-box min-w-[900px] min-h-[500px]">
 				<form method="dialog">
 					{/* if there is a button in form, it will close the modal */}
 					<button

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

@@ -155,27 +155,6 @@ export const Form = ({ event }: { event?: Event }) => {
 				{form.watch("hasPresenceEvents") ? (
 					<div className="card bg-base-200 shadow-xl col-span-6">
 						<div className="card-body">
-							<div className="flex justify-between">
-								<h2 className="card-title">
-									<Calendar className="w-5 h-5" /> Termine
-								</h2>
-								{event && (
-									<button
-										className="btn btn-primary btn-outline"
-										onClick={() => {
-											appointmentModal.current?.showModal();
-											appointmentForm.reset({
-												id: undefined,
-												eventId: event.id,
-												presenterId: session?.user?.id,
-											});
-										}}
-									>
-										Hinzufügen
-									</button>
-								)}
-							</div>
-
 							<PaginatedTable
 								ref={appointmentsTableRef}
 								prismaModel={"eventAppointment"}
@@ -186,6 +165,28 @@ export const Form = ({ event }: { event?: Event }) => {
 									Presenter: true,
 									Participants: true,
 								}}
+								leftOfSearch={
+									<h2 className="card-title">
+										<Calendar className="w-5 h-5" /> Termine
+									</h2>
+								}
+								rightOfSearch={
+									event && (
+										<button
+											className="btn btn-primary btn-outline"
+											onClick={() => {
+												appointmentModal.current?.showModal();
+												appointmentForm.reset({
+													id: undefined,
+													eventId: event.id,
+													presenterId: session?.user?.id,
+												});
+											}}
+										>
+											Hinzufügen
+										</button>
+									)
+								}
 								columns={
 									[
 										{

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",
 				},