Routing

Routing uses React Router v6 createBrowserRouter. Route configs live in src/routes/.

Router entry — `routes/index.tsx`

const router = createBrowserRouter([LoginRoutes, MainRoutes]);

LoginRoutes is listed first; both share root path / with different layout children.

Path	Layout	Component
`/`	`AuthLayout`	`AuthLogin`
`/login`	`AuthLayout`	`AuthLogin`

Main routes — `routes/MainRoutes.tsx`

All authenticated pages use SimpleLayout with SimpleLayoutType.SIMPLE.

Route table

Path	Element	Access
`/dashboard`	`DashboardRoute`	Admin → `DashboardPage`; User → `DashboardUserPage`
`/users`	`UserIndexElement`	Admin only; others see 404
`/users/add`	`UserFormElement isEdit={false}`	Admin only
`/users/edit`	`UserFormElement isEdit={true}`	Admin only
`/settings`	`IndexSettingPage`	Authenticated (layout-level)
`/settings/add`	`IndexSettingFormPage isEdit={false}`	Authenticated
`/settings/edit`	`IndexSettingFormPage isEdit={true}`	Authenticated
`/profile`	`UserFormElement isEdit={true} isUser={true}`	Any logged-in user
`/maintenance/*`	Maintenance pages	Public error/coming-soon pages
`*`	`MaintenanceError` (404)	Catch-all

Role wrappers

const DashboardRoute = () => {
  const { user } = useAuth();
  return user?.role === "admin" ? <DashboardPage /> : <DashboardUserPage />;
};

const UserIndexElement = () => {
  const { user } = useAuth();
  return user?.role === "admin" ? <UserPage /> : <MaintenanceError />;
};

UserFormElement allows admin or isUser={true} for profile self-edit.

Lazy loading

All page components are loaded with:

const DashboardPage = Loadable(lazy(() => import('pages/dashboard')));

This code-splits route bundles and shows a loading fallback via Loadable.

Route guards

AuthGuard and GuestGuard (utils/route-guard/) are available but applied at layout level in some MUI template variants. Current MainRoutes relies on role checks inside route elements rather than wrapping every route with AuthGuard. See Route guards.

Post-login redirect: /dashboard (APP_DEFAULT_PATH)
401 API response: axios interceptor redirects to /login
Logout: window.location.pathname = '/login'

Architecture

Authentication

Services

Pages

Components

Hooks and Utils

Real-time

Store

Router entry — `routes/index.tsx`

Main routes — `routes/MainRoutes.tsx`

Route table

Role wrappers

Lazy loading

Route guards

Navigation defaults

​Router entry — routes/index.tsx

​Login routes — routes/LoginRoutes.tsx

​Main routes — routes/MainRoutes.tsx

​Route table

​Role wrappers

​Lazy loading

​Route guards

​Navigation defaults

Router entry — `routes/index.tsx`

Login routes — `routes/LoginRoutes.tsx`

Main routes — `routes/MainRoutes.tsx`

Route table

Role wrappers

Lazy loading

Route guards

Navigation defaults