first commit

src/app/routing/AppRoutes.tsx

@@ -0,0 +1,47 @@
+/**
+ * High level router.
+ *
+ * Note: It's recommended to compose related routes in internal router
+ * components (e.g: `src/app/modules/Auth/pages/AuthPage`, `src/app/BasePage`).
+ */
+
+import {FC} from 'react'
+import {Routes, Route, BrowserRouter, Navigate} from 'react-router-dom'
+import {PrivateRoutes} from './PrivateRoutes'
+import {ErrorsPage} from '../modules/errors/ErrorsPage'
+import {Logout, AuthPage, useAuth} from '../modules/auth'
+import {App} from '../App'
+
+/**
+ * Base URL of the website.
+ *
+ * @see https://facebook.github.io/create-react-app/docs/using-the-public-folder
+ */
+const {BASE_URL} = import.meta.env
+console.log("*************BASE_URL**************** " + BASE_URL );
+const AppRoutes: FC = () => {
+  const {currentUser} = useAuth()
+  return (
+    <BrowserRouter basename={BASE_URL}>
+      <Routes>
+        <Route element={<App />}>
+          <Route path='error/*' element={<ErrorsPage />} />
+          <Route path='logout' element={<Logout />} />
+          {currentUser ? (
+            <>
+              <Route path='/*' element={<PrivateRoutes />} />
+              <Route index element={<Navigate to='/dashboard' />} />
+            </>
+          ) : (
+            <>
+              <Route path='auth/*' element={<AuthPage />} />
+              <Route path='*' element={<Navigate to='/auth' />} />
+            </>
+          )}
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  )
+}
+
+export {AppRoutes}

src/app/routing/PrivateRoutes.tsx

@@ -0,0 +1,96 @@
+import {lazy, FC, Suspense} from 'react'
+import {Route, Routes, Navigate} from 'react-router-dom'
+import {MasterLayout} from '../../_metronic/layout/MasterLayout'
+import TopBarProgress from 'react-topbar-progress-indicator'
+import {DashboardWrapper} from '../pages/dashboard/DashboardWrapper'
+import {MenuTestPage} from '../pages/MenuTestPage'
+import {getCSSVariableValue} from '../../_metronic/assets/ts/_utils'
+import {WithChildren} from '../../_metronic/helpers'
+import BuilderPageWrapper from '../pages/layout-builder/BuilderPageWrapper'
+
+const PrivateRoutes = () => {
+  const ProfilePage = lazy(() => import('../modules/profile/ProfilePage'))
+  const WizardsPage = lazy(() => import('../modules/wizards/WizardsPage'))
+  const AccountPage = lazy(() => import('../modules/accounts/AccountPage'))
+  const WidgetsPage = lazy(() => import('../modules/widgets/WidgetsPage'))
+  const ChatPage = lazy(() => import('../modules/apps/chat/ChatPage'))
+  const UsersPage = lazy(() => import('../modules/apps/user-management/UsersPage'))
+
+  return (
+    <Routes>
+      <Route element={<MasterLayout />}>
+        {/* Redirect to Dashboard after success login/registartion */}
+        <Route path='auth/*' element={<Navigate to='/dashboard' />} />
+        {/* Pages */}
+        <Route path='dashboard' element={<DashboardWrapper />} />
+        <Route path='builder' element={<BuilderPageWrapper />} />
+        <Route path='menu-test' element={<MenuTestPage />} />
+        {/* Lazy Modules */}
+        <Route
+          path='crafted/pages/profile/*'
+          element={
+            <SuspensedView>
+              <ProfilePage />
+            </SuspensedView>
+          }
+        />
+        <Route
+          path='crafted/pages/wizards/*'
+          element={
+            <SuspensedView>
+              <WizardsPage />
+            </SuspensedView>
+          }
+        />
+        <Route
+          path='crafted/widgets/*'
+          element={
+            <SuspensedView>
+              <WidgetsPage />
+            </SuspensedView>
+          }
+        />
+        <Route
+          path='crafted/account/*'
+          element={
+            <SuspensedView>
+              <AccountPage />
+            </SuspensedView>
+          }
+        />
+        <Route
+          path='apps/chat/*'
+          element={
+            <SuspensedView>
+              <ChatPage />
+            </SuspensedView>
+          }
+        />
+        <Route
+          path='apps/user-management/*'
+          element={
+            <SuspensedView>
+              <UsersPage />
+            </SuspensedView>
+          }
+        />
+        {/* Page Not Found */}
+        <Route path='*' element={<Navigate to='/error/404' />} />
+      </Route>
+    </Routes>
+  )
+}
+
+const SuspensedView: FC<WithChildren> = ({children}) => {
+  const baseColor = getCSSVariableValue('--bs-primary')
+  TopBarProgress.config({
+    barColors: {
+      '0': baseColor,
+    },
+    barThickness: 1,
+    shadowBlur: 5,
+  })
+  return <Suspense fallback={<TopBarProgress />}>{children}</Suspense>
+}
+
+export {PrivateRoutes}