From 7e19d55926fb168c972c17ec3ca437c78ab6112b Mon Sep 17 00:00:00 2001
From: KharchenkoVV <vv.harchenko@autodrilling.ru>
Date: Thu, 29 Jul 2021 17:17:28 +0500
Subject: [PATCH] CF2-40: Added dynamic changing of 'Last Data' tables cells

---
 src/components/CementFluid.jsx   | 538 ++++++++++++++++++++-----------
 src/components/Nnb.jsx           | 372 ++++++++++++++-------
 src/components/SludgeDiagram.jsx | 524 +++++++++++++++++++-----------
 src/pages/LastData.jsx           |  30 +-
 src/pages/Well.jsx               |   1 +
 src/styles/App.less              |  13 +
 6 files changed, 992 insertions(+), 486 deletions(-)

diff --git a/src/components/CementFluid.jsx b/src/components/CementFluid.jsx
index 55cd1d2..bd3e5fe 100644
--- a/src/components/CementFluid.jsx
+++ b/src/components/CementFluid.jsx
@@ -1,178 +1,7 @@
-import {Table} from 'antd'
+import { useState } from 'react';
+import {Table, Input, Form, Popconfirm, Typography } from 'antd'
 
-const columns = [
-  {
-      title: <b>Наименование</b>,
-      key: 'name',
-      dataIndex: 'name',
-      align: 'center',
-      render: (item) => <b>{item}</b>
-  },
-  {
-      title: <b>Температура, °C</b>,
-      key: 'temperature',
-      dataIndex: 'temperature',
-      align: 'center'
-  },
-  {
-    title: <b>Плотность, г/см³</b>,
-    key: 'density',
-    dataIndex: 'density',
-    align: 'center'
-  },
-  {
-    title: <b>Усл. вязкость, сек</b>,
-    key: 'conditionalViscosity',
-    dataIndex: 'conditionalViscosity',
-    align: 'center'
-  },
-  {
-    title: <b>R300</b>,
-    key: 'r300',
-    dataIndex: 'R300',
-    align: 'center'
-  },
-  {
-    title: <b>R600</b>,
-    key: 'r600',
-    dataIndex: 'R600',
-    align: 'center'
-  },
-  {
-    title: <b>R3/R6</b>,
-    key: 'r3r6',
-    dataIndex: 'r3/R6',
-    align: 'center'
-  },
-  {
-    title: <b>ДНС, дПа</b>,
-    key: 'dnsDpa',
-    dataIndex: 'dnsDpa',
-    align: 'center'
-  },
-  {
-    title: <b>Пластич. вязкость, сПз</b>,
-    key: 'plasticViscocity',
-    dataIndex: 'plasticViscocity',
-    align: 'center'
-  },
-  {
-    title: <b>СНС, дПа</b>,
-    key: 'snsDpa',
-    dataIndex: 'snsDpa',
-    align: 'center'
-  },
-  {
-    title: <b>R3/R6 49С</b>,
-    key: 'r3r649С',
-    dataIndex: 'r3/R649С',
-    align: 'center'
-  },
-  {
-    title: <b>ДНС 49С, дПа</b>,
-    key: 'dns49Cdpa',
-    dataIndex: 'dns49Cdpa',
-    align: 'center'
-  },
-  {
-    title: <b>Пластич. вязкость 49С, сПз</b>,
-    key: 'plasticViscocity49c',
-    dataIndex: 'plasticViscocity49c',
-    align: 'center'
-  },
-  {
-    title: <b>СНС 49С, дПа</b>,
-    key: 'sns49Cdpa',
-    dataIndex: 'sns49Cdpa',
-    align: 'center'
-  },
-  {
-    title: <b>МВТ, кг/м³</b>,
-    key: 'mbt',
-    dataIndex: 'mbt',
-    align: 'center'
-  },
-  {
-    title: <b>Песок, %</b>,
-    key: 'sand',
-    dataIndex: 'sand',
-    align: 'center'
-  },
-  {
-    title: <b>Фильтрация, см³/30мин</b>,
-    key: 'filter',
-    dataIndex: 'filter',
-    align: 'center'
-  },
-  {
-    title: <b>Корка, мм</b>,
-    key: 'crust',
-    dataIndex: 'crust',
-    align: 'center'
-  },
-  {
-    title: <b>КТК</b>,
-    key: 'ktk',
-    dataIndex: 'ktk',
-    align: 'center'
-  },
-  {
-    title: <b>pH</b>,
-    key: 'ph',
-    dataIndex: 'ph',
-    align: 'center'
-  },
-  {
-    title: <b>Жесткость, мг/л</b>,
-    key: 'hardness',
-    dataIndex: 'hardness',
-    align: 'center'
-  },
-  {
-    title: <b>Хлориды, мг/л</b>,
-    key: 'chlorides',
-    dataIndex: 'chlorides',
-    align: 'center'
-  },
-  {
-    title: <b>Pf</b>,
-    key: 'pf',
-    dataIndex: 'pf',
-    align: 'center'
-  },
-  {
-    title: <b>Mf</b>,
-    key: 'mf',
-    dataIndex: 'mf',
-    align: 'center'
-  },
-  {
-    title: <b>Pm</b>,
-    key: 'pm',
-    dataIndex: 'pm',
-    align: 'center'
-  },
-  {
-    title: <b>Твердая фаза раствора, %</b>,
-    key: 'fluidSolidPhase',
-    dataIndex: 'fluidSolidPhase',
-    align: 'center'
-  },
-  {
-    title: <b>Смазка, %</b>,
-    key: 'grease',
-    dataIndex: 'grease',
-    align: 'center'
-  },
-  {
-    title: <b>Карбонат кальция, кг/м³</b>,
-    key: 'calciumCarbonate',
-    dataIndex: 'calciumCarbonate',
-    align: 'center'
-  }
-];
-
-const data = [
+const originData = [
   {
     key: '1', name: 'План', temperature: '', density: '', conditionalViscosity: '', r300: '', r600: '', r3r6: '', dnsDpa: '', plasticViscocity: '',
     snsDpa: '', r3r649С: '', dns49Cdpa: '', plasticViscocity49c: '', sns49Cdpa: '', mbt: '', sand: '', filter: '', crust: '', ktk: '', ph: '',
@@ -185,17 +14,366 @@ const data = [
   }
 ];
 
+const EditableCell = ({
+  editing,
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  children,
+  ...restProps
+}) => {
+  return (
+    <td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
+      <div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
+        {editing ? (
+          <Form.Item
+            name={dataIndex}
+            style={{ margin: 0 }}
+            rules={[
+              {
+                required: true,
+                message: '',
+                pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
+              },
+            ]}
+          >
+            <Input size="small" />
+          </Form.Item>
+        ) : (
+          children
+        )}
+      </div>
+    </td>
+  );
+};
+
+
 export function CementFluid() {
+  const [form] = Form.useForm();
+  const [data, setData] = useState(originData);
+  const [editingKey, setEditingKey] = useState('');
+
+  const isEditing = (row) => row.key === editingKey;
+
+  const columns = [
+    {
+        title: 'Наименование',
+        key: 'name',
+        dataIndex: 'name',
+        align: 'center',
+        className: 'small-font'
+    },
+    {
+        title: 'Температура, °C',
+        key: 'temperature',
+        dataIndex: 'temperature',
+        align: 'center',
+        className: 'small-font',
+        editable: true
+    },
+    {
+      title: 'Плотность, г/см³',
+      key: 'density',
+      dataIndex: 'density',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Усл. вязкость, сек',
+      key: 'conditionalViscosity',
+      dataIndex: 'conditionalViscosity',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'R300',
+      key: 'r300',
+      dataIndex: 'R300',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'R600',
+      key: 'r600',
+      dataIndex: 'R600',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'R3/R6',
+      key: 'r3r6',
+      dataIndex: 'r3/R6',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'ДНС, дПа',
+      key: 'dnsDpa',
+      dataIndex: 'dnsDpa',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Пластич. вязкость, сПз',
+      key: 'plasticViscocity',
+      dataIndex: 'plasticViscocity',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'СНС, дПа',
+      key: 'snsDpa',
+      dataIndex: 'snsDpa',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'R3/R6 49С',
+      key: 'r3r649С',
+      dataIndex: 'r3/R649С',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'ДНС 49С, дПа',
+      key: 'dns49Cdpa',
+      dataIndex: 'dns49Cdpa',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Пластич. вязкость 49С, сПз',
+      key: 'plasticViscocity49c',
+      dataIndex: 'plasticViscocity49c',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'СНС 49С, дПа',
+      key: 'sns49Cdpa',
+      dataIndex: 'sns49Cdpa',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'МВТ, кг/м³',
+      key: 'mbt',
+      dataIndex: 'mbt',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Песок, %',
+      key: 'sand',
+      dataIndex: 'sand',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Фильтрация, см³/30мин',
+      key: 'filter',
+      dataIndex: 'filter',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Корка, мм',
+      key: 'crust',
+      dataIndex: 'crust',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'КТК',
+      key: 'ktk',
+      dataIndex: 'ktk',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: <span className={'mh-2'}>pH</span>,
+      key: 'ph',
+      dataIndex: 'ph',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Жесткость, мг/л',
+      key: 'hardness',
+      dataIndex: 'hardness',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Хлориды, мг/л',
+      key: 'chlorides',
+      dataIndex: 'chlorides',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: <span className={'mh-2'}>Pf</span>,
+      key: 'pf',
+      dataIndex: 'pf',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: <span className={'mh-2'}>Mf</span>,
+      key: 'mf',
+      dataIndex: 'mf',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: <span className={'mh-2'}>Pm</span>,
+      key: 'pm',
+      dataIndex: 'pm',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Твердая фаза раствора, %',
+      key: 'fluidSolidPhase',
+      dataIndex: 'fluidSolidPhase',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Смазка, %',
+      key: 'grease',
+      dataIndex: 'grease',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Карбонат кальция, кг/м³',
+      key: 'calciumCarbonate',
+      dataIndex: 'calciumCarbonate',
+      align: 'center',
+      className: 'small-font',
+      editable: true
+    },
+    {
+      title: 'Действие',
+      dataIndex: 'action',
+      align: 'center',
+      width: 150,
+      className: 'small-font',
+      render: (_, row) => {
+        const editable = isEditing(row);
+        return editable ? (
+          <span>
+            <a
+              href="javascript:;"
+              onClick={() => save(row.key)}
+              style={{ marginRight: 8 }}
+            >
+              Сохранить
+            </a>
+            <Popconfirm style={{width: '100px'}} title={<span>Отменить<br />редактирование?</span>} onConfirm={cancel}>
+              <a>Отменить</a>
+            </Popconfirm>
+          </span>
+        ) : (
+          <Typography.Link disabled={editingKey !== ''} onClick={() => edit(row)}>
+            Редактировать
+          </Typography.Link>
+        );
+      },
+    }
+  ];
+
+  const mergedColumns = columns.map((col) => {
+    if (!col.editable) {
+      return col;
+    }
+
+    return {
+      ...col,
+      onCell: (row) => ({
+        row,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editing: isEditing(row),
+      }),
+    };
+  });
+
+  const edit = (row) => {
+    form.setFieldsValue({
+      ...row,
+    });
+    setEditingKey(row.key);
+  };
+
+  const cancel = () => {
+    setEditingKey('');
+  };
+
+  const save = async (key) => {
+    try {
+      const row = await form.validateFields();
+      const newData = [...data];
+      const index = newData.findIndex((item) => key === item.key);
+  
+      if (index > -1) {
+        const item = newData[index];
+        newData.splice(index, 1, { ...item, ...row });
+        setData(newData);
+        setEditingKey('');
+      } else {
+        newData.push(row);
+        setData(newData);
+        setEditingKey('');
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+
   return (<>
-    <Table
-        columns={columns}
+    <Form form={form} component={false}>
+      <Table
+        components={{
+          body: {
+            cell: EditableCell,
+          },
+        }}
+        columns={mergedColumns}
         dataSource={data}
         size={'small'}
         bordered={true}
         pagination={false}
-    />
-    <div>&nbsp;</div>
-    <p style={{textAlign: "right"}}><b>{new Date().toLocaleDateString()}</b></p>
-    </>
+      />
+    </Form>
+  </>
   )
 }
\ No newline at end of file
diff --git a/src/components/Nnb.jsx b/src/components/Nnb.jsx
index 6dbd2d1..d2c36f0 100644
--- a/src/components/Nnb.jsx
+++ b/src/components/Nnb.jsx
@@ -1,122 +1,268 @@
-import {Table} from 'antd'
+import { useState } from 'react';
+import {Table, Input, Form, Popconfirm, Typography } from 'antd'
 
-const columns = [
+const originData = [
   {
-      title: 'Глубина по стволу, м',
-      key: 'depth',
-      dataIndex: 'depth',
-      align: 'center',
-  },
-  {
-      title: 'Зенитный угол, град',
-      key: 'zenithAngle',
-      dataIndex: 'zenithAngle',
-      align: 'center'
-  },
-  {
-    title: 'Азимут магнитный, град',
-    key: 'magneticAzimuth',
-    dataIndex: 'magneticAzimuth',
-    align: 'center'
-  },
-  {
-    title: 'Азимут истинный, град',
-    key: 'trueAzimuth',
-    dataIndex: 'trueAzimuth',
-    align: 'center'
-  },
-  {
-    title: 'Азимут дирекц., град',
-    key: 'directAzimuth',
-    dataIndex: 'directAzimuth',
-    align: 'center'
-  },
-  {
-    title: 'Глубина по вертикали, м',
-    key: 'verticalDepth',
-    dataIndex: 'verticalDepth',
-    align: 'center'
-  },
-  {
-    title: 'Абсолютная отметка, м',
-    key: 'absoluteMark',
-    dataIndex: 'absoluteMark',
-    align: 'center'
-  },
-  {
-    title: 'Лок. смещение к северу, м',
-    key: 'localNorthOffset',
-    dataIndex: 'localNorthOffset',
-    align: 'center'
-  },
-  {
-    title: 'Лок. смещение к востоку, м',
-    key: 'localEastOffset',
-    dataIndex: 'localEastOffset',
-    align: 'center'
-  },
-  {
-    title: 'Отклонение от устья, м',
-    key: 'outFallOffset',
-    dataIndex: 'outFallOffset',
-    align: 'center'
-  },
-  {
-    title: 'Азимут смещения, град',
-    key: 'offsetAzimuth',
-    dataIndex: 'offsetAzimuth',
-    align: 'center'
-  },
-  {
-    title: 'Пространст. интенсивность, град/10 м',
-    key: 'areaIntensity',
-    dataIndex: 'areaIntensity',
-    align: 'center'
-  },
-  {
-    title: 'Угол установки отклон., град',
-    key: 'offsetStopAngle',
-    dataIndex: 'offsetStopAngle',
-    align: 'center'
-  },
-  {
-    title: 'Интенсив. по зениту, град/10 м',
-    key: 'zenithIntensity',
-    dataIndex: 'zenithIntensity',
-    align: 'center'
-  },
-  {
-    title: 'Комментарий',
-    key: 'comment',
-    dataIndex: 'comment',
-    align: 'center'
-  },
-  {
-    title: 'Разница вертикальных глубин между ХХХ (план) и ХХХ (факт)',
-    key: 'depthPlanFactDifference',
-    dataIndex: 'depthPlanFactDifference',
-    align: 'center'
-  },
-  {
-    title: 'Расстояние в пространстве между ХХХ (план) и ХХХ (факт)',
-    key: 'distancePlanFactDifference',
-    dataIndex: 'distancePlanFactDifference',
-    align: 'center'
+    key: '1', depth: '', zenithAngle: '', magneticAzimuth: '', trueAzimuth: '', directAzimuth: '', verticalDepth: '', absoluteMark: '', localNorthOffset: '', 
+    localEastOffset: '', outFallOffset: '', offsetAzimuth: '', areaIntensity: '', offsetStopAngle: '', zenithIntensity: '', comment: '', depthPlanFactDifference: '', 
+    distancePlanFactDifference: ''
   }
-];
+]
 
-const data = []
+const EditableCell = ({
+  editing,
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  children,
+  ...restProps
+}) => {
+  return (
+    <td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
+      <div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
+        {editing ? (
+          <Form.Item
+            name={dataIndex}
+            style={{ margin: 0 }}
+            rules={[
+              {
+                required: true,
+                message: '',
+                pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
+              },
+            ]}
+          >
+            <Input size="small" />
+          </Form.Item>
+        ) : (
+          children
+        )}
+      </div>
+    </td>
+  );
+};
 
 export function Nnb() {
+  const [form] = Form.useForm();
+  const [data, setData] = useState(originData);
+  const [editingKey, setEditingKey] = useState('');
+
+  const isEditing = (row) => row.key === editingKey;
+
+  const columns = [
+    {
+        title: 'Глубина по стволу, м',
+        key: 'depth',
+        dataIndex: 'depth',
+        align: 'center',
+        editable: true
+    },
+    {
+        title: 'Зенитный угол, град',
+        key: 'zenithAngle',
+        dataIndex: 'zenithAngle',
+        align: 'center',
+        editable: true
+    },
+    {
+      title: 'Азимут магнитный, град',
+      key: 'magneticAzimuth',
+      dataIndex: 'magneticAzimuth',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Азимут истинный, град',
+      key: 'trueAzimuth',
+      dataIndex: 'trueAzimuth',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Азимут дирекц., град',
+      key: 'directAzimuth',
+      dataIndex: 'directAzimuth',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Глубина по вертикали, м',
+      key: 'verticalDepth',
+      dataIndex: 'verticalDepth',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Абсолютная отметка, м',
+      key: 'absoluteMark',
+      dataIndex: 'absoluteMark',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Лок. смещение к северу, м',
+      key: 'localNorthOffset',
+      dataIndex: 'localNorthOffset',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Лок. смещение к востоку, м',
+      key: 'localEastOffset',
+      dataIndex: 'localEastOffset',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Отклонение от устья, м',
+      key: 'outFallOffset',
+      dataIndex: 'outFallOffset',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Азимут смещения, град',
+      key: 'offsetAzimuth',
+      dataIndex: 'offsetAzimuth',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Пространст. интенсивность, град/10 м',
+      key: 'areaIntensity',
+      dataIndex: 'areaIntensity',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Угол установки отклон., град',
+      key: 'offsetStopAngle',
+      dataIndex: 'offsetStopAngle',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Интенсив. по зениту, град/10 м',
+      key: 'zenithIntensity',
+      dataIndex: 'zenithIntensity',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Комментарий',
+      key: 'comment',
+      dataIndex: 'comment',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Разница вертикальных глубин между ХХХ (план) и ХХХ (факт)',
+      key: 'depthPlanFactDifference',
+      dataIndex: 'depthPlanFactDifference',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Расстояние в пространстве между ХХХ (план) и ХХХ (факт)',
+      key: 'distancePlanFactDifference',
+      dataIndex: 'distancePlanFactDifference',
+      align: 'center',
+      editable: true
+    },
+    {
+      title: 'Действие',
+      dataIndex: 'action',
+      align: 'center',
+      width: 150,
+      className: 'small-font',
+      render: (_, row) => {
+        const editable = isEditing(row);
+        return editable ? (
+          <span>
+            <a
+              href="javascript:;"
+              onClick={() => save(row.key)}
+              style={{ marginRight: 8 }}
+            >
+              Сохранить
+            </a>
+            <Popconfirm style={{width: '100px'}} title={<span>Отменить<br />редактирование?</span>} onConfirm={cancel}>
+              <a>Отменить</a>
+            </Popconfirm>
+          </span>
+        ) : (
+          <Typography.Link disabled={editingKey !== ''} onClick={() => edit(row)}>
+            Редактировать
+          </Typography.Link>
+        );
+      },
+    }
+  ];
+
+  const mergedColumns = columns.map((col) => {
+    if (!col.editable) {
+      return col;
+    }
+
+    return {
+      ...col,
+      onCell: (row) => ({
+        row,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editing: isEditing(row),
+      }),
+    };
+  });
+
+  const edit = (row) => {
+    form.setFieldsValue({
+      ...row,
+    });
+    setEditingKey(row.key);
+  };
+
+  const cancel = () => {
+    setEditingKey('');
+  };
+
+  const save = async (key) => {
+    try {
+      const row = await form.validateFields();
+      const newData = [...data];
+      const index = newData.findIndex((item) => key === item.key);
+  
+      if (index > -1) {
+        const item = newData[index];
+        newData.splice(index, 1, { ...item, ...row });
+        setData(newData);
+        setEditingKey('');
+      } else {
+        newData.push(row);
+        setData(newData);
+        setEditingKey('');
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+
   return (<>
-    <Table
-      columns={columns}
-      dataSource={data}
-      size={'small'}
-      bordered={true}
-      pagination={false}
-    />
-    <div>&nbsp;</div>
-    <p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
+    <Form form={form} component={false}>
+      <Table
+        components={{
+          body: {
+            cell: EditableCell,
+          },
+        }}
+        columns={mergedColumns}
+        dataSource={data}
+        size={'small'}
+        bordered={true}
+        pagination={false}
+      />
+    </Form>
   </>)
 }
\ No newline at end of file
diff --git a/src/components/SludgeDiagram.jsx b/src/components/SludgeDiagram.jsx
index 6e99175..70e0c1c 100644
--- a/src/components/SludgeDiagram.jsx
+++ b/src/components/SludgeDiagram.jsx
@@ -1,194 +1,350 @@
-import {Table} from 'antd'
+import { useState } from 'react';
+import {Table, Input, Form, Popconfirm, Typography } from 'antd'
 
-const columns = [
+const originData = [
   {
-      title: 'N пробы',
-      key: 'probeNumber',
-      dataIndex: 'probeNumber',
-      align: 'center',
-      className: 'yellow-background'
-  },
-  {
-      title: 'Глубина отбора пробы',
-      key: 'probeExtractionDepth',
-      dataIndex: 'probeExtractionDepth',
-      align: 'center',
-      className: 'yellow-background'
-  },
-  {
-    title: 'Литология',
-    key: 'lithology',
-    dataIndex: 'lithology',
-    align: 'center',
-    className: 'yellow-background',
-    children: [
-      {
-        title: 'Песчаник (%)',
-        key: 'sandstone',
-        dataIndex: 'sandstone',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'Алевролит (%)',
-        key: 'siltstone',
-        dataIndex: 'siltstone',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'Аргиллит (%)',
-        key: 'argillit',
-        dataIndex: 'argillit',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'Аргиллит бит. (%)',
-        key: 'brokenArgillit',
-        dataIndex: 'verticalDepth',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'Уголь (%)',
-        key: 'coal',
-        dataIndex: 'coal',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'Песок (%)',
-        key: 'sand',
-        dataIndex: 'sand',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'Глина (%)',
-        key: 'clay',
-        dataIndex: 'clay',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'Известняк (%)',
-        key: 'camstone',
-        dataIndex: 'camstone',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'Цемент (%)',
-        key: 'cement',
-        dataIndex: 'cement',
-        align: 'center',
-        className: 'lightpurple-background'
-      }
-    ]
-  },
-  
-  {
-    title: 'Краткое описание',
-    key: 'summary',
-    dataIndex: 'summary',
-    align: 'center',
-    className: 'yellow-background'
-  },
-  {
-    title: 'ЛБА бурового раствора',
-    key: 'drillingMud',
-    dataIndex: 'drillingMud',
-    align: 'center',
-    className: 'lightgray-background'
-  },
-  {
-    title: 'ЛБА (шлама)',
-    key: 'sludge',
-    dataIndex: 'sludge',
-    align: 'center',
-    className: 'lightorange-background'
-  },
-  {
-    title: 'Газопоказания',
-    key: 'gasIndications',
-    dataIndex: 'gasIndications',
-    align: 'center',
-    className: 'yellow-background',
-    children: [
-      {
-        title: 'Сумма УВ мах. (абс%)',
-        key: 'maxSum',
-        dataIndex: 'maxSum',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'С1 метан (отн%)',
-        key: 'methane',
-        dataIndex: 'depthPlanFactDifference',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'С2 этан (отн%)',
-        key: 'ethan',
-        dataIndex: 'ethan',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'С3 пропан (отн%)',
-        key: 'propane',
-        dataIndex: 'propane',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'С4 бутан (отн%)',
-        key: 'butane',
-        dataIndex: 'butane',
-        align: 'center',
-        className: 'lightpurple-background'
-      },
-      {
-        title: 'С5 пентан (отн%)',
-        key: 'pentane',
-        dataIndex: 'pentane',
-        align: 'center',
-        className: 'lightpurple-background'
-      }
-    ]
-  },
-  {
-    title: 'Мех. скорость',
-    key: 'mechanicalSpeed',
-    dataIndex: 'mechanicalSpeed',
-    align: 'center',
-    className: 'yellow-background'
-  },
-  {
-    title: 'Предварительное заключение о насыщении по ГК',
-    key: 'preliminaryConclusion',
-    dataIndex: 'preliminaryConclusion',
-    align: 'center',
-    className: 'lightorange-background'
+    key: '1', probeNumber: '', probeExtractionDepth: '', sandstone: '', siltstone: '', argillit: '', brokenArgillit: '', coal: '', sand: '', clay: '',
+    camstone: '', cement: '', summary: '', drillingMud: '', sludge: '', sludge: '', maxSum: '', methan: '', ethan: '', propan: '', butan: '', pentan: ''
   }
-];
+]
 
-const data = []
+const EditableCell = ({
+  editing,
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  children,
+  ...restProps
+}) => {
+  return (
+    <td {...restProps} style={{paddingLeft: 2, paddingRight: 2}}>
+      <div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
+        {editing ? (
+          <Form.Item
+            name={dataIndex}
+            style={{ margin: 0 }}
+            rules={[
+              {
+                required: true,
+                message: '',
+                pattern: '(-?[1-9]+\d*([.,]\d+)?)$|^(-?0[.,]\d*[1-9]+)$|^0$|^0.0$'
+              },
+            ]}
+          >
+            <Input size="small" />
+          </Form.Item>
+        ) : (
+          children
+        )}
+      </div>
+    </td>
+  );
+};
 
 export function SludgeDiagram() {
+  const [form] = Form.useForm();
+  const [data, setData] = useState(originData);
+  const [editingKey, setEditingKey] = useState('');
+
+  const isEditing = (row) => row.key === editingKey;
+
+  const columns = [
+    {
+        title: 'N пробы',
+        key: 'probeNumber',
+        dataIndex: 'probeNumber',
+        align: 'center',
+        className: 'yellow-background',
+        editable: true
+    },
+    {
+        title: 'Глубина отбора пробы',
+        key: 'probeExtractionDepth',
+        dataIndex: 'probeExtractionDepth',
+        align: 'center',
+        className: 'yellow-background',
+        editable: true
+    },
+    {
+      title: 'Литология',
+      key: 'lithology',
+      dataIndex: 'lithology',
+      align: 'center',
+      className: 'yellow-background',
+      editable: true,
+      children: [
+        {
+          title: 'Песчаник (%)',
+          key: 'sandstone',
+          dataIndex: 'sandstone',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Алевролит (%)',
+          key: 'siltstone',
+          dataIndex: 'siltstone',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Аргиллит (%)',
+          key: 'argillit',
+          dataIndex: 'argillit',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Аргиллит бит. (%)',
+          key: 'brokenArgillit',
+          dataIndex: 'verticalDepth',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Уголь (%)',
+          key: 'coal',
+          dataIndex: 'coal',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Песок (%)',
+          key: 'sand',
+          dataIndex: 'sand',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Глина (%)',
+          key: 'clay',
+          dataIndex: 'clay',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Известняк (%)',
+          key: 'camstone',
+          dataIndex: 'camstone',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'Цемент (%)',
+          key: 'cement',
+          dataIndex: 'cement',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        }
+      ]
+    },
+    
+    {
+      title: 'Краткое описание',
+      key: 'summary',
+      dataIndex: 'summary',
+      align: 'center',
+      className: 'yellow-background',
+      editable: true
+    },
+    {
+      title: 'ЛБА бурового раствора',
+      key: 'drillingMud',
+      dataIndex: 'drillingMud',
+      align: 'center',
+      className: 'lightgray-background',
+      editable: true
+    },
+    {
+      title: 'ЛБА (шлама)',
+      key: 'sludge',
+      dataIndex: 'sludge',
+      align: 'center',
+      className: 'lightorange-background',
+      editable: true
+    },
+    {
+      title: 'Газопоказания',
+      key: 'gasIndications',
+      dataIndex: 'gasIndications',
+      align: 'center',
+      className: 'yellow-background',
+      children: [
+        {
+          title: 'Сумма УВ мах. (абс%)',
+          key: 'maxSum',
+          dataIndex: 'maxSum',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'С1 метан (отн%)',
+          key: 'methane',
+          dataIndex: 'depthPlanFactDifference',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'С2 этан (отн%)',
+          key: 'ethan',
+          dataIndex: 'ethan',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'С3 пропан (отн%)',
+          key: 'propane',
+          dataIndex: 'propane',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'С4 бутан (отн%)',
+          key: 'butane',
+          dataIndex: 'butane',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        },
+        {
+          title: 'С5 пентан (отн%)',
+          key: 'pentane',
+          dataIndex: 'pentane',
+          align: 'center',
+          className: 'lightpurple-background',
+          editable: true
+        }
+      ]
+    },
+    {
+      title: 'Мех. скорость',
+      key: 'mechanicalSpeed',
+      dataIndex: 'mechanicalSpeed',
+      align: 'center',
+      className: 'yellow-background',
+      editable: true
+    },
+    {
+      title: 'Предварительное заключение о насыщении по ГК',
+      key: 'preliminaryConclusion',
+      dataIndex: 'preliminaryConclusion',
+      align: 'center',
+      className: 'lightorange-background',
+      editable: true
+    },
+    {
+      title: 'Действие',
+      dataIndex: 'action',
+      align: 'center',
+      width: 150,
+      className: 'small-font',
+      render: (_, row) => {
+        const editable = isEditing(row);
+        return editable ? (
+          <span>
+            <a
+              href="javascript:;"
+              onClick={() => save(row.key)}
+              style={{ marginRight: 8 }}
+            >
+              Сохранить
+            </a>
+            <Popconfirm style={{width: '100px'}} title={<span>Отменить<br />редактирование?</span>} onConfirm={cancel}>
+              <a>Отменить</a>
+            </Popconfirm>
+          </span>
+        ) : (
+          <Typography.Link disabled={editingKey !== ''} onClick={() => edit(row)}>
+            Редактировать
+          </Typography.Link>
+        );
+      },
+    }
+  ];
+
+  const mapColumns = (col) => {
+    if(col.children)
+      col.children = col.children.map(mapColumns)
+
+    if (!col.editable) {
+      return col;
+    }
+
+    return {
+      ...col,
+      onCell: (row) => ({
+        row,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editing: isEditing(row)
+      }),
+    };
+  }
+
+  const mergedColumns = columns.map(mapColumns);
+  
+  const edit = (row) => {
+    form.setFieldsValue({
+      ...row
+    });
+    setEditingKey(row.key);
+  };
+  
+  const cancel = () => {
+    setEditingKey('');
+  };
+  
+  const save = async (key) => {
+    try {
+      const row = await form.validateFields();
+      const newData = [...data];
+      const index = newData.findIndex((item) => key === item.key);
+  
+      if (index > -1) {
+        const item = newData[index];
+        newData.splice(index, 1, { ...item, ...row });
+        setData(newData);
+        setEditingKey('');
+      } else {
+        newData.push(row);
+        setData(newData);
+        setEditingKey('');
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+
   return (<>
-    <Table
-      columns={columns}
-      dataSource={data}
-      size={'small'}
-      bordered={true}
-      pagination={false}
-    />
-    <div>&nbsp;</div>
-    <p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
+    <Form form={form} component={false}>
+      <Table
+        components={{
+          body: {
+            cell: EditableCell,
+          },
+        }}
+        columns={mergedColumns}
+        dataSource={data}
+        size={'small'}
+        bordered={true}
+        pagination={false}
+      />
+    </Form>
   </>
   )
 }
\ No newline at end of file
diff --git a/src/pages/LastData.jsx b/src/pages/LastData.jsx
index 11bf595..0a90650 100644
--- a/src/pages/LastData.jsx
+++ b/src/pages/LastData.jsx
@@ -22,13 +22,17 @@ export default function LastData() {
         title='Последние показатели бурового раствора'
         centered
         visible={tableVisible}
-        onOk={() => setCementTableVisible(false)}
         onCancel={() => setCementTableVisible(false)}
         width={2000}
-        okText='Ок'
-        cancelText='Отмена'
+        footer={[
+          <Button key="back" onClick={() => setCementTableVisible(false)}>
+            Закрыть
+          </Button>
+        ]}
       >
         <CementFluid/>
+        <div>&nbsp;</div>
+        <p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
       </Modal>
       <Button type="primary" onClick={() => setTableSludgeVisible(true)} style={{marginLeft: "5px"}}>
         Шламограмма
@@ -37,13 +41,17 @@ export default function LastData() {
         title='Шламограмма'
         centered
         visible={tableSludgeVisible}
-        onOk={() => setTableSludgeVisible(false)}
         onCancel={() => setTableSludgeVisible(false)}
         width={2000}
-        okText='Ок'
-        cancelText='Отмена'
+        footer={[
+          <Button key="back" onClick={() => setTableSludgeVisible(false)}>
+            Закрыть
+          </Button>
+        ]}
       >
         <SludgeDiagram/>
+        <div>&nbsp;</div>
+        <p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
       </Modal>
       <Button type="primary" onClick={() => setTableNNBVisible(true)} style={{marginLeft: "5px"}}>
         ННБ
@@ -52,13 +60,17 @@ export default function LastData() {
         title='ННБ'
         centered
         visible={tableNNBVisible}
-        onOk={() => setTableNNBVisible(false)}
         onCancel={() => setTableNNBVisible(false)}
         width={2000}
-        okText='Ок'
-        cancelText='Отмена'
+        footer={[
+          <Button key="back" onClick={() => setTableNNBVisible(false)}>
+            Закрыть
+          </Button>
+        ]}
       >
         <Nnb/>
+        <div>&nbsp;</div>
+        <p style={{textAlign: "right"}}><b>{new Date().toLocaleString()}</b></p>
       </Modal>
       <Button type="primary" onClick={() => setDispositionVisible(true)} style={{marginLeft: "5px"}}>
         Распоряжение
diff --git a/src/pages/Well.jsx b/src/pages/Well.jsx
index 60184b6..f8ac02b 100644
--- a/src/pages/Well.jsx
+++ b/src/pages/Well.jsx
@@ -7,6 +7,7 @@ import Report from "../pages/Report";
 import Analysis from "../pages/Analysis";
 import WellAnalysis from "../pages/WellAnalysis";
 import TelemetryView from "../pages/TelemetryView";
+import MenuDocuments from "../components/MenuDocuments";
 import WellStat from "./WellStat";
 
 const { Content } = Layout
diff --git a/src/styles/App.less b/src/styles/App.less
index 664e679..a7f8b85 100644
--- a/src/styles/App.less
+++ b/src/styles/App.less
@@ -65,6 +65,10 @@ html {
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
+.small-font {
+  font-size: 12px;
+}
+
 .yellow-background {
   background-color: #FFFF99 !important;
 }
@@ -81,6 +85,15 @@ html {
   background-color: #FFCC99 !important;
 }
 
+.ph-2 {
+  padding: 2px 10px;
+}
+
+.mh-2 {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
 .sheet{
   padding: 5px 24px;
   min-height: 280px;