asb_cloud_front/src/pages/Report.jsx

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

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




// Расширение файла для составленного рапорта
const ExceptionFileChecker = () => {
  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 = () => {
  function disabledDate(current) {
    return current && current < moment().subtract(3, 'days');  // Наверно, не надо)
  }
  // const [startDate, setStartDate] = useState(new Date());
  

  return (
    <ConfigProvider locale={locale}
      disabledDate>
      <RangePicker
        showTime
        disabledDate={disabledDate}
      />
    </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>
    <ExceptionFileChecker />
    <p>*Предполагаемое колличество страниц</p>
    <hr />
    <div>
      <Button type="primary" style={{
        display: 'flex',
        alignItems: 'center',
        padding: '20px',
        borderRadius: '5px'
      }}>Получить рапорт</Button>
    </div>
    
  </>
  )
}

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