107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
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 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 (
|
|
<Router>
|
|
<Routes>
|
|
{/* Public Routes */}
|
|
<Route
|
|
path="/login"
|
|
element={
|
|
<Login />
|
|
}
|
|
/>
|
|
<Route
|
|
path="/forgot-password"
|
|
element={
|
|
<ForgotPassword />
|
|
}
|
|
/>
|
|
{/* 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;
|