Separate Client Portal & Dashboard

frontend/dashboard/src/routes/index.tsx

@@ -0,0 +1,118 @@
+import { Suspense, lazy, ElementType } from 'react';
+import { Navigate, useRoutes, useLocation } from 'react-router-dom';
+// layouts
+import DashboardLayout from '../layouts/dashboard';
+import LogoOnlyLayout from '../layouts/LogoOnlyLayout';
+// components
+import LoadingScreen from '../components/LoadingScreen';
+import GuestGuard from '../guards/GuestGuard';
+import { RegisterForm } from '../sections/auth/register';
+import Register from '../pages/auth/Register';
+import ResetPassword from '../pages/auth/ResetPassword';
+import VerifyCode from '../pages/auth/VerifyCode';
+import { AuthProvider } from '../contexts/LaravelAuthContext';
+
+// ----------------------------------------------------------------------
+
+const Loadable = (Component: ElementType) => (props: any) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { pathname } = useLocation();
+
+  return (
+    <Suspense fallback={<LoadingScreen isDashboard={pathname.includes('/dashboard')} />}>
+      <Component {...props} />
+    </Suspense>
+  );
+};
+
+export default function Router() {
+  return useRoutes([
+    {
+      path: 'auth',
+      children: [
+        {
+          path: 'login',
+          element: (
+            <AuthProvider>
+              <Login />
+            </AuthProvider>
+          ),
+        },
+        {
+          path: 'register',
+          element: (
+            <GuestGuard>
+              <RegisterForm />
+            </GuestGuard>
+          ),
+        },
+        { path: 'login-unprotected', element: <Login /> },
+        { path: 'register-unprotected', element: <Register /> },
+        { path: 'reset-password', element: <ResetPassword /> },
+        { path: 'verify', element: <VerifyCode /> },
+      ],
+    },
+    // {
+    //   path: '/',
+    //   element: <Navigate to="/dashboard/one" replace />,
+    // },
+    {
+      path: '/',
+      element: <DashboardLayout />,
+      children:[
+        {
+          path: 'medicines',
+          element: <AuthProvider><Medicines /></AuthProvider>,
+        },
+        {
+          path: 'medicines/create',
+          element: <AuthProvider><MedicinesCreate /></AuthProvider>
+        },
+      ]
+    },
+    // {
+    //   path: '/dashboard',
+    //   element: <DashboardLayout />,
+    //   children: [
+    //     { element: <Navigate to="/dashboard/one" replace />, index: true },
+    //     { path: 'one', element: 
+    //         <AuthProvider><PageOne /></AuthProvider> },
+    //     { path: 'two', element: 
+    //         <AuthProvider><PageTwo /></AuthProvider> },
+    //     { path: 'three', element: 
+    //         <AuthProvider><PageThree /></AuthProvider> },
+    //     {
+    //       path: 'user',
+    //       children: [
+    //         { element: <Navigate to="/dashboard/user/four" replace />, index: true },
+    //         { path: 'four', element: <AuthProvider><PageFour /></AuthProvider> },
+    //         { path: 'six', element: <AuthProvider><PageSix /> </AuthProvider> },
+    //       ],
+    //     },
+    //   ],
+    // },
+    {
+      path: '*',
+      element: <LogoOnlyLayout />,
+      children: [
+        { path: '404', element: <NotFound /> },
+        { path: '*', element: <Navigate to="/404" replace /> },
+      ],
+    },
+    { path: '*', element: <Navigate to="/404" replace /> },
+  ]);
+}
+
+const Login = Loadable(lazy(() => import('../pages/auth/Login')));
+
+// Medicines
+const Medicines = Loadable(lazy(() => import('../pages/Medicines/Index')));
+const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create')));
+
+// Dashboard
+const PageOne = Loadable(lazy(() => import('../pages/PageOne')));
+const PageTwo = Loadable(lazy(() => import('../pages/PageTwo')));
+const PageThree = Loadable(lazy(() => import('../pages/PageThree')));
+const PageFour = Loadable(lazy(() => import('../pages/PageFour')));
+const PageSix = Loadable(lazy(() => import('../pages/PageSix')));
+const NotFound = Loadable(lazy(() => import('../pages/Page404')));

frontend/dashboard/src/routes/paths.ts

@@ -0,0 +1,16 @@
+function path(root: string, sublink: string) {
+  return `${root}${sublink}`;
+}
+
+const ROOTS_AUTH = '/auth';
+const ROOTS_DASHBOARD = '/dashboard';
+
+export const PATH_AUTH = {
+  root: ROOTS_AUTH,
+  login: path(ROOTS_AUTH, '/login'),
+  register: path(ROOTS_AUTH, '/register'),
+  loginUnprotected: path(ROOTS_AUTH, '/login-unprotected'),
+  registerUnprotected: path(ROOTS_AUTH, '/register-unprotected'),
+  verify: path(ROOTS_AUTH, '/verify'),
+  resetPassword: path(ROOTS_AUTH, '/reset-password'),
+};