asb_cloud_front/src/pages/LastData.jsx

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


export default function LastData() {
  const [tableVisible, setTableVisible] = 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={() => setTableVisible(true)}>
        Последний замер бурового раствора
      </Button>
      <Modal
        title='Последние показатели бурового раствора'
        centered
        visible={tableVisible}
        onOk={() => setTableVisible(false)}
        onCancel={() => setTableVisible(false)}
        width={1800}
        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={1600}
        okText='Ок'
        cancelText='Отмена'
      >
        <Sludge/>
      </Modal>
      <Button type="primary" onClick={() => setTableNNBVisible(true)} style={{marginLeft: "5px"}}>
        ННБ
      </Button>
      <Modal
        title='ННБ'
        centered
        visible={tableNNBVisible}
        onOk={() => setTableNNBVisible(false)}
        onCancel={() => setTableNNBVisible(false)}
        width={1400}
        okText='Ок'
        cancelText='Отмена'
      >
        <NnbTable/>
      </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>
    </>)
}