- Created a package list for student packages;

- Updated the group creation wizard to work as a modal;

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

@@ -16,6 +16,7 @@ import {toast} from "react-toastify";
 import Select from "react-select";
 import {uuidv4} from "@firebase/util";
 import {useFilePicker} from "use-file-picker";
+import Modal from "@/components/Modal";
 
 const columnHelper = createColumnHelper<Group>();
 
@@ -23,10 +24,10 @@ interface CreateDialogProps {
 	user: User;
 	users: User[];
 	group?: Group;
-	onCreate: (group: Group) => void;
+	onClose: () => void;
 }
 
-const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
+const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 	const [name, setName] = useState<string | undefined>(group?.name || undefined);
 	const [admin, setAdmin] = useState<string>(group?.admin || user.id);
 	const [participants, setParticipants] = useState<string[]>(group?.participants || []);
@@ -66,6 +67,24 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
 		}
 	}, [filesContent, user.type, users]);
 
+	const submit = () => {
+		if (name !== group?.name && (name === "Students" || name === "Teachers")) {
+			toast.error("That group name is reserved and cannot be used, please enter another one.");
+			return;
+		}
+
+		(group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", {name, admin, participants})
+			.then(() => {
+				toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
+				return true;
+			})
+			.catch(() => {
+				toast.error("Something went wrong, please try again later!");
+				return false;
+			})
+			.finally(onClose);
+	};
+
 	return (
 		<div className="flex flex-col gap-12 mt-4 w-full px-4 py-2">
 			<div className="flex flex-col gap-8">
@@ -106,18 +125,14 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
 					</div>
 				</div>
 			</div>
-			<Button
+			<div className="flex w-full justify-end items-center gap-8 mt-8">
-				className="w-full max-w-[200px] self-end"
+				<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
-				disabled={!name}
+					Cancel
-				onClick={() => {
-					if (name !== group?.name && (name === "Students" || name === "Teachers")) {
-						toast.error("That group name is reserved and cannot be used, please enter another one.");
-						return;
-					}
-					onCreate({name: name!, admin, participants, id: group?.id || uuidv4()});
-				}}>
-				{!group ? "Create" : "Update"}
 				</Button>
+				<Button className="w-full max-w-[200px]" onClick={submit} disabled={!name}>
+					Submit
+				</Button>
+			</div>
 		</div>
 	);
 };
@@ -125,56 +140,19 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
 const filterTypes = ["corporate", "teacher"];
 
 export default function GroupList({user}: {user: User}) {
-	const [editingID, setEditingID] = useState<string>();
+	const [isCreating, setIsCreating] = useState(false);
-	const [showDisclosure, setShowDisclosure] = useState(false);
+	const [editingGroup, setEditingGroup] = useState<Group>();
 	const [filterByUser, setFilterByUser] = useState(false);
 
 	const {users} = useUsers();
 	const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined);
 
-	useEffect(() => {
-		if (editingID) setShowDisclosure(true);
-	}, [editingID]);
-
-	useEffect(() => {
-		if (showDisclosure) document.getElementById("disclosure")?.scrollTo();
-		if (!showDisclosure) setEditingID(undefined);
-	}, [showDisclosure]);
-
 	useEffect(() => {
 		if (user && (user.type === "corporate" || user.type === "teacher")) {
 			setFilterByUser(true);
 		}
 	}, [user]);
 
