aso/frontend/hospital-portal/src/routes/index.tsx

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 VerifyCode from '@/pages/auth/VerifyCode';
import { AuthProvider } from '@/contexts/LaravelAuthContext';
import AuthGuard from '@/guards/AuthGuard';
import useAuth from '@/hooks/useAuth';
import RoleBasedGuard from '@/guards/RoleBasedGuard';

// ----------------------------------------------------------------------

const Loadable = (Component: ElementType) => (props: any) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const { pathname } = useLocation();
  const {user} = useAuth();
  const formattedRoleName = user?.role.name;

  return (
    <Suspense fallback={<LoadingScreen isDashboard={pathname.includes('/dashboard')} />}>
      <Component {...props} />
    </Suspense>
  );
};

export default function Router() {
  return useRoutes([
    {
      path: 'auth',
      children: [
        {
          path: 'login',
          element: (
            <AuthProvider>
              <GuestGuard>
                <Login />
              </GuestGuard>
            </AuthProvider>
          ),
        },
        {
          path: 'register',
          element: (
            <AuthProvider>
              <GuestGuard>
                <RegisterForm />
              </GuestGuard>
            </AuthProvider>
          ),
        },
        {
            path: 'reset-password',
            element: (
              <AuthProvider>
                <ResetPassword />
              </AuthProvider>
            ),
        },
        {
            path: 'forget-password',
            element: (
              <AuthProvider>
                <ForgetPassword />
              </AuthProvider>
            ),
        },
        {
            path: 'verify',
            element: (
              <AuthProvider>
                <VerifyCode />
              </AuthProvider>
            ),
        },
        // { path: 'login-unprotected', element: <Login /> },
        // { path: 'register-unprotected', element: <Register /> },
        // { path: 'reset-password', element: <ResetPassword /> },
        // { path: 'forget-password', element: <ForgetPassword /> },
        // { path: 'verify', element: <VerifyCode /> },
      ],
    },
    // {
    //   path: '/',
    //   element: <Navigate to="/dashboard/one" replace />,
    // },
    {
      path: '/',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        { element: <Navigate to="/dashboard" replace />, index: true },
        {
          path: 'dashboard',
          element: (
            <RoleBasedGuard accessibleRoles={['hospital-admin']}>
              <Dashboard />
            </RoleBasedGuard>
          ),
        },
        {
          path: '/detail/:id',
          element: (
            <RoleBasedGuard accessibleRoles={['hospital-admin']}>
              <DetailClaimReport />
            </RoleBasedGuard>
          ),
        },
      ],
    },
    {
      path: '/',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        { element: <Navigate to="/claim" replace />, index: true },
        {
          path: 'claim',
          element: (
            <RoleBasedGuard accessibleRoles={['hospital-admin']}>
              <Claim />
            </RoleBasedGuard>
          ),
        },
        {
          path: '/claim/detail/:id',
          element: (
            <RoleBasedGuard accessibleRoles={['hospital-admin']}>
              <DetailClaim />
            </RoleBasedGuard>
          ),
        },
      ],
    },

    {
        path: '/',
        element: (
          <AuthProvider>
            <AuthGuard>
              <DashboardLayout />
            </AuthGuard>
          </AuthProvider>
        ),
        children: [
          { element: <Navigate to="/prescription-orders" replace />, index: true },
          {
            path: 'prescription-orders',
            element: (
                <RoleBasedGuard accessibleRoles={['admin-apotek', 'cs-lms']}>
                  <DashboardApotek />
                </RoleBasedGuard>
              ),
          },
        ],
      },

    {
      path: '*',
      element: (
        <AuthProvider>
          <AuthGuard>
          <LogoOnlyLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      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')));
const ResetPassword = Loadable(lazy(() => import('@/pages/auth/ResetPassword')));
const ForgetPassword = Loadable(lazy(() => import('@/pages/auth/ForgetPassword')));

// Dashboard
const Dashboard = Loadable(lazy(() => import('@/pages/Dashboard')));
const Claim = Loadable(lazy(() => import('@/pages/Claim')));
const DashboardApotek = Loadable(lazy(() => import('@/pages/DashboardApotek')));
const NotFound = Loadable(lazy(() => import('@/pages/Page404')));

const DetailClaimReport = Loadable(lazy(()=> import('@/sections/dashboard/Detail')));
const DetailClaim = Loadable(lazy(()=> import('@/sections/claim/Detail')));