Merge branch 'dev' into feature/merging-telemetry-view-and-archive

package-lock.json

@@ -17,8 +17,7 @@
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
         "rxjs": "^7.5.5",
-        "usehooks-ts": "^2.6.0",
+        "usehooks-ts": "^2.6.0"
-        "web-vitals": "^2.1.4"
       },
       "devDependencies": {
         "@babel/core": "^7.18.2",
@@ -14786,11 +14785,6 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
-    "node_modules/web-vitals": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
-      "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
-    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -26492,11 +26486,6 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
-    "web-vitals": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
-      "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
-    },
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

src/App.tsx

@@ -42,7 +42,7 @@ export const App = memo(() => (
 
                         {/* User pages */}
                         <Route element={<UserOutlet />}>
-                            <Route path={'/file_download/:idWell/:idFile/*'} element={<FileDownload />} />
+                            <Route path={'/file_download/:idFile/*'} element={<FileDownload />} />
 
                             <Route element={<LayoutPortal />}>
                                 {/* Admin pages */}

src/components/LayoutPortal.tsx

@@ -114,7 +114,7 @@ const _LayoutPortal = memo(() => {
                                             <a style={{ userSelect: 'none' }} onClick={() => setWellsTreeOpen((prev) => !prev)}>{currentWell}</a>
                                         </Breadcrumb.Item>
                                     )}
-                                    {breadcrumb}
+                                    {breadcrumb !== true && breadcrumb}
                                 </Breadcrumb>
                             )}
                             {topRightBlock}

src/components/MenuBreadcrumb.tsx

@@ -1,10 +1,9 @@
 import { Breadcrumb, BreadcrumbItemProps } from 'antd'
-import { Link, useLocation } from 'react-router-dom'
+import { Link } from 'react-router-dom'
-import { memo, useMemo } from 'react'
 import { join } from 'path'
 
 import { PrivateWellMenuItem } from '@components/PrivateWellMenu'
-import { FunctionalValue, useFunctionalValue } from '@utils'
+import { FunctionalValue, getFunctionalValue, } from '@utils'
 
 export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: string[], root: string = '/') => {
     const out = []
@@ -22,35 +21,26 @@ export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: str
     return out
 }
 