-	const createGroup = (group: Group) => {
-		return axios
-			.post<{ok: boolean}>("/api/groups", group)
-			.then(() => {
-				toast.success(`Group "${group.name}" created successfully`);
-				return true;
-			})
-			.catch(() => {
-				toast.error("Something went wrong, please try again later!");
-				return false;
-			})
-			.finally(reload);
-	};
-
-	const updateGroup = (group: Group) => {
-		return axios
-			.patch<{ok: boolean}>(`/api/groups/${group.id}`, group)
-			.then(() => {
-				toast.success(`Group "${group.name}" created successfully`);
-				return true;
-			})
-			.catch(() => {
-				toast.error("Something went wrong, please try again later!");
-				return false;
-			})
-			.finally(reload);
-	};
-
 	const deleteGroup = (group: Group) => {
 		if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
 
@@ -216,10 +194,10 @@ export default function GroupList({user}: {user: User}) {
 			cell: ({row}: {row: {original: Group}}) => {
 				return (
 					<>
-						{(user?.type === "developer" || user?.type === "admin" || user.id === row.original.admin) && (
+						{user && (user.type === "developer" || user.type === "admin" || user.id === row.original.admin) && (
 							<div className="flex gap-2">
-								{editingID !== row.original.id && (
+								{!row.original.disableEditing && (
-									<div data-tip="Edit" className="cursor-pointer tooltip" onClick={() => setEditingID(row.original.id)}>
+									<div data-tip="Edit" className="cursor-pointer tooltip" onClick={() => setEditingGroup(row.original)}>
 										<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 									</div>
 								)}
@@ -242,8 +220,32 @@ export default function GroupList({user}: {user: User}) {
 		getCoreRowModel: getCoreRowModel(),
 	});
 
+	const closeModal = () => {
+		setIsCreating(false);
+		setEditingGroup(undefined);
+		reload();
+	};
+
 	return (
-		<>
+		<div className="w-full h-full rounded-xl">
+			<Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
+				<CreatePanel
+					group={editingGroup}
+					user={user}
+					onClose={closeModal}
+					users={
+						user?.type === "corporate" || user?.type === "teacher"
+							? users.filter(
+									(u) =>
+										groups
+											.filter((g) => g.admin === user.id)
+											.flatMap((g) => g.participants)
+											.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
+							  )
+							: users
+					}
+				/>
+			</Modal>
 			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 				<thead>
 					{table.getHeaderGroups().map((headerGroup) => (
@@ -268,54 +270,12 @@ export default function GroupList({user}: {user: User}) {
 					))}
 				</tbody>
 			</table>
-			<>
-				<div
-					className={clsx(
-						"w-full px-4 py-2 bg-mti-purple-ultralight/40 flex gap-2 items-center justify-center rounded-lg",
-						"transition duration-300 ease-in-out",
-						"hover:bg-mti-purple-ultralight cursor-pointer",
-					)}
-					onClick={() => setShowDisclosure((prev) => !prev)}>
-					{!showDisclosure ? <BsPlus className="w-6 h-6" /> : <BsDash className="w-6 h-6" />}
 
-					<span>{!showDisclosure ? "Create group" : "Cancel"}</span>
+			<button
+				onClick={() => setIsCreating(true)}
+				className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white">
+				New Group
+			</button>
 		</div>
-				<Transition
-					show={showDisclosure}
-					enter="transition duration-100 ease-out"
-					enterFrom="transform scale-95 opacity-0"
-					enterTo="transform scale-100 opacity-100"
-					leave="transition duration-75 ease-out"
-					leaveFrom="transform scale-100 opacity-100"
-					leaveTo="transform scale-95 opacity-0">
-					<div id="#disclosure">
-						<CreatePanel
-							group={editingID ? groups.find((x) => x.id === editingID) : undefined}
-							user={user}
-							users={
-								user?.type === "corporate" || user?.type === "teacher"
-									? users.filter(
-											(u) =>
-												groups
-													.filter((g) => g.admin === user.id)
-													.flatMap((g) => g.participants)
-													.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
-									  )
-									: users
-							}
-							onCreate={(group) => {
-								(!editingID ? createGroup : updateGroup)(group).then((result) => {
-									if (result) {
-										setShowDisclosure(false);
-										setEditingID(undefined);
-										reload();
-									}
-								});
-							}}
-						/>
-					</div>
-				</Transition>
-			</>
-		</>
 	);
 }

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

@@ -0,0 +1,261 @@
+import Input from "@/components/Low/Input";
+import Modal from "@/components/Modal";
+import {PERMISSIONS} from "@/constants/userPermissions";
+import useExams from "@/hooks/useExams";
+import usePackages from "@/hooks/usePackages";
+import useUsers from "@/hooks/useUsers";
+import {Module} from "@/interfaces";
+import {Exam} from "@/interfaces/exam";
+import {Package} from "@/interfaces/paypal";
+import {Type, User} from "@/interfaces/user";
+import useExamStore from "@/stores/examStore";
+import {getExamById} from "@/utils/exams";
+import {countExercises} from "@/utils/moduleUtils";
+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 {useState} from "react";
+import {BsCheck, BsPencil, BsTrash, BsUpload} from "react-icons/bs";
+import {toast} from "react-toastify";
+import Select from "react-select";
+import {CURRENCIES} from "@/resources/paypal";
+import Button from "@/components/Low/Button";
+
+const CLASSES: {[key in Module]: string} = {
+	reading: "text-ielts-reading",
+	listening: "text-ielts-listening",
+	speaking: "text-ielts-speaking",
+	writing: "text-ielts-writing",
+	level: "text-ielts-level",
+};
+
+const columnHelper = createColumnHelper<Package>();
+
+type DurationUnit = "days" | "weeks" | "months" | "years";
+
+function PackageCreator({pack, onClose}: {pack?: Package; onClose: () => void}) {
+	const [duration, setDuration] = useState(pack?.duration || 1);
+	const [unit, setUnit] = useState<DurationUnit>(pack?.duration_unit || "months");
+
+	const [price, setPrice] = useState(pack?.price || 0);
+	const [currency, setCurrency] = useState<string>(pack?.currency || "EUR");
+
+	const submit = () => {
+		(pack ? axios.patch : axios.post)(pack ? `/api/packages/${pack.id}` : "/api/packages", {
+			duration,
+			duration_unit: unit,
+			price,
+			currency,
+		})
+			.then(() => {
+				toast.success("New payment has been created successfully!");
+				onClose();
+			})
+			.catch(() => {
+				toast.error("Something went wrong, please try again later!");
+			});
+	};
+
+	return (
+		<div className="flex flex-col gap-8 py-8">
+			<div className="flex flex-col gap-3">
+				<label className="font-normal text-base text-mti-gray-dim">Price *</label>
+				<div className="flex gap-4 items-center">
+					<Input defaultValue={price} name="price" type="number" onChange={(e) => setPrice(parseInt(e))} />
+
+					<Select
+						className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+						options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
+						defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
+						onChange={(value) => setCurrency(value?.value || "EUR")}
+						value={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
+						styles={{
+							control: (styles) => ({
+								...styles,
+								paddingLeft: "4px",
+								border: "none",
+								outline: "none",
+								":focus": {
+									outline: "none",
+								},
+							}),
+							option: (styles, state) => ({
+								...styles,
+								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+								color: state.isFocused ? "black" : styles.color,
+							}),
+						}}
+					/>
+				</div>
+			</div>
+			<div className="flex flex-col gap-3">
+				<label className="font-normal text-base text-mti-gray-dim">Duration *</label>
+				<div className="flex gap-4 items-center">
+					<Input defaultValue={duration} name="duration" type="number" onChange={(e) => setDuration(parseInt(e))} />
+					<Select
+						className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+						options={[
+							{value: "days", label: "Days"},
+							{value: "weeks", label: "Weeks"},
+							{value: "months", label: "Months"},
+							{value: "years", label: "Years"},
+						]}
+						defaultValue={{value: "months", label: "Months"}}
+						onChange={(value) => setUnit((value?.value as DurationUnit) || "months")}
+						value={{value: unit, label: capitalize(unit)}}
+						styles={{
+							control: (styles) => ({
+								...styles,
+								paddingLeft: "4px",
+								border: "none",
+								outline: "none",
+								":focus": {
+									outline: "none",
+								},
+							}),
+							option: (styles, state) => ({
+								...styles,
+								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+								color: state.isFocused ? "black" : styles.color,
+							}),
+						}}
+					/>
+				</div>
+			</div>
+			<div className="flex w-full justify-end items-center gap-8 mt-8">
+				<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
+					Cancel
+				</Button>
+				<Button className="w-full max-w-[200px]" onClick={submit} disabled={!duration || !price}>
+					Submit
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default function PackageList({user}: {user: User}) {
+	const [isCreating, setIsCreating] = useState(false);
+	const [editingPackage, setEditingPackage] = useState<Package>();
+
+	const {packages, reload} = usePackages();
+
+	const deletePackage = async (pack: Package) => {
+		if (!confirm(`Are you sure you want to delete this package?`)) return;
+
+		axios
+			.delete(`/api/packages/${pack.id}`)
+			.then(() => toast.success(`Deleted the "${pack.id}" exam`))
+			.catch((reason) => {
+				if (reason.response.status === 404) {
+					toast.error("Package 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 defaultColumns = [
+		columnHelper.accessor("id", {
+			header: "ID",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("duration", {
+			header: "Duration",
+			cell: (info) => (
+				<span>
+					{info.getValue()} {info.row.original.duration_unit}
+				</span>
+			),
+		}),
+		columnHelper.accessor("price", {
+			header: "Price",
+			cell: (info) => (
+				<span>
+					{info.getValue()} {info.row.original.currency}
+				</span>
+			),
+		}),
+		{
+			header: "",
+			id: "actions",
+			cell: ({row}: {row: {original: Package}}) => {
+				return (
+					<div className="flex gap-4">
+						{["developer", "admin"].includes(user.type) && (
+							<div data-tip="Edit" className="cursor-pointer tooltip" onClick={() => setEditingPackage(row.original)}>
+								<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+							</div>
+						)}
+						{["developer", "admin"].includes(user.type) && (
+							<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deletePackage(row.original)}>
+								<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+							</div>
+						)}
+					</div>
+				);
+			},
+		},
+	];
+
+	const table = useReactTable({
+		data: packages,
+		columns: defaultColumns,
+		getCoreRowModel: getCoreRowModel(),
+	});
+
+	const closeModal = () => {
+		setIsCreating(false);
+		setEditingPackage(undefined);
+		reload();
+	};
+
+	return (
+		<div className="w-full h-full rounded-xl">
+			<Modal
+				isOpen={isCreating || !!editingPackage}
+				onClose={closeModal}
+				title={editingPackage ? `Editing ${editingPackage.id}` : "New Package"}>
+				<PackageCreator onClose={closeModal} pack={editingPackage} />
+			</Modal>
+			<table className="bg-mti-purple-ultralight/40 w-full">
+				<thead>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<tr key={headerGroup.id}>
+							{headerGroup.headers.map((header) => (
+								<th className="p-4 text-left" key={header.id}>
+									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+								</th>
+							))}
+						</tr>
+					))}
+				</thead>
+				<tbody className="px-2">
+					{table.getRowModel().rows.map((row) => (
+						<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+							{row.getVisibleCells().map((cell) => (
+								<td className="px-4 py-2" key={cell.id}>
+									{flexRender(cell.column.columnDef.cell, cell.getContext())}
+								</td>
+							))}
+						</tr>
+					))}
+				</tbody>
+			</table>
+			<button
+				onClick={() => setIsCreating(true)}
+				className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white">
+				New Package
+			</button>
+		</div>
+	);
+}

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

@@ -3,6 +3,7 @@ import {Tab} from "@headlessui/react";
 import clsx from "clsx";
 import ExamList from "./ExamList";
 import GroupList from "./GroupList";
+import PackageList from "./PackageList";
 import UserList from "./UserList";
 
 export default function Lists({user}: {user: User}) {
@@ -44,6 +45,19 @@ export default function Lists({user}: {user: User}) {
 					}>
 					Group List
 				</Tab>
+				{user && ["developer", "admin"].includes(user.type) && (
+					<Tab
+						className={({selected}) =>
+							clsx(
+								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
+								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
+								"transition duration-300 ease-in-out",
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+							)
+						}>
+						Package List
+					</Tab>
+				)}
 			</Tab.List>
 			<Tab.Panels className="mt-2">
 				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
@@ -57,6 +71,11 @@ export default function Lists({user}: {user: User}) {
 				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
 					<GroupList user={user} />
 				</Tab.Panel>
+				{user && ["developer", "admin"].includes(user.type) && (
+					<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
+						<PackageList user={user} />
+					</Tab.Panel>
+				)}
 			</Tab.Panels>
 		</Tab.Group>
 	);

src/pages/api/groups/index.ts

@@ -5,6 +5,7 @@ import {getFirestore, collection, getDocs, setDoc, doc} from "firebase/firestore
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Group} from "@/interfaces/user";
+import {v4} from "uuid";
 
 const db = getFirestore(app);
 
@@ -45,6 +46,6 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 async function post(req: NextApiRequest, res: NextApiResponse) {
 	const body = req.body as Group;
 
-	await setDoc(doc(db, "groups", body.id), {name: body.name, admin: body.admin, participants: body.participants});
+	await setDoc(doc(db, "groups", v4()), {name: body.name, admin: body.admin, participants: body.participants});
 	res.status(200).json({ok: true});
 }

src/pages/api/packages/[id].ts

@@ -0,0 +1,89 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, doc, getDoc, deleteDoc, setDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {PERMISSIONS} from "@/constants/userPermissions";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return get(req, res);
+	if (req.method === "DELETE") return del(req, res);
+	if (req.method === "PATCH") return patch(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+
+	const docRef = doc(db, "packages", id);
+	const docSnap = await getDoc(docRef);
+
+	if (docSnap.exists()) {
+		res.status(200).json({
+			id: docSnap.id,
+			...docSnap.data(),
+			module,
+		});
+	} else {
+		res.status(404).json(undefined);
+	}
+}
+
+async function patch(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+
+	const docRef = doc(db, "packages", id);
+	const docSnap = await getDoc(docRef);
+
+	if (docSnap.exists()) {
+		if (!["developer", "admin"].includes(req.session.user.type)) {
+			res.status(403).json({ok: false});
+			return;
+		}
+
+		await setDoc(docRef, req.body, {merge: true});
+
+		res.status(200).json({ok: true});
+	} else {
+		res.status(404).json({ok: false});
+	}
+}
+
+async function del(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+
+	const docRef = doc(db, "packages", id);
+	const docSnap = await getDoc(docRef);
+
+	if (docSnap.exists()) {
+		if (!["developer", "admin"].includes(req.session.user.type)) {
+			res.status(403).json({ok: false});
+			return;
+		}
+
+		await deleteDoc(docRef);
+
+		res.status(200).json({ok: true});
+	} else {
+		res.status(404).json({ok: false});
+	}
+}