admin-dashboard-web/src/Components/AppRoutes/index.js

import { Route, Routes } from "react-router-dom";
import { Constants, hasOnePermission, hasPermission } from "../../utils";
import { useAppContext } from "../../Contexts/AppContext";
import { Suspense, lazy } from "react";
import { Spin } from "antd";

// Lazy-loaded components
const Dashboard = lazy(() => import("../../Pages/Dashboard"));
const GroupTasks = lazy(() => import("../../Pages/GroupTasks/Overview"));
const UserProfile = lazy(() => import("../../Pages/UserProfile"));
const Scanners = lazy(() => import("../../Pages/Scanners"));
const AdminAreaRoles = lazy(() => import("../../Pages/AdminArea/Roles"));
const AdminAreaLogs = lazy(() => import("../../Pages/AdminArea/Logs"));
const AllUsers = lazy(() => import("../../Pages/AllUsers"));
const GroupTasksHistory = lazy(() => import("../../Pages/GroupTasks/History"));
const PageNotFound = lazy(() => import("../../Pages/PageNotFound"));
const EquipmentDocumentationOverview = lazy(() =>
  import("../../Pages/EquipmentDocumentation")
);
const ViewEquipmentDocumentations = lazy(() =>
  import("../../Pages/EquipmentDocumentation/ViewEquipmentDocumentation")
);

function SuspenseFallback({ children }) {
  return (
    <Suspense
      fallback={
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
            alignContent: "center",
            alignItems: "center",
            textAlign: "center",
            height: "98.3vh",
          }}
        >
          <Spin size="large" />
        </div>
      }
    >
      {children}
    </Suspense>
  );
}

export default function AppRoutes() {
  const appContext = useAppContext();

  /*
   <Route
        path={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + ":paramGroupTaskId"}
        element={
          <SuspenseFallback>
            <GroupTasks isGroupTasksViewModalOpen={true} />
          </SuspenseFallback>
        }
      />
  */

  console.info("appRoutes");

  return (
    <Routes>
      <Route
        path="/"
        element={
          <SuspenseFallback>
            <Dashboard />
          </SuspenseFallback>
        }
      />

      {hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.EQUIPMENT_DOCUMENTATION.VIEW
      ) && (
        <Route
          path={Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION}
          element={
            <SuspenseFallback>
              <EquipmentDocumentationOverview />
            </SuspenseFallback>
          }
        />
      )}

      {hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.EQUIPMENT_DOCUMENTATION.VIEW
      ) && (
        <Route
          path={`${Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION_VIEW}:paramStockId`}
          element={
            <SuspenseFallback>
              <ViewEquipmentDocumentations />
            </SuspenseFallback>
          }
        />
      )}

      {hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.EQUIPMENT_DOCUMENTATION.EDIT
      ) && (
        <Route
          path={`${Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION_VIEW}:paramStockId/edit/:paramDocumentationId`}
          element={
            <SuspenseFallback>
              <ViewEquipmentDocumentations
                isEditEquipmentDocumentationModalOpen={true}
              />
            </SuspenseFallback>
          }
        />
      )}

      {hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.EQUIPMENT_DOCUMENTATION.CREATE
      ) && (
        <Route
          path={`${Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION_VIEW}:paramStockId/create`}
          element={
            <SuspenseFallback>
              <ViewEquipmentDocumentations
                isCreateEquipmentDocumentationModalOpen={true}
              />
            </SuspenseFallback>
          }
        />
      )}

      <Route
        path={`${Constants.ROUTE_PATHS.GROUP_TASKS_VIEW}:paramCategory`}
        element={
          <SuspenseFallback>
            <GroupTasks isGroupTasksViewModalOpen={false} />
          </SuspenseFallback>
        }
      />

      {hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.GROUP_TASKS.HISTORY
      ) && (
        <Route
          path={Constants.ROUTE_PATHS.GROUP_TASKS + "-history"}
          element={
            <SuspenseFallback>
              <GroupTasksHistory />
            </SuspenseFallback>
          }
        />
      )}

      {hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.SCANNER.USE_SCANNERS
      ) && (
        <Route
          path="/scanners"
          element={
            <SuspenseFallback>
              <Scanners />
            </SuspenseFallback>
          }
        />
      )}

      <Route
        path="/users"
        element={
          <SuspenseFallback>
            <AllUsers />
          </SuspenseFallback>
        }
      />

      <Route
        path="/user-profile"
        element={
          <SuspenseFallback>
            <UserProfile />
          </SuspenseFallback>
        }
      />

      {hasOnePermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.CREATE_NEW_ROLE,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.UPDATE_ROLE,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.DELETE_ROLE,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.MOVE_ROLE_UP_DOWN
      ) && (
        <Route
          path="/admin-area/roles"
          element={
            <SuspenseFallback>
              <AdminAreaRoles />
            </SuspenseFallback>
          }
        />
      )}

      {hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.ADMIN_AREA.LOGS
      ) && (
        <Route
          path="/admin-area/logs"
          element={
            <SuspenseFallback>
              <AdminAreaLogs />
            </SuspenseFallback>
          }
        />
      )}

      <Route
        path="*"
        element={
          <SuspenseFallback>
            <PageNotFound />
          </SuspenseFallback>
        }
      />
    </Routes>
  );
}