-export type MenuBreadcrumbItemsProps = {
+export const makeMenuBreadcrumbItems = (
-    menuItems: PrivateWellMenuItem[]
+    menuItems: PrivateWellMenuItem[],
-    pathRoot?: RegExp
+    path: string,
-    itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>
+    pathRoot: RegExp = /^\//,
-    itemRender?: (item: PrivateWellMenuItem) => JSX.Element
+    itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>,
+    itemRender?: (item: PrivateWellMenuItem) => JSX.Element,
+) => {
+    const getItemProps = getFunctionalValue(itemsProps)
+
+    const rootPart = pathRoot.exec(path)
+    if (!rootPart || rootPart.length <= 0) return []
+    const root = rootPart[0]
+    const parts = path.trim().slice(root.length).split('/')
+    const items = makeBreadcrumbItems(menuItems, parts, root)
+
+    return items.map((item) => (
+        <Breadcrumb.Item key={item.route} {...getItemProps(item)}>
+            {itemRender ? itemRender(item) : (
+                <Link to={item.route}>{item.title}</Link>
+            )}
+        </Breadcrumb.Item>
+    ))
 }
-
-export const MenuBreadcrumbItems = memo<MenuBreadcrumbItemsProps>(({ menuItems, pathRoot = /^\//, itemsProps, itemRender }) => {
-    const location = useLocation()
-    const getItemProps = useFunctionalValue(itemsProps)
-
-    const items = useMemo(() => {
-        const path = location.pathname
-        const rootPart = pathRoot.exec(path)
-        if (!rootPart || rootPart.length <= 0) return []
-        const root = rootPart[0]
-        const parts = path.trim().slice(root.length).split('/')
-        return makeBreadcrumbItems(menuItems, parts, root)
-    }, [location, menuItems, pathRoot])
-
-    return (
-        <>
-            {items.map((item) => (
-                <Breadcrumb.Item key={item.route} {...getItemProps(item)}>
-                    {itemRender ? itemRender(item) : (
-                        <Link to={item.route}>{item.title}</Link>
-                    )}
-                </Breadcrumb.Item>
-            ))}
-        </>
-    )
-})

src/components/Table/Columns/date.tsx

@@ -1,26 +1,36 @@
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 
-import { formatDate } from '@utils'
+import { makeColumn, ColumnProps, SorterMethod } from '.'
-
+import { DatePickerWrapper, getObjectByDeepKey } from '..'
-import makeColumn, { columnPropsOther } from '.'
-import { DatePickerWrapper, makeDateSorter } from '..'
 import { DatePickerWrapperProps } from '../DatePickerWrapper'
+import { formatDate, isRawDate } from '@utils'
 
-export const makeDateColumn = (
+export const makeDateSorter = <T extends unknown>(key: Key): SorterMethod<T> => (a, b) => {
+    const vA = a ? getObjectByDeepKey(key, a) : null
+    const vB = b ? getObjectByDeepKey(key, b) : null
+
+    if (!isRawDate(vA) || !isRawDate(vB)) return 0
+    if (!isRawDate(vA)) return 1
+    if (!isRawDate(vB)) return -1
+
+    return (new Date(vA)).getTime() - (new Date(vB)).getTime()
+}
+
+export const makeDateColumn = <T extends unknown>(
     title: ReactNode,
     key: string,
     utc?: boolean,
     format?: string,
-    other?: columnPropsOther,
+    other?: ColumnProps<T>,
     pickerOther?: DatePickerWrapperProps,
-) => makeColumn(title, key, {
+) => makeColumn<T>(title, key, {
     ...other,
     render: (date) => (
         <div className={'text-align-r-container'}>
             <span>{formatDate(date, utc, format) ?? '-'}</span>
         </div>
     ),
-    sorter: makeDateSorter(key),
+    sorter: makeDateSorter<T>(key),
     input: <DatePickerWrapper {...pickerOther} />,
 })
 

src/components/Table/Columns/index.ts

@@ -1,6 +1,10 @@
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 import { Rule } from 'antd/lib/form'
-import { ColumnProps } from 'antd/lib/table'
+import { ColumnType } from 'antd/lib/table'
+import { RenderedCell } from 'rc-table/lib/interface'
+
+import { DataSet } from '../Table'
+import { OmitExtends } from '@utils/types'
 
 export * from './date'
 export * from './time'
@@ -12,10 +16,13 @@ export * from './text'
 export * from './timezone'
 
 export type DataType<T = any> = Record<string, T>
-export type RenderMethod<T = any> = (value: T, dataset?: DataType<T>, index?: number) => ReactNode
+export type RenderMethod<T = any, DT = DataSet<T>> = (value: T | undefined, dataset: DT, index: number) => ReactNode | RenderedCell<T> | undefined
-export type SorterMethod<T = any> = (a?: DataType<T> | null, b?: DataType<T> | null) => number
+export type SorterMethod<T = any, DT = DataSet<T> | null | undefined> = (a: DT, b: DT) => number
+export type FilterMethod<T = any, DT = DataSet<T>> = (value: string | number | T | undefined, record: DT) => boolean
 
-export type columnPropsOther<T = any> = ColumnProps<DataType<T>> & {
+export type FilterGenerator<T, DT = DataSet<T>> = (key: Key) => FilterMethod<T, DT>
+
+export type ColumnProps<T = any> = OmitExtends<{
     // редактируемая колонка
     editable?: boolean
     // react компонента редактора
@@ -29,10 +36,12 @@ export type columnPropsOther<T = any> = ColumnProps<DataType<T>> & {
     // дефолтное значение при добавлении новой строки
     initialValue?: string | number
 
+    onFilter?: FilterMethod<T>
+    sorter?: SorterMethod<T>
     render?: RenderMethod<T>
-}
+}, ColumnType<DataSet<T>>>
 
-export const makeColumn = (title: ReactNode, key: string, other?: columnPropsOther) => ({
+export const makeColumn = <T = any>(title: ReactNode, key: Key, other?: ColumnProps<T>) => ({
     title: title,
     key: key,
     dataIndex: key,

src/components/Table/Columns/numeric.tsx

@@ -1,20 +1,26 @@
+import { ColumnFilterItem } from 'antd/lib/table/interface'
 import { InputNumber } from 'antd'
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 
-import { makeNumericSorter } from '../sorters'
+import makeColumn, { ColumnProps, FilterGenerator, makeGroupColumn, RenderMethod, SorterMethod } from '.'
-import makeColumn, { columnPropsOther, DataType, makeGroupColumn, RenderMethod } from '.'
+import { getObjectByDeepKey } from '../Table'
-import { ColumnFilterItem, CompareFn } from 'antd/lib/table/interface'
 
 export const RegExpIsFloat = /^[-+]?\d+\.?\d*$/
 
-type FilterMethod<T> = (value: string | number | boolean, record: DataType<T>) => boolean
+export const makeNumericSorter = <T extends number = number>(key: Key): SorterMethod<T> => (a, b) => {
+    if (!a && !b) return 0
+    if (!a) return 1
+    if (!b) return -1
 
-export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMethod<T> => (value: T) => {
+    return Number(getObjectByDeepKey(key, a)) - Number(getObjectByDeepKey(key, b))
-    let val = '-'
+}
-    if ((value ?? null) !== null && Number.isFinite(+value)) {
+
+export const makeNumericRender = <T extends unknown>(fixed?: number, defaultValue: string = '-', precision: number = 5): RenderMethod<T> => (value) => {
+    let val = defaultValue
+    if (value !== undefined && value !== null && Number.isFinite(+value)) {
         val = (fixed ?? null) !== null
             ? (+value).toFixed(fixed)
-            : (+value).toPrecision(5)
+            : (+value).toPrecision(precision)
     }
 
     return (
@@ -24,7 +30,7 @@ export const makeNumericRender = <T extends unknown>(fixed?: number): RenderMeth
     )
 }
 
-export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number, sorterKey?: string): columnPropsOther<T> => ({
+export const makeNumericColumnOptions = <T extends number>(fixed?: number, sorterKey?: string): ColumnProps<T> => ({
     editable: true,
     initialValue: 0,
     width: 100,
@@ -37,14 +43,14 @@ export const makeNumericColumnOptions = <T extends unknown = any>(fixed?: number
     render: makeNumericRender<T>(fixed),
 })
 
-export const makeNumericColumn = <T extends unknown = any>(
+export const makeNumericColumn = <T extends number>(
     title: ReactNode,
-    key: string,
+    key: Key,
     filters?: ColumnFilterItem[],
-    filterDelegate?: (key: string | number) => FilterMethod<T>,
+    filterDelegate?: FilterGenerator<T>,
     renderDelegate?: RenderMethod<T>,
     width?: string | number,
-    other?: columnPropsOther,
+    other?: ColumnProps<T>,
 ) => makeColumn(title, key, {
     filters,
     onFilter: filterDelegate ? filterDelegate(key) : undefined,
@@ -56,24 +62,25 @@ export const makeNumericColumn = <T extends unknown = any>(
     ...other
 })
 
-export const makeNumericColumnPlanFact = <T extends unknown = any>(
+export const makeNumericColumnPlanFact = <T extends number>(
     title: ReactNode,
-    key: string,
+    key: Key,
     filters?: ColumnFilterItem[],
-    filterDelegate?: (key: string | number) => FilterMethod<T>,
+    filterDelegate?: FilterGenerator<T>,
     renderDelegate?: RenderMethod<T>,
-    width?: string | number
+    width?: string | number,
+    other?: ColumnProps<T>,
 ) => makeGroupColumn(title, [
-    makeNumericColumn<T>('п', key + 'Plan', filters, filterDelegate, renderDelegate, width),
+    makeNumericColumn<T>('п', key + 'Plan', filters, filterDelegate, renderDelegate, width, other),
-    makeNumericColumn<T>('ф', key + 'Fact', filters, filterDelegate, renderDelegate, width),
+    makeNumericColumn<T>('ф', key + 'Fact', filters, filterDelegate, renderDelegate, width, other),
 ])
 
-export const makeNumericStartEnd = <T extends unknown = any>(
+export const makeNumericStartEnd = <T extends number>(
     title: ReactNode,
-    key: string,
+    key: Key,
     fixed: number,
     filters?: ColumnFilterItem[],
-    filterDelegate?: (key: string | number) => FilterMethod<T>,
+    filterDelegate?: FilterGenerator<T>,
     renderDelegate?: RenderMethod<T>,
     width?: string | number,
 ) => makeGroupColumn(title, [
@@ -81,12 +88,12 @@ export const makeNumericStartEnd = <T extends unknown = any>(
     makeNumericColumn<T>('конец', key + 'End', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'End'))
 ])
 
-export const makeNumericMinMax = <T extends unknown = any>(
+export const makeNumericMinMax = <T extends number>(
     title: ReactNode,
-    key: string,
+    key: Key,
     fixed: number,
     filters?: ColumnFilterItem[],
-    filterDelegate?: (key: string | number) => FilterMethod<T>,
+    filterDelegate?: FilterGenerator<T>,
     renderDelegate?: RenderMethod<T>,
     width?: string | number,
 ) => makeGroupColumn(title, [
@@ -94,4 +101,18 @@ export const makeNumericMinMax = <T extends unknown = any>(
     makeNumericColumn<T>('макс', key + 'Max', filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, key + 'Max')),
 ])
 
+export const makeNumericAvgRange = <T extends number>(
+    title: ReactNode,
+    key: Key,
+    fixed: number,
+    filters?: ColumnFilterItem[],
+    filterDelegate?: FilterGenerator<T>,
+    renderDelegate?: RenderMethod<T>,
+    width?: string | number,
+) => makeGroupColumn(title, [
+    makeNumericColumn<T>('мин', `${key}.min`, filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, `${key}.min`)),
+    makeNumericColumn<T>('сред', `${key}.avg`, filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, `${key}.avg`)),
+    makeNumericColumn<T>('макс', `${key}.max`, filters, filterDelegate, renderDelegate, width, makeNumericColumnOptions(fixed, `${key}.max`)),
+])
+
 export default makeNumericColumn

src/components/Table/Columns/plan_fact.tsx

@@ -1,36 +1,20 @@
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 
-import { columnPropsOther, makeColumn } from '.'
+import { ColumnProps, makeColumn } from '.'
 
-export const makeColumnsPlanFact = (
+export const makeColumnsPlanFact = <T,>(
     title: string | ReactNode,
-    key: string | string[],
+    key: Key | [Key, Key],
-    columsOther?: columnPropsOther | [columnPropsOther, columnPropsOther],
+    columsOther?: ColumnProps<T> | [ColumnProps<T>, ColumnProps<T>],
-    gruopOther?: any
 ) => {
-    let keyPlanLocal: string
+    const keys = Array.isArray(key) ? key : [`${key}Plan`, `${key}Fact`]
-    let keyFactLocal: string
+    const others = Array.isArray(columsOther) ? columsOther : [columsOther, columsOther]
-
-    if (key instanceof Array) {
-      keyPlanLocal = key[0]
-      keyFactLocal =  key[1]
-    } else {
-      keyPlanLocal = key + 'Plan'
-      keyFactLocal =  key + 'Fact'
-    }
-
-    let columsOtherLocal : any[2]
-    if (columsOther instanceof Array)
-      columsOtherLocal = [columsOther[0], columsOther[1]]
-    else
-      columsOtherLocal = [columsOther, columsOther]
 
     return {
-        title: title,
+        title,
-        ...gruopOther,
         children: [
-            makeColumn('план', keyPlanLocal, columsOtherLocal[0]),
+            makeColumn<T>('план', keys[0], others[0]),
-            makeColumn('факт', keyFactLocal, columsOtherLocal[1]),
+            makeColumn<T>('факт', keys[1], others[1]),
         ]
     }
 }

src/components/Table/Columns/select.tsx

@@ -1,21 +1,22 @@
 import { Select, SelectProps } from 'antd'
 import { DefaultOptionType, SelectValue } from 'antd/lib/select'
+import { Key, ReactNode } from 'react'
 
-import { columnPropsOther, makeColumn } from '.'
+import { ColumnProps, makeColumn } from '.'
 
-export const makeSelectColumn = <T extends unknown = string>(
+export const makeSelectColumn = <T extends DefaultOptionType>(
-    title: string,
+    title: ReactNode,
-    dataIndex: string,
+    key: Key,
-    options: DefaultOptionType[],
+    options: T[],
     defaultValue?: T,
-    other?: columnPropsOther,
+    other?: ColumnProps<T>,
     selectOther?: SelectProps<SelectValue>
-) => makeColumn(title, dataIndex, {
+) => makeColumn(title, key, {
     ...other,
     input: <Select options={options} {...selectOther}/>,
-    render: (value) => {
+    render: (value, dataset, index) => {
         const item = options?.find(option => String(option?.value) === String(value))
-        return other?.render?.(item?.value) ?? item?.label ?? defaultValue ?? value ?? '--'
+        return other?.render?.(item, dataset, index) ?? item?.label ?? defaultValue?.label ?? value?.label ?? '--'
     }
 })
 

src/components/Table/Columns/tag.tsx

@@ -4,7 +4,7 @@ import { Select, SelectProps, Tag } from 'antd'
 
 import type { OmitExtends } from '@utils/types'
 
-import { columnPropsOther, DataType, makeColumn } from '.'
+import { ColumnProps, DataType, makeColumn } from '.'
 
 export type TagInputProps<T extends DataType> = OmitExtends<{
     options: T[],
@@ -59,14 +59,14 @@ export const makeTagColumn = <T extends DataType>(
     options: T[],
     value_key: keyof DataType,
     label_key: keyof DataType,
-    other?: columnPropsOther,
+    other?: ColumnProps,
     tagOther?: TagInputProps<T>
 ) => {
     const InputComponent = makeTagInput<T>(value_key, label_key)
 
     return makeColumn(title, dataIndex, {
         ...other,
-        render: (item?: T[]) => item?.map((elm: T) => <Tag key={elm[label_key]} color={'blue'}>{other?.render?.(elm) ?? elm[label_key]}</Tag>) ?? '-',
+        render: (item: T[] | undefined, dataset, index) => item?.map((elm: T) => <Tag key={elm[label_key]} color={'blue'}>{other?.render?.(elm, dataset, index) ?? elm[label_key]}</Tag>) ?? '-',
         input: <InputComponent {...tagOther} options={options} />,
     })
 }

src/components/Table/Columns/text.tsx

@@ -1,8 +1,19 @@
 import { ColumnFilterItem } from 'antd/lib/table/interface'
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 
-import makeColumn, { columnPropsOther, DataType, RenderMethod, SorterMethod } from '.'
+import { ColumnProps, makeColumn, DataType, RenderMethod, SorterMethod } from '.'
-import { makeStringSorter } from '../sorters'
+import { getObjectByDeepKey } from '../Table'
+
+export const makeStringSorter = <T extends string>(key: Key): SorterMethod<T> => (a, b) => {
+    const vA = a ? getObjectByDeepKey(key, a) : null
+    const vB = b ? getObjectByDeepKey(key, b) : null
+
+    if (!vA && !vB) return 0
+    if (!vA) return 1
+    if (!vB) return -1
+
+    return String(vA).localeCompare(String(vB))
+}
 
 export const makeFilterTextMatch = <T extends unknown>(key: keyof DataType<T>) =>
     (filterValue: T, dataItem: DataType<T>) => dataItem[key] === filterValue
@@ -13,7 +24,7 @@ export const makeTextColumn = <T extends unknown = any>(
     filters?: ColumnFilterItem[],
     sorter?: SorterMethod<T>,
     render?: RenderMethod<T>,
-    other?: columnPropsOther
+    other?: ColumnProps
 ) => makeColumn(title, key, {
     filters,
     onFilter: filters ? makeFilterTextMatch(key) : undefined,

src/components/Table/Columns/time.tsx

@@ -1,25 +1,36 @@
-import { ReactNode } from 'react'
+import { Key, ReactNode } from 'react'
 
-import { formatTime } from '@utils'
+import { makeColumn, ColumnProps, SorterMethod } from '.'
+import { TimePickerWrapper, TimePickerWrapperProps, getObjectByDeepKey } from '..'
+import { formatTime, timeToMoment } from '@utils'
+import { TimeDto } from '@api'
 
-import { makeColumn, columnPropsOther } from '.'
+export const makeTimeSorter = <T extends TimeDto>(key: Key): SorterMethod<T> => (a, b) => {
-import { makeTimeSorter, TimePickerWrapper, TimePickerWrapperProps } from '..'
+    const vA = a ? getObjectByDeepKey(key, a) : null
+    const vB = b? getObjectByDeepKey(key, b) : null
 
-export const makeTimeColumn = (
+    if (!vA && !vB) return 0
+    if (!vA) return 1
+    if (!vB) return -1
+
+    return timeToMoment(vA).diff(timeToMoment(vB))
+}
+
+export const makeTimeColumn = <T extends TimeDto>(
     title: ReactNode,
     key: string,
     utc?: boolean,
     format?: string,
-    other?: columnPropsOther,
+    other?: ColumnProps,
     pickerOther?: TimePickerWrapperProps,
-) => makeColumn(title, key, {
+) => makeColumn<T>(title, key, {
     ...other,
     render: (time) => (
         <div className={'text-align-r-container'}>
             <span>{formatTime(time, utc, format) ?? '-'}</span>
         </div>
     ),
-    sorter: makeTimeSorter(key),
+    sorter: makeTimeSorter<T>(key),
     input: <TimePickerWrapper isUTC={utc} {...pickerOther} />,
 })
 

src/components/Table/Columns/timezone.tsx

@@ -1,11 +1,11 @@
-import { memo, ReactNode, useCallback, useEffect, useState } from 'react'
+import { Key, memo, ReactNode, useCallback, useEffect, useState } from 'react'
 import { Select, SelectProps } from 'antd'
 
 import { findTimezoneId, rawTimezones, TimezoneId } from '@utils'
 import type { OmitExtends } from '@utils/types'
 import { SimpleTimezoneDto } from '@api'
 
-import { columnPropsOther, makeColumn } from '.'
+import { ColumnProps, makeColumn } from '.'
 
 const makeTimezoneLabel = (id?: string | null, hours?: number) =>
     `UTC${hours && hours > 0 ? '+':''}${hours ? ('0' + hours).slice(-2) : '~??'} :: ${id ?? 'Неизвестно'}`
@@ -18,7 +18,7 @@ export const timezoneOptions = Object
         value: id,
     }))
 
-export const makeTimezoneRenderer = () => (timezone?: SimpleTimezoneDto) => {
+export const makeTimezoneRender = () => (timezone?: SimpleTimezoneDto) => {
     if (!timezone) return 'UTC~?? :: Неизвестно'
     const { hours, timezoneId } = timezone
     return makeTimezoneLabel(timezoneId, hours)
@@ -46,17 +46,17 @@ export const TimezoneSelect = memo<TimezoneSelectProps>(({ onChange, value, defa
     return (<Select {...other} onChange={onValueChanged} value={id} defaultValue={defaultTimezone} />)
 })
 
-export const makeTimezoneColumn = (
+export const makeTimezoneColumn = <T extends SimpleTimezoneDto>(
     title: ReactNode = 'Зона',
-    key: string = 'timezone',
+    key: Key = 'timezone',
-    defaultValue?: SimpleTimezoneDto,
+    defaultValue?: T,
     allowClear: boolean = true,
-    other?: columnPropsOther,
+    other?: ColumnProps<T>,
     selectOther?: TimezoneSelectProps
 ) => makeColumn(title, key, {
     width: 100,
     editable: true,
-    render: makeTimezoneRenderer(),
+    render: makeTimezoneRender(),
     input: (
         <TimezoneSelect
             key={key}

src/components/Table/EditableCell.tsx

@@ -1,44 +1,54 @@
-import { memo, ReactNode } from 'react'
+import { Key, memo, ReactNode, useMemo } from 'react'
+import { Rule } from 'rc-field-form/lib/interface'
 import { Form, Input } from 'antd'
-import { NamePath, Rule } from 'rc-field-form/lib/interface'
 
-type EditableCellProps = React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> & {
+export type EditableCellProps = React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement> & {
-  editing?: boolean
+    editing?: boolean
-  dataIndex?: NamePath
+    dataIndex?: Key
-  input?: ReactNode
+    input?: ReactNode
-  isRequired?: boolean
+    isRequired?: boolean
-  title: string
+    formItemClass?: string
-  formItemClass?: string
+    formItemRules?: Rule[]
-  formItemRules?: Rule[]
+    children: ReactNode
-  children: ReactNode
+    initialValue: any
-  initialValue: any
 }
 
+const itemStyle = { margin: 0 }
+
 export const EditableCell = memo<EditableCellProps>(({
-  editing,
+    editing,
-  dataIndex,
+    dataIndex,
-  input,
+    input,
-  isRequired,
+    isRequired,
-  formItemClass,
+    formItemClass,
-  formItemRules,
+    formItemRules,
-  children,
+    children,
-  initialValue,
+    initialValue,
-  ...other
+    ...other
-}) => (
+}) => {
-  <td style={editing ? { padding: 0 } : undefined} {...other}>
+    const rules = useMemo(() => formItemRules || [{
-    {!editing ? children : (
+        required: isRequired,
-      <Form.Item
+        message: `Это обязательное поле!`,
-        name={dataIndex}
+    }], [formItemRules, isRequired])
-        style={{ margin: 0 }}
+
-        className={formItemClass}
+    const name = useMemo(() => dataIndex ? String(dataIndex).split('.') : undefined, [dataIndex])
-        rules={formItemRules ?? [{
+    const tdStyle = useMemo(() => editing ? { padding: 0 } : undefined, [editing])
-          required: isRequired,
+
-          message: `Это обязательное поле!`,
+    const edititngItem = useMemo(() => (
-        }]}
+        <Form.Item
-        initialValue={initialValue}
+            name={name}
-      >
+            style={itemStyle}
-        {input ?? <Input/>}
+            className={formItemClass}
-      </Form.Item>
+            rules={rules}
-    )}
+            initialValue={initialValue}
-  </td>
+        >
-))
+            {input ?? <Input />}
+        </Form.Item>
+    ), [name, rules, formItemClass, initialValue, input])
+
+    return (
+        <td style={tdStyle} {...other}>
+            {editing ? edititngItem : children}
+        </td>
+    )
+})

src/components/Table/Table.tsx

@@ -1,26 +1,65 @@
-import { memo, useCallback, useEffect, useState } from 'react'
+import { Key, memo, useCallback, useEffect, useState } from 'react'
 import { ColumnGroupType, ColumnType } from 'antd/lib/table'
 import { Table as RawTable, TableProps } from 'antd'
 
+import { RenderMethod } from './Columns'
+import { tryAddKeys } from './EditableTable'
+import TableSettingsChanger from './TableSettingsChanger'
 import type { OmitExtends } from '@utils/types'
 import { applyTableSettings, getTableSettings, setTableSettings, TableColumnSettings, TableSettings } from '@utils'
 
-import TableSettingsChanger from './TableSettingsChanger'
-import { tryAddKeys } from './EditableTable'
-
 import '@styles/index.css'
 
 export type BaseTableColumn<T> = ColumnGroupType<T> | ColumnType<T>
-export type TableColumns<T> = OmitExtends<BaseTableColumn<T>, TableColumnSettings>[]
+export type TableColumn<T> = OmitExtends<BaseTableColumn<T>, TableColumnSettings>
+export type TableColumns<T> = TableColumn<T>[]
 
 export type TableContainer<T> = TableProps<T> & {
-    columns: TableColumns<T>
+    columns: TableColumn<T>[]
     tableName?: string
     showSettingsChanger?: boolean
 }
 
-const _Table = <T extends object>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) => {
+export interface DataSet<T, D = any> {
-    const [newColumns, setNewColumns] = useState<TableColumns<T>>([])
+    [k: Key]: DataSet<T> | T | D
+}
+
+export const getObjectByDeepKey = <T,>(key: Key | undefined, data: DataSet<T>): T | undefined => {
+    if (!key) return undefined
+    const parts = String(key).split('.')
+    let out = data
+    for (let i = 0; i < parts.length && out; i++) {
+        const key = parts[i]
+        if (!(key in out)) return undefined // Если ключ не найдем, считаем значение null
+        out = out[key] as DataSet<T> // Углубляемся внутрь объекта
+    }
+    return out as T
+}
+
+export const makeColumnRenderWrapper = <T extends DataSet<any>>(key: Key | undefined, render: RenderMethod<T, T> | undefined): RenderMethod<T, T> =>
+    (_: any, dataset: T, index: number) => {
+        const renderFunc: RenderMethod<T, T> = typeof render === 'function' ? render : (record) => String(record)
+        return renderFunc(getObjectByDeepKey<T>(key, dataset), dataset, index)
+    }
+
+
+const applyColumnWrappers = <T extends DataSet<any>>(columns: BaseTableColumn<T>[]): BaseTableColumn<T>[] => {
+    return columns.map((column) => {
+        if ('children' in column) {
+            return {
+                ...column,
+                children: applyColumnWrappers(column.children),
+            }
+        }
+        return {
+            ...column,
+            render: makeColumnRenderWrapper<T>(column.key, column.render),
+        }
+    })
+}
+
+function _Table<T extends DataSet<any>>({ columns, dataSource, tableName, showSettingsChanger, ...other }: TableContainer<T>) {
+    const [newColumns, setNewColumns] = useState<TableColumn<T>[]>([])
     const [settings, setSettings] = useState<TableSettings>({})
 
     const onSettingsChanged = useCallback((settings?: TableSettings | null) => {
@@ -31,7 +70,7 @@ const _Table = <T extends object>({ columns, dataSource, tableName, showSettings
 
     useEffect(() => setSettings(tableName ? getTableSettings(tableName) : {}), [tableName])
     useEffect(() => setNewColumns(() => {
-        const newColumns = applyTableSettings(columns, settings)
+        const newColumns = applyTableSettings(applyColumnWrappers(columns), settings)
         if (tableName && showSettingsChanger) {
             const oldTitle = newColumns[0].title
             newColumns[0].title = (props) => (

src/components/Table/TableSettingsChanger.tsx

@@ -1,11 +1,11 @@
 import { memo, useCallback, useEffect, useState } from 'react'
 import { ColumnsType } from 'antd/lib/table'
-import { Button, Modal, Switch, Table } from 'antd'
+import { Button, Modal, Switch } from 'antd'
 import { SettingOutlined } from '@ant-design/icons'
 
 import { TableColumnSettings, makeTableSettings, mergeTableSettings, TableSettings } from '@utils'
-import { TableColumns } from './Table'
+import { Table, TableColumns } from './Table'
-import { makeColumn } from '.'
+import { makeColumn, makeTextColumn } from '.'
 
 const parseSettings = <T extends object>(columns?: TableColumns<T>, settings?: TableSettings | null): TableColumnSettings[] => {
     const newSettings = mergeTableSettings(makeTableSettings(columns ?? []), settings ?? {})
@@ -46,8 +46,8 @@ const _TableSettingsChanger = <T extends object>({ title, columns, settings, onC
 
     useEffect(() => {
         setTableColumns([
-            makeColumn('Название', 'title'),
+            makeTextColumn<string>('Название', 'title'),
-            makeColumn(null, 'visible', {
+            makeColumn<any>(null, 'visible', {
                 title: () => (
                     <>
                         Показать
@@ -56,7 +56,7 @@ const _TableSettingsChanger = <T extends object>({ title, columns, settings, onC
                         </Button>
                     </>
                 ),
-                render: (visible: boolean, _?: TableColumnSettings, index: number = NaN) => (
+                render: (visible, _, index = NaN) => (
                     <Switch
                         checked={visible}
                         checkedChildren={'Отображён'}

src/components/Table/index.tsx

@@ -1,4 +1,3 @@
-export * from './sorters'
 export * from './EditableTable'
 export * from './DatePickerWrapper'
 export * from './TimePickerWrapper'

src/components/Table/sorters.ts

@@ -1,42 +0,0 @@
-import { timeToMoment } from '@utils'
-import { isRawDate } from '@utils'
-import { TimeDto } from '@api'
-
-import { DataType } from './Columns'
-import { CompareFn } from 'antd/lib/table/interface'
-
-export const makeNumericSorter = <T extends unknown>(key: keyof DataType<T>): CompareFn<DataType<T>> =>
-    (a: DataType<T>, b: DataType<T>) => Number(a[key]) - Number(b[key])
-
-export const makeNumericObjSorter = (key: [string, string]) =>
-    (a: DataType, b: DataType) => Number(a[key[0]][key[1]]) - Number(b[key[0]][key[1]])
-
-export const makeStringSorter = <T extends unknown>(key: keyof DataType<T>) => (a?: DataType<T> | null, b?: DataType<T> | null) => {
-    if (!a && !b) return 0
-    if (!a) return 1
-    if (!b) return -1
-
-    return String(a[key]).localeCompare(String(b[key]))
-}
-
-export const makeDateSorter = <T extends unknown>(key: keyof DataType<T>) => (a: DataType<T>, b: DataType<T>) => {
-    const adate = a[key]
-    const bdate = b[key]
-    if (!isRawDate(adate) || !isRawDate(bdate))
-        throw new Error('Date column contains not date formatted string(s)')
-
-    const date = new Date(adate)
-
-    return date.getTime() - new Date(bdate).getTime()
-}
-
-export const makeTimeSorter = <T extends TimeDto>(key: keyof DataType<T>) => (a: DataType<T>, b: DataType<T>) => {
-    const elma = a[key]
-    const elmb = b[key]
-
-    if (!elma && !elmb) return 0
-    if (!elma) return 1
-    if (!elmb) return -1
-
-    return timeToMoment(elma).diff(timeToMoment(elmb))
-}

src/pages/AdminPanel/index.jsx

@@ -1,9 +1,9 @@
-import { Navigate, Route, Routes } from 'react-router-dom'
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
-import { lazy, memo, useMemo } from 'react'
+import { lazy, memo, useEffect, useMemo } from 'react'
 
 import { RootPathContext, useLayoutProps, useRootPath } from '@asb/context'
 import { FastRunMenu } from '@components/FastRunMenu'
-import { MenuBreadcrumbItems } from '@components/MenuBreadcrumb'
+import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
 import { NoAccessComponent, withPermissions } from '@utils'
 
 import { AdminNavigationMenu, menuItems } from './AdminNavigationMenu'
@@ -21,18 +21,21 @@ const TelemetryViewer = lazy(() => import('./Telemetry/TelemetryViewer'))
 const TelemetryMerger = lazy(() => import('./Telemetry/TelemetryMerger'))
 const VisitLog = lazy(() => import('./VisitLog'))
 
-const layoutProps = {
-    sider: <AdminNavigationMenu />,
-    title: 'Администраторская панель',
-    isAdmin: true,
-    breadcrumb: <MenuBreadcrumbItems menuItems={menuItems} pathRoot={/^\/admin\//} />,
-}
-
 const AdminPanel = memo(() => {
+    const location = useLocation()
     const root = useRootPath()
     const rootPath = useMemo(() => `${root}/admin`, [root])
 
-    useLayoutProps(layoutProps)
+    const setLayoutProps = useLayoutProps()
+
+    useEffect(() => {
+        setLayoutProps({
+            sider: <AdminNavigationMenu />,
+            title: 'Администраторская панель',
+            isAdmin: true,
+            breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/admin\//),
+        })
+    }, [location.pathname])
 
     return (
         <RootPathContext.Provider value={rootPath}>

src/pages/Cluster/WellOperationsTable.jsx

@@ -1,7 +1,6 @@
 import { memo, useMemo } from 'react'
-import { Table } from 'antd'
 
-import { makeTextColumn, makeNumericColumnPlanFact } from '@components/Table'
+import { Table, makeTextColumn, makeNumericColumnPlanFact } from '@components/Table'
 import { getPrecision } from '@utils/functions'
 
 const columns = [

src/pages/FileDownload.jsx

@@ -1,40 +1,30 @@
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { InfoCircleFilled, CloseCircleOutlined } from '@ant-design/icons'
 import { Button, Result, Typography } from 'antd'
 
 import { downloadFile, invokeWebApiWrapperAsync } from '@components/factory'
 import { withPermissions } from '@utils'
-import { FileService, WellService } from '@api'
+import { FileService } from '@api'
 
 const { Paragraph, Text } = Typography
 
-export const getLinkToFile = (fileInfo) => `/file_download/${fileInfo.idWell}/${fileInfo.id}`
+export const getLinkToFile = (fileInfo) => `/file_download/${fileInfo.id}`
 
 const FileDownload = memo(function FileDownload() {
-    const { idWell, idFile } = useParams()
+    const { idFile } = useParams()
-    const [well, setWell] = useState({})
     const [file, setFile] = useState({})
     const [isError, setIsError] = useState(false)
 
     const navigate = useNavigate()
-
+    const location = useLocation()
-    useEffect(() => {
+    const isFirstOpenApp = useMemo(() => location.key === 'default', [location])
-        invokeWebApiWrapperAsync(
-            async () => setWell(await WellService.get(idWell)),
-            null,
-            'Не удалось получить информацию о скважине',
-            { actionName: 'Получение данных о скважине' }
-        )
-    }, [idWell])
 
     useEffect(() => {
         invokeWebApiWrapperAsync(
             async () => {
-                const files = await FileService.getFilesInfo(idWell)
+                const file = await FileService.getFileInfo(idFile)
-                // TODO Получается только одна категория файлов.
+                setFile(file)
-                // Поменять при появлении метода получения инфы о конкретном файле
-                setFile(files.items.find((file) => file.id === idFile) ?? { id: idFile, idWell, name: `File_${idWell}_${idFile}` })
             },
             null,
             () => {
@@ -43,10 +33,10 @@ const FileDownload = memo(function FileDownload() {
             },
             { actionName: 'Получение информации о файле' }
         )
-    }, [idWell, idFile])
+    }, [idFile])
 
     const download = useCallback(async () => {
-        if (!await downloadFile(file))
+        if (!file || !await downloadFile(file))
             setIsError(true)
     }, [file])
     
@@ -58,13 +48,16 @@ const FileDownload = memo(function FileDownload() {
                 <>
                     Вы перешли к странице загрузки файла!
                     <br />
-                    Файл "{file.name ?? ('№' + idFile)}", скважина "{well.caption ?? ('№' + idWell)}".
+                    Файл "{file?.name ?? ('№' + idFile)}".
                 </>
             )}
             // subTitle={}
             extra={(
                 <>
-                    <Button type={'ghost'} onClick={() => navigate('/')}>Вернуться на главную</Button>
+                    {isFirstOpenApp
+                        ? <Button type={'ghost'} onClick={() => navigate('/')}>Вернуться на главную</Button>
+                        : <Button type={'ghost'} onClick={() => navigate(-1)}>Вернуться на страницу документов</Button>
+                    }
                     <Button type={'primary'} onClick={download}>Загрузить</Button>
                 </>
             )}

src/pages/Well/Analytics/WellCompositeEditor/WellCompositeSections.jsx

@@ -1,12 +1,12 @@
 import { Link, useLocation } from 'react-router-dom'
 import { useState, useEffect, memo, useMemo, lazy, Suspense } from 'react'
 import { LineChartOutlined, ProfileOutlined, TeamOutlined } from '@ant-design/icons'
-import { Table, Button, Badge, Divider, Modal, Row, Col } from 'antd'
+import { Button, Badge, Divider, Modal, Row, Col } from 'antd'
 
 import { useWell } from '@asb/context'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { makeTextColumn, makeNumericColumnPlanFact, makeNumericColumn } from '@components/Table'
+import { Table, makeTextColumn, makeNumericColumnPlanFact, makeNumericColumn } from '@components/Table'
 import { WellCompositeService } from '@api'
 import {
   hasPermission,

src/pages/Well/Reports/DailyReport/ReportEditor.jsx

@@ -1,15 +1,15 @@
-import { DatePicker, Descriptions, Form, Input, InputNumber, Modal, Table, Tabs } from 'antd'
+import { DatePicker, Descriptions, Form, Input, InputNumber, Modal, Table as RawTable, Tabs } from 'antd'
 import { memo, useCallback, useEffect, useState } from 'react'
 import moment from 'moment'
 
 import { useWell } from '@asb/context'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { makeColumn, makeGroupColumn } from '@components/Table'
+import { Table, makeColumn, makeGroupColumn } from '@components/Table'
 import { DailyReportService } from '@api'
 
 const { Item: RawItem } = Form
-const { Summary } = Table
+const { Summary } = RawTable
 const { TabPane } = Tabs
 
 const Item = memo(({ style, ...other }) => <RawItem style={{ margin: 0, ...style }} {...other} />)

src/pages/Well/Reports/DailyReport/index.jsx

@@ -72,8 +72,7 @@ const DailyReport = memo(() => {
     
     const filteredData = useMemo(() => {
         if (!searchDate) return data
-        const endDate = moment(searchDate[1]).add(1, 'd')
+        return data.filter((row) => moment(row.reportDate).isBetween(searchDate[0], searchDate[1], 'day', '[]'))
-        return data.filter((row) => moment(row.reportDate).isBetween(searchDate[0], endDate, 'ms', '[)'))
     }, [data, searchDate])
 
     return (

src/pages/Well/Telemetry/TelemetryView/ActiveMessagesOnline.jsx

@@ -1,7 +1,7 @@
-import { Table } from 'antd'
 import { useState, useEffect, useCallback, memo, useMemo } from 'react'
 
 import { useWell } from '@asb/context'
+import { Table } from '@components/Table'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { Subscribe } from '@services/signalr'
@@ -22,7 +22,7 @@ export const ActiveMessagesOnline = memo(({ well: givenWell }) => {
     if (messages)
     setMessages(messages.items.splice(0, 4))
   }, [])
-  
+
   const columns = useMemo(() => makeMessageColumns(well.id), [well.id])
 
   useEffect(() => {

src/pages/Well/WellCase/index.jsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { Alert, Button, Typography } from 'antd'
+import { Alert, Button } from 'antd'
 
 import { useWell } from '@asb/context'
 import { UserView } from '@components/views'

src/pages/Well/WellOperations/WellDrillParams.jsx

@@ -1,88 +1,17 @@
 import { useState, useEffect, useCallback, memo, useMemo } from 'react'
-import { InputNumber } from 'antd'
 
 import { useWell } from '@asb/context'
 import {
     EditableTable,
     makeSelectColumn,
-    makeGroupColumn,
-    makeNumericRender,
     makeNumericSorter,
-    RegExpIsFloat,
+    makeNumericAvgRange,
 } from '@components/Table'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DrillParamsService, WellOperationService } from '@api'
 import { arrayOrDefault } from '@utils'
 
-import { makeNumericObjSorter } from '@components/Table/sorters'
-
-const makeNumericObjRender = (fixed, columnKey) => (value, obj) => {
-    let val = '-'
-    const isSelected = obj && columnKey && obj[columnKey[0]] ? obj[columnKey[0]][columnKey[1]] : false
-
-    if ((value ?? null) !== null && Number.isFinite(+value)) {
-        val = (fixed ?? null) !== null
-            ? (+value).toFixed(fixed)
-            : (+value).toPrecision(5)
-    }
-
-    return (
-        <div className={`text-align-r-container ${isSelected ? 'color-pale-green' : ''}`}>
-            <span>{val}</span>
-        </div>
-    )
-}
-
-const makeNumericColumnOptionsWithColor = (fixed, sorterKey, columnKey) => ({
-    editable: true,
-    initialValue: 0,
-    width: 100,
-    sorter: sorterKey ? makeNumericObjSorter(sorterKey) : undefined,
-    formItemRules: [{
-        required: true,
-        message: 'Введите число',
-        pattern: RegExpIsFloat,
-    }],
-    render: makeNumericObjRender(fixed, columnKey),
-})
-
-const makeNumericObjColumn = (
-    title,
-    dataIndex,
-    filters,
-    filterDelegate,
-    renderDelegate,
-    width,
-    other
-) => ({
-    title: title,
-    dataIndex: dataIndex,
-    key: dataIndex,
-    filters: filters,
-    onFilter: filterDelegate ? filterDelegate(dataIndex) : null,
-    sorter: makeNumericObjSorter(dataIndex),
-    width: width,
-    input: <InputNumber style={{ width: '100%' }}/>,
-    render: renderDelegate ?? makeNumericRender(),
-    align: 'right',
-    ...other
-})
-
-const makeNumericAvgRange = (
-    title,
-    dataIndex,
-    fixed,
-    filters,
-    filterDelegate,
-    renderDelegate,
-    width
-) => makeGroupColumn(title, [
-    makeNumericObjColumn('мин', [dataIndex, 'min'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'min'], [dataIndex, 'isMin'])),
-    makeNumericObjColumn('сред', [dataIndex, 'avg'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'avg'])),
-    makeNumericObjColumn('макс', [dataIndex, 'max'], filters, filterDelegate, renderDelegate, width, makeNumericColumnOptionsWithColor(fixed, [dataIndex, 'max'], [dataIndex, 'isMax']))
-])
-
 export const getColumns = async (idWell) => {
     let sectionTypes = await WellOperationService.getSectionTypes(idWell)
     sectionTypes = Object.entries(sectionTypes).map(([id, value]) => ({

src/pages/Well/index.jsx

@@ -4,7 +4,7 @@ import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-do
 import { WellContext, RootPathContext, useRootPath, useLayoutProps, TopRightBlockContext } from '@asb/context'
 import { FastRunMenu } from '@components/FastRunMenu'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { MenuBreadcrumbItems } from '@components/MenuBreadcrumb'
+import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
 import { NoAccessComponent, withPermissions } from '@utils'
 import { WellService } from '@api'
 
@@ -78,9 +78,9 @@ const Well = memo(() => {
 
     useEffect(() => setLayoutProps({
         sider: <NavigationMenu idWell={well.id} />,
-        breadcrumb: <MenuBreadcrumbItems menuItems={menuItems} pathRoot={/^\/well\/[0-9]+\//} />,
+        breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/well\/[0-9]+\//),
         topRightBlock: topRightBlock,
-    }), [well, setLayoutProps, topRightBlock])
+    }), [well, location.pathname, setLayoutProps, topRightBlock])
 
     useEffect(() => setTopRightBlock(undefined), [location])
 

src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

src/reportWebVitals.ts

@@ -1,12 +0,0 @@
-import { getCLS, getFID, getFCP, getLCP, getTTFB, ReportHandler } from 'web-vitals'
-
-export const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (!onPerfEntry) return
-  getCLS(onPerfEntry)
-  getFID(onPerfEntry)
-  getFCP(onPerfEntry)
-  getLCP(onPerfEntry)
-  getTTFB(onPerfEntry)
-}
-
-export default reportWebVitals