diff --git a/src/pages/Report/ReportCreationNotify.jsx b/src/pages/Report/ReportCreationNotify.jsx
new file mode 100644
index 0000000..9541d43
--- /dev/null
+++ b/src/pages/Report/ReportCreationNotify.jsx
@@ -0,0 +1,30 @@
+
+import { Progress } from "antd"
+import { download } from "../../components/factory";
+import notify from '../../components/notify'
+
+export const getReportFile = async (idWell, reportName) => {
+  try {
+    await download(`/api/well/${idWell}/report/${reportName}`, reportName)
+  } catch (error) {
+    notify(`Не удалось скачать отчет ${reportName} по скважине (${idWell})`, 'error')
+    console.log(error)
+  }
+}
+
+export const ReportCreationNotify = ({idWell, progressData}) => {
+  progressData = progressData ?? {progress: 0.0, operation: 'Создание отчета', reportName: ''} 
+
+  return (
+  <>
+      <Progress percent={ progressData.progress } />
+      <br />
+      <span> { progressData.operation } </span>
+      <br />
+      <button onClick={event => {getReportFile(idWell, progressData.reportName)}}
+        download={progressData.reportName}>
+        { progressData.reportName } 
+      </button>
+  </>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/Report/index.jsx b/src/pages/Report/index.jsx
new file mode 100644
index 0000000..da6db59
--- /dev/null
+++ b/src/pages/Report/index.jsx
@@ -0,0 +1,255 @@
+import { useState, useEffect } from "react"
+import {
+  Form,
+  DatePicker,
+  Radio,
+  Button,
+  Select,
+  Table,
+  notification,
+} from "antd"
+import "moment/locale/ru"
+import moment from "moment"
+import { Subscribe } from "../../services/signalr"
+import notify from "../../components/notify"
+import LoaderPortal from "../../components/LoaderPortal"
+import { ReportService } from "../../services/api"
+import { ReportCreationNotify, getReportFile } from "./ReportCreationNotify"
+import { invokeWebApiWrapperAsync } from "../../components/factory"
+
+const { RangePicker } = DatePicker
+const { Option } = Select
+
+const timePeriodNames = [
+  { label: "1 секунда", value: 1 },
+  { label: "10 секунд", value: 10 },
+  { label: "1 минута", value: 60 },
+  { label: "5 минут", value: 300 },
+  { label: "30 минут", value: 1800 },
+  { label: "1 час", value: 3600 },
+  { label: "6 часов", value: 21600 },
+  { label: "12 часов", value: 43200 },
+  { label: "1 день", value: 86400 },
+  { label: "1 неделя", value: 604800 },
+]
+
+const imgPaths = {
+  ".pdf": "/images/pdf.png",
+  ".las": "/images/las.png",
+}
+
+const dateTimeFormat = "DD.MM.YYYY hh:mm:ss"
+
+export default function Report({ idWell }) {
+  const [aviableDateRange, setAviableDateRange] = useState([moment(),moment()])
+  const [filterDateRange, setFilterDateRange] = useState([moment().subtract(1, "days"),moment(),])
+  const [step, setStep] = useState(timePeriodNames[2].value)
+  const [format, setFormat] = useState(0)
+  const [pagesCount, setPagesCount] = useState(0)
+  const [suitableReports, setSuitableReports] = useState([])
+  const [showLoader, setShowLoader] = useState(false)
+
+  const periodOptions = timePeriodNames.map((item) => (
+    <Option key={item.value} value={item.value}>
+      {item.label}
+    </Option>
+  ))
+
+  const columns = [
+    {
+      title: "",
+      dataIndex: "reportFormat",
+      key: "reportFormat",
+      render: (format) => (
+        <img src={imgPaths[format]} width="50" alt={format}></img>
+      ),
+    },
+    {
+      title: "Параметры отчета",
+      dataIndex: "reportParams",
+      key: "reportParams",
+    },
+    {
+      title: "Название отчета",
+      dataIndex: "reportName",
+      key: "reportName",
+      render: (reportName) => (
+        <Button
+          onClick={(_) => getReportFile(idWell, reportName)}
+          download={reportName}
+        >
+          {reportName}
+        </Button>
+      ),
+    },
+  ]
+
+  const handleReportCreation = async (values) => {
+    let begin = aviableDateRange[0].toISOString()
+    let end = aviableDateRange[1].toISOString()
+
+    try {
+      const idUser = localStorage["userId"]
+
+      const taskId = await ReportService.createReport(
+        idWell,
+        idUser,
+        values.step,
+        values.format,
+        begin,
+        end
+      )
+      if (!taskId) return
+
+      const handleReportProgress = (progressData) => {
+        if (progressData) {
+          notification.open({
+            key: taskId,
+            message: "Создание отчета:",
+            description: (
+              <ReportCreationNotify
+                progressData={progressData}
+              ></ReportCreationNotify>
+            ),
+            duration: 0,
+          })
+
+          if (progressData.reportName?.length) unSubscribeReportHub()
+        }
+      }
+
+      const unSubscribeReportHub = Subscribe(
+        "hubs/reports",
+        "GetReportProgress",
+        `Report_${taskId}`,
+        handleReportProgress
+      )
+    } catch (error) {
+      notify(
+        `Не удалось создать отчет по скважине (${idWell}) c 
+      ${aviableDateRange[0].format("DD.MM.YYYY hh:mm:ss")} по 
+      ${aviableDateRange[1].format("DD.MM.YYYY hh:mm:ss")}`,
+        "error"
+      )
+      console.log(error)
+    }
+  }
+
+  const disabledDate = (current) => {
+    return current < aviableDateRange[0] || current > aviableDateRange[1]
+  }
+  
+  const updateSuitableReports = (suitableReports) => {
+    const reports = suitableReports?.map(report => {
+      const creationDate = new Date(report.begin).toLocaleString()
+      const begin = new Date(report.begin).toLocaleString()
+      const end = new Date(report.end).toLocaleString()
+      const step = timePeriodNames[report.step]
+      const reportParams = `Дата создания: ${creationDate}, Данные от ${begin} до ${end}, Шаг: ${step}`
+      return {
+        key: report.id,
+        reportFormat: report.format,
+        reportParams: reportParams,
+        reportName: report.name,
+      }})
+    setSuitableReports(reports??[])
+  }
+
+  const updateAviableDatesRange = (aviableDatesRange) =>{
+    const datesRange = [
+      moment(aviableDatesRange.from),
+      moment(aviableDatesRange.to)
+    ] 
+    setAviableDateRange(datesRange)
+  }
+
+  useEffect(() => invokeWebApiWrapperAsync(async() => {
+    const aviableDatesRange = await ReportService.getReportsDateRange(idWell)
+    updateAviableDatesRange(aviableDatesRange)
+  }), [idWell])
+
+  useEffect(() => invokeWebApiWrapperAsync(async() => {
+      if(!filterDateRange || filterDateRange.length < 2)
+        return
+      const begin = filterDateRange[0].toISOString()
+      const end = filterDateRange[1].toISOString()
+      const pagesCount = await ReportService.getReportSize(idWell, step, format, begin, end)
+      setPagesCount(pagesCount)
+      const suitableReports = await ReportService.getSuitableReportsNames(idWell, step, format, begin, end)            
+      updateSuitableReports(suitableReports)
+    },
+    setShowLoader,
+    `Не удалось получить предварительные параметры отчета c 
+                ${filterDateRange[0].format(dateTimeFormat)} по 
+                ${filterDateRange[1].format(dateTimeFormat)}`
+    ), [filterDateRange, step, format, idWell])
+
+  return (
+    <LoaderPortal show={showLoader}>
+      <div className="w-100 mt-20px">
+        <Form
+          layout="vertical"
+          name="reportForm"
+          initialValues={{ remember: true }}
+          onFinish={handleReportCreation}
+        >
+          <div className={"d-flex"}>
+            <Form.Item
+              label="Диапазон дат отчета"
+              name="period"
+              initialValue={filterDateRange}
+            >
+              <RangePicker
+                disabledDate={disabledDate}
+                allowClear={false}
+                onCalendarChange={(dates) => {
+                  setFilterDateRange(dates)
+                }}
+                showTime
+              />
+            </Form.Item>
+            <Form.Item
+              label="Шаг графиков"
+              name="step"
+              initialValue={step}
+              className="ml-30px"
+            >
+              <Select onChange={setStep}>{periodOptions}</Select>
+            </Form.Item>
+            <Form.Item
+              label="Формат отчета"
+              name="format"
+              initialValue={format}
+              onChange={(e) => setFormat(e.target.value)}
+              className="ml-30px"
+            >
+              <Radio.Group>
+                <Radio.Button value={0}>PDF</Radio.Button>
+                <Radio.Button value={1}>LAS</Radio.Button>
+              </Radio.Group>
+            </Form.Item>
+            <Button
+              type="primary"
+              htmlType="submit"
+              className="mt-30px ml-30px"
+            >
+              <span>Получить рапорт</span>
+              <span className={"ml-5px"}>({pagesCount} стр.)</span>
+              <span
+                style={{ display: pagesCount > 100 ? "inline" : "none" }}
+                className={"ml-5px"}
+              >
+                !!!
+              </span>
+            </Button>
+          </div>
+        </Form>
+      </div>
+      <br />
+      <h3>Отчеты с аналогичными параметрами, доступные для скачивания:</h3>{" "}
+      <br />
+      
+      <Table dataSource={suitableReports} columns={columns} />
+    </LoaderPortal>
+  )
+}