LIONER-frontend/src/routes/ClientRoutes.js

import {lazy, useContext} from 'react';

// project import
import Loadable from 'components/Loadable';
import MainLayout from "../layout/MainLayout";
import {handleRouteAbility} from "../utils/CommonFunction";
import {Navigate} from "react-router";
import AbilityContext from "../components/AbilityProvider";

// render - login
const ClientSearchPage = Loadable(lazy( () => import('pages/client/ClientSearchPage')));
const ClientMaintainPage = Loadable(lazy( () => import('pages/client/ClientMaintainPage')));

// ==============================|| AUTH ROUTING ||============================== //

const ClientRoutes =() => {
    const ability = useContext(AbilityContext);

    return {
        path: '/',
        element: <MainLayout />,
        children: [
            {
                path: 'client',
                element:  (
                    handleRouteAbility(
                        ability.can('VIEW', 'DASHBOARD'),
                        <ClientSearchPage />,
                        <Navigate to="/" />
                    )
                ),
            },
            {
                path: 'client/maintain/:id',
                element:  (
                    handleRouteAbility(
                        ability.can('VIEW', 'DASHBOARD'),
                        <ClientMaintainPage />,
                        <Navigate to="/" />
                    )
                ),
            },
        ]
    };
};

export default ClientRoutes;