Merge branch 'develop'

src/components/High/TicketDisplay.tsx

@@ -0,0 +1,254 @@
+import useUsers from "@/hooks/useUsers";
+import {
+  Ticket,
+  TicketStatus,
+  TicketStatusLabel,
+  TicketType,
+  TicketTypeLabel,
+} from "@/interfaces/ticket";
+import { User } from "@/interfaces/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
+import axios from "axios";
+import moment from "moment";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import ShortUniqueId from "short-unique-id";
+import Button from "../Low/Button";
+import Input from "../Low/Input";
+import Select from "../Low/Select";
+
+interface Props {
+  user: User;
+  ticket: Ticket;
+  onClose: () => void;
+}
+
+export default function TicketDisplay({ user, ticket, onClose }: Props) {
+  const [subject] = useState(ticket.subject);
+  const [type, setType] = useState<TicketType>(ticket.type);
+  const [description] = useState(ticket.description);
+  const [reporter] = useState(ticket.reporter);
+  const [reportedFrom] = useState(ticket.reportedFrom);
+  const [status, setStatus] = useState(ticket.status);
+  const [assignedTo, setAssignedTo] = useState<string | null>(
+    ticket.assignedTo || null,
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { users } = useUsers();
+
+  const submit = () => {
+    if (!type)
+      return toast.error("Please choose a type!", { toastId: "missing-type" });
+
+    setIsLoading(true);
+    axios
+      .patch(`/api/tickets/${ticket.id}`, {
+        subject,
+        type,
+        description,
+        reporter,
+        reportedFrom,
+        status,
+        assignedTo,
+      })
+      .then(() => {
+        toast.success(`The ticket has been updated!`, { toastId: "submitted" });
+        onClose();
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong, please try again later!", {
+          toastId: "error",
+        });
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  const del = () => {
+    if (!confirm("Are you sure you want to delete this ticket?")) return;
+
+    setIsLoading(true);
+    axios
+      .delete(`/api/tickets/${ticket.id}`)
+      .then(() => {
+        toast.success(`The ticket has been deleted!`, { toastId: "submitted" });
+        onClose();
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong, please try again later!", {
+          toastId: "error",
+        });
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  return (
+    <form className="flex flex-col gap-4 pt-8">
+      <Input
+        label="Subject"
+        type="text"
+        name="subject"
+        placeholder="Subject..."
+        value={subject}
+        onChange={(e) => null}
+        disabled
+      />
+
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <div className="flex w-full flex-col gap-3">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Status
+          </label>
+          <Select
+            options={Object.keys(TicketStatusLabel).map((x) => ({
+              value: x,
+              label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
+            }))}
+            value={{ value: status, label: TicketStatusLabel[status] }}
+            onChange={(value) =>
+              setStatus((value?.value as TicketStatus) ?? undefined)
+            }
+            placeholder="Status..."
+          />
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Type
+          </label>
+          <Select
+            options={Object.keys(TicketTypeLabel).map((x) => ({
+              value: x,
+              label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
+            }))}
+            value={{ value: type, label: TicketTypeLabel[type] }}
+            onChange={(value) => setType(value!.value as TicketType)}
+            placeholder="Type..."
+          />
+        </div>
+      </div>
+
+      <div className="flex w-full flex-col gap-3">
+        <label className="text-mti-gray-dim text-base font-normal">
+          Assignee
+        </label>
+        <Select
+          options={[
+            { value: "me", label: "Assign to me" },
+            ...users
+              .filter((x) => ["admin", "developer"].includes(x.type))
+              .map((u) => ({
+                value: u.id,
+                label: `${u.name} - ${u.email}`,
+              })),
+          ]}
+          disabled={user.type === "agent"}
+          value={
+            assignedTo
+              ? {
+                  value: assignedTo,
+                  label: `${users.find((u) => u.id === assignedTo)?.name} - ${users.find((u) => u.id === assignedTo)?.email}`,
+                }
+              : null
+          }
+          onChange={(value) =>
+            value
+              ? setAssignedTo(value.value === "me" ? user.id : value.value)
+              : setAssignedTo(null)
+          }
+          placeholder="Assignee..."
+          isClearable
+        />
+      </div>
+
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <Input
+          label="Reported From"
+          type="text"
+          name="reportedFrom"
+          onChange={() => null}
+          value={reportedFrom}
+          disabled
+        />
+        <Input
+          label="Date"
+          type="text"
+          name="date"
+          onChange={() => null}
+          value={moment(ticket.date).format("DD/MM/YYYY - HH:mm")}
+          disabled
+        />
+      </div>
+
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <Input
+          label="Reporter's Name"
+          type="text"
+          name="reporter"
+          onChange={() => null}
+          value={reporter.name}
+          disabled
+        />
+        <Input
+          label="Reporter's E-mail"
+          type="text"
+          name="reporter"
+          onChange={() => null}
+          value={reporter.email}
+          disabled
+        />
+        <Input
+          label="Reporter's Type"
+          type="text"
+          name="reporterType"
+          onChange={() => null}
+          value={USER_TYPE_LABELS[reporter.type]}
+          disabled
+        />
+      </div>
+
+      <textarea
+        className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
+        placeholder="Write your ticket's description here..."
+        contentEditable={false}
+        value={description}
+        spellCheck
+      />
+
+      <div className="-md:flex-col-reverse mt-2 flex w-full items-center justify-between gap-4">
+        <Button
+          type="button"
+          color="red"
+          className="w-full md:max-w-[200px]"
+          variant="outline"
+          onClick={del}
+          isLoading={isLoading}
+        >
+          Delete
+        </Button>
+
+        <div className="-md:flex-col-reverse flex w-full items-center justify-end gap-4">
+          <Button
+            type="button"
+            color="red"
+            className="w-full md:max-w-[200px]"
+            variant="outline"
+            onClick={onClose}
+            isLoading={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            className="w-full md:max-w-[200px]"
+            isLoading={isLoading}
+            onClick={submit}
+          >
+            Update
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

src/components/High/TicketSubmission.tsx

@@ -0,0 +1,134 @@
+import { Ticket, TicketType, TicketTypeLabel } from "@/interfaces/ticket";
+import { User } from "@/interfaces/user";
+import axios from "axios";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import ShortUniqueId from "short-unique-id";
+import Button from "../Low/Button";
+import Input from "../Low/Input";
+import Select from "../Low/Select";
+
+interface Props {
+  user: User;
+  page: string;
+  onClose: () => void;
+}
+
+export default function TicketSubmission({ user, page, onClose }: Props) {
+  const [subject, setSubject] = useState("");
+  const [type, setType] = useState<TicketType>();
+  const [description, setDescription] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const submit = () => {
+    if (!type)
+      return toast.error("Please choose a type!", { toastId: "missing-type" });
+    if (subject.trim() === "")
+      return toast.error("Please input a subject!", {
+        toastId: "missing-subject",
+      });
+    if (description.trim() === "")
+      return toast.error("Please describe your ticket!", {
+        toastId: "missing-desc",
+      });
+
+    setIsLoading(true);
+
+    const shortUID = new ShortUniqueId();
+    const ticket: Ticket = {
+      id: shortUID.randomUUID(8),
+      date: new Date().toISOString(),
+      reporter: {
+        id: user.id,
+        email: user.email,
+        name: user.name,
+        type: user.type,
+      },
+      status: "submitted",
+      subject,
+      type,
+      reportedFrom: page,
+      description,
+    };
+
+    axios
+      .post(`/api/tickets`, ticket)
+      .then(() => {
+        toast.success(
+          `Your ticket has been submitted! You will be contacted by e-mail for further discussion.`,
+          { toastId: "submitted" },
+        );
+        onClose();
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong, please try again later!", {
+          toastId: "error",
+        });
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  return (
+    <form className="flex flex-col gap-4 pt-8">
+      <Input
+        label="Subject"
+        type="text"
+        name="subject"
+        placeholder="Subject..."
+        onChange={(e) => setSubject(e)}
+      />
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <div className="flex w-full flex-col gap-3">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Type
+          </label>
+          <Select
+            options={Object.keys(TicketTypeLabel).map((x) => ({
+              value: x,
+              label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
+            }))}
+            onChange={(value) =>
+              setType((value?.value as TicketType) ?? undefined)
+            }
+            placeholder="Type..."
+          />
+        </div>
+        <Input
+          label="Reporter"
+          type="text"
+          name="reporter"
+          onChange={() => null}
+          value={`${user.name} - ${user.email}`}
+          disabled
+        />
+      </div>
+      <textarea
+        className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
+        onChange={(e) => setDescription(e.target.value)}
+        placeholder="Write your ticket's description here..."
+        spellCheck
+      />
+      <div className="mt-2 flex w-full items-center justify-end gap-4">
+        <Button
+          type="button"
+          color="red"
+          className="w-full max-w-[200px]"
+          variant="outline"
+          onClick={onClose}
+          isLoading={isLoading}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          className="w-full max-w-[200px]"
+          isLoading={isLoading}
+          onClick={submit}
+        >
+          Submit
+        </Button>
+      </div>
+    </form>
+  );
+}

src/components/Low/Select.tsx

@@ -0,0 +1,68 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import ReactSelect from "react-select";
+
+interface Option {
+  [key: string]: any;
+  value: string;
+  label: string;
+}
+
+interface Props {
+  defaultValue?: Option;
+  value?: Option | null;
+  options: Option[];
+  disabled?: boolean;
+  placeholder?: string;
+  onChange: (value: Option | null) => void;
+  isClearable?: boolean;
+}
+
+export default function Select({
+  value,
+  defaultValue,
+  options,
+  placeholder,
+  disabled,
+  onChange,
+  isClearable,
+}: Props) {
+  return (
+    <ReactSelect
+      className={clsx(
+        "placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+        disabled &&
+          "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+      )}
+      options={options}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      menuPortalTarget={document?.body}
+      defaultValue={defaultValue}
+      styles={{
+        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+        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,
+        }),
+      }}
+      isDisabled={disabled}
+      isClearable={isClearable}
+    />
+  );
+}

src/components/MobileMenu.tsx

@@ -1,12 +1,12 @@
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
-import {Dialog, Transition} from "@headlessui/react";
+import { Dialog, Transition } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
-import {Fragment} from "react";
+import { Fragment } from "react";
-import {BsShield, BsShieldFill, BsXLg} from "react-icons/bs";
+import { BsXLg } from "react-icons/bs";
 
 interface Props {
   isOpen: boolean;
@@ -15,7 +15,7 @@ interface Props {
   user: User;
 }
 
-export default function MobileMenu({isOpen, onClose, path, user}: Props) {
+export default function MobileMenu({ isOpen, onClose, path, user }: Props) {
   const router = useRouter();
 
   const logout = async () => {
@@ -34,7 +34,8 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
           enterTo="opacity-100"
           leave="ease-in duration-200"
           leaveFrom="opacity-100"
-					leaveTo="opacity-0">
+          leaveTo="opacity-0"
+        >
           <div className="fixed inset-0 bg-black bg-opacity-25" />
         </Transition.Child>
 
@@ -47,42 +48,65 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
               enterTo="opacity-100 scale-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100 scale-100"
-							leaveTo="opacity-0 scale-95">
+              leaveTo="opacity-0 scale-95"
-							<Dialog.Panel className="w-full h-screen transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all text-black flex flex-col gap-8">
+            >
-								<Dialog.Title as="header" className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden shadow-sm">
+              <Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
+                <Dialog.Title
+                  as="header"
+                  className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden"
+                >
                   <Link href="/">
-										<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+                    <Image
+                      src="/logo_title.png"
+                      alt="EnCoach logo"
+                      width={69}
+                      height={69}
+                    />
                   </Link>
-									<div className="cursor-pointer" onClick={onClose} tabIndex={0}>
+                  <div
-										<BsXLg className="text-2xl text-mti-purple-light" onClick={onClose} />
+                    className="cursor-pointer"
+                    onClick={onClose}
+                    tabIndex={0}
+                  >
+                    <BsXLg
+                      className="text-mti-purple-light text-2xl"
+                      onClick={onClose}
+                    />
                   </div>
                 </Dialog.Title>
-								<div className="flex flex-col h-full gap-6 px-8 text-lg">
+                <div className="flex h-full flex-col gap-6 px-8 text-lg">
                   <Link
                     href="/"
                     className={clsx(
-											"transition ease-in-out duration-300 w-fit",
+                      "w-fit transition duration-300 ease-in-out",
-											path === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+                      path === "/" &&
-										)}>
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                    )}
+                  >
                     Dashboard
                   </Link>
-									{(user.type === "student" || user.type === "teacher" || user.type === "developer") && (
+                  {(user.type === "student" ||
+                    user.type === "teacher" ||
+                    user.type === "developer") && (
                     <>
                       <Link
                         href="/exam"
                         className={clsx(
-													"transition ease-in-out duration-300 w-fit",
+                          "w-fit transition duration-300 ease-in-out",
-													path === "/exam" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+                          path === "/exam" &&
-												)}>
+                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                        )}
+                      >
                         Exams
                       </Link>
                       <Link
                         href="/exercises"
                         className={clsx(
-													"transition ease-in-out duration-300 w-fit",
+                          "w-fit transition duration-300 ease-in-out",
                           path === "/exercises" &&
-														"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
-												)}>
+                        )}
+                      >
                         Exercises
                       </Link>
                     </>
@@ -90,52 +114,80 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
                   <Link
                     href="/stats"
                     className={clsx(
-											"transition ease-in-out duration-300 w-fit",
+                      "w-fit transition duration-300 ease-in-out",
-											path === "/stats" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+                      path === "/stats" &&
-										)}>
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                    )}
+                  >
                     Stats
                   </Link>
                   <Link
                     href="/record"
                     className={clsx(
-											"transition ease-in-out duration-300 w-fit",
+                      "w-fit transition duration-300 ease-in-out",
-											path === "/record" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+                      path === "/record" &&
-										)}>
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                    )}
+                  >
                     Record
                   </Link>
-									{["admin", "developer", "agent", "corporate"].includes(user.type) && (
+                  {["admin", "developer", "agent", "corporate"].includes(
+                    user.type,
+                  ) && (
                     <Link
                       href="/payment-record"
                       className={clsx(
-												"transition ease-in-out duration-300 w-fit",
+                        "w-fit transition duration-300 ease-in-out",
                         path === "/payment-record" &&
-													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
-											)}>
+                      )}
+                    >
                       Payment Record
                     </Link>
                   )}
-									{["admin", "developer", "corporate", "teacher"].includes(user.type) && (
+                  {["admin", "developer", "corporate", "teacher"].includes(
+                    user.type,
+                  ) && (
                     <Link
                       href="/settings"
                       className={clsx(
-												"transition ease-in-out duration-300 w-fit",
+                        "w-fit transition duration-300 ease-in-out",
-												path === "/settings" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+                        path === "/settings" &&
-											)}>
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                      )}
+                    >
                       Settings
                     </Link>
                   )}
+                  {["admin", "developer", "agent"].includes(user.type) && (
+                    <Link
+                      href="/tickets"
+                      className={clsx(
+                        "w-fit transition duration-300 ease-in-out",
+                        path === "/tickets" &&
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                      )}
+                    >
+                      Tickets
+                    </Link>
+                  )}
                   <Link
                     href="/profile"
                     className={clsx(
-											"transition ease-in-out duration-300 w-fit",
+                      "w-fit transition duration-300 ease-in-out",
-											path === "/profile" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+                      path === "/profile" &&
-										)}>
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                    )}
+                  >
                     Profile
                   </Link>
 
                   <span
-										className={clsx("transition ease-in-out duration-300 w-fit justify-self-end cursor-pointer")}
+                    className={clsx(
-										onClick={logout}>
+                      "w-fit cursor-pointer justify-self-end transition duration-300 ease-in-out",
+                    )}
+                    onClick={logout}
+                  >
                     Logout
                   </span>
                 </div>

src/components/Navbar.tsx

@@ -1,17 +1,21 @@
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import Link from "next/link";
 import FocusLayer from "@/components/FocusLayer";
-import {preventNavigation} from "@/utils/navigation.disabled";
+import { preventNavigation } from "@/utils/navigation.disabled";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
-import {BsList} from "react-icons/bs";
+import { BsList, BsQuestionCircle, BsQuestionCircleFill } from "react-icons/bs";
 import clsx from "clsx";
 import moment from "moment";
 import MobileMenu from "./MobileMenu";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
-import {Type} from "@/interfaces/user";
+import { Type } from "@/interfaces/user";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
 import useGroups from "@/hooks/useGroups";
-import {isUserFromCorporate} from "@/utils/groups";
+import { isUserFromCorporate } from "@/utils/groups";
+import Button from "./Low/Button";
+import Modal from "./Modal";
+import Input from "./Low/Input";
+import TicketSubmission from "./High/TicketSubmission";
 
 interface Props {
   user: User;
@@ -22,20 +26,29 @@ interface Props {
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
+export default function Navbar({
+  user,
+  path,
+  navDisabled = false,
+  focusMode = false,
+  onFocusLayerMouseEnter,
+}: Props) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [disablePaymentPage, setDisablePaymentPage] = useState(true);
+  const [isTicketOpen, setIsTicketOpen] = useState(false);
 
   const disableNavigation = preventNavigation(navDisabled, focusMode);
-	const router = useRouter();
 
   const expirationDateColor = (date: Date) => {
     const momentDate = moment(date);
     const today = moment(new Date());
 
-		if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
+    if (today.add(1, "days").isAfter(momentDate))
-		if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
+      return "!bg-mti-red-ultralight border-mti-red-light";
-		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
+    if (today.add(3, "days").isAfter(momentDate))
+      return "!bg-mti-rose-ultralight border-mti-rose-light";
+    if (today.add(7, "days").isAfter(momentDate))
+      return "!bg-mti-orange-ultralight border-mti-orange-light";
   };
 
   const showExpirationDate = () => {
@@ -48,47 +61,100 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
   };
 
   useEffect(() => {
-		if (user.type !== "student" && user.type !== "teacher") setDisablePaymentPage(false);
+    if (user.type !== "student" && user.type !== "teacher")
-		isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
+      setDisablePaymentPage(false);
+    isUserFromCorporate(user.id).then((result) =>
+      setDisablePaymentPage(result),
+    );
   }, [user]);
 
   return (
     <>
-			{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
+      <Modal
-			<header className="w-full bg-transparent py-2 md:py-4 -md:justify-between md:gap-12 flex items-center relative -md:px-4">
+        isOpen={isTicketOpen}
-				<Link href={disableNavigation ? "" : "/"} className=" md:px-8 flex gap-8 items-center">
+        onClose={() => setIsTicketOpen(false)}
+        title="Submit a ticket"
+      >
+        <TicketSubmission
+          user={user}
+          page={window.location.href}
+          onClose={() => setIsTicketOpen(false)}
+        />
+      </Modal>
+
+      {user && (
+        <MobileMenu
+          path={path}
+          isOpen={isMenuOpen}
+          onClose={() => setIsMenuOpen(false)}
+          user={user}
+        />
+      )}
+      <header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
+        <Link
+          href={disableNavigation ? "" : "/"}
+          className=" flex items-center gap-8 md:px-8"
+        >
           <img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
-					<h1 className="font-bold text-2xl w-1/6 -md:hidden">EnCoach</h1>
+          <h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
         </Link>
-				<div className="flex justify-end -md:items-center gap-4 md:w-5/6 md:mr-8">
+        <div className="flex items-center justify-end gap-4 md:mr-8 md:w-5/6">
+          {/* OPEN TICKET SYSTEM */}
+          <button
+            className={clsx(
+              "border-mti-purple-light tooltip tooltip-bottom flex h-8 w-8 flex-col items-center justify-center rounded-full border p-1",
+              "hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white",
+            )}
+            data-tip="Submit a help/feedback ticket"
+            onClick={() => setIsTicketOpen(true)}
+          >
+            <BsQuestionCircleFill />
+          </button>
+
           {showExpirationDate() && (
             <Link
               href={disablePaymentPage ? "/payment" : ""}
               data-tip="Expiry date"
               className={clsx(
-								"py-2 px-6 w-fit flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                "flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",
-								"transition duration-300 ease-in-out tooltip tooltip-bottom",
+                "tooltip tooltip-bottom transition duration-300 ease-in-out",
                 !user.subscriptionExpirationDate
                   ? "bg-mti-green-ultralight border-mti-green-light"
                   : expirationDateColor(user.subscriptionExpirationDate),
-								"bg-white border-mti-gray-platinum",
+                "border-mti-gray-platinum bg-white",
-							)}>
+              )}
+            >
               {!user.subscriptionExpirationDate && "Unlimited"}
-							{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
+              {user.subscriptionExpirationDate &&
+                moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
             </Link>
           )}
-					<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end -md:hidden">
+          <Link
-						<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
+            href={disableNavigation ? "" : "/profile"}
-						<span className="text-right -md:hidden">
+            className="-md:hidden flex items-center justify-end gap-6"
-							{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
+          >
-							{USER_TYPE_LABELS[user.type]}
+            <img
+              src={user.profilePicture}
+              alt={user.name}
+              className="h-10 w-10 rounded-full object-cover"
+            />
+            <span className="-md:hidden text-right">
+              {user.type === "corporate"
+                ? `${user.corporateInformation?.companyInformation.name} |`
+                : ""}{" "}
+              {user.name} | {USER_TYPE_LABELS[user.type]}
             </span>
           </Link>
-					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
+          <div
-						<BsList className="text-mti-purple-light w-8 h-8" />
+            className="cursor-pointer md:hidden"
+            onClick={() => setIsMenuOpen(true)}
+          >
+            <BsList className="text-mti-purple-light h-8 w-8" />
           </div>
         </div>
-				{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
+        {focusMode && (
+          <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
+        )}
       </header>
     </>
   );

src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import {IconType} from "react-icons";
+import { IconType } from "react-icons";
-import {MdSpaceDashboard} from "react-icons/md";
+import { MdSpaceDashboard } from "react-icons/md";
 import {
   BsFileEarmarkText,
   BsClockHistory,
@@ -11,18 +11,19 @@ import {
   BsShieldFill,
   BsCloudFill,
   BsCurrencyDollar,
+  BsClipboardData,
 } from "react-icons/bs";
-import {RiLogoutBoxFill} from "react-icons/ri";
+import { RiLogoutBoxFill } from "react-icons/ri";
-import {SlPencil} from "react-icons/sl";
+import { SlPencil } from "react-icons/sl";
-import {FaAward} from "react-icons/fa";
+import { FaAward } from "react-icons/fa";
 import Link from "next/link";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
 import axios from "axios";
 import FocusLayer from "@/components/FocusLayer";
-import {preventNavigation} from "@/utils/navigation.disabled";
+import { preventNavigation } from "@/utils/navigation.disabled";
-import {useState} from "react";
+import { useState } from "react";
 import usePreferencesStore from "@/stores/preferencesStore";
-import {Type} from "@/interfaces/user";
+import { Type } from "@/interfaces/user";
 interface Props {
   path: string;
   navDisabled?: boolean;
@@ -41,25 +42,45 @@ interface NavProps {
   isMinimized?: boolean;
 }
 
-const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false}: NavProps) => (
+const Nav = ({
+  Icon,
+  label,
+  path,
+  keyPath,
+  disabled = false,
+  isMinimized = false,
+}: NavProps) => (
   <Link
     href={!disabled ? keyPath : ""}
     className={clsx(
-			"p-4 rounded-full flex gap-4 items-center text-gray-500 hover:text-white",
+      "flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
       "transition-all duration-300 ease-in-out",
-			disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
+      disabled
+        ? "hover:bg-mti-gray-dim cursor-not-allowed"
+        : "hover:bg-mti-purple-light cursor-pointer",
       path === keyPath && "bg-mti-purple-light text-white",
-			isMinimized ? "w-fit" : "w-full min-w-[200px] 2xl:min-w-[220px] px-8",
+      isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
-		)}>
+    )}
+  >
     <Icon size={24} />
     {!isMinimized && <span className="text-lg font-semibold">{label}</span>}
   </Link>
 );
 
-export default function Sidebar({path, navDisabled = false, focusMode = false, userType, onFocusLayerMouseEnter, className}: Props) {
+export default function Sidebar({
+  path,
+  navDisabled = false,
+  focusMode = false,
+  userType,
+  onFocusLayerMouseEnter,
+  className,
+}: Props) {
   const router = useRouter();
 
-	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
+  const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [
+    state.isSidebarMinimized,
+    state.toggleSidebarMinimized,
+  ]);
 
   const logout = async () => {
     axios.post("/api/logout").finally(() => {
@@ -72,13 +93,23 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
   return (
     <section
       className={clsx(
-				"h-full flex bg-transparent flex-col justify-between px-4 py-4 pb-8 relative",
+        "relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
-				isMinimized ? "w-fit" : "w-1/6 -xl:w-fit",
+        isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
         className,
-			)}>
+      )}
-			<div className="xl:flex -xl:hidden flex-col gap-3">
+    >
-				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
+      <div className="-xl:hidden flex-col gap-3 xl:flex">
-				{(userType === "student" || userType === "teacher" || userType === "developer") && (
+        <Nav
+          disabled={disableNavigation}
+          Icon={MdSpaceDashboard}
+          label="Dashboard"
+          path={path}
+          keyPath="/"
+          isMinimized={isMinimized}
+        />
+        {(userType === "student" ||
+          userType === "teacher" ||
+          userType === "developer") && (
           <>
             <Nav
               disabled={disableNavigation}
@@ -98,9 +129,25 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
             />
           </>
         )}
-				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
+        <Nav
-				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
+          disabled={disableNavigation}
-				{["admin", "developer", "agent", "corporate"].includes(userType || "") && (
+          Icon={BsGraphUp}
+          label="Stats"
+          path={path}
+          keyPath="/stats"
+          isMinimized={isMinimized}
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsClockHistory}
+          label="Record"
+          path={path}
+          keyPath="/record"
+          isMinimized={isMinimized}
+        />
+        {["admin", "developer", "agent", "corporate"].includes(
+          userType || "",
+        ) && (
           <Nav
             disabled={disableNavigation}
             Icon={BsCurrencyDollar}
@@ -110,7 +157,9 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
             isMinimized={isMinimized}
           />
         )}
-				{["admin", "developer", "corporate", "teacher"].includes(userType || "") && (
+        {["admin", "developer", "corporate", "teacher"].includes(
+          userType || "",
+        ) && (
           <Nav
             disabled={disableNavigation}
             Icon={BsShieldFill}
@@ -120,6 +169,16 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
             isMinimized={isMinimized}
           />
         )}
+        {["admin", "developer", "agent"].includes(userType || "") && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsClipboardData}
+            label="Tickets"
+            path={path}
+            keyPath="/tickets"
+            isMinimized={isMinimized}
+          />
+        )}
         {userType === "developer" && (
           <Nav
             disabled={disableNavigation}
@@ -131,45 +190,106 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
           />
         )}
       </div>
-			<div className="xl:hidden -xl:flex flex-col gap-3">
+      <div className="-xl:flex flex-col gap-3 xl:hidden">
-				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
+        <Nav
-				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
+          disabled={disableNavigation}
-				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
+          Icon={MdSpaceDashboard}
-				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
+          label="Dashboard"
-				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
+          path={path}
+          keyPath="/"
+          isMinimized={true}
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsFileEarmarkText}
+          label="Exams"
+          path={path}
+          keyPath="/exam"
+          isMinimized={true}
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsPencil}
+          label="Exercises"
+          path={path}
+          keyPath="/exercises"
+          isMinimized={true}
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsGraphUp}
+          label="Stats"
+          path={path}
+          keyPath="/stats"
+          isMinimized={true}
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsClockHistory}
+          label="Record"
+          path={path}
+          keyPath="/record"
+          isMinimized={true}
+        />
         {userType !== "student" && (
-					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsShieldFill}
+            label="Settings"
+            path={path}
+            keyPath="/settings"
+            isMinimized={true}
+          />
         )}
         {userType === "developer" && (
-					<Nav disabled={disableNavigation} Icon={BsCloudFill} label="Generation" path={path} keyPath="/generation" isMinimized={true} />
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCloudFill}
+            label="Generation"
+            path={path}
+            keyPath="/generation"
+            isMinimized={true}
+          />
         )}
       </div>
 
-			<div className="flex flex-col gap-0 bottom-12 fixed">
+      <div className="fixed bottom-12 flex flex-col gap-0">
         <div
           role="button"
           tabIndex={1}
           onClick={toggleMinimize}
           className={clsx(
-						"p-4 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-rose -xl:hidden transition duration-300 ease-in-out",
+            "hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
             isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-					)}>
+          )}
-					{isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
+        >
-					{!isMinimized && <span className="text-lg font-medium">Minimize</span>}
+          {isMinimized ? (
+            <BsChevronBarRight size={24} />
+          ) : (
+            <BsChevronBarLeft size={24} />
+          )}
+          {!isMinimized && (
+            <span className="text-lg font-medium">Minimize</span>
+          )}
         </div>
         <div
           role="button"
           tabIndex={1}
           onClick={focusMode ? () => {} : logout}
           className={clsx(
-						"p-4 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-rose transition duration-300 ease-in-out",
+            "hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
             isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-					)}>
+          )}
+        >
           <RiLogoutBoxFill size={24} />
-					{!isMinimized && <span className="text-lg font-medium -xl:hidden">Log Out</span>}
+          {!isMinimized && (
+            <span className="-xl:hidden text-lg font-medium">Log Out</span>
+          )}
         </div>
       </div>
-			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
+      {focusMode && (
+        <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
+      )}
     </section>
   );
 }

src/dashboards/AssignmentCard.tsx

@@ -1,75 +1,111 @@
 import ProgressBar from "@/components/Low/ProgressBar";
 import useUsers from "@/hooks/useUsers";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
-import {Assignment} from "@/interfaces/results";
+import { Assignment } from "@/interfaces/results";
-import {calculateBandScore} from "@/utils/score";
+import { calculateBandScore } from "@/utils/score";
 import clsx from "clsx";
 import moment from "moment";
-import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import {
+  BsBook,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+} from "react-icons/bs";
 import { usePDFDownload } from "@/hooks/usePDFDownload";
+import { uniqBy } from "lodash";
 
 interface Props {
   onClick?: () => void;
   allowDownload?: boolean;
 }
 
-export default function AssignmentCard({id, name, assigner, startDate, endDate, assignees, results, exams, onClick, allowDownload}: Assignment & Props) {
+export default function AssignmentCard({
-	const {users} = useUsers();
+  id,
+  name,
+  assigner,
+  startDate,
+  endDate,
+  assignees,
+  results,
+  exams,
+  onClick,
+  allowDownload,
+}: Assignment & Props) {
+  const { users } = useUsers();
   const renderPdfIcon = usePDFDownload("assignments");
 
   const calculateAverageModuleScore = (module: Module) => {
     const resultModuleBandScores = results.map((r) => {
       const moduleStats = r.stats.filter((s) => s.module === module);
 
-			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
+      const correct = moduleStats.reduce(
-			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
+        (acc, curr) => acc + curr.score.correct,
+        0,
+      );
+      const total = moduleStats.reduce(
+        (acc, curr) => acc + curr.score.total,
+        0,
+      );
       return calculateBandScore(correct, total, module, r.type);
     });
 
-		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / results.length;
+    return resultModuleBandScores.length === 0
+      ? -1
+      : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) /
+          results.length;
   };
 
   return (
     <div
       onClick={onClick}
-			className="w-[350px] h-fit flex flex-col gap-6 bg-white border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
+      className="border-mti-gray-platinum flex h-fit w-[350px] cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow"
+    >
       <div className="flex flex-col gap-3">
         <div className="flex flex-row justify-between">
-					<h3 className="font-semibold text-xl">{name}</h3>
+          <h3 className="text-xl font-semibold">{name}</h3>
-					{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+          {allowDownload &&
+            renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
         </div>
         <ProgressBar
           color={results.length / assignees.length < 0.5 ? "red" : "purple"}
           percentage={(results.length / assignees.length) * 100}
           label={`${results.length}/${assignees.length}`}
           className="h-5"
-					textClassName={results.length / assignees.length < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"}
+          textClassName={
+            results.length / assignees.length < 0.5
+              ? "!text-mti-gray-dim font-light"
+              : "text-white"
+          }
         />
       </div>
-			<span className="flex gap-1 justify-between">
+      <span className="flex justify-between gap-1">
         <span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
         <span>-</span>
         <span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
       </span>
-			<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
+      <div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
-				{exams.map(({module}) => (
+        {uniqBy(exams, (x) => x.module).map(({ module }) => (
           <div
             key={module}
             className={clsx(
-							"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
+              "-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
               module === "reading" && "bg-ielts-reading",
               module === "listening" && "bg-ielts-listening",
               module === "writing" && "bg-ielts-writing",
               module === "speaking" && "bg-ielts-speaking",
               module === "level" && "bg-ielts-level",
-						)}>
+            )}
-						{module === "reading" && <BsBook className="w-4 h-4" />}
+          >
-						{module === "listening" && <BsHeadphones className="w-4 h-4" />}
+            {module === "reading" && <BsBook className="h-4 w-4" />}
-						{module === "writing" && <BsPen className="w-4 h-4" />}
+            {module === "listening" && <BsHeadphones className="h-4 w-4" />}
-						{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
+            {module === "writing" && <BsPen className="h-4 w-4" />}
-						{module === "level" && <BsClipboard className="w-4 h-4" />}
+            {module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+            {module === "level" && <BsClipboard className="h-4 w-4" />}
             {calculateAverageModuleScore(module) > -1 && (
-							<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
+              <span className="text-sm">
+                {calculateAverageModuleScore(module).toFixed(1)}
+              </span>
             )}
           </div>
         ))}

src/dashboards/AssignmentView.tsx

@@ -1,19 +1,25 @@
 import ProgressBar from "@/components/Low/ProgressBar";
 import Modal from "@/components/Modal";
 import useUsers from "@/hooks/useUsers";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
-import {Assignment} from "@/interfaces/results";
+import { Assignment } from "@/interfaces/results";
-import {Stat, User} from "@/interfaces/user";
+import { Stat, User } from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {getExamById} from "@/utils/exams";
+import { getExamById } from "@/utils/exams";
-import {sortByModule} from "@/utils/moduleUtils";
+import { sortByModule } from "@/utils/moduleUtils";
-import {calculateBandScore} from "@/utils/score";
+import { calculateBandScore } from "@/utils/score";
-import {convertToUserSolutions} from "@/utils/stats";
+import { convertToUserSolutions } from "@/utils/stats";
 import clsx from "clsx";
-import {capitalize, uniqBy} from "lodash";
+import { capitalize, uniqBy } from "lodash";
 import moment from "moment";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
-import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import {
+  BsBook,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+} from "react-icons/bs";
 
 interface Props {
   isOpen: boolean;
@@ -21,8 +27,8 @@ interface Props {
   onClose: () => void;
 }
 
-export default function AssignmentView({isOpen, assignment, onClose}: Props) {
+export default function AssignmentView({ isOpen, assignment, onClose }: Props) {
-	const {users} = useUsers();
+  const { users } = useUsers();
   const router = useRouter();
 
   const setExams = useExamStore((state) => state.setExams);
@@ -43,16 +49,29 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
     const resultModuleBandScores = assignment.results.map((r) => {
       const moduleStats = r.stats.filter((s) => s.module === module);
 
-			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
+      const correct = moduleStats.reduce(
-			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
+        (acc, curr) => acc + curr.score.correct,
+        0,
+      );
+      const total = moduleStats.reduce(
+        (acc, curr) => acc + curr.score.total,
+        0,
+      );
       return calculateBandScore(correct, total, module, r.type);
     });
 
-		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / assignment.results.length;
+    return resultModuleBandScores.length === 0
+      ? -1
+      : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) /
+          assignment.results.length;
   };
 
-	const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
+  const aggregateScoresByModule = (
-		const scores: {[key in Module]: {total: number; missing: number; correct: number}} = {
+    stats: Stat[],
+  ): { module: Module; total: number; missing: number; correct: number }[] => {
+    const scores: {
+      [key in Module]: { total: number; missing: number; correct: number };
+    } = {
       reading: {
         total: 0,
         correct: 0,
@@ -90,13 +109,25 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
 
     return Object.keys(scores)
       .filter((x) => scores[x as Module].total > 0)
-			.map((x) => ({module: x as Module, ...scores[x as Module]}));
+      .map((x) => ({ module: x as Module, ...scores[x as Module] }));
   };
 
-	const customContent = (stats: Stat[], user: string, focus: "academic" | "general") => {
+  const customContent = (
-		const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
+    stats: Stat[],
-		const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
+    user: string,
-		const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
+    focus: "academic" | "general",
+  ) => {
+    const correct = stats.reduce(
+      (accumulator, current) => accumulator + current.score.correct,
+      0,
+    );
+    const total = stats.reduce(
+      (accumulator, current) => accumulator + current.score.total,
+      0,
+    );
+    const aggregatedScores = aggregateScoresByModule(stats).filter(
+      (x) => x.total > 0,
+    );
 
     const aggregatedLevels = aggregatedScores.map((x) => ({
       module: x.module,
@@ -106,7 +137,9 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
     const timeSpent = stats[0].timeSpent;
 
     const selectExam = () => {
-			const examPromises = uniqBy(stats, "exam").map((stat) => getExamById(stat.module, stat.exam));
+      const examPromises = uniqBy(stats, "exam").map((stat) =>
+        getExamById(stat.module, stat.exam),
+      );
 
       Promise.all(examPromises).then((exams) => {
         if (exams.every((x) => !!x)) {
@@ -126,13 +159,17 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
 
     const content = (
       <>
-				<div className="w-full flex justify-between -md:items-center 2xl:items-center">
+        <div className="-md:items-center flex w-full justify-between 2xl:items-center">
-					<div className="flex md:flex-col 2xl:flex-row md:gap-1 -md:gap-2 2xl:gap-2 -md:items-center 2xl:items-center">
+          <div className="-md:gap-2 -md:items-center flex md:flex-col md:gap-1 2xl:flex-row 2xl:items-center 2xl:gap-2">
-						<span className="font-medium">{formatTimestamp(stats[0].date.toString())}</span>
+            <span className="font-medium">
+              {formatTimestamp(stats[0].date.toString())}
+            </span>
             {timeSpent && (
               <>
                 <span className="md:hidden 2xl:flex">• </span>
-								<span className="text-sm">{Math.floor(timeSpent / 60)} minutes</span>
+                <span className="text-sm">
+                  {Math.floor(timeSpent / 60)} minutes
+                </span>
               </>
             )}
           </div>
@@ -141,30 +178,37 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
               correct / total >= 0.7 && "text-mti-purple",
               correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
               correct / total < 0.3 && "text-mti-rose",
-						)}>
+            )}
+          >
             Level{" "}
-						{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
+            {(
+              aggregatedLevels.reduce(
+                (accumulator, current) => accumulator + current.level,
+                0,
+              ) / aggregatedLevels.length
+            ).toFixed(1)}
           </span>
         </div>
 
-				<div className="w-full flex flex-col gap-1">
+        <div className="flex w-full flex-col gap-1">
-					<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
+          <div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
-						{aggregatedLevels.map(({module, level}) => (
+            {aggregatedLevels.map(({ module, level }) => (
               <div
                 key={module}
                 className={clsx(
-									"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
+                  "-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
                   module === "reading" && "bg-ielts-reading",
                   module === "listening" && "bg-ielts-listening",
                   module === "writing" && "bg-ielts-writing",
                   module === "speaking" && "bg-ielts-speaking",
                   module === "level" && "bg-ielts-level",
-								)}>
+                )}
-								{module === "reading" && <BsBook className="w-4 h-4" />}
+              >
-								{module === "listening" && <BsHeadphones className="w-4 h-4" />}
+                {module === "reading" && <BsBook className="h-4 w-4" />}
-								{module === "writing" && <BsPen className="w-4 h-4" />}
+                {module === "listening" && <BsHeadphones className="h-4 w-4" />}
-								{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
+                {module === "writing" && <BsPen className="h-4 w-4" />}
-								{module === "level" && <BsClipboard className="w-4 h-4" />}
+                {module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+                {module === "level" && <BsClipboard className="h-4 w-4" />}
                 <span className="text-sm">{level.toFixed(1)}</span>
               </div>
             ))}
@@ -184,25 +228,31 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
         <div
           key={user}
           className={clsx(
-						"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
+            "border-mti-gray-platinum -md:hidden flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out",
             correct / total >= 0.7 && "hover:border-mti-purple",
-						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+            correct / total >= 0.3 &&
+              correct / total < 0.7 &&
+              "hover:border-mti-red",
             correct / total < 0.3 && "hover:border-mti-rose",
           )}
           onClick={selectExam}
-					role="button">
+          role="button"
+        >
           {content}
         </div>
         <div
           key={user}
           className={clsx(
-						"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
+            "border-mti-gray-platinum -md:tooltip flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out md:hidden",
             correct / total >= 0.7 && "hover:border-mti-purple",
-						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+            correct / total >= 0.3 &&
+              correct / total < 0.7 &&
+              "hover:border-mti-red",
             correct / total < 0.3 && "hover:border-mti-rose",
           )}
           data-tip="Your screen size is too small to view previous exams."
-					role="button">
+          role="button"
+        >
           {content}
         </div>
       </div>
@@ -211,20 +261,33 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={assignment?.name}>
-			<div className="mt-4 flex flex-col w-full gap-4">
+      <div className="mt-4 flex w-full flex-col gap-4">
         <ProgressBar
           color="purple"
           label={`${assignment?.results.length}/${assignment?.assignees.length} assignees completed`}
           className="h-6"
           textClassName={
-						(assignment?.results.length || 0) / (assignment?.assignees.length || 1) < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"
+            (assignment?.results.length || 0) /
+              (assignment?.assignees.length || 1) <
+            0.5
+              ? "!text-mti-gray-dim font-light"
+              : "text-white"
+          }
+          percentage={
+            ((assignment?.results.length || 0) /
+              (assignment?.assignees.length || 1)) *
+            100
           }
-					percentage={((assignment?.results.length || 0) / (assignment?.assignees.length || 1)) * 100}
         />
-				<div className="flex gap-8 items-start">
+        <div className="flex items-start gap-8">
           <div className="flex flex-col gap-2">
-						<span>Start Date: {moment(assignment?.startDate).format("DD/MM/YY, HH:mm")}</span>
+            <span>
-						<span>End Date: {moment(assignment?.endDate).format("DD/MM/YY, HH:mm")}</span>
+              Start Date:{" "}
+              {moment(assignment?.startDate).format("DD/MM/YY, HH:mm")}
+            </span>
+            <span>
+              End Date: {moment(assignment?.endDate).format("DD/MM/YY, HH:mm")}
+            </span>
           </div>
           <span>
             Assignees:{" "}
@@ -236,26 +299,32 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
         </div>
         <div className="flex flex-col gap-2">
           <span className="text-xl font-bold">Average Scores</span>
-					<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
+          <div className="-md:mt-2 flex w-full items-center gap-4">
-						{assignment?.exams.map(({module}) => (
+            {assignment &&
+              uniqBy(assignment.exams, (x) => x.module).map(({ module }) => (
                 <div
                   data-tip={capitalize(module)}
                   key={module}
                   className={clsx(
-									"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl tooltip",
+                    "-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
                     module === "reading" && "bg-ielts-reading",
                     module === "listening" && "bg-ielts-listening",
                     module === "writing" && "bg-ielts-writing",
                     module === "speaking" && "bg-ielts-speaking",
                     module === "level" && "bg-ielts-level",
-								)}>
+                  )}
-								{module === "reading" && <BsBook className="w-4 h-4" />}
+                >
-								{module === "listening" && <BsHeadphones className="w-4 h-4" />}
+                  {module === "reading" && <BsBook className="h-4 w-4" />}
-								{module === "writing" && <BsPen className="w-4 h-4" />}
+                  {module === "listening" && (
-								{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
+                    <BsHeadphones className="h-4 w-4" />
-								{module === "level" && <BsClipboard className="w-4 h-4" />}
+                  )}
+                  {module === "writing" && <BsPen className="h-4 w-4" />}
+                  {module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+                  {module === "level" && <BsClipboard className="h-4 w-4" />}
                   {calculateAverageModuleScore(module) > -1 && (
-									<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
+                    <span className="text-sm">
+                      {calculateAverageModuleScore(module).toFixed(1)}
+                    </span>
                   )}
                 </div>
               ))}
@@ -263,15 +332,20 @@ export default function AssignmentView({isOpen, assignment, onClose}: Props) {
         </div>
         <div className="flex flex-col gap-2">
           <span className="text-xl font-bold">
-						Results ({assignment?.results.length}/{assignment?.assignees.length})
+            Results ({assignment?.results.length}/{assignment?.assignees.length}
+            )
           </span>
           <div>
             {assignment && assignment?.results.length > 0 && (
-							<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 w-full gap-4 xl:gap-6">
+              <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 xl:gap-6">
-								{assignment.results.map((r) => customContent(r.stats, r.user, r.type))}
+                {assignment.results.map((r) =>
+                  customContent(r.stats, r.user, r.type),
+                )}
               </div>
             )}
-						{assignment && assignment?.results.length === 0 && <span className="font-semibold ml-1">No results yet...</span>}
+            {assignment && assignment?.results.length === 0 && (
+              <span className="ml-1 font-semibold">No results yet...</span>
+            )}
           </div>
         </div>
       </div>

src/dashboards/Student.tsx

@@ -3,35 +3,69 @@ import ProgressBar from "@/components/Low/ProgressBar";
 import PayPalPayment from "@/components/PayPalPayment";
 import ProfileSummary from "@/components/ProfileSummary";
 import useAssignments from "@/hooks/useAssignments";
+import useInvites from "@/hooks/useInvites";
 import useStats from "@/hooks/useStats";
-import {Assignment} from "@/interfaces/results";
+import useUsers from "@/hooks/useUsers";
-import {CorporateUser, User} from "@/interfaces/user";
+import { Invite } from "@/interfaces/invite";
+import { Assignment } from "@/interfaces/results";
+import { CorporateUser, User } from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {getExamById} from "@/utils/exams";
+import { getExamById } from "@/utils/exams";
-import {getUserCorporate} from "@/utils/groups";
+import { getUserCorporate } from "@/utils/groups";
-import {MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
+import {
-import {averageScore, groupBySession} from "@/utils/stats";
+  MODULE_ARRAY,
-import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
+  sortByModule,
-import {PayPalButtons} from "@paypal/react-paypal-js";
+  sortByModuleName,
+} from "@/utils/moduleUtils";
+import { averageScore, groupBySession } from "@/utils/stats";
+import {
+  CreateOrderActions,
+  CreateOrderData,
+  OnApproveActions,
+  OnApproveData,
+  OrderResponseBody,
+} from "@paypal/paypal-js";
+import { PayPalButtons } from "@paypal/react-paypal-js";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize} from "lodash";
+import { capitalize } from "lodash";
 import moment from "moment";
 import Link from "next/link";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
-import {BsArrowRepeat, BsBook, BsClipboard, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
+import {
-import {toast} from "react-toastify";
+  BsArrowRepeat,
+  BsBook,
+  BsClipboard,
+  BsFileEarmarkText,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsPencil,
+  BsStar,
+} from "react-icons/bs";
+import { toast } from "react-toastify";
 
 interface Props {
   user: User;
 }
 
-export default function StudentDashboard({user}: Props) {
+export default function StudentDashboard({ user }: Props) {
-	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
+  const [corporateUserToShow, setCorporateUserToShow] =
+    useState<CorporateUser>();
 
-	const {stats} = useStats(user.id);
+  const { stats } = useStats(user.id);
-	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assignees: user?.id});
+  const { users } = useUsers();
+  const {
+    assignments,
+    isLoading: isAssignmentsLoading,
+    reload: reloadAssignments,
+  } = useAssignments({ assignees: user?.id });
+  const {
+    invites,
+    isLoading: isInvitesLoading,
+    reload: reloadInvites,
+  } = useInvites({ to: user.id });
 
   const router = useRouter();
 
@@ -46,7 +80,9 @@ export default function StudentDashboard({user}: Props) {
   }, [user]);
 
   const startAssignment = (assignment: Assignment) => {
-		const examPromises = assignment.exams.filter((e) => e.assignee === user.id).map((e) => getExamById(e.module, e.id));
+    const examPromises = assignment.exams
+      .filter((e) => e.assignee === user.id)
+      .map((e) => getExamById(e.module, e.id));
 
     Promise.all(examPromises).then((exams) => {
       if (exams.every((x) => !!x)) {
@@ -66,28 +102,103 @@ export default function StudentDashboard({user}: Props) {
     });
   };
 
+  const InviteCard = (invite: Invite) => {
+    const [isLoading, setIsLoading] = useState(false);
+
+    const inviter = users.find((u) => u.id === invite.from);
+    const name = !inviter
+      ? null
+      : inviter.type === "corporate"
+        ? inviter.corporateInformation?.companyInformation?.name || inviter.name
+        : inviter.name;
+
+    const decide = (decision: "accept" | "decline") => {
+      if (!confirm(`Are you sure you want to ${decision} this invite?`)) return;
+
+      setIsLoading(true);
+      axios
+        .get(`/api/invites/${decision}/${invite.id}`)
+        .then(() => {
+          toast.success(
+            `Successfully ${decision === "accept" ? "accepted" : "declined"} the invite!`,
+            { toastId: "success" },
+          );
+          reloadInvites();
+        })
+        .catch((e) => {
+          toast.success(`Something went wrong, please try again later!`, {
+            toastId: "error",
+          });
+          reloadInvites();
+        })
+        .finally(() => setIsLoading(false));
+    };
+
+    return (
+      <div className="border-mti-gray-anti-flash flex min-w-[200px] flex-col gap-6 rounded-xl border p-4 text-black">
+        <span>Invited by {name}</span>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => decide("accept")}
+            disabled={isLoading}
+            className="bg-mti-green-ultralight hover:bg-mti-green-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
+          >
+            {!isLoading && "Accept"}
+            {isLoading && (
+              <div className="flex items-center justify-center">
+                <BsArrowRepeat className="animate-spin text-white" size={25} />
+              </div>
+            )}
+          </button>
+          <button
+            onClick={() => decide("decline")}
+            disabled={isLoading}
+            className="bg-mti-red-ultralight hover:bg-mti-red-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
+          >
+            {!isLoading && "Decline"}
+            {isLoading && (
+              <div className="flex items-center justify-center">
+                <BsArrowRepeat className="animate-spin text-white" size={25} />
+              </div>
+            )}
+          </button>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <>
       {corporateUserToShow && (
-				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
+        <div className="absolute right-4 top-4 rounded-lg bg-neutral-200 px-2 py-1">
-					Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b>
+          Linked to:{" "}
+          <b>
+            {corporateUserToShow?.corporateInformation?.companyInformation
+              .name || corporateUserToShow.name}
+          </b>
         </div>
       )}
       <ProfileSummary
         user={user}
         items={[
           {
-						icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+            icon: (
+              <BsFileEarmarkText className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />
+            ),
             value: Object.keys(groupBySession(stats)).length,
             label: "Exams",
           },
           {
-						icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+            icon: (
+              <BsPencil className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />
+            ),
             value: stats.length,
             label: "Exercises",
           },
           {
-						icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+            icon: (
+              <BsStar className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />
+            ),
             value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
             label: "Average Score",
           },
@@ -95,23 +206,33 @@ export default function StudentDashboard({user}: Props) {
       />
 
       <section className="flex flex-col gap-1 md:gap-3">
-				<span className="font-bold text-lg">Bio</span>
+        <span className="text-lg font-bold">Bio</span>
         <span className="text-mti-gray-taupe">
-					{user.bio || "Your bio will appear here, you can change it by clicking on your name in the top right corner."}
+          {user.bio ||
+            "Your bio will appear here, you can change it by clicking on your name in the top right corner."}
         </span>
       </section>
 
       <section className="flex flex-col gap-1 md:gap-3">
-				<div className="flex gap-4 items-center">
+        <div className="flex items-center gap-4">
           <div
             onClick={reloadAssignments}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+            className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
-						<span className="font-bold text-lg text-mti-black">Assignments</span>
+          >
-						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
+            <span className="text-mti-black text-lg font-bold">
+              Assignments
+            </span>
+            <BsArrowRepeat
+              className={clsx(
+                "text-xl",
+                isAssignmentsLoading && "animate-spin",
+              )}
+            />
           </div>
         </div>
-				<span className="text-mti-gray-taupe flex gap-8 overflow-x-scroll scrollbar-hide">
+        <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-					{assignments.filter((a) => moment(a.endDate).isSameOrAfter(moment())).length === 0 &&
+          {assignments.filter((a) => moment(a.endDate).isSameOrAfter(moment()))
+            .length === 0 &&
             "Assignments will appear here. It seems that for now there are no assignments for you."}
           {assignments
             .filter((a) => moment(a.endDate).isSameOrAfter(moment()))
@@ -119,20 +240,28 @@ export default function StudentDashboard({user}: Props) {
             .map((assignment) => (
               <div
                 className={clsx(
-									"border border-mti-gray-anti-flash rounded-xl flex flex-col gap-6 p-4 min-w-[300px]",
+                  "border-mti-gray-anti-flash flex min-w-[300px] flex-col gap-6 rounded-xl border p-4",
-									assignment.results.map((r) => r.user).includes(user.id) && "border-mti-green-light",
+                  assignment.results.map((r) => r.user).includes(user.id) &&
+                    "border-mti-green-light",
                 )}
-								key={assignment.id}>
+                key={assignment.id}
+              >
                 <div className="flex flex-col gap-1">
-									<h3 className="font-semibold text-xl text-mti-black/90">{assignment.name}</h3>
+                  <h3 className="text-mti-black/90 text-xl font-semibold">
-									<span className="flex gap-1 justify-between">
+                    {assignment.name}
-										<span>{moment(assignment.startDate).format("DD/MM/YY, HH:mm")}</span>
+                  </h3>
+                  <span className="flex justify-between gap-1">
+                    <span>
+                      {moment(assignment.startDate).format("DD/MM/YY, HH:mm")}
+                    </span>
                     <span>-</span>
-										<span>{moment(assignment.endDate).format("DD/MM/YY, HH:mm")}</span>
+                    <span>
+                      {moment(assignment.endDate).format("DD/MM/YY, HH:mm")}
+                    </span>
                   </span>
                 </div>
-								<div className="flex justify-between w-full items-center">
+                <div className="flex w-full items-center justify-between">
-									<div className="grid grid-cols-2 gap-2 place-items-center justify-center w-fit min-w-[104px] -md:mt-2">
+                  <div className="-md:mt-2 grid w-fit min-w-[104px] grid-cols-2 place-items-center justify-center gap-2">
                     {assignment.exams
                       .filter((e) => e.assignee === user.id)
                       .map((e) => e.module)
@@ -142,38 +271,56 @@ export default function StudentDashboard({user}: Props) {
                           key={module}
                           data-tip={capitalize(module)}
                           className={clsx(
-														"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl tooltip",
+                            "-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
                             module === "reading" && "bg-ielts-reading",
                             module === "listening" && "bg-ielts-listening",
                             module === "writing" && "bg-ielts-writing",
                             module === "speaking" && "bg-ielts-speaking",
                             module === "level" && "bg-ielts-level",
-													)}>
+                          )}
-													{module === "reading" && <BsBook className="w-4 h-4" />}
+                        >
-													{module === "listening" && <BsHeadphones className="w-4 h-4" />}
+                          {module === "reading" && (
-													{module === "writing" && <BsPen className="w-4 h-4" />}
+                            <BsBook className="h-4 w-4" />
-													{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
+                          )}
-													{module === "level" && <BsClipboard className="w-4 h-4" />}
+                          {module === "listening" && (
+                            <BsHeadphones className="h-4 w-4" />
+                          )}
+                          {module === "writing" && (
+                            <BsPen className="h-4 w-4" />
+                          )}
+                          {module === "speaking" && (
+                            <BsMegaphone className="h-4 w-4" />
+                          )}
+                          {module === "level" && (
+                            <BsClipboard className="h-4 w-4" />
+                          )}
                         </div>
                       ))}
                   </div>
                   {!assignment.results.map((r) => r.user).includes(user.id) && (
                     <>
                       <div
-												className="tooltip w-full md:hidden h-full flex items-center justify-end pl-8"
+                        className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
-												data-tip="Your screen size is too small to perform an assignment">
+                        data-tip="Your screen size is too small to perform an assignment"
+                      >
                         <Button
-													disabled={moment(assignment.startDate).isAfter(moment())}
+                          disabled={moment(assignment.startDate).isAfter(
-													className="w-full h-full !rounded-xl"
+                            moment(),
-													variant="outline">
+                          )}
+                          className="h-full w-full !rounded-xl"
+                          variant="outline"
+                        >
                           Start
                         </Button>
                       </div>
                       <Button
-												disabled={moment(assignment.startDate).isAfter(moment())}
+                        disabled={moment(assignment.startDate).isAfter(
-												className="w-full max-w-[50%] h-full !rounded-xl -md:hidden"
+                          moment(),
+                        )}
+                        className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
                         onClick={() => startAssignment(assignment)}
-												variant="outline">
+                        variant="outline"
+                      >
                         Start
                       </Button>
                     </>
@@ -182,8 +329,9 @@ export default function StudentDashboard({user}: Props) {
                     <Button
                       onClick={() => router.push("/record")}
                       color="green"
-											className="w-full max-w-[50%] h-full !rounded-xl -md:hidden"
+                      className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
-											variant="outline">
+                      variant="outline"
+                    >
                       Submitted
                     </Button>
                   )}
@@ -193,23 +341,60 @@ export default function StudentDashboard({user}: Props) {
         </span>
       </section>
 
-			<section className="flex flex-col gap-3">
+      {invites.length > 0 && (
-				<span className="font-bold text-lg">Score History</span>
+        <section className="flex flex-col gap-1 md:gap-3">
-				<div className="grid -md:grid-rows-4 md:grid-cols-2 gap-6">
+          <div className="flex items-center gap-4">
-					{MODULE_ARRAY.map((module) => (
+            <div
-						<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4" key={module}>
+              onClick={reloadInvites}
-							<div className="flex gap-2 md:gap-3 items-center">
+              className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
-								<div className="w-8 h-8 md:w-12 md:h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
+            >
-									{module === "reading" && <BsBook className="text-ielts-reading w-4 h-4 md:w-5 md:h-5" />}
+              <span className="text-mti-black text-lg font-bold">Invites</span>
-									{module === "listening" && <BsHeadphones className="text-ielts-listening w-4 h-4 md:w-5 md:h-5" />}
+              <BsArrowRepeat
-									{module === "writing" && <BsPen className="text-ielts-writing w-4 h-4 md:w-5 md:h-5" />}
+                className={clsx("text-xl", isInvitesLoading && "animate-spin")}
-									{module === "speaking" && <BsMegaphone className="text-ielts-speaking w-4 h-4 md:w-5 md:h-5" />}
+              />
-									{module === "level" && <BsClipboard className="text-ielts-level w-4 h-4 md:w-5 md:h-5" />}
             </div>
-								<div className="flex justify-between w-full">
+          </div>
-									<span className="font-bold md:font-extrabold text-sm">{capitalize(module)}</span>
+          <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-									<span className="text-sm font-normal text-mti-gray-dim">
+            {invites.map((invite) => (
-										Level {user.levels[module] || 0} / Level {user.desiredLevels[module] || 9}
+              <InviteCard key={invite.id} {...invite} />
+            ))}
+          </span>
+        </section>
+      )}
+
+      <section className="flex flex-col gap-3">
+        <span className="text-lg font-bold">Score History</span>
+        <div className="-md:grid-rows-4 grid gap-6 md:grid-cols-2">
+          {MODULE_ARRAY.map((module) => (
+            <div
+              className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4"
+              key={module}
+            >
+              <div className="flex items-center gap-2 md:gap-3">
+                <div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
+                  {module === "reading" && (
+                    <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "listening" && (
+                    <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "writing" && (
+                    <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "speaking" && (
+                    <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "level" && (
+                    <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                </div>
+                <div className="flex w-full justify-between">
+                  <span className="text-sm font-bold md:font-extrabold">
+                    {capitalize(module)}
+                  </span>
+                  <span className="text-mti-gray-dim text-sm font-normal">
+                    Level {user.levels[module] || 0} / Level{" "}
+                    {user.desiredLevels[module] || 9}
                   </span>
                 </div>
               </div>
@@ -217,8 +402,10 @@ export default function StudentDashboard({user}: Props) {
                 <ProgressBar
                   color={module}
                   label=""
-									percentage={Math.round((user.levels[module] * 100) / user.desiredLevels[module])}
+                  percentage={Math.round(
-									className="w-full h-2"
+                    (user.levels[module] * 100) / user.desiredLevels[module],
+                  )}
+                  className="h-2 w-full"
                 />
               </div>
             </div>

src/email/templates/receivedInvite.handlebars

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<div style="background-color: #ffffff; color: #353338;"
+  class="h-full min-h-screen w-full flex flex-col p-8 gap-16 text-base">
+  <img src="/logo_title.png" class="w-48 h-48 self-center" />
+  <div>
+    <span>Hello {{name}},</span>
+    <br/>
+    <br/>
+    <span>You have been invited to join {{corporateName}}'s group!</span>
+    <br />
+    <br/>
+    <span>Please access the platform to accept or decline the invite.</span>
+  </div>
+  <br />
+  <br />
+  <div>
+    <span>Thanks, <br /> Your EnCoach team</span>
+  </div>
+</div>
+
+</html>

src/email/templates/respondedInvite.handlebars

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<div style="background-color: #ffffff; color: #353338;"
+  class="h-full min-h-screen w-full flex flex-col p-8 gap-16 text-base">
+  <img src="/logo_title.png" class="w-48 h-48 self-center" />
+  <div>
+    <span>Hello {{corporateName}},</span>
+    <br />
+    <br />
+    <span>{{name}} has decided to {{decision}} your invite!</span>
+  </div>
+  <br />
+  <br />
+  <div>
+    <span>Thanks, <br /> Your EnCoach team</span>
+  </div>
+</div>
+
+</html>

src/email/templates/submittedFeedback.handlebars

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<div style="background-color: #ffffff; color: #353338;"
+  class="h-full min-h-screen w-full flex flex-col p-8 gap-16 text-base">
+  <img src="/logo_title.png" class="w-48 h-48 self-center" />
+  <div>
+    <span>Thank you for your ticket submission!</span>
+    <br/>
+    <span>Here is the ticket's information:</span>
+    <br/>
+    <br/>
+    <span><b>ID:</b> {{id}}</span><br/>
+    <span><b>Subject:</b> {{subject}}</span><br/>
+    <span><b>Reporter:</b> {{reporter.name}} - {{reporter.email}}</span><br/>
+    <span><b>Date:</b> {{date}}</span><br/>
+    <span><b>Type:</b> {{type}}</span><br/>
+    <span><b>Page:</b> {{reportedFrom}}</span>
+    <br/>
+    <br/>
+    <span><b>Description:</b> {{description}}</span><br/>
+  </div>
+  <br />
+  <br />
+  <div>
+    <span>Thanks, <br /> Your EnCoach team</span>
+  </div>
+</div>
+
+</html>

src/exams/Finish.tsx

@@ -1,17 +1,26 @@
 import Button from "@/components/Low/Button";
 import ModuleTitle from "@/components/Medium/ModuleTitle";
-import {moduleResultText} from "@/constants/ielts";
+import { moduleResultText } from "@/constants/ielts";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {calculateBandScore} from "@/utils/score";
+import { calculateBandScore } from "@/utils/score";
 import clsx from "clsx";
 import Link from "next/link";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
-import {Fragment, useEffect, useState} from "react";
+import { Fragment, useEffect, useState } from "react";
-import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
+import {
-import {LevelScore} from "@/constants/ielts";
+  BsArrowCounterclockwise,
-import {getLevelScore} from "@/utils/score";
+  BsBook,
+  BsClipboard,
+  BsEyeFill,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsShareFill,
+} from "react-icons/bs";
+import { LevelScore } from "@/constants/ielts";
+import { getLevelScore } from "@/utils/score";
 
 interface Score {
   module: Module;
@@ -28,15 +37,28 @@ interface Props {
   onViewResults: () => void;
 }
 
-export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
+export default function Finish({
+  user,
+  scores,
+  modules,
+  isLoading,
+  onViewResults,
+}: Props) {
   const [selectedModule, setSelectedModule] = useState(modules[0]);
-	const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
+  const [selectedScore, setSelectedScore] = useState<Score>(
+    scores.find((x) => x.module === modules[0])!,
+  );
 
   const exams = useExamStore((state) => state.exams);
 
-	useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
+  useEffect(
+    () => setSelectedScore(scores.find((x) => x.module === selectedModule)!),
+    [scores, selectedModule],
+  );
+  useEffect(() => console.log(scores), [scores]);
 
-	const moduleColors: {[key in Module]: {progress: string; inner: string}} = {
+  const moduleColors: { [key in Module]: { progress: string; inner: string } } =
+    {
       reading: {
         progress: "text-ielts-reading",
         inner: "bg-ielts-reading-light",
@@ -68,7 +90,12 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
     return exam.exercises.length;
   };
 
-	const bandScore: number = calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus);
+  const bandScore: number = calculateBandScore(
+    selectedScore.correct,
+    selectedScore.total,
+    selectedModule,
+    user.focus,
+  );
 
   const showLevel = (level: number) => {
     if (selectedModule === "level") {
@@ -86,7 +113,7 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 
   return (
     <>
-			<div className="w-full min-h-full h-fit flex flex-col items-center justify-between gap-8">
+      <div className="flex h-fit min-h-full w-full flex-col items-center justify-between gap-8">
         <ModuleTitle
           module={selectedModule}
           totalExercises={getTotalExercises()}
@@ -99,10 +126,13 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div
               onClick={() => setSelectedModule("reading")}
               className={clsx(
-								"flex gap-2 items-center rounded-xl p-4 cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:bg-ielts-reading hover:text-white",
+                "hover:bg-ielts-reading flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "reading" ? "bg-ielts-reading text-white" : "bg-mti-gray-smoke text-ielts-reading",
+                selectedModule === "reading"
-							)}>
+                  ? "bg-ielts-reading text-white"
-							<BsBook className="w-6 h-6" />
+                  : "bg-mti-gray-smoke text-ielts-reading",
+              )}
+            >
+              <BsBook className="h-6 w-6" />
               <span className="font-semibold">Reading</span>
             </div>
           )}
@@ -110,10 +140,13 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div
               onClick={() => setSelectedModule("listening")}
               className={clsx(
-								"flex gap-2 items-center rounded-xl p-4 cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:bg-ielts-listening hover:text-white",
+                "hover:bg-ielts-listening flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "listening" ? "bg-ielts-listening text-white" : "bg-mti-gray-smoke text-ielts-listening",
+                selectedModule === "listening"
-							)}>
+                  ? "bg-ielts-listening text-white"
-							<BsHeadphones className="w-6 h-6" />
+                  : "bg-mti-gray-smoke text-ielts-listening",
+              )}
+            >
+              <BsHeadphones className="h-6 w-6" />
               <span className="font-semibold">Listening</span>
             </div>
           )}
@@ -121,10 +154,13 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div
               onClick={() => setSelectedModule("writing")}
               className={clsx(
-								"flex gap-2 items-center rounded-xl p-4 cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:bg-ielts-writing hover:text-white",
+                "hover:bg-ielts-writing flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "writing" ? "bg-ielts-writing text-white" : "bg-mti-gray-smoke text-ielts-writing",
+                selectedModule === "writing"
-							)}>
+                  ? "bg-ielts-writing text-white"
-							<BsPen className="w-6 h-6" />
+                  : "bg-mti-gray-smoke text-ielts-writing",
+              )}
+            >
+              <BsPen className="h-6 w-6" />
               <span className="font-semibold">Writing</span>
             </div>
           )}
@@ -132,10 +168,13 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div
               onClick={() => setSelectedModule("speaking")}
               className={clsx(
-								"flex gap-2 items-center rounded-xl p-4 cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:bg-ielts-speaking hover:text-white",
+                "hover:bg-ielts-speaking flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "speaking" ? "bg-ielts-speaking text-white" : "bg-mti-gray-smoke text-ielts-speaking",
+                selectedModule === "speaking"
-							)}>
+                  ? "bg-ielts-speaking text-white"
-							<BsMegaphone className="w-6 h-6" />
+                  : "bg-mti-gray-smoke text-ielts-speaking",
+              )}
+            >
+              <BsMegaphone className="h-6 w-6" />
               <span className="font-semibold">Speaking</span>
             </div>
           )}
@@ -143,18 +182,31 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div
               onClick={() => setSelectedModule("level")}
               className={clsx(
-								"flex gap-2 items-center rounded-xl p-4 cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:bg-ielts-level hover:text-white",
+                "hover:bg-ielts-level flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "level" ? "bg-ielts-level text-white" : "bg-mti-gray-smoke text-ielts-level",
+                selectedModule === "level"
-							)}>
+                  ? "bg-ielts-level text-white"
-							<BsClipboard className="w-6 h-6" />
+                  : "bg-mti-gray-smoke text-ielts-level",
+              )}
+            >
+              <BsClipboard className="h-6 w-6" />
               <span className="font-semibold">Level</span>
             </div>
           )}
         </div>
         {isLoading && (
-					<div className="w-fit h-fit absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 animate-pulse flex flex-col gap-12 items-center">
+          <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
-						<span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
+            <span
-						<span className={clsx("font-bold text-2xl text-center", moduleColors[selectedModule].progress)}>
+              className={clsx(
+                "loading loading-infinity w-32",
+                moduleColors[selectedModule].progress,
+              )}
+            />
+            <span
+              className={clsx(
+                "text-center text-2xl font-bold",
+                moduleColors[selectedModule].progress,
+              )}
+            >
               Evaluating your answers, please be patient...
               <br />
               You can also check it later on your records page!
@@ -162,45 +214,66 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
           </div>
         )}
         {!isLoading && (
-					<div className="w-full flex gap-9 mt-32 items-center justify-between mb-20">
+          <div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
-						<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
+            <span className="max-w-3xl">
+              {moduleResultText(selectedModule, bandScore)}
+            </span>
             <div className="flex gap-9 px-16">
               <div
-								className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
+                className={clsx(
+                  "radial-progress overflow-hidden",
+                  moduleColors[selectedModule].progress,
+                )}
                 style={
-									{"--value": (selectedScore.correct / selectedScore.total) * 100, "--thickness": "12px", "--size": "13rem"} as any
+                  {
-								}>
+                    "--value":
+                      (selectedScore.correct / selectedScore.total) * 100,
+                    "--thickness": "12px",
+                    "--size": "13rem",
+                  } as any
+                }
+              >
                 <div
                   className={clsx(
-										"w-48 h-48 rounded-full flex flex-col items-center justify-center",
+                    "flex h-48 w-48 flex-col items-center justify-center rounded-full",
                     moduleColors[selectedModule].inner,
-									)}>
+                  )}
+                >
                   <span className="text-xl">Level</span>
                   {showLevel(bandScore)}
                 </div>
               </div>
               <div className="flex flex-col gap-5">
                 <div className="flex gap-2">
-									<div className="w-3 h-3 bg-mti-red-light rounded-full mt-1" />
+                  <div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" />
                   <div className="flex flex-col">
                     <span className="text-mti-red-light">
-											{(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
+                      {(
+                        ((selectedScore.total - selectedScore.missing) /
+                          selectedScore.total) *
+                        100
+                      ).toFixed(0)}
+                      %
                     </span>
                     <span className="text-lg">Completion</span>
                   </div>
                 </div>
                 <div className="flex gap-2">
-									<div className="w-3 h-3 bg-mti-purple-light rounded-full mt-1" />
+                  <div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
                   <div className="flex flex-col">
-										<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
+                    <span className="text-mti-purple-light">
+                      {selectedScore.correct.toString().padStart(2, "0")}
+                    </span>
                     <span className="text-lg">Correct</span>
                   </div>
                 </div>
                 <div className="flex gap-2">
-									<div className="w-3 h-3 bg-mti-rose-light rounded-full mt-1" />
+                  <div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
                   <div className="flex flex-col">
                     <span className="text-mti-rose-light">
-											{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
+                      {(selectedScore.total - selectedScore.correct)
+                        .toString()
+                        .padStart(2, "0")}
                     </span>
                     <span className="text-lg">Wrong</span>
                   </div>
@@ -212,28 +285,30 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
       </div>
 
       {!isLoading && (
-				<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+        <div className="absolute bottom-8 left-0 flex w-full justify-between gap-8 self-end px-8">
           <div className="flex gap-8">
-						<div className="w-fit flex flex-col items-center gap-1 cursor-pointer">
+            <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
               <button
                 onClick={() => window.location.reload()}
-								className="w-11 h-11 rounded-full bg-mti-purple-light hover:bg-mti-purple flex items-center justify-center transition duration-300 ease-in-out">
+                className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
-								<BsArrowCounterclockwise className="text-white w-7 h-7" />
+              >
+                <BsArrowCounterclockwise className="h-7 w-7 text-white" />
               </button>
               <span>Play Again</span>
             </div>
-						<div className="w-fit flex flex-col items-center gap-1 cursor-pointer">
+            <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
               <button
                 onClick={onViewResults}
-								className="w-11 h-11 rounded-full bg-mti-purple-light hover:bg-mti-purple flex items-center justify-center transition duration-300 ease-in-out">
+                className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
-								<BsEyeFill className="text-white w-7 h-7" />
+              >
+                <BsEyeFill className="h-7 w-7 text-white" />
               </button>
               <span>Review Answers</span>
             </div>
           </div>
 
-					<Link href="/" className="max-w-[200px] w-full self-end">
+          <Link href="/" className="w-full max-w-[200px] self-end">
-						<Button color="purple" className="max-w-[200px] self-end w-full">
+            <Button color="purple" className="w-full max-w-[200px] self-end">
               Dashboard
             </Button>
           </Link>

src/exams/pdf/group.test.report.tsx

@@ -112,11 +112,6 @@ const GroupTestReport = ({
           Candidate Information:
         </Text>
         <View style={styles.textMargin}>
-          <Text style={defaultTextStyle}>Name: {name}</Text>
-          <Text style={defaultTextStyle}>ID: {id}</Text>
-          <Text style={defaultTextStyle}>Email: {email}</Text>
-          <Text style={defaultTextStyle}>Gender: {gender}</Text>
-          <Text style={defaultTextStyle}>Passport ID: {passportId}</Text>
           <Text style={defaultTextStyle}>
             Total Number of Students: {numberOfStudents}
           </Text>
@@ -242,10 +237,10 @@ const GroupTestReport = ({
               Sr
             </Text>
             <Text style={customStyles.tableCell}>Candidate Name</Text>
-            <Text style={customStyles.tableCell}>Email ID</Text>
+            <Text style={customStyles.tableCell}>
-            <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
+              Passport ID
-              Gender
             </Text>
+            <Text style={customStyles.tableCell}>Email ID</Text>
             <Text style={[customStyles.tableCell, { maxWidth: "64px" }]}>
               Date of test
             </Text>
@@ -255,7 +250,19 @@ const GroupTestReport = ({
             {showLevel && <Text style={customStyles.tableCell}>Level</Text>}
           </View>
           {studentsData.map(
-            ({ id, name, email, gender, date, result, level }, index) => (
+            (
+              {
+                id,
+                name,
+                email,
+                gender,
+                date,
+                result,
+                level,
+                passportId: studentPassportId,
+              },
+              index
+            ) => (
               <View
                 style={[
                   customStyles.tableRow,
@@ -273,10 +280,8 @@ const GroupTestReport = ({
                   {index + 1}
                 </Text>
                 <Text style={customStyles.tableCell}>{name}</Text>
+                <Text style={customStyles.tableCell}>{studentPassportId}</Text>
                 <Text style={customStyles.tableCell}>{email}</Text>
-                <Text style={[customStyles.tableCell, { maxWidth: "48px" }]}>
-                  {gender}
-                </Text>
                 <Text style={[customStyles.tableCell, { maxWidth: "64px" }]}>
                   {date}
                 </Text>

src/exams/pdf/test.report.footer.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import { styles } from "./styles";
 import { View, Text } from "@react-pdf/renderer";
 
-const TestReportFooter = () => (
+interface Props {
+  userId?: string;
+}
+
+const TestReportFooter = ({ userId }: Props) => (
   <View
     style={[
       {
@@ -25,10 +29,23 @@ const TestReportFooter = () => (
         </Text>
       </View>
       <View>
-        <Text style={styles.textBold}>Confidential – <Text style={[styles.textFont, styles.textNormal]}>circulated for concern people</Text></Text>
+        <Text style={styles.textBold}>
+          Confidential –{" "}
+          <Text style={[styles.textFont, styles.textNormal]}>
+            circulated for concern people
+          </Text>
+        </Text>
       </View>
     </View>
-    <View style={{ paddingTop: 10 }}>
+    {userId && (
+      <View>
+        <Text style={styles.textBold}>
+          User ID:{" "}
+          <Text style={[styles.textFont, styles.textNormal]}>{userId}</Text>
+        </Text>
+      </View>
+    )}
+    <View style={{ paddingTop: 4 }}>
       <Text style={styles.textBold}>Declaration</Text>
       <Text style={{ paddingTop: 5 }}>
         We hereby declare that exam results on our platform, assessed by AI, are

src/exams/pdf/test.report.tsx

@@ -124,7 +124,7 @@ const TestReport = ({
           </View>
         </View>
         <View style={[{ paddingTop: 30 }, styles.separator]}></View>
-        <TestReportFooter />
+        <TestReportFooter userId={id}/>
       </Page>
       <Page style={styles.body}>
         <View>
@@ -165,7 +165,7 @@ const TestReport = ({
         </View>
         <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
         <View style={{ flexGrow: 1 }}></View>
-        <TestReportFooter />
+        <TestReportFooter userId={id}/>
       </Page>
     </Document>
   );

src/hooks/useInvites.tsx

@@ -0,0 +1,35 @@
+import { Invite } from "@/interfaces/invite";
+import { Ticket } from "@/interfaces/ticket";
+import { Code, Group, User } from "@/interfaces/user";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function useInvites({
+  from,
+  to,
+}: {
+  from?: string;
+  to?: string;
+}) {
+  const [invites, setInvites] = useState<Invite[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = () => {
+    const filters: ((i: Invite) => boolean)[] = [];
+    if (from) filters.push((i: Invite) => i.from === from);
+    if (to) filters.push((i: Invite) => i.to === to);
+
+    setIsLoading(true);
+    axios
+      .get<Invite[]>(`/api/invites`)
+      .then((response) =>
+        setInvites(filters.reduce((d, f) => d.filter(f), response.data)),
+      )
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(getData, [to, from]);
+
+  return { invites, isLoading, isError, reload: getData };
+}

src/hooks/useTickets.tsx

@@ -0,0 +1,22 @@
+import { Ticket } from "@/interfaces/ticket";
+import { Code, Group, User } from "@/interfaces/user";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function useTickets() {
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = () => {
+    setIsLoading(true);
+    axios
+      .get<Ticket[]>(`/api/tickets`)
+      .then((response) => setTickets(response.data))
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(getData, []);
+
+  return { tickets, isLoading, isError, reload: getData };
+}

src/interfaces/invite.ts

@@ -0,0 +1,5 @@
+export interface Invite {
+  id: string;
+  from: string;
+  to: string;
+}

src/interfaces/module.scores.ts

@@ -19,4 +19,5 @@ export interface StudentData {
 	result: string;
 	level?: string;
 	bandScore: number;
+	passportId?: string;
 }

src/interfaces/ticket.ts

@@ -0,0 +1,34 @@
+import { Type } from "./user";
+
+export interface Ticket {
+  id: string;
+  date: string;
+  status: TicketStatus;
+  type: TicketType;
+  reporter: TicketReporter;
+  reportedFrom: string;
+  description: string;
+  subject: string;
+  assignedTo?: string;
+}
+
+export interface TicketReporter {
+  id: string;
+  name: string;
+  email: string;
+  type: Type;
+}
+
+export type TicketType = "feedback" | "bug" | "help";
+export const TicketTypeLabel: { [key in TicketType]: string } = {
+  feedback: "Feedback",
+  bug: "Bug",
+  help: "Help",
+};
+
+export type TicketStatus = "submitted" | "in-progress" | "completed";
+export const TicketStatusLabel: { [key in TicketStatus]: string } = {
+  submitted: "Submitted",
+  "in-progress": "In Progress",
+  completed: "Completed",
+};

src/pages/(admin)/BatchCodeGenerator.tsx

@@ -1,25 +1,27 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import {PERMISSIONS} from "@/constants/userPermissions";
+import { PERMISSIONS } from "@/constants/userPermissions";
 import useUsers from "@/hooks/useUsers";
-import {Type, User} from "@/interfaces/user";
+import { Type, User } from "@/interfaces/user";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize, uniqBy} from "lodash";
+import { capitalize, uniqBy } from "lodash";
 import moment from "moment";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import ReactDatePicker from "react-datepicker";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
 import ShortUniqueId from "short-unique-id";
-import {useFilePicker} from "use-file-picker";
+import { useFilePicker } from "use-file-picker";
 import readXlsxFile from "read-excel-file";
 import Modal from "@/components/Modal";
-import {BsQuestionCircleFill} from "react-icons/bs";
+import { BsFileEarmarkEaselFill, BsQuestionCircleFill } from "react-icons/bs";
 
-const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
+const EMAIL_REGEX = new RegExp(
+  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/,
+);
 
-const USER_TYPE_PERMISSIONS: {[key in Type]: Type[]} = {
+const USER_TYPE_PERMISSIONS: { [key in Type]: Type[] } = {
   student: [],
   teacher: [],
   agent: [],
@@ -28,17 +30,19 @@ const USER_TYPE_PERMISSIONS: {[key in Type]: Type[]} = {
   developer: ["student", "teacher", "agent", "corporate", "admin", "developer"],
 };
 
-export default function BatchCodeGenerator({user}: {user: User}) {
+export default function BatchCodeGenerator({ user }: { user: User }) {
-	const [infos, setInfos] = useState<{email: string; name: string; passport_id: string}[]>([]);
+  const [infos, setInfos] = useState<
+    { email: string; name: string; passport_id: string }[]
+  >([]);
   const [isLoading, setIsLoading] = useState(false);
   const [expiryDate, setExpiryDate] = useState<Date | null>(null);
   const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
   const [type, setType] = useState<Type>("student");
   const [showHelp, setShowHelp] = useState(false);
 
-	const {users} = useUsers();
+  const { users } = useUsers();
 
-	const {openFilePicker, filesContent, clear} = useFilePicker({
+  const { openFilePicker, filesContent, clear } = useFilePicker({
     accept: ".xlsx",
     multiple: false,
     readAs: "ArrayBuffer",
@@ -62,10 +66,17 @@ export default function BatchCodeGenerator({user}: {user: User}) {
           const information = uniqBy(
             rows
               .map((row) => {
-								const [firstName, lastName, country, passport_id, email, ...phone] = row as string[];
+                const [
-								return EMAIL_REGEX.test(email.toString().trim()) && !users.map((u) => u.email).includes(email.toString().trim())
+                  firstName,
+                  lastName,
+                  country,
+                  passport_id,
+                  email,
+                  ...phone
+                ] = row as string[];
+                return EMAIL_REGEX.test(email.toString().trim())
                   ? {
-											email: email.toString().trim(),
+                      email: email.toString().trim().toLowerCase(),
                       name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
                       passport_id: passport_id?.toString().trim() || undefined,
                     }
@@ -94,37 +105,84 @@ export default function BatchCodeGenerator({user}: {user: User}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filesContent]);
 
-	const generateCode = (type: Type) => {
+  const generateAndInvite = async () => {
-		if (!confirm(`You are about to generate ${infos.length} codes, are you sure you want to continue?`)) return;
+    const newUsers = infos.filter(
+      (x) => !users.map((u) => u.email).includes(x.email),
+    );
+    const existingUsers = infos
+      .filter((x) => users.map((u) => u.email).includes(x.email))
+      .map((i) => users.find((u) => u.email === i.email))
+      .filter((x) => !!x && x.type === "student") as User[];
 
+    const newUsersSentence =
+      newUsers.length > 0 ? `generate ${newUsers.length} code(s)` : undefined;
+    const existingUsersSentence =
+      existingUsers.length > 0
+        ? `invite ${existingUsers.length} registered student(s)`
+        : undefined;
+    if (
+      !confirm(
+        `You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`,
+      )
+    )
+      return;
+
+    setIsLoading(true);
+    Promise.all(
+      existingUsers.map(
+        async (u) =>
+          await axios.post(`/api/invites`, { to: u.id, from: user.id }),
+      ),
+    )
+      .then(() =>
+        toast.success(
+          `Successfully invited ${existingUsers.length} registered student(s)!`,
+        ),
+      )
+      .finally(() => {
+        if (newUsers.length === 0) setIsLoading(false);
+      });
+
+    if (newUsers.length > 0) generateCode(type, newUsers);
+    setInfos([]);
+  };
+
+  const generateCode = (type: Type, informations: typeof infos) => {
     const uid = new ShortUniqueId();
-		const codes = infos.map(() => uid.randomUUID(6));
+    const codes = informations.map(() => uid.randomUUID(6));
 
     setIsLoading(true);
     axios
-			.post<{ok: boolean; valid?: number; reason?: string}>("/api/code", {type, codes, infos: infos, expiryDate})
+      .post<{ ok: boolean; valid?: number; reason?: string }>("/api/code", {
-			.then(({data, status}) => {
+        type,
+        codes,
+        infos: informations,
+        expiryDate,
+      })
+      .then(({ data, status }) => {
         if (data.ok) {
           toast.success(
-						`Successfully generated${data.valid ? ` ${data.valid}/${infos.length}` : ""} ${capitalize(
+            `Successfully generated${data.valid ? ` ${data.valid}/${informations.length}` : ""} ${capitalize(
               type,
             )} codes and they have been notified by e-mail!`,
-						{toastId: "success"},
+            { toastId: "success" },
           );
           return;
         }
 
         if (status === 403) {
-					toast.error(data.reason, {toastId: "forbidden"});
+          toast.error(data.reason, { toastId: "forbidden" });
         }
       })
-			.catch(({response: {status, data}}) => {
+      .catch(({ response: { status, data } }) => {
         if (status === 403) {
-					toast.error(data.reason, {toastId: "forbidden"});
+          toast.error(data.reason, { toastId: "forbidden" });
           return;
         }
 
-				toast.error(`Something went wrong, please try again later!`, {toastId: "error"});
+        toast.error(`Something went wrong, please try again later!`, {
+          toastId: "error",
+        });
       })
       .finally(() => {
         setIsLoading(false);
@@ -134,18 +192,30 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 
   return (
     <>
-			<Modal isOpen={showHelp} onClose={() => setShowHelp(false)} title="Excel File Format">
+      <Modal
+        isOpen={showHelp}
+        onClose={() => setShowHelp(false)}
+        title="Excel File Format"
+      >
         <div className="mt-4 flex flex-col gap-2">
           <span>Please upload an Excel file with the following format:</span>
           <table className="w-full">
             <thead>
               <tr>
-								<th className="border border-neutral-200 px-2 py-1">First Name</th>
+                <th className="border border-neutral-200 px-2 py-1">
-								<th className="border border-neutral-200 px-2 py-1">Last Name</th>
+                  First Name
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Last Name
+                </th>
                 <th className="border border-neutral-200 px-2 py-1">Country</th>
-								<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Passport/National ID
+                </th>
                 <th className="border border-neutral-200 px-2 py-1">E-mail</th>
-								<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Phone Number
+                </th>
               </tr>
             </thead>
           </table>
@@ -154,34 +224,55 @@ export default function BatchCodeGenerator({user}: {user: User}) {
             <ul>
               <li>- All incorrect e-mails will be ignored;</li>
               <li>- All already registered e-mails will be ignored;</li>
-							<li>- You may have a header row with the format above, however, it is not necessary;</li>
+              <li>
-							<li>- All of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.</li>
+                - You may have a header row with the format above, however, it
+                is not necessary;
+              </li>
+              <li>
+                - All of the e-mails in the file will receive an e-mail to join
+                EnCoach with the role selected below.
+              </li>
             </ul>
           </span>
         </div>
       </Modal>
-			<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
+      <div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
-				<div className="flex justify-between items-end">
+        <div className="flex items-end justify-between">
-					<label className="font-normal text-base text-mti-gray-dim">Choose an Excel file</label>
+          <label className="text-mti-gray-dim text-base font-normal">
-					<div className="cursor-pointer tooltip" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
+            Choose an Excel file
+          </label>
+          <div
+            className="tooltip cursor-pointer"
+            data-tip="Excel File Format"
+            onClick={() => setShowHelp(true)}
+          >
             <BsQuestionCircleFill />
           </div>
         </div>
-				<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
+        <Button
+          onClick={openFilePicker}
+          isLoading={isLoading}
+          disabled={isLoading}
+        >
           {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
         </Button>
         {user && (user.type === "developer" || user.type === "admin") && (
           <>
-						<div className="flex -md:flex-row md:flex-col -md:items-center 2xl:flex-row 2xl:items-center justify-between gap-2">
+            <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-							<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
+              <label className="text-mti-gray-dim text-base font-normal">
-							<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled}>
+                Expiry Date
+              </label>
+              <Checkbox
+                isChecked={isExpiryDateEnabled}
+                onChange={setIsExpiryDateEnabled}
+              >
                 Enabled
               </Checkbox>
             </div>
             {isExpiryDateEnabled && (
               <ReactDatePicker
                 className={clsx(
-									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                  "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
                   "hover:border-mti-purple tooltip",
                   "transition duration-300 ease-in-out",
                 )}
@@ -193,14 +284,19 @@ export default function BatchCodeGenerator({user}: {user: User}) {
             )}
           </>
         )}
-				<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
+        <label className="text-mti-gray-dim text-base font-normal">
+          Select the type of user they should be
+        </label>
         {user && (
           <select
             defaultValue="student"
             onChange={(e) => setType(e.target.value as typeof user.type)}
-						className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+            className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none"
+          >
             {Object.keys(USER_TYPE_LABELS)
-							.filter((x) => USER_TYPE_PERMISSIONS[user.type].includes(x as Type))
+              .filter((x) =>
+                USER_TYPE_PERMISSIONS[user.type].includes(x as Type),
+              )
               .map((type) => (
                 <option key={type} value={type}>
                   {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
@@ -208,7 +304,12 @@ export default function BatchCodeGenerator({user}: {user: User}) {
               ))}
           </select>
         )}
-				<Button onClick={() => generateCode(type)} disabled={infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)}>
+        <Button
+          onClick={generateAndInvite}
+          disabled={
+            infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)
+          }
+        >
           Generate & Send
         </Button>
       </div>

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

@@ -1,26 +1,28 @@
 import Button from "@/components/Low/Button";
-import Checkbox from "@/components/Low/Checkbox";
 import Input from "@/components/Low/Input";
+import Modal from "@/components/Modal";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {Module} from "@/interfaces";
+import { Group, User } from "@/interfaces/user";
-import {Group, User} from "@/interfaces/user";
+import {
-import {Disclosure, Transition} from "@headlessui/react";
+  createColumnHelper,
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import axios from "axios";
-import clsx from "clsx";
+import { capitalize, uniq } from "lodash";
-import {capitalize, uniq, uniqBy} from "lodash";
+import { useEffect, useState } from "react";
-import {useEffect, useRef, useState} from "react";
+import { BsPencil, BsQuestionCircleFill, BsTrash } from "react-icons/bs";
-import {BsCheck, BsDash, BsPencil, BsPlus, BsQuestionCircleFill, BsTrash} from "react-icons/bs";
-import {toast} from "react-toastify";
 import Select from "react-select";
-import {uuidv4} from "@firebase/util";
+import { toast } from "react-toastify";
-import {useFilePicker} from "use-file-picker";
-import Modal from "@/components/Modal";
 import readXlsxFile from "read-excel-file";
+import { useFilePicker } from "use-file-picker";
 
 const columnHelper = createColumnHelper<Group>();
-const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
+const EMAIL_REGEX = new RegExp(
+  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/,
+);
 
 interface CreateDialogProps {
   user: User;
@@ -29,11 +31,17 @@ interface CreateDialogProps {
   onClose: () => void;
 }
 
-const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
+const CreatePanel = ({ user, users, group, onClose }: CreateDialogProps) => {
-	const [name, setName] = useState<string | undefined>(group?.name || undefined);
+  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 || []);
+  const [participants, setParticipants] = useState<string[]>(
-	const {openFilePicker, filesContent, clear} = useFilePicker({
+    group?.participants || [],
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { openFilePicker, filesContent, clear } = useFilePicker({
     accept: ".xlsx",
     multiple: false,
     readAs: "ArrayBuffer",
@@ -41,13 +49,18 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 
   useEffect(() => {
     if (filesContent.length > 0) {
+      setIsLoading(true);
+
       const file = filesContent[0];
       readXlsxFile(file.content).then((rows) => {
         const emails = uniq(
           rows
             .map((row) => {
               const [email] = row as string[];
-							return EMAIL_REGEX.test(email) && !users.map((u) => u.email).includes(email) ? email.toString().trim() : undefined;
+              return EMAIL_REGEX.test(email) &&
+                !users.map((u) => u.email).includes(email)
+                ? email.toString().trim()
+                : undefined;
             })
             .filter((x) => !!x),
         );
@@ -55,13 +68,18 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
         if (emails.length === 0) {
           toast.error("Please upload an Excel file containing e-mails!");
           clear();
+          setIsLoading(false);
           return;
         }
 
-				const emailUsers = [...new Set(emails)].map((x) => users.find((y) => y.email.toLowerCase() === x)).filter((x) => x !== undefined);
+        const emailUsers = [...new Set(emails)]
+          .map((x) => users.find((y) => y.email.toLowerCase() === x))
+          .filter((x) => x !== undefined);
         const filteredUsers = emailUsers.filter(
           (x) =>
-						((user.type === "developer" || user.type === "admin" || user.type === "corporate") &&
+            ((user.type === "developer" ||
+              user.type === "admin" ||
+              user.type === "corporate") &&
               (x?.type === "student" || x?.type === "teacher")) ||
             (user.type === "teacher" && x?.type === "student"),
         );
@@ -71,43 +89,70 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
           user.type !== "teacher"
             ? "Added all teachers and students found in the file you've provided!"
             : "Added all students found in the file you've provided!",
-					{toastId: "upload-success"},
+          { toastId: "upload-success" },
         );
+        setIsLoading(false);
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filesContent, user.type, users]);
 
   const submit = () => {
+    setIsLoading(true);
+
     if (name !== group?.name && (name === "Students" || name === "Teachers")) {
-			toast.error("That group name is reserved and cannot be used, please enter another one.");
+      toast.error(
+        "That group name is reserved and cannot be used, please enter another one.",
+      );
+      setIsLoading(false);
       return;
     }
 
-		(group ? axios.patch : axios.post)(group ? `/api/groups/${group.id}` : "/api/groups", {name, admin, participants})
+    (group ? axios.patch : axios.post)(
+      group ? `/api/groups/${group.id}` : "/api/groups",
+      { name, admin, participants },
+    )
       .then(() => {
-				toast.success(`Group "${name}" ${group ? "edited" : "created"} successfully`);
+        toast.success(
+          `Group "${name}" ${group ? "edited" : "created"} successfully`,
+        );
         return true;
       })
       .catch(() => {
         toast.error("Something went wrong, please try again later!");
         return false;
       })
-			.finally(onClose);
+      .finally(() => {
+        setIsLoading(false);
+        onClose();
+      });
   };
 
   return (
-		<div className="flex flex-col gap-12 mt-4 w-full px-4 py-2">
+    <div className="mt-4 flex w-full flex-col gap-12 px-4 py-2">
       <div className="flex flex-col gap-8">
-				<Input name="name" type="text" label="Name" defaultValue={name} onChange={setName} required disabled={group?.disableEditing} />
+        <Input
-				<div className="flex flex-col gap-3 w-full">
+          name="name"
-					<div className="flex gap-2 items-center">
+          type="text"
-						<label className="font-normal text-base text-mti-gray-dim">Participants</label>
+          label="Name"
-						<div className="tooltip" data-tip="The Excel file should only include a column with the desired e-mails.">
+          defaultValue={name}
+          onChange={setName}
+          required
+          disabled={group?.disableEditing}
+        />
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <label className="text-mti-gray-dim text-base font-normal">
+              Participants
+            </label>
+            <div
+              className="tooltip"
+              data-tip="The Excel file should only include a column with the desired e-mails."
+            >
               <BsQuestionCircleFill />
             </div>
           </div>
-					<div className="flex gap-8 w-full">
+          <div className="flex w-full gap-8">
             <Select
               className="w-full"
               value={participants.map((x) => ({
@@ -120,14 +165,18 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
                 label: `${users.find((y) => y.id === x)?.email} - ${users.find((y) => y.id === x)?.name}`,
               }))}
               options={users
-								.filter((x) => (user.type === "teacher" ? x.type === "student" : x.type === "student" || x.type === "teacher"))
+                .filter((x) =>
-								.map((x) => ({value: x.id, label: `${x.email} - ${x.name}`}))}
+                  user.type === "teacher"
+                    ? x.type === "student"
+                    : x.type === "student" || x.type === "teacher",
+                )
+                .map((x) => ({ value: x.id, label: `${x.email} - ${x.name}` }))}
               onChange={(value) => setParticipants(value.map((x) => x.value))}
               isMulti
               isSearchable
               menuPortalTarget={document?.body}
               styles={{
-								menuPortal: (base) => ({...base, zIndex: 9999}),
+                menuPortal: (base) => ({ ...base, zIndex: 9999 }),
                 control: (styles) => ({
                   ...styles,
                   backgroundColor: "white",
@@ -138,18 +187,36 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
               }}
             />
             {user.type !== "teacher" && (
-							<Button className="w-full max-w-[300px]" onClick={openFilePicker} variant="outline">
+              <Button
-								{filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
+                className="w-full max-w-[300px]"
+                onClick={openFilePicker}
+                isLoading={isLoading}
+                variant="outline"
+              >
+                {filesContent.length === 0
+                  ? "Upload participants Excel file"
+                  : filesContent[0].name}
               </Button>
             )}
           </div>
         </div>
       </div>
-			<div className="flex w-full justify-end items-center gap-8 mt-8">
+      <div className="mt-8 flex w-full items-center justify-end gap-8">
-				<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
+        <Button
+          variant="outline"
+          color="red"
+          className="w-full max-w-[200px]"
+          isLoading={isLoading}
+          onClick={onClose}
+        >
           Cancel
         </Button>
-				<Button className="w-full max-w-[200px]" onClick={submit} disabled={!name}>
+        <Button
+          className="w-full max-w-[200px]"
+          onClick={submit}
+          isLoading={isLoading}
+          disabled={!name}
+        >
           Submit
         </Button>
       </div>
@@ -159,13 +226,15 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 
 const filterTypes = ["corporate", "teacher"];
 
-export default function GroupList({user}: {user: User}) {
+export default function GroupList({ user }: { user: User }) {
   const [isCreating, setIsCreating] = useState(false);
   const [editingGroup, setEditingGroup] = useState<Group>();
   const [filterByUser, setFilterByUser] = useState(false);
 
-	const {users} = useUsers();
+  const { users } = useUsers();
-	const {groups, reload} = useGroups(user && filterTypes.includes(user?.type) ? user.id : undefined);
+  const { groups, reload } = useGroups(
+    user && filterTypes.includes(user?.type) ? user.id : undefined,
+  );
 
   useEffect(() => {
     if (user && (user.type === "corporate" || user.type === "teacher")) {
@@ -177,7 +246,7 @@ export default function GroupList({user}: {user: User}) {
     if (!confirm(`Are you sure you want to delete "${group.name}"?`)) return;
 
     axios
-			.delete<{ok: boolean}>(`/api/groups/${group.id}`)
+      .delete<{ ok: boolean }>(`/api/groups/${group.id}`)
       .then(() => toast.success(`Group "${group.name}" deleted successfully`))
       .catch(() => toast.error("Something went wrong, please try again later!"))
       .finally(reload);
@@ -195,7 +264,12 @@ export default function GroupList({user}: {user: User}) {
     columnHelper.accessor("admin", {
       header: "Admin",
       cell: (info) => (
-				<div className="tooltip" data-tip={capitalize(users.find((x) => x.id === info.getValue())?.type)}>
+        <div
+          className="tooltip"
+          data-tip={capitalize(
+            users.find((x) => x.id === info.getValue())?.type,
+          )}
+        >
           {users.find((x) => x.id === info.getValue())?.name}
         </div>
       ),
@@ -211,19 +285,32 @@ export default function GroupList({user}: {user: User}) {
     {
       header: "",
       id: "actions",
-			cell: ({row}: {row: {original: Group}}) => {
+      cell: ({ row }: { row: { original: Group } }) => {
         return (
           <>
-						{user && (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">
-								{!row.original.disableEditing && (
+                  {(!row.original.disableEditing ||
-									<div data-tip="Edit" className="cursor-pointer tooltip" onClick={() => setEditingGroup(row.original)}>
+                    ["developer", "admin"].includes(user.type)) && (
-										<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                    <div
+                      data-tip="Edit"
+                      className="tooltip cursor-pointer"
+                      onClick={() => setEditingGroup(row.original)}
+                    >
+                      <BsPencil className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
                     </div>
                   )}
-								{!row.original.disableEditing && (
+                  {(!row.original.disableEditing ||
-									<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteGroup(row.original)}>
+                    ["developer", "admin"].includes(user.type)) && (
-										<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                    <div
+                      data-tip="Delete"
+                      className="tooltip cursor-pointer"
+                      onClick={() => deleteGroup(row.original)}
+                    >
+                      <BsTrash className="hover:text-mti-purple-light transition duration-300 ease-in-out" />
                     </div>
                   )}
                 </div>
@@ -247,8 +334,12 @@ export default function GroupList({user}: {user: User}) {
   };
 
   return (
-		<div className="w-full h-full rounded-xl">
+    <div className="h-full w-full rounded-xl">
-			<Modal isOpen={isCreating || !!editingGroup} onClose={closeModal} title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}>
+      <Modal
+        isOpen={isCreating || !!editingGroup}
+        onClose={closeModal}
+        title={editingGroup ? `Editing ${editingGroup.name}` : "New Group"}
+      >
         <CreatePanel
           group={editingGroup}
           user={user}
@@ -260,19 +351,25 @@ export default function GroupList({user}: {user: User}) {
                     groups
                       .filter((g) => g.admin === user.id)
                       .flatMap((g) => g.participants)
-											.includes(u.id) || groups.flatMap((g) => g.participants).includes(u.id),
+                      .includes(u.id) ||
+                    groups.flatMap((g) => g.participants).includes(u.id),
                 )
               : users
           }
         />
       </Modal>
-			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+      <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
                 <th className="py-4" key={header.id}>
-									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
                 </th>
               ))}
             </tr>
@@ -280,7 +377,10 @@ export default function GroupList({user}: {user: User}) {
         </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}>
+            <tr
+              className="even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white"
+              key={row.id}
+            >
               {row.getVisibleCells().map((cell) => (
                 <td className="px-4 py-2" key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -293,7 +393,8 @@ export default function GroupList({user}: {user: User}) {
 
       <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">
+        className="bg-mti-purple-light hover:bg-mti-purple w-full py-2 text-white transition duration-300 ease-in-out"
+      >
         New Group
       </button>
     </div>

src/pages/(exam)/ExamPage.tsx

@@ -1,34 +1,35 @@
 /* eslint-disable @next/next/no-img-element */
-import Head from "next/head";
+import { Module } from "@/interfaces";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
-import {Module} from "@/interfaces";
 
-import Selection from "@/exams/Selection";
-import Reading from "@/exams/Reading";
-import {Exam, InteractiveSpeakingExercise, SpeakingExercise, UserSolution, Variant, WritingExercise} from "@/interfaces/exam";
-import Listening from "@/exams/Listening";
-import Writing from "@/exams/Writing";
-import {ToastContainer, toast} from "react-toastify";
-import Finish from "@/exams/Finish";
-import axios from "axios";
-import {Stat} from "@/interfaces/user";
-import Speaking from "@/exams/Speaking";
-import {v4 as uuidv4} from "uuid";
-import useUser from "@/hooks/useUser";
-import useExamStore from "@/stores/examStore";
-import Layout from "@/components/High/Layout";
 import AbandonPopup from "@/components/AbandonPopup";
-import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
+import Layout from "@/components/High/Layout";
-import {useRouter} from "next/router";
+import Finish from "@/exams/Finish";
-import {getExam} from "@/utils/exams";
-import {capitalize} from "lodash";
 import Level from "@/exams/Level";
+import Listening from "@/exams/Listening";
+import Reading from "@/exams/Reading";
+import Selection from "@/exams/Selection";
+import Speaking from "@/exams/Speaking";
+import Writing from "@/exams/Writing";
+import useUser from "@/hooks/useUser";
+import { Exam, UserSolution, Variant } from "@/interfaces/exam";
+import { Stat } from "@/interfaces/user";
+import useExamStore from "@/stores/examStore";
+import {
+  evaluateSpeakingAnswer,
+  evaluateWritingAnswer,
+} from "@/utils/evaluation";
+import { getExam } from "@/utils/exams";
+import axios from "axios";
+import { useRouter } from "next/router";
+import { toast, ToastContainer } from "react-toastify";
+import { v4 as uuidv4 } from "uuid";
 
 interface Props {
   page: "exams" | "exercises";
 }
 
-export default function ExamPage({page}: Props) {
+export default function ExamPage({ page }: Props) {
   const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
   const [moduleIndex, setModuleIndex] = useState(0);
   const [sessionId, setSessionId] = useState("");
@@ -37,16 +38,30 @@ export default function ExamPage({page}: Props) {
   const [showAbandonPopup, setShowAbandonPopup] = useState(false);
   const [avoidRepeated, setAvoidRepeated] = useState(false);
   const [timeSpent, setTimeSpent] = useState(0);
-	const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
+  const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<
+    string[]
+  >([]);
   const [variant, setVariant] = useState<Variant>("full");
 
-	const [exams, setExams] = useExamStore((state) => [state.exams, state.setExams]);
+  const [exams, setExams] = useExamStore((state) => [
-	const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]);
+    state.exams,
-	const [showSolutions, setShowSolutions] = useExamStore((state) => [state.showSolutions, state.setShowSolutions]);
+    state.setExams,
-	const [selectedModules, setSelectedModules] = useExamStore((state) => [state.selectedModules, state.setSelectedModules]);
+  ]);
+  const [userSolutions, setUserSolutions] = useExamStore((state) => [
+    state.userSolutions,
+    state.setUserSolutions,
+  ]);
+  const [showSolutions, setShowSolutions] = useExamStore((state) => [
+    state.showSolutions,
+    state.setShowSolutions,
+  ]);
+  const [selectedModules, setSelectedModules] = useExamStore((state) => [
+    state.selectedModules,
+    state.setSelectedModules,
+  ]);
   const assignment = useExamStore((state) => state.assignment);
 
-	const {user} = useUser({redirectTo: "/login"});
+  const { user } = useUser({ redirectTo: "/login" });
   const router = useRouter();
 
   useEffect(() => setSessionId(uuidv4()), []);
@@ -74,7 +89,11 @@ export default function ExamPage({page}: Props) {
 
   useEffect(() => {
     (async () => {
-			if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
+      if (
+        selectedModules.length > 0 &&
+        exams.length > 0 &&
+        moduleIndex < selectedModules.length
+      ) {
         const nextExam = exams[moduleIndex];
         setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
       }
@@ -85,7 +104,9 @@ export default function ExamPage({page}: Props) {
   useEffect(() => {
     (async () => {
       if (selectedModules.length > 0 && exams.length === 0) {
-				const examPromises = selectedModules.map((module) => getExam(module, avoidRepeated, variant));
+        const examPromises = selectedModules.map((module) =>
+          getExam(module, avoidRepeated, variant),
+        );
         Promise.all(examPromises).then((values) => {
           if (values.every((x) => !!x)) {
             setExams(values.map((x) => x!));
@@ -100,7 +121,13 @@ export default function ExamPage({page}: Props) {
   }, [selectedModules, setExams, exams]);
 
   useEffect(() => {
-		if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
+    if (
+      selectedModules.length > 0 &&
+      exams.length !== 0 &&
+      moduleIndex >= selectedModules.length &&
+      !hasBeenUploaded &&
+      !showSolutions
+    ) {
       const newStats: Stat[] = userSolutions.map((solution) => ({
         ...solution,
         id: solution.id || uuidv4(),
@@ -110,11 +137,11 @@ export default function ExamPage({page}: Props) {
         module: solution.module!,
         user: user?.id || "",
         date: new Date().getTime(),
-				...(assignment ? {assignment: assignment.id} : {}),
+        ...(assignment ? { assignment: assignment.id } : {}),
       }));
 
       axios
-				.post<{ok: boolean}>("/api/stats", newStats)
+        .post<{ ok: boolean }>("/api/stats", newStats)
         .then((response) => setHasBeenUploaded(response.data.ok))
         .catch(() => setHasBeenUploaded(false));
     }
@@ -122,37 +149,49 @@ export default function ExamPage({page}: Props) {
   }, [selectedModules, moduleIndex, hasBeenUploaded]);
 
   useEffect(() => {
-		if (statsAwaitingEvaluation.length === 0) return setIsEvaluationLoading(false);
+    setIsEvaluationLoading(statsAwaitingEvaluation.length !== 0);
-		return setIsEvaluationLoading(true);
   }, [statsAwaitingEvaluation]);
 
   useEffect(() => {
     if (statsAwaitingEvaluation.length > 0) {
-			statsAwaitingEvaluation.forEach(checkIfStatHasBeenEvaluated);
+      checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [statsAwaitingEvaluation]);
 
-	const checkIfStatHasBeenEvaluated = (id: string) => {
+  const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
     setTimeout(async () => {
-			const statRequest = await axios.get<Stat>(`/api/stats/${id}`);
+      const awaitedStats = await Promise.all(
-			const stat = statRequest.data;
+        ids.map(async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data),
-			if (stat.solutions.every((x) => x.evaluation !== null)) {
+      );
-				const userSolution: UserSolution = {
+      const solutionsEvaluated = awaitedStats.every((stat) =>
-					id,
+        stat.solutions.every((x) => x.evaluation !== null),
+      );
+      if (solutionsEvaluated) {
+        const statsUserSolutions: UserSolution[] = awaitedStats.map((stat) => ({
+          id: stat.id,
           exercise: stat.exercise,
           score: stat.score,
           solutions: stat.solutions,
           type: stat.type,
           exam: stat.exam,
           module: stat.module,
-				};
+        }));
 
-				setUserSolutions(userSolutions.map((x) => (x.exercise === userSolution.exercise ? userSolution : x)));
+        const updatedUserSolutions = userSolutions.map((x) => {
-				return setStatsAwaitingEvaluation((prev) => prev.filter((x) => x !== id));
+          const respectiveSolution = statsUserSolutions.find(
+            (y) => y.exercise === x.exercise,
+          );
+          return respectiveSolution ? respectiveSolution : x;
+        });
+
+        setUserSolutions(updatedUserSolutions);
+        return setStatsAwaitingEvaluation((prev) =>
+          prev.filter((x) => !ids.includes(x)),
+        );
       }
 
-			return checkIfStatHasBeenEvaluated(id);
+      return checkIfStatsHaveBeenEvaluated(ids);
     }, 5 * 1000);
   };
 
@@ -160,14 +199,24 @@ export default function ExamPage({page}: Props) {
     if (exam.module === "reading" || exam.module === "listening") {
       const parts = exam.parts.map((p) =>
         Object.assign(p, {
-					exercises: p.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions})),
+          exercises: p.exercises.map((x) =>
+            Object.assign(x, {
+              userSolutions: userSolutions.find((y) => x.id === y.exercise)
+                ?.solutions,
+            }),
+          ),
         }),
       );
-			return Object.assign(exam, {parts});
+      return Object.assign(exam, { parts });
     }
 
-		const exercises = exam.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions}));
+    const exercises = exam.exercises.map((x) =>
-		return Object.assign(exam, {exercises});
+      Object.assign(x, {
+        userSolutions: userSolutions.find((y) => x.id === y.exercise)
+          ?.solutions,
+      }),
+    );
+    return Object.assign(exam, { exercises });
   };
 
   const onFinish = (solutions: UserSolution[]) => {
@@ -176,7 +225,12 @@ export default function ExamPage({page}: Props) {
 
     if (exam && !solutionExams.includes(exam.id)) return;
 
-		if (exam && (exam.module === "writing" || exam.module === "speaking") && solutions.length > 0 && !showSolutions) {
+    if (
+      exam &&
+      (exam.module === "writing" || exam.module === "speaking") &&
+      solutions.length > 0 &&
+      !showSolutions
+    ) {
       setHasBeenUploaded(true);
       setIsEvaluationLoading(true);
 
@@ -184,15 +238,32 @@ export default function ExamPage({page}: Props) {
         exam.exercises.map(async (exercise) => {
           const evaluationID = uuidv4();
           if (exercise.type === "writing")
-						return await evaluateWritingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
+            return await evaluateWritingAnswer(
+              exercise,
+              solutions.find((x) => x.exercise === exercise.id)!,
+              evaluationID,
+            );
 
-					if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
+          if (
-						return await evaluateSpeakingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
+            exercise.type === "interactiveSpeaking" ||
+            exercise.type === "speaking"
+          )
+            return await evaluateSpeakingAnswer(
+              exercise,
+              solutions.find((x) => x.exercise === exercise.id)!,
+              evaluationID,
+            );
         }),
       )
         .then((responses) => {
-					setStatsAwaitingEvaluation((prev) => [...prev, ...responses.filter((x) => !!x).map((r) => (r as any).id)]);
+          setStatsAwaitingEvaluation((prev) => [
-					setUserSolutions([...userSolutions, ...responses.filter((x) => !!x)] as any);
+            ...prev,
+            ...responses.filter((x) => !!x).map((r) => (r as any).id),
+          ]);
+          setUserSolutions([
+            ...userSolutions,
+            ...responses.filter((x) => !!x),
+          ] as any);
         })
         .finally(() => {
           setHasBeenUploaded(false);
@@ -201,12 +272,19 @@ export default function ExamPage({page}: Props) {
 
     axios.get("/api/stats/update");
 
-		setUserSolutions([...userSolutions.filter((x) => !solutionIds.includes(x.exercise)), ...solutions]);
+    setUserSolutions([
+      ...userSolutions.filter((x) => !solutionIds.includes(x.exercise)),
+      ...solutions,
+    ]);
     setModuleIndex((prev) => prev + 1);
   };
 
-	const aggregateScoresByModule = (answers: UserSolution[]): {module: Module; total: number; missing: number; correct: number}[] => {
+  const aggregateScoresByModule = (
-		const scores: {[key in Module]: {total: number; missing: number; correct: number}} = {
+    answers: UserSolution[],
+  ): { module: Module; total: number; missing: number; correct: number }[] => {
+    const scores: {
+      [key in Module]: { total: number; missing: number; correct: number };
+    } = {
       reading: {
         total: 0,
         correct: 0,
@@ -244,7 +322,7 @@ export default function ExamPage({page}: Props) {
 
     return Object.keys(scores)
       .filter((x) => scores[x as Module].total > 0)
-			.map((x) => ({module: x as Module, ...scores[x as Module]}));
+      .map((x) => ({ module: x as Module, ...scores[x as Module] }));
   };
 
   const renderScreen = () => {
@@ -281,23 +359,49 @@ export default function ExamPage({page}: Props) {
     }
 
     if (exam && exam.module === "reading") {
-			return <Reading exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Reading
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "listening") {
-			return <Listening exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Listening
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "writing") {
-			return <Writing exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Writing
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "speaking") {
-			return <Speaking exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Speaking
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "level") {
-			return <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />
+      );
     }
 
     return <>Loading...</>;
@@ -310,8 +414,13 @@ export default function ExamPage({page}: Props) {
         <Layout
           user={user}
           className="justify-between"
-					focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
+          focusMode={
-					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
+            selectedModules.length !== 0 &&
+            !showSolutions &&
+            moduleIndex < selectedModules.length
+          }
+          onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
+        >
           <>
             {renderScreen()}
             {!showSolutions && moduleIndex < selectedModules.length && (

src/pages/(register)/RegisterCorporate.tsx

@@ -1,13 +1,13 @@
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import useUsers from "@/hooks/useUsers";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
-import {sendEmailVerification} from "@/utils/email";
+import { sendEmailVerification } from "@/utils/email";
 import axios from "axios";
-import {Divider} from "primereact/divider";
+import { Divider } from "primereact/divider";
-import {useState} from "react";
+import { useState } from "react";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
-import {KeyedMutator} from "swr";
+import { KeyedMutator } from "swr";
 import Select from "react-select";
 import moment from "moment";
 
@@ -19,13 +19,18 @@ interface Props {
 }
 
 const availableDurations = {
-	"1_month": {label: "1 Month", number: 1},
+  "1_month": { label: "1 Month", number: 1 },
-	"3_months": {label: "3 Months", number: 3},
+  "3_months": { label: "3 Months", number: 3 },
-	"6_months": {label: "6 Months", number: 6},
+  "6_months": { label: "6 Months", number: 6 },
-	"12_months": {label: "12 Months", number: 12},
+  "12_months": { label: "12 Months", number: 12 },
 };
 
-export default function RegisterCorporate({isLoading, setIsLoading, mutateUser, sendEmailVerification}: Props) {
+export default function RegisterCorporate({
+  isLoading,
+  setIsLoading,
+  mutateUser,
+  sendEmailVerification,
+}: Props) {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -36,20 +41,27 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
   const [companyUsers, setCompanyUsers] = useState(0);
   const [subscriptionDuration, setSubscriptionDuration] = useState(1);
 
-	const {users} = useUsers();
+  const { users } = useUsers();
 
-	const onSuccess = () => toast.success("An e-mail has been sent, please make sure to check your spam folder!");
+  const onSuccess = () =>
+    toast.success(
+      "An e-mail has been sent, please make sure to check your spam folder!",
+    );
 
   const onError = (e: Error) => {
     console.error(e);
-		toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});
+    toast.error("Something went wrong, please logout and re-login.", {
+      toastId: "send-verify-error",
+    });
   };
 
   const register = (e: any) => {
     e.preventDefault();
 
     if (confirmPassword !== password) {
-			toast.error("Your passwords do not match!", {toastId: "password-not-match"});
+      toast.error("Your passwords do not match!", {
+        toastId: "password-not-match",
+      });
       return;
     }
 
@@ -72,7 +84,9 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
         },
       })
       .then((response) => {
-				mutateUser(response.data.user).then(() => sendEmailVerification(setIsLoading, onSuccess, onError));
+        mutateUser(response.data.user).then(() =>
+          sendEmailVerification(setIsLoading, onSuccess, onError),
+        );
       })
       .catch((error) => {
         console.log(error.response.data);
@@ -93,13 +107,30 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
   };
 
   return (
-		<form className="flex flex-col items-center gap-4 w-full" onSubmit={register}>
+    <form
-			<div className="w-full flex gap-4">
+      className="flex w-full flex-col items-center gap-4"
-				<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
+      onSubmit={register}
-				<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" defaultValue={email} required />
+    >
+      <div className="flex w-full gap-4">
+        <Input
+          type="text"
+          name="name"
+          onChange={(e) => setName(e)}
+          placeholder="Enter your name"
+          defaultValue={name}
+          required
+        />
+        <Input
+          type="email"
+          name="email"
+          onChange={(e) => setEmail(e.toLowerCase())}
+          placeholder="Enter email address"
+          defaultValue={email}
+          required
+        />
       </div>
 
-			<div className="w-full flex gap-4">
+      <div className="flex w-full gap-4">
         <Input
           type="password"
           name="password"
@@ -118,9 +149,9 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
         />
       </div>
 
-			<Divider className="w-full !my-2" />
+      <Divider className="!my-2 w-full" />
 
-			<div className="w-full flex gap-4">
+      <div className="flex w-full gap-4">
         <Input
           type="text"
           name="companyName"
@@ -140,16 +171,20 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
         />
       </div>
 
-			<div className="w-full flex gap-4">
+      <div className="flex w-full gap-4">
-				<div className="flex flex-col gap-3 w-full">
+        <div className="flex w-full flex-col gap-3">
-					<label className="font-normal text-base text-mti-gray-dim">Referral *</label>
+          <label className="text-mti-gray-dim text-base font-normal">
+            Referral *
+          </label>
           <Select
-						className="px-4 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"
+            className="placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none disabled:cursor-not-allowed"
             options={[
-							{value: "", label: "No referral"},
+              { value: "", label: "No referral" },
-							...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
+              ...users
+                .filter((u) => u.type === "agent")
+                .map((x) => ({ value: x.id, label: `${x.name} - ${x.email}` })),
             ]}
-						defaultValue={{value: "", label: "No referral"}}
+            defaultValue={{ value: "", label: "No referral" }}
             onChange={(value) => setReferralAgent(value?.value)}
             styles={{
               control: (styles) => ({
@@ -163,24 +198,41 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
               }),
               option: (styles, state) => ({
                 ...styles,
-								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                backgroundColor: state.isFocused
+                  ? "#D5D9F0"
+                  : state.isSelected
+                    ? "#7872BF"
+                    : "white",
                 color: state.isFocused ? "black" : styles.color,
               }),
             }}
           />
         </div>
 
-				<div className="flex flex-col gap-3 w-full">
+        <div className="flex w-full flex-col gap-3">
-					<label className="font-normal text-base text-mti-gray-dim">Subscription Duration *</label>
+          <label className="text-mti-gray-dim text-base font-normal">
+            Subscription Duration *
+          </label>
           <Select
-						className="px-4 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"
+            className="placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none disabled:cursor-not-allowed"
             options={Object.keys(availableDurations).map((value) => ({
               value,
-							label: availableDurations[value as keyof typeof availableDurations].label,
+              label:
+                availableDurations[value as keyof typeof availableDurations]
+                  .label,
             }))}
-						defaultValue={{value: "1_month", label: availableDurations["1_month"].label}}
+            defaultValue={{
+              value: "1_month",
+              label: availableDurations["1_month"].label,
+            }}
             onChange={(value) =>
-							setSubscriptionDuration(value ? availableDurations[value.value as keyof typeof availableDurations].number : 1)
+              setSubscriptionDuration(
+                value
+                  ? availableDurations[
+                      value.value as keyof typeof availableDurations
+                    ].number
+                  : 1,
+              )
             }
             styles={{
               control: (styles) => ({
@@ -194,7 +246,11 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
               }),
               option: (styles, state) => ({
                 ...styles,
-								backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+                backgroundColor: state.isFocused
+                  ? "#D5D9F0"
+                  : state.isSelected
+                    ? "#7872BF"
+                    : "white",
                 color: state.isFocused ? "black" : styles.color,
               }),
             }}
@@ -203,11 +259,19 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
       </div>
 
       <Button
-				className="lg:mt-8 w-full"
+        className="w-full lg:mt-8"
         color="purple"
         disabled={
-					isLoading || !email || !name || !password || !confirmPassword || password !== confirmPassword || !companyName || companyUsers <= 0
+          isLoading ||
-				}>
+          !email ||
+          !name ||
+          !password ||
+          !confirmPassword ||
+          password !== confirmPassword ||
+          !companyName ||
+          companyUsers <= 0
+        }
+      >
         Create account
       </Button>
     </form>

src/pages/(register)/RegisterIndividual.tsx

@@ -1,12 +1,12 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
 import Input from "@/components/Low/Input";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
-import {sendEmailVerification} from "@/utils/email";
+import { sendEmailVerification } from "@/utils/email";
 import axios from "axios";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
-import {KeyedMutator} from "swr";
+import { KeyedMutator } from "swr";
 
 interface Props {
   queryCode?: string;
@@ -21,7 +21,14 @@ interface Props {
   sendEmailVerification: typeof sendEmailVerification;
 }
 
-export default function RegisterIndividual({queryCode, defaultInformation, isLoading, setIsLoading, mutateUser, sendEmailVerification}: Props) {
+export default function RegisterIndividual({
+  queryCode,
+  defaultInformation,
+  isLoading,
+  setIsLoading,
+  mutateUser,
+  sendEmailVerification,
+}: Props) {
   const [name, setName] = useState(defaultInformation?.name || "");
   const [email, setEmail] = useState(defaultInformation?.email || "");
   const [password, setPassword] = useState("");
@@ -29,18 +36,25 @@ export default function RegisterIndividual({queryCode, defaultInformation, isLoa
   const [code, setCode] = useState(queryCode || "");
   const [hasCode, setHasCode] = useState<boolean>(!!queryCode);
 
-	const onSuccess = () => toast.success("An e-mail has been sent, please make sure to check your spam folder!");
+  const onSuccess = () =>
+    toast.success(
+      "An e-mail has been sent, please make sure to check your spam folder!",
+    );
 
   const onError = (e: Error) => {
     console.error(e);
-		toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});
+    toast.error("Something went wrong, please logout and re-login.", {
+      toastId: "send-verify-error",
+    });
   };
 
   const register = (e: any) => {
     e.preventDefault();
 
     if (confirmPassword !== password) {
-			toast.error("Your passwords do not match!", {toastId: "password-not-match"});
+      toast.error("Your passwords do not match!", {
+        toastId: "password-not-match",
+      });
       return;
     }
 
@@ -56,7 +70,9 @@ export default function RegisterIndividual({queryCode, defaultInformation, isLoa
         profilePicture: "/defaultAvatar.png",
       })
       .then((response) => {
-				mutateUser(response.data.user).then(() => sendEmailVerification(setIsLoading, onSuccess, onError));
+        mutateUser(response.data.user).then(() =>
+          sendEmailVerification(setIsLoading, onSuccess, onError),
+        );
       })
       .catch((error) => {
         console.log(error.response.data);
@@ -77,12 +93,22 @@ export default function RegisterIndividual({queryCode, defaultInformation, isLoa
   };
 
   return (
-		<form className="flex flex-col items-center gap-6 w-full" onSubmit={register}>
+    <form
-			<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" value={name} required />
+      className="flex w-full flex-col items-center gap-6"
+      onSubmit={register}
+    >
+      <Input
+        type="text"
+        name="name"
+        onChange={(e) => setName(e)}
+        placeholder="Enter your name"
+        value={name}
+        required
+      />
       <Input
         type="email"
         name="email"
-				onChange={(e) => setEmail(e)}
+        onChange={(e) => setEmail(e.toLowerCase())}
         placeholder="Enter email address"
         value={email}
         disabled={!!defaultInformation?.email}
@@ -105,7 +131,7 @@ export default function RegisterIndividual({queryCode, defaultInformation, isLoa
         required
       />
 
-			<div className="flex flex-col gap-4 w-full items-start">
+      <div className="flex w-full flex-col items-start gap-4">
         <Checkbox isChecked={hasCode} onChange={setHasCode}>
           I have a code
         </Checkbox>
@@ -122,9 +148,18 @@ export default function RegisterIndividual({queryCode, defaultInformation, isLoa
       </div>
 
       <Button
-				className="lg:mt-8 w-full"
+        className="w-full lg:mt-8"
         color="purple"
-				disabled={isLoading || !email || !name || !password || !confirmPassword || password !== confirmPassword || (hasCode ? !code : false)}>
+        disabled={
+          isLoading ||
+          !email ||
+          !name ||
+          !password ||
+          !confirmPassword ||
+          password !== confirmPassword ||
+          (hasCode ? !code : false)
+        }
+      >
         Create account
       </Button>
     </form>

src/pages/action.tsx

@@ -26,7 +26,7 @@ export function getServerSideProps({query, res}: {query: {oobCode: string; mode:
 			code: query.oobCode,
 			mode: query.mode,
 			apiKey: query.apiKey,
-			continueUrl: query.continueUrl,
+			...query.continueUrl ? { continueUrl: query.continueUrl } : {},
 		},
 	};
 }

src/pages/api/assignments/[id]/export.tsx

@@ -113,10 +113,6 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 			return;
 		}
 
-		if (data.assigner !== req.session.user.id) {
-			res.status(401).json({ok: false});
-			return;
-		}
 		if (data.pdf) {
 			// if it does, return the pdf url
 			const fileRef = ref(storage, data.pdf);
@@ -239,6 +235,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
 						const result = exams.length === 0 ? "N/A" : `${correct}/${total}`;
 
+						const userDemographicInformation = user?.demographicInformation as DemographicInformation;
+
 						return {
 							id,
 							name: user?.name || "N/A",
@@ -248,6 +246,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 							result,
 							level: showLevel ? getLevelScoreForUserExams(bandScore) : undefined,
 							bandScore,
+							passportId: userDemographicInformation?.passport_id || ""
 						};
 					});
 				};

src/pages/api/assignments/index.ts

@@ -1,17 +1,26 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type {NextApiRequest, NextApiResponse} from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
-import {app} from "@/firebase";
+import { app } from "@/firebase";
-import {getFirestore, collection, getDocs, query, where, setDoc, doc, getDoc} from "firebase/firestore";
+import {
-import {withIronSessionApiRoute} from "iron-session/next";
+  getFirestore,
-import {sessionOptions} from "@/lib/session";
+  collection,
-import {uuidv4} from "@firebase/util";
+  getDocs,
-import {Module} from "@/interfaces";
+  query,
-import {getExams} from "@/utils/exams.be";
+  where,
-import {Exam, Variant} from "@/interfaces/exam";
+  setDoc,
-import {capitalize, flatten} from "lodash";
+  doc,
-import {User} from "@/interfaces/user";
+  getDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { uuidv4 } from "@firebase/util";
+import { Module } from "@/interfaces";
+import { getExams } from "@/utils/exams.be";
+import { Exam, Variant } from "@/interfaces/exam";
+import { capitalize, flatten, uniqBy } from "lodash";
+import { User } from "@/interfaces/user";
 import moment from "moment";
-import {sendEmail} from "@/email";
+import { sendEmail } from "@/email";
 
 const db = getFirestore(app);
 
@@ -19,14 +28,14 @@ export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (!req.session.user) {
-		res.status(401).json({ok: false});
+    res.status(401).json({ ok: false });
     return;
   }
 
   if (req.method === "GET") return GET(req, res);
   if (req.method === "POST") return POST(req, res);
 
-	res.status(404).json({ok: false});
+  res.status(404).json({ ok: false });
 }
 
 async function GET(req: NextApiRequest, res: NextApiResponse) {
@@ -60,43 +69,58 @@ const generateExams = async (
 ): Promise<ExamWithUser[]> => {
   if (generateMultiple) {
     // for optimization purposes, it would be better to create a new endpoint that returned the answers for all users at once
-		const allExams = await assignees.map(async (assignee) => {
+    const allExams = assignees.map(async (assignee) => {
-			const selectedModulePromises = await selectedModules.map(async (module: Module) => {
+      const selectedModulePromises = selectedModules.map(
+        async (module: Module) => {
           try {
-					const exams: Exam[] = await getExams(db, module, "true", assignee, variant);
+            const exams: Exam[] = await getExams(
+              db,
+              module,
+              "true",
+              assignee,
+              variant,
+            );
 
             const exam = exams[getRandomIndex(exams)];
             if (exam) {
-						return {module: exam.module, id: exam.id, assignee};
+              return { module: exam.module, id: exam.id, assignee };
             }
             return null;
           } catch (e) {
             console.error(e);
             return null;
           }
-			}, []);
+        },
+        [],
+      );
       const newModules = await Promise.all(selectedModulePromises);
 
       return newModules;
     }, []);
 
-		const exams = flatten(await Promise.all(allExams)).filter((x) => x !== null) as ExamWithUser[];
+    const exams = flatten(await Promise.all(allExams)).filter(
+      (x) => x !== null,
+    ) as ExamWithUser[];
     return exams;
   }
 
-	const selectedModulePromises = await selectedModules.map(async (module: Module) => {
+  const selectedModulePromises = selectedModules.map(async (module: Module) => {
     const exams: Exam[] = await getExams(db, module, "false", undefined);
     const exam = exams[getRandomIndex(exams)];
 
     if (exam) {
-			return {module: exam.module, id: exam.id};
+      return { module: exam.module, id: exam.id };
     }
     return null;
   });
 
   const exams = await Promise.all(selectedModulePromises);
   const examesFiltered = exams.filter((x) => x !== null) as ExamWithUser[];
-	return flatten(assignees.map((assignee) => examesFiltered.map((exam) => ({...exam, assignee}))));
+  return flatten(
+    assignees.map((assignee) =>
+      examesFiltered.map((exam) => ({ ...exam, assignee })),
+    ),
+  );
 };
 
 async function POST(req: NextApiRequest, res: NextApiResponse) {
@@ -118,10 +142,17 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
     variant?: Variant;
   };
 
-	const exams: ExamWithUser[] = await generateExams(generateMultiple, selectedModules, assignees, variant);
+  const exams: ExamWithUser[] = await generateExams(
+    generateMultiple,
+    selectedModules,
+    assignees,
+    variant,
+  );
 
   if (exams.length === 0) {
-		res.status(400).json({ok: false, error: "No exams found for the selected modules"});
+    res
+      .status(400)
+      .json({ ok: false, error: "No exams found for the selected modules" });
     return;
   }
 
@@ -133,22 +164,33 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
     ...body,
   });
 
-	res.status(200).json({ok: true});
+  res.status(200).json({ ok: true });
 
   for (const assigneeID of assignees) {
     const assigneeSnapshot = await getDoc(doc(db, "users", assigneeID));
     if (!assigneeSnapshot.exists()) continue;
 
-		const assignee = {id: assigneeID, ...assigneeSnapshot.data()} as User;
+    const assignee = { id: assigneeID, ...assigneeSnapshot.data() } as User;
     const name = body.name;
     const teacher = req.session.user!;
-		const examModulesLabel = exams.map((x) => capitalize(x.module)).join(", ");
+    const examModulesLabel = uniqBy(exams, (x) => x.module)
+      .map((x) => capitalize(x.module))
+      .join(", ");
     const startDate = moment(body.startDate).format("DD/MM/YYYY - HH:mm");
     const endDate = moment(body.endDate).format("DD/MM/YYYY - HH:mm");
 
     await sendEmail(
       "assignment",
-			{user: {name: assignee.name}, assignment: {name, startDate, endDate, modules: examModulesLabel, assigner: teacher.name}},
+      {
+        user: { name: assignee.name },
+        assignment: {
+          name,
+          startDate,
+          endDate,
+          modules: examModulesLabel,
+          assigner: teacher.name,
+        },
+      },
       [assignee.email],
       "EnCoach - New Assignment!",
     );

src/pages/api/code/index.ts

@@ -1,13 +1,21 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type {NextApiRequest, NextApiResponse} from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
-import {app} from "@/firebase";
+import { app } from "@/firebase";
-import {getFirestore, setDoc, doc, query, collection, where, getDocs} from "firebase/firestore";
+import {
-import {withIronSessionApiRoute} from "iron-session/next";
+  getFirestore,
-import {sessionOptions} from "@/lib/session";
+  setDoc,
-import {Type} from "@/interfaces/user";
+  doc,
-import {PERMISSIONS} from "@/constants/userPermissions";
+  query,
-import {uuidv4} from "@firebase/util";
+  collection,
-import {prepareMailer, prepareMailOptions} from "@/email";
+  where,
+  getDocs,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Type } from "@/interfaces/user";
+import { PERMISSIONS } from "@/constants/userPermissions";
+import { uuidv4 } from "@firebase/util";
+import { prepareMailer, prepareMailOptions } from "@/email";
 
 const db = getFirestore(app);
 
@@ -17,16 +25,18 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method === "GET") return get(req, res);
   if (req.method === "POST") return post(req, res);
 
-	return res.status(404).json({ok: false});
+  return res.status(404).json({ ok: false });
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
   if (!req.session.user) {
-		res.status(401).json({ok: false, reason: "You must be logged in to generate a code!"});
+    res
+      .status(401)
+      .json({ ok: false, reason: "You must be logged in to generate a code!" });
     return;
   }
 
-	const {creator} = req.query as {creator?: string};
+  const { creator } = req.query as { creator?: string };
   const q = query(collection(db, "codes"), where("creator", "==", creator));
   const snapshot = await getDocs(creator ? q : collection(db, "codes"));
 
@@ -35,27 +45,41 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 
 async function post(req: NextApiRequest, res: NextApiResponse) {
   if (!req.session.user) {
-		res.status(401).json({ok: false, reason: "You must be logged in to generate a code!"});
+    res
+      .status(401)
+      .json({ ok: false, reason: "You must be logged in to generate a code!" });
     return;
   }
 
-	const {type, codes, infos, expiryDate} = req.body as {
+  const { type, codes, infos, expiryDate } = req.body as {
     type: Type;
     codes: string[];
-		infos?: {email: string; name: string; passport_id?: string}[];
+    infos?: { email: string; name: string; passport_id?: string }[];
     expiryDate: null | Date;
   };
   const permission = PERMISSIONS.generateCode[type];
 
   if (!permission.includes(req.session.user.type)) {
-		res.status(403).json({ok: false, reason: "Your account type does not have permissions to generate a code for that type of user!"});
+    res
+      .status(403)
+      .json({
+        ok: false,
+        reason:
+          "Your account type does not have permissions to generate a code for that type of user!",
+      });
     return;
   }
 
   if (req.session.user.type === "corporate") {
-		const codesGeneratedByUserSnapshot = await getDocs(query(collection(db, "codes"), where("creator", "==", req.session.user.id)));
+    const codesGeneratedByUserSnapshot = await getDocs(
+      query(
+        collection(db, "codes"),
+        where("creator", "==", req.session.user.id),
+      ),
+    );
     const totalCodes = codesGeneratedByUserSnapshot.docs.length + codes.length;
-		const allowedCodes = req.session.user.corporateInformation?.companyInformation.userAmount || 0;
+    const allowedCodes =
+      req.session.user.corporateInformation?.companyInformation.userAmount || 0;
 
     if (totalCodes > allowedCodes) {
       res.status(403).json({
@@ -70,10 +94,15 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
   const codePromises = codes.map(async (code, index) => {
     const codeRef = doc(db, "codes", code);
-		const codeInformation = {type, code, creator: req.session.user!.id, expiryDate};
+    const codeInformation = {
+      type,
+      code,
+      creator: req.session.user!.id,
+      expiryDate,
+    };
 
     if (infos && infos.length > index) {
-			const {email, name, passport_id} = infos[index];
+      const { email, name, passport_id } = infos[index];
 
       const transport = prepareMailer();
       const mailOptions = prepareMailOptions(
@@ -81,7 +110,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
           type,
           code,
         },
-				[email.trim()],
+        [email.toLowerCase().trim()],
         "EnCoach Registration",
         "main",
       );
@@ -90,8 +119,13 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
         await transport.sendMail(mailOptions);
         await setDoc(
           codeRef,
-					{...codeInformation, email: email.trim(), name: name.trim(), ...(passport_id ? {passport_id: passport_id.trim()} : {})},
+          {
-					{merge: true},
+            ...codeInformation,
+            email: email.trim().toLowerCase(),
+            name: name.trim(),
+            ...(passport_id ? { passport_id: passport_id.trim() } : {}),
+          },
+          { merge: true },
         );
 
         return true;
@@ -104,6 +138,6 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
   });
 
   Promise.all(codePromises).then((results) => {
-		res.status(200).json({ok: true, valid: results.filter((x) => x).length});
+    res.status(200).json({ ok: true, valid: results.filter((x) => x).length });
   });
 }

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

@@ -1,10 +1,19 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type {NextApiRequest, NextApiResponse} from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
-import {app} from "@/firebase";
+import { app } from "@/firebase";
-import {getFirestore, collection, getDocs, getDoc, doc, deleteDoc, setDoc} from "firebase/firestore";
+import {
-import {withIronSessionApiRoute} from "iron-session/next";
+  getFirestore,
-import {sessionOptions} from "@/lib/session";
+  collection,
-import {Group} from "@/interfaces/user";
+  getDocs,
+  getDoc,
+  doc,
+  deleteDoc,
+  setDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Group } from "@/interfaces/user";
+import { updateExpiryDateOnGroup } from "@/utils/groups.be";
 
 const db = getFirestore(app);
 
@@ -20,16 +29,16 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
   if (!req.session.user) {
-		res.status(401).json({ok: false});
+    res.status(401).json({ ok: false });
     return;
   }
 
-	const {id} = req.query as {id: string};
+  const { id } = req.query as { id: string };
 
   const snapshot = await getDoc(doc(db, "groups", id));
 
   if (snapshot.exists()) {
-		res.status(200).json({...snapshot.data(), id: snapshot.id});
+    res.status(200).json({ ...snapshot.data(), id: snapshot.id });
   } else {
     res.status(404).json(undefined);
   }
@@ -37,44 +46,63 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 
 async function del(req: NextApiRequest, res: NextApiResponse) {
   if (!req.session.user) {
-		res.status(401).json({ok: false});
+    res.status(401).json({ ok: false });
     return;
   }
 
-	const {id} = req.query as {id: string};
+  const { id } = req.query as { id: string };
 
   const snapshot = await getDoc(doc(db, "groups", id));
-	const group = {...snapshot.data(), id: snapshot.id} as Group;
+  const group = { ...snapshot.data(), id: snapshot.id } as Group;
 
   const user = req.session.user;
-	if (user.type === "admin" || user.type === "developer" || user.id === group.admin) {
+  if (
+    user.type === "admin" ||
+    user.type === "developer" ||
+    user.id === group.admin
+  ) {
     await deleteDoc(snapshot.ref);
 
-		res.status(200).json({ok: true});
+    res.status(200).json({ ok: true });
     return;
   }
 
-	res.status(403).json({ok: false});
+  res.status(403).json({ ok: false });
 }
 
 async function patch(req: NextApiRequest, res: NextApiResponse) {
   if (!req.session.user) {
-		res.status(401).json({ok: false});
+    res.status(401).json({ ok: false });
     return;
   }
 
-	const {id} = req.query as {id: string};
+  const { id } = req.query as { id: string };
 
   const snapshot = await getDoc(doc(db, "groups", id));
-	const group = {...snapshot.data(), id: snapshot.id} as Group;
+  const group = { ...snapshot.data(), id: snapshot.id } as Group;
 
   const user = req.session.user;
-	if (user.type === "admin" || user.type === "developer" || user.id === group.admin) {
+  if (
-		await setDoc(snapshot.ref, req.body, {merge: true});
+    user.type === "admin" ||
+    user.type === "developer" ||
+    user.id === group.admin
+  ) {
+    if ("participants" in req.body) {
+      const newParticipants = (req.body.participants as string[]).filter(
+        (x) => !group.participants.includes(x),
+      );
+      await Promise.all(
+        newParticipants.map(
+          async (p) => await updateExpiryDateOnGroup(p, group.admin),
+        ),
+      );
+    }
 
-		res.status(200).json({ok: true});
+    await setDoc(snapshot.ref, req.body, { merge: true });
+
+    res.status(200).json({ ok: true });
     return;
   }
 
-	res.status(403).json({ok: false});
+  res.status(403).json({ ok: false });
 }

src/pages/api/groups/index.ts

@@ -1,11 +1,20 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type {NextApiRequest, NextApiResponse} from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
-import {app} from "@/firebase";
+import { app } from "@/firebase";
-import {getFirestore, collection, getDocs, setDoc, doc, query, where} from "firebase/firestore";
+import {
-import {withIronSessionApiRoute} from "iron-session/next";
+  getFirestore,
-import {sessionOptions} from "@/lib/session";
+  collection,
-import {Group} from "@/interfaces/user";
+  getDocs,
-import {v4} from "uuid";
+  setDoc,
+  doc,
+  query,
+  where,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Group } from "@/interfaces/user";
+import { v4 } from "uuid";
+import { updateExpiryDateOnGroup } from "@/utils/groups.be";
 
 const db = getFirestore(app);
 
@@ -13,7 +22,7 @@ export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (!req.session.user) {
-		res.status(401).json({ok: false});
+    res.status(401).json({ ok: false });
     return;
   }
 
@@ -22,13 +31,22 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
-	const {admin, participant} = req.query as {admin: string; participant: string};
+  const { admin, participant } = req.query as {
+    admin: string;
+    participant: string;
+  };
 
   const queryConstraints = [
     ...(admin ? [where("admin", "==", admin)] : []),
-		...(participant ? [where("participants", "array-contains", participant)] : []),
+    ...(participant
+      ? [where("participants", "array-contains", participant)]
+      : []),
   ];
-	const snapshot = await getDocs(queryConstraints.length > 0 ? query(collection(db, "groups"), ...queryConstraints) : collection(db, "groups"));
+  const snapshot = await getDocs(
+    queryConstraints.length > 0
+      ? query(collection(db, "groups"), ...queryConstraints)
+      : collection(db, "groups"),
+  );
   const groups = snapshot.docs.map((doc) => ({
     id: doc.id,
     ...doc.data(),
@@ -40,6 +58,16 @@ 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", v4()), {name: body.name, admin: body.admin, participants: body.participants});
+  await Promise.all(
-	res.status(200).json({ok: true});
+    body.participants.map(
+      async (p) => await updateExpiryDateOnGroup(p, body.admin),
+    ),
+  );
+
+  await setDoc(doc(db, "groups", v4()), {
+    name: body.name,
+    admin: body.admin,
+    participants: body.participants,
+  });
+  res.status(200).json({ ok: true });
 }

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

@@ -0,0 +1,82 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  getDoc,
+  doc,
+  deleteDoc,
+  setDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Ticket } from "@/interfaces/ticket";
+import { Invite } from "@/interfaces/invite";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return await get(req, res);
+  if (req.method === "DELETE") return await del(req, res);
+  if (req.method === "PATCH") return await patch(req, res);
+
+  res.status(404).json(undefined);
+}
+
+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 snapshot = await getDoc(doc(db, "invites", id));
+
+  if (snapshot.exists()) {
+    res.status(200).json({ ...snapshot.data(), id: snapshot.id });
+  } else {
+    res.status(404).json(undefined);
+  }
+}
+
+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 snapshot = await getDoc(doc(db, "invites", id));
+  const data = snapshot.data() as Invite;
+
+  const user = req.session.user;
+  if (user.type === "admin" || user.type === "developer") {
+    await deleteDoc(snapshot.ref);
+    res.status(200).json({ ok: true });
+    return;
+  }
+
+  res.status(403).json({ ok: false });
+}
+
+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 snapshot = await getDoc(doc(db, "invites", id));
+
+  const user = req.session.user;
+  if (user.type === "admin" || user.type === "developer") {
+    await setDoc(snapshot.ref, req.body, { merge: true });
+    return res.status(200).json({ ok: true });
+  }
+
+  res.status(403).json({ ok: false });
+}

src/pages/api/invites/accept/[id].ts

@@ -0,0 +1,134 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  getDoc,
+  doc,
+  deleteDoc,
+  setDoc,
+  getDocs,
+  collection,
+  where,
+  query,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Ticket } from "@/interfaces/ticket";
+import { Invite } from "@/interfaces/invite";
+import { Group, User } from "@/interfaces/user";
+import { v4 } from "uuid";
+import { sendEmail } from "@/email";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return await get(req, res);
+
+  res.status(404).json(undefined);
+}
+
+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 snapshot = await getDoc(doc(db, "invites", id));
+
+  if (snapshot.exists()) {
+    const invite = { ...snapshot.data(), id: snapshot.id } as Invite;
+    if (invite.to !== req.session.user.id)
+      return res.status(403).json({ ok: false });
+
+    await deleteDoc(snapshot.ref);
+    const invitedByRef = await getDoc(doc(db, "users", invite.from));
+    if (!invitedByRef.exists()) return res.status(404).json({ ok: false });
+
+    const invitedBy = { ...invitedByRef.data(), id: invitedByRef.id } as User;
+    const invitedByGroupsRef = await getDocs(
+      query(collection(db, "groups"), where("admin", "==", invitedBy.id)),
+    );
+    const invitedByGroups = invitedByGroupsRef.docs.map((g) => ({
+      ...g.data(),
+      id: g.id,
+    })) as Group[];
+
+    const typeGroupName =
+      req.session.user.type === "student"
+        ? "Students"
+        : req.session.user.type === "teacher"
+          ? "Teachers"
+          : undefined;
+
+    if (typeGroupName) {
+      const typeGroup: Group = invitedByGroups.find(
+        (g) => g.name === typeGroupName,
+      ) || {
+        id: v4(),
+        admin: invitedBy.id,
+        name: typeGroupName,
+        participants: [],
+        disableEditing: true,
+      };
+      await setDoc(
+        doc(db, "groups", typeGroup.id),
+        {
+          ...typeGroup,
+          participants: [
+            ...typeGroup.participants.filter((x) => x !== req.session.user!.id),
+            req.session.user.id,
+          ],
+        },
+        { merge: true },
+      );
+    }
+
+    const invitationsGroup: Group = invitedByGroups.find(
+      (g) => g.name === "Invited",
+    ) || {
+      id: v4(),
+      admin: invitedBy.id,
+      name: "Invited",
+      participants: [],
+      disableEditing: true,
+    };
+    await setDoc(
+      doc(db, "groups", invitationsGroup.id),
+      {
+        ...invitationsGroup,
+        participants: [
+          ...invitationsGroup.participants.filter(
+            (x) => x !== req.session.user!.id,
+          ),
+          req.session.user.id,
+        ],
+      },
+      {
+        merge: true,
+      },
+    );
+
+    try {
+      await sendEmail(
+        "respondedInvite",
+        {
+          corporateName: invitedBy.name,
+          name: req.session.user.name,
+          decision: "accept",
+        },
+        [invitedBy.email],
+        `${req.session.user.name} has accepted your invite!`,
+      );
+    } catch (e) {
+      console.log(e);
+    }
+
+    res.status(200).json({ ok: true });
+  } else {
+    res.status(404).json(undefined);
+  }
+}

src/pages/api/invites/decline/[id].ts

@@ -0,0 +1,72 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  getDoc,
+  doc,
+  deleteDoc,
+  setDoc,
+  getDocs,
+  collection,
+  where,
+  query,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Ticket } from "@/interfaces/ticket";
+import { Invite } from "@/interfaces/invite";
+import { Group, User } from "@/interfaces/user";
+import { v4 } from "uuid";
+import { sendEmail } from "@/email";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return await get(req, res);
+
+  res.status(404).json(undefined);
+}
+
+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 snapshot = await getDoc(doc(db, "invites", id));
+
+  if (snapshot.exists()) {
+    const invite = { ...snapshot.data(), id: snapshot.id } as Invite;
+    if (invite.to !== req.session.user.id)
+      return res.status(403).json({ ok: false });
+
+    await deleteDoc(snapshot.ref);
+    const invitedByRef = await getDoc(doc(db, "users", invite.from));
+    if (!invitedByRef.exists()) return res.status(404).json({ ok: false });
+
+    const invitedBy = { ...invitedByRef.data(), id: invitedByRef.id } as User;
+
+    try {
+      await sendEmail(
+        "respondedInvite",
+        {
+          corporateName: invitedBy.name,
+          name: req.session.user.name,
+          decision: "decline",
+        },
+        [invitedBy.email],
+        `${req.session.user.name} has declined your invite!`,
+      );
+    } catch (e) {
+      console.log(e);
+    }
+
+    res.status(200).json({ ok: true });
+  } else {
+    res.status(404).json(undefined);
+  }
+}

src/pages/api/invites/index.ts

@@ -0,0 +1,88 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { sendEmail } from "@/email";
+import { app } from "@/firebase";
+import { Invite } from "@/interfaces/invite";
+import { Ticket } from "@/interfaces/ticket";
+import { User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import {
+  collection,
+  doc,
+  getDoc,
+  getDocs,
+  getFirestore,
+  setDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import type { NextApiRequest, NextApiResponse } from "next";
+import ShortUniqueId from "short-unique-id";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  if (req.method === "GET") await get(req, res);
+  if (req.method === "POST") await post(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  const snapshot = await getDocs(collection(db, "invites"));
+
+  res.status(200).json(
+    snapshot.docs.map((doc) => ({
+      id: doc.id,
+      ...doc.data(),
+    })),
+  );
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  const body = req.body as Invite;
+
+  const existingInvites = (await getDocs(collection(db, "invites"))).docs.map(
+    (x) => ({ ...x.data(), id: x.id }),
+  ) as Invite[];
+
+  const invitedRef = await getDoc(doc(db, "users", body.to));
+  if (!invitedRef.exists()) return res.status(404).json({ ok: false });
+
+  const invitedByRef = await getDoc(doc(db, "users", body.from));
+  if (!invitedByRef.exists()) return res.status(404).json({ ok: false });
+
+  const invited = { ...invitedRef.data(), id: invitedRef.id } as User;
+  const invitedBy = { ...invitedByRef.data(), id: invitedByRef.id } as User;
+
+  try {
+    await sendEmail(
+      "receivedInvite",
+      {
+        name: invited.name,
+        corporateName:
+          invitedBy.type === "corporate"
+            ? invitedBy.corporateInformation?.companyInformation?.name ||
+              invitedBy.name
+            : invitedBy.name,
+      },
+      [invited.email],
+      "You have been invited to a group!",
+    );
+  } catch (e) {
+    console.log(e);
+  }
+
+  if (
+    existingInvites.filter((i) => i.to === body.to && i.from === body.from)
+      .length == 0
+  ) {
+    const shortUID = new ShortUniqueId();
+    await setDoc(doc(db, "invites", body.id || shortUID.randomUUID(8)), body);
+  }
+
+  res.status(200).json({ ok: true });
+}

src/pages/api/login.ts

@@ -1,10 +1,10 @@
-import {NextApiRequest, NextApiResponse} from "next";
+import { NextApiRequest, NextApiResponse } from "next";
-import {getAuth, signInWithEmailAndPassword} from "firebase/auth";
+import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
-import {app} from "@/firebase";
+import { app } from "@/firebase";
-import {sessionOptions} from "@/lib/session";
+import { sessionOptions } from "@/lib/session";
-import {withIronSessionApiRoute} from "iron-session/next";
+import { withIronSessionApiRoute } from "iron-session/next";
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
-import {getFirestore, getDoc, doc} from "firebase/firestore";
+import { getFirestore, getDoc, doc } from "firebase/firestore";
 
 const auth = getAuth(app);
 const db = getFirestore(app);
@@ -12,27 +12,27 @@ const db = getFirestore(app);
 export default withIronSessionApiRoute(login, sessionOptions);
 
 async function login(req: NextApiRequest, res: NextApiResponse) {
-	const {email, password} = req.body as {email: string; password: string};
+  const { email, password } = req.body as { email: string; password: string };
 
-	signInWithEmailAndPassword(auth, email, password)
+  signInWithEmailAndPassword(auth, email.toLowerCase(), password)
     .then(async (userCredentials) => {
       const userId = userCredentials.user.uid;
 
       const docUser = await getDoc(doc(db, "users", userId));
       if (!docUser.exists()) {
-				res.status(401).json({error: 401, message: "User does not exist!"});
+        res.status(401).json({ error: 401, message: "User does not exist!" });
         return;
       }
 
       const user = docUser.data() as User;
 
-			req.session.user = {...user, id: userId};
+      req.session.user = { ...user, id: userId };
       await req.session.save();
 
-			res.status(200).json({user: {...user, id: userId}});
+      res.status(200).json({ user: { ...user, id: userId } });
     })
     .catch((error) => {
       console.log(error);
-			res.status(401).json({error});
+      res.status(401).json({ error });
     });
 }

src/pages/api/register.ts

@@ -1,11 +1,23 @@
-import {NextApiRequest, NextApiResponse} from "next";
+import { NextApiRequest, NextApiResponse } from "next";
-import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";
+import { createUserWithEmailAndPassword, getAuth } from "firebase/auth";
-import {app} from "@/firebase";
+import { app } from "@/firebase";
-import {sessionOptions} from "@/lib/session";
+import { sessionOptions } from "@/lib/session";
-import {withIronSessionApiRoute} from "iron-session/next";
+import { withIronSessionApiRoute } from "iron-session/next";
-import {getFirestore, doc, setDoc, query, collection, where, getDocs} from "firebase/firestore";
+import {
-import {CorporateInformation, DemographicInformation, Type} from "@/interfaces/user";
+  getFirestore,
-import {addUserToGroupOnCreation} from "@/utils/registration";
+  doc,
+  setDoc,
+  query,
+  collection,
+  where,
+  getDocs,
+} from "firebase/firestore";
+import {
+  CorporateInformation,
+  DemographicInformation,
+  Type,
+} from "@/interfaces/user";
+import { addUserToGroupOnCreation } from "@/utils/registration";
 import moment from "moment";
 
 const auth = getAuth(app);
@@ -28,7 +40,7 @@ const DEFAULT_LEVELS = {
 };
 
 async function register(req: NextApiRequest, res: NextApiResponse) {
-	const {type} = req.body as {
+  const { type } = req.body as {
     type: "individual" | "corporate";
   };
 
@@ -37,7 +49,7 @@ async function register(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function registerIndividual(req: NextApiRequest, res: NextApiResponse) {
-	const {email, passport_id, password, code} = req.body as {
+  const { email, passport_id, password, code } = req.body as {
     email: string;
     passport_id?: string;
     password: string;
@@ -45,30 +57,47 @@ async function registerIndividual(req: NextApiRequest, res: NextApiResponse) {
   };
 
   const codeQuery = query(collection(db, "codes"), where("code", "==", code));
-	const codeDocs = (await getDocs(codeQuery)).docs.filter((x) => !Object.keys(x.data()).includes("userId"));
+  const codeDocs = (await getDocs(codeQuery)).docs.filter(
+    (x) => !Object.keys(x.data()).includes("userId"),
+  );
 
   if (code && code.length > 0 && codeDocs.length === 0) {
-		res.status(400).json({error: "Invalid Code!"});
+    res.status(400).json({ error: "Invalid Code!" });
     return;
   }
 
-	const codeData = codeDocs.length > 0 ? (codeDocs[0].data() as {code: string; type: Type; creator?: string; expiryDate: Date | null}) : undefined;
+  const codeData =
+    codeDocs.length > 0
+      ? (codeDocs[0].data() as {
+          code: string;
+          type: Type;
+          creator?: string;
+          expiryDate: Date | null;
+        })
+      : undefined;
 
-	createUserWithEmailAndPassword(auth, email, password)
+  createUserWithEmailAndPassword(auth, email.toLowerCase(), password)
     .then(async (userCredentials) => {
       const userId = userCredentials.user.uid;
       delete req.body.password;
 
       const user = {
         ...req.body,
+        email: email.toLowerCase(),
         desiredLevels: DEFAULT_DESIRED_LEVELS,
         levels: DEFAULT_LEVELS,
         bio: "",
         isFirstLogin: codeData ? codeData.type === "student" : true,
         focus: "academic",
-				type: email.endsWith("@ecrop.dev") ? "developer" : codeData ? codeData.type : "student",
+        type: email.endsWith("@ecrop.dev")
-				subscriptionExpirationDate: codeData ? codeData.expiryDate : moment().subtract(1, "days").toISOString(),
+          ? "developer"
-				...(passport_id ? {demographicInformation: {passport_id}} : {}),
+          : codeData
+            ? codeData.type
+            : "student",
+        subscriptionExpirationDate: codeData
+          ? codeData.expiryDate
+          : moment().subtract(1, "days").toISOString(),
+        ...(passport_id ? { demographicInformation: { passport_id } } : {}),
         registrationDate: new Date().toISOString(),
         status: code ? "active" : "paymentDue",
       };
@@ -76,35 +105,41 @@ async function registerIndividual(req: NextApiRequest, res: NextApiResponse) {
       await setDoc(doc(db, "users", userId), user);
 
       if (codeDocs.length > 0 && codeData) {
-				await setDoc(codeDocs[0].ref, {userId: userId}, {merge: true});
+        await setDoc(codeDocs[0].ref, { userId: userId }, { merge: true });
-				if (codeData.creator) await addUserToGroupOnCreation(userId, codeData.type, codeData.creator);
+        if (codeData.creator)
+          await addUserToGroupOnCreation(
+            userId,
+            codeData.type,
+            codeData.creator,
+          );
       }
 
-			req.session.user = {...user, id: userId};
+      req.session.user = { ...user, id: userId };
       await req.session.save();
 
-			res.status(200).json({user: {...user, id: userId}});
+      res.status(200).json({ user: { ...user, id: userId } });
     })
     .catch((error) => {
       console.log(error);
-			res.status(401).json({error});
+      res.status(401).json({ error });
     });
 }
 
 async function registerCorporate(req: NextApiRequest, res: NextApiResponse) {
-	const {email, password} = req.body as {
+  const { email, password } = req.body as {
     email: string;
     password: string;
     corporateInformation: CorporateInformation;
   };
 
-	createUserWithEmailAndPassword(auth, email, password)
+  createUserWithEmailAndPassword(auth, email.toLowerCase(), password)
     .then(async (userCredentials) => {
       const userId = userCredentials.user.uid;
       delete req.body.password;
 
       const user = {
         ...req.body,
+        email: email.toLowerCase(),
         desiredLevels: DEFAULT_DESIRED_LEVELS,
         levels: DEFAULT_LEVELS,
         bio: "",
@@ -118,13 +153,13 @@ async function registerCorporate(req: NextApiRequest, res: NextApiResponse) {
 
       await setDoc(doc(db, "users", userId), user);
 
-			req.session.user = {...user, id: userId};
+      req.session.user = { ...user, id: userId };
       await req.session.save();
 
-			res.status(200).json({user: {...user, id: userId}});
+      res.status(200).json({ user: { ...user, id: userId } });
     })
     .catch((error) => {
       console.log(error);
-			res.status(401).json({error});
+      res.status(401).json({ error });
     });
 }

src/pages/api/stats/[id]/export.tsx

@@ -126,6 +126,15 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 		const stats = docsSnap.docs.map((d) => d.data());
 		// verify if the stats already have a pdf generated
 		const hasPDF = stats.find((s) => s.pdf);
+		// find the user that generated the stats
+		const statIndex = stats.findIndex((s) => s.user);
+
+		if(statIndex === -1) {
+			res.status(401).json({ok: false});
+			return;
+		}
+		const userId = stats[statIndex].user;
+		
 
 		if (hasPDF) {
 			// if it does, return the pdf url
@@ -138,7 +147,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
 		try {
 			// generate the pdf report
-			const docUser = await getDoc(doc(db, "users", req.session.user.id));
+			const docUser = await getDoc(doc(db, "users", userId));
 
 			if (docUser.exists()) {
 				// we'll need the user in order to get the user data (name, email, focus, etc);
@@ -269,7 +278,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 							.format("ll HH:mm:ss")}
 						name={user.name}
 						email={user.email}
-						id={user.id}
+						id={userId}
 						gender={demographicInformation?.gender}
 						summary={performanceSummary}
 						testDetails={testDetails}

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

@@ -0,0 +1,81 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  getDoc,
+  doc,
+  deleteDoc,
+  setDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Ticket } from "@/interfaces/ticket";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return await get(req, res);
+  if (req.method === "DELETE") return await del(req, res);
+  if (req.method === "PATCH") return await patch(req, res);
+
+  res.status(404).json(undefined);
+}
+
+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 snapshot = await getDoc(doc(db, "tickets", id));
+
+  if (snapshot.exists()) {
+    res.status(200).json({ ...snapshot.data(), id: snapshot.id });
+  } else {
+    res.status(404).json(undefined);
+  }
+}
+
+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 snapshot = await getDoc(doc(db, "tickets", id));
+  const data = snapshot.data() as Ticket;
+
+  const user = req.session.user;
+  if (user.type === "admin" || user.type === "developer") {
+    await deleteDoc(snapshot.ref);
+    res.status(200).json({ ok: true });
+    return;
+  }
+
+  res.status(403).json({ ok: false });
+}
+
+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 snapshot = await getDoc(doc(db, "tickets", id));
+
+  const user = req.session.user;
+  if (user.type === "admin" || user.type === "developer") {
+    await setDoc(snapshot.ref, req.body, { merge: true });
+    return res.status(200).json({ ok: true });
+  }
+
+  res.status(403).json({ ok: false });
+}

src/pages/api/tickets/index.ts

@@ -0,0 +1,69 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { sendEmail } from "@/email";
+import { app } from "@/firebase";
+import { Ticket, TicketTypeLabel } from "@/interfaces/ticket";
+import { sessionOptions } from "@/lib/session";
+import {
+  collection,
+  doc,
+  getDocs,
+  getFirestore,
+  setDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import moment from "moment";
+import type { NextApiRequest, NextApiResponse } from "next";
+import ShortUniqueId from "short-unique-id";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  if (req.method === "GET") await get(req, res);
+  if (req.method === "POST") await post(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  const snapshot = await getDocs(collection(db, "tickets"));
+
+  res.status(200).json(
+    snapshot.docs.map((doc) => ({
+      id: doc.id,
+      ...doc.data(),
+    })),
+  );
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  const body = req.body as Ticket;
+
+  const shortUID = new ShortUniqueId();
+  const id = body.id || shortUID.randomUUID(8);
+  await setDoc(doc(db, "tickets", id), body);
+  res.status(200).json({ ok: true });
+
+  try {
+    await sendEmail(
+      "submittedFeedback",
+      {
+        id,
+        subject: body.subject,
+        reporter: body.reporter,
+        date: moment(body.date).format("DD/MM/YYYY - HH:mm"),
+        type: TicketTypeLabel[body.type],
+        reportedFrom: body.reportedFrom,
+        description: body.description,
+      },
+      [body.reporter.email],
+      `Ticket ${id}: ${body.subject}`,
+    );
+  } catch (e) {
+    console.log(e);
+  }
+}

src/pages/login.tsx

@@ -1,27 +1,29 @@
 /* eslint-disable @next/next/no-img-element */
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
-import {toast, ToastContainer} from "react-toastify";
+import { toast, ToastContainer } from "react-toastify";
 import axios from "axios";
-import {FormEvent, useEffect, useState} from "react";
+import { FormEvent, useEffect, useState } from "react";
 import Head from "next/head";
 import useUser from "@/hooks/useUser";
-import {Divider} from "primereact/divider";
+import { Divider } from "primereact/divider";
 import Button from "@/components/Low/Button";
-import {BsArrowRepeat, BsCheck} from "react-icons/bs";
+import { BsArrowRepeat, BsCheck } from "react-icons/bs";
 import Link from "next/link";
 import Input from "@/components/Low/Input";
 import clsx from "clsx";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
 import EmailVerification from "./(auth)/EmailVerification";
-import {withIronSessionSsr} from "iron-session/next";
+import { withIronSessionSsr } from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import { sessionOptions } from "@/lib/session";
 
-const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g);
+const EMAIL_REGEX = new RegExp(
+  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g,
+);
 
-export const getServerSideProps = withIronSessionSsr(({req, res}) => {
+export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
   const user = req.session.user;
 
-	const envVariables: {[key: string]: string} = {};
+  const envVariables: { [key: string]: string } = {};
   Object.keys(process.env)
     .filter((x) => x.startsWith("NEXT_PUBLIC"))
     .forEach((x: string) => {
@@ -41,7 +43,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
   }
 
   return {
-		props: {user: null, envVariables},
+    props: { user: null, envVariables },
   };
 }, sessionOptions);
 
@@ -53,7 +55,7 @@ export default function Login() {
 
   const router = useRouter();
 
-	const {user, mutateUser} = useUser({
+  const { user, mutateUser } = useUser({
     redirectTo: "/",
     redirectIfFound: true,
   });
@@ -64,21 +66,32 @@ export default function Login() {
 
   const forgotPassword = () => {
     if (!email || email.length < 0 || !EMAIL_REGEX.test(email)) {
-			toast.error("Please enter your e-mail to reset your password!", {toastId: "forgot-invalid-email"});
+      toast.error("Please enter your e-mail to reset your password!", {
+        toastId: "forgot-invalid-email",
+      });
       return;
     }
 
     axios
-			.post<{ok: boolean}>("/api/reset", {email})
+      .post<{ ok: boolean }>("/api/reset", { email })
       .then((response) => {
         if (response.data.ok) {
-					toast.success("You should receive an e-mail to reset your password!", {toastId: "forgot-success"});
+          toast.success(
+            "You should receive an e-mail to reset your password!",
+            { toastId: "forgot-success" },
+          );
           return;
         }
 
-				toast.error("That e-mail address is not connected to an account!", {toastId: "forgot-error"});
+        toast.error("That e-mail address is not connected to an account!", {
+          toastId: "forgot-error",
+        });
       })
-			.catch(() => toast.error("That e-mail address is not connected to an account!", {toastId: "forgot-error"}));
+      .catch(() =>
+        toast.error("That e-mail address is not connected to an account!", {
+          toastId: "forgot-error",
+        }),
+      );
   };
 
   const login = (e: FormEvent<HTMLFormElement>) => {
@@ -86,16 +99,20 @@ export default function Login() {
 
     setIsLoading(true);
     axios
-			.post<User>("/api/login", {email, password})
+      .post<User>("/api/login", { email, password })
       .then((response) => {
-				toast.success("You have been logged in!", {toastId: "login-successful"});
+        toast.success("You have been logged in!", {
+          toastId: "login-successful",
+        });
         mutateUser(response.data);
       })
       .catch((e) => {
         if (e.response.status === 401) {
-					toast.error("Wrong login credentials!", {toastId: "wrong-credentials"});
+          toast.error("Wrong login credentials!", {
+            toastId: "wrong-credentials",
+          });
         } else {
-					toast.error("Something went wrong!", {toastId: "server-error"});
+          toast.error("Something went wrong!", { toastId: "server-error" });
         }
         setIsLoading(false);
       })
@@ -110,53 +127,90 @@ export default function Login() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-			<main className="w-full h-[100vh] flex bg-white text-black">
+      <main className="flex h-[100vh] w-full bg-white text-black">
         <ToastContainer />
-				<section className="h-full w-fit min-w-fit relative hidden lg:flex">
+        <section className="relative hidden h-full w-fit min-w-fit lg:flex">
-					<div className="absolute h-full w-full bg-mti-rose-light z-10 bg-opacity-50" />
+          <div className="bg-mti-rose-light absolute z-10 h-full w-full bg-opacity-50" />
-					<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
+          <img
+            src="/people-talking-tablet.png"
+            alt="People smiling looking at a tablet"
+            className="aspect-auto h-full"
+          />
         </section>
-				<section className="h-full w-full flex flex-col items-center justify-center gap-2">
+        <section className="flex h-full w-full flex-col items-center justify-center gap-2">
           <div className={clsx("flex flex-col items-center", !user && "mb-4")}>
-						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-56" />
+            <img
-						<h1 className="font-bold text-2xl lg:text-4xl">Login to your account</h1>
+              src="/logo_title.png"
-						<p className="self-start text-sm lg:text-base font-normal text-mti-gray-cool">with your registered Email Address</p>
+              alt="EnCoach's Logo"
+              className="w-36 lg:w-56"
+            />
+            <h1 className="text-2xl font-bold lg:text-4xl">
+              Login to your account
+            </h1>
+            <p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">
+              with your registered Email Address
+            </p>
           </div>
           <Divider className="max-w-xs lg:max-w-md" />
           {!user && (
             <>
-							<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={login}>
+              <form
-								<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" />
+                className="-lg:px-8 flex w-full flex-col items-center gap-6 lg:w-1/2"
-								<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
+                onSubmit={login}
-								<div className="flex justify-between w-full px-4">
+              >
+                <Input
+                  type="email"
+                  name="email"
+                  onChange={(e) => setEmail(e.toLowerCase())}
+                  placeholder="Enter email address"
+                />
+                <Input
+                  type="password"
+                  name="password"
+                  onChange={(e) => setPassword(e)}
+                  placeholder="Password"
+                />
+                <div className="flex w-full justify-between px-4">
                   <div
-										className="flex gap-3 text-mti-gray-dim text-xs cursor-pointer"
+                    className="text-mti-gray-dim flex cursor-pointer gap-3 text-xs"
-										onClick={() => setRememberPassword((prev) => !prev)}>
+                    onClick={() => setRememberPassword((prev) => !prev)}
+                  >
                     <input type="checkbox" className="hidden" />
                     <div
                       className={clsx(
-												"w-4 h-4 rounded-sm flex items-center justify-center border border-mti-purple-light bg-white",
+                        "border-mti-purple-light flex h-4 w-4 items-center justify-center rounded-sm border bg-white",
                         "transition duration-300 ease-in-out",
                         rememberPassword && "!bg-mti-purple-light ",
-											)}>
+                      )}
-											<BsCheck color="white" className="w-full h-full" />
+                    >
+                      <BsCheck color="white" className="h-full w-full" />
                     </div>
                     <span>Remember my password</span>
                   </div>
-									<span className="text-mti-purple-light text-xs cursor-pointer hover:underline" onClick={forgotPassword}>
+                  <span
+                    className="text-mti-purple-light cursor-pointer text-xs hover:underline"
+                    onClick={forgotPassword}
+                  >
                     Forgot Password?
                   </span>
                 </div>
-								<Button className="mt-8 w-full" color="purple" disabled={isLoading}>
+                <Button
+                  className="mt-8 w-full"
+                  color="purple"
+                  disabled={isLoading}
+                >
                   {!isLoading && "Login"}
                   {isLoading && (
                     <div className="flex items-center justify-center">
-											<BsArrowRepeat className="text-white animate-spin" size={25} />
+                      <BsArrowRepeat
+                        className="animate-spin text-white"
+                        size={25}
+                      />
                     </div>
                   )}
                 </Button>
               </form>
-							<span className="text-mti-gray-cool text-sm font-normal mt-8">
+              <span className="text-mti-gray-cool mt-8 text-sm font-normal">
                 Don&apos;t have an account?{" "}
                 <Link className="text-mti-purple-light" href="/register">
                   Sign up
@@ -164,7 +218,13 @@ export default function Login() {
               </span>
             </>
           )}
-					{user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />}
+          {user && !user.isVerified && (
+            <EmailVerification
+              user={user}
+              isLoading={isLoading}
+              setIsLoading={setIsLoading}
+            />
+          )}
         </section>
       </main>
     </>

src/pages/tickets.tsx

@@ -0,0 +1,356 @@
+import Layout from "@/components/High/Layout";
+import TicketDisplay from "@/components/High/TicketDisplay";
+import Select from "@/components/Low/Select";
+import Modal from "@/components/Modal";
+import useTickets from "@/hooks/useTickets";
+import useUser from "@/hooks/useUser";
+import useUsers from "@/hooks/useUsers";
+import {
+  Ticket,
+  TicketStatus,
+  TicketStatusLabel,
+  TicketType,
+  TicketTypeLabel,
+} from "@/interfaces/ticket";
+import { sessionOptions } from "@/lib/session";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import clsx from "clsx";
+import { withIronSessionSsr } from "iron-session/next";
+import moment from "moment";
+import Head from "next/head";
+import { useEffect, useState } from "react";
+import { BsArrowDown, BsArrowUp } from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
+
+const columnHelper = createColumnHelper<Ticket>();
+
+export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
+  const user = req.session.user;
+
+  if (!user || !user.isVerified) {
+    res.setHeader("location", "/login");
+    res.statusCode = 302;
+    res.end();
+    return {
+      props: {
+        user: null,
+      },
+    };
+  }
+
+  if (
+    shouldRedirectHome(user) ||
+    ["admin", "developer", "agent"].includes(user.type)
+  ) {
+    res.setHeader("location", "/");
+    res.statusCode = 302;
+    res.end();
+    return {
+      props: {
+        user: null,
+      },
+    };
+  }
+
+  return {
+    props: { user: req.session.user },
+  };
+}, sessionOptions);
+
+const StatusClassNames: { [key in TicketStatus]: string } = {
+  submitted: "bg-mti-gray-dim",
+  "in-progress": "bg-mti-blue-dark",
+  completed: "bg-mti-green-dark",
+};
+
+const TypesClassNames: { [key in TicketType]: string } = {
+  feedback: "bg-mti-green-light",
+  bug: "bg-mti-red-dark",
+  help: "bg-mti-blue-light",
+};
+
+export default function Tickets() {
+  const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
+  const [selectedTicket, setSelectedTicket] = useState<Ticket>();
+  const [assigneeFilter, setAssigneeFilter] = useState<string>();
+  const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
+
+  const [typeFilter, setTypeFilter] = useState<TicketType>();
+  const [statusFilter, setStatusFilter] = useState<TicketStatus>();
+
+  const { user } = useUser({ redirectTo: "/login" });
+  const { users } = useUsers();
+  const { tickets, reload } = useTickets();
+
+  const sortByDate = (a: Ticket, b: Ticket) => {
+    return moment((dateSorting === "desc" ? b : a).date).diff(
+      moment((dateSorting === "desc" ? a : b).date),
+    );
+  };
+
+  useEffect(() => {
+    const filters = [];
+    if (user?.type === "agent")
+      filters.push((x: Ticket) => x.assignedTo === user.id);
+    if (typeFilter) filters.push((x: Ticket) => x.type === typeFilter);
+    if (statusFilter) filters.push((x: Ticket) => x.status === statusFilter);
+    if (assigneeFilter)
+      filters.push((x: Ticket) => x.assignedTo === assigneeFilter);
+
+    setFilteredTickets(
+      [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate),
+    );
+  }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user]);
+
+  const columns = [
+    columnHelper.accessor("id", {
+      header: "ID",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("type", {
+      header: "Type",
+      cell: (info) => (
+        <span
+          className={clsx(
+            "rounded-lg p-1 px-2 text-white",
+            TypesClassNames[info.getValue()],
+          )}
+        >
+          {TicketTypeLabel[info.getValue()]}
+        </span>
+      ),
+    }),
+    columnHelper.accessor("reporter", {
+      header: "Reporter",
+      cell: (info) => info.getValue().email,
+    }),
+    columnHelper.accessor("reportedFrom", {
+      header: "Reported From",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("date", {
+      id: "date",
+      header: (
+        <button
+          className="flex items-center gap-2"
+          onClick={() =>
+            setDateSorting((prev) => (prev === "asc" ? "desc" : "asc"))
+          }
+        >
+          <span>Date</span>
+          {dateSorting === "desc" && <BsArrowDown />}
+          {dateSorting === "asc" && <BsArrowUp />}
+        </button>
+      ) as any,
+      cell: (info) => moment(info.getValue()).format("DD/MM/YYYY - HH:mm"),
+    }),
+    columnHelper.accessor("subject", {
+      header: "Subject",
+      cell: (info) =>
+        info.getValue().substring(0, 12) +
+        (info.getValue().length > 12 ? "..." : ""),
+    }),
+    columnHelper.accessor("status", {
+      header: "Status",
+      cell: (info) => (
+        <span
+          className={clsx(
+            "rounded-lg p-1 px-2 text-white",
+            StatusClassNames[info.getValue()],
+          )}
+        >
+          {TicketStatusLabel[info.getValue()]}
+        </span>
+      ),
+    }),
+    columnHelper.accessor("assignedTo", {
+      header: "Assignee",
+      cell: (info) => users.find((x) => x.id === info.getValue())?.name || "",
+    }),
+  ];
+
+  const getAssigneeValue = () => {
+    if (user && user.type === "agent")
+      return { value: user.id, label: `${user.name} - ${user.email}` };
+
+    if (assigneeFilter) {
+      const assigneeUser = users.find((x) => x.id === assigneeFilter);
+      return assigneeUser
+        ? {
+            value: assigneeFilter,
+            label: `${assigneeUser.name} - ${assigneeUser.email}`,
+          }
+        : null;
+    }
+
+    return null;
+  };
+
+  const table = useReactTable({
+    data: filteredTickets,
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <>
+      <Modal
+        isOpen={!!selectedTicket}
+        onClose={() => {
+          reload();
+          setSelectedTicket(undefined);
+        }}
+      >
+        {selectedTicket && (
+          <TicketDisplay
+            user={user!}
+            ticket={selectedTicket}
+            onClose={() => {
+              reload();
+              setSelectedTicket(undefined);
+            }}
+          />
+        )}
+      </Modal>
+
+      <Head>
+        <title>Tickets Panel | EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      {user && (
+        <Layout user={user} className="gap-6">
+          <h1 className="text-2xl font-semibold">Tickets</h1>
+
+          <div className="flex w-full items-center gap-4">
+            <div className="flex w-full flex-col gap-3">
+              <label className="text-mti-gray-dim text-base font-normal">
+                Status
+              </label>
+              <Select
+                options={Object.keys(TicketStatusLabel).map((x) => ({
+                  value: x,
+                  label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
+                }))}
+                value={
+                  statusFilter
+                    ? {
+                        value: statusFilter,
+                        label: TicketStatusLabel[statusFilter],
+                      }
+                    : undefined
+                }
+                onChange={(value) =>
+                  setStatusFilter((value?.value as TicketStatus) ?? undefined)
+                }
+                isClearable
+                placeholder="Status..."
+              />
+            </div>
+            <div className="flex w-full flex-col gap-3">
+              <label className="text-mti-gray-dim text-base font-normal">
+                Type
+              </label>
+              <Select
+                options={Object.keys(TicketTypeLabel).map((x) => ({
+                  value: x,
+                  label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
+                }))}
+                value={
+                  typeFilter
+                    ? { value: typeFilter, label: TicketTypeLabel[typeFilter] }
+                    : undefined
+                }
+                onChange={(value) =>
+                  setTypeFilter((value?.value as TicketType) ?? undefined)
+                }
+                isClearable
+                placeholder="Type..."
+              />
+            </div>
+            <div className="flex w-full flex-col gap-3">
+              <label className="text-mti-gray-dim text-base font-normal">
+                Assignee
+              </label>
+              <Select
+                options={[
+                  { value: "me", label: "Assigned to me" },
+                  ...users
+                    .filter((x) =>
+                      ["admin", "developer", "agent"].includes(x.type),
+                    )
+                    .map((u) => ({
+                      value: u.id,
+                      label: `${u.name} - ${u.email}`,
+                    })),
+                ]}
+                disabled={user.type === "agent"}
+                value={getAssigneeValue()}
+                onChange={(value) =>
+                  value
+                    ? setAssigneeFilter(
+                        value.value === "me" ? user.id : value.value,
+                      )
+                    : setAssigneeFilter(undefined)
+                }
+                placeholder="Assignee..."
+                isClearable
+              />
+            </div>
+          </div>
+
+          <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
+            <thead>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <th className="px-4 py-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={clsx(
+                    "even:bg-mti-purple-ultralight/40 hover:bg-mti-purple-ultralight cursor-pointer rounded-lg py-2 odd:bg-white",
+                    "transition duration-300 ease-in-out",
+                  )}
+                  onClick={() => setSelectedTicket(row.original)}
+                  key={row.id}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <td className="w-fit items-center px-4 py-2" key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Layout>
+      )}
+    </>
+  );
+}

src/utils/groups.be.ts

@@ -0,0 +1,53 @@
+import { app } from "@/firebase";
+import { CorporateUser, StudentUser, TeacherUser } from "@/interfaces/user";
+import { doc, getDoc, getFirestore, setDoc } from "firebase/firestore";
+import moment from "moment";
+
+const db = getFirestore(app);
+
+export const updateExpiryDateOnGroup = async (
+  participantID: string,
+  corporateID: string,
+) => {
+  const corporateRef = await getDoc(doc(db, "users", corporateID));
+  const participantRef = await getDoc(doc(db, "users", participantID));
+
+  if (!corporateRef.exists() || !participantRef.exists()) return;
+
+  const corporate = {
+    ...corporateRef.data(),
+    id: corporateRef.id,
+  } as CorporateUser;
+  const participant = { ...participantRef.data(), id: participantRef.id } as
+    | StudentUser
+    | TeacherUser;
+
+  if (
+    corporate.type !== "corporate" ||
+    (participant.type !== "student" && participant.type !== "teacher")
+  )
+    return;
+
+  if (
+    !corporate.subscriptionExpirationDate ||
+    !participant.subscriptionExpirationDate
+  ) {
+    return await setDoc(
+      doc(db, "users", participant.id),
+      { subscriptionExpirationDate: null },
+      { merge: true },
+    );
+  }
+
+  const corporateDate = moment(corporate.subscriptionExpirationDate);
+  const participantDate = moment(participant.subscriptionExpirationDate);
+
+  if (corporateDate.isAfter(participantDate))
+    return await setDoc(
+      doc(db, "users", participant.id),
+      { subscriptionExpirationDate: corporateDate.toISOString() },
+      { merge: true },
+    );
+
+  return;
+};

src/utils/groups.ts

@@ -1,18 +1,24 @@
-import {CorporateUser, Group, User} from "@/interfaces/user";
+import { CorporateUser, Group, User } from "@/interfaces/user";
 import axios from "axios";
 
 export const isUserFromCorporate = async (userID: string) => {
-	const groups = (await axios.get<Group[]>(`/api/groups?participant=${userID}`)).data;
+  const groups = (await axios.get<Group[]>(`/api/groups?participant=${userID}`))
+    .data;
   const users = (await axios.get<User[]>("/api/users/list")).data;
 
-	const adminTypes = groups.map((g) => users.find((u) => u.id === g.admin)?.type);
+  const adminTypes = groups.map(
+    (g) => users.find((u) => u.id === g.admin)?.type,
+  );
   return adminTypes.includes("corporate");
 };
 
 export const getUserCorporate = async (userID: string) => {
-	const groups = (await axios.get<Group[]>(`/api/groups?participant=${userID}`)).data;
+  const groups = (await axios.get<Group[]>(`/api/groups?participant=${userID}`))
+    .data;
   const users = (await axios.get<User[]>("/api/users/list")).data;
 
-	const admins = groups.map((g) => users.find((u) => u.id === g.admin)).filter((x) => x?.type === "corporate");
+  const admins = groups
+    .map((g) => users.find((u) => u.id === g.admin))
+    .filter((x) => x?.type === "corporate");
   return admins.length > 0 ? (admins[0] as CorporateUser) : undefined;
 };