Grouping well operations into folder

src/pages/WellOperations/WellOperationsEditor.jsx

@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react'
 import { Input, DatePicker, Select } from 'antd'
-import { EditableTable } from "../components/EditableTable"
-import LoaderPortal from '../components/LoaderPortal'
-import { makeColumn, RegExpIsFloat, invokeWebApiWrapperAsync } from '../components/factory'
-import { WellOperationService} from '../services/api'
 import moment from 'moment'
+import { EditableTable } from "../../components/EditableTable"
+import LoaderPortal from '../../components/LoaderPortal'
+import { makeColumn, RegExpIsFloat, invokeWebApiWrapperAsync } from '../../components/factory'
+import { WellOperationService} from '../../services/api'
+import { dictionarySectionType, getNameById } from './dictionary'
 
 const { Option } = Select
 const { TextArea } = Input;
@@ -25,22 +26,6 @@ const numericColumnOptions = {
   ],
 };
 
-const dictionarySectionType = [
-  {id:1, name:'Пилотный ствол'},
-  {id:2, name:'Направление'},
-  {id:3, name:'Кондуктор'},
-  {id:4, name:'Эксплуатационная колонна'},
-  {id:5, name:'Транспортный ствол'},
-  {id:6, name:'Хвостовик'},
-]
-
-const getNameById = (dictionary, id) => {
-  if(!dictionary?.length)
-    return id
-  const item = dictionary.find(i => i?.id === id)  
-  return item?.name ?? id
-}
-
 const DatePickerWrapper = ({value, onChange, ...other}) => {
   return <DatePicker
     allowClear={false}
@@ -53,7 +38,7 @@ const DatePickerWrapper = ({value, onChange, ...other}) => {
   />
 }
 
-export default function WellOperationsEditor({idWell, idType}){
+export const WellOperationsEditor = ({idWell, idType}) => {
   const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize})
   const [paginationTotal, setPaginationTotal] = useState(0)
   const [dictionaryOperationCategory, setDictionaryOperationCategory] = useState([])

src/pages/WellOperations/dictionary.js

@@ -0,0 +1,15 @@
+export const getNameById = (dictionary, id) => {
+  if(!dictionary?.length)
+    return id
+  const item = dictionary.find(i => i?.id === id)  
+  return item?.name ?? id
+}
+
+export const dictionarySectionType = [
+  {id:1, name:'Пилотный ствол'},
+  {id:2, name:'Направление'},
+  {id:3, name:'Кондуктор'},
+  {id:4, name:'Эксплуатационная колонна'},
+  {id:5, name:'Транспортный ствол'},
+  {id:6, name:'Хвостовик'},
+]

src/pages/WellOperations/index.jsx

@@ -1,7 +1,9 @@
 import {Layout, Menu} from "antd";
 import {Switch, Link, Route, Redirect, useParams} from "react-router-dom";
 import { FolderOutlined } from "@ant-design/icons";
-import WellOperationsEditor from './WellOperationsEditor'
+import { WellOperationsEditor } from './WellOperationsEditor'
+import { WellSectionsStat } from './WellSectionsStat'
+import { Tvd } from './Tvd'
 
 const { Content } = Layout
 
@@ -32,10 +34,10 @@ export default function WellOperations({idWell}) {
         <Content className="site-layout-background">
           <Switch>            
             <Route path={`${rootPath}/tvd`}>
-              <div>sss</div>
+              <Tvd idWell={idWell}/>
             </Route>
             <Route path={`${rootPath}/sections`}>
-              <div>sss</div>
+              <WellSectionsStat idWell={idWell}/>
             </Route>
             <Route path={`${rootPath}/plan`}>
               <WellOperationsEditor idWell={idWell} idType={0}/>