asb_cloud_front/src/pages/Well.jsx

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

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

import Measure from './Measure'
import Reports from './Reports'
import Analytics from './Analytics'
import Documents from './Documents'
import Telemetry from './Telemetry'
import WellOperations from './WellOperations'
import DrillingProgram from './DrillingProgram'

import '@styles/index.css'

const { Content } = Layout

const Well = memo(() => {
  const { idWell } = useParams()
  const root = useRootPath()
  const rootPath = useMemo(() => `${root}/well/${idWell}`, [root, idWell])

  return (
    <LayoutPortal>
      <RootPathContext.Provider value={rootPath}>
        <PrivateMenu className={'well_menu'}>
          <PrivateMenu.Link content={Telemetry} />
          <PrivateMenu.Link content={Reports} icon={<FilePdfOutlined />} />
          <PrivateMenu.Link content={Analytics} icon={<DeploymentUnitOutlined />} />
          <PrivateMenu.Link content={WellOperations} icon={<FolderOutlined />} />
          <PrivateMenu.Link content={Documents} icon={<FolderOutlined />} />
          <PrivateMenu.Link content={Measure} icon={<ExperimentOutlined />} />
          <PrivateMenu.Link content={DrillingProgram} icon={<FolderOutlined />} />
        </PrivateMenu>

        <IdWellContext.Provider value={idWell}>
          <Layout>
            <Content className={'site-layout-background'}>
              <Routes>
                <Route index element={<Navigate to={Telemetry.getKey()} replace />} />
                <Route path={'*'} element={<NoAccessComponent />} />

                <Route path={Telemetry.route} element={<Telemetry />} />
                <Route path={Reports.route} element={<Reports />} />
                <Route path={Analytics.route} element={<Analytics />} />
                <Route path={WellOperations.route} element={<WellOperations />} />
                <Route path={Documents.route} element={<Documents />} />
                <Route path={Measure.route} element={<Measure />} />
                <Route path={DrillingProgram.route} element={<DrillingProgram />} />
              </Routes>
            </Content>
          </Layout>
        </IdWellContext.Provider>
      </RootPathContext.Provider>
    </LayoutPortal>
  )
})

export default wrapPrivateComponent(Well, {
  requirements: [],
  title: 'Скважина',
  route: 'well/:idWell/*',
  key: 'well',
})