Created a new page for ticket handling as well as submission

src/components/High/TicketDisplay.tsx

@@ -0,0 +1,253 @@
+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}`,
+              })),
+          ]}
+          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

@@ -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">
-							<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">
+              leaveTo="opacity-0 scale-95"
+            >
+              <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}>
-										<BsXLg className="text-2xl text-mti-purple-light" onClick={onClose} />
+                  <div
+                    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",
-											path === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
+                      "w-fit transition duration-300 ease-in-out",
+                      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",
-													path === "/exam" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-												)}>
+                          "w-fit transition duration-300 ease-in-out",
+                          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,68 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
                   <Link
                     href="/stats"
                     className={clsx(
-											"transition ease-in-out duration-300 w-fit",
-											path === "/stats" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
+                      "w-fit transition duration-300 ease-in-out",
+                      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",
-											path === "/record" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
+                      "w-fit transition duration-300 ease-in-out",
+                      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",
-												path === "/settings" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-											)}>
+                        "w-fit transition duration-300 ease-in-out",
+                        path === "/settings" &&
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                      )}
+                    >
                       Settings
                     </Link>
                   )}
                   <Link
                     href="/profile"
                     className={clsx(
-											"transition ease-in-out duration-300 w-fit",
-											path === "/profile" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
+                      "w-fit transition duration-300 ease-in-out",
+                      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")}
-										onClick={logout}>
+                    className={clsx(
+                      "w-fit cursor-pointer justify-self-end transition duration-300 ease-in-out",
+                    )}
+                    onClick={logout}
+                  >
                     Logout
                   </span>
                 </div>

src/components/Navbar.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import FocusLayer from "@/components/FocusLayer";
 import { preventNavigation } from "@/utils/navigation.disabled";
 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";
@@ -12,6 +12,10 @@ import {Type} from "@/interfaces/user";
 import { USER_TYPE_LABELS } from "@/resources/user";
 import useGroups from "@/hooks/useGroups";
 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(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";
+    if (today.add(1, "days").isAfter(momentDate))
+      return "!bg-mti-red-ultralight border-mti-red-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);
-		isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
+    if (user.type !== "student" && user.type !== "teacher")
+      setDisablePaymentPage(false);
+    isUserFromCorporate(user.id).then((result) =>
+      setDisablePaymentPage(result),
+    );
   }, [user]);
 
   return (
     <>
-			{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
-			<header className="w-full bg-transparent py-2 md:py-4 -md:justify-between md:gap-12 flex items-center relative -md:px-4">
-				<Link href={disableNavigation ? "" : "/"} className=" md:px-8 flex gap-8 items-center">
+      <Modal
+        isOpen={isTicketOpen}
+        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",
-								"transition duration-300 ease-in-out tooltip tooltip-bottom",
+                "flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",
+                "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">
-						<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
-						<span className="text-right -md:hidden">
-							{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
-							{USER_TYPE_LABELS[user.type]}
+          <Link
+            href={disableNavigation ? "" : "/profile"}
+            className="-md:hidden flex items-center justify-end gap-6"
+          >
+            <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)}>
-						<BsList className="text-mti-purple-light w-8 h-8" />
+          <div
+            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

@@ -11,6 +11,7 @@ import {
   BsShieldFill,
   BsCloudFill,
   BsCurrencyDollar,
+  BsClipboardData,
 } from "react-icons/bs";
 import { RiLogoutBoxFill } from "react-icons/ri";
 import { SlPencil } from "react-icons/sl";
@@ -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",
-				isMinimized ? "w-fit" : "w-1/6 -xl:w-fit",
+        "relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
+        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} />
-				{(userType === "student" || userType === "teacher" || userType === "developer") && (
+      )}
+    >
+      <div className="-xl:hidden flex-col gap-3 xl:flex">
+        <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 disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
-				{["admin", "developer", "agent", "corporate"].includes(userType || "") && (
+        <Nav
+          disabled={disableNavigation}
+          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"].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">
-				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" 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} />
+      <div className="-xl:flex flex-col gap-3 xl:hidden">
+        <Nav
+          disabled={disableNavigation}
+          Icon={MdSpaceDashboard}
+          label="Dashboard"
+          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/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/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/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,47 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { app } from "@/firebase";
+import { Ticket } from "@/interfaces/ticket";
+import { sessionOptions } from "@/lib/session";
+import {
+  collection,
+  doc,
+  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, "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();
+  await setDoc(doc(db, "tickets", body.id || shortUID.randomUUID(8)), body);
+  res.status(200).json({ ok: true });
+}

src/pages/tickets.tsx

@@ -0,0 +1,316 @@
+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 { 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) || user.type !== "developer") {
+    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 [typeFilter, setTypeFilter] = useState<TicketType>();
+  const [statusFilter, setStatusFilter] = useState<TicketStatus>();
+
+  const { user } = useUser({ redirectTo: "/login" });
+  const { users } = useUsers();
+  const { tickets, reload } = useTickets();
+
+  useEffect(() => {
+    const filters = [];
+    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));
+  }, [tickets, typeFilter, statusFilter, assigneeFilter]);
+
+  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", {
+      header: "Date",
+      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 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"].includes(x.type))
+                    .map((u) => ({
+                      value: u.id,
+                      label: `${u.name} - ${u.email}`,
+                    })),
+                ]}
+                value={
+                  assigneeFilter
+                    ? {
+                        value: assigneeFilter,
+                        label: `${users.find((u) => u.id === assigneeFilter)?.name} - ${users.find((u) => u.id === assigneeFilter)?.email}`,
+                      }
+                    : null
+                }
+                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>
+      )}
+    </>
+  );
+}