added event helpers to ui libary, added Badge component, reordered Dashboard Components, splitted Event Admin page

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

@@ -0,0 +1,28 @@
+import { Badge } from "@repo/ui";
+
+import { Award } from "lucide-react";
+import { getServerSession } from "../../api/auth/[...nextauth]/auth";
+
+export const Badges = async () => {
+	const session = await getServerSession();
+	if (!session) return null;
+
+	return (
+		<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
+			<div className="card-body">
+				<h2 className="card-title justify-between">
+					<span className="card-title">
+						<Award className="w-4 h-4" /> Verdiente Abzeichen
+					</span>
+				</h2>
+				{session.user.badges.map((badge) => {
+					return (
+						<div className="badge badge-primary badge-outline">
+							<Badge name={badge} />
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+};

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

@@ -1,6 +1,8 @@
 import { getServerSession } from "../../api/auth/[...nextauth]/auth";
 import { PrismaClient } from "@repo/db";
 import { KursItem } from "../events/_components/item";
+import { RocketIcon } from "lucide-react";
+import { eventCompleted } from "@repo/ui";
 
 export default async () => {
 	const prisma = new PrismaClient();
@@ -39,18 +41,37 @@ export default async () => {
 		},
 	});
 
+	const filteredEvents = events.filter((event) => {
+		console.log;
+		if (eventCompleted(event, event.participants[0])) return false;
+		if (
+			event.type === "OBLIGATED_COURSE" &&
+			!eventCompleted(event, event.participants[0])
+		)
+			return true;
+		return false;
+	});
+
+	if (!filteredEvents.length) return null;
 	return (
-		<div className="grid grid-cols-6 gap-4">
-			{events.map((event) => {
-				return (
-					<KursItem
-						selectedAppointments={userAppointments}
-						user={user}
-						event={event}
-						key={event.id}
-					/>
-				);
-			})}
+		<div>
+			<div className="col-span-full">
+				<p className="text-xl font-semibold text-left flex items-center gap-2 mb-2 mt-5">
+					<RocketIcon className="w-4 h-4" /> Laufende Events & Kurse
+				</p>
+			</div>
+			<div className="grid grid-cols-6 gap-4">
+				{filteredEvents.map((event) => {
+					return (
+						<KursItem
+							selectedAppointments={userAppointments}
+							user={user}
+							event={event}
+							key={event.id}
+						/>
+					);
+				})}
+			</div>
 		</div>
 	);
 };