fix ModalTicketToReport

src/components/Modal/Tracker/ModalTicketToReport/ModalTicketToReport.jsx

@@ -2,7 +2,6 @@ import { format } from "date-fns";
 import React, { useEffect, useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { useNavigate } from "react-router";
 
 import { apiRequest } from "@api/request";
 
@@ -14,10 +13,9 @@ import "./modalTicketToReport.scss";
 
 const ModalTicketToReport = ({ show, onClose, additionalData }) => {
   const [date, setDate] = useState(new Date());
-  const [inputValue, setInputValue] = useState(0);
+  const [inputValue, setInputValue] = useState(1);
   const [taskDescription, setTaskDescription] = useState("");
 
-  const navigate = useNavigate();
   const { showNotification } = useNotification();
 
   useEffect(() => {
@@ -33,7 +31,9 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
 
   useEffect(() => {
     const hoursSpent = additionalData.task.hours_spent;
+    if (hoursSpent !== 0) {
       setInputValue(hoursSpent);
+    }
   }, [additionalData.task.hours_spent]);
 
   const handleSubmit = async () => {
@@ -64,9 +64,15 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
               text: "Отчет успешно создан",
               type: "true"
             });
+            return true;
           })
-          .catch((error) => {
-            console.error("Error:", error);
+          .catch(() => {
+            showNotification({
+              show: true,
+              text: "Error",
+              type: "error"
+            });
+            return false;
           });
       })
       .catch((error) => {
@@ -74,15 +80,6 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
       });
   };
 
-  const toTheReport = async () => {
-    const success = await handleSubmit();
-    if (success) {
-      navigate(
-        `/profile/calendar/view/${additionalData.created_at}/${additionalData.user_id}`
-      );
-    }
-  };
-
   const handleInputChange = (e) => {
     const value = Number(e.target.value);
     if (value !== 0) {
@@ -101,6 +98,7 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
       >
         <div className="modal-report-close" onClick={onClose}></div>
         <h2>Выгрузка в отчет</h2>
+        <div className="modal-report-form">
           <div className="modal-report-date-picker">
             <label htmlFor="date-picker">Дата отчета:</label>
             <DatePicker
@@ -120,6 +118,7 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
               onChange={handleInputChange}
             />
           </label>
+        </div>
 
         <div className="modal-report__buttons">
           <BaseButton
@@ -128,12 +127,6 @@ const ModalTicketToReport = ({ show, onClose, additionalData }) => {
           >
             Выгрузить в отчет
           </BaseButton>
-          <BaseButton
-            styles={`button-add add-person-btn ${show ? "" : "disable"}`}
-            onClick={toTheReport}
-          >
-            Выгрузить и перейти в отчет
-          </BaseButton>
         </div>
       </div>
     </div>

src/components/Modal/Tracker/ModalTicketToReport/modalTicketToReport.scss

@@ -22,12 +22,15 @@
     padding: 20px;
     border-radius: 5px;
     position: relative;
-    max-width: 600px;
-    height: 500px;
-    width: 100%;
+    width: 450px;
+    height: 300px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
+    @media (max-width: 880px) {
+      width: 300px;
+    }
   }
 
   &-close {
@@ -59,17 +62,24 @@
     }
   }
 
-  &-date-picker {
-    // .datePicker {
-    //   visibility: hidden;
-    //   height: 0;
-    //   padding: 0;
-    //   width: 0;
-    //   position: absolute;
-    // }
+  &-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 40px;
 
-    .react-datepicker-wrapper {
-      //   position: absolute;
+    @media (max-width: 880px) {
+      flex-direction: column;
+      row-gap: 20px;
+    }
+  }
+
+  &-date-picker {
+    display: flex;
+    flex-direction: column;
+
+    label {
+      margin: 0;
     }
 
     .react-datepicker {
@@ -78,14 +88,7 @@
     }
 
     .react-datepicker-popper {
-      top: -90px !important;
-      left: 250px !important;
       z-index: 10;
-
-      @media (max-width: 880px) {
-        left: 0 !important;
-        top: -15px !important;
-      }
     }
 
     .react-datepicker__current-month {
@@ -155,7 +158,7 @@
   &-input-time {
     display: flex;
     flex-direction: column;
-    width: 30%;
+    margin: 0;
   }
 
   &__buttons {