Created a new page for ticket handling as well as submission

src/components/Sidebar.tsx

@@ -1,175 +1,295 @@
 import clsx from "clsx";
-import {IconType} from "react-icons";
-import {MdSpaceDashboard} from "react-icons/md";
+import { IconType } from "react-icons";
+import { MdSpaceDashboard } from "react-icons/md";
 import {
-	BsFileEarmarkText,
-	BsClockHistory,
-	BsPencil,
-	BsGraphUp,
-	BsChevronBarRight,
-	BsChevronBarLeft,
-	BsShieldFill,
-	BsCloudFill,
-	BsCurrencyDollar,
+  BsFileEarmarkText,
+  BsClockHistory,
+  BsPencil,
+  BsGraphUp,
+  BsChevronBarRight,
+  BsChevronBarLeft,
+  BsShieldFill,
+  BsCloudFill,
+  BsCurrencyDollar,
+  BsClipboardData,
 } from "react-icons/bs";
-import {RiLogoutBoxFill} from "react-icons/ri";
-import {SlPencil} from "react-icons/sl";
-import {FaAward} from "react-icons/fa";
+import { RiLogoutBoxFill } from "react-icons/ri";
+import { SlPencil } from "react-icons/sl";
+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 {useState} from "react";
+import { preventNavigation } from "@/utils/navigation.disabled";
+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;
-	focusMode?: boolean;
-	onFocusLayerMouseEnter?: () => void;
-	className?: string;
-	userType?: Type;
+  path: string;
+  navDisabled?: boolean;
+  focusMode?: boolean;
+  onFocusLayerMouseEnter?: () => void;
+  className?: string;
+  userType?: Type;
 }
 
 interface NavProps {
-	Icon: IconType;
-	label: string;
-	path: string;
-	keyPath: string;
-	disabled?: boolean;
-	isMinimized?: boolean;
+  Icon: IconType;
+  label: string;
+  path: string;
+  keyPath: string;
+  disabled?: boolean;
+  isMinimized?: boolean;
 }
 
-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",
-			"transition-all duration-300 ease-in-out",
-			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",
-		)}>
-		<Icon size={24} />
-		{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
-	</Link>
+const Nav = ({
+  Icon,
+  label,
+  path,
+  keyPath,
+  disabled = false,
+  isMinimized = false,
+}: NavProps) => (
+  <Link
+    href={!disabled ? keyPath : ""}
+    className={clsx(
+      "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",
+      path === keyPath && "bg-mti-purple-light text-white",
+      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) {
-	const router = useRouter();
+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(() => {
-			setTimeout(() => router.reload(), 500);
-		});
-	};
+  const logout = async () => {
+    axios.post("/api/logout").finally(() => {
+      setTimeout(() => router.reload(), 500);
+    });
+  };
 
-	const disableNavigation = preventNavigation(navDisabled, focusMode);
+  const disableNavigation = preventNavigation(navDisabled, focusMode);
 
-	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",
-				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") && (
-					<>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsFileEarmarkText}
-							label="Exams"
-							path={path}
-							keyPath="/exam"
-							isMinimized={isMinimized}
-						/>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsPencil}
-							label="Exercises"
-							path={path}
-							keyPath="/exercises"
-							isMinimized={isMinimized}
-						/>
-					</>
-				)}
-				<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}
-						label="Payment Record"
-						path={path}
-						keyPath="/payment-record"
-						isMinimized={isMinimized}
-					/>
-				)}
-				{["admin", "developer", "corporate", "teacher"].includes(userType || "") && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsShieldFill}
-						label="Settings"
-						path={path}
-						keyPath="/settings"
-						isMinimized={isMinimized}
-					/>
-				)}
-				{userType === "developer" && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsCloudFill}
-						label="Generation"
-						path={path}
-						keyPath="/generation"
-						isMinimized={isMinimized}
-					/>
-				)}
-			</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} />
-				{userType !== "student" && (
-					<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} />
-				)}
-			</div>
+  return (
+    <section
+      className={clsx(
+        "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: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}
+              Icon={BsFileEarmarkText}
+              label="Exams"
+              path={path}
+              keyPath="/exam"
+              isMinimized={isMinimized}
+            />
+            <Nav
+              disabled={disableNavigation}
+              Icon={BsPencil}
+              label="Exercises"
+              path={path}
+              keyPath="/exercises"
+              isMinimized={isMinimized}
+            />
+          </>
+        )}
+        <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}
+            label="Payment Record"
+            path={path}
+            keyPath="/payment-record"
+            isMinimized={isMinimized}
+          />
+        )}
+        {["admin", "developer", "corporate", "teacher"].includes(
+          userType || "",
+        ) && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsShieldFill}
+            label="Settings"
+            path={path}
+            keyPath="/settings"
+            isMinimized={isMinimized}
+          />
+        )}
+        {["admin", "developer"].includes(userType || "") && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsClipboardData}
+            label="Tickets"
+            path={path}
+            keyPath="/tickets"
+            isMinimized={isMinimized}
+          />
+        )}
+        {userType === "developer" && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCloudFill}
+            label="Generation"
+            path={path}
+            keyPath="/generation"
+            isMinimized={isMinimized}
+          />
+        )}
+      </div>
+      <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}
+          />
+        )}
+        {userType === "developer" && (
+          <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
-					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",
-						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>}
-				</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",
-						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>}
-				</div>
-			</div>
-			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
-		</section>
-	);
+      <div className="fixed bottom-12 flex flex-col gap-0">
+        <div
+          role="button"
+          tabIndex={1}
+          onClick={toggleMinimize}
+          className={clsx(
+            "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>
+          )}
+        </div>
+        <div
+          role="button"
+          tabIndex={1}
+          onClick={focusMode ? () => {} : logout}
+          className={clsx(
+            "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="-xl:hidden text-lg font-medium">Log Out</span>
+          )}
+        </div>
+      </div>
+      {focusMode && (
+        <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
+      )}
+    </section>
+  );
 }