aso/frontend/client-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 { AuthProvider } from '../contexts/LaravelAuthContext';
import AuthGuard from '../guards/AuthGuard';
// import DialogDetailClaim from '../sections/dashboard/DialogDetailClaim';

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

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>
              <GuestGuard>
                <Login />
              </GuestGuard>
            </AuthProvider>
          ),
        },
      ],
    },
    {
      path: '/',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        { element: <Navigate to="/dashboard" replace />, index: true },
        {
          path: 'dashboard',
          element: <Dashboard />,
        },
      ],
    },
    {
      path: 'user-profile/:id',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        {
          element: <AlarmCenterUserProfile />,
          index: true,
        },
      ],
    },
    {
      path: '/employee-data',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        {
          element: <EmployeeData />,
          index: true,
        },
        {
          path: '/employee-data/user-profile/:id',
          element: <EmployeeDataUserProfile />,
        },
      ],
    },
    {
      path: '/alarm-center',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        {
          element: <AlarmCenter />,
          index: true,
        },
        {
          path: 'member/:id',
          element: <AlarmCenterMemberPerList />,
        },
        {
          path: 'member/:memberId/service-monitoring/:requestLogId',
          element: <AlarmCenterServiceMonitoring />,
        },
      ],
    },
    {
      path: '/daily-monitoring',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        {
            element: <DailyMonitoring />,
            index: true,
        },
        {
            path: ':member_id/claims/:claim_code/list_monitoring',
            element: <DetailMonitoringList />
        },
      ],
    },
    {
      path: '/claim-submit',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        {
          element: <ClaimSubmit />,
          index: true,
        },
        {
          path: 'dialog-detail',
          element: <DialogDetailClaim />,
        },
      ],
    },
    {
      path: '/claim-request/:id',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        {
          element: <ClaimRequest />,
          index: true,
        },
        {
          path: 'dialog-detail',
          element: <DialogDetailClaim />,
        },
      ],
    },
    {
      path: '/claim-report',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        {
          element: <ClaimReport />,
          index: true,
        },
        {
          path: '/claim-report/detail/:id',
          element: <DetailClaimReport />,
        },
        {
          path: '/claim-report/detail-history/:id',
          element: <DetailHitoryClaimReport />,
        },
      ],
    },
    {
      path: '/claims',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        {
          element: <Claims />,
          index: true,
        },
        {
          path: ':id',
          element: <ClaimShow />,
        },
      ],
    },
    {
      path: '/corporate',
      element: (
        <AuthProvider>
          <AuthGuard>
            <DashboardLayout />
          </AuthGuard>
        </AuthProvider>
      ),
      children: [
        {
          element: <Corporate />,
          index: true,
        },
        {
          path: 'edit',
          element: <CorporateEdit />,
        },
        {
          path: 'view',
          element: <CorporateShow />,
        },
      ],
    },
    {
      path: '*',
      element: <LogoOnlyLayout />,
      children: [
        { path: '404', element: <NotFound /> },
        { path: '*', element: <Navigate to="/404" replace /> },
      ],
    },
    {
        path: 'master/formularium-template-v2',
        element: (
          <AuthProvider>
            <AuthGuard>
              <DashboardLayout />
            </AuthGuard>
          </AuthProvider>
        ),
        children: [
          {
            element: <MasterFormulariumTemplateV2 />,
            index: true,
          },
        ],
      },
      {
        path: 'master/formularium-template-v2/:id/detail',
        element: (
          <AuthProvider>
            <AuthGuard>
              <DashboardLayout />
            </AuthGuard>
          </AuthProvider>
        ),
        children: [
          {
            element: <MasterFormulariumTemplateDetailV2 />,
            index: true,
          },
        ],
      },
      {
        path: 'master/formularium-template-v2/create',
        element: (
          <AuthProvider>
            <AuthGuard>
              <DashboardLayout />
            </AuthGuard>
          </AuthProvider>
        ),
        children: [
          {
            element: <MasterFormulariumTemplateCreateV2 />,
            index: true,
          },
        ],
      },
      {
        path: 'master/formularium-template-v2/:id/edit',
        element: (
          <AuthProvider>
            <AuthGuard>
              <DashboardLayout />
            </AuthGuard>
          </AuthProvider>
        ),
        children: [
          {
            element: <MasterFormulariumTemplateCreateV2 />,
            index: true,
          },
        ],
      },
      {
        path: 'master/formularium-template-v2/:id/history',
        element: (
          <AuthProvider>
            <AuthGuard>
              <DashboardLayout />
            </AuthGuard>
          </AuthProvider>
        ),
        children: [
          {
            element: <MasterFormulariumTemplateHistoriesV2 />,
            index: true,
          },
        ],
      },
      {
        path: 'user-role',
        element: (
            <AuthProvider>
              <AuthGuard>
                <DashboardLayout />
              </AuthGuard>
            </AuthProvider>
          ),
          children: [
            {
              element: <UserRole />,
              index: true,
            },
          ],
      },
      {
        path: 'user-role/create',
        element: (
            <AuthProvider>
              <AuthGuard>
                <DashboardLayout />
              </AuthGuard>
            </AuthProvider>
          ),
          children: [
            {
              element: <UserRoleCreate />,
              index: true,
            },
          ],
      },
      {
        path: 'user/role/:id/edit',
        element: (
            <AuthProvider>
              <AuthGuard>
                <DashboardLayout />
              </AuthGuard>
            </AuthProvider>
          ),
          children: [
            {
              element: <UserRoleCreate />,
              index: true,
            },
          ],
      },
      {
        path: 'user-access',
        element: (
            <AuthProvider>
              <AuthGuard>
                <DashboardLayout />
              </AuthGuard>
            </AuthProvider>
          ),
          children: [
            {
              element: <UserAccess />,
              index: true,
            },
          ],
      },
      {
        path: 'user-access/create',
        element: (
            <AuthProvider>
              <AuthGuard>
                <DashboardLayout />
              </AuthGuard>
            </AuthProvider>
          ),
          children: [
            {
              element: <UserAccessCreate />,
              index: true,
            },
          ],
      },
      {
        path: 'user/access/:id/edit',
        element: (
            <AuthProvider>
              <AuthGuard>
                <DashboardLayout />
              </AuthGuard>
            </AuthProvider>
          ),
          children: [
            {
              element: <UserAccessCreate />,
              index: true,
            },
          ],
      },
    { path: '*', element: <Navigate to="/404" replace /> },
  ]);
}

