started "real work"

client/src/app/events/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+import AddEvent from "@/components/Event/AddEvent";
+import AssignmentTable from "@/components/Event/AssignmentTable";
+import Event from "@/components/Event/Event";
+import { apiCall } from "@/lib";
+import zustand, { EventData } from "@/Zustand";
+import { Add } from "@carbon/icons-react";
+import { Button } from "@nextui-org/react";
+import { useEffect, useState } from "react";
+
+export default function Events() {
+	const [showAddItemDialogue, setShowAddItemDialogue] = useState(false);
+	const events = zustand((state) => state.events);
+	const admin = zustand((state) => state.user?.admin);
+
+	useEffect(() => {
+		(async () => {
+			console.debug("query");
+
+			const data = await apiCall<EventData[]>("GET", "events/assignments");
+
+			if (data.ok) {
+				zustand.getState().setEvents(await data.json());
+			}
+
+			return {
+				items: [],
+			};
+		})();
+	}, []);
+
+	return (
+		<div className="relative flex-1">
+			<h2 className="mb-4 text-center text-4xl">Upcoming Events</h2>
+			<div className="flex flex-wrap justify-center gap-4">
+				{events.map((ee, ii) => (
+					<Event key={ii} event={ee}>
+						<AssignmentTable tasks={ee.tasks} />
+					</Event>
+				))}
+			</div>
+
+			{admin ? (
+				<>
+					<Button
+						color="primary"
+						isIconOnly
+						radius="full"
+						className="absolute bottom-0 right-0"
+						onPress={() => setShowAddItemDialogue(true)}
+					>
+						<Add size={32} />
+					</Button>
+
+					<AddEvent
+						className="border-2 border-accent-3"
+						isOpen={showAddItemDialogue}
+						onOpenChange={setShowAddItemDialogue}
+					/>
+				</>
+			) : null}
+		</div>
+	);
+}