aeroresolve_frontend/src/AppRoutes.tsx

import { lazy, Suspense } from "react";
import { Route, Routes, Navigate } from "react-router-dom";
import Layout from "./layout/AppLayout";
import ProtectedRoute from "./components/common/ProtectedRoute";

const LoginPage = lazy(() => import("./app/authentication"));
const HomePage = lazy(() => import("./app/dashboard"));
const SimulationPage = lazy(() => import("./app/simulation"));
const CohortManage = lazy(() => import("./app/cohartManage"));
const PolicyEngineList = lazy(() => import("./app/policyEngine/components/PolicyEngineList"));
const AddPolicyEngine = lazy(() => import("./app/policyEngine/components/AddPolicyEngine"));
const RecoveryIncidentsList = lazy(() => import("./app/recoveryIncidents/components/RecoveryIncidentsList"));
const RecoveryIncidentTabs = lazy(() => import("./app/recoveryIncidents/tabs/index"));
const ConfigurationPage = lazy(() => import("./app/configuration"));
const AuditLogsList = lazy(() => import("./app/auditLogs/components/AuditLogsList"));
const UsersPage = lazy(() => import("./app/users"));
const RolesPage = lazy(() => import("./app/roles"));

function AppRoutes() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center bg-[#F4F7F6]">
          <div className="w-10 h-10 border-4 border-slate-200 border-t-teal-600 rounded-full animate-spin" />
        </div>
      }
    >
      <Routes>
        {/* Public Login Route */}
        <Route path="/login" element={<LoginPage />} />

        {/* Protected Application Routes */}
        <Route
          path="/*"
          element={
            <ProtectedRoute>
              <Layout>
                <Suspense
                  fallback={
                    <div className="min-h-[400px] flex items-center justify-center">
                      <div className="w-8 h-8 border-3 border-slate-200 border-t-teal-600 rounded-full animate-spin" />
                    </div>
                  }
                >
                  <Routes>
                    <Route
                      path="/"
                      element={
                        <ProtectedRoute permission="dashboard:view">
                          <HomePage />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/simulation"
                      element={
                        <ProtectedRoute permission="simulation:view">
                          <SimulationPage />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/cohorts"
                      element={
                        <ProtectedRoute permission="cohorts:view">
                          <CohortManage />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/policy-engine"
                      element={
                        <ProtectedRoute permission="policy_engine:view">
                          <PolicyEngineList />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/policy-engine/add"
                      element={
                        <ProtectedRoute permission="policy_engine:create">
                          <AddPolicyEngine />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/policy-engine/edit/:id"
                      element={
                        <ProtectedRoute permission="policy_engine:edit">
                          <AddPolicyEngine />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/action-builder"
                      element={<Navigate to="/config?tab=action-builder" replace />}
                    />
                    <Route
                      path="/config"
                      element={
                        <ProtectedRoute permission="config:view">
                          <ConfigurationPage />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/recovery"
                      element={
                        <ProtectedRoute permission="recovery:view">
                          <RecoveryIncidentsList />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/recovery/:id"
                      element={
                        <ProtectedRoute permission="recovery:view">
                          <RecoveryIncidentTabs />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/users"
                      element={
                        <ProtectedRoute permission="users:view">
                          <UsersPage />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/roles"
                      element={
                        <ProtectedRoute permission="roles:view">
                          <RolesPage />
                        </ProtectedRoute>
                      }
                    />
                    <Route
                      path="/audit-logs"
                      element={
                        <ProtectedRoute permission="audit_logs:view">
                          <AuditLogsList />
                        </ProtectedRoute>
                      }
                    />
                    <Route path="*" element={<Navigate to="/" replace />} />
                  </Routes>
                </Suspense>
              </Layout>
            </ProtectedRoute>
          }
        />
      </Routes>
    </Suspense>
  );
}

export default AppRoutes;