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

src/Components/RestrictedComponent/RestrictedComponent.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { UserAPI } from "../API/API";
+import { useQuery } from "@tanstack/react-query";
+
+type props = {
+  allow_only: string;
+  children: React.ReactNode;
+};
+export default function RestrictedComponent(props: props) {
+  const user = useQuery({ queryKey: ["user"], queryFn: UserAPI });
+  if (props.allow_only === "Teacher") {
+    if (user.data && user.data.is_teacher) {
+      return <>{props.children}</>;
+    }
+  } else if (props.allow_only === "Technician") {
+    if (user.data && user.data.is_technician) {
+      return <>{props.children}</>;
+    }
+  }
+  return <></>;
+}