Created a simple permissions system for users

src/components/Navbar.tsx

@@ -1,3 +1,4 @@
+import {Type} from "@/interfaces/user";
 import axios from "axios";
 import Link from "next/link";
 import {useRouter} from "next/router";
@@ -7,12 +8,13 @@ import {MenuItem} from "primereact/menuitem";
 
 interface Props {
 	profilePicture: string;
+	userType: Type;
 	timer?: number;
 	showExamEnd?: boolean;
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({profilePicture, timer, showExamEnd = false}: Props) {
+export default function Navbar({profilePicture, userType, timer, showExamEnd = false}: Props) {
 	const router = useRouter();
 
 	const logout = async () => {
@@ -41,7 +43,7 @@ export default function Navbar({profilePicture, timer, showExamEnd = false}: Pro
 			label: "Users",
 			icon: "pi pi-fw pi-users",
 			items: [
-				{label: "List", icon: "pi pi-fw pi-users", url: "/users"},
+				...(userType === "student" ? [] : [{label: "List", icon: "pi pi-fw pi-users", url: "/users"}]),
 				{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/stats"},
 				{label: "History", icon: "pi pi-fw pi-history", url: "/history"},
 			],

src/pages/exam/index.tsx

@@ -190,7 +190,7 @@ export default function Page() {
 			<ToastContainer />
 			{user && (
 				<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black pb-4 gap-4">
-					<Navbar profilePicture={user.profilePicture} timer={exam ? timer : undefined} />
+					<Navbar userType={user.type} profilePicture={user.profilePicture} timer={exam ? timer : undefined} />
 					{renderScreen()}
 				</main>
 			)}

src/pages/history.tsx

@@ -94,9 +94,9 @@ export default function History({user}: {user: User}) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<main className="w-full h-full min-h-[100vh] flex flex-col bg-neutral-100 text-black">
-				<Navbar profilePicture={user.profilePicture} />
+				<Navbar userType={user.type} profilePicture={user.profilePicture} />
 				<div className="w-fit self-center">
-					{!isUsersLoading && (
+					{!isUsersLoading && user.type !== "student" && (
 						<Dropdown value={selectedUser} options={users} optionLabel="name" onChange={(e) => setSelectedUser(e.target.value)} />
 					)}
 				</div>

src/pages/index.tsx

@@ -54,7 +54,7 @@ export default function Home() {
 			</Head>
 			{user && (
 				<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black">
-					<Navbar profilePicture={user.profilePicture} showExamEnd={showEndExam} />
+					<Navbar userType={user.type} profilePicture={user.profilePicture} showExamEnd={showEndExam} />
 					<div className="w-full h-full p-4 relative flex flex-col gap-8">
 						<section className="h-full w-full flex lg:gap-8 flex-col lg:flex-row justify-center md:justify-start md:items-start">
 							<section className="w-full h-full flex items-center">

src/pages/profile.tsx

@@ -37,7 +37,7 @@ export default function Profile({user}: {user: User}) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<main className="w-full h-screen flex flex-col items-center bg-neutral-100">
-				<Navbar profilePicture={user.profilePicture} />
+				<Navbar userType={user.type} profilePicture={user.profilePicture} />
 				<div className="w-full h-full flex flex-col items-center justify-center p-4 relative">
 					<section className="bg-white drop-shadow-xl p-4 rounded-xl w-96 flex flex-col items-center">
 						<Avatar image={user.profilePicture} size="xlarge" shape="circle" />

src/pages/stats.tsx

@@ -56,9 +56,9 @@ export default function Stats({user}: {user: User}) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-neutral-600">
-				<Navbar profilePicture={user.profilePicture} />
+				<Navbar userType={user.type} profilePicture={user.profilePicture} />
 				<div className="w-full h-full flex flex-col items-center justify-center p-4 relative gap-8">
-					{!isLoading && (
+					{!isLoading && user.type !== "student" && (
 						<AutoComplete
 							value={autocompleteValue}
 							suggestions={items}

src/pages/users.tsx

@@ -67,7 +67,7 @@ export default function Users({user}: {user: User}) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100">
-				<Navbar profilePicture={user.profilePicture} />
+				<Navbar userType={user.type} profilePicture={user.profilePicture} />
 				<div className="w-full h-full flex flex-col items-center justify-center p-4 relative">
 					<DataTable
 						dataKey="id"