Merge pull request #113 from apuc/tracker-tasks

Tracker tasks

src/App.js

@@ -9,6 +9,7 @@ import {
 import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
 import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
 import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
+import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
 import Home from "./pages/Home/Home";
 import Candidate from "./components/Candidate/Candidate";
 import Calendar from "./components/Calendar/Calendar";
@@ -54,6 +55,7 @@ const App = () => {
           <Route exact path="/authdev" element={<AuthForDevelopers />} />
           <Route exact path="/auth" element={<AuthForPartners />} />
           <Route exact path="/tracker-intro" element={<TrackerIntro />} />
+          <Route exact path="/tracker-auth" element={<TrackerAuth />} />
 
           <Route exact path="/worker/:id" element={<FreeDevelopers />} />
           <Route

src/components/AuthBlock/AuthBlock.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
+
+import "./authBlock.scss";
+
+export const AuthBlock = ({ title, description, img }) => {
+  return (
+    <div className="auth__wrapper">
+      <div className="auth__info">
+        {title && <h3>{title}</h3>}
+        <img src={authImg} alt="img" />
+        <p>{description}</p>
+      </div>
+      <form className="auth__form">
+        <label htmlFor="login">Ваш email *</label>
+        <input id="login" type="text" name="username" placeholder="Email" />
+
+        <label htmlFor="password">Ваш пароль*</label>
+        <input
+          id="password"
+          type="password"
+          name="password"
+          placeholder="Пароль"
+        />
+        <div className="auth__form__buttons">
+          <button
+            onClick={(e) => {
+              e.preventDefault();
+            }}
+          >
+            Войти
+          </button>
+          <span>Вспомнить пароль</span>
+        </div>
+      </form>
+      {img && <img src={img} alt="authImg" className="auth__img" />}
+    </div>
+  );
+};
+
+export default AuthBlock;

src/components/AuthBlock/authBlock.scss

@@ -0,0 +1,109 @@
+.auth {
+  &__wrapper {
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 50px 0 35px 56px;
+    margin-top: 40px;
+    display: flex;
+    position: relative;
+
+    @media (max-width: 1024px) {
+      margin-top: 100px;
+    }
+
+    @media (max-width: 870px) {
+      flex-direction: column;
+      padding: 25px;
+    }
+  }
+
+  &__info {
+    margin-right: 115px;
+    h3 {
+      font-weight: 500;
+      font-size: 30px;
+      line-height: 32px;
+      margin-bottom: 20px;
+    }
+
+    p {
+      max-width: 310px;
+      margin-top: 17px;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 30px;
+
+      @media (max-width: 870px) {
+        max-width: none;
+        margin-bottom: 15px;
+      }
+    }
+
+    @media (max-width: 870px) {
+      margin-right: 0;
+    }
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+
+    input {
+      margin-bottom: 30px;
+      background: #eff2f7;
+      border-radius: 8px;
+      min-width: 300px;
+      width: 100%;
+      padding: 8px 12px;
+      border: none;
+      outline: none;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 18px;
+
+      @media (max-width: 870px) {
+        max-width: 350px;
+      }
+    }
+
+    label {
+      margin-bottom: 15px;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 18px;
+      color: #000000;
+    }
+
+    button {
+      background: #52b709;
+      border-radius: 44px;
+      max-width: 130px;
+      width: 100%;
+      border: none;
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 32px;
+      color: white;
+      height: 45px;
+    }
+
+    &__buttons {
+      display: flex;
+      column-gap: 20px;
+      align-items: center;
+
+      span {
+        cursor: pointer;
+        text-decoration-line: underline;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  &__img {
+    position: absolute;
+    right: 10px;
+    top: -90px;
+  }
+}

src/components/AuthBox/authBox.scss

@@ -133,13 +133,14 @@
       text-align: center;
       border: 2px solid #6aaf5c;
       margin-right: 1.5rem;
+      transition: 0.3s;
 
       &:hover {
-        background-image: none;
+        transform: scale(1.03);
-        background-color: #ffffff;
+        //background-image: none;
-        border: 2px solid #6aaf5c;
+        //background-color: #ffffff;
-        color: #6aaf5c !important;
+        //border: 2px solid #6aaf5c;
-        transition: 0.3s;
+        //color: #6aaf5c !important;
 
         .loader * {
           fill: #6aaf5c;

src/components/Common/Loader/loader.scss

@@ -6,9 +6,9 @@
   align-items: center;
   position: relative;
 
-  &:hover {
+  //&:hover {
-    path {
+  //  path {
-      fill: #6aaf5c;
+  //    fill: #6aaf5c;
-    }
+  //  }
-  }
+  //}
 }

src/components/Common/ModalLayout/modalLayout.scss

@@ -15,11 +15,60 @@
     position: relative;
     background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
     border-radius: 24px;
-    padding: 60px 60px 30px 60px;
+    padding: 20px 40px 30px 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+
+    .selectPerson {
+      align-items: start;
+
+      &__info {
+        font-size: 15px;
+        font-weight: 300;
+        margin: 12px 0 20px;
+      }
+    }
+
+    .invite__blocks {
+      display: flex;
+      column-gap: 20px;
+
+      span {
+        margin-top: 8px;
+        font-size: 15px;
+        font-weight: 300;
+      }
+
+      .invitePersonBlock {
+        display: flex;
+        flex-direction: column;
+        row-gap: 20px;
+        &__input {
+          margin: 0;
+          min-width: 320px;
+          height: 42px;
+
+          input {
+            height: 42px;
+          }
+        }
+
+        &__btn {
+          margin: 0 auto 0 0;
+          max-width: 242px;
+          width: 100%;
+        }
+      }
+    }
+
+    .select__person {
+      display: flex;
+      flex-direction: column;
+      row-gap: 10px;
+      padding: 39px 10px 29px 10px;
+    }
   }
 }
 

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -1,6 +1,9 @@
 import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 import { CKEditor } from "@ckeditor/ckeditor5-react";
+import ru from "date-fns/locale/ru";
 import React, { useEffect, useState } from "react";
+import DatePicker, { registerLocale } from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 
@@ -17,6 +20,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
 import archive from "assets/icons/archive.svg";
 import arrow from "assets/icons/arrows/arrowStart.png";
 import fullScreen from "assets/icons/arrows/inFullScreen.svg";
+import calendarIcon from "assets/icons/calendar.svg";
 import category from "assets/icons/category.svg";
 import close from "assets/icons/closeProjectPersons.svg";
 import del from "assets/icons/delete.svg";
@@ -27,8 +31,11 @@ import send from "assets/icons/send.svg";
 import watch from "assets/icons/watch.svg";
 import avatarMok from "assets/images/avatarMok.png";
 
+import { getCorrectDate } from "../../../Calendar/calendarHelper";
 import "./modalTicket.scss";
 
+registerLocale("ru", ru);
+
 export const ModalTiсket = ({
   active,
   setActive,
@@ -46,6 +53,11 @@ export const ModalTiсket = ({
     comment: "",
   });
   const [comments, setComments] = useState([]);
+  const [deadLine, setDeadLine] = useState(task.dead_line);
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const [startDate, setStartDate] = useState(
+    task.dead_line ? new Date(task.dead_line) : new Date()
+  );
   const [dropListOpen, setDropListOpen] = useState(false);
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
   const [executor, setExecutor] = useState(task.executor);
@@ -341,6 +353,18 @@ export const ModalTiсket = ({
     );
   }
 
+  function selectDeadLine(date) {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: task.id,
+        dead_line: getCorrectRequestDate(date),
+      },
+    }).then(() => {
+      dispatch(setProjectBoardFetch(projectId));
+    });
+  }
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
@@ -363,9 +387,9 @@ export const ModalTiсket = ({
           </h3>
 
           <div className="content__task">
-            <span>Задача</span>
             {editOpen ? (
               <input
+                maxLength="100"
                 value={inputsValue.title}
                 onChange={(e) => {
                   setInputsValue((prevValue) => ({
@@ -464,7 +488,6 @@ export const ModalTiсket = ({
         <div className="workers">
           <div className="workers_box task__info">
             <span className="exit" onClick={() => setActive(false)}></span>
-            <span className="nameProject">{task.title}</span>
             <p className="workers__creator">Создатель : {task.user?.fio}</p>
 
             {executor ? (
@@ -594,6 +617,29 @@ export const ModalTiсket = ({
           </div>
 
           <div className="workers_box-middle">
+            <div className="deadLine">
+              <div
+                className="deadLine__container"
+                onClick={() => setDatePickerOpen(!datePickerOpen)}
+              >
+                <img src={calendarIcon} alt="calendar" />
+                <span>
+                  {deadLine ? getCorrectDate(deadLine) : "Срок исполнения:"}
+                </span>
+              </div>
+              <DatePicker
+                className="datePicker"
+                open={datePickerOpen}
+                locale="ru"
+                selected={startDate}
+                onChange={(date) => {
+                  setDatePickerOpen(false);
+                  setStartDate(date);
+                  setDeadLine(date);
+                  selectDeadLine(date);
+                }}
+              />
+            </div>
             <div className="time">
               <img src={watch}></img>
               <span>Длительность : </span>

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -33,6 +33,9 @@
       display: flex;
       align-items: center;
       flex-direction: row;
+      color: #1458DD;
+      font-weight: 700;
+      font-size: 22px;
 
       &__category {
         margin-right: 17px;
@@ -104,9 +107,9 @@
 
       h5 {
         font-family: "Inter", sans-serif;
-        font-weight: 500;
+        font-weight: 600;
         font-style: normal;
-        font-size: 16px;
+        font-size: 19px;
         line-height: 24px;
         color: #1a1919;
         margin-bottom: 0;
@@ -280,7 +283,7 @@
     &__description {
       display: flex;
       flex-direction: column;
-      margin-top: 10px;
+      margin-top: 12px;
 
       textarea {
         min-height: 120px;
@@ -405,6 +408,7 @@
     display: flex;
     flex-direction: column;
     font-size: 14px;
+    margin-top: 8px;
 
     &__list {
       display: flex;
@@ -420,13 +424,17 @@
     .exit {
       cursor: pointer;
       position: absolute;
-      top: 35px;
+      top: 25px;
-      right: 40px;
+      right: 30px;
+      width: 13px;
+      height: 13px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       &:before,
       &:after {
         content: "";
-        position: absolute;
         width: 16px;
         height: 2px;
         background: #263238;
@@ -459,6 +467,7 @@
       align-items: center;
       position: relative;
       margin-bottom: 5px;
+      margin-top: 12px;
 
       span {
         color: #000000;
@@ -530,12 +539,89 @@
       }
     }
 
+    .deadLine {
+      position: relative;
+      &__container {
+        padding: 5px 10px 5px;
+        margin-top: 10px;
+        border-radius: 5px;
+        border: 1px solid gray;
+        cursor: pointer;
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        max-width: 185px;
+        img {
+          width: 16px;
+          height: 16px;
+        }
+        span {
+          font-size: 12px;
+          color: #000000;
+          margin-left: 10px;
+          font-weight: 500;
+        }
+      }
+      .datePicker {
+        visibility: hidden;
+        height: 0;
+        padding: 0;
+        width: 0;
+        position: absolute;
+      }
+
+      .react-datepicker-wrapper {
+        position: absolute;
+      }
+
+      .react-datepicker {
+        border: 1px solid #398208;
+      }
+
+      .react-datepicker-popper {
+        top: 10px !important;
+        left: -110px !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 {
+        left: 85px !important;
+
+        &:before {
+          border-bottom-color: #398208 !important;
+        }
+      }
+    }
+
     .time {
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-size: 12px;
-      margin-top: 20px;
+      margin-top: 10px;
       width: 160px;
 
       p {
@@ -552,6 +638,7 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      margin-bottom: 8px;
 
       span {
         margin-left: 5px;
@@ -585,7 +672,6 @@
     .task__info {
       display: flex;
       flex-direction: column;
-      row-gap: 5px;
 
       .delete {
         cursor: pointer;
@@ -649,7 +735,7 @@
     }
 
     &_box {
-      padding: 25px 85px 40px 40px;
+      padding: 25px 85px 25px 40px;
       border-bottom: 1px solid #f1f1f1;
 
       &-middle {
@@ -658,7 +744,7 @@
       }
 
       &-bottom {
-        padding: 40px 110px 75px 56px;
+        padding: 20px 110px 35px 56px;
         font-weight: 400;
         font-size: 14px;
         line-height: 38px;
@@ -669,6 +755,10 @@
           align-items: center;
           padding-left: 10px;
 
+          img {
+            width: 11px;
+          }
+
           p {
             margin: 0 0 0 12px;
           }

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

@@ -1,6 +1,8 @@
 import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 import { CKEditor } from "@ckeditor/ckeditor5-react";
+import ru from "date-fns/locale/ru";
 import React, { useEffect, useState } from "react";
+import DatePicker, { registerLocale } from "react-datepicker";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
@@ -8,6 +10,7 @@ import {
   deletePersonOnProject,
   getBoarderLoader,
   modalToggle,
+  setProjectBoardFetch,
   setToggleTab,
 } from "@redux/projectsTrackerSlice";
 
@@ -15,6 +18,7 @@ import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
+import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
@@ -24,10 +28,9 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
-import archive from "assets/icons/archive.svg";
-import archive2 from "assets/icons/archive.svg";
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
+import calendarIcon from "assets/icons/calendar.svg";
 import close from "assets/icons/close.png";
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
@@ -37,10 +40,13 @@ import send from "assets/icons/send.svg";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import watch from "assets/icons/watch.svg";
+import archive from "assets/images/archiveIcon.png";
 import avatarMok from "assets/images/avatarMok.png";
 
 import "./ticketFullScreen.scss";
 
+registerLocale("ru", ru);
+
 export const TicketFullScreen = () => {
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const ticketId = useParams();
@@ -66,10 +72,17 @@ export const TicketFullScreen = () => {
   const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
   const [users, setUsers] = useState([]);
+  const [deadLine, setDeadLine] = useState("");
+  const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const [startDate, setStartDate] = useState(null);
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
       setTaskInfo(taskInfo);
+      setDeadLine(taskInfo.dead_line);
+      setStartDate(
+        taskInfo.dead_line ? new Date(taskInfo.dead_line) : new Date()
+      );
       setInputsValue({
         title: taskInfo.title,
         description: taskInfo.description,
@@ -364,6 +377,16 @@ export const TicketFullScreen = () => {
     });
   }
 
+  function selectDeadLine(date) {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: taskInfo.id,
+        dead_line: getCorrectRequestDate(date),
+      },
+    }).then(() => {});
+  }
+
   return (
     <section className="ticket-full-screen">
       <ProfileHeader />
@@ -412,7 +435,7 @@ export const TicketFullScreen = () => {
           <>
             <div className="tracker__tabs__content content-tabs">
               <div className="tasks__head">
-                <div className="tasks__head__wrapper">
+                <div className="tasks__head__wrapper tasks__head__wrapper__fullScreen">
                   <h5>Проект : {projectInfo.name}</h5>
 
                   <TrackerModal
@@ -518,9 +541,9 @@ export const TicketFullScreen = () => {
             <div className="modal-tiket__content ticket">
               <div className="content ticket-whith">
                 <div className="content__task">
-                  <span>Задача</span>
                   {editOpen ? (
                     <input
+                      maxLength="100"
                       value={inputsValue.title}
                       onChange={(e) => {
                         setInputsValue((prevValue) => ({
@@ -752,6 +775,31 @@ export const TicketFullScreen = () => {
                 </div>
 
                 <div className="workers_box-middle">
+                  <div className="deadLine">
+                    <div
+                      className="deadLine__container"
+                      onClick={() => setDatePickerOpen(!datePickerOpen)}
+                    >
+                      <img src={calendarIcon} alt="calendar" />
+                      <span>
+                        {deadLine
+                          ? getCorrectDate(deadLine)
+                          : "Срок исполнения:"}
+                      </span>
+                    </div>
+                    <DatePicker
+                      className="datePicker"
+                      open={datePickerOpen}
+                      locale="ru"
+                      selected={startDate}
+                      onChange={(date) => {
+                        setDatePickerOpen(false);
+                        setStartDate(date);
+                        setDeadLine(date);
+                        selectDeadLine(date);
+                      }}
+                    />
+                  </div>
                   <div className="time">
                     <img src={watch}></img>
                     <span>Длительность : </span>
@@ -810,7 +858,7 @@ export const TicketFullScreen = () => {
                     <p onClick={copyTicketLink}>ссылка на задачу</p>
                   </div>
                   <div>
-                    <img src={archive2} alt="arch"></img>
+                    <img src={archive} alt="arch"></img>
                     <p>в архив</p>
                   </div>
                   <div onClick={deleteTask}>

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

@@ -53,7 +53,7 @@ export const TrackerModal = ({
   const [valueColumn, setValueColumn] = useState("");
   const [nameProject, setNameProject] = useState("");
   const [valueTiket, setValueTiket] = useState("");
-  const [descriptionTicket, setDescriptionTicket] = useState("Описание задачи");
+  const [descriptionTicket, setDescriptionTicket] = useState("");
   const [workers, setWorkers] = useState([]);
   const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
   const [selectedWorker, setSelectedWorker] = useState(null);
@@ -271,62 +271,89 @@ export const TrackerModal = ({
       // }}
     >
       {modalType === "addWorker" && (
-        <div>
+        <>
-          <div className="title-project">
+          <div className="select__person">
-            <h4>Добавьте участника</h4>
+            <div className="title-project selectPerson">
-            {/*<div className="input-container">*/}
+              <h4>Добавьте участника</h4>
-            {/*  <input*/}
+              {/*<div className="input-container">*/}
-            {/*    className="name-project"*/}
+              {/*  <input*/}
-            {/*    value={emailWorker}*/}
+              {/*    className="name-project"*/}
-            {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
+              {/*    value={emailWorker}*/}
-            {/*  />*/}
+              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
-            {/*</div>*/}
+              {/*  />*/}
-            <div
+              {/*</div>*/}
-              className={
+              <p className="selectPerson__info">
-                selectWorkersOpen ? "select__worker open" : "select__worker"
+                Выберите пользователя в проекте или добавьте по e- mail
-              }
-              onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
-            >
-              <p>
-                {selectedWorker
-                  ? selectedWorker.employee.fio
-                  : "Выберите пользователя"}
               </p>
-              <img className="arrow" src={arrowDown} alt="arrow" />
+              <div className="invite__blocks">
-              {Boolean(selectWorkersOpen) && (
+                <div className="addPersonBlock">
-                <div className="select__worker__dropDown">
+                  <div
-                  {Boolean(workers.length) ? (
+                    className={
-                    workers.map((worker) => {
+                      selectWorkersOpen
-                      if (worker === selectedWorker) {
+                        ? "select__worker open"
-                        return;
+                        : "select__worker"
-                      }
+                    }
-                      return (
+                    onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
-                        <div
+                  >
-                          className="worker"
+                    <p>
-                          key={worker.id}
+                      {selectedWorker
-                          onClick={() => {
+                        ? selectedWorker.employee.fio
-                            setSelectedWorker(worker);
+                        : "Выберите пользователя"}
-                          }}
+                    </p>
-                        >
+                    <img className="arrow" src={arrowDown} alt="arrow" />
-                          <p>{worker.employee.fio}</p>
+                    {Boolean(selectWorkersOpen) && (
-                          <img
+                      <div className="select__worker__dropDown">
-                            src={urlForLocal(worker.employee.avatar)}
+                        {Boolean(workers.length) ? (
-                            alt="avatar"
+                          workers.map((worker) => {
-                          />
+                            if (worker === selectedWorker) {
-                        </div>
+                              return;
-                      );
+                            }
-                    })
+                            return (
-                  ) : (
+                              <div
-                    <div>Нет пользователей</div>
+                                className="worker"
-                  )}
+                                key={worker.id}
+                                onClick={() => {
+                                  setSelectedWorker(worker);
+                                }}
+                              >
+                                <p>{worker.employee.fio}</p>
+                                <img
+                                  src={urlForLocal(worker.employee.avatar)}
+                                  alt="avatar"
+                                />
+                              </div>
+                            );
+                          })
+                        ) : (
+                          <div>Нет пользователей</div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <BaseButton
+                    styles={"button-add addPersonBtn"}
+                    onClick={addUserToProject}
+                  >
+                    Добавить
+                  </BaseButton>
                 </div>
-              )}
+                <span>или</span>
+                <div className="invitePersonBlock">
+                  <div className="input-container invitePersonBlock__input">
+                    <input
+                      className="name-project"
+                      placeholder="email"
+                      type="email"
+                    />
+                  </div>
+                  <BaseButton styles={"button-add invitePersonBlock__btn"}>
+                    Отправить приглашение
+                  </BaseButton>
+                </div>
+              </div>
             </div>
           </div>
-          <BaseButton styles={"button-add"} onClick={addUserToProject}>
+        </>
-            Добавить
-          </BaseButton>
-        </div>
       )}
       {modalType === "createTiketProject" && (
         <>
@@ -334,6 +361,7 @@ export const TrackerModal = ({
             <h4>Введите название и описание задачи</h4>
             <div className="input-container">
               <input
+                maxLength="100"
                 className="name-project"
                 value={valueTiket}
                 onChange={(e) => setValueTiket(e.target.value)}
@@ -355,6 +383,7 @@ export const TrackerModal = ({
                   "blockQuote",
                 ],
                 removePlugins: ["BlockQuote"],
+                placeholder: "Описание задачи",
               }}
               onChange={(event, editor) => {
                 const data = editor.getData();
@@ -443,6 +472,7 @@ export const TrackerModal = ({
             <h4>{titleProject}</h4>
             <div className="input-container">
               <input
+                maxLength="30"
                 className="name-project"
                 value={nameProject}
                 onChange={(e) => setNameProject(e.target.value)}
@@ -477,6 +507,7 @@ export const TrackerModal = ({
             <h4>Введите название колонки</h4>
             <div className="input-container">
               <input
+                maxLength="100"
                 className="name-project"
                 value={valueColumn}
                 onChange={(e) => setValueColumn(e.target.value)}

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -30,7 +30,6 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  margin: 0 0 15px 0;
   row-gap: 5px;
 
   .select-priority {
@@ -79,7 +78,7 @@
   }
 
   .input-container {
-    width: 320px;
+    width: 100%;
     height: 35px;
     background: #ffffff;
     border-radius: 8px;
@@ -91,7 +90,7 @@
   }
 
   .ck-editor {
-    max-width: 320px;
+    width: 100%;
   }
 
   .ck-editor__editable.ck-rounded-corners {
@@ -104,6 +103,10 @@
     border-radius: 8px 8px 0 0 !important;
   }
 
+  .ck-placeholder {
+    display: block !important;
+  }
+
   .ck-content {
     border: none !important;
     border-radius: 0 0 8px 8px !important;
@@ -111,7 +114,7 @@
   }
 
   .select__executor {
-    width: 320px;
+    width: 100%;
     background: white;
     border-radius: 8px;
     margin: 5px 0;
@@ -215,6 +218,7 @@
     cursor: pointer;
     position: relative;
     min-width: 320px;
+    height: 42px;
     width: 100%;
 
     p {
@@ -237,7 +241,7 @@
       position: absolute;
       width: 100%;
       padding: 9.5px 12px;
-      top: 35px;
+      top: 48px;
       left: 0;
       background: white;
       border-radius: 5px;
@@ -286,6 +290,11 @@
   margin: 0 auto;
 }
 
+.addPersonBtn {
+  margin: 0 auto 0 0;
+  margin-top: 20px;
+}
+
 .modal-add.active {
   transform: scale(1);
 }
@@ -293,8 +302,13 @@
 .exit {
   cursor: pointer;
   position: absolute;
-  top: 35px;
+  top: 15px;
-  right: 40px;
+  right: 20px;
+  width: 13px;
+  height: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &:before,
   &:after {

src/components/Modal/TrackerModal/trackerModal.scss

@@ -153,11 +153,15 @@
   position: absolute;
   top: 35px;
   right: 40px;
+  width: 13px;
+  height: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &:before,
   &:after {
     content: "";
-    position: absolute;
     width: 16px;
     height: 2px;
     background: #263238;

src/pages/AuthForCandidate/AuthForCandidate.jsx

@@ -8,6 +8,7 @@ import { setRole } from "@redux/roleSlice";
 
 import { apiRequest } from "@api/request";
 
+import AuthBlock from "@components/AuthBlock/AuthBlock";
 import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
 import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
 import { Footer } from "@components/Common/Footer/Footer";
@@ -112,68 +113,44 @@ export const AuthForCandidate = () => {
     }
   }, [getToken]);
 
-  const submitHandler = () => {
+  // const submitHandler = () => {
-    let formData = new FormData(ref.current);
+  //   let formData = new FormData(ref.current);
-    if (!isLoading) {
+  //   if (!isLoading) {
-      dispatch(loading(true));
+  //     dispatch(loading(true));
-      apiRequest("/user/login", {
+  //     apiRequest("/user/login", {
-        method: "POST",
+  //       method: "POST",
-        data: formData,
+  //       data: formData,
-      }).then((res) => {
+  //     }).then((res) => {
-        if (!res.access_token) {
+  //       if (!res.access_token) {
-          dispatch(loading(false));
+  //         dispatch(loading(false));
-        } else {
+  //       } else {
-          localStorage.setItem("auth_token", res.access_token);
+  //         localStorage.setItem("auth_token", res.access_token);
-          localStorage.setItem("id", res.id);
+  //         localStorage.setItem("id", res.id);
-          localStorage.setItem("cardId", res.card_id);
+  //         localStorage.setItem("cardId", res.card_id);
-          localStorage.setItem("role_status", res.status);
+  //         localStorage.setItem("role_status", res.status);
-          localStorage.setItem(
+  //         localStorage.setItem(
-            "access_token_expired_at",
+  //           "access_token_expired_at",
-            res.access_token_expired_at
+  //           res.access_token_expired_at
-          );
+  //         );
-          dispatch(auth(true));
+  //         dispatch(auth(true));
-          dispatch(setUserInfo(res));
+  //         dispatch(setUserInfo(res));
-          dispatch(loading(false));
+  //         dispatch(loading(false));
-          dispatch(setRole("ROLE_PARTNER"));
+  //         dispatch(setRole("ROLE_PARTNER"));
-        }
+  //       }
-      });
+  //     });
-    }
+  //   }
-  };
+  // };
 
   return (
     <div className="auth-candidate">
       <AuthHeader />
       <div className="container">
-        <div className="auth__wrapper">
+        <AuthBlock
-          <div className="auth__info">
+          title="Войти, уже есть доступ"
-            <h3>Войти, уже есть доступ</h3>
+          description="если вы получили доступ пройдя
-            <img src={authImg} alt="img" />
+                   2 шага для входа или хотите узнать
-            <p>
+                  свои результаты в кабинете"
-              если вы получили доступ пройдя 2 шага для входа или хотите узнать
+        />
-              свои результаты в кабинете
-            </p>
-          </div>
-          <form ref={ref} className="auth__form">
-            <label htmlFor="login">Ваш email *</label>
-            <input id="login" type="text" name="username" placeholder="Email" />
-
-            <label htmlFor="password">Ваш пароль*</label>
-            <input
-              id="password"
-              type="password"
-              name="password"
-              placeholder="Пароль"
-            />
-            <button
-              onClick={(e) => {
-                e.preventDefault();
-                submitHandler();
-              }}
-            >
-              Войти
-            </button>
-          </form>
-        </div>
         <div className="auth-candidate__start">
           <h2 className="auth-candidate__start__title">
             Хочу в команду <span>Айти специалистов</span>

src/pages/AuthForCandidate/authForCandidate.scss

@@ -4,95 +4,6 @@
   position: relative;
   background-color: #f1f1f1;
 
-  .auth {
-    &__wrapper {
-      background: #ffffff;
-      border-radius: 12px;
-      padding: 50px 0 35px 56px;
-      margin-top: 40px;
-      display: flex;
-
-      @media (max-width: 1024px) {
-        margin-top: 100px;
-      }
-
-      @media (max-width: 870px) {
-        flex-direction: column;
-        padding: 25px;
-      }
-    }
-
-    &__info {
-      margin-right: 115px;
-      h3 {
-        font-weight: 500;
-        font-size: 30px;
-        line-height: 32px;
-        margin-bottom: 20px;
-      }
-
-      p {
-        max-width: 310px;
-        margin-top: 17px;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 30px;
-
-        @media (max-width: 870px) {
-          max-width: none;
-          margin-bottom: 15px;
-        }
-      }
-
-      @media (max-width: 870px) {
-        margin-right: 0;
-      }
-    }
-
-    &__form {
-      display: flex;
-      flex-direction: column;
-
-      input {
-        margin-bottom: 30px;
-        background: #eff2f7;
-        border-radius: 8px;
-        min-width: 300px;
-        width: 100%;
-        padding: 8px 12px;
-        border: none;
-        outline: none;
-        font-weight: 400;
-        font-size: 15px;
-        line-height: 18px;
-
-        @media (max-width: 870px) {
-          max-width: 350px;
-        }
-      }
-
-      label {
-        margin-bottom: 15px;
-        font-weight: 400;
-        font-size: 15px;
-        line-height: 18px;
-        color: #000000;
-      }
-
-      button {
-        background: #52b709;
-        border-radius: 44px;
-        max-width: 130px;
-        border: none;
-        font-weight: 500;
-        font-size: 18px;
-        line-height: 32px;
-        color: white;
-        height: 45px;
-      }
-    }
-  }
-
   &__start {
     margin-top: 60px;
     display: flex;

src/pages/ProjectTracker/ProjectTracker.js

@@ -34,7 +34,6 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
-import archive from "assets/icons/archiveTracker.svg";
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import close from "assets/icons/close.png";
@@ -46,8 +45,11 @@ import trackerNoTasks from "assets/icons/trackerNoTasks.svg";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import accept from "assets/images/accept.png";
+import archive from "assets/images/archiveIcon.png";
 import avatarMok from "assets/images/avatarMok.png";
 
+import { getCorrectDate } from "../../components/Calendar/calendarHelper";
+
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
   const projectId = useParams();
@@ -390,7 +392,10 @@ export const ProjectTracker = () => {
                         />
                         <div className="persons__list__count">
                           <span>{projectBoard.projectUsers?.length}</span>
-                          участник
+                          {caseOfNum(
+                            projectBoard.projectUsers?.length,
+                            "persons"
+                          )}
                         </div>
                         <div className="persons__list__info">
                           <span>В проекте - </span>
@@ -480,7 +485,7 @@ export const ProjectTracker = () => {
                         setSelectedExecutorOpen(!selectExecutorOpen)
                       }
                     >
-                      <p>Выберите исполнитель</p>
+                      <p>Выберите исполнителя</p>
                       <img
                         className={selectExecutorOpen ? "open" : ""}
                         src={arrowDown}
@@ -546,7 +551,7 @@ export const ProjectTracker = () => {
                       >
                         <div className="board__head">
                           <span>{column.title}</span>
-                          <div>
+                          <div className="board__head__more">
                             <span
                               className="add"
                               onClick={() =>
@@ -649,6 +654,14 @@ export const ProjectTracker = () => {
                                   />
                                 )}
                               </div>
+                              <div className="tasks__board__item__deadLine">
+                                <p>Срок исполнения:</p>
+                                <span>
+                                  {task.dead_line
+                                    ? getCorrectDate(task.dead_line)
+                                    : "Не выбран"}
+                                </span>
+                              </div>
                               <div className="tasks__board__item__info">
                                 <div className="tasks__board__item__info__more">
                                   <img src={commentsBoard} alt="commentsImg" />

src/pages/Tracker/Tracker.js

@@ -23,10 +23,10 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
 
-import archive from "assets/icons/archiveTracker.svg";
 import search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
+import archive from "assets/images/archiveIcon.png";
 import avatarMok from "assets/images/avatarMok.png";
 import noProjects from "assets/images/noProjects.png";
 

src/pages/Tracker/tracker.scss

@@ -55,6 +55,11 @@
       align-items: center;
       color: black;
 
+      img {
+        width: 16px;
+        height: 16px;
+      }
+
       @media (max-width: 490px) {
         padding: 8px 20px 8px 14px;
       }
@@ -214,6 +219,10 @@
             justify-content: space-between;
             padding: 0 10px;
             align-items: center;
+
+            &__fullScreen {
+              max-width: 1160px;
+            }
           }
 
           h5 {
@@ -616,6 +625,8 @@
           margin: 0 auto;
           overflow: auto;
           max-width: 100%;
+          transform: scaleY(-1);
+          align-items: end;
 
           &::-webkit-scrollbar {
             height: 8px;
@@ -650,6 +661,7 @@
           transition: all 0.3s ease;
           //max-height: 500px;
           //overflow-y: auto;
+          transform: scaleY(-1);
 
           &::-webkit-scrollbar {
             width: 3px;
@@ -692,9 +704,8 @@
             transition: 0.4s;
 
             &:hover {
-              transform: scale(0.99);
+              transform: scale(1.025);
-              box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+              transition: 0.3s;
-              transition: 0.4s;
             }
 
             &__hide {
@@ -712,6 +723,12 @@
                 font-size: 16px;
                 line-height: 24px;
                 margin-bottom: 0;
+                max-height: 100px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 5;
+                -webkit-box-orient: vertical;
               }
 
               span {
@@ -773,6 +790,23 @@
               }
             }
 
+            &__deadLine {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              margin-bottom: 10px;
+
+              p {
+                font-weight: 500;
+                font-size: 14px;
+              }
+
+              span {
+                font-weight: 500;
+                font-size: 14px;
+              }
+            }
+
             &__executor {
               display: flex;
               justify-content: space-between;
@@ -852,11 +886,13 @@
           &__noItems {
             font-weight: 500;
             font-size: 25px;
+            transform: scaleY(-1);
           }
 
           &__noTasks {
             display: flex;
             flex-direction: column;
+            transform: scaleY(-1);
 
             &Info {
               display: flex;
@@ -889,6 +925,11 @@
             justify-content: space-between;
             min-width: 300px;
 
+            &__more {
+              display: flex;
+              align-items: center;
+            }
+
             span {
               color: #6f6f6f;
               font-weight: 500;
@@ -916,6 +957,7 @@
               bottom: 4px;
               font-size: 20px;
               cursor: pointer;
+              width: 15px;
 
               &:hover {
                 font-weight: 600;
@@ -1057,6 +1099,7 @@
               &__info {
                 display: flex;
                 flex-direction: column;
+                max-width: 730px;
 
                 h5 {
                   font-weight: 700;
@@ -1068,7 +1111,7 @@
                 p {
                   font-size: 16px;
                   line-height: 32px;
-                  max-width: 400px;
+                  max-width: 710px;
                   overflow: hidden;
                   white-space: nowrap;
                   text-overflow: ellipsis;

src/pages/TrackerAuth/TrackerAuth.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+import AuthBlock from "@components/AuthBlock/AuthBlock";
+import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
+import { Footer } from "@components/Common/Footer/Footer";
+import SideBar from "@components/SideBar/SideBar";
+
+import arrowInfo from "assets/icons/trackerIntroInfo.svg";
+import trackerAuthImg from "assets/images/trackerAuthImg.png";
+
+import "./trackerAuth.scss";
+
+export const TrackerAuth = () => {
+  return (
+    <div className="trackerAuth">
+      <AuthHeader />
+      <SideBar />
+      <div className="trackerAuth__content">
+        <div className="container">
+          <h1 className="trackerAuth__title">
+            Войдите в свое{" "}
+            <span>
+              рабочее пространство
+              <img src={arrowInfo} alt="arrow" />
+            </span>
+          </h1>
+          <AuthBlock
+            description="Создавайте и редактируйте задачи и проекты вместе с другими участниками команды."
+            img={trackerAuthImg}
+          />
+        </div>
+        <Footer />
+      </div>
+    </div>
+  );
+};

src/pages/TrackerAuth/trackerAuth.scss

@@ -0,0 +1,35 @@
+.trackerAuth {
+  &__content {
+    font-family: "LabGrotesque", sans-serif;
+    background-color: #f1f1f1;
+    color: #000000;
+    padding: 50px 0 0;
+    min-height: 100vh;
+
+    @media (max-width: 1375px) {
+      padding-top: 100px;
+    }
+
+    .container {
+      padding-bottom: 30px;
+    }
+  }
+
+  &__title {
+    font-size: 30px;
+    font-weight: 500;
+    margin-bottom: 46px;
+    color: #000000;
+    span {
+      color: #52B709;
+      position: relative;
+      img {
+        position: absolute;
+        bottom: -15px;
+        right: 10px;
+        max-width: 300px;
+
+      }
+    }
+  }
+}

src/utils/helper.js

@@ -64,7 +64,8 @@ export function getCorrectRequestDate(date) {
 
 export function caseOfNum(number, type) {
   const comments = ["коментарий", "комментария", " коментариев"];
-  const files = ["файлов", "файла", "файлов"];
+  const files = ["файл", "файла", "файлов"];
+  const persons = ["участник", "участника", "участников"];
   const cases = [2, 0, 1, 1, 1, 2];
   if (type === "comments") {
     return comments[
@@ -80,4 +81,12 @@ export function caseOfNum(number, type) {
         : cases[number % 10 < 5 ? number % 10 : 5]
     ];
   }
+
+  if (type === "persons") {
+    return persons[
+      number % 100 > 4 && number % 100 < 20
+        ? 2
+        : cases[number % 10 < 5 ? number % 10 : 5]
+    ];
+  }
 }