equip-reserve-frontend/src/router/index.jsx

import { createBrowserRouter, Navigate } from "react-router-dom";
import CommonLayout from "../layouts/CommonLayout";
import DeviceAdminApproval from "../pages/deviceAdmin/Approval";
import LeaderApproval from "../pages/leader/Approval";
import LeaderMyApproval from "../pages/leader/MyApproval";
import Login from "../pages/Login";
import MyReservation from "../pages/user/MyReservation";
import Reserve from "../pages/user/Reserve";
import UserDetail from "../pages/UserDetail";
import ProtectedRoute from "./ProtectedRoute";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="/login" replace />,
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/",
    element: <CommonLayout />,
    children: [
      {
        path: "user",
        element: <ProtectedRoute allowedRoles={["USER"]} />,
        children: [
          {
            path: "reserve",
            element: <Reserve />,
          },
          {
            path: "my-reservation",
            element: <MyReservation />,
          },
        ],
      },
      {
        path: "leader",
        element: <ProtectedRoute allowedRoles={["LEADER"]} />,
        children: [
          {
            path: "approval",
            element: <LeaderApproval />,
          },
          {
            path: "my-approval",
            element: <LeaderMyApproval />,
          },
        ],
      },
      {
        path: "device-admin",
        element: <ProtectedRoute allowedRoles={["DEVICE_ADMIN"]} />,
        children: [
          {
            path: "approval",
            element: <DeviceAdminApproval />,
          },
        ],
      },

      {
        path: "userdetail",
        element: <UserDetail />,
      },
    ],
  },
]);

export default router;