asb_cloud_front/src/pages/Report.jsx

import React, { useState } from "react";
import {
  DatePicker,
  Radio,
  ConfigProvider,
  Button,
  Select,
  Checkbox,
  Pagination
} from 'antd';
import 'moment/locale/ru';
import locale from 'antd/lib/locale/ru_RU';


const { RangePicker } = DatePicker;
const { Option } = Select;


// Расширение файла для составленного рапорта
const ExeptionFileChecker = () => {
  const [value, setValue] = React.useState(1);
  const onChange = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  }

  return (<Radio.Group onChange={onChange} value={value}>
    <Radio value={1}>PDF</Radio>
    <Radio value={2}>LAS</Radio>
  </Radio.Group>
  )
}

// Выбор периода времени
const PeriodOfTime = () => {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <ConfigProvider locale={locale}>
      <RangePicker
        showTime
      />
    </ConfigProvider>
  )
}

// Выбор содержимого
const ContentSelection = () => {
  function onChange(e) {
    console.log(`checked = ${e.target.checked}`);
  }

  return (<>
    <Checkbox onChange={onChange}>Графики</Checkbox>
    <Checkbox onChange={onChange}>Сообщения</Checkbox>
  </>
  )
}

// Выбор шага графика
const GraphicStep = () => {
  function handleChange(value) {
    console.log(`selected ${value}`);
  }

  return (
    <Select defaultValue="1 minute" style={{ width: 100 }} onChange={handleChange}>
      <Option value="1 minute">1 минута</Option>
      <Option value="1 day">1 день</Option>
      <Option value="1 week">1 неделя</Option>
    </Select>
  )
}

// Экспорт рендера
export default function Report(props) {
  return (<>
    <h2>Рапорт</h2>
    <hr />
    <h3>Выбор за период времени и расширение файла</h3>
    <PeriodOfTime />
    <h3>Шаг графиков</h3>
    <GraphicStep />
    {/* <h3>Содержимое отчёта</h3>
    <ContentSelection /> */}
    <div></div>
    <ExeptionFileChecker />
    <p>*Предполагаемое колличество страниц</p>
    <hr />
    <div>
      <Button type="primary" style={{ display: 'flex', alignItems: 'center', padding: '20px', borderRadius: '5px' }}>Получить рапорт</Button>
    </div>
    
  </>
  )
}

// TODO ограничить датапикер по дате за 3 дня до