From 3a832cc78d60ae2fe6dca82039f7e0bbd4563f02 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Tue, 10 Oct 2023 14:22:43 +0300
Subject: [PATCH 1/5] tracker fix

---
 .../Tracker/TicketFullScreen/TicketFullScreen.jsx      |  6 +++---
 .../Modal/Tracker/TrackerModal/trackerModal.scss       |  2 +-
 src/pages/ProjectTracker/ProjectTracker.js             |  6 +++---
 src/pages/Tracker/Tracker.js                           | 10 +++++-----
 src/pages/Tracker/tracker.scss                         |  4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index bc5162e8..fd50c8be 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -536,9 +536,6 @@ export const TicketFullScreen = () => {
                   ></TrackerModal>
 
                   <div className="tasks__head__persons">
-                    {projectInfo.projectUsers?.length > 3 && (
-                      <span className="countPersons">+1...</span>
-                    )}
                     <div className="projectPersons">
                       {projectInfo.projectUsers?.length &&
                         projectInfo.projectUsers.slice(0, 3).map((person) => {
@@ -555,6 +552,9 @@ export const TicketFullScreen = () => {
                           );
                         })}
                     </div>
+                    {projectInfo.projectUsers?.length > 3 && (
+                        <span className="countPersons">+1</span>
+                    )}
                     <span
                       className="addPerson"
                       onClick={() => {
diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
index 8ff8f335..76e26246 100644
--- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
+++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
@@ -541,7 +541,7 @@
 .exit {
   cursor: pointer;
   position: absolute;
-  top: 15px;
+  top: 36px;
   right: 20px;
   width: 13px;
   height: 13px;
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index e7313046..99a7ff16 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -368,9 +368,6 @@ export const ProjectTracker = () => {
                         : "tasks__head__persons noProjectUsers"
                     }
                   >
-                    {projectBoard.projectUsers?.length > 3 && (
-                      <span className="countPersons">+1...</span>
-                    )}
                     {Boolean(projectBoard.projectUsers?.length) && (
                       <div className="projectPersons">
                         {projectBoard.projectUsers.slice(0, 3).map((person) => {
@@ -388,6 +385,9 @@ export const ProjectTracker = () => {
                         })}
                       </div>
                     )}
+                    {projectBoard.projectUsers?.length > 3 && (
+                        <span className="countPersons">+1</span>
+                    )}
                     <span
                       className="addPerson"
                       onClick={() => {
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index 84b95e3a..8b99fc5e 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -70,8 +70,8 @@ export const Tracker = () => {
     apiRequest(
       `/task/get-user-tasks?user_id=${localStorage.getItem("id")}`
     ).then((el) => {
-      const allTasks = el.filter((item) => item.status !== 0);
-      const completedTasks = el.filter((item) => item.status === 0);
+      const allTasks = el ? el.filter((item) => item.status !== 0) : [];
+      const completedTasks = el ? el.filter((item) => item.status === 0) : [];
       setAllTasks(allTasks);
       setFilteredAllTasks(allTasks);
       setAllCompletedTasks(completedTasks);
@@ -178,7 +178,7 @@ export const Tracker = () => {
 
             {loader && <Loader style="green" />}
 
-            {Boolean(projects.length) &&
+            {projects && Boolean(projects.length) &&
               !loader &&
               projects.map((project, index) => {
                 return project.status !== 10 ? (
@@ -187,7 +187,7 @@ export const Tracker = () => {
                   ""
                 );
               })}
-            {(!Boolean(projects.length) ||
+            {typeof projects === "object" && (!Boolean(projects.length) ||
               !Boolean(
                 projects.filter((project) => project.status !== 10).length
               )) &&
@@ -215,7 +215,7 @@ export const Tracker = () => {
                   </div>
                 </div>
               )}
-            {Boolean(projects.length) && !loader && (
+            {projects && Boolean(projects.length) && !loader && (
               <>
                 <BaseButton
                   styles="createProjectBtn"
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss
index 7ba44dba..857413a2 100644
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -321,7 +321,7 @@
             .projectPersons {
               display: flex;
               position: relative;
-              left: -10px;
+              left: 5px;
               img {
                 position: relative;
                 display: flex;
@@ -358,7 +358,7 @@
               color: #252c32;
               border: 1px solid #dde2e4;
               background: white;
-              left: -6px;
+              left: -20px;
             }
 
             .addPerson {

From b16888fdb477af1c074c276f26748db7a863f8dc Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Tue, 10 Oct 2023 16:31:40 +0300
Subject: [PATCH 2/5] calendar range days

---
 .../Calendar/calendarComponent.scss           | 87 ++++++-----------
 .../TicketFullScreen/TicketFullScreen.jsx     |  2 +-
 .../ProfileCalendarComponent.jsx              | 96 ++++++++++++-------
 src/pages/ProjectTracker/ProjectTracker.js    |  2 +-
 src/pages/Tracker/Tracker.js                  | 12 ++-
 src/utils/helper.js                           |  6 +-
 6 files changed, 101 insertions(+), 104 deletions(-)

diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss
index ec3f0358..3e43059f 100644
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@@ -243,6 +243,26 @@
   }
 }
 
+.selectDays {
+  border-style: dashed !important;
+
+  &:hover {
+    background-color: #edf1ff !important;
+  }
+}
+
+.selectedDay {
+  background-color: #edf1ff !important;
+
+  &:hover {
+    background-color: #edf1ff !important;
+  }
+}
+
+.disable {
+  pointer-events: none;
+}
+
 .before {
   background-color: #e5f9b6 !important;
 }
@@ -272,66 +292,6 @@
   font-weight: 500;
   position: relative;
 
-  .react-datepicker-wrapper {
-    display: none;
-  }
-
-  .react-datepicker__tab-loop {
-    position: absolute;
-    top: 50px;
-  }
-
-  .react-datepicker-popper {
-    transform: none !important;
-  }
-
-  .datePicker {
-    visibility: hidden;
-    height: 0;
-    padding: 0;
-    width: 0;
-    position: absolute;
-  }
-
-  .react-datepicker {
-    border: 1px solid #398208;
-  }
-
-  .react-datepicker-popper {
-    top: -15px !important;
-  }
-
-  .react-datepicker__current-month {
-    font-size: 14px;
-    font-family: "LabGrotesque", sans-serif;
-    text-transform: capitalize;
-  }
-
-  .react-datepicker__header {
-    padding: 5px 0 10px;
-    border-bottom: 1px solid #398208;
-  }
-
-  .react-datepicker__day {
-    font-size: 14px;
-    width: 35px;
-    font-family: "LabGrotesque", sans-serif;
-  }
-
-  .react-datepicker__day-name {
-    font-size: 14px;
-    width: 35px;
-    font-family: "LabGrotesque", sans-serif;
-  }
-
-  .react-datepicker__triangle {
-    transform: translate(140px, 0px) !important;
-
-    &:before {
-      border-bottom-color: #398208 !important;
-    }
-  }
-
   .select {
     border-radius: 5px;
     border: 1px solid #c4c4c4;
@@ -341,4 +301,11 @@
     text-align: center;
     min-width: 350px;
   }
+
+  .close {
+    cursor: pointer;
+    margin-left: 8px;
+    width: 14px;
+    height: 14px;
+  }
 }
diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index fd50c8be..7a7f38e6 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -553,7 +553,7 @@ export const TicketFullScreen = () => {
                         })}
                     </div>
                     {projectInfo.projectUsers?.length > 3 && (
-                        <span className="countPersons">+1</span>
+                      <span className="countPersons">+1</span>
                     )}
                     <span
                       className="addPerson"
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
index cdef8180..52e6a4a9 100644
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
@@ -1,9 +1,6 @@
-import ru from "date-fns/locale/ru";
 import moment from "moment";
 import "moment/locale/ru";
 import React, { useEffect, useState } from "react";
-import DatePicker, { registerLocale } from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
 import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
 
@@ -30,8 +27,7 @@ import ShortReport from "@components/ShortReport/ShortReport";
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import calendarIcon from "assets/icons/calendar.svg";
 import rectangle from "assets/images/rectangle__calendar.png";
-
-registerLocale("ru", ru);
+import close from "assets/icons/closeProjectPersons.svg";
 
 // eslint-disable-next-line react/display-name
 export const ProfileCalendarComponent = React.memo(
@@ -42,13 +38,17 @@ export const ProfileCalendarComponent = React.memo(
     const [calendar, setCalendar] = useState([]);
     const [month, setMonth] = useState("");
     const [shortReport, setShortReport] = useState(false);
-    const [startDate, setStartDate] = useState(new Date());
+    const [startDate, setStartDate] = useState(null);
     const [endDate, setEndDate] = useState(null);
-    const [datePickerOpen, setDatePickerOpen] = useState(false);
+    const [startRangeDays, setStartRangeDays] = useState(false)
     const [totalRangeHours, setTotalRangeHours] = useState(0);
+    const [selectedRangeDays, setSelectedRangeDays] = useState({})
 
     useEffect(() => {
       setCalendar(calendarHelper(value));
+      calendarHelper(value).map((array) => {
+          setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false}))
+      })
     }, [value]);
 
     useEffect(() => {
@@ -103,10 +103,8 @@ export const ProfileCalendarComponent = React.memo(
       return value.clone().add(1, "month");
     }
 
-    function reportsByDate(start, end) {
-      const requestDates = `fromDate=${getCorrectYYMMDD(
-        start
-      )}&toDate=${getCorrectYYMMDD(end)}`;
+    function reportsByDate(endDay) {
+      const requestDates = `fromDate=${getCorrectYYMMDD(startDate._d)}&toDate=${getCorrectYYMMDD(endDay._d)}`;
       apiRequest(
         `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
           "cardId"
@@ -124,6 +122,36 @@ export const ProfileCalendarComponent = React.memo(
       });
     }
 
+    function rangeDays (day) {
+        if (!startDate) {
+            setStartDate(day)
+        } else {
+            setEndDate(day)
+            reportsByDate(day)
+        }
+    }
+
+    function onMouseRangeDays (day) {
+        let selectRange = {}
+        for (let curDay in selectedRangeDays) {
+            if (day > startDate && new Date(curDay) > startDate && new Date(curDay) < day) {
+                selectRange[curDay] = true
+            } else {
+                selectRange[curDay] = false
+            }
+        }
+        setSelectedRangeDays(selectRange)
+    }
+
+    function resetRangeDays () {
+        setStartDate(null)
+        setEndDate(null)
+        setTotalRangeHours(0)
+        calendarHelper(value).map((array) => {
+            setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false}))
+        })
+    }
+
     return (
       <div className="calendar-component">
         <div className="calendar-component__header">
@@ -183,16 +211,27 @@ export const ProfileCalendarComponent = React.memo(
               week.map((day) => (
                 <button
                   onClick={() => {
-                    dispatch(setReportDate(day));
-                    setShortReport(true);
-                    dispatch(setSendRequest(true));
+                    if(startRangeDays) {
+                        rangeDays(day)
+                    } else {
+                        dispatch(setReportDate(day));
+                        setShortReport(true);
+                        dispatch(setSendRequest(true));
+                    }
+                  }}
+                  onMouseEnter={() => {
+                      if (startRangeDays && startDate && !endDate) {
+                          onMouseRangeDays(day)
+                      }
                   }}
                   key={day}
-                  className={dayStyles(day)}
+                  className={startRangeDays ?
+                      `selectDays ${startDate === day || endDate === day ? 'selectedDay' : ''} ${endDate ? 'disable' : ''} ${selectedRangeDays[day] ? 'selectedDay' : ''}`
+                      : dayStyles(day)}
                   name={day.format("dddd")}
                   id="btn"
                 >
-                  <Link to={correctRoute(day)}>
+                  <Link to={startRangeDays ? '#' : correctRoute(day)}>
                     <img
                       className={"calendar__icon"}
                       src={calendarIcon}
@@ -209,35 +248,24 @@ export const ProfileCalendarComponent = React.memo(
           <span
             className="select"
             onClick={() => {
-              setDatePickerOpen(!datePickerOpen);
+                if (startRangeDays) resetRangeDays()
+                setStartRangeDays(!startRangeDays)
             }}
           >
             {endDate
               ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
               : "Выбрать диапазон"}
           </span>
-          <DatePicker
-            selected={startDate}
-            open={datePickerOpen}
-            locale="ru"
-            startDate={startDate}
-            endDate={endDate}
-            onChange={(dates) => {
-              const [start, end] = dates;
-              setStartDate(start);
-              setEndDate(end);
-              if (end) {
-                setDatePickerOpen(false);
-                reportsByDate(start, end);
-              }
-            }}
-            selectsRange
-          />
           <span>
             {totalRangeHours
               ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
               : "0 часов"}
           </span>
+            {endDate &&
+                <img className='close' src={close} alt='close' onClick={() => {
+                    resetRangeDays()
+                }} />
+            }
         </div>
         {shortReport && <ShortReport />}
       </div>
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index 99a7ff16..19764778 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -386,7 +386,7 @@ export const ProjectTracker = () => {
                       </div>
                     )}
                     {projectBoard.projectUsers?.length > 3 && (
-                        <span className="countPersons">+1</span>
+                      <span className="countPersons">+1</span>
                     )}
                     <span
                       className="addPerson"
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index 8b99fc5e..5f1349e2 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -178,7 +178,8 @@ export const Tracker = () => {
 
             {loader && <Loader style="green" />}
 
-            {projects && Boolean(projects.length) &&
+            {projects &&
+              Boolean(projects.length) &&
               !loader &&
               projects.map((project, index) => {
                 return project.status !== 10 ? (
@@ -187,10 +188,11 @@ export const Tracker = () => {
                   ""
                 );
               })}
-            {typeof projects === "object" && (!Boolean(projects.length) ||
-              !Boolean(
-                projects.filter((project) => project.status !== 10).length
-              )) &&
+            {typeof projects === "object" &&
+              (!Boolean(projects.length) ||
+                !Boolean(
+                  projects.filter((project) => project.status !== 10).length
+                )) &&
               !loader && (
                 <div className="no-projects">
                   <div className="no-projects__createNew">
diff --git a/src/utils/helper.js b/src/utils/helper.js
index a1bd4fe3..aff836ec 100644
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@@ -65,9 +65,9 @@ export function getCorrectRequestDate(date) {
 }
 
 export function getCorrectYYMMDD(date) {
-  const yyyy = String(date.getUTCFullYear());
-  const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
-  const dd = String(date.getUTCDate()).padStart(2, "0");
+  const yyyy = String(date.getFullYear());
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
   return `${yyyy}-${mm}-${dd}`;
 }
 

From 644c89f3765dc7dae83ef8c08eddd878f6801e5f Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Tue, 10 Oct 2023 16:32:30 +0300
Subject: [PATCH 3/5] calendar range days

---
 .../ProfileCalendarComponent.jsx              | 123 +++++++++++-------
 1 file changed, 74 insertions(+), 49 deletions(-)

diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
index 52e6a4a9..abdf03f2 100644
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
@@ -26,8 +26,8 @@ import ShortReport from "@components/ShortReport/ShortReport";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import calendarIcon from "assets/icons/calendar.svg";
-import rectangle from "assets/images/rectangle__calendar.png";
 import close from "assets/icons/closeProjectPersons.svg";
+import rectangle from "assets/images/rectangle__calendar.png";
 
 // eslint-disable-next-line react/display-name
 export const ProfileCalendarComponent = React.memo(
@@ -40,15 +40,18 @@ export const ProfileCalendarComponent = React.memo(
     const [shortReport, setShortReport] = useState(false);
     const [startDate, setStartDate] = useState(null);
     const [endDate, setEndDate] = useState(null);
-    const [startRangeDays, setStartRangeDays] = useState(false)
+    const [startRangeDays, setStartRangeDays] = useState(false);
     const [totalRangeHours, setTotalRangeHours] = useState(0);
-    const [selectedRangeDays, setSelectedRangeDays] = useState({})
+    const [selectedRangeDays, setSelectedRangeDays] = useState({});
 
     useEffect(() => {
       setCalendar(calendarHelper(value));
       calendarHelper(value).map((array) => {
-          setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false}))
-      })
+        setSelectedRangeDays((prevState) => ({
+          ...prevState,
+          [array[0]]: false,
+        }));
+      });
     }, [value]);
 
     useEffect(() => {
@@ -104,7 +107,9 @@ export const ProfileCalendarComponent = React.memo(
     }
 
     function reportsByDate(endDay) {
-      const requestDates = `fromDate=${getCorrectYYMMDD(startDate._d)}&toDate=${getCorrectYYMMDD(endDay._d)}`;
+      const requestDates = `fromDate=${getCorrectYYMMDD(
+        startDate._d
+      )}&toDate=${getCorrectYYMMDD(endDay._d)}`;
       apiRequest(
         `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
           "cardId"
@@ -122,34 +127,41 @@ export const ProfileCalendarComponent = React.memo(
       });
     }
 
-    function rangeDays (day) {
-        if (!startDate) {
-            setStartDate(day)
+    function rangeDays(day) {
+      if (!startDate) {
+        setStartDate(day);
+      } else {
+        setEndDate(day);
+        reportsByDate(day);
+      }
+    }
+
+    function onMouseRangeDays(day) {
+      let selectRange = {};
+      for (let curDay in selectedRangeDays) {
+        if (
+          day > startDate &&
+          new Date(curDay) > startDate &&
+          new Date(curDay) < day
+        ) {
+          selectRange[curDay] = true;
         } else {
-            setEndDate(day)
-            reportsByDate(day)
+          selectRange[curDay] = false;
         }
+      }
+      setSelectedRangeDays(selectRange);
     }
 
-    function onMouseRangeDays (day) {
-        let selectRange = {}
-        for (let curDay in selectedRangeDays) {
-            if (day > startDate && new Date(curDay) > startDate && new Date(curDay) < day) {
-                selectRange[curDay] = true
-            } else {
-                selectRange[curDay] = false
-            }
-        }
-        setSelectedRangeDays(selectRange)
-    }
-
-    function resetRangeDays () {
-        setStartDate(null)
-        setEndDate(null)
-        setTotalRangeHours(0)
-        calendarHelper(value).map((array) => {
-            setSelectedRangeDays((prevState) => ({...prevState, [array[0]]: false}))
-        })
+    function resetRangeDays() {
+      setStartDate(null);
+      setEndDate(null);
+      setTotalRangeHours(0);
+      calendarHelper(value).map((array) => {
+        setSelectedRangeDays((prevState) => ({
+          ...prevState,
+          [array[0]]: false,
+        }));
+      });
     }
 
     return (
@@ -211,27 +223,35 @@ export const ProfileCalendarComponent = React.memo(
               week.map((day) => (
                 <button
                   onClick={() => {
-                    if(startRangeDays) {
-                        rangeDays(day)
+                    if (startRangeDays) {
+                      rangeDays(day);
                     } else {
-                        dispatch(setReportDate(day));
-                        setShortReport(true);
-                        dispatch(setSendRequest(true));
+                      dispatch(setReportDate(day));
+                      setShortReport(true);
+                      dispatch(setSendRequest(true));
                     }
                   }}
                   onMouseEnter={() => {
-                      if (startRangeDays && startDate && !endDate) {
-                          onMouseRangeDays(day)
-                      }
+                    if (startRangeDays && startDate && !endDate) {
+                      onMouseRangeDays(day);
+                    }
                   }}
                   key={day}
-                  className={startRangeDays ?
-                      `selectDays ${startDate === day || endDate === day ? 'selectedDay' : ''} ${endDate ? 'disable' : ''} ${selectedRangeDays[day] ? 'selectedDay' : ''}`
-                      : dayStyles(day)}
+                  className={
+                    startRangeDays
+                      ? `selectDays ${
+                          startDate === day || endDate === day
+                            ? "selectedDay"
+                            : ""
+                        } ${endDate ? "disable" : ""} ${
+                          selectedRangeDays[day] ? "selectedDay" : ""
+                        }`
+                      : dayStyles(day)
+                  }
                   name={day.format("dddd")}
                   id="btn"
                 >
-                  <Link to={startRangeDays ? '#' : correctRoute(day)}>
+                  <Link to={startRangeDays ? "#" : correctRoute(day)}>
                     <img
                       className={"calendar__icon"}
                       src={calendarIcon}
@@ -248,8 +268,8 @@ export const ProfileCalendarComponent = React.memo(
           <span
             className="select"
             onClick={() => {
-                if (startRangeDays) resetRangeDays()
-                setStartRangeDays(!startRangeDays)
+              if (startRangeDays) resetRangeDays();
+              setStartRangeDays(!startRangeDays);
             }}
           >
             {endDate
@@ -261,11 +281,16 @@ export const ProfileCalendarComponent = React.memo(
               ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
               : "0 часов"}
           </span>
-            {endDate &&
-                <img className='close' src={close} alt='close' onClick={() => {
-                    resetRangeDays()
-                }} />
-            }
+          {endDate && (
+            <img
+              className="close"
+              src={close}
+              alt="close"
+              onClick={() => {
+                resetRangeDays();
+              }}
+            />
+          )}
         </div>
         {shortReport && <ShortReport />}
       </div>

From 58b81195694208786f6801f685408f7ba3b34f39 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Tue, 10 Oct 2023 19:21:34 +0300
Subject: [PATCH 4/5] calendar range days

---
 src/components/ProfileCalendar/ProfileCalendar.jsx         | 7 +++++++
 .../ProfileCalendar/ProfileCalendarComponent.jsx           | 5 ++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/ProfileCalendar/ProfileCalendar.jsx b/src/components/ProfileCalendar/ProfileCalendar.jsx
index 52a863ad..446e721b 100644
--- a/src/components/ProfileCalendar/ProfileCalendar.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendar.jsx
@@ -36,11 +36,16 @@ export const ProfileCalendar = () => {
   const [reports, setReports] = useState([]);
   const [totalHours, setTotalHours] = useState(0);
   const [loader, setLoader] = useState(true);
+  const [startRangeDays, setStartRangeDays] = useState(false);
 
   function setValueHandler(value) {
     setValue(value);
   }
 
+  function toggleStartRangeDays () {
+    setStartRangeDays(!startRangeDays)
+  }
+
   useEffect(() => {
     dispatch(setRequestDate(getReports(moment())));
   }, []);
@@ -115,6 +120,8 @@ export const ProfileCalendar = () => {
                 value={value}
                 reports={reports}
                 totalHours={totalHours}
+                startRangeDays={startRangeDays}
+                toggleRangeDays={toggleStartRangeDays}
               />
             </div>
           </div>
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
index abdf03f2..b66295c9 100644
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
@@ -31,7 +31,7 @@ import rectangle from "assets/images/rectangle__calendar.png";
 
 // eslint-disable-next-line react/display-name
 export const ProfileCalendarComponent = React.memo(
-  ({ value, setValueHandler, reports, totalHours }) => {
+  ({ value, setValueHandler, reports, totalHours, startRangeDays, toggleRangeDays }) => {
     const dispatch = useDispatch();
 
     const [currentDay] = useState(moment());
@@ -40,7 +40,6 @@ export const ProfileCalendarComponent = React.memo(
     const [shortReport, setShortReport] = useState(false);
     const [startDate, setStartDate] = useState(null);
     const [endDate, setEndDate] = useState(null);
-    const [startRangeDays, setStartRangeDays] = useState(false);
     const [totalRangeHours, setTotalRangeHours] = useState(0);
     const [selectedRangeDays, setSelectedRangeDays] = useState({});
 
@@ -269,7 +268,7 @@ export const ProfileCalendarComponent = React.memo(
             className="select"
             onClick={() => {
               if (startRangeDays) resetRangeDays();
-              setStartRangeDays(!startRangeDays);
+                toggleRangeDays();
             }}
           >
             {endDate

From ff2bd020e8c5c41b794ac30249958f866f194c60 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Tue, 10 Oct 2023 19:21:46 +0300
Subject: [PATCH 5/5] calendar range days

---
 src/components/ProfileCalendar/ProfileCalendar.jsx    |  4 ++--
 .../ProfileCalendar/ProfileCalendarComponent.jsx      | 11 +++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/ProfileCalendar/ProfileCalendar.jsx b/src/components/ProfileCalendar/ProfileCalendar.jsx
index 446e721b..e29d46c0 100644
--- a/src/components/ProfileCalendar/ProfileCalendar.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendar.jsx
@@ -42,8 +42,8 @@ export const ProfileCalendar = () => {
     setValue(value);
   }
 
-  function toggleStartRangeDays () {
-    setStartRangeDays(!startRangeDays)
+  function toggleStartRangeDays() {
+    setStartRangeDays(!startRangeDays);
   }
 
   useEffect(() => {
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
index b66295c9..7d1b5229 100644
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
@@ -31,7 +31,14 @@ import rectangle from "assets/images/rectangle__calendar.png";
 
 // eslint-disable-next-line react/display-name
 export const ProfileCalendarComponent = React.memo(
-  ({ value, setValueHandler, reports, totalHours, startRangeDays, toggleRangeDays }) => {
+  ({
+    value,
+    setValueHandler,
+    reports,
+    totalHours,
+    startRangeDays,
+    toggleRangeDays,
+  }) => {
     const dispatch = useDispatch();
 
     const [currentDay] = useState(moment());
@@ -268,7 +275,7 @@ export const ProfileCalendarComponent = React.memo(
             className="select"
             onClick={() => {
               if (startRangeDays) resetRangeDays();
-                toggleRangeDays();
+              toggleRangeDays();
             }}
           >
             {endDate