improved admin and events tables

client/src/app/admin/(availabilities)/Availabilities.tsx

@@ -91,7 +91,7 @@ export default function Availabilities() {
 	}
 
 	const topContent = (
-		<>
+		<div>
 			<Button
 				color="primary"
 				startContent={<AddLarge />}
@@ -99,7 +99,7 @@ export default function Availabilities() {
 			>
 				Add Availability
 			</Button>
-		</>
+		</div>
 	);
 
 	return (
@@ -112,6 +112,13 @@ export default function Availabilities() {
 				topContent={topContent}
 				sortDescriptor={availabilities.sortDescriptor}
 				onSortChange={availabilities.sort}
+				topContentPlacement="outside"
+				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",
+				}}
 			>
 				<TableHeader>
 					<TableColumn allowsSorting key="userName">
@@ -182,7 +189,7 @@ export default function Availabilities() {
 				onOpenChange={(isOpen) =>
 					!isOpen ? setDeleteAvailability(undefined) : null
 				}
-				header="Delete Availability"
+				itemName="Availability"
 				onDelete={() => sendDeleteAvailability(deleteAvailability?.id)}
 			>
 				{!!deleteAvailability ? (

client/src/app/admin/(availabilities)/AvailabilityEditor.tsx

@@ -58,6 +58,9 @@ export default function AvailabilityEditor(props: {
 			isOpen={props.isOpen}
 			onOpenChange={props.onOpenChange}
 			shadow={"none" as "sm"}
+			classNames={{
+				base: "bg-accent-5",
+			}}
 		>
 			<Form
 				validationBehavior="native"
@@ -65,7 +68,6 @@ export default function AvailabilityEditor(props: {
 					e.preventDefault();
 					submit(e);
 				}}
-				className="w-fit border-2"
 			>
 				<ModalContent>
 					<ModalHeader>
@@ -81,6 +83,7 @@ export default function AvailabilityEditor(props: {
 							variant="bordered"
 						/>
 						<ColorSelector
+							isRequired
 							value={color}
 							onValueChange={setColor}
 							name="color"

client/src/app/admin/(tasks)/TaskEditor.tsx

@@ -47,7 +47,11 @@ export default function TaskEditor(props: {
 		<Modal
 			isOpen={props.isOpen}
 			onOpenChange={props.onOpenChange}
-			shadow={"none" as "sm"}
+			shadow={"none"}
+			backdrop="blur"
+			classNames={{
+				base: "bg-accent-5",
+			}}
 		>
 			<Form
 				validationBehavior="native"
@@ -55,7 +59,6 @@ export default function TaskEditor(props: {
 					e.preventDefault();
 					submit(e);
 				}}
-				className="w-fit border-2"
 			>
 				<ModalContent>
 					<ModalHeader>

client/src/app/admin/(tasks)/Tasks.tsx

@@ -88,7 +88,7 @@ export default function Tasks() {
 	}
 
 	const topContent = (
-		<>
+		<div>
 			<Button
 				color="primary"
 				startContent={<AddLarge />}
@@ -96,7 +96,7 @@ export default function Tasks() {
 			>
 				Add Task
 			</Button>
-		</>
+		</div>
 	);
 
 	return (
@@ -109,6 +109,13 @@ export default function Tasks() {
 				topContent={topContent}
 				sortDescriptor={tasks.sortDescriptor}
 				onSortChange={tasks.sort}
+				topContentPlacement="outside"
+				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",
+				}}
 			>
 				<TableHeader>
 					<TableColumn allowsSorting key="userName">
@@ -173,7 +180,7 @@ export default function Tasks() {
 			<DeleteConfirmation
 				isOpen={!!deleteTask}
 				onOpenChange={(isOpen) => (!isOpen ? setDeleteTask(undefined) : null)}
-				header="Delete Task"
+				itemName="Task"
 				onDelete={() => sendDeleteTask(deleteTask?.id)}
 			>
 				{!!deleteTask ? (

client/src/app/admin/(users)/AddUser.tsx

@@ -1,79 +1,35 @@
-import { AddLarge, Copy } from "@carbon/icons-react";
-import {
-	Button,
-	Checkbox,
-	Form,
-	Input,
-	Modal,
-	ModalBody,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-} from "@heroui/react";
-import { FormEvent, useState } from "react";
+import { apiCall } from "@/lib";
+import { AddLarge } from "@carbon/icons-react";
+import { Button } from "@heroui/react";
+import UserEditor from "./UserEditor";
+import { UserAddModify } from "@/Zustand";
 
 export default function AddUser(props: {
-	isOpen: boolean;
+	isOpen?: boolean;
 	onOpenChange?: (isOpen: boolean) => void;
-	onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+	onSuccess?: () => void;
 }) {
-	const [password, setPassword] = useState("");
+	// send an addUser request to the backend then reload the table
+	async function sendAddUser(user: UserAddModify) {
+		const result = await apiCall("POST", "users", undefined, user);
+
+		if (result.ok) {
+			props.onSuccess?.();
+		}
+	}
 
 	return (
-		<Modal
+		<UserEditor
+			isPasswordRequired
 			isOpen={props.isOpen}
 			onOpenChange={props.onOpenChange}
-			shadow={"none" as "sm"}
-			backdrop="blur"
-		>
-			<ModalContent>
-				<ModalHeader>
-					<h1 className="text-2xl">Add User</h1>
-				</ModalHeader>
-
-				<Form
-					validationBehavior="native"
-					onSubmit={(e) => {
-						e.preventDefault();
-						props.onSubmit?.(e);
-					}}
-				>
-					<ModalBody className="w-full">
-						<Input
-							isRequired
-							type="user"
-							label="Name"
-							name="userName"
-							variant="bordered"
-						/>
-						<Input
-							isRequired
-							label="Password"
-							name="password"
-							variant="bordered"
-							endContent={
-								<Button
-									isIconOnly
-									variant="light"
-									onPress={() => navigator.clipboard.writeText(password)}
-								>
-									<Copy />
-								</Button>
-							}
-							value={password}
-							onValueChange={setPassword}
-						/>
-						<Checkbox value="admin" name="admin">
-							Admin
-						</Checkbox>
-					</ModalBody>
-					<ModalFooter>
-						<Button type="submit" color="primary" startContent={<AddLarge />}>
-							Add User
-						</Button>
-					</ModalFooter>
-				</Form>
-			</ModalContent>
-		</Modal>
+			header="Add User"
+			footer={
+				<Button type="submit" color="primary" startContent={<AddLarge />}>
+					Add User
+				</Button>
+			}
+			onSubmit={sendAddUser}
+		/>
 	);
 }

client/src/app/admin/(users)/EditUser.tsx

@@ -1,137 +1,54 @@
-import {
-	apiCall,
-	classNames,
-	vaidatePassword as validatePassword,
-} from "@/lib";
-import zustand, { User } from "@/Zustand";
-import {
-	Button,
-	Checkbox,
-	Form,
-	Input,
-	Modal,
-	ModalBody,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-} from "@heroui/react";
-import { FormEvent, useEffect, useState } from "react";
+import { apiCall } from "@/lib";
+import zustand, { User, UserAddModify } from "@/Zustand";
+import { Button } from "@heroui/react";
+import UserEditor from "./UserEditor";
+import { Renew } from "@carbon/icons-react";
 
 export default function EditUser(props: {
-	isOpen: boolean;
-	user?: User;
-	onOpenChange: (isOpen: boolean) => void;
-	onSuccess: () => void;
+	value?: User;
+	isOpen?: boolean;
+	onOpenChange?: (isOpen: boolean) => void;
+	onSuccess?: () => void;
 }) {
-	const [name, setName] = useState(props.user?.userName);
-	const [admin, setAdmin] = useState(props.user?.admin);
-	const [password, setPassword] = useState("");
-
-	const pwErrors = validatePassword(password);
-
-	// set the states on value changes
-	useEffect(() => {
-		if (props.user !== undefined) {
-			setName(props.user.userName);
-			setAdmin(props.user.admin);
-
-			// reset the password
-			setPassword("");
-		}
-	}, [props.user]);
-
 	// update the user in the backend
-	async function updateUser(e: FormEvent<HTMLFormElement>) {
-		const formData = Object.fromEntries(new FormData(e.currentTarget));
-
-		const data = {
-			...formData,
-			userName: props.user?.userName,
-			admin: formData.admin !== undefined,
-		};
-
-		// if we modify ourself, set admin to true since it isn't included in the form data because the checkbox is disabled
-		data.admin ||= props.user?.userName === zustand.getState().user?.userName;
-
-		const result = await apiCall("PATCH", "users", undefined, data);
+	async function updateUser(user: UserAddModify) {
+		const result = await apiCall("PATCH", "users", undefined, {
+			...user,
+			userName: props.value?.userName,
+			newName: user.userName,
+		});
 
 		if (result.ok) {
 			// if we updated ourself
-			if (props.user?.userName === zustand.getState().user?.userName) {
+			if (props.value?.userName === zustand.getState().user?.userName) {
 				zustand.setState({ user: null });
 			}
 
-			props.onSuccess();
+			props.onSuccess?.();
+			props.onOpenChange?.(false);
 		}
 	}
 
 	return (
-		<Modal isOpen={props.isOpen} onOpenChange={props.onOpenChange}>
-			<Form
-				validationBehavior="native"
-				onSubmit={(e) => {
-					e.preventDefault();
-					updateUser(e);
-				}}
-			>
-				{props.user !== undefined ? (
-					<ModalContent>
-						<ModalHeader>
-							<h1 className="text-2xl">
-								Edit User{" "}
-								<span className="font-numbers font-normal italic">
-									{props.user.userName}
-								</span>
-							</h1>
-						</ModalHeader>
-						<ModalBody className="w-full">
-							<Input
-								label="Name"
-								color={name !== props.user.userName ? "warning" : "default"}
-								name="newName"
-								value={name}
-								onValueChange={setName}
-							/>
-							<Input
-								label="Password"
-								color={password.length > 0 ? "warning" : "default"}
-								name="password"
-								value={password}
-								onValueChange={setPassword}
-								isInvalid={password.length > 0 && pwErrors.length > 0}
-								errorMessage={
-									<ul>
-										{pwErrors.map((e, ii) => (
-											<li key={ii}>{e}</li>
-										))}
-									</ul>
-								}
-							/>
-							<Checkbox
-								name="admin"
-								color={admin !== props.user.admin ? "warning" : "primary"}
-								isDisabled={
-									props.user.userName === zustand.getState().user?.userName
-								}
-								isSelected={admin}
-								onValueChange={setAdmin}
-								classNames={{
-									label: classNames({
-										"text-warning": admin !== props.user.admin,
-									}),
-								}}
-							>
-								Admin
-							</Checkbox>
-						</ModalBody>
-						<ModalFooter>
-							<Button type="submit" color="primary">
-								Update
-							</Button>
-						</ModalFooter>
-					</ModalContent>
-				) : null}
-			</Form>
-		</Modal>
+		<UserEditor
+			key={props.value?.userName}
+			header={
+				<>
+					Edit User{" "}
+					<span className="font-numbers font-normal italic">
+						&quot;{props.value?.userName}&quot;
+					</span>
+				</>
+			}
+			footer={
+				<Button type="submit" color="primary" startContent={<Renew />}>
+					Update
+				</Button>
+			}
+			value={props.value}
+			isOpen={props.isOpen}
+			onOpenChange={props.onOpenChange}
+			onSubmit={updateUser}
+		/>
 	);
 }

client/src/app/admin/(users)/UserEditor.tsx

@@ -0,0 +1,127 @@
+import { classNames, validatePassword as validatePassword } from "@/lib";
+import zustand, { User, UserAddModify } from "@/Zustand";
+import {
+	Checkbox,
+	Form,
+	Input,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+} from "@heroui/react";
+import React, { FormEvent, useState } from "react";
+
+export default function UserEditor(props: {
+	header: React.ReactNode;
+	footer: React.ReactNode;
+	value?: User;
+	isPasswordRequired?: boolean;
+	isOpen?: boolean;
+	onOpenChange?: (isOpen: boolean) => void;
+	onSubmit: (user: UserAddModify) => void;
+}) {
+	const [name, setName] = useState(props.value?.userName ?? "");
+	const [admin, setAdmin] = useState(props.value?.admin ?? false);
+	const [password, setPassword] = useState("");
+
+	const pwErrors = validatePassword(password);
+
+	// update the user in the backend
+	async function submit(e: FormEvent<HTMLFormElement>) {
+		const formData = Object.fromEntries(new FormData(e.currentTarget)) as {
+			userName: string;
+			password: string;
+			admin: string;
+		};
+
+		const data = {
+			...formData,
+			admin: formData.admin !== undefined,
+		};
+
+		// if we modify ourself, set admin to true since it isn't included in the form data because the checkbox is disabled
+		data.admin ||= props.value?.userName === zustand.getState().user?.userName;
+
+		props.onSubmit(data);
+	}
+
+	return (
+		<Modal
+			isOpen={props.isOpen}
+			onOpenChange={props.onOpenChange}
+			shadow={"none"}
+			backdrop="blur"
+			classNames={{
+				base: "bg-accent-5",
+			}}
+		>
+			<Form
+				validationBehavior="native"
+				onSubmit={(e) => {
+					e.preventDefault();
+					submit(e);
+				}}
+			>
+				<ModalContent>
+					<ModalHeader>
+						<h1 className="text-2xl">{props.header}</h1>
+					</ModalHeader>
+					<ModalBody className="w-full">
+						<Input
+							isRequired
+							label="Name"
+							color={
+								!!props.value && name !== props.value?.userName
+									? "warning"
+									: "default"
+							}
+							name="userName"
+							variant="bordered"
+							value={name}
+							onValueChange={setName}
+						/>
+						<Input
+							isRequired={props.isPasswordRequired}
+							label="Password"
+							color={password.length > 0 ? "warning" : "default"}
+							name="password"
+							variant="bordered"
+							value={password}
+							onValueChange={setPassword}
+							isInvalid={password.length > 0 && pwErrors.length > 0}
+							errorMessage={
+								<ul>
+									{pwErrors.map((e, ii) => (
+										<li key={ii}>{e}</li>
+									))}
+								</ul>
+							}
+						/>
+						<Checkbox
+							name="admin"
+							color={
+								!!props.value && admin !== props.value?.admin
+									? "warning"
+									: "primary"
+							}
+							isDisabled={
+								props.value?.userName === zustand.getState().user?.userName
+							}
+							isSelected={admin}
+							onValueChange={setAdmin}
+							classNames={{
+								label: classNames({
+									"text-warning": !!props.value && admin !== props.value?.admin,
+								}),
+							}}
+						>
+							Admin
+						</Checkbox>
+					</ModalBody>
+					<ModalFooter>{props.footer}</ModalFooter>
+				</ModalContent>
+			</Form>
+		</Modal>
+	);
+}

client/src/app/admin/(users)/Users.tsx

@@ -1,7 +1,8 @@
 import { apiCall } from "@/lib";
-import { User } from "@/Zustand";
+import zustand, { User } from "@/Zustand";
 import {
 	Button,
+	ButtonGroup,
 	Checkbox,
 	Table,
 	TableBody,
@@ -12,14 +13,17 @@ import {
 	Tooltip,
 } from "@heroui/react";
 import { useAsyncList } from "@react-stately/data";
-import { FormEvent, useState } from "react";
+import { useState } from "react";
 import AddUser from "./AddUser";
-import { AddLarge, Edit } from "@carbon/icons-react";
+import { AddLarge, Edit, TrashCan } from "@carbon/icons-react";
 import EditUser from "./EditUser";
+import DeleteConfirmation from "@/components/DeleteConfirmation";
 
 export default function Users() {
 	const [showAddUser, setShowAddUser] = useState(false);
 	const [editUser, setEditUser] = useState<User | undefined>();
+	const [deleteUser, setDeleteUser] = useState<User | undefined>();
+	const loggedInUser = zustand((state) => state.user);
 
 	const users = useAsyncList<User>({
 		async load() {
@@ -64,23 +68,22 @@ export default function Users() {
 		},
 	});
 
-	// send an addUser request to the backend then reload the table
-	async function addUser(e: FormEvent<HTMLFormElement>) {
-		const data = Object.fromEntries(new FormData(e.currentTarget));
+	async function sendDeleteUser(userName: User["userName"] | undefined) {
+		if (!!userName) {
+			const result = await apiCall("DELETE", "users", {
+				userName,
+			});
 
-		const result = await apiCall("POST", "users", undefined, {
-			...data,
-			admin: data.admin === "admin",
-		});
-
-		if (result.ok) {
-			users.reload();
+			if (result.ok) {
+				users.reload();
+				setDeleteUser(undefined);
+			}
 		}
 	}
 
 	// content above the user-tabel
 	const topContent = (
-		<>
+		<div>
 			<Button
 				color="primary"
 				startContent={<AddLarge />}
@@ -88,7 +91,7 @@ export default function Users() {
 			>
 				Add User
 			</Button>
-		</>
+		</div>
 	);
 
 	return (
@@ -101,6 +104,13 @@ export default function Users() {
 				topContent={topContent}
 				sortDescriptor={users.sortDescriptor}
 				onSortChange={users.sort}
+				topContentPlacement="outside"
+				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",
+				}}
 			>
 				<TableHeader>
 					<TableColumn allowsSorting key="userName">
@@ -119,16 +129,34 @@ export default function Users() {
 								<Checkbox isSelected={user.admin} />
 							</TableCell>
 							<TableCell>
-								<Button
-									isIconOnly
-									variant="light"
-									size="sm"
-									onPress={() => setEditUser(user)}
-								>
-									<Tooltip content="Edit user">
-										<Edit />
-									</Tooltip>
-								</Button>
+								<ButtonGroup>
+									<Button
+										isIconOnly
+										variant="light"
+										size="sm"
+										onPress={() => setEditUser(user)}
+										isDisabled={
+											user.userName === "admin" &&
+											loggedInUser?.userName !== "admin"
+										}
+									>
+										<Tooltip content="Edit user">
+											<Edit />
+										</Tooltip>
+									</Button>
+									<Button
+										isIconOnly
+										variant="light"
+										size="sm"
+										color="danger"
+										isDisabled={["admin", loggedInUser?.userName].includes(
+											user.userName,
+										)}
+										onPress={() => setDeleteUser(user)}
+									>
+										<TrashCan />
+									</Button>
+								</ButtonGroup>
 							</TableCell>
 						</TableRow>
 					)}
@@ -138,11 +166,14 @@ export default function Users() {
 			<AddUser
 				isOpen={showAddUser}
 				onOpenChange={setShowAddUser}
-				onSubmit={(e) => void addUser(e)}
+				onSuccess={() => {
+					setShowAddUser(false);
+					users.reload();
+				}}
 			/>
 			<EditUser
 				isOpen={editUser !== undefined}
-				user={editUser}
+				value={editUser}
 				onOpenChange={(isOpen) =>
 					!isOpen ? setEditUser(undefined) : undefined
 				}
@@ -151,6 +182,16 @@ export default function Users() {
 					setEditUser(undefined);
 				}}
 			/>
+
+			<DeleteConfirmation
+				isOpen={!!deleteUser}
+				onOpenChange={(isOpen) => (!isOpen ? setDeleteUser(undefined) : null)}
+				onDelete={() => sendDeleteUser(deleteUser?.userName)}
+				itemName="User"
+			>
+				{" "}
+				The user <span>{deleteUser?.userName}</span> will be deleted.
+			</DeleteConfirmation>
 		</div>
 	);
 }