Separate Client Portal & Dashboard

frontend/dashboard/src/guards/AuthGuard.tsx

@@ -0,0 +1,38 @@
+import { useState, ReactNode } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+// hooks
+import useAuth from '../hooks/useAuth';
+// pages
+import Login from '../pages/auth/Login';
+// components
+import LoadingScreen from '../components/LoadingScreen';
+
+// ----------------------------------------------------------------------
+
+type AuthGuardProps = {
+  children: ReactNode;
+};
+
+export default function AuthGuard({ children }: AuthGuardProps) {
+  const { isAuthenticated, isInitialized } = useAuth();
+  const { pathname } = useLocation();
+  const [requestedLocation, setRequestedLocation] = useState<string | null>(null);
+
+  if (!isInitialized) {
+    return <LoadingScreen />;
+  }
+
+  if (!isAuthenticated) {
+    if (pathname !== requestedLocation) {
+      setRequestedLocation(pathname);
+    }
+    return <Login />;
+  }
+
+  if (requestedLocation && pathname !== requestedLocation) {
+    setRequestedLocation(null);
+    return <Navigate to={requestedLocation} />;
+  }
+
+  return <>{children}</>;
+}

frontend/dashboard/src/guards/GuestGuard.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+// hooks
+import useAuth from '../hooks/useAuth';
+// routes
+// import { PATH_DASHBOARD } from '../routes/paths';
+
+// ----------------------------------------------------------------------
+
+type GuestGuardProps = {
+  children: ReactNode;
+};
+
+export default function GuestGuard({ children }: GuestGuardProps) {
+  const { isAuthenticated } = useAuth();
+
+  if (isAuthenticated) {
+    return <Navigate to={'/dashboard'} />;
+  }
+
+  return <>{children}</>;
+}

frontend/dashboard/src/guards/RoleBasedGuard.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { Container, Alert, AlertTitle } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+type RoleBasedGuardProp = {
+  accessibleRoles: string[];
+  children: ReactNode | string;
+};
+
+const useCurrentRole = () => {
+  // Logic here to get current user role
+  const role = 'admin';
+  return role;
+};
+
+export default function RoleBasedGuard({ accessibleRoles, children }: RoleBasedGuardProp) {
+  const currentRole = useCurrentRole();
+
+  if (!accessibleRoles.includes(currentRole)) {
+    return (
+      <Container>
+        <Alert severity="error">
+          <AlertTitle>Permission Denied</AlertTitle>
+          You do not have permission to access this page
+        </Alert>
+      </Container>
+    );
+  }
+
+  return <>{children}</>;
+}