src/components/Calendar/calendarComponent.scss

@@ -1,8 +1,12 @@
 .calendar-component {
   position: relative;
-  margin: 30px 0;
+  margin-top: 30px;
+  margin-bottom: 60px;
   background-color: #f9f9f9;
-  padding: 20px 30px;
+  padding-left: 68px;
+  padding-right: 54px;
+  padding-top: 48px;
+  padding-bottom: 40px;
   font-family: "LabGrotesque", sans-serif;
 
   &__header {
@@ -94,7 +98,7 @@
   }
 
   &__rectangle {
-    margin: 20px 0;
+    margin: 36px 0;
 
     img {
       width: 100%;
@@ -118,7 +122,7 @@
       }
     }
 
-    margin: 20px 0 20px;
+    margin-bottom: 60px;
   }
 
   &__form {
@@ -199,7 +203,8 @@
 }
 @media (max-width: 968px) {
   .calendar-component {
-    padding: 28px 10px;
+    margin-bottom: 40px;
+    padding: 28px 10px 48px 10px;
 
     &__header {
       &-box {
@@ -295,15 +300,3 @@
     height: 14px;
   }
 }
-
-@media (max-width: 575.98px) {
-  .selectDateRange {
-    font-size: 14px;
-    text-align: center;
-    column-gap: 8px;
-
-    .select {
-      padding: 4px;
-    }
-  }
-}

src/components/Calendar/calendarHelper.js

@@ -25,7 +25,6 @@ export function calendarHelper(value) {
 }
 
 export function getReports(value) {
-  // получение отчетов с видимой области
   const startDay = value
     .clone()
     .startOf("month")
@@ -57,7 +56,12 @@ export function getCreatedDate(day) {
   }
 }
 
-export const correctDay = (day) => (day < 10 ? `0${day}` : day);
+export function correctDay(day) {
+  if (day < 10) {
+    return `0${day}`;
+  }
+  return day;
+}
 
 export function currentMonth() {
   const currentMonth = moment().format("MMMM");

src/components/ProfileCalendar/ProfileCalendar.jsx

@@ -41,6 +41,18 @@ export const ProfileCalendar = () => {
   const [startRangeDays, setStartRangeDays] = useState(false);
   const [startDate, setStartDate] = useState(null);
 
+  function setValueHandler(value) {
+    setValue(value);
+  }
+
+  function setStartDateRange(date) {
+    setStartDate(date);
+  }
+
+  function toggleStartRangeDays() {
+    setStartRangeDays(!startRangeDays);
+  }
+
   useEffect(() => {
     dispatch(setRequestDate(getReports(moment())));
   }, []);
@@ -56,19 +68,14 @@ export const ProfileCalendar = () => {
       )}`
     ).then((reports) => {
       let spendTime = 0;
-
+      for (const report of reports) {
-      reports
+        report.task.map((task) => {
-        .filter(
+          if (task.hours_spent) {
-          (item) => new Date(item.created_at).getMonth() === value.month()
+            spendTime += Number(task.hours_spent);
-        )
+          }
-        .map((report) => {
-          spendTime += report.task.reduce(
-            (acc, task) => acc + task.hours_spent,
-            0
-          );
         });
-
+      }
-      setTotalHours(Math.floor(spendTime));
+      setTotalHours(spendTime);
       setReports(reports);
       setLoader(false);
     });
@@ -117,14 +124,14 @@ export const ProfileCalendar = () => {
           <div className="row calendar__wrapper">
             <div className="col-12 col-xl-12">
               <ProfileCalendarComponent
-                setValueHandler={(value) => setValue(value)}
+                setValueHandler={setValueHandler}
                 value={value}
                 reports={reports}
                 totalHours={totalHours}
                 startRangeDays={startRangeDays}
-                toggleRangeDays={() => setStartRangeDays(!startRangeDays)}
+                toggleRangeDays={toggleStartRangeDays}
                 startDate={startDate}
-                setStartDateRange={(date) => setStartDate(date)}
+                setStartDateRange={setStartDateRange}
               />
             </div>
           </div>

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -20,8 +20,7 @@ import {
   currentMonthAndDay,
   getCorrectDate,
   getReports,
-  hourOfNum,
+  hourOfNum
-  correctDay
 } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import ShortReport from "@components/ShortReport/ShortReport";
@@ -31,6 +30,7 @@ import calendarIcon from "assets/icons/calendar.svg";
 // 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(
   ({
     value,
@@ -44,6 +44,7 @@ export const ProfileCalendarComponent = React.memo(
   }) => {
     const dispatch = useDispatch();
 
+    const [currentDay] = useState(moment());
     const [calendar, setCalendar] = useState([]);
     const [month, setMonth] = useState("");
     const [shortReport, setShortReport] = useState(false);
@@ -73,8 +74,15 @@ export const ProfileCalendarComponent = React.memo(
       return day.isSame(new Date(), "day");
     }
 
+    function correctDay(day) {
+      if (day < 10) {
+        return `0${day}`;
+      }
+      return day;
+    }
+
     function dayStyles(day) {
-      if (moment() < day) return `block`;
+      if (currentDay < day) return `block`;
       for (const date of reports) {
         if (
           `${new Date(day).getFullYear()}-${correctDay(
@@ -102,9 +110,13 @@ export const ProfileCalendarComponent = React.memo(
       return "../../report";
     }
 
-    const prevMonth = () => value.clone().subtract(1, "month");
+    function prevMonth() {
+      return value.clone().subtract(1, "month");
+    }
 
-    const nextMonth = () => value.clone().add(1, "month");
+    function nextMonth() {
+      return value.clone().add(1, "month");
+    }
 
     function reportsByDate(endDay) {
       const requestDates =
@@ -121,16 +133,25 @@ export const ProfileCalendarComponent = React.memo(
         )}`
       ).then((reports) => {
         let spendTime = 0;
-        reports.map((report) => {
+        for (const report of reports) {
-          spendTime += report.task.reduce(
+          report.task.map((task) => {
-            (acc, task) => acc + task.hours_spent,
+            if (task.hours_spent) {
-            0
+              spendTime += Number(task.hours_spent);
-          );
+            }
-        });
+          });
-        setTotalRangeHours(Math.floor(spendTime));
+        }
+        setTotalRangeHours(spendTime);
       });
     }
 
+    function toggleActivePeriod() {
+      if (!activePeriod) {
+        setActivePeriod(true);
+      } else {
+        setActivePeriod(false);
+      }
+    }
+
     function rangeDays(day) {
       if (!startDate) {
         setStartDateRange(day);
@@ -287,7 +308,7 @@ export const ProfileCalendarComponent = React.memo(
             onClick={() => {
               if (startRangeDays) resetRangeDays();
               toggleRangeDays();
-              setActivePeriod(!activePeriod);
+              toggleActivePeriod();
             }}
           >
             {endDate
@@ -295,22 +316,22 @@ export const ProfileCalendarComponent = React.memo(
                 ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
                 : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
               : activePeriod
-                ? "Выберите диапазон на календаре"
+              ? "Выберите диапазон на календаре"
-                : "Выбрать диапазон"}
+              : "Выбрать диапазон"}
           </span>
           <span>
             {totalRangeHours
               ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
               : endDate
-                ? "0 часов"
+              ? "0 часов"
-                : ""}
+              : ""}
           </span>
           {endDate && (
             <BaseButton
               styles={"clear-days"}
               onClick={() => {
                 resetRangeDays();
-                setActivePeriod(false);
+                toggleActivePeriod();
                 toggleRangeDays();
               }}
             >

src/components/ReportForm/reportForm.scss

@@ -16,8 +16,8 @@
   &__content {
     background: #ffffff;
     border-radius: 12px;
-    margin: 20px 0 30px;
+    margin: 25px 0 80px;
-    padding: 20px 30px;
+    padding: 50px 40px;
 
     @media (max-width: 555px) {
       padding: 25px 20px;
@@ -69,8 +69,8 @@
       letter-spacing: normal;
       line-height: 30px;
       text-align: left;
-      margin-top: 20px;
+      margin-top: 30px;
-      margin-bottom: 5px;
+      margin-bottom: 10px;
 
       @media (max-width: 555px) {
         margin-top: 25px;
@@ -302,7 +302,7 @@
   &__input-box {
     input {
       margin-left: 10px;
-      margin-top: 10px;
+      margin-top: 30px;
       margin-bottom: 20px;
       width: 460px;
       height: 42px;