Added conditional rendering to dashboard page and restrict certain pages select user types

src/Components/RestrictedPage/RestrictedPage.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { UserAPI } from "../API/API";
+import { toast } from "react-toastify";
+import { useQuery } from "@tanstack/react-query";
+
+type props = {
+  allow_only: string;
+};
+export default function RestrictedPage(props: props) {
+  const navigate = useNavigate();
+  const user = useQuery({ queryKey: ["user"], queryFn: UserAPI });
+  useEffect(() => {
+    if (props.allow_only == "Teacher") {
+      if (user.data && !user.data.is_teacher) {
+        navigate("/");
+        toast("You are not a teacher!", {
+          position: "bottom-center",
+          autoClose: 2000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "light",
+        });
+      }
+    } else if (props.allow_only == "Technician") {
+      if (user.data && !user.data.is_technician) {
+        navigate("/");
+        toast("You are not a technician!", {
+          position: "bottom-center",
+          autoClose: 2000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "light",
+        });
+      }
+    }
+  }, [navigate, props.allow_only, user.data]);
+
+  return <></>;
+}