fix layout

src/components/Calendar/Calendar.jsx

@@ -11,9 +11,9 @@ import { LogoutButton } from "@components/LogoutButton/LogoutButton";
 
 import rectangle from "assets/images/rectangle_secondPage.png";
 
+import { currentMonth } from "../../utils/calendarHelper";
 import CalendarComponent from "./CalendarComponent";
 import "./calendar.scss";
-import { currentMonth } from "../../utils/calendarHelper";
 
 const Calendar = () => {
   if (localStorage.getItem("role_status") !== "18") {

src/components/Calendar/CalendarComponent.jsx

@@ -6,8 +6,8 @@ import calendarIcon from "assets/icons/calendar.svg";
 import ellipse from "assets/icons/ellipse.png";
 import rectangle from "assets/images/rectangle__calendar.png";
 
-import "./calendarComponent.scss";
 import { calendarHelper, currentMonthAndDay } from "../../utils/calendarHelper";
+import "./calendarComponent.scss";
 
 const CalendarComponent = ({ onSelect }) => {
   const [value, setValue] = useState(moment());

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -9,6 +9,7 @@ import { Link, useNavigate, useParams } from "react-router-dom";
 import { getProfileInfo } from "@redux/outstaffingSlice";
 import { getBoarderLoader, setToggleTab } from "@redux/projectsTrackerSlice";
 
+import { getCorrectDate } from "@utils/calendarHelper";
 import {
   backendImg,
   caseOfNum,
@@ -21,7 +22,6 @@ import { apiRequest } from "@api/request";
 
 import { useNotification } from "@hooks/useNotification";
 
-import { getCorrectDate } from "@utils/calendarHelper";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import FileTracker from "@components/FileTracker/FileTracker";

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -22,13 +22,13 @@ import {
   setProjectBoardFetch
 } from "@redux/projectsTrackerSlice";
 
+import { getCorrectDate } from "@utils/calendarHelper";
 import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
 import { useNotification } from "@hooks/useNotification";
 
-import { getCorrectDate } from "@utils/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Loader } from "@components/Common/Loader/Loader";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";

src/components/ProfileCalendar/ProfileCalendar.jsx

@@ -12,11 +12,11 @@ import {
   setRequestDate
 } from "@redux/reportSlice";
 
+import { getReports } from "@utils/calendarHelper";
 import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
-import { getReports } from "@utils/calendarHelper";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import { Navigation } from "@components/Navigation/Navigation";

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -11,11 +11,6 @@ import {
   setSendRequest
 } from "@redux/reportSlice";
 
-import { getCorrectYYMMDD } from "@utils/helper";
-
-import { apiRequest } from "@api/request";
-
-import "@components/Calendar/calendarComponent.scss";
 import {
   calendarHelper,
   correctDay,
@@ -24,6 +19,11 @@ import {
   getReports,
   hourOfNum
 } from "@utils/calendarHelper";
+import { getCorrectYYMMDD } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
+
+import "@components/Calendar/calendarComponent.scss";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";

src/components/ProfileHeader/profileHeader.scss

@@ -1,6 +1,6 @@
 .profile-header {
   width: 100%;
-  height: 80px;
+  height: 66px;
   background: #e1fccf;
   padding: 20px;
   display: flex;
@@ -17,7 +17,11 @@
     justify-content: space-between;
     align-items: center;
     height: 100%;
-    z-index: 9;
+    z-index: 9999;
+    max-width: 1160px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 15px;
 
     .text {
       width: 100%;
@@ -56,6 +60,10 @@
     }
   }
 
+  &__info {
+    background: white;
+  }
+
   .auth-body {
     opacity: 0;
     z-index: 99;
@@ -140,7 +148,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    min-height: 50px;
+    min-height: 66px;
 
     @media (max-width: 414px) {
       display: none;

src/components/ReportForm/ReportForm.jsx

@@ -18,6 +18,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
 import arrow from "assets/icons/arrows/left-arrow.png";
+import arrowDown from "assets/icons/arrows/selectArrow.png";
 import calendarIcon from "assets/icons/calendar.svg";
 import ellipse from "assets/icons/ellipse.png";
 import remove from "assets/icons/remove.svg";
@@ -42,6 +43,7 @@ const ReportForm = () => {
 
   useEffect(() => {
     initListeners();
+    getProjectList();
   }, []);
 
   const [isFetching, setIsFetching] = useState(false);
@@ -51,6 +53,10 @@ const ReportForm = () => {
       ? new Date(reportDate ? reportDate._d : editReport.created_at)
       : new Date()
   );
+  const [projectList, setProjectList] = useState([]);
+  const [projectLoader, setProjectLoader] = useState(false);
+  const [selectedProject, setSelectedProject] = useState("Выберите проект");
+  const [openSelectProject, setOpenSelectProject] = useState(false);
   const [datePickerOpen, setDatePickerOpen] = useState(false);
 
   const [inputs, setInputs] = useState(
@@ -85,10 +91,12 @@ const ReportForm = () => {
         (div) =>
           div.classList &&
           (div.classList.contains("report-form__block-img") ||
-            div.classList.contains("react-datepicker-popper"))
+            div.classList.contains("react-datepicker-popper") ||
+            div.classList.contains("report-form__project"))
       )
     ) {
       setDatePickerOpen(false);
+      setOpenSelectProject(false);
     }
   };
 
@@ -98,6 +106,17 @@ const ReportForm = () => {
     setInputs((prev) => prev.filter((el, index) => index !== indexRemove));
   };
 
+  const getProjectList = () => {
+    setProjectLoader(true);
+    apiRequest(
+      `/project/project-list?user_id=${localStorage.getItem(
+        "id"
+      )}&expand=columns`
+    ).then((el) => {
+      setProjectLoader(false);
+      setProjectList(el?.projects);
+    });
+  };
   const handler = () => {
     setIsFetching(true);
     for (let input of inputs) {
@@ -113,6 +132,7 @@ const ReportForm = () => {
       data: {
         user_id: localStorage.getItem("id"),
         tasks: inputs,
+        project_id: selectedProject.id ? selectedProject.id : "",
         difficulties: troublesInputValue,
         tomorrow: scheduledInputValue,
         created_at: getCreatedDate(startDate),
@@ -144,6 +164,7 @@ const ReportForm = () => {
       data: {
         tasks: inputs,
         difficulties: troublesInputValue,
+        project_id: selectedProject.id ? selectedProject.id : "",
         tomorrow: scheduledInputValue,
         created_at: getCreatedDate(startDate),
         status: 1
@@ -220,6 +241,58 @@ const ReportForm = () => {
                 setStartDate(date);
               }}
             />
+            {projectLoader ? (
+              <div className="loader__wrapper">
+                <Loader />
+              </div>
+            ) : (
+              <>
+                <div className="report-form__task-list">
+                  <img src={ellipse} alt="" />
+                  <span>Выберите проект</span>
+                </div>
+                <div className="report-form__project">
+                  <div
+                    className="project__selected"
+                    onClick={() => setOpenSelectProject(!openSelectProject)}
+                  >
+                    <p>
+                      {selectedProject.name
+                        ? selectedProject.name
+                        : selectedProject}
+                    </p>
+                    <img
+                      className={
+                        openSelectProject ? "project__selected--open" : ""
+                      }
+                      src={arrowDown}
+                      alt="arrow"
+                    />
+                  </div>
+                  {openSelectProject && (
+                    <div className="project__dropDown">
+                      {Boolean(projectList.length) ? (
+                        projectList.map((project) => {
+                          return (
+                            <span
+                              onClick={() => {
+                                setSelectedProject(project);
+                                setOpenSelectProject(false);
+                              }}
+                              key={project.id}
+                            >
+                              {project.name}
+                            </span>
+                          );
+                        })
+                      ) : (
+                        <span>Проектов нет</span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
             <div className="report-form__task-list">
               <img src={ellipse} alt="" />
               <span>Какие задачи выполнены?</span>

src/components/ReportForm/reportForm.scss

@@ -107,6 +107,62 @@
     }
   }
 
+  .loader__wrapper {
+    max-width: 200px;
+  }
+
+   &__project {
+     position: relative;
+     max-width: 200px;
+     margin-top: 10px;
+
+     .project {
+       &__selected {
+         display: flex;
+         border-radius: 8px;
+         border: 1px solid gray;
+         cursor: pointer;
+         font-size: 18px;
+         padding: 5px;
+         justify-content: space-between;
+         align-items: center;
+         font-weight: 500;
+
+         img {
+           width: 16px;
+           height: 16px;
+           transition: all 0.3s ease;
+         }
+
+         &--open {
+           transform: rotate(180deg);
+         }
+       }
+
+       &__dropDown {
+         position: absolute;
+         border-radius: 8px;
+         display: flex;
+         flex-direction: column;
+         width: 100%;
+         background: white;
+         border: 1px solid #c2c2c2;
+         padding: 5px;
+         z-index: 100;
+         row-gap: 3px;
+
+         span {
+           cursor: pointer;
+           font-size: 16px;
+
+           &:hover {
+             font-weight: 600;
+           }
+         }
+       }
+     }
+   }
+
   &__task {
     &-number {
       color: #282828;

src/components/ShortReport/ShortReport.jsx

@@ -8,13 +8,14 @@ import {
   setSendRequest
 } from "@redux/reportSlice";
 
-import { apiRequest } from "@api/request";
-
 import {
   getCorrectDate,
   getCreatedDate,
   hourOfNum
 } from "@utils/calendarHelper";
+
+import { apiRequest } from "@api/request";
+
 import { Loader } from "@components/Common/Loader/Loader";
 
 import "./shortReport.scss";

src/components/TrackerTaskComment/TrackerTaskComment.jsx

@@ -2,11 +2,11 @@ import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 import { CKEditor } from "@ckeditor/ckeditor5-react";
 import React, { useState } from "react";
 
+import { getCorrectDate } from "@utils/calendarHelper";
 import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
-import { getCorrectDate } from "@utils/calendarHelper";
 import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
 import del from "assets/icons/delete.svg";

src/pages/PartnerBid/PartnerBid.jsx

@@ -9,11 +9,11 @@ import {
   setPartnerRequestInfo
 } from "@redux/outstaffingSlice";
 
+import { getCorrectDate } from "@utils/calendarHelper";
 import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
-import { getCorrectDate } from "@utils/calendarHelper";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";

src/pages/PartnerEmployeeReport/PartnerEmployeeReport.jsx

@@ -5,9 +5,10 @@ import { Navigate, useParams } from "react-router-dom";
 
 import { getRequestDates, setRequestDate } from "@redux/reportSlice";
 
+import { getReports } from "@utils/calendarHelper";
+
 import { apiRequest } from "@api/request";
 
-import { getReports } from "@utils/calendarHelper";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import { Navigation } from "@components/Navigation/Navigation";

src/pages/Payouts/Payouts.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 
+import { Footer } from "@components/Common/Footer/Footer";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { Footer } from "@components/Common/Footer/Footer";
 
 import "./payouts.scss";
 

src/pages/Statistics/Statistics.jsx

@@ -6,10 +6,10 @@ import { setToggleTab } from "@redux/projectsTrackerSlice";
 
 import { copyProjectLink } from "@utils/helper";
 
+import { Footer } from "@components/Common/Footer/Footer";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { Footer } from "@components/Common/Footer/Footer";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import emailImg from "assets/icons/emailStatistics.svg";

src/pages/ViewReport/ViewReport.jsx

@@ -4,13 +4,14 @@ import { Link, useParams } from "react-router-dom";
 
 import { setEditReport } from "@redux/reportSlice";
 
-import { apiRequest } from "@api/request";
-
 import {
   getCorrectDate,
   getCreatedDate,
   hourOfNum
 } from "@utils/calendarHelper";
+
+import { apiRequest } from "@api/request";
+
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import { Navigation } from "@components/Navigation/Navigation";