CF2-6 Добавлена страница формирования отчёта. Добавлены элементы.

package-lock.json

@@ -18,6 +18,7 @@
         "chartjs-plugin-datalabels": "^2.0.0-beta.1",
         "craco-less": "^1.17.1",
         "date-fns": "^2.20.0",
+        "moment": "^2.29.1",
         "react": "^17.0.2",
         "react-datepicker": "^3.8.0",
         "react-dom": "^17.0.2",

package.json

@@ -14,6 +14,7 @@
     "chartjs-plugin-datalabels": "^2.0.0-beta.1",
     "craco-less": "^1.17.1",
     "date-fns": "^2.20.0",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-datepicker": "^3.8.0",
     "react-dom": "^17.0.2",

src/components/charts/ChartDepth.jsx

@@ -1,6 +1,6 @@
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 
-const defaoultOptionsDeepLabels = {
+const defaultOptionsDepthLabels = {
     borderWidth: 1,
     borderColor: black,
     borderRadius: 4,

src/pages/Archive.jsx

@@ -1,5 +1,5 @@
 
 
-export default function Archive(props){
+export default function Archive(props) {
-    return(<h2>Архив</h2>)
+  return (<h2>Архив</h2>)
-  }
+}

src/pages/Files.jsx

@@ -1,3 +1,3 @@
-export default function Files(props){
+export default function Files(props) {
-  return(<h2>Файлы</h2>)
+  return (<h2>Файлы</h2>)
 }

src/pages/Report.jsx

@@ -1,32 +1,98 @@
 import React, { useState } from "react";
-import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
+import {
-import ru from 'date-fns/locale/ru';
+  DatePicker,
-
+  Radio,
-import "react-datepicker/dist/react-datepicker.css";
+  ConfigProvider,
+  Button,
+  Select,
+  Checkbox,
+  Pagination
+} from 'antd';
+import 'moment/locale/ru';
+import locale from 'antd/lib/locale/ru_RU';
 
 
-registerLocale('ru', ru)
+const { RangePicker } = DatePicker;
+const { Option } = Select;
 
-export default function Report(props){
+
-    const PeriodOfTime = () => {
+// Расширение файла для составленного рапорта
+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 (
-          <DatePicker 
-          selected={startDate} 
-          onChange={date => setStartDate(date)}
-          locale='ru'
-          />
-        );
-      };
 
-    return(<>
+  return (
-    <h2>Рапорт</h2>
+    <ConfigProvider locale={locale}>
-    <h3>Выбор за период времени и расширение файла</h3>
+      <RangePicker
-    <select>
+        showTime
-        <option>las</option>
+      />
-        <option>pdf</option>
+    </ConfigProvider>
-    </select>
+  )
-    <PeriodOfTime />
+}
+
+// Выбор содержимого
+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 дня до