added user-overview for setting availability

client/src/app/Overview.tsx

@@ -6,6 +6,7 @@ import { useState } from "react";
 import AddEvent from "../components/Event/AddEvent";
 import zustand from "../Zustand";
 import { Button } from "@nextui-org/button";
+import AssignmentTable from "@/components/Event/AssignmentTable";
 
 export default function EventVolunteer() {
 	const [showAddItemDialogue, setShowAddItemDialogue] = useState(false);
@@ -14,15 +15,10 @@ export default function EventVolunteer() {
 		<div className="relative flex-1 p-4">
 			<h2 className="mb-4 text-center text-4xl">Overview</h2>
 			<div className="flex flex-wrap justify-center gap-4">
-				{zustand.getState().events.map((ee, ii) => (
-					<Event
-						key={ii}
-						date={ee.date}
-						description={ee.description}
-						id={ee.id}
-						tasks={ee.tasks}
-						volunteers={ee.volunteers}
-					/>
+				{zustand.getState().events.map((ee) => (
+					<Event key={ee.id} event={ee}>
+						<AssignmentTable tasks={ee.tasks} />
+					</Event>
 				))}
 			</div>
 

client/src/app/admin/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import AddEvent from "@/components/Event/AddEvent";
-import LocalDate from "@/components/Event/LocalDate";
+import LocalDate from "@/components/LocalDate";
 import zustand, { Availability, EventData, Task, Tasks } from "@/Zustand";
 import { Add, Copy, Edit, TrashCan } from "@carbon/icons-react";
 import { Button, ButtonGroup } from "@nextui-org/button";
@@ -25,6 +25,26 @@ import { Tooltip } from "@nextui-org/tooltip";
 import { useAsyncList } from "@react-stately/data";
 import React, { Key, useState } from "react";
 
+function availability2Tailwind(availability?: Availability) {
+	switch (availability) {
+		case "yes":
+			return "";
+		default:
+			return "italic";
+	}
+}
+
+function availability2Color(availability?: Availability) {
+	switch (availability) {
+		case "yes":
+			return "default";
+		case "maybe":
+			return "warning";
+		default:
+			return "danger";
+	}
+}
+
 export default function AdminPanel() {
 	const tasks = [
 		{ key: "date", label: "Date" },
@@ -70,7 +90,7 @@ export default function AdminPanel() {
 						options={{ dateStyle: "medium", timeStyle: "short" }}
 						className="font-bold"
 					>
-						{event[key].toDate()}
+						{event[key]}
 					</LocalDate>
 				);
 			case "description":
@@ -104,26 +124,6 @@ export default function AdminPanel() {
 					</div>
 				);
 			default:
-				function availability2Tailwind(availability?: Availability) {
-					switch (availability) {
-						case "yes":
-							return "";
-						default:
-							return "italic";
-					}
-				}
-
-				function availability2Color(availability?: Availability) {
-					switch (availability) {
-						case "yes":
-							return "default";
-						case "maybe":
-							return "warning";
-						default:
-							return "danger";
-					}
-				}
-
 				return (
 					<Select
 						variant="underlined"
@@ -230,7 +230,7 @@ export default function AdminPanel() {
 						The event{" "}
 						<span className="font-numbers text-accent-1">
 							<LocalDate options={{ dateStyle: "long", timeStyle: "short" }}>
-								{activeEvent.date.toDate()}
+								{activeEvent.date}
 							</LocalDate>
 						</span>{" "}
 						will be deleted.

client/src/app/me/page.tsx

@@ -1,3 +1,42 @@
-export default function OverviewPersonal() {
-	return <div>foobar</div>;
+import Event from "@/components/Event/Event";
+import zustand, { Availabilities, Availability } from "@/Zustand";
+import { Radio, RadioGroup } from "@nextui-org/radio";
+
+function availability2Color(availability: Availability) {
+	switch (availability) {
+		case "yes":
+			return "success";
+		case "maybe":
+			return "warning";
+		default:
+			return "danger";
+	}
+}
+
+export default function OverviewPersonal() {
+	return (
+		<div>
+			<h2 className="mb-4 text-center text-4xl">Upcoming Events</h2>
+			<div className="flex flex-wrap justify-center gap-4">
+				{zustand.getState().events.map((ev) => (
+					<Event key={ev.id} event={ev}>
+						<RadioGroup className="mt-auto" orientation="horizontal">
+							{Availabilities.map((availability) => (
+								<Radio
+									value={availability}
+									key={availability}
+									color={availability2Color(availability)}
+									classNames={{
+										label: `text-${availability2Color(availability)}`,
+									}}
+								>
+									{availability}
+								</Radio>
+							))}
+						</RadioGroup>
+					</Event>
+				))}
+			</div>
+		</div>
+	);
 }