asb_cloud_front/src/pages/Well.jsx

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

import { PrivateRoute, PrivateDefaultRoute, PrivateMenuItem } from '@components/Private'

import Report from './Report'
import Measure from './Measure'
import Analytics from './Analytics'
import Documents from './Documents'
import Telemetry from './Telemetry'
import WellOperations from './WellOperations'
import DrillingProgram from './DrillingProgram'
import TelemetryAnalysis from './TelemetryAnalysis'

import '@styles/index.css'

const { Content } = Layout

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

  return (
    <Layout>
      <Menu mode={'horizontal'} selectable={true} selectedKeys={[tab]} className={'well_menu'}>
        <PrivateMenuItem.Link root={rootPath} key={'telemetry'} path={'telemetry'} icon={<FundViewOutlined />} title={'Телеметрия'}/>
        <PrivateMenuItem.Link root={rootPath} key={'report'} path={'report'} icon={<FilePdfOutlined />} title={'Рапорт'} />
        <PrivateMenuItem.Link root={rootPath} key={'analytics'} path={'analytics'} icon={<DeploymentUnitOutlined />} title={'Аналитика'} />
        <PrivateMenuItem.Link root={rootPath} key={'operations'} path={'operations'} icon={<FolderOutlined />} title={'Операции по скважине'} />
        {/* <PrivateMenuItem.Link root={rootPath} key={'telemetryAnalysis'} path={'telemetryAnalysis'} icon={<FundProjectionScreenOutlined />} title={'Операции по телеметрии'} /> */}
        <PrivateMenuItem.Link root={rootPath} key={'document'} path={'document'} icon={<FolderOutlined />} title={'Документы'} />
        <PrivateMenuItem.Link root={rootPath} key={'measure'} path={'measure'} icon={<ExperimentOutlined />} title={'Измерения'} />
        <PrivateMenuItem.Link root={rootPath} key={'drillingProgram'} path={'drillingProgram'} icon={<FolderOutlined />} title={'Программа бурения'} />
      </Menu>

      <Layout>
        <Content className={'site-layout-background'}>
          <Switch>
            <PrivateRoute path={`${rootPath}/telemetry/:tab?`}>
              <Telemetry idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/report`}>
              <Report idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/analytics/:tab?`}>
              <Analytics idWell={idWell} rootPath={`${rootPath}/analytics`}/>
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/operations/:tab?`}>
              <WellOperations idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/telemetryAnalysis/:tab?`}>
              <TelemetryAnalysis idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/document/:category?`}>
              <Documents idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/measure`}>
              <Measure idWell={idWell}/>
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/drillingProgram`}>
              <DrillingProgram idWell={idWell}/>
            </PrivateRoute>
            <PrivateDefaultRoute urls={[
              `${rootPath}/telemetry`,
              `${rootPath}/report`,
              `${rootPath}/analytics`,
              `${rootPath}/operations`,
              `${rootPath}/telemetryAnalysis`,
              `${rootPath}/document`,
              `${rootPath}/measure`,
              `${rootPath}/drillingProgram`,
            ]}/>
          </Switch>
        </Content>
      </Layout>
    </Layout>
  )
})

export default Well