asb_cloud_front/src/pages/Reports/index.jsx

import { Navigate, Route, Routes } from 'react-router-dom'
import { memo, useMemo } from 'react'
import { FilePdfOutlined } from '@ant-design/icons'
import { Layout } from 'antd'

import { RootPathContext, useRootPath } from '@asb/context'
import { PrivateMenu } from '@components/Private'
import { NoAccessComponent, wrapPrivateComponent } from '@utils'

import DailyReport from './DailyReport'
import DiagramReport from './DiagramReport'

const { Content } = Layout

const Reports = memo(() => {
    const root = useRootPath()
    const rootPath = useMemo(() => `${root}/reports`, [root])

    return (
        <RootPathContext.Provider value={rootPath}>
            <Layout>
                <PrivateMenu className={'well_menu'}>
                    <PrivateMenu.Link content={DiagramReport} icon={<FilePdfOutlined />} />
                    <PrivateMenu.Link content={DailyReport} />
                </PrivateMenu>

                <Layout>
                    <Content className={'site-layout-background'}>
                        <Routes>
                            <Route index element={<Navigate to={'diagram_report'} replace />} />
                            <Route path={'*'} element={<NoAccessComponent />} />

                            <Route path={DiagramReport.route} element={<DiagramReport />} />
                            <Route path={DailyReport.route} element={<DailyReport />} />
                        </Routes>
                    </Content>
                </Layout>
            </Layout>
        </RootPathContext.Provider>
    )
})

export default wrapPrivateComponent(Reports, {
    requirements: [],
    title: 'Рапорта',
    route: 'reports/*',
    key: 'reports',
})