added filter to don't show past events by default

client/src/app/assignments/page.tsx

@@ -3,7 +3,7 @@
 import AddEvent from "@/components/Event/AddEvent";
 import EditEvent from "@/components/Event/EditEvent";
 import LocalDate from "@/components/LocalDate";
-import { apiCall, getAvailabilities, getTasks } from "@/lib";
+import { apiCall, getAvailabilities, getTasks, QueryParams } from "@/lib";
 import { EventData } from "@/Zustand";
 import {
 	Add,
@@ -16,6 +16,7 @@ import {
 import {
 	Button,
 	ButtonGroup,
+	DateValue,
 	Modal,
 	ModalBody,
 	ModalContent,
@@ -34,6 +35,9 @@ import { useAsyncList } from "@react-stately/data";
 import React, { Key, useEffect, useState } from "react";
 import { Availability } from "../admin/(availabilities)/AvailabilityEditor";
 import VolunteerSelector from "./VolunteerSelector";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import DateEventsSince from "@/components/DateEventsSince";
+import FilterPopover from "@/components/FilterPopover";
 
 export type EventWithAvailabilities = EventData & {
 	availabilities: Record<string, string[]>;
@@ -41,6 +45,9 @@ export type EventWithAvailabilities = EventData & {
 
 export default function AdminPanel() {
 	const [showAddEvent, setShowAddEvent] = useState(false);
+	const [sinceDate, setSinceDate] = useState<DateValue | null>(
+		today(getLocalTimeZone()),
+	);
 	const [editEvent, setEditEvent] = useState<EventData | undefined>();
 	const [deleteEvent, setDeleteEvent] = useState<EventData | undefined>();
 	const [availabilityMap, setAvailabilityMap] = useState<
@@ -78,9 +85,18 @@ export default function AdminPanel() {
 	// get the individual events
 	const events = useAsyncList<EventWithAvailabilities>({
 		async load() {
+			let params: QueryParams | undefined = undefined;
+
+			if (sinceDate) {
+				params = {
+					since: sinceDate,
+				};
+			}
+
 			const result = await apiCall<EventWithAvailabilities[]>(
 				"GET",
 				"events/availabilities",
+				params,
 			);
 
 			if (result.ok) {
@@ -125,6 +141,9 @@ export default function AdminPanel() {
 		})();
 	}, []);
 
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(() => void events.reload(), [sinceDate]);
+
 	function getAvailabilityById(availabilityID: number): Availability {
 		return availabilityMap[availabilityID];
 	}
@@ -218,14 +237,19 @@ export default function AdminPanel() {
 	}
 
 	const topContent = (
-		<div>
-			<Button
-				color="primary"
-				startContent={<Add size={32} />}
-				onPress={() => setShowAddEvent(true)}
-			>
-				Add
-			</Button>
+		<div className="flex items-center">
+			<div>
+				<Button
+					color="primary"
+					startContent={<Add size={32} />}
+					onPress={() => setShowAddEvent(true)}
+				>
+					Add
+				</Button>
+			</div>
+			<FilterPopover className="ml-auto">
+				<DateEventsSince sinceDate={sinceDate} setSinceDate={setSinceDate} />
+			</FilterPopover>
 		</div>
 	);
 

client/src/app/availabilities/page.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import LocalDate from "@/components/LocalDate";
+import { apiCall, getAvailabilities, getUsers, QueryParams } from "@/lib";
+import zustand, { BaseEvent } from "@/Zustand";
+import { NotAvailable } from "@carbon/icons-react";
+import {
+	DateValue,
+	Table,
+	TableBody,
+	TableCell,
+	TableColumn,
+	TableColumnProps,
+	TableHeader,
+	TableRow,
+} from "@heroui/react";
+import { useAsyncList } from "@react-stately/data";
+import React, { Key, useEffect, useState } from "react";
+import { Availability } from "../admin/(availabilities)/AvailabilityEditor";
+import { EventWithAvailabilities } from "../assignments/page";
+import AvailabilityChip from "@/components/AvailabilityChip";
+import AvailabilitySelector from "@/components/Event/AvailabilitySelector";
+import DateEventsSince from "@/components/DateEventsSince";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import FilterPopover from "@/components/FilterPopover";
+
+type EventWithUserAvailabilityMap = BaseEvent & {
+	availabilities: Record<string, string>;
+};
+
+export default function Availabilities() {
+	const [sinceDate, setSinceDate] = useState<DateValue | null>(
+		today(getLocalTimeZone()),
+	);
+	const [availabilityMap, setAvailabilityMap] = useState<
+		Record<number, Availability>
+	>({});
+	const user = zustand((state) => state.user);
+
+	// get the users and craft them into the headers
+	const headers = useAsyncList<{
+		key: string | number;
+		label: string;
+		align?: string;
+	}>({
+		async load() {
+			const users = await getUsers();
+
+			const headers = {
+				items: [
+					{ key: "date", label: "Date" },
+					{ key: "description", label: "Description" },
+					{ key: user?.userName ?? "me", label: "Me", align: "center" },
+					...users
+						.filter((eventUser) => eventUser.userName !== user?.userName)
+						.map((user) => ({
+							label: user.userName,
+							key: user.userName ?? -1,
+							align: "center",
+						})),
+				],
+			};
+
+			return headers;
+		},
+	});
+
+	// get the individual events
+	const events = useAsyncList<EventWithUserAvailabilityMap>({
+		async load() {
+			let params: QueryParams | undefined = undefined;
+
+			if (sinceDate) {
+				params = {
+					since: sinceDate,
+				};
+			}
+
+			const result = await apiCall<EventWithAvailabilities[]>(
+				"GET",
+				"events/availabilities",
+				params,
+			);
+
+			if (result.ok) {
+				const data = await result.json();
+
+				// convert the availabilities to a map <Users, Availability>
+				const eventAvailabilities: EventWithUserAvailabilityMap[] = data.map(
+					(event) => {
+						const availabilities: Record<string, string> = {};
+						Object.entries(event.availabilities).forEach(
+							([availability, users]) => {
+								users.forEach((u) => (availabilities[u] = availability));
+							},
+						);
+
+						return {
+							...event,
+							availabilities,
+						};
+					},
+				);
+
+				return {
+					items: eventAvailabilities,
+				};
+			} else {
+				return { items: [] };
+			}
+		},
+		async sort({ items, sortDescriptor }) {
+			return {
+				items: items.sort((a, b) => {
+					let cmp = 0;
+
+					// if it is the date-column, convert to a date
+					if (sortDescriptor.column === "date") {
+						const first = a[sortDescriptor.column];
+						const second = b[sortDescriptor.column];
+
+						cmp = first < second ? -1 : 1;
+					}
+
+					if (sortDescriptor.direction === "descending") {
+						cmp *= -1;
+					}
+
+					return cmp;
+				}),
+			};
+		},
+	});
+
+	// retrieve the availabilites and store them in a map
+	useEffect(() => {
+		(async () => {
+			setAvailabilityMap(
+				Object.fromEntries(
+					(await getAvailabilities()).map((a) => [a.availabilityID, a]),
+				),
+			);
+		})();
+	}, []);
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(() => void events.reload(), [sinceDate]);
+
+	function getAvailabilityById(availabilityID: number): Availability {
+		return availabilityMap[availabilityID];
+	}
+
+	function getKeyValue(
+		event: EventWithUserAvailabilityMap,
+		key: Key,
+	): React.ReactNode {
+		switch (key) {
+			case "date":
+				return (
+					<LocalDate
+						options={{ dateStyle: "medium", timeStyle: "short" }}
+						className="font-bold"
+					>
+						{event[key]}
+					</LocalDate>
+				);
+			case "description":
+				return (
+					<div className="max-w-32 whitespace-pre-wrap italic">
+						{event[key]}
+					</div>
+				);
+
+			case user?.userName ?? "me":
+				const availability = parseInt(event.availabilities[key as string]);
+
+				return (
+					<AvailabilitySelector
+						event={{
+							...event,
+							availability: availability,
+						}}
+						startSelection={availability}
+						noHeader
+					/>
+				);
+
+			default:
+				if (event.availabilities[key as string] === undefined) {
+					return <NotAvailable />;
+				} else {
+					return (
+						<AvailabilityChip>
+							{getAvailabilityById(
+								parseInt(event.availabilities[key as string]),
+							)}
+						</AvailabilityChip>
+					);
+				}
+		}
+	}
+
+	const topContent = (
+		<div className="flex">
+			<div className="ml-auto">
+				<FilterPopover>
+					<DateEventsSince sinceDate={sinceDate} setSinceDate={setSinceDate} />
+				</FilterPopover>
+			</div>
+		</div>
+	);
+
+	return (
+		<div className="relative flex flex-col items-center">
+			<h2 className="mb-4 text-center text-4xl">Availabilities</h2>
+
+			<Table
+				aria-label="Table with all the events"
+				shadow="none"
+				topContent={topContent}
+				topContentPlacement="outside"
+				isHeaderSticky
+				isStriped
+				sortDescriptor={events.sortDescriptor}
+				classNames={{
+					wrapper: "bg-accent-4",
+					tr: "even:bg-accent-5 ",
+					th: "font-subheadline text-xl text-accent-1 bg-transparent ",
+					thead: "[&>tr]:first:!shadow-border",
+				}}
+				onSortChange={events.sort}
+				className="w-fit max-w-full"
+			>
+				<TableHeader columns={headers.items}>
+					{(task) => (
+						<TableColumn
+							allowsSorting={task.key === "date"}
+							key={task.key}
+							align={task.align as TableColumnProps<string>["align"]}
+						>
+							{task.label}
+						</TableColumn>
+					)}
+				</TableHeader>
+				<TableBody items={events.items} emptyContent={"No events scheduled"}>
+					{(event) => (
+						<TableRow key={event.eventID}>
+							{(columnKey) => (
+								<TableCell>{getKeyValue(event, columnKey)}</TableCell>
+							)}
+						</TableRow>
+					)}
+				</TableBody>
+			</Table>
+		</div>
+	);
+}

client/src/app/events/page.tsx

@@ -2,23 +2,25 @@
 import AddEvent from "@/components/Event/AddEvent";
 import AssigmentTable from "@/components/Event/AssignmentTable";
 import Event from "@/components/Event/Event";
-import { apiCall, getAvailabilities, getUserTasks } from "@/lib";
+import { apiCall, getAvailabilities, getUserTasks, QueryParams } from "@/lib";
 import zustand, { EventDataWithAvailabilityAvailabilities } from "@/Zustand";
-import { Add, Filter } from "@carbon/icons-react";
+import { Add } from "@carbon/icons-react";
 import {
 	Button,
 	Checkbox,
 	CheckboxGroup,
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
+	DateValue,
+	Divider,
 	Tab,
 	Tabs,
 } from "@heroui/react";
 import { useAsyncList } from "@react-stately/data";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import AvailabilitySelector from "@/components/Event/AvailabilitySelector";
 import AvailabilityTable from "@/components/Event/AvailabilityTable";
+import DateEventsSince from "@/components/DateEventsSince";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import FilterPopover from "@/components/FilterPopover";
 
 const filterValues: { text: string; value: string }[] = [
 	{
@@ -39,14 +41,26 @@ export default function Events() {
 	const [showAddItemDialogue, setShowAddItemDialogue] = useState(false);
 	const [filter, setFilter] = useState<string | number>("all");
 	const [contentFilter, setContentFilter] = useState(["description", "tasks"]);
+	const [sinceDate, setSinceDate] = useState<DateValue | null>(
+		today(getLocalTimeZone()),
+	);
 
 	const user = zustand((state) => state.user);
 
 	const events = useAsyncList({
 		async load() {
+			let params: QueryParams | undefined = undefined;
+
+			if (sinceDate) {
+				params = {
+					since: sinceDate,
+				};
+			}
+
 			const result = await apiCall<EventDataWithAvailabilityAvailabilities[]>(
 				"GET",
 				"events/user/assignmentAvailability",
+				params,
 			);
 
 			if (result.ok) {
@@ -79,6 +93,9 @@ export default function Events() {
 		},
 	});
 
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(() => void events.reload(), [sinceDate]);
+
 	function showEvent(event: EventDataWithAvailabilityAvailabilities): boolean {
 		switch (filter) {
 			case "assigned":
@@ -115,27 +132,17 @@ export default function Events() {
 					<Tab key="pending" title="Pending" />
 					<Tab key="assigned" title="Assigned" />
 				</Tabs>
-				<div className="absolute right-0">
-					<Popover placement="bottom-end">
-						<PopoverTrigger>
-							<Button isIconOnly>
-								<Filter className="cursor-pointer" />
-							</Button>
-						</PopoverTrigger>
-						<PopoverContent>
-							<CheckboxGroup
-								value={contentFilter}
-								onValueChange={setContentFilter}
-							>
-								{filterValues.map((f) => (
-									<Checkbox key={f.value} value={f.value}>
-										{f.text}
-									</Checkbox>
-								))}
-							</CheckboxGroup>
-						</PopoverContent>
-					</Popover>
-				</div>
+				<FilterPopover className="absolute right-0">
+					<CheckboxGroup value={contentFilter} onValueChange={setContentFilter}>
+						{filterValues.map((f) => (
+							<Checkbox key={f.value} value={f.value}>
+								{f.text}
+							</Checkbox>
+						))}
+					</CheckboxGroup>
+					<Divider />
+					<DateEventsSince sinceDate={sinceDate} setSinceDate={setSinceDate} />
+				</FilterPopover>
 			</div>
 
 			<div className="mx-auto flex flex-wrap gap-4">

client/src/app/layout.tsx

@@ -31,6 +31,10 @@ export default function RootLayout({
 			text: "Events",
 			href: "/events",
 		},
+		{
+			text: "Availabilities",
+			href: "/availabilities",
+		},
 		{
 			text: "Assignments",
 			href: "/assignments",

client/src/components/DateEventsSince.tsx

@@ -0,0 +1,21 @@
+import { DatePicker, DateValue } from "@heroui/react";
+
+export default function DateEventsSince({
+	sinceDate,
+	setSinceDate,
+	className,
+}: {
+	sinceDate: DateValue | null;
+	setSinceDate: (value: DateValue | null) => void;
+	className?: string;
+}) {
+	return (
+		<DatePicker
+			className={className}
+			value={sinceDate}
+			hideTimeZone
+			onChange={setSinceDate}
+			label="Show events since"
+		/>
+	);
+}

client/src/components/Event/AvailabilitySelector.tsx

@@ -9,11 +9,13 @@ export default function AvailabilitySelector({
 	event,
 	className,
 	startSelection,
+	noHeader,
 	onRefresh,
 }: {
 	event: EventAvailability;
 	className?: string;
 	startSelection?: number;
+	noHeader?: boolean;
 	onRefresh?: () => void;
 }) {
 	const [value, setValue] = useState<Selection>(new Set([]));
@@ -55,8 +57,9 @@ export default function AvailabilitySelector({
 	return (
 		<div className={classNames(className, "w-full")}>
 			<Select
+				aria-label="Select availability"
 				items={availabilities.items}
-				label={<h4>Availability</h4>}
+				label={!noHeader ? <h4>Availability</h4> : null}
 				variant="bordered"
 				classNames={{ label: "text-base", trigger: "py-4" }}
 				labelPlacement="outside"

client/src/components/FilterPopover.tsx

@@ -0,0 +1,22 @@
+import { Filter } from "@carbon/icons-react";
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
+import React from "react";
+
+export default function FilterPopover({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	return (
+		<Popover placement="bottom-end">
+			<PopoverTrigger className={className}>
+				<Button isIconOnly>
+					<Filter className="cursor-pointer" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="gap-2 p-2">{children}</PopoverContent>
+		</Popover>
+	);
+}

client/src/lib.ts

@@ -4,7 +4,7 @@ import { Availability } from "./app/admin/(availabilities)/AvailabilityEditor";
 
 export type AllString<T> = { [K in keyof T]: string };
 
-type QueryParams = Record<string, string | { toString(): string }>;
+export type QueryParams = Record<string, string | { toString(): string }>;
 
 type Body = object | string | number | boolean;