asb_cloud_front/src/pages/LastData.jsx

import {Button, Modal, Checkbox } from "antd";
import {CementFluid} from "../components/CementFluid";
import {useState} from "react";
import {SludgeDiagram} from "../components/SludgeDiagram";
import {Nnb} from "../components/Nnb"
import Disposition from "../components/Disposition";


export default function LastData() {
  const [tableVisible, setCementTableVisible] = useState(false)
  const [tableSludgeVisible, setTableSludgeVisible] = useState(false)
  const [tableNNBVisible, setTableNNBVisible] = useState(false)
  const [dispositionVisible, setDispositionVisible] = useState(false)

  return (
    <>
      <div>&nbsp;</div>
      <Button type="primary" onClick={() => setCementTableVisible(true)}>
        Последний замер бурового раствора
      </Button>
      <Modal
        title='Последние показатели бурового раствора'
        centered
        visible={tableVisible}
        onOk={() => setCementTableVisible(false)}
        onCancel={() => setCementTableVisible(false)}
        width={2000}
        okText='Ок'
        cancelText='Отмена'
      >
        <CementFluid/>
      </Modal>
      <Button type="primary" onClick={() => setTableSludgeVisible(true)} style={{marginLeft: "5px"}}>
        Шламограмма
      </Button>
      <Modal
        title='Шламограмма'
        centered
        visible={tableSludgeVisible}
        onOk={() => setTableSludgeVisible(false)}
        onCancel={() => setTableSludgeVisible(false)}
        width={2000}
        okText='Ок'
        cancelText='Отмена'
      >
        <SludgeDiagram/>
      </Modal>
      <Button type="primary" onClick={() => setTableNNBVisible(true)} style={{marginLeft: "5px"}}>
        ННБ
      </Button>
      <Modal
        title='ННБ'
        centered
        visible={tableNNBVisible}
        onOk={() => setTableNNBVisible(false)}
        onCancel={() => setTableNNBVisible(false)}
        width={2000}
        okText='Ок'
        cancelText='Отмена'
      >
        <Nnb/>
      </Modal>
      <Button type="primary" onClick={() => setDispositionVisible(true)} style={{marginLeft: "5px"}}>
        Распоряжение
      </Button>
      <Modal
        title='Распоряжение'
        centered
        visible={dispositionVisible}
        onOk={() => setDispositionVisible(false)}
        onCancel={() => setDispositionVisible(false)}
        width={850}
        okText='Ок'
        cancelText='Отмена'
        footer={[
          <Checkbox style={{marginRight: '10px'}}>Принять распоряжение</Checkbox>,
          <Button key="submit" type="secondary"
                  onClick={() => setDispositionVisible(false)}>
            Отмена
          </Button>,
          <Button key="submit" type="primary"
                  onClick={() => setDispositionVisible(false)}>
            Ок
          </Button>
        ]}
      >
        <Disposition/>
      </Modal>
    </>)
}