format

src/components/Calendar/calendarComponent.scss

@@ -1,12 +1,8 @@
 .calendar-component {
   position: relative;
-  margin-top: 30px;
+  margin: 30px 0;
-  margin-bottom: 60px;
   background-color: #f9f9f9;
-  padding-left: 68px;
+  padding: 20px 30px;
-  padding-right: 54px;
-  padding-top: 48px;
-  padding-bottom: 40px;
   font-family: "LabGrotesque", sans-serif;
 
   &__header {
@@ -98,7 +94,7 @@
   }
 
   &__rectangle {
-    margin: 36px 0;
+    margin: 20px 0;
 
     img {
       width: 100%;
@@ -122,7 +118,7 @@
       }
     }
 
-    margin-bottom: 60px;
+    margin: 20px 0 20px;
   }
 
   &__form {
@@ -203,8 +199,7 @@
 }
 @media (max-width: 968px) {
   .calendar-component {
-    margin-bottom: 40px;
+    padding: 28px 10px;
-    padding: 28px 10px 48px 10px;
 
     &__header {
       &-box {
@@ -300,3 +295,15 @@
     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,6 +25,7 @@ export function calendarHelper(value) {
 }
 
 export function getReports(value) {
+  // получение отчетов с видимой области
   const startDay = value
     .clone()
     .startOf("month")
@@ -56,12 +57,7 @@ export function getCreatedDate(day) {
   }
 }
 
-export function correctDay(day) {
+export const correctDay = (day) => (day < 10 ? `0${day}` : day);
-  if (day < 10) {
-    return `0${day}`;
-  }
-  return day;
-}
 
 export function currentMonth() {
   const currentMonth = moment().format("MMMM");

src/components/ProfileCalendar/ProfileCalendar.jsx

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

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -20,7 +20,8 @@ import {
   currentMonthAndDay,
   getCorrectDate,
   getReports,
-  hourOfNum
+  hourOfNum,
+  correctDay
 } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import ShortReport from "@components/ShortReport/ShortReport";
@@ -30,7 +31,6 @@ 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,7 +44,6 @@ 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);
@@ -74,15 +73,8 @@ 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 (currentDay < day) return `block`;
+      if (moment() < day) return `block`;
       for (const date of reports) {
         if (
           `${new Date(day).getFullYear()}-${correctDay(
@@ -110,13 +102,9 @@ export const ProfileCalendarComponent = React.memo(
       return "../../report";
     }
 
-    function prevMonth() {
+    const prevMonth = () => value.clone().subtract(1, "month");
-      return value.clone().subtract(1, "month");
-    }
 
-    function nextMonth() {
+    const nextMonth = () => value.clone().add(1, "month");
-      return value.clone().add(1, "month");
-    }
 
     function reportsByDate(endDay) {
       const requestDates =
@@ -133,25 +121,16 @@ export const ProfileCalendarComponent = React.memo(
         )}`
       ).then((reports) => {
         let spendTime = 0;
-        for (const report of reports) {
+        reports.map((report) => {
-          report.task.map((task) => {
+          spendTime += report.task.reduce(
-            if (task.hours_spent) {
+            (acc, task) => acc + task.hours_spent,
-              spendTime += Number(task.hours_spent);
+            0
-            }
+          );
         });
-        }
+        setTotalRangeHours(Math.floor(spendTime));
-        setTotalRangeHours(spendTime);
       });
     }
 
-    function toggleActivePeriod() {
-      if (!activePeriod) {
-        setActivePeriod(true);
-      } else {
-        setActivePeriod(false);
-      }
-    }
-
     function rangeDays(day) {
       if (!startDate) {
         setStartDateRange(day);
@@ -308,7 +287,7 @@ export const ProfileCalendarComponent = React.memo(
             onClick={() => {
               if (startRangeDays) resetRangeDays();
               toggleRangeDays();
-              toggleActivePeriod();
+              setActivePeriod(!activePeriod);
             }}
           >
             {endDate
@@ -331,7 +310,7 @@ export const ProfileCalendarComponent = React.memo(
               styles={"clear-days"}
               onClick={() => {
                 resetRangeDays();
-                toggleActivePeriod();
+                setActivePeriod(false);
                 toggleRangeDays();
               }}
             >

src/components/ReportForm/reportForm.scss

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