// Auth
const Login = Loadable(lazy(() => import('../pages/auth/Login')));

// Dashboard
const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard')));
const NotFound = Loadable(lazy(() => import('../pages/Page404')));

// Employee Data
const EmployeeData = Loadable(lazy(() => import('../pages/EmployeeData/Index')));
const EmployeeDataUserProfile = Loadable(lazy(() => import('../pages/EmployeeData/UserProfile')));

// Alarm Center
const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
const AlarmCenterMemberPerList = Loadable(lazy(() => import('../pages/AlarmCenter/ListMember')));
const AlarmCenterServiceMonitoring = Loadable(
  lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
);
const AlarmCenterUserProfile = Loadable(lazy(() => import('../pages/AlarmCenter/UserProfile')));

// Claim Report
const ClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Index')));
const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
const ClaimShow = Loadable(lazy(() => import('../pages/Claims/Show')));
const DialogDetailClaim = Loadable(lazy(() => import('../pages/ClaimReport/DialogDetailClaim')));
const DetailClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Detail')));
const DetailHitoryClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/DetailHistory')));

// Claim submit
const ClaimSubmit = Loadable(lazy(() => import('../pages/ClaimSubmit/Index')));

// Claim Request
const ClaimRequest = Loadable(lazy(() => import('../pages/ClaimSubmit/DialogDetailClaim')));

// Corporate
const Corporate = Loadable(lazy(() => import('../pages/Corporate/Index')));
const CorporateEdit = Loadable(lazy(() => import('../pages/Corporate/Form')));
const CorporateShow = Loadable(lazy(() => import('../pages/Corporate/Show')));

// Formularium
const MasterFormulariumTemplateV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/Index')));
const MasterFormulariumTemplateCreateV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/CreateUpdate')));
const MasterFormulariumTemplateHistoriesV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/History')));
const MasterFormulariumTemplateDetailV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/Detail/Index')));

// User Management
const UserRole = Loadable(lazy(() => import('../pages/UserManagement/UserRole/Index')));
const UserRoleCreate = Loadable(lazy(() => import('../pages/UserManagement/UserRole/CreateUpdate')));
const UserAccess = Loadable(lazy(() => import('../pages/UserManagement/UserAccess/Index')));
const UserAccessCreate = Loadable(lazy(() => import('../pages/UserManagement/UserAccess/CreateUpdate')));

// Daily Monitoring
const DailyMonitoring       = Loadable(lazy(() => import('../pages/DailyMonitoring/index')))
const DetailMonitoringList  = Loadable(lazy(() => import('../pages/DailyMonitoring/Components/DetailMonitoringList')))