feat(auth): implement role-based dashboard redirect

apps/web/src/routes.tsx

@@ -1,14 +1,21 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import Login from './features/auth/Login';
 import ForgotPassword from './features/auth/ForgotPassword';
-import Dashboard from './features/dashboard/Dashboard';
-
+import AppLayout from './features/layouts/AppLayout';
+import AdminDashboard from './features/dashboard/AdminDashboard';
+import ClientDashboard from './features/dashboard/ClientDashboard';
+import VendorDashboard from './features/dashboard/VendorDashboard';
+import ProtectedRoute from './features/layouts/ProtectedRoute';
+import { getDashboardPath } from './services/firestoreService';
+import type { RootState } from './store/store';
 
 /**
  * AppRoutes Component
  * Defines the main routing structure of the application.
  * Groups routes by Layout (Public vs App).
+ * Implements role-based redirection after login.
  */
 const AppRoutes: React.FC = () => {
   return (
@@ -27,11 +34,73 @@ const AppRoutes: React.FC = () => {
               <ForgotPassword />
           }
         />
-        <Route path="/dashboard" element={<Dashboard />} />
+        {/* Authenticated Routes */}
+        <Route element={<AppLayout />}>
+          {/* Dashboard Redirect Logic - redirects to user's correct dashboard based on role */}
+          <Route path="/" element={<RoleDashboardRedirect />} />
+
+          {/* Protected Dashboard Routes */}
+          <Route
+            path="/dashboard/admin"
+            element={
+              <ProtectedRoute
+                allowedRoles={['admin']}
+                redirectTo="/dashboard/client"
+              >
+                <AdminDashboard />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/dashboard/client"
+            element={
+              <ProtectedRoute
+                allowedRoles={['client']}
+                redirectTo="/dashboard/client"
+              >
+                <ClientDashboard />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/dashboard/vendor"
+            element={
+              <ProtectedRoute
+                allowedRoles={['vendor']}
+                redirectTo="/dashboard/client"
+              >
+                <VendorDashboard />
+              </ProtectedRoute>
+            }
+          />
+        </Route>
         <Route path="*" element={<Navigate to="/login" replace />} />
       </Routes>
     </Router>
   );
 };
 
+/**
+ * RoleDashboardRedirect Component
+ * Dynamically redirects users to their appropriate dashboard based on their role
+ */
+const RoleDashboardRedirect: React.FC = () => {
+  const { isAuthenticated, user } = useSelector((state: RootState) => state.auth);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      navigate('/login', { replace: true });
+      return;
+    }
+
+    if (user?.userRole) {
+      const dashboardPath = getDashboardPath(user.userRole);
+      navigate(dashboardPath, { replace: true });
+    }
+  }, [isAuthenticated, user?.userRole, navigate]);
+
+  return null;
+};
+
 export default AppRoutes;