Added the ability to enable/disable a user as well as deleting an exam

src/pages/(admin)/Lists/ExamList.tsx

@@ -1,15 +1,17 @@
+import {PERMISSIONS} from "@/constants/userPermissions";
 import useExams from "@/hooks/useExams";
 import useUsers from "@/hooks/useUsers";
 import {Module} from "@/interfaces";
 import {Exam} from "@/interfaces/exam";
-import {Type} from "@/interfaces/user";
+import {Type, User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
 import {useRouter} from "next/router";
-import {BsCheck, BsUpload} from "react-icons/bs";
+import {BsCheck, BsTrash, BsUpload} from "react-icons/bs";
 import {toast} from "react-toastify";
 
 const CLASSES: {[key in Module]: string} = {
@@ -21,8 +23,8 @@ const CLASSES: {[key in Module]: string} = {
 
 const columnHelper = createColumnHelper<Exam>();
 
-export default function ExamList() {
-	const {exams} = useExams();
+export default function ExamList({user}: {user: User}) {
+	const {exams, reload} = useExams();
 
 	const setExams = useExamStore((state) => state.setExams);
 	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
@@ -45,7 +47,29 @@ export default function ExamList() {
 		router.push("/exercises");
 	};
 
-	const getTotalExercises = (exam: Exam, module: Module) => {
+	const deleteExam = async (exam: Exam) => {
+		if (!confirm(`Are you sure you want to delete this ${capitalize(exam.module)} exam?`)) return;
+
+		axios
+			.delete(`/api/exam/${exam.module}/${exam.id}`)
+			.then(() => toast.success(`Deleted the "${exam.id}" exam`))
+			.catch((reason) => {
+				if (reason.response.status === 404) {
+					toast.error("Exam not found!");
+					return;
+				}
+
+				if (reason.response.status === 403) {
+					toast.error("You do not have permission to delete this exam!");
+					return;
+				}
+
+				toast.error("Something went wrong, please try again later.");
+			})
+			.finally(reload);
+	};
+
+	const getTotalExercises = (exam: Exam) => {
 		if (exam.module === "reading") {
 			return exam.parts.flatMap((x) => x.exercises).length;
 		}
@@ -62,7 +86,7 @@ export default function ExamList() {
 			header: "Module",
 			cell: (info) => <span className={CLASSES[info.getValue()]}>{capitalize(info.getValue())}</span>,
 		}),
-		columnHelper.accessor((x) => getTotalExercises(x, x.module), {
+		columnHelper.accessor((x) => getTotalExercises(x), {
 			header: "Exercises",
 			cell: (info) => info.getValue(),
 		}),
@@ -75,11 +99,18 @@ export default function ExamList() {
 			id: "actions",
 			cell: ({row}: {row: {original: Exam}}) => {
 				return (
-					<div
-						data-tip="Load exam"
-						className="cursor-pointer tooltip"
-						onClick={async () => await loadExam(row.original.module, row.original.id)}>
-						<BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+					<div className="flex gap-4">
+						<div
+							data-tip="Load exam"
+							className="cursor-pointer tooltip"
+							onClick={async () => await loadExam(row.original.module, row.original.id)}>
+							<BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						</div>
+						{PERMISSIONS.examManagement.delete.includes(user.type) && (
+							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteExam(row.original)}>
+								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+							</div>
+						)}
 					</div>
 				);
 			},

src/pages/(admin)/Lists/UserList.tsx

@@ -8,7 +8,7 @@ import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
 import {Fragment} from "react";
-import {BsCheck, BsPerson, BsTrash} from "react-icons/bs";
+import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsStop, BsTrash} from "react-icons/bs";
 import {toast} from "react-toastify";
 
 const columnHelper = createColumnHelper<User>();
@@ -56,6 +56,27 @@ export default function UserList({user}: {user: User}) {
 			});
 	};
 
+	const toggleDisableAccount = (user: User) => {
+		if (
+			!confirm(
+				`Are you sure you want to ${user.isDisabled ? "enable" : "disable"} ${
+					user.name
+				}'s account? This change is usually related to their payment state.`,
+			)
+		)
+			return;
+
+		axios
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, isDisabled: !user.isDisabled})
+			.then(() => {
+				toast.success(`User ${user.isDisabled ? "enabled" : "disabled"} successfully!`);
+				reload();
+			})
+			.catch(() => {
+				toast.error("Something went wrong!", {toastId: "update-error"});
+			});
+	};
+
 	const defaultColumns = [
 		columnHelper.accessor("name", {
 			header: "Name",
@@ -141,16 +162,28 @@ export default function UserList({user}: {user: User}) {
 								</Transition>
 							</Popover>
 						)}
-						{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
-							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
-								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-							</div>
-						)}
 						{!row.original.isVerified && PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
 							<div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
 								<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 							</div>
 						)}
+						{PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
+							<div
+								data-tip={row.original.isDisabled ? "Enable User" : "Disable User"}
+								className="cursor-pointer tooltip"
+								onClick={() => toggleDisableAccount(row.original)}>
+								{row.original.isDisabled ? (
+									<BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+								) : (
+									<BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+								)}
+							</div>
+						)}
+						{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
+							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
+								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+							</div>
+						)}
 					</div>
 				);
 			},

src/pages/(admin)/Lists/index.tsx

@@ -48,7 +48,7 @@ export default function Lists({user}: {user: User}) {
 					<UserList user={user} />
 				</Tab.Panel>
 				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
-					<ExamList />
+					<ExamList user={user} />
 				</Tab.Panel>
 				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
 					<GroupList user={user} />