gg

src/App.jsx

@@ -17,6 +17,8 @@ import { ToastContainer } from "react-toastify";
 import { RecoilRoot } from "recoil";
 import NotLoggedIn from "./Components/ProtectedRoutes/NotLoggedIn.js";
 import IsloggedIn from "./Components/ProtectedRoutes/IsloggedIn.js";
+import IsAdmin from "./Components/ProtectedRoutes/IsAdmin.js";
+import IsOwenr from "./Components/ProtectedRoutes/IsOwenr.js";
 export default function App() {
   return (
     <div className="App">
@@ -43,12 +45,16 @@ export default function App() {
               } />
               <Route path="Dashboard" element={
                 <IsloggedIn>
-                  <Dashboard />
+                  <IsAdmin>
+                   <Dashboard />
+                  </IsAdmin>
                 </IsloggedIn>
               } />
               <Route path="Users" element={
                 <IsloggedIn>
+                  <IsOwenr>
                   <Users />
+                  </IsOwenr>
                 </IsloggedIn>
               } />
               <Route path="APPOINTMENT" element={

src/Components/ProtectedRoutes/IsAdmin.js

@@ -0,0 +1,14 @@
+import React, { Fragment } from 'react';
+import { useRecoilState } from 'recoil';
+import { Navigate } from 'react-router-dom';
+import $AuthData from '../../store/index';
+
+export default function IsAdmin({ children }) {
+  const [authRecoil] = useRecoilState($AuthData);
+
+  if (authRecoil.role !== 'owner' && authRecoil.role !== 'admin') {
+    return <Navigate to="/" />;
+  }
+
+  return <Fragment>{children}</Fragment>;
+}

src/Components/ProtectedRoutes/IsOwenr.js

@@ -0,0 +1,14 @@
+import React, { Fragment } from 'react';
+import { useRecoilState } from 'recoil';
+import { Navigate } from 'react-router-dom';
+import $AuthData from '../../store/index';
+
+export default function IsOwenr({ children }) {
+  const [authRecoil] = useRecoilState($AuthData);
+
+  if (authRecoil.role !== 'owner') {
+    return <Navigate to="/" />;
+  }
+
+  return <Fragment>{children}</Fragment>;
+}

src/store/index.js

@@ -1,14 +1,19 @@
 import { atom } from "recoil";
 
 const localData = JSON.parse(localStorage.getItem('loginUser'));
+const defaultAuthData = {
+  isAuth: false,
+  user: null,
+  role: null
+};
+
+if (localData && localData.role) {
+  defaultAuthData.role = localData.role;
+}
 
 const $AuthData = atom({
   key: "$AuthData",
-  default: localData || {
-    isAuth: false,
-    user: null,
-    role: null || localData.role
-  },
+  default: localData || defaultAuthData,
 });
 
 export default $AuthData;