feat: Integrate Data Connect and Implement Staff List View Directory

apps/web/src/features/layouts/ProtectedRoute.tsx

@@ -5,7 +5,7 @@ import type { RootState } from '../../store/store';
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
-  allowedRoles: Array<'admin' | 'client' | 'vendor'>;
+  allowedRoles: Array<'admin' | 'client' | 'vendor' | 'ADMIN' | 'CLIENT' | 'VENDOR'>;
   redirectTo?: string;
 }
 
@@ -27,7 +27,11 @@ const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
   }
 
   // If user is authenticated but role is not allowed, redirect to specified path
-  if (user?.userRole && !allowedRoles.includes(user.userRole)) {
+  // Compare roles case-insensitively to handle backend casing (e.g., "ADMIN" vs "admin")
+  if (
+    user?.userRole &&
+    !allowedRoles.some((r) => r.toLowerCase() === user.userRole!.toLowerCase())
+  ) {
     return <Navigate to={redirectTo} replace />;
   }