From 9bc60434cc0236ac7b1c7ee5261b02b2c47f7562 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Thu, 22 Jun 2023 14:53:35 +0300
Subject: [PATCH 1/8] Fixed modals btn

---
 .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 282 ++++---
 .../Tracker/ModalTicket/ModalTicket.scss      | 594 ---------------
 .../Tracker}/ModalTicket/modalTicket.scss     |  18 +-
 .../TicketFullScreen/TicketFullScreen.jsx     | 708 ++++++++++--------
 src/components/UI/ModalTicket/ModalTicket.jsx | 484 ------------
 .../UI/TicketFullScreen/TicketFullScreen.jsx  | 456 -----------
 src/pages/ProjectTracker/ProjectTracker.js    | 295 ++++----
 7 files changed, 751 insertions(+), 2086 deletions(-)
 delete mode 100644 src/components/Modal/Tracker/ModalTicket/ModalTicket.scss
 rename src/components/{UI => Modal/Tracker}/ModalTicket/modalTicket.scss (96%)
 delete mode 100644 src/components/UI/ModalTicket/ModalTicket.jsx
 delete mode 100644 src/components/UI/TicketFullScreen/TicketFullScreen.jsx

diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
index 1b5da0b5..cb5dd6bc 100644
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@@ -4,14 +4,13 @@ import { Link } from "react-router-dom";
 
 import { modalToggle, setProjectBoardFetch } from "@redux/projectsTrackerSlice";
 
-import { urlForLocal } from "@utils/helper";
+import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
-import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
-import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
 import archive from "assets/icons/archive.svg";
 import arrow from "assets/icons/arrows/arrowStart.png";
@@ -26,7 +25,7 @@ import plus from "assets/icons/plus.svg";
 import send from "assets/icons/send.svg";
 import watch from "assets/icons/watch.svg";
 
-import "./ModalTicket.scss";
+import "./modalTicket.scss";
 
 export const ModalTiсket = ({
   active,
@@ -45,13 +44,19 @@ export const ModalTiсket = ({
     comment: "",
   });
   const [comments, setComments] = useState([]);
-  const [commentsEditOpen, setCommentsEditOpen] = useState({});
-  const [commentsEditText, setCommentsEditText] = useState({});
   const [dropListOpen, setDropListOpen] = useState(false);
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
   const [executor, setExecutor] = useState(task.executor);
   const [members, setMembers] = useState(task.taskUsers);
   const [users, setUsers] = useState([]);
+  const [timerStart, setTimerStart] = useState(false);
+  const [timerInfo, setTimerInfo] = useState({});
+  const [currentTimerCount, setCurrentTimerCount] = useState({
+    hours: 0,
+    minute: 0,
+    seconds: 0,
+  });
+  const [timerId, setTimerId] = useState(null);
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -90,37 +95,78 @@ export const ModalTiсket = ({
     }).then((res) => {
       let newComment = res;
       newComment.created_at = new Date();
+      newComment.subComments = [];
       setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
       setComments((prevValue) => [...prevValue, newComment]);
-      setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false }));
-      setCommentsEditText((prevValue) => ({
-        ...prevValue,
-        [res.id]: res.text,
-      }));
-    });
-  }
-  function deleteComment(commentId) {
-    apiRequest("/comment/update", {
-      method: "PUT",
-      data: {
-        comment_id: commentId,
-        status: 0,
-      },
-    }).then(() => {
-      setComments((prevValue) =>
-        prevValue.filter((item) => item.id !== commentId)
-      );
     });
   }
 
-  function editComment(commentId) {
-    apiRequest("/comment/update", {
+  function commentDelete(comment) {
+    setComments((prevValue) =>
+      prevValue.filter((item) => item.id !== comment.id)
+    );
+    if (comment.subComments.length) {
+      // promiseAll
+      comment.subComments.forEach((subComment) => {
+        apiRequest("/comment/update", {
+          method: "PUT",
+          data: {
+            comment_id: subComment.id,
+            status: 0,
+          },
+        }).then(() => {});
+      });
+    }
+  }
+
+  function addSubComment(commentId, subComment) {
+    const addSubComment = comments;
+    addSubComment.forEach((comment) => {
+      if (comment.id === commentId) {
+        comment.subComments.push(subComment);
+      }
+    });
+    setComments(addSubComment);
+  }
+
+  function subCommentDelete(subComment) {
+    const deleteSubComment = comments;
+    deleteSubComment.forEach((comment, index) => {
+      if (comment.id === subComment.parent_id) {
+        deleteSubComment[index].subComments = comment.subComments.filter(
+          (item) => item.id !== subComment.id
+        );
+      }
+    });
+    setComments([...deleteSubComment]);
+  }
+
+  function startTaskTimer() {
+    apiRequest("/timer/create", {
+      method: "POST",
+      data: {
+        entity_type: 2,
+        entity_id: task.id,
+        created_at: getCorrectRequestDate(new Date()),
+      },
+    }).then((res) => {
+      setTimerStart(true);
+      setTimerInfo(res);
+      startTimer();
+    });
+  }
+
+  function stopTaskTimer() {
+    apiRequest("/timer/update", {
       method: "PUT",
       data: {
-        comment_id: commentId,
-        text: commentsEditText[commentId],
+        timer_id: timerInfo.id,
+        stopped_at: getCorrectRequestDate(new Date()),
       },
-    }).then(() => {});
+    }).then(() => {
+      setTimerStart(false);
+      clearInterval(timerId);
+    });
   }
 
   function taskExecutor(person) {
@@ -177,20 +223,77 @@ export const ModalTiсket = ({
     apiRequest(
       `/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
     ).then((res) => {
-      setComments(res);
-      res.forEach((item) => {
-        setCommentsEditOpen((prevValue) => ({
-          ...prevValue,
-          [item.id]: false,
-        }));
-        setCommentsEditText((prevValue) => ({
-          ...prevValue,
-          [item.id]: item.text,
-        }));
-      });
+      const comments = res.reduce((acc, cur) => {
+        if (!cur.parent_id) {
+          acc.push({ ...cur, subComments: [] });
+        } else {
+          acc.forEach((item) => {
+            if (item.id === cur.parent_id) item.subComments.push(cur);
+          });
+        }
+        return acc;
+      }, []);
+      setComments(comments);
     });
+    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
+      (res) => {
+        let timerSeconds = 0;
+        res.length &&
+          res.forEach((time) => {
+            timerSeconds += time.deltaSeconds;
+            setCurrentTimerCount({
+              hours: Math.floor(timerSeconds / 60 / 60),
+              minute: Math.floor((timerSeconds / 60) % 60),
+              seconds: timerSeconds % 60,
+            });
+            updateTimerHours = Math.floor(timerSeconds / 60 / 60);
+            updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
+            updateTimerSec = timerSeconds % 60;
+            if (!time.stopped_at) {
+              setTimerStart(true);
+              startTimer();
+              setTimerInfo(time);
+            }
+          });
+      }
+    );
   }, []);
 
+  function startTimer() {
+    setTimerId(
+      setInterval(() => {
+        run();
+      }, 1000)
+    );
+  }
+
+  let updateTimerSec = currentTimerCount.seconds,
+    updateTimerMinute = currentTimerCount.minute,
+    updateTimerHours = currentTimerCount.hours;
+
+  function run() {
+    updateTimerSec++;
+    if (updateTimerSec > 60) {
+      updateTimerMinute++;
+      updateTimerSec = 0;
+    }
+    if (updateTimerMinute === 60) {
+      updateTimerMinute = 0;
+      updateTimerHours++;
+    }
+
+    return setCurrentTimerCount({
+      hours: updateTimerHours,
+      minute: updateTimerMinute,
+      seconds: updateTimerSec,
+    });
+  }
+
+  function correctTimerTime(time) {
+    if (time < 10) return `0${time}`;
+    if (time > 10) return time;
+  }
+
   useEffect(() => {
     let ids = members.map((user) => user.user_id);
     setUsers(
@@ -202,11 +305,13 @@ export const ModalTiсket = ({
   }, [members]);
 
   return (
-    <>
-      <ModalLayout
-        active={active}
-        setActive={setActive}
-        styles={"tracker-ticket"}
+    <div
+      className={active ? "modal-tiket active" : "modal-tiket"}
+      onClick={() => setActive(false)}
+    >
+      <div
+        className="modal-tiket__content"
+        onClick={(e) => e.stopPropagation()}
       >
         <div className="content">
           <h3 className="title-project">
@@ -258,17 +363,17 @@ export const ModalTiсket = ({
                     dispatch(modalToggle("addSubtask"));
                     setAddSubtask(true);
                   }}
-                  styles={"tasks__button"}
+                  styles={"button-green-add"}
                 >
                   <img src={plus}></img>
                   Добавить под задачу
                 </BaseButton>
               </p>
               <p className="file">
-                <BaseButton styles={"file__button"}>
+                <button>
                   <img src={file}></img>
                   Загрузить файл
-                </BaseButton>
+                </button>
                 <span>{0}</span>
                 Файлов
               </p>
@@ -289,50 +394,14 @@ export const ModalTiсket = ({
             <div className="comments__list">
               {comments.map((comment) => {
                 return (
-                  <div className="comments__list__item" key={comment.id}>
-                    <div className="comments__list__item__info">
-                      <span>{getCorrectDate(comment.created_at)}</span>
-                      <div
-                        className={
-                          commentsEditOpen[comment.id]
-                            ? "edit edit__open"
-                            : "edit"
-                        }
-                      >
-                        <img
-                          src={edit}
-                          alt="edit"
-                          onClick={() => {
-                            if (commentsEditOpen[comment.id]) {
-                              editComment(comment.id);
-                            }
-                            setCommentsEditOpen((prevValue) => ({
-                              ...prevValue,
-                              [comment.id]: !prevValue[comment.id],
-                            }));
-                          }}
-                        />
-                      </div>
-                      <img
-                        src={del}
-                        alt="delete"
-                        onClick={() => deleteComment(comment.id)}
-                      />
-                    </div>
-                    {commentsEditOpen[comment.id] ? (
-                      <input
-                        value={commentsEditText[comment.id]}
-                        onChange={(e) => {
-                          setCommentsEditText((prevValue) => ({
-                            ...prevValue,
-                            [comment.id]: e.target.value,
-                          }));
-                        }}
-                      />
-                    ) : (
-                      <p>{commentsEditText[comment.id]}</p>
-                    )}
-                  </div>
+                  <TrackerTaskComment
+                    key={comment.id}
+                    taskId={task.id}
+                    comment={comment}
+                    commentDelete={commentDelete}
+                    addSubComment={addSubComment}
+                    subCommentDelete={subCommentDelete}
+                  />
                 );
               })}
             </div>
@@ -438,12 +507,29 @@ export const ModalTiсket = ({
             <div className="time">
               <img src={watch}></img>
               <span>Длительность : </span>
-              <p>{"0:00:00"}</p>
+              <p>
+                {correctTimerTime(currentTimerCount.hours)}:
+                {correctTimerTime(currentTimerCount.minute)}:
+                {correctTimerTime(currentTimerCount.seconds)}
+              </p>
             </div>
 
-            <button className="start">
-              Начать делать <img src={arrow}></img>
-            </button>
+            {timerStart ? (
+              <button className="stop" onClick={() => stopTaskTimer()}>
+                Остановить
+              </button>
+            ) : (
+              <button
+                className={
+                  task.executor_id === Number(localStorage.getItem("id"))
+                    ? "start"
+                    : "start disable"
+                }
+                onClick={() => startTaskTimer()}
+              >
+                Начать делать <img src={arrow}></img>
+              </button>
+            )}
           </div>
 
           <div className="workers_box-bottom">
@@ -475,14 +561,14 @@ export const ModalTiсket = ({
             </div>
           </div>
         </div>
-      </ModalLayout>
+      </div>
 
       <TrackerModal
         active={addSubtask}
         setActive={setAddSubtask}
         defautlInput={task.column_id}
       ></TrackerModal>
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.scss b/src/components/Modal/Tracker/ModalTicket/ModalTicket.scss
deleted file mode 100644
index ce06851a..00000000
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.scss
+++ /dev/null
@@ -1,594 +0,0 @@
-.tracker-ticket {
-  background: #ffffff;
-  padding: 0;
-  border-radius: 8px;
-  align-items: initial;
-  display: flex;
-  flex-direction: row;
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    width: 600px;
-    margin: 26px 0 0 21px;
-
-    .title-project {
-      color: #1458dd;
-      font-family: "LabGrotesque", sans-serif;
-      display: flex;
-      align-items: center;
-      font-weight: 700;
-      font-size: 22px;
-      line-height: 32px;
-
-      &__category {
-        margin-right: 17px;
-      }
-
-      &__full {
-        margin-left: 35%;
-      }
-    }
-
-    &__task {
-      margin-top: -5px;
-      padding: 18px;
-      display: flex;
-      flex-direction: column;
-
-      input {
-        font-style: normal;
-        font-size: 16px;
-        line-height: 24px;
-        max-width: 340px;
-        outline: none;
-      }
-
-      button {
-        img {
-          margin-right: 5px;
-        }
-      }
-
-      h5 {
-        font-family: "Inter", sans-serif;
-        font-weight: 500;
-        font-style: normal;
-        font-size: 16px;
-        line-height: 24px;
-        color: #1a1919;
-        margin-bottom: 0;
-      }
-
-      .comments__list {
-        display: flex;
-        flex-direction: column;
-        max-height: 420px;
-        overflow: auto;
-
-        &::-webkit-scrollbar {
-          width: 4px;
-          border-radius: 10px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          background: #cbd9f9;
-          border-radius: 10px;
-        }
-
-        &::-webkit-scrollbar-track {
-          background: #c5c0c6;
-          border-radius: 10px;
-        }
-
-        &__item {
-          padding: 10px 20px;
-          display: flex;
-          flex-direction: column;
-          max-width: 438px;
-          border-radius: 44px;
-          font-size: 14px;
-          width: 100%;
-          position: relative;
-
-          &__subComment {
-            &:before {
-              content: '';
-              background: #E4E4E6;
-              height: 1px;
-              width: 7px;
-              position: absolute;
-              top: 36%;
-              left: 2.5%;
-            }
-          }
-
-          &__main {
-            &:after {
-              content: '';
-              position: absolute;
-              background-image: url("../../../images/mainTaskCommentImg.png");
-              width: 10px;
-              height: 8px;
-              top: 50px;
-              left: 25px;
-            }
-
-            &:before {
-              content: '';
-              position: absolute;
-              background: #E4E4E6;
-              width: 1px;
-              height: calc(100% - 120px);
-              left: 29px;
-              top: 65px;
-            }
-          }
-
-          &__fio {
-            display: flex;
-            align-items: center;
-
-            p {
-              font-size: 12px;
-              color: #000000;
-              line-height: 32px;
-              max-width: 150px;
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              margin-left: 10px;
-            }
-
-            img {
-              width: 24px;
-              height: 24px;
-            }
-          }
-
-          &__date {
-            display: flex;
-            align-items: center;
-            column-gap: 5px;
-
-            img {
-              cursor: pointer;
-              width: 15px;
-            }
-
-            span {
-              font-size: 12px;
-            }
-          }
-
-          &__text {
-            margin-left: 34px;
-          }
-
-          &__info {
-            display: flex;
-            justify-content: space-between;
-
-            .edit {
-              width: 25px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              border-radius: 5px;
-            }
-
-            .edit__open {
-              background: green;
-            }
-          }
-
-          &__answer {
-            margin-left: 34px;
-            text-decoration-line: underline;
-            font-weight: 400;
-            font-size: 10px;
-            line-height: 32px;
-            cursor: pointer;
-
-            &__new {
-              margin-left: 34px;
-              font-size: 14px;
-              border-radius: 5px;
-              border: 1px solid gainsboro;
-              padding: 3px 5px;
-              display: flex;
-              align-items: center;
-              margin-top: 5px;
-
-              img {
-                width: 20px;
-                height: 20px;
-                cursor: pointer;
-              }
-
-              input {
-                width: 90%;
-                border: none;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &__description {
-      display: flex;
-      flex-direction: column;
-      margin-top: 10px;
-
-      p {
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 140%;
-        color: #252c32;
-        text-align: justify;
-      }
-
-      .image-task {
-        margin: 10px 0 20px 0;
-        max-width: 330px;
-      }
-    }
-
-    &__communication {
-      display: flex;
-      flex-direction: row;
-      margin: 29px 0 0 -5px;
-
-      .tasks {
-        justify-content: space-evenly;
-
-        &__button {
-          width: 180px;
-          height: 40px;
-          font-size: 12px;
-        }
-      }
-
-      .tasks,
-      .file {
-        display: flex;
-        align-items: center;
-      }
-
-      .file {
-        justify-content: space-between;
-        margin-left: 20px;
-
-        &__button {
-          background: white;
-          width: 166px;
-          height: 40px;
-          border: 0.5px solid #1458dd;
-          font-weight: 400;
-          font-size: 12px;
-          color: #1458dd;
-
-          img {
-            margin-right: 9px;
-          }
-        }
-
-        span {
-          margin: 0 3px 0 11px;
-          font-weight: 500;
-          font-size: 12px;
-          line-height: 15px;
-          color: #6e7c87;
-        }
-      }
-    }
-
-    &__input {
-      margin: 20px 0 20px 0;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 438px;
-      height: 40px;
-      background: #f1f1f1;
-      border-radius: 44px;
-
-      input {
-        width: 80%;
-        background: inherit;
-        border: none;
-        outline: none;
-        padding-left: 30px;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 32px;
-        border-radius: 44px;
-      }
-
-      img {
-        cursor: pointer;
-        margin-right: 18px;
-      }
-    }
-  }
-
-  .members {
-    display: flex;
-    flex-direction: column;
-    font-size: 14px;
-
-    &__list {
-      display: flex;
-      flex-direction: column;
-      row-gap: 8px;
-    }
-  }
-
-  .workers {
-    position: relative;
-    border-left: 1px solid #f1f1f1;
-
-    .exit {
-      cursor: pointer;
-      position: absolute;
-      top: 35px;
-      right: 40px;
-
-      &:before,
-      &:after {
-        content: "";
-        position: absolute;
-        width: 16px;
-        height: 2px;
-        background: #263238;
-      }
-
-      &:before {
-        transform: rotate(45deg);
-      }
-      &:after {
-        transform: rotate(-45deg);
-      }
-    }
-
-    span {
-      font-family: "Inter", sans-serif;
-      font-weight: 500;
-      font-size: 11px;
-      color: #807777;
-    }
-
-    .nameProject {
-      max-width: 200px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .add-worker {
-      display: flex;
-      align-items: center;
-      position: relative;
-
-      span {
-        color: #000000;
-        font-size: 12px;
-        line-height: 32px;
-        margin-left: 17px;
-        font-style: normal;
-        font-weight: 400;
-      }
-
-      button {
-        cursor: pointer;
-        background: #8bcc60;
-        border-radius: 44px;
-        width: 33px;
-        height: 33px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border: none;
-        color: white;
-        font-size: 17px;
-      }
-    }
-
-    .start {
-      font-size: 12px;
-      margin-top: 25px;
-      width: 151px;
-      height: 40px;
-      border: none;
-      color: white;
-      background: #1458dd;
-      border-radius: 44px;
-
-      img {
-        margin-left: 10px;
-      }
-    }
-
-    .disable {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-
-    .stop {
-      font-size: 12px;
-      margin-top: 25px;
-      width: 151px;
-      height: 40px;
-      border: none;
-      color: white;
-      background: red;
-      border-radius: 44px;
-    }
-
-    .time {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 12px;
-      margin-top: 20px;
-      width: 160px;
-
-      p {
-        color: #000000;
-        margin: 0;
-      }
-    }
-
-    &__creator {
-      font-size: 14px;
-      line-height: 32px;
-      font-weight: 500;
-      color: #2d4a17;
-      max-width: 200px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-
-      span {
-        margin-left: 5px;
-        font-size: 14px;
-        line-height: 32px;
-        font-weight: 500;
-        display: flex;
-      }
-    }
-
-    .worker {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      p {
-        max-width: 170px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px;
-      }
-
-      img {
-        max-width: 25px;
-        max-height: 25px;
-        margin-left: 5px;
-      }
-    }
-
-    .task__info {
-      display: flex;
-      flex-direction: column;
-      row-gap: 5px;
-
-      .delete {
-        cursor: pointer;
-      }
-
-      .executor {
-        display: flex;
-        font-size: 14px;
-        align-items: center;
-
-        p {
-          max-width: 170px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-
-        img {
-          margin-left: 5px;
-          max-width: 25px;
-          max-height: 25px;
-        }
-      }
-
-      .dropdownList {
-        position: absolute;
-        background: white;
-        padding: 10px;
-        border-radius: 10px;
-        top: 0;
-        z-index: 10;
-        border: 1px solid gray;
-        width: 260px;
-        display: flex;
-        flex-direction: column;
-        row-gap: 8px;
-
-        .noUsers {
-          font-size: 14px;
-          text-align: center;
-        }
-
-        &__close {
-          cursor: pointer;
-          margin-left: auto;
-          width: 12px;
-          margin-right: 5px;
-        }
-
-        &__person {
-          display: flex;
-          justify-content: space-between;
-          cursor: pointer;
-
-          img {
-            max-width: 30px;
-            max-height: 30px;
-          }
-        }
-      }
-    }
-
-    &_box {
-      padding: 25px 85px 40px 40px;
-      border-bottom: 1px solid #f1f1f1;
-
-      &-middle {
-        padding: 0px 40px 25px 40px;
-        border-bottom: 1px solid #f1f1f1;
-      }
-
-      &-bottom {
-        padding: 40px 110px 75px 56px;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 38px;
-
-        div {
-          display: flex;
-          cursor: pointer;
-          align-items: center;
-          padding-left: 10px;
-
-          p {
-            margin: 0 0 0 12px;
-          }
-        }
-
-        .edit {
-          background: #52b709;
-          border-radius: 50px;
-
-          p {
-            font-weight: 700;
-          }
-        }
-      }
-    }
-  }
-}
-
-.subtask {
-  h4 {
-    width: 90%;
-    p {
-      color: #1458dd;
-    }
-  }
-}
diff --git a/src/components/UI/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
similarity index 96%
rename from src/components/UI/ModalTicket/modalTicket.scss
rename to src/components/Modal/Tracker/ModalTicket/modalTicket.scss
index 5912f569..b77a7253 100644
--- a/src/components/UI/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -109,8 +109,8 @@
 
           &__subComment {
             &:before {
-              content: '';
-              background: #E4E4E6;
+              content: "";
+              background: #e4e4e6;
               height: 1px;
               width: 7px;
               position: absolute;
@@ -121,9 +121,9 @@
 
           &__main {
             &:after {
-              content: '';
+              content: "";
               position: absolute;
-              background-image: url("../../../assets/images/mainTaskCommentImg.png");
+              background-image: url("assets/images/mainTaskCommentImg.png");
               width: 10px;
               height: 8px;
               top: 50px;
@@ -131,9 +131,9 @@
             }
 
             &:before {
-              content: '';
+              content: "";
               position: absolute;
-              background: #E4E4E6;
+              background: #e4e4e6;
               width: 1px;
               height: calc(100% - 120px);
               left: 29px;
@@ -258,16 +258,12 @@
       .tasks {
         justify-content: space-evenly;
 
-        button {
+        .button-green-add {
           width: 180px;
           height: 40px;
-          background: #52b709;
-          border-radius: 44px;
           font-weight: 400;
           font-size: 12px;
           line-height: 32px;
-          border: none;
-          color: #ffffff;
         }
       }
 
diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index 6c845bab..40cd4821 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -1,45 +1,47 @@
 import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link, useNavigate, useParams } from "react-router-dom";
 
-import { ProfileHeader } from "../../../ProfileHeader/ProfileHeader";
-import { ProfileBreadcrumbs } from "../../../ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { Footer } from "@components/Common/Footer/Footer";
-import { Link, useParams, useNavigate } from "react-router-dom";
-import TrackerModal from "../../../Modal/TrackerModal/TrackerModal";
-import TrackerTaskComment from "../../../TrackerTaskComment/TrackerTaskComment";
-import { Navigation } from "../../../Navigation/Navigation";
-import {Loader} from "@components/Common/Loader/Loader";
-
-import {useDispatch, useSelector} from "react-redux";
 import {
   deletePersonOnProject,
+  getBoarderLoader,
+  getProjectBoard,
   modalToggle,
   setProjectBoardFetch,
   setToggleTab,
-  getProjectBoard,
-  getBoarderLoader,
-} from "../../../../redux/projectsTrackerSlice";
-import { apiRequest } from "../../../../api/request";
+} from "@redux/projectsTrackerSlice";
 
-import project from "../../../../assets/icons/trackerProject.svg";
-import watch from "../../../../assets/icons/watch.svg";
-import file from "../../../../assets/icons/fileModal.svg";
-import send from "../../../../assets/icons/send.svg";
-import arrow2 from "../../../../assets/icons/arrows/arrowStart.png";
-import plus from "../../../../assets/icons/plus.svg";
-import tasks from "../../../../assets/icons/trackerTasks.svg";
-import archive from "../../../../assets/icons/archive.svg";
-import arrow from "../../../../assets/icons/arrows/arrowCalendar.png";
-import link from "../../../../assets/icons/link.svg";
-import archive2 from "../../../../assets/icons/archive.svg";
-import del from "../../../../assets/icons/delete.svg";
-import edit from "../../../../assets/icons/edit.svg";
-import close from "../../../../assets/icons/close.png";
+import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
+
+import BaseButton from "@components/Common/BaseButton/BaseButton";
+import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
+import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import { Navigation } from "@components/Navigation/Navigation";
+import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+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 arrow2 from "assets/icons/arrows/arrowStart.png";
+import close from "assets/icons/close.png";
+import del from "assets/icons/delete.svg";
+import edit from "assets/icons/edit.svg";
+import file from "assets/icons/fileModal.svg";
+import link from "assets/icons/link.svg";
+import plus from "assets/icons/plus.svg";
+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 "./ticketFullScreen.scss";
 
-import {getCorrectRequestDate, urlForLocal} from "../../../../utils/helper";
-
-export const TicketFullScreen = ({}) => {
+export const TicketFullScreen = () => {
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const ticketId = useParams();
   const dispatch = useDispatch();
@@ -51,35 +53,41 @@ export const TicketFullScreen = ({}) => {
   const [inputsValue, setInputsValue] = useState({});
   const [loader, setLoader] = useState(true);
   const [comments, setComments] = useState([]);
-  const [personListOpen, setPersonListOpen] = useState(false)
-  const [timerStart, setTimerStart] = useState(false)
-  const [timerInfo, setTimerInfo] = useState({})
+  const [personListOpen, setPersonListOpen] = useState(false);
+  const [timerStart, setTimerStart] = useState(false);
+  const [timerInfo, setTimerInfo] = useState({});
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
       setTaskInfo(taskInfo);
-      setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
-      apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
+      setInputsValue({
+        title: taskInfo.title,
+        description: taskInfo.description,
+        comment: "",
+      });
+      apiRequest(
+        `/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
+      ).then((res) => {
         const comments = res.reduce((acc, cur) => {
           if (!cur.parent_id) {
-            acc.push({...cur, subComments: []})
+            acc.push({ ...cur, subComments: [] });
           } else {
             acc.forEach((item) => {
-              if (item.id === cur.parent_id) item.subComments.push(cur)
-            })
+              if (item.id === cur.parent_id) item.subComments.push(cur);
+            });
           }
-          return acc
-        }, [])
-        setComments(comments)
-      })
+          return acc;
+        }, []);
+        setComments(comments);
+      });
       taskInfo.timers.forEach((time) => {
         if (!time.stopped_at) {
-          setTimerStart(true)
-          setTimerInfo(time)
+          setTimerStart(true);
+          setTimerInfo(time);
         }
-      })
+      });
       dispatch(setProjectBoardFetch(taskInfo.project_id));
-      setLoader(boardLoader)
+      setLoader(boardLoader);
     });
   }, []);
 
@@ -101,10 +109,9 @@ export const TicketFullScreen = ({}) => {
       data: {
         task_id: taskInfo.id,
         title: inputsValue.title,
-        description: inputsValue.description
+        description: inputsValue.description,
       },
-    }).then(() => {
-    });
+    }).then(() => {});
   }
 
   function createComment() {
@@ -113,15 +120,15 @@ export const TicketFullScreen = ({}) => {
       data: {
         text: inputsValue.comment,
         entity_type: 2,
-        entity_id: taskInfo.id
-      }
+        entity_id: taskInfo.id,
+      },
     }).then((res) => {
-      let newComment = res
-      newComment.created_at = new Date()
-      newComment.subComments = []
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setComments((prevValue) => ([...prevValue, newComment]))
-    })
+      let newComment = res;
+      newComment.created_at = new Date();
+      newComment.subComments = [];
+      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
+      setComments((prevValue) => [...prevValue, newComment]);
+    });
   }
 
   function startTaskTimer() {
@@ -130,12 +137,12 @@ export const TicketFullScreen = ({}) => {
       data: {
         entity_type: 2,
         entity_id: taskInfo.id,
-        created_at: getCorrectRequestDate(new Date())
-      }
+        created_at: getCorrectRequestDate(new Date()),
+      },
     }).then((res) => {
-      setTimerStart(true)
-      setTimerInfo(res)
-    })
+      setTimerStart(true);
+      setTimerInfo(res);
+    });
   }
 
   function stopTaskTimer() {
@@ -143,9 +150,9 @@ export const TicketFullScreen = ({}) => {
       method: "PUT",
       data: {
         timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date())
-      }
-    }).then(() => setTimerStart(false))
+        stopped_at: getCorrectRequestDate(new Date()),
+      },
+    }).then(() => setTimerStart(false));
   }
 
   function deletePerson(userId) {
@@ -153,47 +160,50 @@ export const TicketFullScreen = ({}) => {
       method: "DELETE",
       data: {
         project_id: projectBoard.id,
-        user_id: userId
+        user_id: userId,
       },
     }).then(() => {
-      dispatch(deletePersonOnProject(userId))
+      dispatch(deletePersonOnProject(userId));
     });
   }
 
   function commentDelete(comment) {
-    setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
+    setComments((prevValue) =>
+      prevValue.filter((item) => item.id !== comment.id)
+    );
     if (comment.subComments.length) {
       comment.subComments.forEach((subComment) => {
         apiRequest("/comment/update", {
           method: "PUT",
           data: {
             comment_id: subComment.id,
-            status: 0
-          }
-        }).then(() => {
-        })
-      })
+            status: 0,
+          },
+        }).then(() => {});
+      });
     }
   }
 
   function addSubComment(commentId, subComment) {
-    const addSubComment = comments
+    const addSubComment = comments;
     addSubComment.forEach((comment) => {
       if (comment.id === commentId) {
-        comment.subComments.push(subComment)
+        comment.subComments.push(subComment);
       }
-    })
-    setComments(addSubComment)
+    });
+    setComments(addSubComment);
   }
 
   function subCommentDelete(subComment) {
-    const deleteSubComment = comments
+    const deleteSubComment = comments;
     deleteSubComment.forEach((comment, index) => {
       if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
+        deleteSubComment[index].subComments = comment.subComments.filter(
+          (item) => item.id !== subComment.id
+        );
       }
-    })
-    setComments([...deleteSubComment])
+    });
+    setComments([...deleteSubComment]);
   }
 
   const toggleTabs = (index) => {
@@ -201,256 +211,320 @@ export const TicketFullScreen = ({}) => {
   };
 
   return (
-      <section className="ticket-full-screen">
-        <ProfileHeader />
-        <Navigation />
-        <div className="container">
-          <div className="tracker__content">
-            <ProfileBreadcrumbs
-                links={[
-                  { name: "Главная", link: "/profile" },
-                  { name: "Трекер", link: "/profile/tracker" },
-                ]}
-            />
-            <h2 className="tracker__title">Управление проектами с трекером</h2>
-          </div>
+    <section className="ticket-full-screen">
+      <ProfileHeader />
+      <Navigation />
+      <div className="container">
+        <div className="tracker__content">
+          <ProfileBreadcrumbs
+            links={[
+              { name: "Главная", link: "/profile" },
+              { name: "Трекер", link: "/profile/tracker" },
+            ]}
+          />
+          <h2 className="tracker__title">Управление проектами с трекером</h2>
         </div>
-        <div className="tracker__tabs">
-          <div className="tracker__tabs__head">
-            <Link
-                to="/profile/tracker"
-                className="tab active-tab"
-                onClick={() => toggleTabs(1)}
-            >
-              <img src={project} alt="img" />
-              <p>Проекты </p>
-            </Link>
-            <Link
-                to="/profile/tracker"
-                className="tab"
-                onClick={() => toggleTabs(2)}
-            >
-              <img src={tasks} alt="img" />
-              <p>Все мои задачи</p>
-            </Link>
-            <Link
-                to="/profile/tracker"
-                className="tab"
-                onClick={() => toggleTabs(3)}
-            >
-              <img src={archive} alt="img" />
-              <p>Архив</p>
-            </Link>
-          </div>
-          {loader ? <Loader /> :
-              <>
-                <div className="tracker__tabs__content content-tabs">
-                  <div className="tasks__head">
-                    <div className="tasks__head__wrapper">
-                      <h4>Проект : {projectBoard.name}</h4>
+      </div>
+      <div className="tracker__tabs">
+        <div className="tracker__tabs__head">
+          <Link
+            to="/profile/tracker"
+            className="tab active-tab"
+            onClick={() => toggleTabs(1)}
+          >
+            <img src={project} alt="img" />
+            <p>Проекты </p>
+          </Link>
+          <Link
+            to="/profile/tracker"
+            className="tab"
+            onClick={() => toggleTabs(2)}
+          >
+            <img src={tasks} alt="img" />
+            <p>Все мои задачи</p>
+          </Link>
+          <Link
+            to="/profile/tracker"
+            className="tab"
+            onClick={() => toggleTabs(3)}
+          >
+            <img src={archive} alt="img" />
+            <p>Архив</p>
+          </Link>
+        </div>
+        {loader ? (
+          <Loader />
+        ) : (
+          <>
+            <div className="tracker__tabs__content content-tabs">
+              <div className="tasks__head">
+                <div className="tasks__head__wrapper">
+                  <h4>Проект : {projectBoard.name}</h4>
 
-                      <TrackerModal
-                          active={modalAddWorker}
-                          setActive={setModalAddWorker}
-                      ></TrackerModal>
+                  <TrackerModal
+                    active={modalAddWorker}
+                    setActive={setModalAddWorker}
+                  ></TrackerModal>
 
-                      <div className="tasks__head__persons">
-                        {/*<img src={avatarTest} alt="avatar" />*/}
-                        {/*<img src={avatarTest} alt="avatar" />*/}
-                        <span className="countPersons">{projectBoard.projectUsers?.length}</span>
-                        <span
-                            className="addPerson"
-                            onClick={() => {
-                              setPersonListOpen(true)
-                            }}
-                        >
-                  +
-                </span>
-                        <p>добавить участника</p>
-                        {personListOpen &&
-                            <div className='persons__list'>
-                              <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                              <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                              <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                              <div className='persons__list__items'>
-                                {projectBoard.projectUsers?.map((person) => {
-                                  return <div className='persons__list__item' key={person.user_id}>
-                                    <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                                    <span>{person.user.fio}</span>
-                                    <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
-                                  </div>
-                                })
-                                }
-                              </div>
-                              <div className='persons__list__add'
-                                   onClick={() => {
-                                     dispatch(modalToggle("addWorker"));
-                                     setModalAddWorker(true);
-                                     setPersonListOpen(false)
-                                   }}
-                              >
-                                <span className='addPerson'>+</span>
-                                <p>Добавить участников</p>
-                              </div>
-                            </div>
-                        }
-                      </div>
-                      <Link to={`/profile/tracker`} className="link">
-                        <div className="tasks__head__back">
-                          <p>Вернуться на проекты</p>
-                          <img src={arrow} alt="arrow" />
+                  <div className="tasks__head__persons">
+                    <span className="countPersons">
+                      {projectBoard.projectUsers?.length}
+                    </span>
+                    <span
+                      className="addPerson"
+                      onClick={() => {
+                        setPersonListOpen(true);
+                      }}
+                    >
+                      +
+                    </span>
+                    <p>добавить участника</p>
+                    {personListOpen && (
+                      <div className="persons__list">
+                        <img
+                          className="persons__list__close"
+                          src={close}
+                          alt="close"
+                          onClick={() => setPersonListOpen(false)}
+                        />
+                        <div className="persons__list__count">
+                          <span>{projectBoard.projectUsers?.length}</span>
+                          участник
                         </div>
-                      </Link>
+                        <div className="persons__list__info">
+                          В проекте - <span>“{projectBoard.name}”</span>
+                        </div>
+                        <div className="persons__list__items">
+                          {projectBoard.projectUsers?.map((person) => {
+                            return (
+                              <div
+                                className="persons__list__item"
+                                key={person.user_id}
+                              >
+                                <img
+                                  className="avatar"
+                                  src={urlForLocal(person.user.avatar)}
+                                  alt="avatar"
+                                />
+                                <span>{person.user.fio}</span>
+                                <img
+                                  className="delete"
+                                  src={close}
+                                  alt="delete"
+                                  onClick={() => deletePerson(person.user_id)}
+                                />
+                              </div>
+                            );
+                          })}
+                        </div>
+                        <div
+                          className="persons__list__add"
+                          onClick={() => {
+                            dispatch(modalToggle("addWorker"));
+                            setModalAddWorker(true);
+                            setPersonListOpen(false);
+                          }}
+                        >
+                          <span className="addPerson">+</span>
+                          <p>Добавить участников</p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                  <Link to={`/profile/tracker`} className="link">
+                    <div className="tasks__head__back">
+                      <p>Вернуться на проекты</p>
+                      <img src={arrow} alt="arrow" />
                     </div>
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <div className="modal-tiket__content ticket">
+              <div className="content ticket-whith">
+                <div className="content__task">
+                  <span>Задача</span>
+                  {editOpen ? (
+                    <input
+                      value={inputsValue.title}
+                      onChange={(e) => {
+                        setInputsValue((prevValue) => ({
+                          ...prevValue,
+                          title: e.target.value,
+                        }));
+                      }}
+                    />
+                  ) : (
+                    <h5>{inputsValue.title}</h5>
+                  )}
+                  <div className="content__description">
+                    {editOpen ? (
+                      <input
+                        value={inputsValue.description}
+                        onChange={(e) => {
+                          setInputsValue((prevValue) => ({
+                            ...prevValue,
+                            description: e.target.value,
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <p>{inputsValue.description}</p>
+                    )}
+                  </div>
+                  <div className="content__communication">
+                    <p className="tasks">
+                      <BaseButton
+                        onClick={() => {
+                          dispatch(modalToggle("addSubtask"));
+                          setModalAddWorker(true);
+                        }}
+                        styles={"button-green-add"}
+                      >
+                        <img src={plus}></img>
+                        Добавить под задачу
+                      </BaseButton>
+                    </p>
+                    <p className="file">
+                      <button>
+                        <img src={file} alt="file"></img>
+                        Загрузить файл
+                      </button>
+                      <span>{0}</span>
+                      Файлов
+                    </p>
+                  </div>
+                  <div className="content__input">
+                    <input
+                      placeholder="Оставить комментарий"
+                      value={inputsValue.comment}
+                      onChange={(e) => {
+                        setInputsValue((prevValue) => ({
+                          ...prevValue,
+                          comment: e.target.value,
+                        }));
+                      }}
+                    />
+                    <img src={send} onClick={createComment} alt="send"></img>
+                  </div>
+                  <div className="comments__list">
+                    {comments.map((comment) => {
+                      return (
+                        <TrackerTaskComment
+                          key={comment.id}
+                          taskId={taskInfo.id}
+                          comment={comment}
+                          commentDelete={commentDelete}
+                          addSubComment={addSubComment}
+                          subCommentDelete={subCommentDelete}
+                        />
+                      );
+                    })}
                   </div>
                 </div>
-                <div className="modal-tiket__content ticket">
-                  <div className="content ticket-whith">
-                    <div className="content__task">
-                      <span>Задача</span>
-                      {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-                        setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-                      }} /> :<h5>{inputsValue.title}</h5>}
-                      <div className="content__description">
-                        {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                          setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-                        }}/> :<p>{inputsValue.description}</p>}
-                        {/*<img src={task} className="image-task"></img>*/}
-                      </div>
-                      <div className="content__communication">
-                        <p className="tasks">
-                          <button
-                              onClick={() => {
-                                dispatch(modalToggle("addSubtask"));
-                                setModalAddWorker(true);
-                              }}
-                          >
-                            <img src={plus} alt='plus'></img>
-                            Добавить под задачу
-                          </button>
-                        </p>
-                        <p className="file">
-                          <button>
-                            <img src={file} alt='file'></img>
-                            Загрузить файл
-                          </button>
-                          <span>{0}</span>
-                          Файлов
-                        </p>
-                      </div>
-                      <div className="content__input">
-                        <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                          setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-                        }} />
-                        <img src={send} onClick={createComment} alt='send'></img>
-                      </div>
-                      <div className='comments__list'>
-                        {comments.map((comment) => {
-                          return <TrackerTaskComment
-                              key={comment.id}
-                              taskId={taskInfo.id}
-                              comment={comment}
-                              commentDelete={commentDelete}
-                              addSubComment={addSubComment}
-                              subCommentDelete={subCommentDelete}
-                          />
-                        })
-
-                        }
-                      </div>
-                    </div>
+              </div>
+              <div className="workers">
+                <div className="workers_box">
+                  <p className="workers__creator">
+                    Создатель : <span>{taskInfo.user?.fio}</span>
+                  </p>
+                  <div>
+                    {Boolean(taskInfo.taskUsers?.length) &&
+                      taskInfo.taskUsers.map((worker, index) => {
+                        return (
+                          <div className="worker" key={index}>
+                            <img src={worker.avatar} alt="worket"></img>
+                            <p>{worker.name}</p>
+                          </div>
+                        );
+                      })}
                   </div>
-                  <div className="workers">
-                    <div className="workers_box">
-                      <p className="workers__creator">
-                        Создатель : <span>{taskInfo.user?.fio}</span>
-                      </p>
-                      <div>
-                        {Boolean(taskInfo.taskUsers?.length) &&
-                            taskInfo.taskUsers.map((worker, index) => {
-                              return (
-                                  <div className="worker" key={index}>
-                                    <img src={worker.avatar} alt='worket'></img>
-                                    <p>{worker.name}</p>
-                                  </div>
-                              );
-                            })}
-                      </div>
 
-                      <div className="add-worker moreItems">
-                        <button
-                            onClick={() => {
-                              dispatch(modalToggle("addWorker"));
-                              setModalAddWorker(true);
-                            }}
-                        >
-                          +
-                        </button>
-                        <span>Добавить исполнителя</span>
-                      </div>
-                      <div className="add-worker moreItems">
-                        <button
-                            onClick={() => {
-                              dispatch(modalToggle("addWorker"));
-                              setModalAddWorker(true);
-                            }}
-                        >
-                          +
-                        </button>
-                        <span>Добавить участников</span>
-                      </div>
-                    </div>
+                  <div className="add-worker moreItems">
+                    <button
+                      onClick={() => {
+                        dispatch(modalToggle("addWorker"));
+                        setModalAddWorker(true);
+                      }}
+                    >
+                      +
+                    </button>
+                    <span>Добавить исполнителя</span>
+                  </div>
+                  <div className="add-worker moreItems">
+                    <button
+                      onClick={() => {
+                        dispatch(modalToggle("addWorker"));
+                        setModalAddWorker(true);
+                      }}
+                    >
+                      +
+                    </button>
+                    <span>Добавить участников</span>
+                  </div>
+                </div>
 
-                    <div className="workers_box-middle">
-                      <div className="time">
-                        <img src={watch} alt='watch'></img>
-                        <span>Длительность : </span>
-                        <p>{"0:00:00"}</p>
-                      </div>
+                <div className="workers_box-middle">
+                  <div className="time">
+                    <img src={watch} alt="watch"></img>
+                    <span>Длительность : </span>
+                    <p>{"0:00:00"}</p>
+                  </div>
 
-                      {timerStart ?
-                          <button className="stop" onClick={() => stopTaskTimer()}>
-                            Остановить
-                          </button>
-                          :
-                          <button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
-                            Начать делать <img src={arrow2} alt='arrow'></img>
-                          </button>
+                  {timerStart ? (
+                    <button className="stop" onClick={() => stopTaskTimer()}>
+                      Остановить
+                    </button>
+                  ) : (
+                    <button
+                      className={
+                        taskInfo.executor_id ===
+                        Number(localStorage.getItem("id"))
+                          ? "start"
+                          : "start disable"
                       }
-                    </div>
+                      onClick={() => startTaskTimer()}
+                    >
+                      Начать делать <img src={arrow2} alt="arrow"></img>
+                    </button>
+                  )}
+                </div>
 
-                    <div className="workers_box-bottom">
-                      <div className={editOpen ? 'edit' : ''} onClick={() => {
-                        if(editOpen) {
-                          setEditOpen(!editOpen)
-                          editTask()
-                        } else {
-                          setEditOpen(!editOpen)
-                        }
-                      }}>
-                        <img src={edit} alt='edit'></img>
-                        <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
-                      </div>
-                      <div>
-                        <img src={link} alt='link'></img>
-                        <p>ссылка на проект</p>
-                      </div>
-                      <div>
-                        <img src={archive2} alt='arch'></img>
-                        <p>в архив</p>
-                      </div>
-                      <div onClick={deleteTask}>
-                        <img src={del} alt='delete'></img>
-                        <p>удалить</p>
-                      </div>
-                    </div>
+                <div className="workers_box-bottom">
+                  <div
+                    className={editOpen ? "edit" : ""}
+                    onClick={() => {
+                      if (editOpen) {
+                        setEditOpen(!editOpen);
+                        editTask();
+                      } else {
+                        setEditOpen(!editOpen);
+                      }
+                    }}
+                  >
+                    <img src={edit} alt="edit"></img>
+                    <p>{editOpen ? "сохранить" : "редактировать"}</p>
+                  </div>
+                  <div>
+                    <img src={link} alt="link"></img>
+                    <p>ссылка на проект</p>
+                  </div>
+                  <div>
+                    <img src={archive2} alt="arch"></img>
+                    <p>в архив</p>
+                  </div>
+                  <div onClick={deleteTask}>
+                    <img src={del} alt="delete"></img>
+                    <p>удалить</p>
                   </div>
                 </div>
-              </>
-          }
-        </div>
-        <Footer />
-      </section>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+      <Footer />
+    </section>
   );
 };
 
diff --git a/src/components/UI/ModalTicket/ModalTicket.jsx b/src/components/UI/ModalTicket/ModalTicket.jsx
deleted file mode 100644
index ba3b2025..00000000
--- a/src/components/UI/ModalTicket/ModalTicket.jsx
+++ /dev/null
@@ -1,484 +0,0 @@
-import React, {useEffect, useState} from "react";
-import { Link } from "react-router-dom";
-import TrackerModal from "../../../components/Modal/TrackerModal/TrackerModal";
-import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
-import { apiRequest } from "../../../api/request";
-import { useDispatch } from "react-redux";
-import "./modalTicket.scss"
-import {
-  modalToggle,
-  setProjectBoardFetch,
-} from "../../../redux/projectsTrackerSlice";
-
-import category from "../../../assets/icons/category.svg";
-import watch from "../../../assets/icons/watch.svg";
-import file from "../../../assets/icons/fileModal.svg";
-import arrow from "../../../assets/icons/arrows/arrowStart.png";
-import link from "../../../assets/icons/link.svg";
-import archive from "../../../assets/icons/archive.svg";
-import del from "../../../assets/icons/delete.svg";
-import edit from "../../../assets/icons/edit.svg";
-import send from "../../../assets/icons/send.svg";
-import plus from "../../../assets/icons/plus.svg";
-import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg";
-import close from "../../../assets/icons/closeProjectPersons.svg";
-
-import {urlForLocal, getCorrectRequestDate} from "../../../utils/helper";
-
-export const ModalTiсket = ({
-  active,
-  setActive,
-  task,
-  projectId,
-  projectName,
-  projectUsers
-}) => {
-  const dispatch = useDispatch();
-  const [addSubtask, setAddSubtask] = useState(false);
-  const [editOpen, setEditOpen] = useState(false);
-  const [inputsValue, setInputsValue] = useState({title: task.title, description: task.description, comment: ''});
-  const [comments, setComments] = useState([]);
-  const [dropListOpen, setDropListOpen] = useState(false)
-  const [dropListMembersOpen, setDropListMembersOpen] = useState(false)
-  const [executor, setExecutor] = useState(task.executor)
-  const [members, setMembers] = useState(task.taskUsers)
-  const [users, setUsers] = useState([])
-  const [timerStart, setTimerStart] = useState(false)
-  const [timerInfo, setTimerInfo] = useState({})
-  const [currentTimerCount, setCurrentTimerCount] = useState({
-    hours: 0,
-    minute: 0,
-    seconds: 0
-  })
-  const [timerId, setTimerId] = useState(null)
-
-  function deleteTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        status: 0,
-      },
-    }).then((res) => {
-      setActive(false);
-      dispatch(setProjectBoardFetch(projectId));
-    });
-  }
-
-  function editTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        title: inputsValue.title,
-        description: inputsValue.description
-      },
-    }).then((res) => {
-      dispatch(setProjectBoardFetch(projectId));
-    });
-  }
-
-  function createComment() {
-    apiRequest("/comment/create", {
-      method: "POST",
-      data: {
-        text: inputsValue.comment,
-        entity_type: 2,
-        entity_id: task.id
-      }
-    }).then((res) => {
-      let newComment = res
-      newComment.created_at = new Date()
-      newComment.subComments = []
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setComments((prevValue) => ([...prevValue, newComment]))
-    })
-  }
-
-  function commentDelete(comment) {
-    setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
-    if (comment.subComments.length) {
-      // promiseAll
-      comment.subComments.forEach((subComment) => {
-        apiRequest("/comment/update", {
-          method: "PUT",
-          data: {
-            comment_id: subComment.id,
-            status: 0
-          }
-        }).then(() => {
-        })
-      })
-    }
-  }
-
-  function addSubComment(commentId, subComment) {
-    const addSubComment = comments
-    addSubComment.forEach((comment) => {
-      if (comment.id === commentId) {
-        comment.subComments.push(subComment)
-      }
-    })
-    setComments(addSubComment)
-  }
-
-  function subCommentDelete(subComment) {
-    const deleteSubComment = comments
-    deleteSubComment.forEach((comment, index) => {
-      if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
-      }
-    })
-    setComments([...deleteSubComment])
-  }
-
-  function startTaskTimer() {
-    apiRequest("/timer/create", {
-      method: "POST",
-      data: {
-        entity_type: 2,
-        entity_id: task.id,
-        created_at: getCorrectRequestDate(new Date())
-      }
-    }).then((res) => {
-      setTimerStart(true)
-      setTimerInfo(res)
-      startTimer()
-    })
-  }
-
-  function stopTaskTimer() {
-    apiRequest("/timer/update", {
-      method: "PUT",
-      data: {
-        timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date())
-      }
-    }).then(() => {
-      setTimerStart(false)
-      clearInterval(timerId)
-    })
-  }
-
-  function taskExecutor(person) {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        executor_id: person.user_id
-      },
-    }).then((res) => {
-      setDropListOpen(false)
-      setExecutor(res.executor)
-    });
-  }
-
-  function deleteTaskExecutor() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        executor_id: 0
-      },
-    }).then(() => {
-      setExecutor(null)
-    });
-  }
-
-  function addMember(person) {
-    apiRequest("/task/add-user-to-task", {
-      method: "POST",
-      data: {
-        task_id: task.id,
-        user_id: person.user_id
-      },
-    }).then((res) => {
-      setDropListMembersOpen(false)
-      setMembers((prevValue) => ([...prevValue, res]))
-    });
-  }
-
-  function deleteMember(person) {
-    apiRequest("/task/del-user", {
-      method: "DELETE",
-      data: {
-        task_id: task.id,
-        user_id: person.user_id
-      },
-    }).then(() => {
-      setMembers(members.filter((item) => item.user_id !== person.user_id))
-    });
-  }
-
-  useEffect(() => {
-    apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
-      const comments = res.reduce((acc, cur) => {
-        if (!cur.parent_id) {
-          acc.push({...cur, subComments: []})
-        } else {
-          acc.forEach((item) => {
-            if (item.id === cur.parent_id) item.subComments.push(cur)
-          })
-        }
-        return acc
-      }, [])
-      setComments(comments)
-    })
-    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
-      let timerSeconds = 0
-      res.length && res.forEach((time) => {
-        timerSeconds += time.deltaSeconds
-        setCurrentTimerCount({
-          hours: Math.floor(timerSeconds / 60 / 60),
-          minute: Math.floor(timerSeconds / 60 % 60),
-          seconds: timerSeconds % 60}
-        )
-        updateTimerHours = Math.floor(timerSeconds / 60 / 60)
-        updateTimerMinute = Math.floor(timerSeconds / 60 % 60)
-        updateTimerSec = timerSeconds % 60
-        if (!time.stopped_at) {
-          setTimerStart(true)
-          startTimer()
-          setTimerInfo(time)
-        }
-      })
-    })
-  }, [])
-
-  function startTimer () {
-    setTimerId(setInterval(() => {
-      run()
-    }, 1000))
-  }
-
-  let updateTimerSec = currentTimerCount.seconds, updateTimerMinute = currentTimerCount.minute, updateTimerHours = currentTimerCount.hours
-
-  function run () {
-    updateTimerSec++
-    if (updateTimerSec > 60) {
-      updateTimerMinute++
-      updateTimerSec = 0
-    }
-    if (updateTimerMinute === 60) {
-      updateTimerMinute = 0
-      updateTimerHours++
-    }
-
-    return setCurrentTimerCount({
-      hours: updateTimerHours,
-      minute: updateTimerMinute,
-      seconds: updateTimerSec
-    })
-  }
-
-  function correctTimerTime (time) {
-    if (time < 10) return `0${time}`
-    if (time > 10) return time
-  }
-
-
-  useEffect(() => {
-    let ids = members.map((user) => user.user_id)
-    setUsers(projectUsers.reduce((acc, cur) => {
-      if (!ids.includes(cur.user_id)) acc.push(cur)
-      return acc
-    }, []))
-  }, [members])
-
-
-  return (
-    <div
-      className={active ? "modal-tiket active" : "modal-tiket"}
-      onClick={() => setActive(false)}
-    >
-      <div
-        className="modal-tiket__content"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="content">
-          <h3 className="title-project">
-            <img src={category} className="title-project__category"></img>
-            Проект: {projectName}
-            <Link
-              to={`/tracker/task/${task.id}`}
-              className="title-project__full"
-            >
-              <img src={fullScreen}></img>
-            </Link>
-          </h3>
-
-          <div className="content__task">
-            <span>Задача</span>
-            {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-              setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-            }} /> :<h5>{inputsValue.title}</h5>}
-            <div className="content__description">
-              {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-              }}/> :<p>{inputsValue.description}</p>}
-              {/*<img src={taskImg} className="image-task"></img>*/}
-            </div>
-            <div className="content__communication">
-              <p className="tasks">
-                <button
-                  onClick={() => {
-                    dispatch(modalToggle("addSubtask"));
-                    setAddSubtask(true);
-                  }}
-                >
-                  <img src={plus}></img>
-                  Добавить под задачу
-                </button>
-              </p>
-              <p className="file">
-                <button>
-                  <img src={file}></img>
-                  Загрузить файл
-                </button>
-                <span>{0}</span>
-                Файлов
-              </p>
-            </div>
-            <div className="content__input">
-              <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-              }} />
-              <img src={send} onClick={createComment}></img>
-            </div>
-            <div className='comments__list'>
-              {comments.map((comment) => {
-                return <TrackerTaskComment
-                    key={comment.id}
-                    taskId={task.id}
-                    comment={comment}
-                    commentDelete={commentDelete}
-                    addSubComment={addSubComment}
-                    subCommentDelete={subCommentDelete}
-                />
-                })
-              }
-            </div>
-          </div>
-        </div>
-        <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 ?
-              <div className='executor'>
-                <p>Исполнитель: {executor.fio}</p>
-                <img src={urlForLocal(executor.avatar)} alt='avatar' />
-                <img src={close} className='delete' onClick={() => deleteTaskExecutor()} />
-              </div> :
-              <div className="add-worker moreItems ">
-                <button onClick={() => setDropListOpen(true)}>+</button>
-                <span>Добавить исполнителя</span>
-                {dropListOpen &&
-                  <div className='dropdownList'>
-                    <img src={close} className='dropdownList__close' onClick={() => setDropListOpen(false)} />
-                    {projectUsers.map((person) => {
-                      return <div className='dropdownList__person' key={person.user_id} onClick={() => taskExecutor(person)}>
-                        <span>{person.user.fio}</span>
-                        <img src={urlForLocal(person.user.avatar)} />
-                      </div>
-                    })
-                    }
-                  </div>
-                }
-              </div>
-            }
-
-            {Boolean(members.length) &&
-            <div className='members'>
-              <p>Участники:</p>
-                <div className='members__list'>
-                  {members.map((member) => {
-                    return <div className='worker' key={member.user_id}>
-                      <p>{member.fio}</p>
-                      <img src={urlForLocal(member.avatar)} />
-                      <img src={close} className='delete' onClick={() => deleteMember(member)} />
-                    </div>
-                  })
-                  }
-                </div>
-            </div>
-            }
-
-            <div className="add-worker moreItems">
-              <button onClick={() => setDropListMembersOpen(true)}>+</button>
-              <span>Добавить участников</span>
-              {dropListMembersOpen &&
-              <div className='dropdownList'>
-                <img src={close} className='dropdownList__close' onClick={() => setDropListMembersOpen(false)} />
-                {users.length ? users.map((person) => {
-                  return <div className='dropdownList__person' key={person.user_id} onClick={() => addMember(person)}>
-                    <span>{person.user.fio}</span>
-                    <img src={urlForLocal(person.user.avatar)} />
-                  </div>
-                }) : <p className='noUsers'>Нет пользователей</p>
-                }
-              </div>
-              }
-            </div>
-          </div>
-
-          <div className="workers_box-middle">
-            <div className="time">
-              <img src={watch}></img>
-              <span>Длительность : </span>
-              <p>
-                {correctTimerTime(currentTimerCount.hours)}:{correctTimerTime(currentTimerCount.minute)}:{correctTimerTime(currentTimerCount.seconds)}
-              </p>
-            </div>
-
-            {timerStart ?
-              <button className="stop" onClick={() => stopTaskTimer()}>
-                Остановить
-              </button>
-                :
-              <button className={task.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
-                Начать делать <img src={arrow}></img>
-              </button>
-            }
-          </div>
-
-          <div className="workers_box-bottom">
-            <div className={editOpen ? 'edit' : ''} onClick={() => {
-              if(editOpen) {
-                setEditOpen(!editOpen)
-                editTask()
-              } else {
-                setEditOpen(!editOpen)
-              }
-            }}>
-              <img src={edit}></img>
-              <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
-            </div>
-            <div>
-              <img src={link}></img>
-              <p>ссылка на проект</p>
-            </div>
-            <div onClick={deleteTask}>
-              <img src={archive}></img>
-              <p>в архив</p>
-            </div>
-            <div onClick={deleteTask}>
-              <img src={del}></img>
-              <p>удалить</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <TrackerModal
-        active={addSubtask}
-        setActive={setAddSubtask}
-        defautlInput={task.column_id}
-      ></TrackerModal>
-    </div>
-  );
-};
-
-export default ModalTiсket;
diff --git a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
deleted file mode 100644
index fe9beaa7..00000000
--- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
+++ /dev/null
@@ -1,456 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
-import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { Footer } from "@components/Common/Footer/Footer";
-import { Link, useParams, useNavigate } from "react-router-dom";
-import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
-import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
-import { Navigation } from "../../Navigation/Navigation";
-import {Loader} from "@components/Common/Loader/Loader";
-
-import {useDispatch, useSelector} from "react-redux";
-import {
-  deletePersonOnProject,
-  modalToggle,
-  setProjectBoardFetch,
-  setToggleTab,
-  getProjectBoard,
-  getBoarderLoader,
-} from "../../../redux/projectsTrackerSlice";
-import { apiRequest } from "../../../api/request";
-
-import project from "../../../images/trackerProject.svg";
-import watch from "../../../images/watch.png";
-import file from "../../../images/fileModal.svg";
-import send from "../../../images/send.svg";
-import arrow2 from "../../../images/arrowStart.png";
-import plus from "../../../images/plus.svg";
-import tasks from "../../../images/trackerTasks.svg";
-import archive from "../../../images/archiveTracker.svg";
-import arrow from "../../../images/arrowCalendar.png";
-import link from "../../../images/link.svg";
-import archive2 from "../../../images/archive.svg";
-import del from "../../../images/delete.svg";
-import edit from "../../../images/edit.svg";
-import close from "../../../images/closeProjectPersons.svg";
-
-import "./ticketFullScreen.scss";
-import {getCorrectRequestDate, urlForLocal} from "../../../helper";
-
-export const TicketFullScreen = ({}) => {
-  const [modalAddWorker, setModalAddWorker] = useState(false);
-  const ticketId = useParams();
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const projectBoard = useSelector(getProjectBoard);
-  const boardLoader = useSelector(getBoarderLoader);
-  const [taskInfo, setTaskInfo] = useState({});
-  const [editOpen, setEditOpen] = useState(false);
-  const [inputsValue, setInputsValue] = useState({});
-  const [loader, setLoader] = useState(true);
-  const [comments, setComments] = useState([]);
-  const [personListOpen, setPersonListOpen] = useState(false)
-  const [timerStart, setTimerStart] = useState(false)
-  const [timerInfo, setTimerInfo] = useState({})
-
-  useEffect(() => {
-    apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
-      setTaskInfo(taskInfo);
-      setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
-      apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
-        const comments = res.reduce((acc, cur) => {
-          if (!cur.parent_id) {
-            acc.push({...cur, subComments: []})
-          } else {
-            acc.forEach((item) => {
-              if (item.id === cur.parent_id) item.subComments.push(cur)
-            })
-          }
-          return acc
-        }, [])
-        setComments(comments)
-      })
-      taskInfo.timers.forEach((time) => {
-        if (!time.stopped_at) {
-          setTimerStart(true)
-          setTimerInfo(time)
-        }
-      })
-      dispatch(setProjectBoardFetch(taskInfo.project_id));
-      setLoader(boardLoader)
-    });
-  }, []);
-
-  function deleteTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: ticketId.id,
-        status: 0,
-      },
-    }).then((res) => {
-      navigate(`/tracker/project/${taskInfo.project_id}`);
-    });
-  }
-
-  function editTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: taskInfo.id,
-        title: inputsValue.title,
-        description: inputsValue.description
-      },
-    }).then(() => {
-    });
-  }
-
-  function createComment() {
-    apiRequest("/comment/create", {
-      method: "POST",
-      data: {
-        text: inputsValue.comment,
-        entity_type: 2,
-        entity_id: taskInfo.id
-      }
-    }).then((res) => {
-      let newComment = res
-      newComment.created_at = new Date()
-      newComment.subComments = []
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setComments((prevValue) => ([...prevValue, newComment]))
-    })
-  }
-
-  function startTaskTimer() {
-    apiRequest("/timer/create", {
-      method: "POST",
-      data: {
-        entity_type: 2,
-        entity_id: taskInfo.id,
-        created_at: getCorrectRequestDate(new Date())
-      }
-    }).then((res) => {
-      setTimerStart(true)
-      setTimerInfo(res)
-    })
-  }
-
-  function stopTaskTimer() {
-    apiRequest("/timer/update", {
-      method: "PUT",
-      data: {
-        timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date())
-      }
-    }).then(() => setTimerStart(false))
-  }
-
-  function deletePerson(userId) {
-    apiRequest("/project/del-user", {
-      method: "DELETE",
-      data: {
-        project_id: projectBoard.id,
-        user_id: userId
-      },
-    }).then((res) => {
-      dispatch(deletePersonOnProject(userId))
-    });
-  }
-
-  function commentDelete(comment) {
-    setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
-    if (comment.subComments.length) {
-      comment.subComments.forEach((subComment) => {
-        apiRequest("/comment/update", {
-          method: "PUT",
-          data: {
-            comment_id: subComment.id,
-            status: 0
-          }
-        }).then(() => {
-        })
-      })
-    }
-  }
-
-  function addSubComment(commentId, subComment) {
-    const addSubComment = comments
-    addSubComment.forEach((comment) => {
-      if (comment.id === commentId) {
-        comment.subComments.push(subComment)
-      }
-    })
-    setComments(addSubComment)
-  }
-
-  function subCommentDelete(subComment) {
-    const deleteSubComment = comments
-    deleteSubComment.forEach((comment, index) => {
-      if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
-      }
-    })
-    setComments([...deleteSubComment])
-  }
-
-  const toggleTabs = (index) => {
-    dispatch(setToggleTab(index));
-  };
-
-  return (
-    <section className="ticket-full-screen">
-      <ProfileHeader />
-      <Navigation />
-      <div className="container">
-        <div className="tracker__content">
-          <ProfileBreadcrumbs
-            links={[
-              { name: "Главная", link: "/profile" },
-              { name: "Трекер", link: "/profile/tracker" },
-            ]}
-          />
-          <h2 className="tracker__title">Управление проектами с трекером</h2>
-        </div>
-      </div>
-      <div className="tracker__tabs">
-        <div className="tracker__tabs__head">
-          <Link
-            to="/profile/tracker"
-            className="tab active-tab"
-            onClick={() => toggleTabs(1)}
-          >
-            <img src={project} alt="img" />
-            <p>Проекты </p>
-          </Link>
-          <Link
-            to="/profile/tracker"
-            className="tab"
-            onClick={() => toggleTabs(2)}
-          >
-            <img src={tasks} alt="img" />
-            <p>Все мои задачи</p>
-          </Link>
-          <Link
-            to="/profile/tracker"
-            className="tab"
-            onClick={() => toggleTabs(3)}
-          >
-            <img src={archive} alt="img" />
-            <p>Архив</p>
-          </Link>
-        </div>
-        {loader ? <Loader /> :
-        <>
-        <div className="tracker__tabs__content content-tabs">
-          <div className="tasks__head">
-            <div className="tasks__head__wrapper">
-              <h4>Проект : {projectBoard.name}</h4>
-
-              <TrackerModal
-                active={modalAddWorker}
-                setActive={setModalAddWorker}
-              ></TrackerModal>
-
-              <div className="tasks__head__persons">
-                {/*<img src={avatarTest} alt="avatar" />*/}
-                {/*<img src={avatarTest} alt="avatar" />*/}
-                <span className="countPersons">{projectBoard.projectUsers?.length}</span>
-                <span
-                  className="addPerson"
-                  onClick={() => {
-                    setPersonListOpen(true)
-                  }}
-                >
-                  +
-                </span>
-                <p>добавить участника</p>
-                {personListOpen &&
-                <div className='persons__list'>
-                  <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                  <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                  <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                  <div className='persons__list__items'>
-                    {projectBoard.projectUsers?.map((person) => {
-                      return <div className='persons__list__item' key={person.user_id}>
-                        <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                        <span>{person.user.fio}</span>
-                        <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
-                      </div>
-                    })
-                    }
-                  </div>
-                  <div className='persons__list__add'
-                       onClick={() => {
-                         dispatch(modalToggle("addWorker"));
-                         setModalAddWorker(true);
-                         setPersonListOpen(false)
-                       }}
-                  >
-                    <span className='addPerson'>+</span>
-                    <p>Добавить участников</p>
-                  </div>
-                </div>
-                }
-              </div>
-              <Link to={`/profile/tracker`} className="link">
-                <div className="tasks__head__back">
-                  <p>Вернуться на проекты</p>
-                  <img src={arrow} alt="arrow" />
-                </div>
-              </Link>
-            </div>
-          </div>
-        </div>
-        <div className="modal-tiket__content ticket">
-          <div className="content ticket-whith">
-            <div className="content__task">
-              <span>Задача</span>
-              {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-              }} /> :<h5>{inputsValue.title}</h5>}
-              <div className="content__description">
-                {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                  setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-                }}/> :<p>{inputsValue.description}</p>}
-                {/*<img src={task} className="image-task"></img>*/}
-              </div>
-              <div className="content__communication">
-                <p className="tasks">
-                  <button
-                    onClick={() => {
-                      dispatch(modalToggle("addSubtask"));
-                      setModalAddWorker(true);
-                    }}
-                  >
-                    <img src={plus}></img>
-                    Добавить под задачу
-                  </button>
-                </p>
-                <p className="file">
-                  <button>
-                    <img src={file}></img>
-                    Загрузить файл
-                  </button>
-                  <span>{0}</span>
-                  Файлов
-                </p>
-              </div>
-              <div className="content__input">
-                <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                  setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-                }} />
-                <img src={send} onClick={createComment}></img>
-              </div>
-              <div className='comments__list'>
-                {comments.map((comment) => {
-                  return <TrackerTaskComment
-                      key={comment.id}
-                      taskId={taskInfo.id}
-                      comment={comment}
-                      commentDelete={commentDelete}
-                      addSubComment={addSubComment}
-                      subCommentDelete={subCommentDelete}
-                  />
-                })
-
-                }
-              </div>
-            </div>
-          </div>
-          <div className="workers">
-            <div className="workers_box">
-              <p className="workers__creator">
-                Создатель : <span>{taskInfo.user?.fio}</span>
-              </p>
-              <div>
-                {Boolean(taskInfo.taskUsers?.length) &&
-                  taskInfo.taskUsers.map((worker, index) => {
-                    return (
-                      <div className="worker" key={index}>
-                        <img src={worker.avatar}></img>
-                        <p>{worker.name}</p>
-                      </div>
-                    );
-                  })}
-              </div>
-
-              <div className="add-worker moreItems">
-                <button
-                    onClick={() => {
-                      dispatch(modalToggle("addWorker"));
-                      setModalAddWorker(true);
-                    }}
-                >
-                  +
-                </button>
-                <span>Добавить исполнителя</span>
-              </div>
-              <div className="add-worker moreItems">
-                <button
-                  onClick={() => {
-                    dispatch(modalToggle("addWorker"));
-                    setModalAddWorker(true);
-                  }}
-                >
-                  +
-                </button>
-                <span>Добавить участников</span>
-              </div>
-            </div>
-
-            <div className="workers_box-middle">
-              <div className="time">
-                <img src={watch}></img>
-                <span>Длительность : </span>
-                <p>{"0:00:00"}</p>
-              </div>
-
-              {timerStart ?
-                  <button className="stop" onClick={() => stopTaskTimer()}>
-                    Остановить
-                  </button>
-                  :
-                  <button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
-                    Начать делать <img src={arrow2}></img>
-                  </button>
-              }
-            </div>
-
-            <div className="workers_box-bottom">
-              <div className={editOpen ? 'edit' : ''} onClick={() => {
-                if(editOpen) {
-                  setEditOpen(!editOpen)
-                  editTask()
-                } else {
-                  setEditOpen(!editOpen)
-                }
-              }}>
-                <img src={edit}></img>
-                <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
-              </div>
-              <div>
-                <img src={link}></img>
-                <p>ссылка на проект</p>
-              </div>
-              <div>
-                <img src={archive2}></img>
-                <p>в архив</p>
-              </div>
-              <div onClick={deleteTask}>
-                <img src={del}></img>
-                <p>удалить</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        </>
-        }
-      </div>
-      <Footer />
-    </section>
-  );
-};
-
-export default TicketFullScreen;
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index 6655b266..658e7cf2 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -1,44 +1,46 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Link, useParams } from "react-router-dom";
-import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
-import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { Footer } from "@components/Common/Footer/Footer";
-import { Navigation } from "../../components/Navigation/Navigation";
-import { Loader } from "@components/Common/Loader/Loader";
-import { urlForLocal } from '../../utils/helper'
-
 import { useDispatch, useSelector } from "react-redux";
-import { apiRequest } from "../../api/request";
+import { Link, useParams } from "react-router-dom";
+
 import {
-  getProjectBoard,
-  getBoarderLoader,
-  modalToggle,
-  moveProjectTask,
-  setProjectBoardFetch,
-  setToggleTab,
   activeLoader,
-  setColumnName,
-  setColumnId,
-  setColumnPriority,
   deletePersonOnProject,
   filterCreatedByMe,
   filteredParticipateTasks,
-  movePositionProjectTask
-} from "../../redux/projectsTrackerSlice";
+  getBoarderLoader,
+  getProjectBoard,
+  modalToggle,
+  movePositionProjectTask,
+  moveProjectTask,
+  setColumnId,
+  setColumnName,
+  setColumnPriority,
+  setProjectBoardFetch,
+  setToggleTab,
+} from "@redux/projectsTrackerSlice";
 
-import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
-import TrackerModal from "../../components/Modal/TrackerModal/TrackerModal";
+import { urlForLocal } from "@utils/helper";
 
-import project from "../../assets/icons/trackerProject.svg";
-import tasks from "../../assets/icons/trackerTasks.svg";
-import archive from "../../assets/icons/archiveTracker.svg";
-import commentsBoard from "../../assets/icons/commentsBoard.svg";
-import filesBoard from "../../assets/icons/filesBoard.svg";
-import arrow from "../../assets/icons/arrows/arrowCalendar.png";
-import del from "../../assets/icons/delete.svg";
-import edit from "../../assets/icons/edit.svg";
-import close from "../../assets/icons/close.png"
-import accept from "../../assets/images/accept.png";
+import { apiRequest } from "@api/request";
+
+import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
+import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
+import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+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 close from "assets/icons/close.png";
+import commentsBoard from "assets/icons/commentsBoard.svg";
+import del from "assets/icons/delete.svg";
+import edit from "assets/icons/edit.svg";
+import filesBoard from "assets/icons/filesBoard.svg";
+import project from "assets/icons/trackerProject.svg";
+import tasks from "assets/icons/trackerTasks.svg";
+import accept from "assets/images/accept.png";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
@@ -48,13 +50,14 @@ export const ProjectTracker = () => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [priorityTask, setPriorityTask] = useState(0);
   const [wrapperHover, setWrapperHover] = useState({});
-  const [taskHover, setTaskHover] = useState({})
+  const [taskHover, setTaskHover] = useState({});
   const [modalAdd, setModalAdd] = useState(false);
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
   const [selectedTicket, setSelectedTicket] = useState({});
-  const [personListOpen, setPersonListOpen] = useState(false)
-  const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] = useState(false)
-  const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false)
+  const [personListOpen, setPersonListOpen] = useState(false);
+  const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
+    useState(false);
+  const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
   const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
   const loader = useSelector(getBoarderLoader);
@@ -65,20 +68,20 @@ export const ProjectTracker = () => {
   }, []);
 
   useEffect(() => {
-    const tasksHover = {}
-    const columnHover = {}
+    const tasksHover = {};
+    const columnHover = {};
     if (Object.keys(projectBoard).length) {
       projectBoard.columns.forEach((column) => {
         setOpenColumnSelect((prevState) => ({
           ...prevState,
           [column.id]: false,
         }));
-        columnHover[column.id] = false
-        column.tasks.forEach(task => tasksHover[task.id] = false)
+        columnHover[column.id] = false;
+        column.tasks.forEach((task) => (tasksHover[task.id] = false));
       });
     }
-    setWrapperHover(columnHover)
-    setTaskHover(tasksHover)
+    setWrapperHover(columnHover);
+    setTaskHover(tasksHover);
   }, [projectBoard]);
 
   function dragStartHandler(e, task, columnId) {
@@ -86,35 +89,37 @@ export const ProjectTracker = () => {
   }
 
   function dragOverTaskHandler(e, task) {
-    e.preventDefault()
+    e.preventDefault();
     if (startWrapperIndexTest.current.task.id === task.id) {
-      return
+      return;
     }
-    setTaskHover((prevState) => ({[prevState]: false, [task.id]: true}))
+    setTaskHover((prevState) => ({ [prevState]: false, [task.id]: true }));
   }
 
-  function dragLeaveTaskHandler(e) {
-    setTaskHover((prevState) => ({[prevState]: false}))
+  function dragLeaveTaskHandler() {
+    setTaskHover((prevState) => ({ [prevState]: false }));
   }
 
   function dragEndTaskHandler() {
-    setTaskHover((prevState) => ({[prevState]: false}))
+    setTaskHover((prevState) => ({ [prevState]: false }));
     setWrapperHover((prevState) => ({
       [prevState]: false,
     }));
   }
 
   function dragDropTaskHandler(e, task, column) {
-    e.preventDefault()
+    e.preventDefault();
     if (task.id === startWrapperIndexTest.current.task.id) {
-      return
+      return;
     }
-    const finishTask = column.tasks.indexOf(task)
-    dispatch(movePositionProjectTask({
-      startTask: startWrapperIndexTest.current.task,
-      finishTask: task,
-      finishIndex: finishTask
-    }))
+    const finishTask = column.tasks.indexOf(task);
+    dispatch(
+      movePositionProjectTask({
+        startTask: startWrapperIndexTest.current.task,
+        finishTask: task,
+        finishIndex: finishTask,
+      })
+    );
   }
 
   function dragOverHandler(e) {
@@ -139,9 +144,10 @@ export const ProjectTracker = () => {
       [prevState]: false,
     }));
 
-    if (startWrapperIndexTest.current.index === columnId
-        ||
-        e.target.className.includes('__item')) {
+    if (
+      startWrapperIndexTest.current.index === columnId ||
+      e.target.className.includes("__item")
+    ) {
       return;
     }
 
@@ -159,7 +165,7 @@ export const ProjectTracker = () => {
     setSelectedTab(columnId);
     dispatch(modalToggle("createTiketProject"));
     setModalAdd(true);
-    setPriorityTask(length)
+    setPriorityTask(length);
   }
 
   function openTicket(e, task) {
@@ -168,7 +174,7 @@ export const ProjectTracker = () => {
   }
 
   function deleteColumn(column) {
-    const priorityColumns = []
+    const priorityColumns = [];
     apiRequest("/project-column/update-column", {
       method: "PUT",
       data: {
@@ -181,19 +187,19 @@ export const ProjectTracker = () => {
         for (let i = column.priority; i < projectBoard.columns.length; i++) {
           const currentColumn = {
             column_id: projectBoard.columns[i].id,
-            priority: i
-          }
-          priorityColumns.push(currentColumn)
+            priority: i,
+          };
+          priorityColumns.push(currentColumn);
         }
         apiRequest("/project-column/set-priority", {
           method: "POST",
           data: {
             project_id: projectBoard.id,
-            data: JSON.stringify(priorityColumns)
-          }
+            data: JSON.stringify(priorityColumns),
+          },
         }).then(() => {
           dispatch(setProjectBoardFetch(projectBoard.id));
-        })
+        });
       } else {
         dispatch(setProjectBoardFetch(projectBoard.id));
       }
@@ -205,33 +211,33 @@ export const ProjectTracker = () => {
       method: "DELETE",
       data: {
         project_id: projectBoard.id,
-        user_id: userId
+        user_id: userId,
       },
     }).then(() => {
-      dispatch(deletePersonOnProject(userId))
+      dispatch(deletePersonOnProject(userId));
     });
   }
 
   function filterParticipateTasks() {
     if (!checkBoxParticipateTasks) {
-      dispatch(filteredParticipateTasks(Number(localStorage.getItem('id'))))
+      dispatch(filteredParticipateTasks(Number(localStorage.getItem("id"))));
     } else {
-      dispatch(setProjectBoardFetch(projectId.id))
-      setCheckBoxParticipateTasks(false)
-      setCheckBoxMyTasks(false)
+      dispatch(setProjectBoardFetch(projectId.id));
+      setCheckBoxParticipateTasks(false);
+      setCheckBoxMyTasks(false);
     }
-    setCheckBoxParticipateTasks(!checkBoxParticipateTasks)
+    setCheckBoxParticipateTasks(!checkBoxParticipateTasks);
   }
 
   function filterMyTask() {
     if (!checkBoxMyTasks) {
-      dispatch(filterCreatedByMe(Number(localStorage.getItem('id'))))
+      dispatch(filterCreatedByMe(Number(localStorage.getItem("id"))));
     } else {
-      dispatch(setProjectBoardFetch(projectId.id))
-      setCheckBoxParticipateTasks(false)
-      setCheckBoxMyTasks(false)
+      dispatch(setProjectBoardFetch(projectId.id));
+      setCheckBoxParticipateTasks(false);
+      setCheckBoxMyTasks(false);
     }
-    setCheckBoxMyTasks(!checkBoxMyTasks)
+    setCheckBoxMyTasks(!checkBoxMyTasks);
   }
 
   return (
@@ -303,58 +309,85 @@ export const ProjectTracker = () => {
                     <p>добавить колонку</p>
                   </div>
                   <div className="tasks__head__persons">
-                    <span className="countPersons">{projectBoard.projectUsers?.length}</span>
+                    <span className="countPersons">
+                      {projectBoard.projectUsers?.length}
+                    </span>
                     <span
                       className="addPerson"
                       onClick={() => {
-                        setPersonListOpen(true)
+                        setPersonListOpen(true);
                       }}
                     >
                       +
                     </span>
                     <p>добавить участника</p>
-                    {personListOpen &&
-                    <div className='persons__list'>
-                      <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                      <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                      <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                      <div className='persons__list__items'>
-                        {projectBoard.projectUsers?.map((person) => {
-                          return <div className='persons__list__item' key={person.user_id}>
-                                    <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                                    <span>{person.user.fio}</span>
-                                    <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
-                                </div>
-                        })
-                        }
+                    {personListOpen && (
+                      <div className="persons__list">
+                        <img
+                          className="persons__list__close"
+                          src={close}
+                          alt="close"
+                          onClick={() => setPersonListOpen(false)}
+                        />
+                        <div className="persons__list__count">
+                          <span>{projectBoard.projectUsers?.length}</span>
+                          участник
+                        </div>
+                        <div className="persons__list__info">
+                          В проекте - <span>“{projectBoard.name}”</span>
+                        </div>
+                        <div className="persons__list__items">
+                          {projectBoard.projectUsers?.map((person) => {
+                            return (
+                              <div
+                                className="persons__list__item"
+                                key={person.user_id}
+                              >
+                                <img
+                                  className="avatar"
+                                  src={urlForLocal(person.user.avatar)}
+                                  alt="avatar"
+                                />
+                                <span>{person.user.fio}</span>
+                                <img
+                                  className="delete"
+                                  src={close}
+                                  alt="delete"
+                                  onClick={() => deletePerson(person.user_id)}
+                                />
+                              </div>
+                            );
+                          })}
+                        </div>
+                        <div
+                          className="persons__list__add"
+                          onClick={() => {
+                            dispatch(modalToggle("addWorker"));
+                            setModalAdd(true);
+                            setPersonListOpen(false);
+                          }}
+                        >
+                          <span className="addPerson">+</span>
+                          <p>Добавить участников</p>
+                        </div>
                       </div>
-                      <div className='persons__list__add'
-                           onClick={() => {
-                             dispatch(modalToggle("addWorker"));
-                             setModalAdd(true);
-                             setPersonListOpen(false)
-                           }}
-                      >
-                        <span className='addPerson'>+</span>
-                        <p>Добавить участников</p>
-                      </div>
-                    </div>
-                    }
+                    )}
                   </div>
-                  <div className="tasks__head__checkBox" onClick={filterParticipateTasks}>
+                  <div
+                    className="tasks__head__checkBox"
+                    onClick={filterParticipateTasks}
+                  >
                     <span>Участвую</span>
                     <div className="tasks__head__checkBox__box">
-                      {checkBoxParticipateTasks &&
-                        <img src={accept} alt='accept' />
-                      }
+                      {checkBoxParticipateTasks && (
+                        <img src={accept} alt="accept" />
+                      )}
                     </div>
                   </div>
                   <div className="tasks__head__checkBox" onClick={filterMyTask}>
                     <span>Мои</span>
                     <div className="tasks__head__checkBox__box">
-                      {checkBoxMyTasks &&
-                          <img src={accept} alt='accept' />
-                      }
+                      {checkBoxMyTasks && <img src={accept} alt="accept" />}
                     </div>
                   </div>
                   <Link to="/profile/tracker" className="tasks__head__back">
@@ -364,14 +397,16 @@ export const ProjectTracker = () => {
                 </div>
               </div>
 
-              {Boolean(modalActiveTicket) && <ModalTicket
+              {Boolean(modalActiveTicket) && (
+                <ModalTicket
                   active={modalActiveTicket}
                   setActive={setModalActiveTicket}
                   task={selectedTicket}
                   projectId={projectBoard.id}
                   projectName={projectBoard.name}
                   projectUsers={projectBoard.projectUsers}
-              />}
+                />
+              )}
 
               <div className="tasks__container">
                 {Boolean(projectBoard?.columns) &&
@@ -381,7 +416,7 @@ export const ProjectTracker = () => {
                       <div
                         key={column.id}
                         onDragOver={(e) => dragOverHandler(e)}
-                        onDragEnter={(e) => dragEnterHandler(column.id)}
+                        onDragEnter={() => dragEnterHandler(column.id)}
                         onDrop={(e) => dragDropHandler(e, column.id)}
                         className={`tasks__board ${
                           wrapperHover[column.id] ? "tasks__board__hover" : ""
@@ -392,7 +427,9 @@ export const ProjectTracker = () => {
                           <div>
                             <span
                               className="add"
-                              onClick={() => selectedTabTask(column.id, column.tasks.length)}
+                              onClick={() =>
+                                selectedTabTask(column.id, column.tasks.length)
+                              }
                             >
                               +
                             </span>
@@ -419,9 +456,9 @@ export const ProjectTracker = () => {
                                   [column.id]: false,
                                 }));
                                 dispatch(modalToggle("editColumn"));
-                                dispatch(setColumnName(column.title))
-                                dispatch(setColumnId(column.id))
-                                dispatch(setColumnPriority(column.priority))
+                                dispatch(setColumnName(column.title));
+                                dispatch(setColumnId(column.id));
+                                dispatch(setColumnPriority(column.priority));
                                 setModalAdd(true);
                               }}
                             >
@@ -442,18 +479,24 @@ export const ProjectTracker = () => {
                             <div
                               key={task.id}
                               className={`tasks__board__item ${
-                                  taskHover[task.id] ? "task__hover" : ""
+                                taskHover[task.id] ? "task__hover" : ""
                               }`}
                               draggable={true}
-                              onDragStart={(e) => dragStartHandler(e, task, column.id)}
+                              onDragStart={(e) =>
+                                dragStartHandler(e, task, column.id)
+                              }
                               onDragOver={(e) => dragOverTaskHandler(e, task)}
                               onDragLeave={(e) => dragLeaveTaskHandler(e)}
-                              onDragEnd={(e) => dragEndTaskHandler()}
-                              onDrop={(e) => dragDropTaskHandler(e, task, column)}
+                              onDragEnd={() => dragEndTaskHandler()}
+                              onDrop={(e) =>
+                                dragDropTaskHandler(e, task, column)
+                              }
                               onClick={(e) => openTicket(e, task)}
                             >
                               <div className="tasks__board__item__title">
-                                <p className='task__board__item__title'>{task.title}</p>
+                                <p className="task__board__item__title">
+                                  {task.title}
+                                </p>
                               </div>
                               <p className="tasks__board__item__description">
                                 {task.description}

From 5ab7e65905c94fc68a0112b50ff572955b6e5bfb Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Thu, 22 Jun 2023 14:56:31 +0300
Subject: [PATCH 2/8] prettier fixed

---
 .../Common/BaseButton/BaseButton.jsx          |   7 +-
 .../Modal/TrackerModal/TrackerModal.jsx       |  83 +++---
 .../TrackerTaskComment/TrackerTaskComment.jsx | 264 ++++++++++--------
 src/redux/projectsTrackerSlice.js             |  48 ++--
 src/utils/helper.js                           |  11 +-
 5 files changed, 228 insertions(+), 185 deletions(-)

diff --git a/src/components/Common/BaseButton/BaseButton.jsx b/src/components/Common/BaseButton/BaseButton.jsx
index 9f9c5e5a..d659b3e8 100644
--- a/src/components/Common/BaseButton/BaseButton.jsx
+++ b/src/components/Common/BaseButton/BaseButton.jsx
@@ -1,13 +1,10 @@
 import React from "react";
 
-import "./basebutton.scss"
+import "./basebutton.scss";
 
 export const BaseButton = ({ children, styles, ...props }) => {
   return (
-    <button
-      className={styles ? `${styles} button` : "button"}
-      {...props}
-    >
+    <button className={styles ? `${styles} button` : "button"} {...props}>
       {children}
     </button>
   );
diff --git a/src/components/Modal/TrackerModal/TrackerModal.jsx b/src/components/Modal/TrackerModal/TrackerModal.jsx
index 07ac002a..da44c264 100644
--- a/src/components/Modal/TrackerModal/TrackerModal.jsx
+++ b/src/components/Modal/TrackerModal/TrackerModal.jsx
@@ -1,24 +1,23 @@
-import React, {useEffect, useState} from "react";
-
+import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+
 import { apiRequest } from "../../../api/request";
-import { urlForLocal } from '../../../utils/helper'
+import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
 import {
-  setColumnName,
-  setColumnPriority,
+  addPersonToProject,
+  editColumnName,
+  editProjectName,
+  getColumnId,
+  getColumnName,
+  getColumnPriority,
   getProjectBoard,
   getValueModalType,
+  setColumnName,
+  setColumnPriority,
   setProject,
   setProjectBoardFetch,
-  editProjectName,
-  editColumnName,
-  getColumnName,
-  getColumnId,
-  addPersonToProject, getColumnPriority
 } from "../../../redux/projectsTrackerSlice";
-
-import arrowDown from "../../../assets/icons/arrows/selectArrow.png"
-
+import { urlForLocal } from "../../../utils/helper";
 import "./trackerModal.scss";
 
 export const TrackerModal = ({
@@ -33,8 +32,8 @@ export const TrackerModal = ({
   const dispatch = useDispatch();
   const projectBoard = useSelector(getProjectBoard);
   const columnName = useSelector(getColumnName);
-  const columnId = useSelector(getColumnId)
-  const columnPriority = useSelector(getColumnPriority)
+  const columnId = useSelector(getColumnId);
+  const columnPriority = useSelector(getColumnPriority);
 
   const modalType = useSelector(getValueModalType);
   const [projectName, setProjectName] = useState(defautlInput);
@@ -42,9 +41,9 @@ export const TrackerModal = ({
   const [nameProject, setNameProject] = useState("");
   const [valueTiket, setValueTiket] = useState("");
   const [descriptionTicket, setDescriptionTicket] = useState("");
-  const [workers, setWorkers] = useState([])
-  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false)
-  const [selectedWorker, setSelectedWorker] = useState(null)
+  const [workers, setWorkers] = useState([]);
+  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
+  const [selectedWorker, setSelectedWorker] = useState(null);
 
   function createTab() {
     if (!valueColumn) {
@@ -55,7 +54,9 @@ export const TrackerModal = ({
       method: "POST",
       data: {
         project_id: projectBoard.id,
-        priority: projectBoard.columns.length ? projectBoard.columns.at(-1).priority + 1 : 1,
+        priority: projectBoard.columns.length
+          ? projectBoard.columns.at(-1).priority + 1
+          : 1,
         title: valueColumn,
       },
     }).then(() => {
@@ -106,36 +107,38 @@ export const TrackerModal = ({
   function changeColumnParams() {
     projectBoard.columns.forEach((column) => {
       if (column.id === columnId && column.priority !== columnPriority) {
-        const priorityColumns = [{
-          column_id: column.id,
-          priority: Number(columnPriority)
-        }]
+        const priorityColumns = [
+          {
+            column_id: column.id,
+            priority: Number(columnPriority),
+          },
+        ];
         for (let i = column.priority; i < columnPriority; i++) {
           const currentColumn = {
             column_id: projectBoard.columns[i].id,
-            priority: i
-          }
-          priorityColumns.push(currentColumn)
+            priority: i,
+          };
+          priorityColumns.push(currentColumn);
         }
         for (let i = column.priority; i > columnPriority; i--) {
           const currentColumn = {
             column_id: projectBoard.columns[i - 2].id,
-            priority: i
-          }
-          priorityColumns.push(currentColumn)
+            priority: i,
+          };
+          priorityColumns.push(currentColumn);
         }
         apiRequest("/project-column/set-priority", {
           method: "POST",
           data: {
             project_id: projectBoard.id,
-            data: JSON.stringify(priorityColumns)
-          }
+            data: JSON.stringify(priorityColumns),
+          },
         }).then(() => {
           dispatch(setProjectBoardFetch(projectBoard.id));
-        })
+        });
       }
-    })
-    changeColumnTitle()
+    });
+    changeColumnTitle();
   }
 
   function changeColumnTitle() {
@@ -376,12 +379,12 @@ export const TrackerModal = ({
               <h4>Приоритет колонки</h4>
               <div className="input-container">
                 <input
-                    className="name-project"
-                    placeholder='Приоритет колонки'
-                    type='number'
-                    step='1'
-                    value={columnPriority}
-                    onChange={(e) => dispatch(setColumnPriority(e.target.value))}
+                  className="name-project"
+                  placeholder="Приоритет колонки"
+                  type="number"
+                  step="1"
+                  value={columnPriority}
+                  onChange={(e) => dispatch(setColumnPriority(e.target.value))}
                 />
               </div>
             </div>
diff --git a/src/components/TrackerTaskComment/TrackerTaskComment.jsx b/src/components/TrackerTaskComment/TrackerTaskComment.jsx
index efdd258f..c20fb0dd 100644
--- a/src/components/TrackerTaskComment/TrackerTaskComment.jsx
+++ b/src/components/TrackerTaskComment/TrackerTaskComment.jsx
@@ -1,129 +1,161 @@
 import React, { useState } from "react";
-import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
+
 import { apiRequest } from "../../api/request";
-import {urlForLocal} from '../../utils/helper';
-import {getCorrectDate} from "../Calendar/calendarHelper";
-import edit from "../../assets/icons/edit.svg";
 import del from "../../assets/icons/delete.svg";
+import edit from "../../assets/icons/edit.svg";
 import accept from "../../assets/images/accept.png";
+import { urlForLocal } from "../../utils/helper";
+import { getCorrectDate } from "../Calendar/calendarHelper";
+import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
 
 export const TrackerTaskComment = ({
-    taskId,
-    comment,
-    commentDelete,
-    addSubComment,
-    subCommentDelete
+  taskId,
+  comment,
+  commentDelete,
+  addSubComment,
+  subCommentDelete,
 }) => {
-    const [commentsEditOpen, setCommentsEditOpen] = useState(false)
-    const [commentsEditText, setCommentsEditText] = useState(comment.text)
-    const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false)
-    const [subCommentsCreateText, setSubCommentsCreateText] = useState('')
+  const [commentsEditOpen, setCommentsEditOpen] = useState(false);
+  const [commentsEditText, setCommentsEditText] = useState(comment.text);
+  const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false);
+  const [subCommentsCreateText, setSubCommentsCreateText] = useState("");
 
-    function editComment() {
-        if (commentsEditText === comment.text) return
-        apiRequest("/comment/update", {
-            method: "PUT",
-            data: {
-                comment_id: comment.id,
-                text: commentsEditText
-            }
-        }).then(() => {
-        })
-    }
+  function editComment() {
+    if (commentsEditText === comment.text) return;
+    apiRequest("/comment/update", {
+      method: "PUT",
+      data: {
+        comment_id: comment.id,
+        text: commentsEditText,
+      },
+    }).then(() => {});
+  }
 
-    function deleteComment() {
-        apiRequest("/comment/update", {
-            method: "PUT",
-            data: {
-                comment_id: comment.id,
-                status: 0
-            }
-        }).then(() => {
-            if (comment.parent_id) {
-                subCommentDelete(comment)
-            } else {
-                commentDelete(comment)
-            }
-        })
-    }
+  function deleteComment() {
+    apiRequest("/comment/update", {
+      method: "PUT",
+      data: {
+        comment_id: comment.id,
+        status: 0,
+      },
+    }).then(() => {
+      if (comment.parent_id) {
+        subCommentDelete(comment);
+      } else {
+        commentDelete(comment);
+      }
+    });
+  }
 
-    function createSubComment() {
-        setSubCommentsCreateOpen(false)
-        if(!subCommentsCreateText) return
-        apiRequest("/comment/create", {
-            method: "POST",
-            data: {
-                text: subCommentsCreateText,
-                entity_type: 2,
-                entity_id: taskId,
-                parent_id: comment.id
-            }
-        }).then((res) => {
-            let newSubComment = res
-            newSubComment.created_at = new Date()
-            setSubCommentsCreateText('')
-            addSubComment(comment.id, newSubComment)
-        })
-    }
+  function createSubComment() {
+    setSubCommentsCreateOpen(false);
+    if (!subCommentsCreateText) return;
+    apiRequest("/comment/create", {
+      method: "POST",
+      data: {
+        text: subCommentsCreateText,
+        entity_type: 2,
+        entity_id: taskId,
+        parent_id: comment.id,
+      },
+    }).then((res) => {
+      let newSubComment = res;
+      newSubComment.created_at = new Date();
+      setSubCommentsCreateText("");
+      addSubComment(comment.id, newSubComment);
+    });
+  }
 
-    return (
-        <div className={[!comment.parent_id && comment.subComments.length ? 'comments__list__item__main': '',
-            'comments__list__item',
-            comment.parent_id ? 'comments__list__item__subComment' : ''].join(' ')}>
-            <div className='comments__list__item__info'>
-                <div className='comments__list__item__fio'>
-                    <img src={urlForLocal(comment.user.avatar)} alt='avatar' />
-                    <p>{comment.user.fio}</p>
-                </div>
-                <div className='comments__list__item__date'>
-                    <span>{getCorrectDate(comment.created_at)}</span>
-                    {comment.user_id === Number(localStorage.getItem('id')) &&
-                        <>
-                        <div className={commentsEditOpen ? 'edit edit__open' : 'edit'} >
-                            <img src={edit} alt='edit' onClick={() => {
-                                if (commentsEditOpen) {
-                                    editComment()
-                                }
-                                setCommentsEditOpen(!commentsEditOpen)
-                            }} />
-                        </div>
-                        <img src={del} alt='delete' onClick={() => deleteComment()} />
-                        </>
-                    }
-                </div>
-            </div>
-            {commentsEditOpen ?
-                <input className='comments__list__item__text' value={commentsEditText} onChange={(e) =>  {
-                    setCommentsEditText(e.target.value)
-                }} /> :
-                <p className='comments__list__item__text'>{commentsEditText}</p>}
-            {!comment.parent_id &&
-                <>
-                {
-                    subCommentsCreateOpen ?
-                        <div className='comments__list__item__answer__new'>
-                            <input value={subCommentsCreateText} onChange={(e) => {
-                                setSubCommentsCreateText(e.target.value)
-                            }}/>
-                            <img src={accept} alt='accept'
-                                 onClick={() => {
-                                     createSubComment()
-                                 }}
-                            />
-                        </div>
-                        :
-                        <span onClick={() => {
-                            setSubCommentsCreateOpen(true)
-                        }} className='comments__list__item__answer'>Ответить</span>
-                    }
-                </>
-            }
-            {Boolean(comment.subComments?.length) && comment.subComments.map((subComment) => {
-                return <TrackerTaskSubComment key={subComment.id} taskId={taskId} comment={subComment} subCommentDelete={subCommentDelete}/>
-                })
-            }
+  return (
+    <div
+      className={[
+        !comment.parent_id && comment.subComments.length
+          ? "comments__list__item__main"
+          : "",
+        "comments__list__item",
+        comment.parent_id ? "comments__list__item__subComment" : "",
+      ].join(" ")}
+    >
+      <div className="comments__list__item__info">
+        <div className="comments__list__item__fio">
+          <img src={urlForLocal(comment.user.avatar)} alt="avatar" />
+          <p>{comment.user.fio}</p>
         </div>
-    )
-}
+        <div className="comments__list__item__date">
+          <span>{getCorrectDate(comment.created_at)}</span>
+          {comment.user_id === Number(localStorage.getItem("id")) && (
+            <>
+              <div className={commentsEditOpen ? "edit edit__open" : "edit"}>
+                <img
+                  src={edit}
+                  alt="edit"
+                  onClick={() => {
+                    if (commentsEditOpen) {
+                      editComment();
+                    }
+                    setCommentsEditOpen(!commentsEditOpen);
+                  }}
+                />
+              </div>
+              <img src={del} alt="delete" onClick={() => deleteComment()} />
+            </>
+          )}
+        </div>
+      </div>
+      {commentsEditOpen ? (
+        <input
+          className="comments__list__item__text"
+          value={commentsEditText}
+          onChange={(e) => {
+            setCommentsEditText(e.target.value);
+          }}
+        />
+      ) : (
+        <p className="comments__list__item__text">{commentsEditText}</p>
+      )}
+      {!comment.parent_id && (
+        <>
+          {subCommentsCreateOpen ? (
+            <div className="comments__list__item__answer__new">
+              <input
+                value={subCommentsCreateText}
+                onChange={(e) => {
+                  setSubCommentsCreateText(e.target.value);
+                }}
+              />
+              <img
+                src={accept}
+                alt="accept"
+                onClick={() => {
+                  createSubComment();
+                }}
+              />
+            </div>
+          ) : (
+            <span
+              onClick={() => {
+                setSubCommentsCreateOpen(true);
+              }}
+              className="comments__list__item__answer"
+            >
+              Ответить
+            </span>
+          )}
+        </>
+      )}
+      {Boolean(comment.subComments?.length) &&
+        comment.subComments.map((subComment) => {
+          return (
+            <TrackerTaskSubComment
+              key={subComment.id}
+              taskId={taskId}
+              comment={subComment}
+              subCommentDelete={subCommentDelete}
+            />
+          );
+        })}
+    </div>
+  );
+};
 
-export default TrackerTaskComment
+export default TrackerTaskComment;
diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js
index 51a33625..d8a10860 100644
--- a/src/redux/projectsTrackerSlice.js
+++ b/src/redux/projectsTrackerSlice.js
@@ -10,7 +10,7 @@ const initialState = {
   boardLoader: false,
   columnName: "",
   columnId: 0,
-  columnPriority: 0
+  columnPriority: 0,
 };
 
 export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@@ -51,13 +51,16 @@ export const projectsTrackerSlice = createSlice({
     moveProjectTask: (state, action) => {
       state.projectBoard.columns.forEach((column, index) => {
         if (column.id === action.payload.columnId) {
-          column.tasks.push({...action.payload.startWrapperIndex.task, column_id: column.id});
+          column.tasks.push({
+            ...action.payload.startWrapperIndex.task,
+            column_id: column.id,
+          });
           apiRequest(`/task/update-task`, {
             method: "PUT",
             data: {
               task_id: action.payload.startWrapperIndex.task.id,
               column_id: column.id,
-              priority: column.tasks.length - 1
+              priority: column.tasks.length - 1,
             },
           }).then(() => {});
         }
@@ -71,10 +74,15 @@ export const projectsTrackerSlice = createSlice({
     movePositionProjectTask: (state, action) => {
       state.projectBoard.columns.forEach((column, index) => {
         if (column.id === action.payload.startTask.column_id) {
-          state.projectBoard.columns[index].tasks = column.tasks.filter((task) => task.id !== action.payload.startTask.id)
+          state.projectBoard.columns[index].tasks = column.tasks.filter(
+            (task) => task.id !== action.payload.startTask.id
+          );
         }
         if (column.id === action.payload.finishTask.column_id) {
-          column.tasks.splice(action.payload.finishIndex, 0, {...action.payload.startTask, column_id: column.id})
+          column.tasks.splice(action.payload.finishIndex, 0, {
+            ...action.payload.startTask,
+            column_id: column.id,
+          });
           apiRequest(`/task/update-task`, {
             method: "PUT",
             data: {
@@ -82,14 +90,14 @@ export const projectsTrackerSlice = createSlice({
               column_id: column.id,
             },
           }).then(() => {});
-          const priorityTasks = []
+          const priorityTasks = [];
           column.tasks.forEach((task, index) => {
             const curTask = {
               task_id: task.id,
-              priority: index
-            }
-            priorityTasks.push(curTask)
-          })
+              priority: index,
+            };
+            priorityTasks.push(curTask);
+          });
           apiRequest(`/task/set-priority`, {
             method: "POST",
             data: {
@@ -98,17 +106,21 @@ export const projectsTrackerSlice = createSlice({
             },
           }).then(() => {});
         }
-      })
+      });
     },
     filterCreatedByMe: (state, action) => {
       state.projectBoard.columns.forEach((column) => {
-        column.tasks = column.tasks.filter((task) => task.user_id === action.payload)
-      })
+        column.tasks = column.tasks.filter(
+          (task) => task.user_id === action.payload
+        );
+      });
     },
     filteredParticipateTasks: (state, action) => {
       state.projectBoard.columns.forEach((column) => {
-        column.tasks = column.tasks.filter((task) => task.taskUsers.some((person) => person.user_id === action.payload))
-      })
+        column.tasks = column.tasks.filter((task) =>
+          task.taskUsers.some((person) => person.user_id === action.payload)
+        );
+      });
     },
     setColumnName: (state, action) => {
       state.columnName = action.payload;
@@ -117,7 +129,7 @@ export const projectsTrackerSlice = createSlice({
       state.columnId = action.payload;
     },
     setColumnPriority: (state, action) => {
-      state.columnPriority = action.payload
+      state.columnPriority = action.payload;
     },
     editProjectName: (state, action) => {
       state.projects.forEach((project) => {
@@ -162,7 +174,7 @@ export const {
   addPersonToProject,
   filterCreatedByMe,
   filteredParticipateTasks,
-  movePositionProjectTask
+  movePositionProjectTask,
 } = projectsTrackerSlice.actions;
 
 export const getProjects = (state) => state.tracker.projects;
@@ -172,6 +184,6 @@ export const getValueModalType = (state) => state.tracker.modalType;
 export const getBoarderLoader = (state) => state.tracker.boardLoader;
 export const getColumnName = (state) => state.tracker.columnName;
 export const getColumnId = (state) => state.tracker.columnId;
-export const getColumnPriority = (state) => state.tracker.columnPriority
+export const getColumnPriority = (state) => state.tracker.columnPriority;
 
 export default projectsTrackerSlice.reducer;
diff --git a/src/utils/helper.js b/src/utils/helper.js
index ae8b66a1..f32e202b 100644
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@@ -53,12 +53,11 @@ export function scrollToForm() {
 }
 
 export function getCorrectRequestDate(date) {
-  const yyyy = String(date.getUTCFullYear())
+  const yyyy = String(date.getUTCFullYear());
   const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
   const dd = String(date.getUTCDate()).padStart(2, "0");
-  const hh = String(date.getUTCHours())
-  const min = String(date.getUTCMinutes())
-  const sec = String(date.getUTCSeconds())
-  return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`
+  const hh = String(date.getUTCHours());
+  const min = String(date.getUTCMinutes());
+  const sec = String(date.getUTCSeconds());
+  return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`;
 }
-

From 055225d747e627831cff1faa5fe046f04061925a Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Thu, 22 Jun 2023 19:18:41 +0300
Subject: [PATCH 3/8] Fixed buttons in tracker page

---
 .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 20 ++++++--
 .../Tracker/ModalTicket/modalTicket.scss      | 18 +++++---
 .../TicketFullScreen/TicketFullScreen.jsx     | 19 ++++----
 .../TrackerModal/TrackerModal.jsx             | 46 +++++++++++--------
 .../TrackerModal/trackerModal.scss            |  9 ++--
 src/components/ProjectTiket/ProjectTiket.jsx  |  2 +-
 .../TrackerTaskComment/TrackerTaskComment.jsx | 17 ++++---
 src/pages/ProjectTracker/ProjectTracker.js    | 16 +++++--
 src/pages/Tracker/Tracker.js                  |  2 +-
 src/pages/Tracker/tracker.scss                | 17 ++++---
 10 files changed, 103 insertions(+), 63 deletions(-)
 rename src/components/Modal/{ => Tracker}/TrackerModal/TrackerModal.jsx (92%)
 rename src/components/Modal/{ => Tracker}/TrackerModal/trackerModal.scss (95%)

diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
index cb5dd6bc..44ab28cc 100644
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@@ -9,7 +9,7 @@ import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
 import { apiRequest } from "@api/request";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
 import archive from "assets/icons/archive.svg";
@@ -370,10 +370,10 @@ export const ModalTiсket = ({
                 </BaseButton>
               </p>
               <p className="file">
-                <button>
+                <BaseButton styles={"button-add-file"}>
                   <img src={file}></img>
                   Загрузить файл
-                </button>
+                </BaseButton>
                 <span>{0}</span>
                 Файлов
               </p>
@@ -425,7 +425,12 @@ export const ModalTiсket = ({
               </div>
             ) : (
               <div className="add-worker moreItems ">
-                <button onClick={() => setDropListOpen(true)}>+</button>
+                <BaseButton
+                  onClick={() => setDropListOpen(true)}
+                  styles={"button-add-worker"}
+                >
+                  +
+                </BaseButton>
                 <span>Добавить исполнителя</span>
                 {dropListOpen && (
                   <div className="dropdownList">
@@ -473,7 +478,12 @@ export const ModalTiсket = ({
             )}
 
             <div className="add-worker moreItems">
-              <button onClick={() => setDropListMembersOpen(true)}>+</button>
+              <BaseButton
+                onClick={() => setDropListMembersOpen(true)}
+                styles={"button-add-worker"}
+              >
+                +
+              </BaseButton>
               <span>Добавить участников</span>
               {dropListMembersOpen && (
                 <div className="dropdownList">
diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
index b77a7253..954b1c3c 100644
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -277,7 +277,7 @@
         justify-content: space-between;
         margin-left: 20px;
 
-        button {
+        .button-add-file {
           display: flex;
           align-items: center;
           justify-content: center;
@@ -332,6 +332,10 @@
         cursor: pointer;
         margin-right: 18px;
       }
+
+      &:focus-within {
+        border: 1px solid #0000004d;
+      }
     }
   }
 
@@ -392,6 +396,7 @@
       display: flex;
       align-items: center;
       position: relative;
+      margin-bottom: 5px;
 
       span {
         color: #000000;
@@ -402,17 +407,12 @@
         font-weight: 400;
       }
 
-      button {
-        cursor: pointer;
-        background: #8bcc60;
-        border-radius: 44px;
+      .button-add-worker {
         width: 33px;
         height: 33px;
         display: flex;
         justify-content: center;
         align-items: center;
-        border: none;
-        color: white;
         font-size: 17px;
       }
     }
@@ -601,6 +601,10 @@
             font-weight: 700;
           }
         }
+
+        p:hover {
+          text-decoration: underline;
+        }
       }
     }
   }
diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index 40cd4821..5338a2f1 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -18,7 +18,7 @@ import { apiRequest } from "@api/request";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -386,10 +386,10 @@ export const TicketFullScreen = () => {
                       </BaseButton>
                     </p>
                     <p className="file">
-                      <button>
-                        <img src={file} alt="file"></img>
+                      <BaseButton styles={"button-add-file"}>
+                        <img src={file}></img>
                         Загрузить файл
-                      </button>
+                      </BaseButton>
                       <span>{0}</span>
                       Файлов
                     </p>
@@ -441,25 +441,28 @@ export const TicketFullScreen = () => {
                   </div>
 
                   <div className="add-worker moreItems">
-                    <button
+                    <BaseButton
                       onClick={() => {
                         dispatch(modalToggle("addWorker"));
                         setModalAddWorker(true);
                       }}
+                      styles={"button-add-worker"}
                     >
                       +
-                    </button>
+                    </BaseButton>
                     <span>Добавить исполнителя</span>
                   </div>
                   <div className="add-worker moreItems">
-                    <button
+                    <BaseButton
                       onClick={() => {
                         dispatch(modalToggle("addWorker"));
                         setModalAddWorker(true);
                       }}
+                      styles={"button-add-worker"}
                     >
                       +
-                    </button>
+                    </BaseButton>
+
                     <span>Добавить участников</span>
                   </div>
                 </div>
diff --git a/src/components/Modal/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
similarity index 92%
rename from src/components/Modal/TrackerModal/TrackerModal.jsx
rename to src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
index da44c264..c77c53fe 100644
--- a/src/components/Modal/TrackerModal/TrackerModal.jsx
+++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
-import { apiRequest } from "../../../api/request";
-import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
 import {
   addPersonToProject,
   editColumnName,
@@ -16,8 +14,16 @@ import {
   setColumnPriority,
   setProject,
   setProjectBoardFetch,
-} from "../../../redux/projectsTrackerSlice";
-import { urlForLocal } from "../../../utils/helper";
+} from "@redux/projectsTrackerSlice";
+
+import { urlForLocal } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
+
+import BaseButton from "@components/Common/BaseButton/BaseButton";
+
+import arrowDown from "assets/icons/arrows/selectArrow.png";
+
 import "./trackerModal.scss";
 
 export const TrackerModal = ({
@@ -266,9 +272,9 @@ export const TrackerModal = ({
                 )}
               </div>
             </div>
-            <button className="button-add" onClick={addUserToProject}>
+            <BaseButton styles={"button-add"} onClick={addUserToProject}>
               Добавить
-            </button>
+            </BaseButton>
           </div>
         )}
         {modalType === "createTiketProject" && (
@@ -292,9 +298,9 @@ export const TrackerModal = ({
                 />
               </div>
             </div>
-            <button className="button-add" onClick={createTiket}>
+            <BaseButton styles={"button-add"} onClick={createTiket}>
               Создать
-            </button>
+            </BaseButton>
           </div>
         )}
         {modalType === "editProject" && (
@@ -309,9 +315,10 @@ export const TrackerModal = ({
                 />
               </div>
             </div>
-            <button className="button-add" onClick={editProject}>
+
+            <BaseButton styles={"button-add"} onClick={editProject}>
               Сохранить
-            </button>
+            </BaseButton>
           </div>
         )}
         {modalType === "createProject" && (
@@ -325,9 +332,9 @@ export const TrackerModal = ({
                   onChange={(e) => setNameProject(e.target.value)}
                 />
               </div>
-              <button className="button-add" onClick={createProject}>
+              <BaseButton styles={"button-add"} onClick={createProject}>
                 Создать
-              </button>
+              </BaseButton>
             </div>
           </div>
         )}
@@ -343,9 +350,12 @@ export const TrackerModal = ({
                 <textarea className="title-project__textarea"></textarea>
               </div>
             </div>
-            <button className="button-add" onClick={(e) => e.preventDefault()}>
+            <BaseButton
+              styles={"button-add"}
+              onClick={(e) => e.preventDefault()}
+            >
               Добавить
-            </button>
+            </BaseButton>
           </div>
         )}
         {modalType === "createColumn" && (
@@ -360,9 +370,9 @@ export const TrackerModal = ({
                 />
               </div>
             </div>
-            <button className="button-add" onClick={createTab}>
+            <BaseButton styles={"button-add"} onClick={createTab}>
               Создать
-            </button>
+            </BaseButton>
           </div>
         )}
         {modalType === "editColumn" && (
@@ -388,9 +398,9 @@ export const TrackerModal = ({
                 />
               </div>
             </div>
-            <button className="button-add" onClick={changeColumnParams}>
+            <BaseButton styles={"button-add"} onClick={changeColumnParams}>
               Сохранить
-            </button>
+            </BaseButton>
           </div>
         )}
 
diff --git a/src/components/Modal/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
similarity index 95%
rename from src/components/Modal/TrackerModal/trackerModal.scss
rename to src/components/Modal/Tracker/TrackerModal/trackerModal.scss
index 8e73a9f1..c8f6ccc4 100644
--- a/src/components/Modal/TrackerModal/trackerModal.scss
+++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
@@ -28,6 +28,7 @@
     display: flex;
     align-items: center;
     flex-direction: column;
+    margin: 0 0 15px 0;
 
     .input-container {
       width: 287px;
@@ -129,13 +130,13 @@
   .button-add {
     width: 130px;
     height: 37px;
-    background: #52b709;
-    border-radius: 44px;
-    border: none;
+    // background: #52b709;
+    // border-radius: 44px;
+    // border: none;
     font-weight: 400;
     font-size: 15px;
     line-height: 32px;
-    color: #ffffff;
+    // color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx
index 6d565cd3..9eda3bc3 100644
--- a/src/components/ProjectTiket/ProjectTiket.jsx
+++ b/src/components/ProjectTiket/ProjectTiket.jsx
@@ -7,7 +7,7 @@ import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
 import { apiRequest } from "@api/request";
 
 import { ModalSelect } from "@components/Modal/ModalSelect/ModalSelect";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 
 import archiveSet from "assets/icons/archive.svg";
 import del from "assets/icons/delete.svg";
diff --git a/src/components/TrackerTaskComment/TrackerTaskComment.jsx b/src/components/TrackerTaskComment/TrackerTaskComment.jsx
index c20fb0dd..30f487e4 100644
--- a/src/components/TrackerTaskComment/TrackerTaskComment.jsx
+++ b/src/components/TrackerTaskComment/TrackerTaskComment.jsx
@@ -1,12 +1,15 @@
 import React, { useState } from "react";
 
-import { apiRequest } from "../../api/request";
-import del from "../../assets/icons/delete.svg";
-import edit from "../../assets/icons/edit.svg";
-import accept from "../../assets/images/accept.png";
-import { urlForLocal } from "../../utils/helper";
-import { getCorrectDate } from "../Calendar/calendarHelper";
-import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
+import { urlForLocal } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
+
+import { getCorrectDate } from "@components/Calendar/calendarHelper";
+import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment";
+
+import del from "assets/icons/delete.svg";
+import edit from "assets/icons/edit.svg";
+import accept from "assets/images/accept.png";
 
 export const TrackerTaskComment = ({
   taskId,
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index 658e7cf2..3219ed46 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -23,10 +23,11 @@ import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
+import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -298,14 +299,23 @@ export const ProjectTracker = () => {
                   <h4>Проект : {projectBoard.name}</h4>
 
                   <div className="tasks__head__add">
-                    <span
+                    <BaseButton
+                      onClick={() => {
+                        dispatch(modalToggle("createColumn"));
+                        setModalAdd(true);
+                      }}
+                      styles={"button-add-column"}
+                    >
+                      +
+                    </BaseButton>
+                    {/* <span
                       onClick={() => {
                         dispatch(modalToggle("createColumn"));
                         setModalAdd(true);
                       }}
                     >
                       +
-                    </span>
+                    </span> */}
                     <p>добавить колонку</p>
                   </div>
                   <div className="tasks__head__persons">
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index 43701068..aaf9df86 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -16,7 +16,7 @@ import { apiRequest } from "@api/request";
 import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss
index 7c9e2395..0523eb52 100644
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -232,13 +232,11 @@
 
           &__add {
             display: flex;
-            span {
+            margin: 0 15px 0 10px;
+
+            .button-add-column {
               width: 33px;
               height: 33px;
-              background: #52b709;
-              border-radius: 44px;
-              color: whitesmoke;
-              cursor: pointer;
               font-size: 15px;
               display: flex;
               align-items: center;
@@ -315,7 +313,7 @@
               z-index: 2;
               display: flex;
               flex-direction: column;
-              background: linear-gradient(180deg, #FFFFFF 0%, #EBEBEB 100%);
+              background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
               border-radius: 40px;
               padding: 33px 24px 44px 34px;
               width: 425px;
@@ -331,7 +329,7 @@
               &__count {
                 display: flex;
                 align-items: end;
-                color: #1458DD;
+                color: #1458dd;
                 font-size: 22px;
                 margin-top: 10px;
                 span {
@@ -355,7 +353,7 @@
                 span {
                   width: auto;
                   height: auto;
-                  color: #1458DD;
+                  color: #1458dd;
                   font-weight: 600;
                   font-size: 18px;
                   line-height: 22px;
@@ -407,7 +405,7 @@
                 cursor: pointer;
 
                 span {
-                  background: #8BCC60;
+                  background: #8bcc60;
                   left: 0;
                 }
 
@@ -424,6 +422,7 @@
           }
 
           &__checkBox {
+            margin: 0 15px 0 0;
             cursor: pointer;
             display: flex;
             align-items: center;

From fbf64f2b399159f4ed80edcfd0a6045ecd941395 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Fri, 23 Jun 2023 10:55:22 +0300
Subject: [PATCH 4/8] Fixed styles in tracker

---
 .../Modal/ModalSelect/modalSelect.scss        |  4 ++
 .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 19 +++++-----
 .../Tracker/ModalTicket/modalTicket.scss      | 35 +++++++++++++----
 src/components/ProjectTiket/projectTiket.scss |  6 +++
 src/pages/Tracker/Tracker.js                  | 14 ++++---
 src/pages/Tracker/tracker.scss                | 38 +++++++++++++------
 6 files changed, 82 insertions(+), 34 deletions(-)

diff --git a/src/components/Modal/ModalSelect/modalSelect.scss b/src/components/Modal/ModalSelect/modalSelect.scss
index 07844484..156d37ee 100644
--- a/src/components/Modal/ModalSelect/modalSelect.scss
+++ b/src/components/Modal/ModalSelect/modalSelect.scss
@@ -19,6 +19,10 @@
         img {
           margin-right: 12px;
         }
+
+        p:hover {
+          text-decoration: underline;
+        }
       }
     }
 
diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
index 44ab28cc..a1322d71 100644
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@@ -314,16 +314,17 @@ export const ModalTiсket = ({
         onClick={(e) => e.stopPropagation()}
       >
         <div className="content">
-          <h3 className="title-project">
+          <Link to={`/tracker/task/${task.id}`} className="title-project__full">
+            <img src={fullScreen}></img>
+          </Link>
+
+          <div className="title-project">
             <img src={category} className="title-project__category"></img>
-            Проект: {projectName}
-            <Link
-              to={`/tracker/task/${task.id}`}
-              className="title-project__full"
-            >
-              <img src={fullScreen}></img>
-            </Link>
-          </h3>
+            <h2>
+              Проект:
+              <h3>{projectName}</h3>
+            </h2>
+          </div>
 
           <div className="content__task">
             <span>Задача</span>
diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
index 954b1c3c..1b7211e3 100644
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -17,32 +17,53 @@
 
 .modal-tiket__content {
   background: #ffffff;
-  //border: 1px solid #dde2e4;
   border-radius: 8px;
   display: flex;
   flex-direction: row;
 
   .content {
+    position: relative;
     display: flex;
     flex-direction: column;
     width: 600px;
     margin: 26px 0 0 21px;
 
     .title-project {
-      color: #1458dd;
-      font-family: "LabGrotesque", sans-serif;
+      max-width: 85%;
       display: flex;
       align-items: center;
-      font-weight: 700;
-      font-size: 22px;
-      line-height: 32px;
 
       &__category {
         margin-right: 17px;
       }
 
+      h2,
+      h3 {
+        font-weight: 700;
+        font-size: 22px;
+        line-height: 32px;
+        color: #1458dd;
+        margin: 0;
+        font-family: "LabGrotesque", sans-serif;
+      }
+
+      h2 {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        flex-direction: row;
+
+        h3 {
+          margin-left: 5px;
+          word-break: break-all;
+        }
+      }
+
       &__full {
-        margin-left: 35%;
+        position: absolute;
+        position: absolute;
+        right: 28px;
+        top: 0;
       }
     }
 
diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss
index 3c2d0b98..bc851751 100644
--- a/src/components/ProjectTiket/projectTiket.scss
+++ b/src/components/ProjectTiket/projectTiket.scss
@@ -6,6 +6,12 @@
   padding: 17px 26px 16px;
   cursor: pointer;
   max-width: 440px;
+  transition: 0.4s;
+
+  &:hover {
+    transition: 0.4s;
+    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+  }
 
   @media (max-width: 1068px) {
     width: 47%;
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index aaf9df86..d99f1f5c 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -14,6 +14,7 @@ import { 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";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
@@ -190,15 +191,16 @@ export const Tracker = () => {
                       <img src={noProjects} alt="noProjectImg" />
                       <p>Создайте свой первый проект</p>
                     </div>
-                    <button
-                      className="createProjectBtn"
+
+                    <BaseButton
+                      styles={"createProjectBtn"}
                       onClick={() => {
                         dispatch(modalToggle("createProject"));
                         setModalCreateProject(true);
                       }}
                     >
                       <span>+</span>Создать проект
-                    </button>
+                    </BaseButton>
                   </div>
                   <p className="no-projects__info">
                     Ставьте задачи, следите за прогрессом, ведите учёт рабочего
@@ -208,15 +210,15 @@ export const Tracker = () => {
               )}
             {Boolean(projects.length) && !loader && (
               <div className="create-newProject">
-                <button
-                  className="createProjectBtn"
+                <BaseButton
+                  styles="createProjectBtn"
                   onClick={() => {
                     dispatch(modalToggle("createProject"));
                     setModalCreateProject(true);
                   }}
                 >
                   <span>+</span>Создать проект
-                </button>
+                </BaseButton>
                 <p>
                   Ставьте задачи, следите за прогрессом, ведите учёт рабочего
                   времени
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss
index 0523eb52..5cbdc118 100644
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -142,8 +142,6 @@
                 margin-left: 17px;
               }
             }
-            button {
-            }
           }
 
           &__info {
@@ -155,16 +153,11 @@
         }
 
         .createProjectBtn {
-          background: #52b709;
-          border-radius: 44px;
           max-width: 188px;
           height: 50px;
           width: 100%;
-          border: none;
           font-weight: 400;
           font-size: 15px;
-          line-height: 32px;
-          color: #ffffff;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -228,6 +221,8 @@
             font-size: 22px;
             line-height: 32px;
             margin-bottom: 0;
+            max-width: 30%;
+            word-break: break-all;
           }
 
           &__add {
@@ -321,8 +316,9 @@
 
               &__close {
                 cursor: pointer;
-                width: 8px;
-                height: 8px;
+                position: absolute;
+                right: 20px;
+                top: 15px;
                 margin-left: auto;
               }
 
@@ -395,8 +391,8 @@
 
                 .delete {
                   cursor: pointer;
-                  width: 14px;
-                  height: 14px;
+                  width: 20px;
+                  height: 20px;
                 }
               }
 
@@ -770,6 +766,10 @@
               max-width: 450px;
               width: 100%;
 
+              &:focus-within {
+                border: 1px solid #0000004d;
+              }
+
               @media (max-width: 690px) {
                 max-width: 350px;
               }
@@ -833,8 +833,15 @@
               border-radius: 12px;
               padding: 12px 42px 7px 32px;
               justify-content: space-between;
+              transition: 0.4s;
               cursor: pointer;
 
+              &:hover {
+                transform: scale(0.99);
+                box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+                transition: 0.4s;
+              }
+
               &__info {
                 display: flex;
                 flex-direction: column;
@@ -967,9 +974,12 @@
             background: #f1f1f1;
             border-radius: 12px;
             padding: 12px 42px 7px 32px;
+            transition: 0.4s;
 
             &:hover {
-              background: var(--ds-background-neutral-subtle-hovered, #f4f5f7);
+              transform: scale(0.99);
+              box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+              transition: 0.4s;
             }
 
             p {
@@ -1046,6 +1056,10 @@
               max-width: 300px;
               width: 100%;
 
+              &:focus-within {
+                border: 1px solid #0000004d;
+              }
+
               @media (max-width: 590px) {
                 max-width: 230px;
               }

From bca8199a6ae32aabfaf28153f531e3e45a683366 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Fri, 23 Jun 2023 14:46:08 +0300
Subject: [PATCH 5/8] Fixed modalTicket

---
 src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx  | 2 +-
 src/components/Modal/Tracker/ModalTicket/modalTicket.scss | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
index a1322d71..1b3ec8c7 100644
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@@ -343,7 +343,7 @@ export const ModalTiсket = ({
             )}
             <div className="content__description">
               {editOpen ? (
-                <input
+                <textarea
                   value={inputsValue.description}
                   onChange={(e) => {
                     setInputsValue((prevValue) => ({
diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
index 1b7211e3..efe4daa6 100644
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -257,6 +257,13 @@
       display: flex;
       flex-direction: column;
       margin-top: 10px;
+
+      textarea {
+        min-height: 120px;
+        max-height: 450px;
+        font-size: 14px;
+      }
+
       p {
         font-weight: 400;
         font-size: 14px;

From f95812ac356ca09aab65cb969d16114fee1a0610 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Fri, 23 Jun 2023 15:18:19 +0300
Subject: [PATCH 6/8] Fixed styles modalTracker

---
 .../Tracker/ModalTicket/modalTicket.scss      |   3 +-
 .../Tracker/TrackerModal/TrackerModal.jsx     | 370 +++++++++---------
 .../Tracker/TrackerModal/trackerModal.scss    | 197 +++++-----
 3 files changed, 283 insertions(+), 287 deletions(-)

diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
index efe4daa6..60936eeb 100644
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -32,6 +32,7 @@
       max-width: 85%;
       display: flex;
       align-items: center;
+      flex-direction: row;
 
       &__category {
         margin-right: 17px;
@@ -100,7 +101,7 @@
       .comments__list {
         display: flex;
         flex-direction: column;
-        max-height: 420px;
+        max-height: 300px;
         overflow: auto;
 
         &::-webkit-scrollbar {
diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
index c77c53fe..ed3b0d2b 100644
--- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
+++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
@@ -21,6 +21,7 @@ import { urlForLocal } from "@utils/helper";
 import { apiRequest } from "@api/request";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
+import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 
@@ -211,202 +212,197 @@ export const TrackerModal = ({
   }, [active]);
 
   return (
-    <div
-      className={active ? "modal-add active" : "modal-add"}
-      onClick={() => {
-        setActive(false);
-        setSelectWorkersOpen(false);
-      }}
+    <ModalLayout
+      active={active}
+      setActive={setActive}
+      // onClick={() => {
+      //   setSelectWorkersOpen(false);
+      // }}
     >
-      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
-        {modalType === "addWorker" && (
-          <div>
-            <div className="title-project">
-              <h4>Добавьте участника</h4>
-              {/*<div className="input-container">*/}
-              {/*  <input*/}
-              {/*    className="name-project"*/}
-              {/*    value={emailWorker}*/}
-              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
-              {/*  />*/}
-              {/*</div>*/}
-              <div
-                className={
-                  selectWorkersOpen ? "select__worker open" : "select__worker"
-                }
-                onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
-              >
-                <p>
-                  {selectedWorker
-                    ? selectedWorker.employee.fio
-                    : "Выберите пользователя"}
-                </p>
-                <img className="arrow" src={arrowDown} alt="arrow" />
-                {Boolean(selectWorkersOpen) && (
-                  <div className="select__worker__dropDown">
-                    {Boolean(workers.length) ? (
-                      workers.map((worker) => {
-                        if (worker === selectedWorker) {
-                          return;
-                        }
-                        return (
-                          <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>
-            </div>
-            <BaseButton styles={"button-add"} onClick={addUserToProject}>
-              Добавить
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "createTiketProject" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите название и описание задачи</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={valueTiket}
-                  onChange={(e) => setValueTiket(e.target.value)}
-                  placeholder="Название задачи"
-                />
-              </div>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={descriptionTicket}
-                  onChange={(e) => setDescriptionTicket(e.target.value)}
-                  placeholder="Описание задачи"
-                />
-              </div>
-            </div>
-            <BaseButton styles={"button-add"} onClick={createTiket}>
-              Создать
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "editProject" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите новое название</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={projectName}
-                  onChange={(e) => setProjectName(e.target.value)}
-                />
-              </div>
-            </div>
-
-            <BaseButton styles={"button-add"} onClick={editProject}>
-              Сохранить
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "createProject" && (
-          <div>
-            <div className="title-project">
-              <h4>{titleProject}</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={nameProject}
-                  onChange={(e) => setNameProject(e.target.value)}
-                />
-              </div>
-              <BaseButton styles={"button-add"} onClick={createProject}>
-                Создать
-              </BaseButton>
-            </div>
-          </div>
-        )}
-        {modalType === "addSubtask" && (
-          <div>
-            <div className="title-project subtask">
-              <h4>
-                Вы добавляете подзадачу{" "}
-                <p>в колонку(id) задачи "{defautlInput}"</p>
-              </h4>
-              <p className="title-project__decs">Введите текст</p>
-              <div>
-                <textarea className="title-project__textarea"></textarea>
-              </div>
-            </div>
-            <BaseButton
-              styles={"button-add"}
-              onClick={(e) => e.preventDefault()}
+      {modalType === "addWorker" && (
+        <div>
+          <div className="title-project">
+            <h4>Добавьте участника</h4>
+            {/*<div className="input-container">*/}
+            {/*  <input*/}
+            {/*    className="name-project"*/}
+            {/*    value={emailWorker}*/}
+            {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
+            {/*  />*/}
+            {/*</div>*/}
+            <div
+              className={
+                selectWorkersOpen ? "select__worker open" : "select__worker"
+              }
+              onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
             >
-              Добавить
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "createColumn" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите название колонки</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={valueColumn}
-                  onChange={(e) => setValueColumn(e.target.value)}
-                />
-              </div>
+              <p>
+                {selectedWorker
+                  ? selectedWorker.employee.fio
+                  : "Выберите пользователя"}
+              </p>
+              <img className="arrow" src={arrowDown} alt="arrow" />
+              {Boolean(selectWorkersOpen) && (
+                <div className="select__worker__dropDown">
+                  {Boolean(workers.length) ? (
+                    workers.map((worker) => {
+                      if (worker === selectedWorker) {
+                        return;
+                      }
+                      return (
+                        <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"} onClick={createTab}>
+          </div>
+          <BaseButton styles={"button-add"} onClick={addUserToProject}>
+            Добавить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createTiketProject" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите название и описание задачи</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={valueTiket}
+                onChange={(e) => setValueTiket(e.target.value)}
+                placeholder="Название задачи"
+              />
+            </div>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={descriptionTicket}
+                onChange={(e) => setDescriptionTicket(e.target.value)}
+                placeholder="Описание задачи"
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={createTiket}>
+            Создать
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "editProject" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите новое название</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={projectName}
+                onChange={(e) => setProjectName(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <BaseButton styles={"button-add"} onClick={editProject}>
+            Сохранить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createProject" && (
+        <div>
+          <div className="title-project">
+            <h4>{titleProject}</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={nameProject}
+                onChange={(e) => setNameProject(e.target.value)}
+              />
+            </div>
+            <BaseButton styles={"button-add"} onClick={createProject}>
               Создать
             </BaseButton>
           </div>
-        )}
-        {modalType === "editColumn" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите новое название</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={columnName}
-                  onChange={(e) => dispatch(setColumnName(e.target.value))}
-                />
-              </div>
-              <h4>Приоритет колонки</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  placeholder="Приоритет колонки"
-                  type="number"
-                  step="1"
-                  value={columnPriority}
-                  onChange={(e) => dispatch(setColumnPriority(e.target.value))}
-                />
-              </div>
+        </div>
+      )}
+      {modalType === "addSubtask" && (
+        <div>
+          <div className="title-project subtask">
+            <h4>
+              Вы добавляете подзадачу{" "}
+              <p>в колонку(id) задачи "{defautlInput}"</p>
+            </h4>
+            <p className="title-project__decs">Введите текст</p>
+            <div>
+              <textarea className="title-project__textarea"></textarea>
             </div>
-            <BaseButton styles={"button-add"} onClick={changeColumnParams}>
-              Сохранить
-            </BaseButton>
           </div>
-        )}
+          <BaseButton styles={"button-add"} onClick={(e) => e.preventDefault()}>
+            Добавить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createColumn" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите название колонки</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={valueColumn}
+                onChange={(e) => setValueColumn(e.target.value)}
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={createTab}>
+            Создать
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "editColumn" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите новое название</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={columnName}
+                onChange={(e) => dispatch(setColumnName(e.target.value))}
+              />
+            </div>
+            <h4>Приоритет колонки</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                placeholder="Приоритет колонки"
+                type="number"
+                step="1"
+                value={columnPriority}
+                onChange={(e) => dispatch(setColumnPriority(e.target.value))}
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={changeColumnParams}>
+            Сохранить
+          </BaseButton>
+        </div>
+      )}
 
-        <span className="exit" onClick={() => setActive(false)}></span>
-      </div>
-    </div>
+      <span className="exit" onClick={() => setActive(false)}></span>
+    </ModalLayout>
   );
 };
 
diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
index c8f6ccc4..0181b6ef 100644
--- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
+++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
@@ -1,3 +1,4 @@
+//Удалить при переходе всех модалок в обертку modalLayout
 .modal-add {
   z-index: 9;
   height: 100%;
@@ -23,125 +24,123 @@
     align-items: center;
     justify-content: center;
   }
+}
 
-  .title-project {
+.title-project {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: 0 0 15px 0;
+
+  .input-container {
+    width: 287px;
+    height: 35px;
+    background: #ffffff;
+    border-radius: 8px;
+    margin: 12px 0;
+
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+    }
+  }
+
+  h4 {
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 26px;
+    color: #263238 !important;
+  }
+
+  &__decs {
+    font-weight: 300;
+    font-size: 12px;
+    line-height: 14px;
+    margin: 12px 0 16px 0;
+  }
+
+  &__textarea {
+    resize: none;
+    width: 302px;
+    height: 83px;
+    background: #ffffff;
+    border-radius: 8px;
+    border: none;
+    font-size: 15px;
+    line-height: 18px;
+  }
+
+  .select__worker {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    flex-direction: column;
-    margin: 0 0 15px 0;
+    padding: 5px;
+    background: white;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 100%;
+    position: relative;
 
-    .input-container {
-      width: 287px;
-      height: 35px;
-      background: #ffffff;
-      border-radius: 8px;
-      margin: 12px 0;
-
-      input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-      }
+    p {
+      max-width: 150px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 14px;
     }
 
-    h4 {
-      font-weight: 500;
-      font-size: 22px;
-      line-height: 26px;
-      color: #263238 !important;
+    img {
+      transition: all 0.3s ease;
+      width: 16px;
+      height: 16px;
     }
 
-    &__decs {
-      font-weight: 300;
-      font-size: 12px;
-      line-height: 14px;
-      margin: 12px 0 16px 0;
-    }
-
-    &__textarea {
-      resize: none;
-      width: 302px;
-      height: 83px;
-      background: #ffffff;
-      border-radius: 8px;
-      border: none;
-      font-size: 15px;
-      line-height: 18px;
-    }
-
-    .select__worker {
+    &__dropDown {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
+      flex-direction: column;
+      position: absolute;
+      width: 100%;
       padding: 5px;
+      top: 35px;
+      left: 0;
       background: white;
       border-radius: 5px;
-      cursor: pointer;
-      width: 100%;
-      position: relative;
+      row-gap: 5px;
 
-      p {
-        max-width: 150px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px;
-      }
-
-      img {
-        transition: all 0.3s ease;
-        width: 16px;
-        height: 16px;
-      }
-
-      &__dropDown {
+      .worker {
         display: flex;
-        flex-direction: column;
-        position: absolute;
-        width: 100%;
-        padding: 5px;
-        top: 35px;
-        left: 0;
-        background: white;
-        border-radius: 5px;
-        row-gap: 5px;
-
-        .worker {
-          display: flex;
-          justify-content: space-between;
-        }
-      }
-    }
-
-    .open {
-      .arrow {
-        transform: rotate(180deg);
+        justify-content: space-between;
       }
     }
   }
 
-  .name-project {
-    margin-left: 10px;
-    border: none;
-    outline: none;
-    height: 100%;
-    width: 90%;
-    font-size: 14px;
+  .open {
+    .arrow {
+      transform: rotate(180deg);
+    }
   }
+}
 
-  .button-add {
-    width: 130px;
-    height: 37px;
-    // background: #52b709;
-    // border-radius: 44px;
-    // border: none;
-    font-weight: 400;
-    font-size: 15px;
-    line-height: 32px;
-    // color: #ffffff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-  }
+.name-project {
+  margin-left: 10px;
+  border: none;
+  outline: none;
+  height: 100%;
+  width: 90%;
+  font-size: 14px;
+}
+
+.button-add {
+  width: 130px;
+  height: 37px;
+
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 32px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
 }
 
 .modal-add.active {

From 66ec2daea1a204137608bb36e18a3f976f13c94c Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Mon, 26 Jun 2023 10:56:39 +0300
Subject: [PATCH 7/8] Fixed eslint

---
 package-lock.json                             | 629 +++++++---------
 package.json                                  |  10 +-
 .../Common/BaseButton/BaseButton.jsx          |   7 +-
 .../TicketFullScreen/TicketFullScreen.jsx     | 703 ++++++++++--------
 .../Modal/TrackerModal/TrackerModal.jsx       |  83 ++-
 .../TrackerTaskComment/TrackerTaskComment.jsx | 264 ++++---
 src/components/UI/ModalTicket/ModalTicket.jsx | 485 +++++++-----
 .../UI/TicketFullScreen/TicketFullScreen.jsx  | 622 +++++++++-------
 src/pages/ProjectTracker/ProjectTracker.js    | 292 ++++----
 src/redux/projectsTrackerSlice.js             |  48 +-
 src/utils/helper.js                           |  11 +-
 11 files changed, 1684 insertions(+), 1470 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b968f79e..3e10badd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,6 @@
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
-        "@typescript-eslint/eslint-plugin": "^4.5.0",
-        "@typescript-eslint/parser": "^4.5.0",
         "axios": "^0.24.0",
         "babel": "^6.23.0",
         "bfj": "^7.0.2",
@@ -54,14 +52,17 @@
         "@babel/preset-env": "^7.20.2",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
         "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+        "@typescript-eslint/eslint-plugin": "^5.60.0",
+        "@typescript-eslint/parser": "^5.60.0",
         "babel-loader": "^9.1.2",
         "copy-webpack-plugin": "^10.2.0",
         "cross-env": "^7.0.3",
         "css-loader": "6.7.3",
         "dotenv-webpack": "^7.0.3",
-        "eslint": "^8.41.0",
+        "eslint": "^8.43.0",
         "eslint-plugin-react": "^7.32.2",
         "html-webpack-plugin": "5.5.0",
+        "husky": "^8.0.0",
         "mini-css-extract-plugin": "^2.7.2",
         "node-sass": "8.0.0",
         "postcss": "^8.4.21",
@@ -2471,6 +2472,7 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
       "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "devOptional": true,
       "dependencies": {
         "eslint-visitor-keys": "^3.3.0"
       },
@@ -2485,6 +2487,7 @@
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
       "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "devOptional": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -2496,6 +2499,7 @@
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
       "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+      "devOptional": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
@@ -2504,6 +2508,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
       "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
+      "devOptional": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -2525,12 +2530,14 @@
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "devOptional": true
     },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
       "version": "13.20.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
       "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "devOptional": true,
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -2545,6 +2552,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "devOptional": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -2556,6 +2564,7 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "devOptional": true,
       "engines": {
         "node": ">=10"
       },
@@ -2564,9 +2573,10 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.41.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.41.0.tgz",
-      "integrity": "sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==",
+      "version": "8.43.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz",
+      "integrity": "sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==",
+      "devOptional": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -2591,9 +2601,10 @@
       "dev": true
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.8",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
-      "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
+      "integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==",
+      "devOptional": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
         "debug": "^4.1.1",
@@ -2607,6 +2618,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "devOptional": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -2618,7 +2630,8 @@
     "node_modules/@humanwhocodes/object-schema": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "devOptional": true
     },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
@@ -5582,29 +5595,32 @@
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "4.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz",
-      "integrity": "sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==",
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.0.tgz",
+      "integrity": "sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==",
+      "dev": true,
       "dependencies": {
-        "@typescript-eslint/experimental-utils": "4.33.0",
-        "@typescript-eslint/scope-manager": "4.33.0",
-        "debug": "^4.3.1",
-        "functional-red-black-tree": "^1.0.1",
-        "ignore": "^5.1.8",
-        "regexpp": "^3.1.0",
-        "semver": "^7.3.5",
+        "@eslint-community/regexpp": "^4.4.0",
+        "@typescript-eslint/scope-manager": "5.60.0",
+        "@typescript-eslint/type-utils": "5.60.0",
+        "@typescript-eslint/utils": "5.60.0",
+        "debug": "^4.3.4",
+        "grapheme-splitter": "^1.0.4",
+        "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.0",
+        "semver": "^7.3.7",
         "tsutils": "^3.21.0"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^4.0.0",
-        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0"
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -5612,10 +5628,37 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.60.0.tgz",
+      "integrity": "sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@types/json-schema": "^7.0.9",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.60.0",
+        "@typescript-eslint/types": "5.60.0",
+        "@typescript-eslint/typescript-estree": "5.60.0",
+        "eslint-scope": "^5.1.1",
+        "semver": "^7.3.7"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -5627,6 +5670,7 @@
       "version": "7.3.8",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
       "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -5640,50 +5684,29 @@
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
-    "node_modules/@typescript-eslint/experimental-utils": {
-      "version": "4.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz",
-      "integrity": "sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==",
-      "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "@typescript-eslint/scope-manager": "4.33.0",
-        "@typescript-eslint/types": "4.33.0",
-        "@typescript-eslint/typescript-estree": "4.33.0",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "*"
-      }
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "4.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.33.0.tgz",
-      "integrity": "sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==",
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.60.0.tgz",
+      "integrity": "sha512-jBONcBsDJ9UoTWrARkRRCgDz6wUggmH5RpQVlt7BimSwaTkTjwypGzKORXbR4/2Hqjk9hgwlon2rVQAjWNpkyQ==",
+      "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "4.33.0",
-        "@typescript-eslint/types": "4.33.0",
-        "@typescript-eslint/typescript-estree": "4.33.0",
-        "debug": "^4.3.1"
+        "@typescript-eslint/scope-manager": "5.60.0",
+        "@typescript-eslint/types": "5.60.0",
+        "@typescript-eslint/typescript-estree": "5.60.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0"
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -5692,15 +5715,16 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "4.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz",
-      "integrity": "sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==",
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.60.0.tgz",
+      "integrity": "sha512-hakuzcxPwXi2ihf9WQu1BbRj1e/Pd8ZZwVTG9kfbxAMZstKz8/9OoexIwnmLzShtsdap5U/CoQGRCWlSuPbYxQ==",
+      "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.33.0",
-        "@typescript-eslint/visitor-keys": "4.33.0"
+        "@typescript-eslint/types": "5.60.0",
+        "@typescript-eslint/visitor-keys": "5.60.0"
       },
       "engines": {
-        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -5708,13 +5732,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.54.0.tgz",
-      "integrity": "sha512-WI+WMJ8+oS+LyflqsD4nlXMsVdzTMYTxl16myXPaCXnSgc7LWwMsjxQFZCK/rVmTZ3FN71Ct78ehO9bRC7erYQ==",
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.60.0.tgz",
+      "integrity": "sha512-X7NsRQddORMYRFH7FWo6sA9Y/zbJ8s1x1RIAtnlj6YprbToTiQnM6vxcMu7iYhdunmoC0rUWlca13D5DVHkK2g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.54.0",
-        "@typescript-eslint/utils": "5.54.0",
+        "@typescript-eslint/typescript-estree": "5.60.0",
+        "@typescript-eslint/utils": "5.60.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -5734,10 +5758,69 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
-      "version": "5.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.54.0.tgz",
-      "integrity": "sha512-nExy+fDCBEgqblasfeE3aQ3NuafBUxZxgxXcYfzYRZFHdVvk5q60KhCSkG0noHgHRo/xQ/BOzURLZAafFpTkmQ==",
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": {
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.60.0.tgz",
+      "integrity": "sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@types/json-schema": "^7.0.9",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.60.0",
+        "@typescript-eslint/types": "5.60.0",
+        "@typescript-eslint/typescript-estree": "5.60.0",
+        "eslint-scope": "^5.1.1",
+        "semver": "^7.3.7"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/semver": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.0.tgz",
+      "integrity": "sha512-ascOuoCpNZBccFVNJRSC6rPq4EmJ2NkuoKnd6LDNyAQmdDnziAtxbCGWCbefG1CNzmDvd05zO36AmB7H8RzKPA==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -5747,14 +5830,14 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.54.0.tgz",
-      "integrity": "sha512-X2rJG97Wj/VRo5YxJ8Qx26Zqf0RRKsVHd4sav8NElhbZzhpBI8jU54i6hfo9eheumj4oO4dcRN1B/zIVEqR/MQ==",
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.0.tgz",
+      "integrity": "sha512-R43thAuwarC99SnvrBmh26tc7F6sPa2B3evkXp/8q954kYL6Ro56AwASYWtEEi+4j09GbiNAHqYwNNZuNlARGQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.54.0",
-        "@typescript-eslint/visitor-keys": "5.54.0",
+        "@typescript-eslint/types": "5.60.0",
+        "@typescript-eslint/visitor-keys": "5.60.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -5774,107 +5857,11 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.54.0.tgz",
-      "integrity": "sha512-xu4wT7aRCakGINTLGeyGqDn+78BwFlggwBjnHa1ar/KaGagnmwLYmlrXIrgAaQ3AE1Vd6nLfKASm7LrFHNbKGA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.54.0",
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/eslint-visitor-keys": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
-      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
-    "node_modules/@typescript-eslint/types": {
-      "version": "4.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.33.0.tgz",
-      "integrity": "sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==",
-      "engines": {
-        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "4.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz",
-      "integrity": "sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==",
-      "dependencies": {
-        "@typescript-eslint/types": "4.33.0",
-        "@typescript-eslint/visitor-keys": "4.33.0",
-        "debug": "^4.3.1",
-        "globby": "^11.0.3",
-        "is-glob": "^4.0.1",
-        "semver": "^7.3.5",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -5883,9 +5870,10 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -5899,7 +5887,8 @@
     "node_modules/@typescript-eslint/typescript-estree/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "node_modules/@typescript-eslint/utils": {
       "version": "5.54.0",
@@ -6044,21 +6033,34 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "4.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz",
-      "integrity": "sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==",
+      "version": "5.60.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.0.tgz",
+      "integrity": "sha512-wm9Uz71SbCyhUKgcaPRauBdTegUyY/ZWl8gLwD/i/ybJqscrrdVSFImpvUz16BLPChIeKBK5Fa9s6KDQjsjyWw==",
+      "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.33.0",
-        "eslint-visitor-keys": "^2.0.0"
+        "@typescript-eslint/types": "5.60.0",
+        "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
-        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
+      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -6273,6 +6275,7 @@
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "devOptional": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6294,6 +6297,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "devOptional": true,
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -8851,6 +8855,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "devOptional": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -8947,7 +8952,8 @@
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "devOptional": true
     },
     "node_modules/deepmerge": {
       "version": "4.3.0",
@@ -9156,6 +9162,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
       "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "devOptional": true,
       "dependencies": {
         "esutils": "^2.0.2"
       },
@@ -9732,15 +9739,16 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.41.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
-      "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
+      "version": "8.43.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz",
+      "integrity": "sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==",
+      "devOptional": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.41.0",
-        "@humanwhocodes/config-array": "^0.11.8",
+        "@eslint/js": "8.43.0",
+        "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.10.0",
@@ -10067,6 +10075,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
       "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
       "dependencies": {
         "eslint-visitor-keys": "^2.0.0"
       },
@@ -10084,6 +10093,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
       "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -10207,6 +10217,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "devOptional": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -10220,12 +10231,14 @@
     "node_modules/eslint/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "devOptional": true
     },
     "node_modules/eslint/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "devOptional": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -10241,6 +10254,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "devOptional": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -10251,12 +10265,14 @@
     "node_modules/eslint/node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "devOptional": true
     },
     "node_modules/eslint/node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "devOptional": true,
       "engines": {
         "node": ">=10"
       },
@@ -10268,6 +10284,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
       "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
+      "devOptional": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -10283,6 +10300,7 @@
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
       "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "devOptional": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -10294,6 +10312,7 @@
       "version": "13.20.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
       "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "devOptional": true,
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -10308,6 +10327,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -10316,6 +10336,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "devOptional": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -10327,6 +10348,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "devOptional": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -10338,6 +10360,7 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "devOptional": true,
       "engines": {
         "node": ">=10"
       },
@@ -10349,6 +10372,7 @@
       "version": "9.5.2",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
       "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.8.0",
         "acorn-jsx": "^5.3.2",
@@ -10365,6 +10389,7 @@
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
       "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "devOptional": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -10376,6 +10401,7 @@
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
       "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "devOptional": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -10400,6 +10426,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
       "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "devOptional": true,
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -10436,6 +10463,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10667,7 +10695,8 @@
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "devOptional": true
     },
     "node_modules/fastest-levenshtein": {
       "version": "1.0.16",
@@ -10723,6 +10752,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
       "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "devOptional": true,
       "dependencies": {
         "flat-cache": "^3.0.4"
       },
@@ -10873,6 +10903,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
       "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "devOptional": true,
       "dependencies": {
         "flatted": "^3.1.0",
         "rimraf": "^3.0.2"
@@ -10884,7 +10915,8 @@
     "node_modules/flatted": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
-      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "devOptional": true
     },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
@@ -11189,11 +11221,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/functional-red-black-tree": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g=="
-    },
     "node_modules/functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
@@ -11349,6 +11376,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "devOptional": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -11509,7 +11537,8 @@
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "devOptional": true
     },
     "node_modules/gzip-size": {
       "version": "6.0.0",
@@ -12035,6 +12064,21 @@
         "ms": "^2.0.0"
       }
     },
+    "node_modules/husky": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz",
+      "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==",
+      "dev": true,
+      "bin": {
+        "husky": "lib/bin.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -12137,6 +12181,7 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "devOptional": true,
       "engines": {
         "node": ">=0.8.19"
       }
@@ -12482,6 +12527,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -16558,7 +16604,8 @@
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "devOptional": true
     },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
@@ -16690,6 +16737,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "devOptional": true,
       "dependencies": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -16765,7 +16813,8 @@
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "devOptional": true
     },
     "node_modules/lodash.reduce": {
       "version": "4.6.0",
@@ -17319,7 +17368,8 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "devOptional": true
     },
     "node_modules/multicast-dns": {
       "version": "7.2.5",
@@ -17355,7 +17405,8 @@
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "devOptional": true
     },
     "node_modules/natural-compare-lite": {
       "version": "1.4.0",
@@ -18101,6 +18152,7 @@
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
       "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "devOptional": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -19770,6 +19822,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "devOptional": true,
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -20606,40 +20659,6 @@
         }
       }
     },
-    "node_modules/react-scripts/node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.54.0.tgz",
-      "integrity": "sha512-+hSN9BdSr629RF02d7mMtXhAJvDTyCbprNYJKrXETlul/Aml6YZwd90XioVbjejQeHbb3R8Dg0CkRgoJDxo8aw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "5.54.0",
-        "@typescript-eslint/type-utils": "5.54.0",
-        "@typescript-eslint/utils": "5.54.0",
-        "debug": "^4.3.4",
-        "grapheme-splitter": "^1.0.4",
-        "ignore": "^5.2.0",
-        "natural-compare-lite": "^1.4.0",
-        "regexpp": "^3.2.0",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^5.0.0",
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-scripts/node_modules/@typescript-eslint/experimental-utils": {
       "version": "5.54.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.54.0.tgz",
@@ -20659,107 +20678,6 @@
         "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/react-scripts/node_modules/@typescript-eslint/parser": {
-      "version": "5.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.54.0.tgz",
-      "integrity": "sha512-aAVL3Mu2qTi+h/r04WI/5PfNWvO6pdhpeMRWk9R7rEV4mwJNzoWf5CCU5vDKBsPIFQFjEq1xg7XBI2rjiMXQbQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "5.54.0",
-        "@typescript-eslint/types": "5.54.0",
-        "@typescript-eslint/typescript-estree": "5.54.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-scripts/node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.54.0.tgz",
-      "integrity": "sha512-VTPYNZ7vaWtYna9M4oD42zENOBrb+ZYyCNdFs949GcN8Miwn37b8b7eMj+EZaq7VK9fx0Jd+JhmkhjFhvnovhg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.54.0",
-        "@typescript-eslint/visitor-keys": "5.54.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/react-scripts/node_modules/@typescript-eslint/types": {
-      "version": "5.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.54.0.tgz",
-      "integrity": "sha512-nExy+fDCBEgqblasfeE3aQ3NuafBUxZxgxXcYfzYRZFHdVvk5q60KhCSkG0noHgHRo/xQ/BOzURLZAafFpTkmQ==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/react-scripts/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.54.0.tgz",
-      "integrity": "sha512-X2rJG97Wj/VRo5YxJ8Qx26Zqf0RRKsVHd4sav8NElhbZzhpBI8jU54i6hfo9eheumj4oO4dcRN1B/zIVEqR/MQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.54.0",
-        "@typescript-eslint/visitor-keys": "5.54.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-scripts/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.54.0.tgz",
-      "integrity": "sha512-xu4wT7aRCakGINTLGeyGqDn+78BwFlggwBjnHa1ar/KaGagnmwLYmlrXIrgAaQ3AE1Vd6nLfKASm7LrFHNbKGA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.54.0",
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
     "node_modules/react-scripts/node_modules/adjust-sourcemap-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
@@ -20959,18 +20877,6 @@
         "eslint": "^7.5.0 || ^8.0.0"
       }
     },
-    "node_modules/react-scripts/node_modules/eslint-visitor-keys": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/react-scripts/node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -21698,17 +21604,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/regexpp": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
-      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      }
-    },
     "node_modules/regexpu-core": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.1.tgz",
@@ -22089,6 +21984,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "devOptional": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -23202,6 +23098,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       },
@@ -23955,6 +23852,7 @@
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
       "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
       "dependencies": {
         "tslib": "^1.8.1"
       },
@@ -23968,7 +23866,8 @@
     "node_modules/tsutils/node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
@@ -24001,6 +23900,7 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "devOptional": true,
       "dependencies": {
         "prelude-ls": "^1.2.1"
       },
@@ -25124,6 +25024,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
       "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
diff --git a/package.json b/package.json
index 30b9aa4d..1e650958 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,6 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
     "axios": "^0.24.0",
     "babel": "^6.23.0",
     "bfj": "^7.0.2",
@@ -50,14 +48,17 @@
     "@babel/preset-env": "^7.20.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
     "babel-loader": "^9.1.2",
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",
     "css-loader": "6.7.3",
     "dotenv-webpack": "^7.0.3",
-    "eslint": "^8.41.0",
+    "eslint": "^8.43.0",
     "eslint-plugin-react": "^7.32.2",
     "html-webpack-plugin": "5.5.0",
+    "husky": "^8.0.0",
     "mini-css-extract-plugin": "^2.7.2",
     "node-sass": "8.0.0",
     "postcss": "^8.4.21",
@@ -74,8 +75,7 @@
     "webpack-bundle-analyzer": "4.7.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "4.11.1",
-    "webpack-merge": "5.8.0",
-    "husky": "^8.0.0"
+    "webpack-merge": "5.8.0"
   },
   "scripts": {
     "build": "cross-env SERVE=true webpack -c config/webpack/prod.js",
diff --git a/src/components/Common/BaseButton/BaseButton.jsx b/src/components/Common/BaseButton/BaseButton.jsx
index 9f9c5e5a..d659b3e8 100644
--- a/src/components/Common/BaseButton/BaseButton.jsx
+++ b/src/components/Common/BaseButton/BaseButton.jsx
@@ -1,13 +1,10 @@
 import React from "react";
 
-import "./basebutton.scss"
+import "./basebutton.scss";
 
 export const BaseButton = ({ children, styles, ...props }) => {
   return (
-    <button
-      className={styles ? `${styles} button` : "button"}
-      {...props}
-    >
+    <button className={styles ? `${styles} button` : "button"} {...props}>
       {children}
     </button>
   );
diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index 6c845bab..2e17a4f1 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -1,45 +1,42 @@
 import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link, useNavigate, useParams } from "react-router-dom";
 
-import { ProfileHeader } from "../../../ProfileHeader/ProfileHeader";
-import { ProfileBreadcrumbs } from "../../../ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "@components/Common/Footer/Footer";
-import { Link, useParams, useNavigate } from "react-router-dom";
-import TrackerModal from "../../../Modal/TrackerModal/TrackerModal";
-import TrackerTaskComment from "../../../TrackerTaskComment/TrackerTaskComment";
-import { Navigation } from "../../../Navigation/Navigation";
-import {Loader} from "@components/Common/Loader/Loader";
+import { Loader } from "@components/Common/Loader/Loader";
 
-import {useDispatch, useSelector} from "react-redux";
+import { apiRequest } from "../../../../api/request";
+import archive from "../../../../assets/icons/archive.svg";
+import archive2 from "../../../../assets/icons/archive.svg";
+import arrow from "../../../../assets/icons/arrows/arrowCalendar.png";
+import arrow2 from "../../../../assets/icons/arrows/arrowStart.png";
+import close from "../../../../assets/icons/close.png";
+import del from "../../../../assets/icons/delete.svg";
+import edit from "../../../../assets/icons/edit.svg";
+import file from "../../../../assets/icons/fileModal.svg";
+import link from "../../../../assets/icons/link.svg";
+import plus from "../../../../assets/icons/plus.svg";
+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 {
   deletePersonOnProject,
+  getBoarderLoader,
+  getProjectBoard,
   modalToggle,
   setProjectBoardFetch,
   setToggleTab,
-  getProjectBoard,
-  getBoarderLoader,
 } from "../../../../redux/projectsTrackerSlice";
-import { apiRequest } from "../../../../api/request";
-
-import project from "../../../../assets/icons/trackerProject.svg";
-import watch from "../../../../assets/icons/watch.svg";
-import file from "../../../../assets/icons/fileModal.svg";
-import send from "../../../../assets/icons/send.svg";
-import arrow2 from "../../../../assets/icons/arrows/arrowStart.png";
-import plus from "../../../../assets/icons/plus.svg";
-import tasks from "../../../../assets/icons/trackerTasks.svg";
-import archive from "../../../../assets/icons/archive.svg";
-import arrow from "../../../../assets/icons/arrows/arrowCalendar.png";
-import link from "../../../../assets/icons/link.svg";
-import archive2 from "../../../../assets/icons/archive.svg";
-import del from "../../../../assets/icons/delete.svg";
-import edit from "../../../../assets/icons/edit.svg";
-import close from "../../../../assets/icons/close.png";
-
+import { getCorrectRequestDate, urlForLocal } from "../../../../utils/helper";
+import TrackerModal from "../../../Modal/TrackerModal/TrackerModal";
+import { Navigation } from "../../../Navigation/Navigation";
+import { ProfileBreadcrumbs } from "../../../ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { ProfileHeader } from "../../../ProfileHeader/ProfileHeader";
+import TrackerTaskComment from "../../../TrackerTaskComment/TrackerTaskComment";
 import "./ticketFullScreen.scss";
 
-import {getCorrectRequestDate, urlForLocal} from "../../../../utils/helper";
-
-export const TicketFullScreen = ({}) => {
+export const TicketFullScreen = () => {
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const ticketId = useParams();
   const dispatch = useDispatch();
@@ -51,35 +48,41 @@ export const TicketFullScreen = ({}) => {
   const [inputsValue, setInputsValue] = useState({});
   const [loader, setLoader] = useState(true);
   const [comments, setComments] = useState([]);
-  const [personListOpen, setPersonListOpen] = useState(false)
-  const [timerStart, setTimerStart] = useState(false)
-  const [timerInfo, setTimerInfo] = useState({})
+  const [personListOpen, setPersonListOpen] = useState(false);
+  const [timerStart, setTimerStart] = useState(false);
+  const [timerInfo, setTimerInfo] = useState({});
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
       setTaskInfo(taskInfo);
-      setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
-      apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
+      setInputsValue({
+        title: taskInfo.title,
+        description: taskInfo.description,
+        comment: "",
+      });
+      apiRequest(
+        `/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
+      ).then((res) => {
         const comments = res.reduce((acc, cur) => {
           if (!cur.parent_id) {
-            acc.push({...cur, subComments: []})
+            acc.push({ ...cur, subComments: [] });
           } else {
             acc.forEach((item) => {
-              if (item.id === cur.parent_id) item.subComments.push(cur)
-            })
+              if (item.id === cur.parent_id) item.subComments.push(cur);
+            });
           }
-          return acc
-        }, [])
-        setComments(comments)
-      })
+          return acc;
+        }, []);
+        setComments(comments);
+      });
       taskInfo.timers.forEach((time) => {
         if (!time.stopped_at) {
-          setTimerStart(true)
-          setTimerInfo(time)
+          setTimerStart(true);
+          setTimerInfo(time);
         }
-      })
+      });
       dispatch(setProjectBoardFetch(taskInfo.project_id));
-      setLoader(boardLoader)
+      setLoader(boardLoader);
     });
   }, []);
 
@@ -101,10 +104,9 @@ export const TicketFullScreen = ({}) => {
       data: {
         task_id: taskInfo.id,
         title: inputsValue.title,
-        description: inputsValue.description
+        description: inputsValue.description,
       },
-    }).then(() => {
-    });
+    }).then(() => {});
   }
 
   function createComment() {
@@ -113,15 +115,15 @@ export const TicketFullScreen = ({}) => {
       data: {
         text: inputsValue.comment,
         entity_type: 2,
-        entity_id: taskInfo.id
-      }
+        entity_id: taskInfo.id,
+      },
     }).then((res) => {
-      let newComment = res
-      newComment.created_at = new Date()
-      newComment.subComments = []
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setComments((prevValue) => ([...prevValue, newComment]))
-    })
+      let newComment = res;
+      newComment.created_at = new Date();
+      newComment.subComments = [];
+      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
+      setComments((prevValue) => [...prevValue, newComment]);
+    });
   }
 
   function startTaskTimer() {
@@ -130,12 +132,12 @@ export const TicketFullScreen = ({}) => {
       data: {
         entity_type: 2,
         entity_id: taskInfo.id,
-        created_at: getCorrectRequestDate(new Date())
-      }
+        created_at: getCorrectRequestDate(new Date()),
+      },
     }).then((res) => {
-      setTimerStart(true)
-      setTimerInfo(res)
-    })
+      setTimerStart(true);
+      setTimerInfo(res);
+    });
   }
 
   function stopTaskTimer() {
@@ -143,9 +145,9 @@ export const TicketFullScreen = ({}) => {
       method: "PUT",
       data: {
         timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date())
-      }
-    }).then(() => setTimerStart(false))
+        stopped_at: getCorrectRequestDate(new Date()),
+      },
+    }).then(() => setTimerStart(false));
   }
 
   function deletePerson(userId) {
@@ -153,47 +155,50 @@ export const TicketFullScreen = ({}) => {
       method: "DELETE",
       data: {
         project_id: projectBoard.id,
-        user_id: userId
+        user_id: userId,
       },
     }).then(() => {
-      dispatch(deletePersonOnProject(userId))
+      dispatch(deletePersonOnProject(userId));
     });
   }
 
   function commentDelete(comment) {
-    setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
+    setComments((prevValue) =>
+      prevValue.filter((item) => item.id !== comment.id)
+    );
     if (comment.subComments.length) {
       comment.subComments.forEach((subComment) => {
         apiRequest("/comment/update", {
           method: "PUT",
           data: {
             comment_id: subComment.id,
-            status: 0
-          }
-        }).then(() => {
-        })
-      })
+            status: 0,
+          },
+        }).then(() => {});
+      });
     }
   }
 
   function addSubComment(commentId, subComment) {
-    const addSubComment = comments
+    const addSubComment = comments;
     addSubComment.forEach((comment) => {
       if (comment.id === commentId) {
-        comment.subComments.push(subComment)
+        comment.subComments.push(subComment);
       }
-    })
-    setComments(addSubComment)
+    });
+    setComments(addSubComment);
   }
 
   function subCommentDelete(subComment) {
-    const deleteSubComment = comments
+    const deleteSubComment = comments;
     deleteSubComment.forEach((comment, index) => {
       if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
+        deleteSubComment[index].subComments = comment.subComments.filter(
+          (item) => item.id !== subComment.id
+        );
       }
-    })
-    setComments([...deleteSubComment])
+    });
+    setComments([...deleteSubComment]);
   }
 
   const toggleTabs = (index) => {
@@ -201,256 +206,322 @@ export const TicketFullScreen = ({}) => {
   };
 
   return (
-      <section className="ticket-full-screen">
-        <ProfileHeader />
-        <Navigation />
-        <div className="container">
-          <div className="tracker__content">
-            <ProfileBreadcrumbs
-                links={[
-                  { name: "Главная", link: "/profile" },
-                  { name: "Трекер", link: "/profile/tracker" },
-                ]}
-            />
-            <h2 className="tracker__title">Управление проектами с трекером</h2>
-          </div>
+    <section className="ticket-full-screen">
+      <ProfileHeader />
+      <Navigation />
+      <div className="container">
+        <div className="tracker__content">
+          <ProfileBreadcrumbs
+            links={[
+              { name: "Главная", link: "/profile" },
+              { name: "Трекер", link: "/profile/tracker" },
+            ]}
+          />
+          <h2 className="tracker__title">Управление проектами с трекером</h2>
         </div>
-        <div className="tracker__tabs">
-          <div className="tracker__tabs__head">
-            <Link
-                to="/profile/tracker"
-                className="tab active-tab"
-                onClick={() => toggleTabs(1)}
-            >
-              <img src={project} alt="img" />
-              <p>Проекты </p>
-            </Link>
-            <Link
-                to="/profile/tracker"
-                className="tab"
-                onClick={() => toggleTabs(2)}
-            >
-              <img src={tasks} alt="img" />
-              <p>Все мои задачи</p>
-            </Link>
-            <Link
-                to="/profile/tracker"
-                className="tab"
-                onClick={() => toggleTabs(3)}
-            >
-              <img src={archive} alt="img" />
-              <p>Архив</p>
-            </Link>
-          </div>
-          {loader ? <Loader /> :
-              <>
-                <div className="tracker__tabs__content content-tabs">
-                  <div className="tasks__head">
-                    <div className="tasks__head__wrapper">
-                      <h4>Проект : {projectBoard.name}</h4>
+      </div>
+      <div className="tracker__tabs">
+        <div className="tracker__tabs__head">
+          <Link
+            to="/profile/tracker"
+            className="tab active-tab"
+            onClick={() => toggleTabs(1)}
+          >
+            <img src={project} alt="img" />
+            <p>Проекты </p>
+          </Link>
+          <Link
+            to="/profile/tracker"
+            className="tab"
+            onClick={() => toggleTabs(2)}
+          >
+            <img src={tasks} alt="img" />
+            <p>Все мои задачи</p>
+          </Link>
+          <Link
+            to="/profile/tracker"
+            className="tab"
+            onClick={() => toggleTabs(3)}
+          >
+            <img src={archive} alt="img" />
+            <p>Архив</p>
+          </Link>
+        </div>
+        {loader ? (
+          <Loader />
+        ) : (
+          <>
+            <div className="tracker__tabs__content content-tabs">
+              <div className="tasks__head">
+                <div className="tasks__head__wrapper">
+                  <h4>Проект : {projectBoard.name}</h4>
 
-                      <TrackerModal
-                          active={modalAddWorker}
-                          setActive={setModalAddWorker}
-                      ></TrackerModal>
+                  <TrackerModal
+                    active={modalAddWorker}
+                    setActive={setModalAddWorker}
+                  ></TrackerModal>
 
-                      <div className="tasks__head__persons">
-                        {/*<img src={avatarTest} alt="avatar" />*/}
-                        {/*<img src={avatarTest} alt="avatar" />*/}
-                        <span className="countPersons">{projectBoard.projectUsers?.length}</span>
-                        <span
-                            className="addPerson"
-                            onClick={() => {
-                              setPersonListOpen(true)
-                            }}
-                        >
-                  +
-                </span>
-                        <p>добавить участника</p>
-                        {personListOpen &&
-                            <div className='persons__list'>
-                              <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                              <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                              <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                              <div className='persons__list__items'>
-                                {projectBoard.projectUsers?.map((person) => {
-                                  return <div className='persons__list__item' key={person.user_id}>
-                                    <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                                    <span>{person.user.fio}</span>
-                                    <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
-                                  </div>
-                                })
-                                }
-                              </div>
-                              <div className='persons__list__add'
-                                   onClick={() => {
-                                     dispatch(modalToggle("addWorker"));
-                                     setModalAddWorker(true);
-                                     setPersonListOpen(false)
-                                   }}
-                              >
-                                <span className='addPerson'>+</span>
-                                <p>Добавить участников</p>
-                              </div>
-                            </div>
-                        }
-                      </div>
-                      <Link to={`/profile/tracker`} className="link">
-                        <div className="tasks__head__back">
-                          <p>Вернуться на проекты</p>
-                          <img src={arrow} alt="arrow" />
+                  <div className="tasks__head__persons">
+                    {/*<img src={avatarTest} alt="avatar" />*/}
+                    {/*<img src={avatarTest} alt="avatar" />*/}
+                    <span className="countPersons">
+                      {projectBoard.projectUsers?.length}
+                    </span>
+                    <span
+                      className="addPerson"
+                      onClick={() => {
+                        setPersonListOpen(true);
+                      }}
+                    >
+                      +
+                    </span>
+                    <p>добавить участника</p>
+                    {personListOpen && (
+                      <div className="persons__list">
+                        <img
+                          className="persons__list__close"
+                          src={close}
+                          alt="close"
+                          onClick={() => setPersonListOpen(false)}
+                        />
+                        <div className="persons__list__count">
+                          <span>{projectBoard.projectUsers?.length}</span>
+                          участник
                         </div>
-                      </Link>
+                        <div className="persons__list__info">
+                          В проекте - <span>“{projectBoard.name}”</span>
+                        </div>
+                        <div className="persons__list__items">
+                          {projectBoard.projectUsers?.map((person) => {
+                            return (
+                              <div
+                                className="persons__list__item"
+                                key={person.user_id}
+                              >
+                                <img
+                                  className="avatar"
+                                  src={urlForLocal(person.user.avatar)}
+                                  alt="avatar"
+                                />
+                                <span>{person.user.fio}</span>
+                                <img
+                                  className="delete"
+                                  src={close}
+                                  alt="delete"
+                                  onClick={() => deletePerson(person.user_id)}
+                                />
+                              </div>
+                            );
+                          })}
+                        </div>
+                        <div
+                          className="persons__list__add"
+                          onClick={() => {
+                            dispatch(modalToggle("addWorker"));
+                            setModalAddWorker(true);
+                            setPersonListOpen(false);
+                          }}
+                        >
+                          <span className="addPerson">+</span>
+                          <p>Добавить участников</p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                  <Link to={`/profile/tracker`} className="link">
+                    <div className="tasks__head__back">
+                      <p>Вернуться на проекты</p>
+                      <img src={arrow} alt="arrow" />
                     </div>
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <div className="modal-tiket__content ticket">
+              <div className="content ticket-whith">
+                <div className="content__task">
+                  <span>Задача</span>
+                  {editOpen ? (
+                    <input
+                      value={inputsValue.title}
+                      onChange={(e) => {
+                        setInputsValue((prevValue) => ({
+                          ...prevValue,
+                          title: e.target.value,
+                        }));
+                      }}
+                    />
+                  ) : (
+                    <h5>{inputsValue.title}</h5>
+                  )}
+                  <div className="content__description">
+                    {editOpen ? (
+                      <input
+                        value={inputsValue.description}
+                        onChange={(e) => {
+                          setInputsValue((prevValue) => ({
+                            ...prevValue,
+                            description: e.target.value,
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <p>{inputsValue.description}</p>
+                    )}
+                    {/*<img src={task} className="image-task"></img>*/}
+                  </div>
+                  <div className="content__communication">
+                    <p className="tasks">
+                      <button
+                        onClick={() => {
+                          dispatch(modalToggle("addSubtask"));
+                          setModalAddWorker(true);
+                        }}
+                      >
+                        <img src={plus} alt="plus"></img>
+                        Добавить под задачу
+                      </button>
+                    </p>
+                    <p className="file">
+                      <button>
+                        <img src={file} alt="file"></img>
+                        Загрузить файл
+                      </button>
+                      <span>{0}</span>
+                      Файлов
+                    </p>
+                  </div>
+                  <div className="content__input">
+                    <input
+                      placeholder="Оставить комментарий"
+                      value={inputsValue.comment}
+                      onChange={(e) => {
+                        setInputsValue((prevValue) => ({
+                          ...prevValue,
+                          comment: e.target.value,
+                        }));
+                      }}
+                    />
+                    <img src={send} onClick={createComment} alt="send"></img>
+                  </div>
+                  <div className="comments__list">
+                    {comments.map((comment) => {
+                      return (
+                        <TrackerTaskComment
+                          key={comment.id}
+                          taskId={taskInfo.id}
+                          comment={comment}
+                          commentDelete={commentDelete}
+                          addSubComment={addSubComment}
+                          subCommentDelete={subCommentDelete}
+                        />
+                      );
+                    })}
                   </div>
                 </div>
-                <div className="modal-tiket__content ticket">
-                  <div className="content ticket-whith">
-                    <div className="content__task">
-                      <span>Задача</span>
-                      {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-                        setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-                      }} /> :<h5>{inputsValue.title}</h5>}
-                      <div className="content__description">
-                        {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                          setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-                        }}/> :<p>{inputsValue.description}</p>}
-                        {/*<img src={task} className="image-task"></img>*/}
-                      </div>
-                      <div className="content__communication">
-                        <p className="tasks">
-                          <button
-                              onClick={() => {
-                                dispatch(modalToggle("addSubtask"));
-                                setModalAddWorker(true);
-                              }}
-                          >
-                            <img src={plus} alt='plus'></img>
-                            Добавить под задачу
-                          </button>
-                        </p>
-                        <p className="file">
-                          <button>
-                            <img src={file} alt='file'></img>
-                            Загрузить файл
-                          </button>
-                          <span>{0}</span>
-                          Файлов
-                        </p>
-                      </div>
-                      <div className="content__input">
-                        <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                          setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-                        }} />
-                        <img src={send} onClick={createComment} alt='send'></img>
-                      </div>
-                      <div className='comments__list'>
-                        {comments.map((comment) => {
-                          return <TrackerTaskComment
-                              key={comment.id}
-                              taskId={taskInfo.id}
-                              comment={comment}
-                              commentDelete={commentDelete}
-                              addSubComment={addSubComment}
-                              subCommentDelete={subCommentDelete}
-                          />
-                        })
-
-                        }
-                      </div>
-                    </div>
+              </div>
+              <div className="workers">
+                <div className="workers_box">
+                  <p className="workers__creator">
+                    Создатель : <span>{taskInfo.user?.fio}</span>
+                  </p>
+                  <div>
+                    {Boolean(taskInfo.taskUsers?.length) &&
+                      taskInfo.taskUsers.map((worker, index) => {
+                        return (
+                          <div className="worker" key={index}>
+                            <img src={worker.avatar} alt="worket"></img>
+                            <p>{worker.name}</p>
+                          </div>
+                        );
+                      })}
                   </div>
-                  <div className="workers">
-                    <div className="workers_box">
-                      <p className="workers__creator">
-                        Создатель : <span>{taskInfo.user?.fio}</span>
-                      </p>
-                      <div>
-                        {Boolean(taskInfo.taskUsers?.length) &&
-                            taskInfo.taskUsers.map((worker, index) => {
-                              return (
-                                  <div className="worker" key={index}>
-                                    <img src={worker.avatar} alt='worket'></img>
-                                    <p>{worker.name}</p>
-                                  </div>
-                              );
-                            })}
-                      </div>
 
-                      <div className="add-worker moreItems">
-                        <button
-                            onClick={() => {
-                              dispatch(modalToggle("addWorker"));
-                              setModalAddWorker(true);
-                            }}
-                        >
-                          +
-                        </button>
-                        <span>Добавить исполнителя</span>
-                      </div>
-                      <div className="add-worker moreItems">
-                        <button
-                            onClick={() => {
-                              dispatch(modalToggle("addWorker"));
-                              setModalAddWorker(true);
-                            }}
-                        >
-                          +
-                        </button>
-                        <span>Добавить участников</span>
-                      </div>
-                    </div>
+                  <div className="add-worker moreItems">
+                    <button
+                      onClick={() => {
+                        dispatch(modalToggle("addWorker"));
+                        setModalAddWorker(true);
+                      }}
+                    >
+                      +
+                    </button>
+                    <span>Добавить исполнителя</span>
+                  </div>
+                  <div className="add-worker moreItems">
+                    <button
+                      onClick={() => {
+                        dispatch(modalToggle("addWorker"));
+                        setModalAddWorker(true);
+                      }}
+                    >
+                      +
+                    </button>
+                    <span>Добавить участников</span>
+                  </div>
+                </div>
 
-                    <div className="workers_box-middle">
-                      <div className="time">
-                        <img src={watch} alt='watch'></img>
-                        <span>Длительность : </span>
-                        <p>{"0:00:00"}</p>
-                      </div>
+                <div className="workers_box-middle">
+                  <div className="time">
+                    <img src={watch} alt="watch"></img>
+                    <span>Длительность : </span>
+                    <p>{"0:00:00"}</p>
+                  </div>
 
-                      {timerStart ?
-                          <button className="stop" onClick={() => stopTaskTimer()}>
-                            Остановить
-                          </button>
-                          :
-                          <button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
-                            Начать делать <img src={arrow2} alt='arrow'></img>
-                          </button>
+                  {timerStart ? (
+                    <button className="stop" onClick={() => stopTaskTimer()}>
+                      Остановить
+                    </button>
+                  ) : (
+                    <button
+                      className={
+                        taskInfo.executor_id ===
+                        Number(localStorage.getItem("id"))
+                          ? "start"
+                          : "start disable"
                       }
-                    </div>
+                      onClick={() => startTaskTimer()}
+                    >
+                      Начать делать <img src={arrow2} alt="arrow"></img>
+                    </button>
+                  )}
+                </div>
 
-                    <div className="workers_box-bottom">
-                      <div className={editOpen ? 'edit' : ''} onClick={() => {
-                        if(editOpen) {
-                          setEditOpen(!editOpen)
-                          editTask()
-                        } else {
-                          setEditOpen(!editOpen)
-                        }
-                      }}>
-                        <img src={edit} alt='edit'></img>
-                        <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
-                      </div>
-                      <div>
-                        <img src={link} alt='link'></img>
-                        <p>ссылка на проект</p>
-                      </div>
-                      <div>
-                        <img src={archive2} alt='arch'></img>
-                        <p>в архив</p>
-                      </div>
-                      <div onClick={deleteTask}>
-                        <img src={del} alt='delete'></img>
-                        <p>удалить</p>
-                      </div>
-                    </div>
+                <div className="workers_box-bottom">
+                  <div
+                    className={editOpen ? "edit" : ""}
+                    onClick={() => {
+                      if (editOpen) {
+                        setEditOpen(!editOpen);
+                        editTask();
+                      } else {
+                        setEditOpen(!editOpen);
+                      }
+                    }}
+                  >
+                    <img src={edit} alt="edit"></img>
+                    <p>{editOpen ? "сохранить" : "редактировать"}</p>
+                  </div>
+                  <div>
+                    <img src={link} alt="link"></img>
+                    <p>ссылка на проект</p>
+                  </div>
+                  <div>
+                    <img src={archive2} alt="arch"></img>
+                    <p>в архив</p>
+                  </div>
+                  <div onClick={deleteTask}>
+                    <img src={del} alt="delete"></img>
+                    <p>удалить</p>
                   </div>
                 </div>
-              </>
-          }
-        </div>
-        <Footer />
-      </section>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+      <Footer />
+    </section>
   );
 };
 
diff --git a/src/components/Modal/TrackerModal/TrackerModal.jsx b/src/components/Modal/TrackerModal/TrackerModal.jsx
index 07ac002a..da44c264 100644
--- a/src/components/Modal/TrackerModal/TrackerModal.jsx
+++ b/src/components/Modal/TrackerModal/TrackerModal.jsx
@@ -1,24 +1,23 @@
-import React, {useEffect, useState} from "react";
-
+import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+
 import { apiRequest } from "../../../api/request";
-import { urlForLocal } from '../../../utils/helper'
+import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
 import {
-  setColumnName,
-  setColumnPriority,
+  addPersonToProject,
+  editColumnName,
+  editProjectName,
+  getColumnId,
+  getColumnName,
+  getColumnPriority,
   getProjectBoard,
   getValueModalType,
+  setColumnName,
+  setColumnPriority,
   setProject,
   setProjectBoardFetch,
-  editProjectName,
-  editColumnName,
-  getColumnName,
-  getColumnId,
-  addPersonToProject, getColumnPriority
 } from "../../../redux/projectsTrackerSlice";
-
-import arrowDown from "../../../assets/icons/arrows/selectArrow.png"
-
+import { urlForLocal } from "../../../utils/helper";
 import "./trackerModal.scss";
 
 export const TrackerModal = ({
@@ -33,8 +32,8 @@ export const TrackerModal = ({
   const dispatch = useDispatch();
   const projectBoard = useSelector(getProjectBoard);
   const columnName = useSelector(getColumnName);
-  const columnId = useSelector(getColumnId)
-  const columnPriority = useSelector(getColumnPriority)
+  const columnId = useSelector(getColumnId);
+  const columnPriority = useSelector(getColumnPriority);
 
   const modalType = useSelector(getValueModalType);
   const [projectName, setProjectName] = useState(defautlInput);
@@ -42,9 +41,9 @@ export const TrackerModal = ({
   const [nameProject, setNameProject] = useState("");
   const [valueTiket, setValueTiket] = useState("");
   const [descriptionTicket, setDescriptionTicket] = useState("");
-  const [workers, setWorkers] = useState([])
-  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false)
-  const [selectedWorker, setSelectedWorker] = useState(null)
+  const [workers, setWorkers] = useState([]);
+  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
+  const [selectedWorker, setSelectedWorker] = useState(null);
 
   function createTab() {
     if (!valueColumn) {
@@ -55,7 +54,9 @@ export const TrackerModal = ({
       method: "POST",
       data: {
         project_id: projectBoard.id,
-        priority: projectBoard.columns.length ? projectBoard.columns.at(-1).priority + 1 : 1,
+        priority: projectBoard.columns.length
+          ? projectBoard.columns.at(-1).priority + 1
+          : 1,
         title: valueColumn,
       },
     }).then(() => {
@@ -106,36 +107,38 @@ export const TrackerModal = ({
   function changeColumnParams() {
     projectBoard.columns.forEach((column) => {
       if (column.id === columnId && column.priority !== columnPriority) {
-        const priorityColumns = [{
-          column_id: column.id,
-          priority: Number(columnPriority)
-        }]
+        const priorityColumns = [
+          {
+            column_id: column.id,
+            priority: Number(columnPriority),
+          },
+        ];
         for (let i = column.priority; i < columnPriority; i++) {
           const currentColumn = {
             column_id: projectBoard.columns[i].id,
-            priority: i
-          }
-          priorityColumns.push(currentColumn)
+            priority: i,
+          };
+          priorityColumns.push(currentColumn);
         }
         for (let i = column.priority; i > columnPriority; i--) {
           const currentColumn = {
             column_id: projectBoard.columns[i - 2].id,
-            priority: i
-          }
-          priorityColumns.push(currentColumn)
+            priority: i,
+          };
+          priorityColumns.push(currentColumn);
         }
         apiRequest("/project-column/set-priority", {
           method: "POST",
           data: {
             project_id: projectBoard.id,
-            data: JSON.stringify(priorityColumns)
-          }
+            data: JSON.stringify(priorityColumns),
+          },
         }).then(() => {
           dispatch(setProjectBoardFetch(projectBoard.id));
-        })
+        });
       }
-    })
-    changeColumnTitle()
+    });
+    changeColumnTitle();
   }
 
   function changeColumnTitle() {
@@ -376,12 +379,12 @@ export const TrackerModal = ({
               <h4>Приоритет колонки</h4>
               <div className="input-container">
                 <input
-                    className="name-project"
-                    placeholder='Приоритет колонки'
-                    type='number'
-                    step='1'
-                    value={columnPriority}
-                    onChange={(e) => dispatch(setColumnPriority(e.target.value))}
+                  className="name-project"
+                  placeholder="Приоритет колонки"
+                  type="number"
+                  step="1"
+                  value={columnPriority}
+                  onChange={(e) => dispatch(setColumnPriority(e.target.value))}
                 />
               </div>
             </div>
diff --git a/src/components/TrackerTaskComment/TrackerTaskComment.jsx b/src/components/TrackerTaskComment/TrackerTaskComment.jsx
index efdd258f..c20fb0dd 100644
--- a/src/components/TrackerTaskComment/TrackerTaskComment.jsx
+++ b/src/components/TrackerTaskComment/TrackerTaskComment.jsx
@@ -1,129 +1,161 @@
 import React, { useState } from "react";
-import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
+
 import { apiRequest } from "../../api/request";
-import {urlForLocal} from '../../utils/helper';
-import {getCorrectDate} from "../Calendar/calendarHelper";
-import edit from "../../assets/icons/edit.svg";
 import del from "../../assets/icons/delete.svg";
+import edit from "../../assets/icons/edit.svg";
 import accept from "../../assets/images/accept.png";
+import { urlForLocal } from "../../utils/helper";
+import { getCorrectDate } from "../Calendar/calendarHelper";
+import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
 
 export const TrackerTaskComment = ({
-    taskId,
-    comment,
-    commentDelete,
-    addSubComment,
-    subCommentDelete
+  taskId,
+  comment,
+  commentDelete,
+  addSubComment,
+  subCommentDelete,
 }) => {
-    const [commentsEditOpen, setCommentsEditOpen] = useState(false)
-    const [commentsEditText, setCommentsEditText] = useState(comment.text)
-    const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false)
-    const [subCommentsCreateText, setSubCommentsCreateText] = useState('')
+  const [commentsEditOpen, setCommentsEditOpen] = useState(false);
+  const [commentsEditText, setCommentsEditText] = useState(comment.text);
+  const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false);
+  const [subCommentsCreateText, setSubCommentsCreateText] = useState("");
 
-    function editComment() {
-        if (commentsEditText === comment.text) return
-        apiRequest("/comment/update", {
-            method: "PUT",
-            data: {
-                comment_id: comment.id,
-                text: commentsEditText
-            }
-        }).then(() => {
-        })
-    }
+  function editComment() {
+    if (commentsEditText === comment.text) return;
+    apiRequest("/comment/update", {
+      method: "PUT",
+      data: {
+        comment_id: comment.id,
+        text: commentsEditText,
+      },
+    }).then(() => {});
+  }
 
-    function deleteComment() {
-        apiRequest("/comment/update", {
-            method: "PUT",
-            data: {
-                comment_id: comment.id,
-                status: 0
-            }
-        }).then(() => {
-            if (comment.parent_id) {
-                subCommentDelete(comment)
-            } else {
-                commentDelete(comment)
-            }
-        })
-    }
+  function deleteComment() {
+    apiRequest("/comment/update", {
+      method: "PUT",
+      data: {
+        comment_id: comment.id,
+        status: 0,
+      },
+    }).then(() => {
+      if (comment.parent_id) {
+        subCommentDelete(comment);
+      } else {
+        commentDelete(comment);
+      }
+    });
+  }
 
-    function createSubComment() {
-        setSubCommentsCreateOpen(false)
-        if(!subCommentsCreateText) return
-        apiRequest("/comment/create", {
-            method: "POST",
-            data: {
-                text: subCommentsCreateText,
-                entity_type: 2,
-                entity_id: taskId,
-                parent_id: comment.id
-            }
-        }).then((res) => {
-            let newSubComment = res
-            newSubComment.created_at = new Date()
-            setSubCommentsCreateText('')
-            addSubComment(comment.id, newSubComment)
-        })
-    }
+  function createSubComment() {
+    setSubCommentsCreateOpen(false);
+    if (!subCommentsCreateText) return;
+    apiRequest("/comment/create", {
+      method: "POST",
+      data: {
+        text: subCommentsCreateText,
+        entity_type: 2,
+        entity_id: taskId,
+        parent_id: comment.id,
+      },
+    }).then((res) => {
+      let newSubComment = res;
+      newSubComment.created_at = new Date();
+      setSubCommentsCreateText("");
+      addSubComment(comment.id, newSubComment);
+    });
+  }
 
-    return (
-        <div className={[!comment.parent_id && comment.subComments.length ? 'comments__list__item__main': '',
-            'comments__list__item',
-            comment.parent_id ? 'comments__list__item__subComment' : ''].join(' ')}>
-            <div className='comments__list__item__info'>
-                <div className='comments__list__item__fio'>
-                    <img src={urlForLocal(comment.user.avatar)} alt='avatar' />
-                    <p>{comment.user.fio}</p>
-                </div>
-                <div className='comments__list__item__date'>
-                    <span>{getCorrectDate(comment.created_at)}</span>
-                    {comment.user_id === Number(localStorage.getItem('id')) &&
-                        <>
-                        <div className={commentsEditOpen ? 'edit edit__open' : 'edit'} >
-                            <img src={edit} alt='edit' onClick={() => {
-                                if (commentsEditOpen) {
-                                    editComment()
-                                }
-                                setCommentsEditOpen(!commentsEditOpen)
-                            }} />
-                        </div>
-                        <img src={del} alt='delete' onClick={() => deleteComment()} />
-                        </>
-                    }
-                </div>
-            </div>
-            {commentsEditOpen ?
-                <input className='comments__list__item__text' value={commentsEditText} onChange={(e) =>  {
-                    setCommentsEditText(e.target.value)
-                }} /> :
-                <p className='comments__list__item__text'>{commentsEditText}</p>}
-            {!comment.parent_id &&
-                <>
-                {
-                    subCommentsCreateOpen ?
-                        <div className='comments__list__item__answer__new'>
-                            <input value={subCommentsCreateText} onChange={(e) => {
-                                setSubCommentsCreateText(e.target.value)
-                            }}/>
-                            <img src={accept} alt='accept'
-                                 onClick={() => {
-                                     createSubComment()
-                                 }}
-                            />
-                        </div>
-                        :
-                        <span onClick={() => {
-                            setSubCommentsCreateOpen(true)
-                        }} className='comments__list__item__answer'>Ответить</span>
-                    }
-                </>
-            }
-            {Boolean(comment.subComments?.length) && comment.subComments.map((subComment) => {
-                return <TrackerTaskSubComment key={subComment.id} taskId={taskId} comment={subComment} subCommentDelete={subCommentDelete}/>
-                })
-            }
+  return (
+    <div
+      className={[
+        !comment.parent_id && comment.subComments.length
+          ? "comments__list__item__main"
+          : "",
+        "comments__list__item",
+        comment.parent_id ? "comments__list__item__subComment" : "",
+      ].join(" ")}
+    >
+      <div className="comments__list__item__info">
+        <div className="comments__list__item__fio">
+          <img src={urlForLocal(comment.user.avatar)} alt="avatar" />
+          <p>{comment.user.fio}</p>
         </div>
-    )
-}
+        <div className="comments__list__item__date">
+          <span>{getCorrectDate(comment.created_at)}</span>
+          {comment.user_id === Number(localStorage.getItem("id")) && (
+            <>
+              <div className={commentsEditOpen ? "edit edit__open" : "edit"}>
+                <img
+                  src={edit}
+                  alt="edit"
+                  onClick={() => {
+                    if (commentsEditOpen) {
+                      editComment();
+                    }
+                    setCommentsEditOpen(!commentsEditOpen);
+                  }}
+                />
+              </div>
+              <img src={del} alt="delete" onClick={() => deleteComment()} />
+            </>
+          )}
+        </div>
+      </div>
+      {commentsEditOpen ? (
+        <input
+          className="comments__list__item__text"
+          value={commentsEditText}
+          onChange={(e) => {
+            setCommentsEditText(e.target.value);
+          }}
+        />
+      ) : (
+        <p className="comments__list__item__text">{commentsEditText}</p>
+      )}
+      {!comment.parent_id && (
+        <>
+          {subCommentsCreateOpen ? (
+            <div className="comments__list__item__answer__new">
+              <input
+                value={subCommentsCreateText}
+                onChange={(e) => {
+                  setSubCommentsCreateText(e.target.value);
+                }}
+              />
+              <img
+                src={accept}
+                alt="accept"
+                onClick={() => {
+                  createSubComment();
+                }}
+              />
+            </div>
+          ) : (
+            <span
+              onClick={() => {
+                setSubCommentsCreateOpen(true);
+              }}
+              className="comments__list__item__answer"
+            >
+              Ответить
+            </span>
+          )}
+        </>
+      )}
+      {Boolean(comment.subComments?.length) &&
+        comment.subComments.map((subComment) => {
+          return (
+            <TrackerTaskSubComment
+              key={subComment.id}
+              taskId={taskId}
+              comment={subComment}
+              subCommentDelete={subCommentDelete}
+            />
+          );
+        })}
+    </div>
+  );
+};
 
-export default TrackerTaskComment
+export default TrackerTaskComment;
diff --git a/src/components/UI/ModalTicket/ModalTicket.jsx b/src/components/UI/ModalTicket/ModalTicket.jsx
index ba3b2025..973a46fa 100644
--- a/src/components/UI/ModalTicket/ModalTicket.jsx
+++ b/src/components/UI/ModalTicket/ModalTicket.jsx
@@ -1,29 +1,28 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
+
+import { apiRequest } from "../../../api/request";
+import archive from "../../../assets/icons/archive.svg";
+import arrow from "../../../assets/icons/arrows/arrowStart.png";
+import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg";
+import category from "../../../assets/icons/category.svg";
+import close from "../../../assets/icons/closeProjectPersons.svg";
+import del from "../../../assets/icons/delete.svg";
+import edit from "../../../assets/icons/edit.svg";
+import file from "../../../assets/icons/fileModal.svg";
+import link from "../../../assets/icons/link.svg";
+import plus from "../../../assets/icons/plus.svg";
+import send from "../../../assets/icons/send.svg";
+import watch from "../../../assets/icons/watch.svg";
 import TrackerModal from "../../../components/Modal/TrackerModal/TrackerModal";
 import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
-import { apiRequest } from "../../../api/request";
-import { useDispatch } from "react-redux";
-import "./modalTicket.scss"
 import {
   modalToggle,
   setProjectBoardFetch,
 } from "../../../redux/projectsTrackerSlice";
-
-import category from "../../../assets/icons/category.svg";
-import watch from "../../../assets/icons/watch.svg";
-import file from "../../../assets/icons/fileModal.svg";
-import arrow from "../../../assets/icons/arrows/arrowStart.png";
-import link from "../../../assets/icons/link.svg";
-import archive from "../../../assets/icons/archive.svg";
-import del from "../../../assets/icons/delete.svg";
-import edit from "../../../assets/icons/edit.svg";
-import send from "../../../assets/icons/send.svg";
-import plus from "../../../assets/icons/plus.svg";
-import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg";
-import close from "../../../assets/icons/closeProjectPersons.svg";
-
-import {urlForLocal, getCorrectRequestDate} from "../../../utils/helper";
+import { getCorrectRequestDate, urlForLocal } from "../../../utils/helper";
+import "./modalTicket.scss";
 
 export const ModalTiсket = ({
   active,
@@ -31,26 +30,30 @@ export const ModalTiсket = ({
   task,
   projectId,
   projectName,
-  projectUsers
+  projectUsers,
 }) => {
   const dispatch = useDispatch();
   const [addSubtask, setAddSubtask] = useState(false);
   const [editOpen, setEditOpen] = useState(false);
-  const [inputsValue, setInputsValue] = useState({title: task.title, description: task.description, comment: ''});
+  const [inputsValue, setInputsValue] = useState({
+    title: task.title,
+    description: task.description,
+    comment: "",
+  });
   const [comments, setComments] = useState([]);
-  const [dropListOpen, setDropListOpen] = useState(false)
-  const [dropListMembersOpen, setDropListMembersOpen] = useState(false)
-  const [executor, setExecutor] = useState(task.executor)
-  const [members, setMembers] = useState(task.taskUsers)
-  const [users, setUsers] = useState([])
-  const [timerStart, setTimerStart] = useState(false)
-  const [timerInfo, setTimerInfo] = useState({})
+  const [dropListOpen, setDropListOpen] = useState(false);
+  const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
+  const [executor, setExecutor] = useState(task.executor);
+  const [members, setMembers] = useState(task.taskUsers);
+  const [users, setUsers] = useState([]);
+  const [timerStart, setTimerStart] = useState(false);
+  const [timerInfo, setTimerInfo] = useState({});
   const [currentTimerCount, setCurrentTimerCount] = useState({
     hours: 0,
     minute: 0,
-    seconds: 0
-  })
-  const [timerId, setTimerId] = useState(null)
+    seconds: 0,
+  });
+  const [timerId, setTimerId] = useState(null);
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -59,7 +62,7 @@ export const ModalTiсket = ({
         task_id: task.id,
         status: 0,
       },
-    }).then((res) => {
+    }).then(() => {
       setActive(false);
       dispatch(setProjectBoardFetch(projectId));
     });
@@ -71,9 +74,9 @@ export const ModalTiсket = ({
       data: {
         task_id: task.id,
         title: inputsValue.title,
-        description: inputsValue.description
+        description: inputsValue.description,
       },
-    }).then((res) => {
+    }).then(() => {
       dispatch(setProjectBoardFetch(projectId));
     });
   }
@@ -84,19 +87,21 @@ export const ModalTiсket = ({
       data: {
         text: inputsValue.comment,
         entity_type: 2,
-        entity_id: task.id
-      }
+        entity_id: task.id,
+      },
     }).then((res) => {
-      let newComment = res
-      newComment.created_at = new Date()
-      newComment.subComments = []
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setComments((prevValue) => ([...prevValue, newComment]))
-    })
+      let newComment = res;
+      newComment.created_at = new Date();
+      newComment.subComments = [];
+      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
+      setComments((prevValue) => [...prevValue, newComment]);
+    });
   }
 
   function commentDelete(comment) {
-    setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
+    setComments((prevValue) =>
+      prevValue.filter((item) => item.id !== comment.id)
+    );
     if (comment.subComments.length) {
       // promiseAll
       comment.subComments.forEach((subComment) => {
@@ -104,32 +109,33 @@ export const ModalTiсket = ({
           method: "PUT",
           data: {
             comment_id: subComment.id,
-            status: 0
-          }
-        }).then(() => {
-        })
-      })
+            status: 0,
+          },
+        }).then(() => {});
+      });
     }
   }
 
   function addSubComment(commentId, subComment) {
-    const addSubComment = comments
+    const addSubComment = comments;
     addSubComment.forEach((comment) => {
       if (comment.id === commentId) {
-        comment.subComments.push(subComment)
+        comment.subComments.push(subComment);
       }
-    })
-    setComments(addSubComment)
+    });
+    setComments(addSubComment);
   }
 
   function subCommentDelete(subComment) {
-    const deleteSubComment = comments
+    const deleteSubComment = comments;
     deleteSubComment.forEach((comment, index) => {
       if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
+        deleteSubComment[index].subComments = comment.subComments.filter(
+          (item) => item.id !== subComment.id
+        );
       }
-    })
-    setComments([...deleteSubComment])
+    });
+    setComments([...deleteSubComment]);
   }
 
   function startTaskTimer() {
@@ -138,13 +144,13 @@ export const ModalTiсket = ({
       data: {
         entity_type: 2,
         entity_id: task.id,
-        created_at: getCorrectRequestDate(new Date())
-      }
+        created_at: getCorrectRequestDate(new Date()),
+      },
     }).then((res) => {
-      setTimerStart(true)
-      setTimerInfo(res)
-      startTimer()
-    })
+      setTimerStart(true);
+      setTimerInfo(res);
+      startTimer();
+    });
   }
 
   function stopTaskTimer() {
@@ -152,12 +158,12 @@ export const ModalTiсket = ({
       method: "PUT",
       data: {
         timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date())
-      }
+        stopped_at: getCorrectRequestDate(new Date()),
+      },
     }).then(() => {
-      setTimerStart(false)
-      clearInterval(timerId)
-    })
+      setTimerStart(false);
+      clearInterval(timerId);
+    });
   }
 
   function taskExecutor(person) {
@@ -165,11 +171,11 @@ export const ModalTiсket = ({
       method: "PUT",
       data: {
         task_id: task.id,
-        executor_id: person.user_id
+        executor_id: person.user_id,
       },
     }).then((res) => {
-      setDropListOpen(false)
-      setExecutor(res.executor)
+      setDropListOpen(false);
+      setExecutor(res.executor);
     });
   }
 
@@ -178,10 +184,10 @@ export const ModalTiсket = ({
       method: "PUT",
       data: {
         task_id: task.id,
-        executor_id: 0
+        executor_id: 0,
       },
     }).then(() => {
-      setExecutor(null)
+      setExecutor(null);
     });
   }
 
@@ -190,11 +196,11 @@ export const ModalTiсket = ({
       method: "POST",
       data: {
         task_id: task.id,
-        user_id: person.user_id
+        user_id: person.user_id,
       },
     }).then((res) => {
-      setDropListMembersOpen(false)
-      setMembers((prevValue) => ([...prevValue, res]))
+      setDropListMembersOpen(false);
+      setMembers((prevValue) => [...prevValue, res]);
     });
   }
 
@@ -203,88 +209,97 @@ export const ModalTiсket = ({
       method: "DELETE",
       data: {
         task_id: task.id,
-        user_id: person.user_id
+        user_id: person.user_id,
       },
     }).then(() => {
-      setMembers(members.filter((item) => item.user_id !== person.user_id))
+      setMembers(members.filter((item) => item.user_id !== person.user_id));
     });
   }
 
   useEffect(() => {
-    apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
+    apiRequest(
+      `/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
+    ).then((res) => {
       const comments = res.reduce((acc, cur) => {
         if (!cur.parent_id) {
-          acc.push({...cur, subComments: []})
+          acc.push({ ...cur, subComments: [] });
         } else {
           acc.forEach((item) => {
-            if (item.id === cur.parent_id) item.subComments.push(cur)
-          })
+            if (item.id === cur.parent_id) item.subComments.push(cur);
+          });
         }
-        return acc
-      }, [])
-      setComments(comments)
-    })
-    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
-      let timerSeconds = 0
-      res.length && res.forEach((time) => {
-        timerSeconds += time.deltaSeconds
-        setCurrentTimerCount({
-          hours: Math.floor(timerSeconds / 60 / 60),
-          minute: Math.floor(timerSeconds / 60 % 60),
-          seconds: timerSeconds % 60}
-        )
-        updateTimerHours = Math.floor(timerSeconds / 60 / 60)
-        updateTimerMinute = Math.floor(timerSeconds / 60 % 60)
-        updateTimerSec = timerSeconds % 60
-        if (!time.stopped_at) {
-          setTimerStart(true)
-          startTimer()
-          setTimerInfo(time)
-        }
-      })
-    })
-  }, [])
+        return acc;
+      }, []);
+      setComments(comments);
+    });
+    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
+      (res) => {
+        let timerSeconds = 0;
+        res.length &&
+          res.forEach((time) => {
+            timerSeconds += time.deltaSeconds;
+            setCurrentTimerCount({
+              hours: Math.floor(timerSeconds / 60 / 60),
+              minute: Math.floor((timerSeconds / 60) % 60),
+              seconds: timerSeconds % 60,
+            });
+            updateTimerHours = Math.floor(timerSeconds / 60 / 60);
+            updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
+            updateTimerSec = timerSeconds % 60;
+            if (!time.stopped_at) {
+              setTimerStart(true);
+              startTimer();
+              setTimerInfo(time);
+            }
+          });
+      }
+    );
+  }, []);
 
-  function startTimer () {
-    setTimerId(setInterval(() => {
-      run()
-    }, 1000))
+  function startTimer() {
+    setTimerId(
+      setInterval(() => {
+        run();
+      }, 1000)
+    );
   }
 
-  let updateTimerSec = currentTimerCount.seconds, updateTimerMinute = currentTimerCount.minute, updateTimerHours = currentTimerCount.hours
+  let updateTimerSec = currentTimerCount.seconds,
+    updateTimerMinute = currentTimerCount.minute,
+    updateTimerHours = currentTimerCount.hours;
 
-  function run () {
-    updateTimerSec++
+  function run() {
+    updateTimerSec++;
     if (updateTimerSec > 60) {
-      updateTimerMinute++
-      updateTimerSec = 0
+      updateTimerMinute++;
+      updateTimerSec = 0;
     }
     if (updateTimerMinute === 60) {
-      updateTimerMinute = 0
-      updateTimerHours++
+      updateTimerMinute = 0;
+      updateTimerHours++;
     }
 
     return setCurrentTimerCount({
       hours: updateTimerHours,
       minute: updateTimerMinute,
-      seconds: updateTimerSec
-    })
+      seconds: updateTimerSec,
+    });
   }
 
-  function correctTimerTime (time) {
-    if (time < 10) return `0${time}`
-    if (time > 10) return time
+  function correctTimerTime(time) {
+    if (time < 10) return `0${time}`;
+    if (time > 10) return time;
   }
 
-
   useEffect(() => {
-    let ids = members.map((user) => user.user_id)
-    setUsers(projectUsers.reduce((acc, cur) => {
-      if (!ids.includes(cur.user_id)) acc.push(cur)
-      return acc
-    }, []))
-  }, [members])
-
+    let ids = members.map((user) => user.user_id);
+    setUsers(
+      projectUsers.reduce((acc, cur) => {
+        if (!ids.includes(cur.user_id)) acc.push(cur);
+        return acc;
+      }, [])
+    );
+  }, [members]);
 
   return (
     <div
@@ -309,13 +324,33 @@ export const ModalTiсket = ({
 
           <div className="content__task">
             <span>Задача</span>
-            {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-              setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-            }} /> :<h5>{inputsValue.title}</h5>}
+            {editOpen ? (
+              <input
+                value={inputsValue.title}
+                onChange={(e) => {
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    title: e.target.value,
+                  }));
+                }}
+              />
+            ) : (
+              <h5>{inputsValue.title}</h5>
+            )}
             <div className="content__description">
-              {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-              }}/> :<p>{inputsValue.description}</p>}
+              {editOpen ? (
+                <input
+                  value={inputsValue.description}
+                  onChange={(e) => {
+                    setInputsValue((prevValue) => ({
+                      ...prevValue,
+                      description: e.target.value,
+                    }));
+                  }}
+                />
+              ) : (
+                <p>{inputsValue.description}</p>
+              )}
               {/*<img src={taskImg} className="image-task"></img>*/}
             </div>
             <div className="content__communication">
@@ -340,87 +375,127 @@ export const ModalTiсket = ({
               </p>
             </div>
             <div className="content__input">
-              <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-              }} />
+              <input
+                placeholder="Оставить комментарий"
+                value={inputsValue.comment}
+                onChange={(e) => {
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    comment: e.target.value,
+                  }));
+                }}
+              />
               <img src={send} onClick={createComment}></img>
             </div>
-            <div className='comments__list'>
+            <div className="comments__list">
               {comments.map((comment) => {
-                return <TrackerTaskComment
+                return (
+                  <TrackerTaskComment
                     key={comment.id}
                     taskId={task.id}
                     comment={comment}
                     commentDelete={commentDelete}
                     addSubComment={addSubComment}
                     subCommentDelete={subCommentDelete}
-                />
-                })
-              }
+                  />
+                );
+              })}
             </div>
           </div>
         </div>
         <div className="workers">
           <div className="workers_box task__info">
             <span className="exit" onClick={() => setActive(false)}></span>
-            <span className='nameProject'>{task.title}</span>
+            <span className="nameProject">{task.title}</span>
             <p className="workers__creator">Создатель : {task.user?.fio}</p>
 
-            {executor ?
-              <div className='executor'>
+            {executor ? (
+              <div className="executor">
                 <p>Исполнитель: {executor.fio}</p>
-                <img src={urlForLocal(executor.avatar)} alt='avatar' />
-                <img src={close} className='delete' onClick={() => deleteTaskExecutor()} />
-              </div> :
+                <img src={urlForLocal(executor.avatar)} alt="avatar" />
+                <img
+                  src={close}
+                  className="delete"
+                  onClick={() => deleteTaskExecutor()}
+                />
+              </div>
+            ) : (
               <div className="add-worker moreItems ">
                 <button onClick={() => setDropListOpen(true)}>+</button>
                 <span>Добавить исполнителя</span>
-                {dropListOpen &&
-                  <div className='dropdownList'>
-                    <img src={close} className='dropdownList__close' onClick={() => setDropListOpen(false)} />
+                {dropListOpen && (
+                  <div className="dropdownList">
+                    <img
+                      src={close}
+                      className="dropdownList__close"
+                      onClick={() => setDropListOpen(false)}
+                    />
                     {projectUsers.map((person) => {
-                      return <div className='dropdownList__person' key={person.user_id} onClick={() => taskExecutor(person)}>
-                        <span>{person.user.fio}</span>
-                        <img src={urlForLocal(person.user.avatar)} />
-                      </div>
-                    })
-                    }
+                      return (
+                        <div
+                          className="dropdownList__person"
+                          key={person.user_id}
+                          onClick={() => taskExecutor(person)}
+                        >
+                          <span>{person.user.fio}</span>
+                          <img src={urlForLocal(person.user.avatar)} />
+                        </div>
+                      );
+                    })}
                   </div>
-                }
+                )}
               </div>
-            }
+            )}
 
-            {Boolean(members.length) &&
-            <div className='members'>
-              <p>Участники:</p>
-                <div className='members__list'>
+            {Boolean(members.length) && (
+              <div className="members">
+                <p>Участники:</p>
+                <div className="members__list">
                   {members.map((member) => {
-                    return <div className='worker' key={member.user_id}>
-                      <p>{member.fio}</p>
-                      <img src={urlForLocal(member.avatar)} />
-                      <img src={close} className='delete' onClick={() => deleteMember(member)} />
-                    </div>
-                  })
-                  }
+                    return (
+                      <div className="worker" key={member.user_id}>
+                        <p>{member.fio}</p>
+                        <img src={urlForLocal(member.avatar)} />
+                        <img
+                          src={close}
+                          className="delete"
+                          onClick={() => deleteMember(member)}
+                        />
+                      </div>
+                    );
+                  })}
                 </div>
-            </div>
-            }
+              </div>
+            )}
 
             <div className="add-worker moreItems">
               <button onClick={() => setDropListMembersOpen(true)}>+</button>
               <span>Добавить участников</span>
-              {dropListMembersOpen &&
-              <div className='dropdownList'>
-                <img src={close} className='dropdownList__close' onClick={() => setDropListMembersOpen(false)} />
-                {users.length ? users.map((person) => {
-                  return <div className='dropdownList__person' key={person.user_id} onClick={() => addMember(person)}>
-                    <span>{person.user.fio}</span>
-                    <img src={urlForLocal(person.user.avatar)} />
-                  </div>
-                }) : <p className='noUsers'>Нет пользователей</p>
-                }
-              </div>
-              }
+              {dropListMembersOpen && (
+                <div className="dropdownList">
+                  <img
+                    src={close}
+                    className="dropdownList__close"
+                    onClick={() => setDropListMembersOpen(false)}
+                  />
+                  {users.length ? (
+                    users.map((person) => {
+                      return (
+                        <div
+                          className="dropdownList__person"
+                          key={person.user_id}
+                          onClick={() => addMember(person)}
+                        >
+                          <span>{person.user.fio}</span>
+                          <img src={urlForLocal(person.user.avatar)} />
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <p className="noUsers">Нет пользователей</p>
+                  )}
+                </div>
+              )}
             </div>
           </div>
 
@@ -429,32 +504,44 @@ export const ModalTiсket = ({
               <img src={watch}></img>
               <span>Длительность : </span>
               <p>
-                {correctTimerTime(currentTimerCount.hours)}:{correctTimerTime(currentTimerCount.minute)}:{correctTimerTime(currentTimerCount.seconds)}
+                {correctTimerTime(currentTimerCount.hours)}:
+                {correctTimerTime(currentTimerCount.minute)}:
+                {correctTimerTime(currentTimerCount.seconds)}
               </p>
             </div>
 
-            {timerStart ?
+            {timerStart ? (
               <button className="stop" onClick={() => stopTaskTimer()}>
                 Остановить
               </button>
-                :
-              <button className={task.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
+            ) : (
+              <button
+                className={
+                  task.executor_id === Number(localStorage.getItem("id"))
+                    ? "start"
+                    : "start disable"
+                }
+                onClick={() => startTaskTimer()}
+              >
                 Начать делать <img src={arrow}></img>
               </button>
-            }
+            )}
           </div>
 
           <div className="workers_box-bottom">
-            <div className={editOpen ? 'edit' : ''} onClick={() => {
-              if(editOpen) {
-                setEditOpen(!editOpen)
-                editTask()
-              } else {
-                setEditOpen(!editOpen)
-              }
-            }}>
+            <div
+              className={editOpen ? "edit" : ""}
+              onClick={() => {
+                if (editOpen) {
+                  setEditOpen(!editOpen);
+                  editTask();
+                } else {
+                  setEditOpen(!editOpen);
+                }
+              }}
+            >
               <img src={edit}></img>
-              <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
+              <p>{editOpen ? "сохранить" : "редактировать"}</p>
             </div>
             <div>
               <img src={link}></img>
diff --git a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
index fe9beaa7..6e5f2c59 100644
--- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
@@ -1,44 +1,42 @@
 import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link, useNavigate, useParams } from "react-router-dom";
 
-import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
-import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "@components/Common/Footer/Footer";
-import { Link, useParams, useNavigate } from "react-router-dom";
-import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
-import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
-import { Navigation } from "../../Navigation/Navigation";
-import {Loader} from "@components/Common/Loader/Loader";
+import { Loader } from "@components/Common/Loader/Loader";
 
-import {useDispatch, useSelector} from "react-redux";
+import { apiRequest } from "../../../api/request";
+import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
+import { getCorrectRequestDate, urlForLocal } from "../../../helper";
+import archive2 from "../../../images/archive.svg";
+import archive from "../../../images/archiveTracker.svg";
+import arrow from "../../../images/arrowCalendar.png";
+import arrow2 from "../../../images/arrowStart.png";
+import close from "../../../images/closeProjectPersons.svg";
+import del from "../../../images/delete.svg";
+import edit from "../../../images/edit.svg";
+import file from "../../../images/fileModal.svg";
+import link from "../../../images/link.svg";
+import plus from "../../../images/plus.svg";
+import send from "../../../images/send.svg";
+import project from "../../../images/trackerProject.svg";
+import tasks from "../../../images/trackerTasks.svg";
+import watch from "../../../images/watch.png";
 import {
   deletePersonOnProject,
+  getBoarderLoader,
+  getProjectBoard,
   modalToggle,
   setProjectBoardFetch,
   setToggleTab,
-  getProjectBoard,
-  getBoarderLoader,
 } from "../../../redux/projectsTrackerSlice";
-import { apiRequest } from "../../../api/request";
-
-import project from "../../../images/trackerProject.svg";
-import watch from "../../../images/watch.png";
-import file from "../../../images/fileModal.svg";
-import send from "../../../images/send.svg";
-import arrow2 from "../../../images/arrowStart.png";
-import plus from "../../../images/plus.svg";
-import tasks from "../../../images/trackerTasks.svg";
-import archive from "../../../images/archiveTracker.svg";
-import arrow from "../../../images/arrowCalendar.png";
-import link from "../../../images/link.svg";
-import archive2 from "../../../images/archive.svg";
-import del from "../../../images/delete.svg";
-import edit from "../../../images/edit.svg";
-import close from "../../../images/closeProjectPersons.svg";
-
+import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
+import { Navigation } from "../../Navigation/Navigation";
+import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
 import "./ticketFullScreen.scss";
-import {getCorrectRequestDate, urlForLocal} from "../../../helper";
 
-export const TicketFullScreen = ({}) => {
+export const TicketFullScreen = () => {
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const ticketId = useParams();
   const dispatch = useDispatch();
@@ -50,35 +48,41 @@ export const TicketFullScreen = ({}) => {
   const [inputsValue, setInputsValue] = useState({});
   const [loader, setLoader] = useState(true);
   const [comments, setComments] = useState([]);
-  const [personListOpen, setPersonListOpen] = useState(false)
-  const [timerStart, setTimerStart] = useState(false)
-  const [timerInfo, setTimerInfo] = useState({})
+  const [personListOpen, setPersonListOpen] = useState(false);
+  const [timerStart, setTimerStart] = useState(false);
+  const [timerInfo, setTimerInfo] = useState({});
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
       setTaskInfo(taskInfo);
-      setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
-      apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
+      setInputsValue({
+        title: taskInfo.title,
+        description: taskInfo.description,
+        comment: "",
+      });
+      apiRequest(
+        `/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
+      ).then((res) => {
         const comments = res.reduce((acc, cur) => {
           if (!cur.parent_id) {
-            acc.push({...cur, subComments: []})
+            acc.push({ ...cur, subComments: [] });
           } else {
             acc.forEach((item) => {
-              if (item.id === cur.parent_id) item.subComments.push(cur)
-            })
+              if (item.id === cur.parent_id) item.subComments.push(cur);
+            });
           }
-          return acc
-        }, [])
-        setComments(comments)
-      })
+          return acc;
+        }, []);
+        setComments(comments);
+      });
       taskInfo.timers.forEach((time) => {
         if (!time.stopped_at) {
-          setTimerStart(true)
-          setTimerInfo(time)
+          setTimerStart(true);
+          setTimerInfo(time);
         }
-      })
+      });
       dispatch(setProjectBoardFetch(taskInfo.project_id));
-      setLoader(boardLoader)
+      setLoader(boardLoader);
     });
   }, []);
 
@@ -89,7 +93,7 @@ export const TicketFullScreen = ({}) => {
         task_id: ticketId.id,
         status: 0,
       },
-    }).then((res) => {
+    }).then(() => {
       navigate(`/tracker/project/${taskInfo.project_id}`);
     });
   }
@@ -100,10 +104,9 @@ export const TicketFullScreen = ({}) => {
       data: {
         task_id: taskInfo.id,
         title: inputsValue.title,
-        description: inputsValue.description
+        description: inputsValue.description,
       },
-    }).then(() => {
-    });
+    }).then(() => {});
   }
 
   function createComment() {
@@ -112,15 +115,15 @@ export const TicketFullScreen = ({}) => {
       data: {
         text: inputsValue.comment,
         entity_type: 2,
-        entity_id: taskInfo.id
-      }
+        entity_id: taskInfo.id,
+      },
     }).then((res) => {
-      let newComment = res
-      newComment.created_at = new Date()
-      newComment.subComments = []
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setComments((prevValue) => ([...prevValue, newComment]))
-    })
+      let newComment = res;
+      newComment.created_at = new Date();
+      newComment.subComments = [];
+      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
+      setComments((prevValue) => [...prevValue, newComment]);
+    });
   }
 
   function startTaskTimer() {
@@ -129,12 +132,12 @@ export const TicketFullScreen = ({}) => {
       data: {
         entity_type: 2,
         entity_id: taskInfo.id,
-        created_at: getCorrectRequestDate(new Date())
-      }
+        created_at: getCorrectRequestDate(new Date()),
+      },
     }).then((res) => {
-      setTimerStart(true)
-      setTimerInfo(res)
-    })
+      setTimerStart(true);
+      setTimerInfo(res);
+    });
   }
 
   function stopTaskTimer() {
@@ -142,9 +145,9 @@ export const TicketFullScreen = ({}) => {
       method: "PUT",
       data: {
         timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date())
-      }
-    }).then(() => setTimerStart(false))
+        stopped_at: getCorrectRequestDate(new Date()),
+      },
+    }).then(() => setTimerStart(false));
   }
 
   function deletePerson(userId) {
@@ -152,47 +155,50 @@ export const TicketFullScreen = ({}) => {
       method: "DELETE",
       data: {
         project_id: projectBoard.id,
-        user_id: userId
+        user_id: userId,
       },
-    }).then((res) => {
-      dispatch(deletePersonOnProject(userId))
+    }).then(() => {
+      dispatch(deletePersonOnProject(userId));
     });
   }
 
   function commentDelete(comment) {
-    setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
+    setComments((prevValue) =>
+      prevValue.filter((item) => item.id !== comment.id)
+    );
     if (comment.subComments.length) {
       comment.subComments.forEach((subComment) => {
         apiRequest("/comment/update", {
           method: "PUT",
           data: {
             comment_id: subComment.id,
-            status: 0
-          }
-        }).then(() => {
-        })
-      })
+            status: 0,
+          },
+        }).then(() => {});
+      });
     }
   }
 
   function addSubComment(commentId, subComment) {
-    const addSubComment = comments
+    const addSubComment = comments;
     addSubComment.forEach((comment) => {
       if (comment.id === commentId) {
-        comment.subComments.push(subComment)
+        comment.subComments.push(subComment);
       }
-    })
-    setComments(addSubComment)
+    });
+    setComments(addSubComment);
   }
 
   function subCommentDelete(subComment) {
-    const deleteSubComment = comments
+    const deleteSubComment = comments;
     deleteSubComment.forEach((comment, index) => {
       if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
+        deleteSubComment[index].subComments = comment.subComments.filter(
+          (item) => item.id !== subComment.id
+        );
       }
-    })
-    setComments([...deleteSubComment])
+    });
+    setComments([...deleteSubComment]);
   }
 
   const toggleTabs = (index) => {
@@ -241,212 +247,278 @@ export const TicketFullScreen = ({}) => {
             <p>Архив</p>
           </Link>
         </div>
-        {loader ? <Loader /> :
-        <>
-        <div className="tracker__tabs__content content-tabs">
-          <div className="tasks__head">
-            <div className="tasks__head__wrapper">
-              <h4>Проект : {projectBoard.name}</h4>
+        {loader ? (
+          <Loader />
+        ) : (
+          <>
+            <div className="tracker__tabs__content content-tabs">
+              <div className="tasks__head">
+                <div className="tasks__head__wrapper">
+                  <h4>Проект : {projectBoard.name}</h4>
 
-              <TrackerModal
-                active={modalAddWorker}
-                setActive={setModalAddWorker}
-              ></TrackerModal>
+                  <TrackerModal
+                    active={modalAddWorker}
+                    setActive={setModalAddWorker}
+                  ></TrackerModal>
 
-              <div className="tasks__head__persons">
-                {/*<img src={avatarTest} alt="avatar" />*/}
-                {/*<img src={avatarTest} alt="avatar" />*/}
-                <span className="countPersons">{projectBoard.projectUsers?.length}</span>
-                <span
-                  className="addPerson"
-                  onClick={() => {
-                    setPersonListOpen(true)
-                  }}
-                >
-                  +
-                </span>
-                <p>добавить участника</p>
-                {personListOpen &&
-                <div className='persons__list'>
-                  <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                  <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                  <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                  <div className='persons__list__items'>
-                    {projectBoard.projectUsers?.map((person) => {
-                      return <div className='persons__list__item' key={person.user_id}>
-                        <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                        <span>{person.user.fio}</span>
-                        <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
+                  <div className="tasks__head__persons">
+                    {/*<img src={avatarTest} alt="avatar" />*/}
+                    {/*<img src={avatarTest} alt="avatar" />*/}
+                    <span className="countPersons">
+                      {projectBoard.projectUsers?.length}
+                    </span>
+                    <span
+                      className="addPerson"
+                      onClick={() => {
+                        setPersonListOpen(true);
+                      }}
+                    >
+                      +
+                    </span>
+                    <p>добавить участника</p>
+                    {personListOpen && (
+                      <div className="persons__list">
+                        <img
+                          className="persons__list__close"
+                          src={close}
+                          alt="close"
+                          onClick={() => setPersonListOpen(false)}
+                        />
+                        <div className="persons__list__count">
+                          <span>{projectBoard.projectUsers?.length}</span>
+                          участник
+                        </div>
+                        <div className="persons__list__info">
+                          В проекте - <span>“{projectBoard.name}”</span>
+                        </div>
+                        <div className="persons__list__items">
+                          {projectBoard.projectUsers?.map((person) => {
+                            return (
+                              <div
+                                className="persons__list__item"
+                                key={person.user_id}
+                              >
+                                <img
+                                  className="avatar"
+                                  src={urlForLocal(person.user.avatar)}
+                                  alt="avatar"
+                                />
+                                <span>{person.user.fio}</span>
+                                <img
+                                  className="delete"
+                                  src={close}
+                                  alt="delete"
+                                  onClick={() => deletePerson(person.user_id)}
+                                />
+                              </div>
+                            );
+                          })}
+                        </div>
+                        <div
+                          className="persons__list__add"
+                          onClick={() => {
+                            dispatch(modalToggle("addWorker"));
+                            setModalAddWorker(true);
+                            setPersonListOpen(false);
+                          }}
+                        >
+                          <span className="addPerson">+</span>
+                          <p>Добавить участников</p>
+                        </div>
                       </div>
-                    })
-                    }
+                    )}
                   </div>
-                  <div className='persons__list__add'
-                       onClick={() => {
-                         dispatch(modalToggle("addWorker"));
-                         setModalAddWorker(true);
-                         setPersonListOpen(false)
-                       }}
-                  >
-                    <span className='addPerson'>+</span>
-                    <p>Добавить участников</p>
+                  <Link to={`/profile/tracker`} className="link">
+                    <div className="tasks__head__back">
+                      <p>Вернуться на проекты</p>
+                      <img src={arrow} alt="arrow" />
+                    </div>
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <div className="modal-tiket__content ticket">
+              <div className="content ticket-whith">
+                <div className="content__task">
+                  <span>Задача</span>
+                  {editOpen ? (
+                    <input
+                      value={inputsValue.title}
+                      onChange={(e) => {
+                        setInputsValue((prevValue) => ({
+                          ...prevValue,
+                          title: e.target.value,
+                        }));
+                      }}
+                    />
+                  ) : (
+                    <h5>{inputsValue.title}</h5>
+                  )}
+                  <div className="content__description">
+                    {editOpen ? (
+                      <input
+                        value={inputsValue.description}
+                        onChange={(e) => {
+                          setInputsValue((prevValue) => ({
+                            ...prevValue,
+                            description: e.target.value,
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <p>{inputsValue.description}</p>
+                    )}
+                    {/*<img src={task} className="image-task"></img>*/}
+                  </div>
+                  <div className="content__communication">
+                    <p className="tasks">
+                      <button
+                        onClick={() => {
+                          dispatch(modalToggle("addSubtask"));
+                          setModalAddWorker(true);
+                        }}
+                      >
+                        <img src={plus}></img>
+                        Добавить под задачу
+                      </button>
+                    </p>
+                    <p className="file">
+                      <button>
+                        <img src={file}></img>
+                        Загрузить файл
+                      </button>
+                      <span>{0}</span>
+                      Файлов
+                    </p>
+                  </div>
+                  <div className="content__input">
+                    <input
+                      placeholder="Оставить комментарий"
+                      value={inputsValue.comment}
+                      onChange={(e) => {
+                        setInputsValue((prevValue) => ({
+                          ...prevValue,
+                          comment: e.target.value,
+                        }));
+                      }}
+                    />
+                    <img src={send} onClick={createComment}></img>
+                  </div>
+                  <div className="comments__list">
+                    {comments.map((comment) => {
+                      return (
+                        <TrackerTaskComment
+                          key={comment.id}
+                          taskId={taskInfo.id}
+                          comment={comment}
+                          commentDelete={commentDelete}
+                          addSubComment={addSubComment}
+                          subCommentDelete={subCommentDelete}
+                        />
+                      );
+                    })}
                   </div>
                 </div>
-                }
               </div>
-              <Link to={`/profile/tracker`} className="link">
-                <div className="tasks__head__back">
-                  <p>Вернуться на проекты</p>
-                  <img src={arrow} alt="arrow" />
+              <div className="workers">
+                <div className="workers_box">
+                  <p className="workers__creator">
+                    Создатель : <span>{taskInfo.user?.fio}</span>
+                  </p>
+                  <div>
+                    {Boolean(taskInfo.taskUsers?.length) &&
+                      taskInfo.taskUsers.map((worker, index) => {
+                        return (
+                          <div className="worker" key={index}>
+                            <img src={worker.avatar}></img>
+                            <p>{worker.name}</p>
+                          </div>
+                        );
+                      })}
+                  </div>
+
+                  <div className="add-worker moreItems">
+                    <button
+                      onClick={() => {
+                        dispatch(modalToggle("addWorker"));
+                        setModalAddWorker(true);
+                      }}
+                    >
+                      +
+                    </button>
+                    <span>Добавить исполнителя</span>
+                  </div>
+                  <div className="add-worker moreItems">
+                    <button
+                      onClick={() => {
+                        dispatch(modalToggle("addWorker"));
+                        setModalAddWorker(true);
+                      }}
+                    >
+                      +
+                    </button>
+                    <span>Добавить участников</span>
+                  </div>
                 </div>
-              </Link>
-            </div>
-          </div>
-        </div>
-        <div className="modal-tiket__content ticket">
-          <div className="content ticket-whith">
-            <div className="content__task">
-              <span>Задача</span>
-              {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-              }} /> :<h5>{inputsValue.title}</h5>}
-              <div className="content__description">
-                {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                  setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-                }}/> :<p>{inputsValue.description}</p>}
-                {/*<img src={task} className="image-task"></img>*/}
-              </div>
-              <div className="content__communication">
-                <p className="tasks">
-                  <button
+
+                <div className="workers_box-middle">
+                  <div className="time">
+                    <img src={watch}></img>
+                    <span>Длительность : </span>
+                    <p>{"0:00:00"}</p>
+                  </div>
+
+                  {timerStart ? (
+                    <button className="stop" onClick={() => stopTaskTimer()}>
+                      Остановить
+                    </button>
+                  ) : (
+                    <button
+                      className={
+                        taskInfo.executor_id ===
+                        Number(localStorage.getItem("id"))
+                          ? "start"
+                          : "start disable"
+                      }
+                      onClick={() => startTaskTimer()}
+                    >
+                      Начать делать <img src={arrow2}></img>
+                    </button>
+                  )}
+                </div>
+
+                <div className="workers_box-bottom">
+                  <div
+                    className={editOpen ? "edit" : ""}
                     onClick={() => {
-                      dispatch(modalToggle("addSubtask"));
-                      setModalAddWorker(true);
+                      if (editOpen) {
+                        setEditOpen(!editOpen);
+                        editTask();
+                      } else {
+                        setEditOpen(!editOpen);
+                      }
                     }}
                   >
-                    <img src={plus}></img>
-                    Добавить под задачу
-                  </button>
-                </p>
-                <p className="file">
-                  <button>
-                    <img src={file}></img>
-                    Загрузить файл
-                  </button>
-                  <span>{0}</span>
-                  Файлов
-                </p>
-              </div>
-              <div className="content__input">
-                <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                  setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-                }} />
-                <img src={send} onClick={createComment}></img>
-              </div>
-              <div className='comments__list'>
-                {comments.map((comment) => {
-                  return <TrackerTaskComment
-                      key={comment.id}
-                      taskId={taskInfo.id}
-                      comment={comment}
-                      commentDelete={commentDelete}
-                      addSubComment={addSubComment}
-                      subCommentDelete={subCommentDelete}
-                  />
-                })
-
-                }
+                    <img src={edit}></img>
+                    <p>{editOpen ? "сохранить" : "редактировать"}</p>
+                  </div>
+                  <div>
+                    <img src={link}></img>
+                    <p>ссылка на проект</p>
+                  </div>
+                  <div>
+                    <img src={archive2}></img>
+                    <p>в архив</p>
+                  </div>
+                  <div onClick={deleteTask}>
+                    <img src={del}></img>
+                    <p>удалить</p>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-          <div className="workers">
-            <div className="workers_box">
-              <p className="workers__creator">
-                Создатель : <span>{taskInfo.user?.fio}</span>
-              </p>
-              <div>
-                {Boolean(taskInfo.taskUsers?.length) &&
-                  taskInfo.taskUsers.map((worker, index) => {
-                    return (
-                      <div className="worker" key={index}>
-                        <img src={worker.avatar}></img>
-                        <p>{worker.name}</p>
-                      </div>
-                    );
-                  })}
-              </div>
-
-              <div className="add-worker moreItems">
-                <button
-                    onClick={() => {
-                      dispatch(modalToggle("addWorker"));
-                      setModalAddWorker(true);
-                    }}
-                >
-                  +
-                </button>
-                <span>Добавить исполнителя</span>
-              </div>
-              <div className="add-worker moreItems">
-                <button
-                  onClick={() => {
-                    dispatch(modalToggle("addWorker"));
-                    setModalAddWorker(true);
-                  }}
-                >
-                  +
-                </button>
-                <span>Добавить участников</span>
-              </div>
-            </div>
-
-            <div className="workers_box-middle">
-              <div className="time">
-                <img src={watch}></img>
-                <span>Длительность : </span>
-                <p>{"0:00:00"}</p>
-              </div>
-
-              {timerStart ?
-                  <button className="stop" onClick={() => stopTaskTimer()}>
-                    Остановить
-                  </button>
-                  :
-                  <button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
-                    Начать делать <img src={arrow2}></img>
-                  </button>
-              }
-            </div>
-
-            <div className="workers_box-bottom">
-              <div className={editOpen ? 'edit' : ''} onClick={() => {
-                if(editOpen) {
-                  setEditOpen(!editOpen)
-                  editTask()
-                } else {
-                  setEditOpen(!editOpen)
-                }
-              }}>
-                <img src={edit}></img>
-                <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
-              </div>
-              <div>
-                <img src={link}></img>
-                <p>ссылка на проект</p>
-              </div>
-              <div>
-                <img src={archive2}></img>
-                <p>в архив</p>
-              </div>
-              <div onClick={deleteTask}>
-                <img src={del}></img>
-                <p>удалить</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        </>
-        }
+          </>
+        )}
       </div>
       <Footer />
     </section>
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index 6655b266..a8a8bd36 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -1,44 +1,43 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Link, useParams } from "react-router-dom";
-import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
-import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { Footer } from "@components/Common/Footer/Footer";
-import { Navigation } from "../../components/Navigation/Navigation";
-import { Loader } from "@components/Common/Loader/Loader";
-import { urlForLocal } from '../../utils/helper'
-
 import { useDispatch, useSelector } from "react-redux";
+import { Link, useParams } from "react-router-dom";
+
+import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
+
 import { apiRequest } from "../../api/request";
+import archive from "../../assets/icons/archiveTracker.svg";
+import arrow from "../../assets/icons/arrows/arrowCalendar.png";
+import close from "../../assets/icons/close.png";
+import commentsBoard from "../../assets/icons/commentsBoard.svg";
+import del from "../../assets/icons/delete.svg";
+import edit from "../../assets/icons/edit.svg";
+import filesBoard from "../../assets/icons/filesBoard.svg";
+import project from "../../assets/icons/trackerProject.svg";
+import tasks from "../../assets/icons/trackerTasks.svg";
+import accept from "../../assets/images/accept.png";
+import TrackerModal from "../../components/Modal/TrackerModal/TrackerModal";
+import { Navigation } from "../../components/Navigation/Navigation";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
 import {
-  getProjectBoard,
-  getBoarderLoader,
-  modalToggle,
-  moveProjectTask,
-  setProjectBoardFetch,
-  setToggleTab,
   activeLoader,
-  setColumnName,
-  setColumnId,
-  setColumnPriority,
   deletePersonOnProject,
   filterCreatedByMe,
   filteredParticipateTasks,
-  movePositionProjectTask
+  getBoarderLoader,
+  getProjectBoard,
+  modalToggle,
+  movePositionProjectTask,
+  moveProjectTask,
+  setColumnId,
+  setColumnName,
+  setColumnPriority,
+  setProjectBoardFetch,
+  setToggleTab,
 } from "../../redux/projectsTrackerSlice";
-
-import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
-import TrackerModal from "../../components/Modal/TrackerModal/TrackerModal";
-
-import project from "../../assets/icons/trackerProject.svg";
-import tasks from "../../assets/icons/trackerTasks.svg";
-import archive from "../../assets/icons/archiveTracker.svg";
-import commentsBoard from "../../assets/icons/commentsBoard.svg";
-import filesBoard from "../../assets/icons/filesBoard.svg";
-import arrow from "../../assets/icons/arrows/arrowCalendar.png";
-import del from "../../assets/icons/delete.svg";
-import edit from "../../assets/icons/edit.svg";
-import close from "../../assets/icons/close.png"
-import accept from "../../assets/images/accept.png";
+import { urlForLocal } from "../../utils/helper";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
@@ -48,13 +47,14 @@ export const ProjectTracker = () => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [priorityTask, setPriorityTask] = useState(0);
   const [wrapperHover, setWrapperHover] = useState({});
-  const [taskHover, setTaskHover] = useState({})
+  const [taskHover, setTaskHover] = useState({});
   const [modalAdd, setModalAdd] = useState(false);
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
   const [selectedTicket, setSelectedTicket] = useState({});
-  const [personListOpen, setPersonListOpen] = useState(false)
-  const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] = useState(false)
-  const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false)
+  const [personListOpen, setPersonListOpen] = useState(false);
+  const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
+    useState(false);
+  const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
   const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
   const loader = useSelector(getBoarderLoader);
@@ -65,20 +65,20 @@ export const ProjectTracker = () => {
   }, []);
 
   useEffect(() => {
-    const tasksHover = {}
-    const columnHover = {}
+    const tasksHover = {};
+    const columnHover = {};
     if (Object.keys(projectBoard).length) {
       projectBoard.columns.forEach((column) => {
         setOpenColumnSelect((prevState) => ({
           ...prevState,
           [column.id]: false,
         }));
-        columnHover[column.id] = false
-        column.tasks.forEach(task => tasksHover[task.id] = false)
+        columnHover[column.id] = false;
+        column.tasks.forEach((task) => (tasksHover[task.id] = false));
       });
     }
-    setWrapperHover(columnHover)
-    setTaskHover(tasksHover)
+    setWrapperHover(columnHover);
+    setTaskHover(tasksHover);
   }, [projectBoard]);
 
   function dragStartHandler(e, task, columnId) {
@@ -86,35 +86,37 @@ export const ProjectTracker = () => {
   }
 
   function dragOverTaskHandler(e, task) {
-    e.preventDefault()
+    e.preventDefault();
     if (startWrapperIndexTest.current.task.id === task.id) {
-      return
+      return;
     }
-    setTaskHover((prevState) => ({[prevState]: false, [task.id]: true}))
+    setTaskHover((prevState) => ({ [prevState]: false, [task.id]: true }));
   }
 
-  function dragLeaveTaskHandler(e) {
-    setTaskHover((prevState) => ({[prevState]: false}))
+  function dragLeaveTaskHandler() {
+    setTaskHover((prevState) => ({ [prevState]: false }));
   }
 
   function dragEndTaskHandler() {
-    setTaskHover((prevState) => ({[prevState]: false}))
+    setTaskHover((prevState) => ({ [prevState]: false }));
     setWrapperHover((prevState) => ({
       [prevState]: false,
     }));
   }
 
   function dragDropTaskHandler(e, task, column) {
-    e.preventDefault()
+    e.preventDefault();
     if (task.id === startWrapperIndexTest.current.task.id) {
-      return
+      return;
     }
-    const finishTask = column.tasks.indexOf(task)
-    dispatch(movePositionProjectTask({
-      startTask: startWrapperIndexTest.current.task,
-      finishTask: task,
-      finishIndex: finishTask
-    }))
+    const finishTask = column.tasks.indexOf(task);
+    dispatch(
+      movePositionProjectTask({
+        startTask: startWrapperIndexTest.current.task,
+        finishTask: task,
+        finishIndex: finishTask,
+      })
+    );
   }
 
   function dragOverHandler(e) {
@@ -139,9 +141,10 @@ export const ProjectTracker = () => {
       [prevState]: false,
     }));
 
-    if (startWrapperIndexTest.current.index === columnId
-        ||
-        e.target.className.includes('__item')) {
+    if (
+      startWrapperIndexTest.current.index === columnId ||
+      e.target.className.includes("__item")
+    ) {
       return;
     }
 
@@ -159,7 +162,7 @@ export const ProjectTracker = () => {
     setSelectedTab(columnId);
     dispatch(modalToggle("createTiketProject"));
     setModalAdd(true);
-    setPriorityTask(length)
+    setPriorityTask(length);
   }
 
   function openTicket(e, task) {
@@ -168,7 +171,7 @@ export const ProjectTracker = () => {
   }
 
   function deleteColumn(column) {
-    const priorityColumns = []
+    const priorityColumns = [];
     apiRequest("/project-column/update-column", {
       method: "PUT",
       data: {
@@ -181,19 +184,19 @@ export const ProjectTracker = () => {
         for (let i = column.priority; i < projectBoard.columns.length; i++) {
           const currentColumn = {
             column_id: projectBoard.columns[i].id,
-            priority: i
-          }
-          priorityColumns.push(currentColumn)
+            priority: i,
+          };
+          priorityColumns.push(currentColumn);
         }
         apiRequest("/project-column/set-priority", {
           method: "POST",
           data: {
             project_id: projectBoard.id,
-            data: JSON.stringify(priorityColumns)
-          }
+            data: JSON.stringify(priorityColumns),
+          },
         }).then(() => {
           dispatch(setProjectBoardFetch(projectBoard.id));
-        })
+        });
       } else {
         dispatch(setProjectBoardFetch(projectBoard.id));
       }
@@ -205,33 +208,33 @@ export const ProjectTracker = () => {
       method: "DELETE",
       data: {
         project_id: projectBoard.id,
-        user_id: userId
+        user_id: userId,
       },
     }).then(() => {
-      dispatch(deletePersonOnProject(userId))
+      dispatch(deletePersonOnProject(userId));
     });
   }
 
   function filterParticipateTasks() {
     if (!checkBoxParticipateTasks) {
-      dispatch(filteredParticipateTasks(Number(localStorage.getItem('id'))))
+      dispatch(filteredParticipateTasks(Number(localStorage.getItem("id"))));
     } else {
-      dispatch(setProjectBoardFetch(projectId.id))
-      setCheckBoxParticipateTasks(false)
-      setCheckBoxMyTasks(false)
+      dispatch(setProjectBoardFetch(projectId.id));
+      setCheckBoxParticipateTasks(false);
+      setCheckBoxMyTasks(false);
     }
-    setCheckBoxParticipateTasks(!checkBoxParticipateTasks)
+    setCheckBoxParticipateTasks(!checkBoxParticipateTasks);
   }
 
   function filterMyTask() {
     if (!checkBoxMyTasks) {
-      dispatch(filterCreatedByMe(Number(localStorage.getItem('id'))))
+      dispatch(filterCreatedByMe(Number(localStorage.getItem("id"))));
     } else {
-      dispatch(setProjectBoardFetch(projectId.id))
-      setCheckBoxParticipateTasks(false)
-      setCheckBoxMyTasks(false)
+      dispatch(setProjectBoardFetch(projectId.id));
+      setCheckBoxParticipateTasks(false);
+      setCheckBoxMyTasks(false);
     }
-    setCheckBoxMyTasks(!checkBoxMyTasks)
+    setCheckBoxMyTasks(!checkBoxMyTasks);
   }
 
   return (
@@ -303,58 +306,85 @@ export const ProjectTracker = () => {
                     <p>добавить колонку</p>
                   </div>
                   <div className="tasks__head__persons">
-                    <span className="countPersons">{projectBoard.projectUsers?.length}</span>
+                    <span className="countPersons">
+                      {projectBoard.projectUsers?.length}
+                    </span>
                     <span
                       className="addPerson"
                       onClick={() => {
-                        setPersonListOpen(true)
+                        setPersonListOpen(true);
                       }}
                     >
                       +
                     </span>
                     <p>добавить участника</p>
-                    {personListOpen &&
-                    <div className='persons__list'>
-                      <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                      <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                      <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                      <div className='persons__list__items'>
-                        {projectBoard.projectUsers?.map((person) => {
-                          return <div className='persons__list__item' key={person.user_id}>
-                                    <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                                    <span>{person.user.fio}</span>
-                                    <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
-                                </div>
-                        })
-                        }
+                    {personListOpen && (
+                      <div className="persons__list">
+                        <img
+                          className="persons__list__close"
+                          src={close}
+                          alt="close"
+                          onClick={() => setPersonListOpen(false)}
+                        />
+                        <div className="persons__list__count">
+                          <span>{projectBoard.projectUsers?.length}</span>
+                          участник
+                        </div>
+                        <div className="persons__list__info">
+                          В проекте - <span>“{projectBoard.name}”</span>
+                        </div>
+                        <div className="persons__list__items">
+                          {projectBoard.projectUsers?.map((person) => {
+                            return (
+                              <div
+                                className="persons__list__item"
+                                key={person.user_id}
+                              >
+                                <img
+                                  className="avatar"
+                                  src={urlForLocal(person.user.avatar)}
+                                  alt="avatar"
+                                />
+                                <span>{person.user.fio}</span>
+                                <img
+                                  className="delete"
+                                  src={close}
+                                  alt="delete"
+                                  onClick={() => deletePerson(person.user_id)}
+                                />
+                              </div>
+                            );
+                          })}
+                        </div>
+                        <div
+                          className="persons__list__add"
+                          onClick={() => {
+                            dispatch(modalToggle("addWorker"));
+                            setModalAdd(true);
+                            setPersonListOpen(false);
+                          }}
+                        >
+                          <span className="addPerson">+</span>
+                          <p>Добавить участников</p>
+                        </div>
                       </div>
-                      <div className='persons__list__add'
-                           onClick={() => {
-                             dispatch(modalToggle("addWorker"));
-                             setModalAdd(true);
-                             setPersonListOpen(false)
-                           }}
-                      >
-                        <span className='addPerson'>+</span>
-                        <p>Добавить участников</p>
-                      </div>
-                    </div>
-                    }
+                    )}
                   </div>
-                  <div className="tasks__head__checkBox" onClick={filterParticipateTasks}>
+                  <div
+                    className="tasks__head__checkBox"
+                    onClick={filterParticipateTasks}
+                  >
                     <span>Участвую</span>
                     <div className="tasks__head__checkBox__box">
-                      {checkBoxParticipateTasks &&
-                        <img src={accept} alt='accept' />
-                      }
+                      {checkBoxParticipateTasks && (
+                        <img src={accept} alt="accept" />
+                      )}
                     </div>
                   </div>
                   <div className="tasks__head__checkBox" onClick={filterMyTask}>
                     <span>Мои</span>
                     <div className="tasks__head__checkBox__box">
-                      {checkBoxMyTasks &&
-                          <img src={accept} alt='accept' />
-                      }
+                      {checkBoxMyTasks && <img src={accept} alt="accept" />}
                     </div>
                   </div>
                   <Link to="/profile/tracker" className="tasks__head__back">
@@ -364,14 +394,16 @@ export const ProjectTracker = () => {
                 </div>
               </div>
 
-              {Boolean(modalActiveTicket) && <ModalTicket
+              {Boolean(modalActiveTicket) && (
+                <ModalTicket
                   active={modalActiveTicket}
                   setActive={setModalActiveTicket}
                   task={selectedTicket}
                   projectId={projectBoard.id}
                   projectName={projectBoard.name}
                   projectUsers={projectBoard.projectUsers}
-              />}
+                />
+              )}
 
               <div className="tasks__container">
                 {Boolean(projectBoard?.columns) &&
@@ -381,7 +413,7 @@ export const ProjectTracker = () => {
                       <div
                         key={column.id}
                         onDragOver={(e) => dragOverHandler(e)}
-                        onDragEnter={(e) => dragEnterHandler(column.id)}
+                        onDragEnter={() => dragEnterHandler(column.id)}
                         onDrop={(e) => dragDropHandler(e, column.id)}
                         className={`tasks__board ${
                           wrapperHover[column.id] ? "tasks__board__hover" : ""
@@ -392,7 +424,9 @@ export const ProjectTracker = () => {
                           <div>
                             <span
                               className="add"
-                              onClick={() => selectedTabTask(column.id, column.tasks.length)}
+                              onClick={() =>
+                                selectedTabTask(column.id, column.tasks.length)
+                              }
                             >
                               +
                             </span>
@@ -419,9 +453,9 @@ export const ProjectTracker = () => {
                                   [column.id]: false,
                                 }));
                                 dispatch(modalToggle("editColumn"));
-                                dispatch(setColumnName(column.title))
-                                dispatch(setColumnId(column.id))
-                                dispatch(setColumnPriority(column.priority))
+                                dispatch(setColumnName(column.title));
+                                dispatch(setColumnId(column.id));
+                                dispatch(setColumnPriority(column.priority));
                                 setModalAdd(true);
                               }}
                             >
@@ -442,18 +476,24 @@ export const ProjectTracker = () => {
                             <div
                               key={task.id}
                               className={`tasks__board__item ${
-                                  taskHover[task.id] ? "task__hover" : ""
+                                taskHover[task.id] ? "task__hover" : ""
                               }`}
                               draggable={true}
-                              onDragStart={(e) => dragStartHandler(e, task, column.id)}
+                              onDragStart={(e) =>
+                                dragStartHandler(e, task, column.id)
+                              }
                               onDragOver={(e) => dragOverTaskHandler(e, task)}
                               onDragLeave={(e) => dragLeaveTaskHandler(e)}
-                              onDragEnd={(e) => dragEndTaskHandler()}
-                              onDrop={(e) => dragDropTaskHandler(e, task, column)}
+                              onDragEnd={() => dragEndTaskHandler()}
+                              onDrop={(e) =>
+                                dragDropTaskHandler(e, task, column)
+                              }
                               onClick={(e) => openTicket(e, task)}
                             >
                               <div className="tasks__board__item__title">
-                                <p className='task__board__item__title'>{task.title}</p>
+                                <p className="task__board__item__title">
+                                  {task.title}
+                                </p>
                               </div>
                               <p className="tasks__board__item__description">
                                 {task.description}
diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js
index 51a33625..d8a10860 100644
--- a/src/redux/projectsTrackerSlice.js
+++ b/src/redux/projectsTrackerSlice.js
@@ -10,7 +10,7 @@ const initialState = {
   boardLoader: false,
   columnName: "",
   columnId: 0,
-  columnPriority: 0
+  columnPriority: 0,
 };
 
 export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@@ -51,13 +51,16 @@ export const projectsTrackerSlice = createSlice({
     moveProjectTask: (state, action) => {
       state.projectBoard.columns.forEach((column, index) => {
         if (column.id === action.payload.columnId) {
-          column.tasks.push({...action.payload.startWrapperIndex.task, column_id: column.id});
+          column.tasks.push({
+            ...action.payload.startWrapperIndex.task,
+            column_id: column.id,
+          });
           apiRequest(`/task/update-task`, {
             method: "PUT",
             data: {
               task_id: action.payload.startWrapperIndex.task.id,
               column_id: column.id,
-              priority: column.tasks.length - 1
+              priority: column.tasks.length - 1,
             },
           }).then(() => {});
         }
@@ -71,10 +74,15 @@ export const projectsTrackerSlice = createSlice({
     movePositionProjectTask: (state, action) => {
       state.projectBoard.columns.forEach((column, index) => {
         if (column.id === action.payload.startTask.column_id) {
-          state.projectBoard.columns[index].tasks = column.tasks.filter((task) => task.id !== action.payload.startTask.id)
+          state.projectBoard.columns[index].tasks = column.tasks.filter(
+            (task) => task.id !== action.payload.startTask.id
+          );
         }
         if (column.id === action.payload.finishTask.column_id) {
-          column.tasks.splice(action.payload.finishIndex, 0, {...action.payload.startTask, column_id: column.id})
+          column.tasks.splice(action.payload.finishIndex, 0, {
+            ...action.payload.startTask,
+            column_id: column.id,
+          });
           apiRequest(`/task/update-task`, {
             method: "PUT",
             data: {
@@ -82,14 +90,14 @@ export const projectsTrackerSlice = createSlice({
               column_id: column.id,
             },
           }).then(() => {});
-          const priorityTasks = []
+          const priorityTasks = [];
           column.tasks.forEach((task, index) => {
             const curTask = {
               task_id: task.id,
-              priority: index
-            }
-            priorityTasks.push(curTask)
-          })
+              priority: index,
+            };
+            priorityTasks.push(curTask);
+          });
           apiRequest(`/task/set-priority`, {
             method: "POST",
             data: {
@@ -98,17 +106,21 @@ export const projectsTrackerSlice = createSlice({
             },
           }).then(() => {});
         }
-      })
+      });
     },
     filterCreatedByMe: (state, action) => {
       state.projectBoard.columns.forEach((column) => {
-        column.tasks = column.tasks.filter((task) => task.user_id === action.payload)
-      })
+        column.tasks = column.tasks.filter(
+          (task) => task.user_id === action.payload
+        );
+      });
     },
     filteredParticipateTasks: (state, action) => {
       state.projectBoard.columns.forEach((column) => {
-        column.tasks = column.tasks.filter((task) => task.taskUsers.some((person) => person.user_id === action.payload))
-      })
+        column.tasks = column.tasks.filter((task) =>
+          task.taskUsers.some((person) => person.user_id === action.payload)
+        );
+      });
     },
     setColumnName: (state, action) => {
       state.columnName = action.payload;
@@ -117,7 +129,7 @@ export const projectsTrackerSlice = createSlice({
       state.columnId = action.payload;
     },
     setColumnPriority: (state, action) => {
-      state.columnPriority = action.payload
+      state.columnPriority = action.payload;
     },
     editProjectName: (state, action) => {
       state.projects.forEach((project) => {
@@ -162,7 +174,7 @@ export const {
   addPersonToProject,
   filterCreatedByMe,
   filteredParticipateTasks,
-  movePositionProjectTask
+  movePositionProjectTask,
 } = projectsTrackerSlice.actions;
 
 export const getProjects = (state) => state.tracker.projects;
@@ -172,6 +184,6 @@ export const getValueModalType = (state) => state.tracker.modalType;
 export const getBoarderLoader = (state) => state.tracker.boardLoader;
 export const getColumnName = (state) => state.tracker.columnName;
 export const getColumnId = (state) => state.tracker.columnId;
-export const getColumnPriority = (state) => state.tracker.columnPriority
+export const getColumnPriority = (state) => state.tracker.columnPriority;
 
 export default projectsTrackerSlice.reducer;
diff --git a/src/utils/helper.js b/src/utils/helper.js
index ae8b66a1..f32e202b 100644
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@@ -53,12 +53,11 @@ export function scrollToForm() {
 }
 
 export function getCorrectRequestDate(date) {
-  const yyyy = String(date.getUTCFullYear())
+  const yyyy = String(date.getUTCFullYear());
   const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
   const dd = String(date.getUTCDate()).padStart(2, "0");
-  const hh = String(date.getUTCHours())
-  const min = String(date.getUTCMinutes())
-  const sec = String(date.getUTCSeconds())
-  return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`
+  const hh = String(date.getUTCHours());
+  const min = String(date.getUTCMinutes());
+  const sec = String(date.getUTCSeconds());
+  return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`;
 }
-

From 256159dd0cca1ab192fc2aa29ebc150e2be4080b Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Mon, 26 Jun 2023 12:10:49 +0300
Subject: [PATCH 8/8] Fixed modals conflict

---
 .../Tracker/ModalTicket/modalTicket.scss      |   2 +-
 .../TicketFullScreen/TicketFullScreen.jsx     |   2 +-
 .../Tracker/TrackerModal/TrackerModal.jsx     | 370 ++++++------
 .../Modal/TrackerModal/TrackerModal.jsx       | 403 ------------
 src/components/UI/ModalTicket/ModalTicket.jsx | 571 ------------------
 .../UI/TicketFullScreen/TicketFullScreen.jsx  | 528 ----------------
 src/pages/ProjectTracker/ProjectTracker.js    |   3 +-
 src/pages/Tracker/tracker.scss                |   9 +-
 8 files changed, 199 insertions(+), 1689 deletions(-)
 delete mode 100644 src/components/Modal/TrackerModal/TrackerModal.jsx
 delete mode 100644 src/components/UI/ModalTicket/ModalTicket.jsx
 delete mode 100644 src/components/UI/TicketFullScreen/TicketFullScreen.jsx

diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
index 60936eeb..5e17b018 100644
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -352,7 +352,7 @@
         outline: none;
         padding-left: 30px;
         font-weight: 400;
-        font-size: 12px;
+        font-size: 14px;
         line-height: 32px;
         border-radius: 44px;
       }
diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index 5338a2f1..3f2fcf59 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -259,7 +259,7 @@ export const TicketFullScreen = () => {
             <div className="tracker__tabs__content content-tabs">
               <div className="tasks__head">
                 <div className="tasks__head__wrapper">
-                  <h4>Проект : {projectBoard.name}</h4>
+                  <h5>Проект : {projectBoard.name}</h5>
 
                   <TrackerModal
                     active={modalAddWorker}
diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
index ed3b0d2b..c77c53fe 100644
--- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
+++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
@@ -21,7 +21,6 @@ import { urlForLocal } from "@utils/helper";
 import { apiRequest } from "@api/request";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
-import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 
@@ -212,197 +211,202 @@ export const TrackerModal = ({
   }, [active]);
 
   return (
-    <ModalLayout
-      active={active}
-      setActive={setActive}
-      // onClick={() => {
-      //   setSelectWorkersOpen(false);
-      // }}
+    <div
+      className={active ? "modal-add active" : "modal-add"}
+      onClick={() => {
+        setActive(false);
+        setSelectWorkersOpen(false);
+      }}
     >
-      {modalType === "addWorker" && (
-        <div>
-          <div className="title-project">
-            <h4>Добавьте участника</h4>
-            {/*<div className="input-container">*/}
-            {/*  <input*/}
-            {/*    className="name-project"*/}
-            {/*    value={emailWorker}*/}
-            {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
-            {/*  />*/}
-            {/*</div>*/}
-            <div
-              className={
-                selectWorkersOpen ? "select__worker open" : "select__worker"
-              }
-              onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
-            >
-              <p>
-                {selectedWorker
-                  ? selectedWorker.employee.fio
-                  : "Выберите пользователя"}
-              </p>
-              <img className="arrow" src={arrowDown} alt="arrow" />
-              {Boolean(selectWorkersOpen) && (
-                <div className="select__worker__dropDown">
-                  {Boolean(workers.length) ? (
-                    workers.map((worker) => {
-                      if (worker === selectedWorker) {
-                        return;
-                      }
-                      return (
-                        <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 className="modal-add__content" onClick={(e) => e.stopPropagation()}>
+        {modalType === "addWorker" && (
+          <div>
+            <div className="title-project">
+              <h4>Добавьте участника</h4>
+              {/*<div className="input-container">*/}
+              {/*  <input*/}
+              {/*    className="name-project"*/}
+              {/*    value={emailWorker}*/}
+              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
+              {/*  />*/}
+              {/*</div>*/}
+              <div
+                className={
+                  selectWorkersOpen ? "select__worker open" : "select__worker"
+                }
+                onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
+              >
+                <p>
+                  {selectedWorker
+                    ? selectedWorker.employee.fio
+                    : "Выберите пользователя"}
+                </p>
+                <img className="arrow" src={arrowDown} alt="arrow" />
+                {Boolean(selectWorkersOpen) && (
+                  <div className="select__worker__dropDown">
+                    {Boolean(workers.length) ? (
+                      workers.map((worker) => {
+                        if (worker === selectedWorker) {
+                          return;
+                        }
+                        return (
+                          <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>
             </div>
+            <BaseButton styles={"button-add"} onClick={addUserToProject}>
+              Добавить
+            </BaseButton>
           </div>
-          <BaseButton styles={"button-add"} onClick={addUserToProject}>
-            Добавить
-          </BaseButton>
-        </div>
-      )}
-      {modalType === "createTiketProject" && (
-        <div>
-          <div className="title-project">
-            <h4>Введите название и описание задачи</h4>
-            <div className="input-container">
-              <input
-                className="name-project"
-                value={valueTiket}
-                onChange={(e) => setValueTiket(e.target.value)}
-                placeholder="Название задачи"
-              />
+        )}
+        {modalType === "createTiketProject" && (
+          <div>
+            <div className="title-project">
+              <h4>Введите название и описание задачи</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={valueTiket}
+                  onChange={(e) => setValueTiket(e.target.value)}
+                  placeholder="Название задачи"
+                />
+              </div>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={descriptionTicket}
+                  onChange={(e) => setDescriptionTicket(e.target.value)}
+                  placeholder="Описание задачи"
+                />
+              </div>
             </div>
-            <div className="input-container">
-              <input
-                className="name-project"
-                value={descriptionTicket}
-                onChange={(e) => setDescriptionTicket(e.target.value)}
-                placeholder="Описание задачи"
-              />
-            </div>
-          </div>
-          <BaseButton styles={"button-add"} onClick={createTiket}>
-            Создать
-          </BaseButton>
-        </div>
-      )}
-      {modalType === "editProject" && (
-        <div>
-          <div className="title-project">
-            <h4>Введите новое название</h4>
-            <div className="input-container">
-              <input
-                className="name-project"
-                value={projectName}
-                onChange={(e) => setProjectName(e.target.value)}
-              />
-            </div>
-          </div>
-
-          <BaseButton styles={"button-add"} onClick={editProject}>
-            Сохранить
-          </BaseButton>
-        </div>
-      )}
-      {modalType === "createProject" && (
-        <div>
-          <div className="title-project">
-            <h4>{titleProject}</h4>
-            <div className="input-container">
-              <input
-                className="name-project"
-                value={nameProject}
-                onChange={(e) => setNameProject(e.target.value)}
-              />
-            </div>
-            <BaseButton styles={"button-add"} onClick={createProject}>
+            <BaseButton styles={"button-add"} onClick={createTiket}>
               Создать
             </BaseButton>
           </div>
-        </div>
-      )}
-      {modalType === "addSubtask" && (
-        <div>
-          <div className="title-project subtask">
-            <h4>
-              Вы добавляете подзадачу{" "}
-              <p>в колонку(id) задачи "{defautlInput}"</p>
-            </h4>
-            <p className="title-project__decs">Введите текст</p>
-            <div>
-              <textarea className="title-project__textarea"></textarea>
+        )}
+        {modalType === "editProject" && (
+          <div>
+            <div className="title-project">
+              <h4>Введите новое название</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={projectName}
+                  onChange={(e) => setProjectName(e.target.value)}
+                />
+              </div>
             </div>
-          </div>
-          <BaseButton styles={"button-add"} onClick={(e) => e.preventDefault()}>
-            Добавить
-          </BaseButton>
-        </div>
-      )}
-      {modalType === "createColumn" && (
-        <div>
-          <div className="title-project">
-            <h4>Введите название колонки</h4>
-            <div className="input-container">
-              <input
-                className="name-project"
-                value={valueColumn}
-                onChange={(e) => setValueColumn(e.target.value)}
-              />
-            </div>
-          </div>
-          <BaseButton styles={"button-add"} onClick={createTab}>
-            Создать
-          </BaseButton>
-        </div>
-      )}
-      {modalType === "editColumn" && (
-        <div>
-          <div className="title-project">
-            <h4>Введите новое название</h4>
-            <div className="input-container">
-              <input
-                className="name-project"
-                value={columnName}
-                onChange={(e) => dispatch(setColumnName(e.target.value))}
-              />
-            </div>
-            <h4>Приоритет колонки</h4>
-            <div className="input-container">
-              <input
-                className="name-project"
-                placeholder="Приоритет колонки"
-                type="number"
-                step="1"
-                value={columnPriority}
-                onChange={(e) => dispatch(setColumnPriority(e.target.value))}
-              />
-            </div>
-          </div>
-          <BaseButton styles={"button-add"} onClick={changeColumnParams}>
-            Сохранить
-          </BaseButton>
-        </div>
-      )}
 
-      <span className="exit" onClick={() => setActive(false)}></span>
-    </ModalLayout>
+            <BaseButton styles={"button-add"} onClick={editProject}>
+              Сохранить
+            </BaseButton>
+          </div>
+        )}
+        {modalType === "createProject" && (
+          <div>
+            <div className="title-project">
+              <h4>{titleProject}</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={nameProject}
+                  onChange={(e) => setNameProject(e.target.value)}
+                />
+              </div>
+              <BaseButton styles={"button-add"} onClick={createProject}>
+                Создать
+              </BaseButton>
+            </div>
+          </div>
+        )}
+        {modalType === "addSubtask" && (
+          <div>
+            <div className="title-project subtask">
+              <h4>
+                Вы добавляете подзадачу{" "}
+                <p>в колонку(id) задачи "{defautlInput}"</p>
+              </h4>
+              <p className="title-project__decs">Введите текст</p>
+              <div>
+                <textarea className="title-project__textarea"></textarea>
+              </div>
+            </div>
+            <BaseButton
+              styles={"button-add"}
+              onClick={(e) => e.preventDefault()}
+            >
+              Добавить
+            </BaseButton>
+          </div>
+        )}
+        {modalType === "createColumn" && (
+          <div>
+            <div className="title-project">
+              <h4>Введите название колонки</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={valueColumn}
+                  onChange={(e) => setValueColumn(e.target.value)}
+                />
+              </div>
+            </div>
+            <BaseButton styles={"button-add"} onClick={createTab}>
+              Создать
+            </BaseButton>
+          </div>
+        )}
+        {modalType === "editColumn" && (
+          <div>
+            <div className="title-project">
+              <h4>Введите новое название</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={columnName}
+                  onChange={(e) => dispatch(setColumnName(e.target.value))}
+                />
+              </div>
+              <h4>Приоритет колонки</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  placeholder="Приоритет колонки"
+                  type="number"
+                  step="1"
+                  value={columnPriority}
+                  onChange={(e) => dispatch(setColumnPriority(e.target.value))}
+                />
+              </div>
+            </div>
+            <BaseButton styles={"button-add"} onClick={changeColumnParams}>
+              Сохранить
+            </BaseButton>
+          </div>
+        )}
+
+        <span className="exit" onClick={() => setActive(false)}></span>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/Modal/TrackerModal/TrackerModal.jsx b/src/components/Modal/TrackerModal/TrackerModal.jsx
deleted file mode 100644
index da44c264..00000000
--- a/src/components/Modal/TrackerModal/TrackerModal.jsx
+++ /dev/null
@@ -1,403 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-
-import { apiRequest } from "../../../api/request";
-import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
-import {
-  addPersonToProject,
-  editColumnName,
-  editProjectName,
-  getColumnId,
-  getColumnName,
-  getColumnPriority,
-  getProjectBoard,
-  getValueModalType,
-  setColumnName,
-  setColumnPriority,
-  setProject,
-  setProjectBoardFetch,
-} from "../../../redux/projectsTrackerSlice";
-import { urlForLocal } from "../../../utils/helper";
-import "./trackerModal.scss";
-
-export const TrackerModal = ({
-  active,
-  setActive,
-  selectedTab,
-  defautlInput,
-  titleProject,
-  projectId,
-  priorityTask,
-}) => {
-  const dispatch = useDispatch();
-  const projectBoard = useSelector(getProjectBoard);
-  const columnName = useSelector(getColumnName);
-  const columnId = useSelector(getColumnId);
-  const columnPriority = useSelector(getColumnPriority);
-
-  const modalType = useSelector(getValueModalType);
-  const [projectName, setProjectName] = useState(defautlInput);
-  const [valueColumn, setValueColumn] = useState("");
-  const [nameProject, setNameProject] = useState("");
-  const [valueTiket, setValueTiket] = useState("");
-  const [descriptionTicket, setDescriptionTicket] = useState("");
-  const [workers, setWorkers] = useState([]);
-  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
-  const [selectedWorker, setSelectedWorker] = useState(null);
-
-  function createTab() {
-    if (!valueColumn) {
-      return;
-    }
-
-    apiRequest("/project-column/create-column", {
-      method: "POST",
-      data: {
-        project_id: projectBoard.id,
-        priority: projectBoard.columns.length
-          ? projectBoard.columns.at(-1).priority + 1
-          : 1,
-        title: valueColumn,
-      },
-    }).then(() => {
-      dispatch(setProjectBoardFetch(projectBoard.id));
-    });
-    setValueColumn("");
-    setActive(false);
-  }
-
-  function createTiket() {
-    if (!valueTiket || !descriptionTicket) {
-      return;
-    }
-
-    apiRequest("/task/create-task", {
-      method: "POST",
-      data: {
-        project_id: projectBoard.id,
-        title: valueTiket,
-        description: descriptionTicket,
-        status: 1,
-        user_id: localStorage.getItem("id"),
-        column_id: selectedTab,
-        priority: priorityTask,
-      },
-    }).then(() => {
-      dispatch(setProjectBoardFetch(projectBoard.id));
-    });
-
-    setActive(false);
-    setValueTiket("");
-    setDescriptionTicket("");
-  }
-
-  function editProject() {
-    apiRequest("/project/update", {
-      method: "PUT",
-      data: {
-        project_id: projectId,
-        name: projectName,
-      },
-    }).then(() => {
-      setActive(false);
-      dispatch(editProjectName({ id: projectId, name: projectName }));
-    });
-  }
-
-  function changeColumnParams() {
-    projectBoard.columns.forEach((column) => {
-      if (column.id === columnId && column.priority !== columnPriority) {
-        const priorityColumns = [
-          {
-            column_id: column.id,
-            priority: Number(columnPriority),
-          },
-        ];
-        for (let i = column.priority; i < columnPriority; i++) {
-          const currentColumn = {
-            column_id: projectBoard.columns[i].id,
-            priority: i,
-          };
-          priorityColumns.push(currentColumn);
-        }
-        for (let i = column.priority; i > columnPriority; i--) {
-          const currentColumn = {
-            column_id: projectBoard.columns[i - 2].id,
-            priority: i,
-          };
-          priorityColumns.push(currentColumn);
-        }
-        apiRequest("/project-column/set-priority", {
-          method: "POST",
-          data: {
-            project_id: projectBoard.id,
-            data: JSON.stringify(priorityColumns),
-          },
-        }).then(() => {
-          dispatch(setProjectBoardFetch(projectBoard.id));
-        });
-      }
-    });
-    changeColumnTitle();
-  }
-
-  function changeColumnTitle() {
-    apiRequest("/project-column/update-column", {
-      method: "PUT",
-      data: {
-        column_id: columnId,
-        title: columnName,
-      },
-    }).then(() => {
-      setActive(false);
-      dispatch(editColumnName({ id: columnId, title: columnName }));
-    });
-  }
-
-  function createProject() {
-    if (nameProject === "") {
-      return;
-    } else {
-      apiRequest("/project/create", {
-        method: "POST",
-        data: {
-          user_id: localStorage.getItem("id"),
-          name: nameProject,
-          status: 19,
-        },
-      }).then((res) => {
-        const result = { ...res, columns: [] };
-        dispatch(setProject(result));
-        setActive(false);
-        setNameProject("");
-      });
-    }
-  }
-
-  function addUserToProject() {
-    apiRequest("/project/add-user", {
-      method: "POST",
-      data: {
-        user_id: selectedWorker.user_id,
-        project_id: projectBoard.id,
-      },
-    }).then((el) => {
-      dispatch(addPersonToProject(el));
-      setActive(false);
-      setSelectedWorker("");
-      setSelectWorkersOpen(false);
-    });
-  }
-
-  useEffect(() => {
-    modalType === "addWorker"
-      ? apiRequest("/project/my-employee").then((el) => {
-          let persons = el.managerEmployees;
-          let ids = projectBoard.projectUsers.map((user) => user.user_id);
-          setWorkers(
-            persons.reduce((acc, cur) => {
-              if (!ids.includes(cur.user_id)) acc.push(cur);
-              return acc;
-            }, [])
-          );
-        })
-      : "";
-  }, [active]);
-
-  return (
-    <div
-      className={active ? "modal-add active" : "modal-add"}
-      onClick={() => {
-        setActive(false);
-        setSelectWorkersOpen(false);
-      }}
-    >
-      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
-        {modalType === "addWorker" && (
-          <div>
-            <div className="title-project">
-              <h4>Добавьте участника</h4>
-              {/*<div className="input-container">*/}
-              {/*  <input*/}
-              {/*    className="name-project"*/}
-              {/*    value={emailWorker}*/}
-              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
-              {/*  />*/}
-              {/*</div>*/}
-              <div
-                className={
-                  selectWorkersOpen ? "select__worker open" : "select__worker"
-                }
-                onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
-              >
-                <p>
-                  {selectedWorker
-                    ? selectedWorker.employee.fio
-                    : "Выберите пользователя"}
-                </p>
-                <img className="arrow" src={arrowDown} alt="arrow" />
-                {Boolean(selectWorkersOpen) && (
-                  <div className="select__worker__dropDown">
-                    {Boolean(workers.length) ? (
-                      workers.map((worker) => {
-                        if (worker === selectedWorker) {
-                          return;
-                        }
-                        return (
-                          <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>
-            </div>
-            <button className="button-add" onClick={addUserToProject}>
-              Добавить
-            </button>
-          </div>
-        )}
-        {modalType === "createTiketProject" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите название и описание задачи</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={valueTiket}
-                  onChange={(e) => setValueTiket(e.target.value)}
-                  placeholder="Название задачи"
-                />
-              </div>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={descriptionTicket}
-                  onChange={(e) => setDescriptionTicket(e.target.value)}
-                  placeholder="Описание задачи"
-                />
-              </div>
-            </div>
-            <button className="button-add" onClick={createTiket}>
-              Создать
-            </button>
-          </div>
-        )}
-        {modalType === "editProject" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите новое название</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={projectName}
-                  onChange={(e) => setProjectName(e.target.value)}
-                />
-              </div>
-            </div>
-            <button className="button-add" onClick={editProject}>
-              Сохранить
-            </button>
-          </div>
-        )}
-        {modalType === "createProject" && (
-          <div>
-            <div className="title-project">
-              <h4>{titleProject}</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={nameProject}
-                  onChange={(e) => setNameProject(e.target.value)}
-                />
-              </div>
-              <button className="button-add" onClick={createProject}>
-                Создать
-              </button>
-            </div>
-          </div>
-        )}
-        {modalType === "addSubtask" && (
-          <div>
-            <div className="title-project subtask">
-              <h4>
-                Вы добавляете подзадачу{" "}
-                <p>в колонку(id) задачи "{defautlInput}"</p>
-              </h4>
-              <p className="title-project__decs">Введите текст</p>
-              <div>
-                <textarea className="title-project__textarea"></textarea>
-              </div>
-            </div>
-            <button className="button-add" onClick={(e) => e.preventDefault()}>
-              Добавить
-            </button>
-          </div>
-        )}
-        {modalType === "createColumn" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите название колонки</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={valueColumn}
-                  onChange={(e) => setValueColumn(e.target.value)}
-                />
-              </div>
-            </div>
-            <button className="button-add" onClick={createTab}>
-              Создать
-            </button>
-          </div>
-        )}
-        {modalType === "editColumn" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите новое название</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={columnName}
-                  onChange={(e) => dispatch(setColumnName(e.target.value))}
-                />
-              </div>
-              <h4>Приоритет колонки</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  placeholder="Приоритет колонки"
-                  type="number"
-                  step="1"
-                  value={columnPriority}
-                  onChange={(e) => dispatch(setColumnPriority(e.target.value))}
-                />
-              </div>
-            </div>
-            <button className="button-add" onClick={changeColumnParams}>
-              Сохранить
-            </button>
-          </div>
-        )}
-
-        <span className="exit" onClick={() => setActive(false)}></span>
-      </div>
-    </div>
-  );
-};
-
-export default TrackerModal;
diff --git a/src/components/UI/ModalTicket/ModalTicket.jsx b/src/components/UI/ModalTicket/ModalTicket.jsx
deleted file mode 100644
index 973a46fa..00000000
--- a/src/components/UI/ModalTicket/ModalTicket.jsx
+++ /dev/null
@@ -1,571 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import { Link } from "react-router-dom";
-
-import { apiRequest } from "../../../api/request";
-import archive from "../../../assets/icons/archive.svg";
-import arrow from "../../../assets/icons/arrows/arrowStart.png";
-import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg";
-import category from "../../../assets/icons/category.svg";
-import close from "../../../assets/icons/closeProjectPersons.svg";
-import del from "../../../assets/icons/delete.svg";
-import edit from "../../../assets/icons/edit.svg";
-import file from "../../../assets/icons/fileModal.svg";
-import link from "../../../assets/icons/link.svg";
-import plus from "../../../assets/icons/plus.svg";
-import send from "../../../assets/icons/send.svg";
-import watch from "../../../assets/icons/watch.svg";
-import TrackerModal from "../../../components/Modal/TrackerModal/TrackerModal";
-import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
-import {
-  modalToggle,
-  setProjectBoardFetch,
-} from "../../../redux/projectsTrackerSlice";
-import { getCorrectRequestDate, urlForLocal } from "../../../utils/helper";
-import "./modalTicket.scss";
-
-export const ModalTiсket = ({
-  active,
-  setActive,
-  task,
-  projectId,
-  projectName,
-  projectUsers,
-}) => {
-  const dispatch = useDispatch();
-  const [addSubtask, setAddSubtask] = useState(false);
-  const [editOpen, setEditOpen] = useState(false);
-  const [inputsValue, setInputsValue] = useState({
-    title: task.title,
-    description: task.description,
-    comment: "",
-  });
-  const [comments, setComments] = useState([]);
-  const [dropListOpen, setDropListOpen] = useState(false);
-  const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
-  const [executor, setExecutor] = useState(task.executor);
-  const [members, setMembers] = useState(task.taskUsers);
-  const [users, setUsers] = useState([]);
-  const [timerStart, setTimerStart] = useState(false);
-  const [timerInfo, setTimerInfo] = useState({});
-  const [currentTimerCount, setCurrentTimerCount] = useState({
-    hours: 0,
-    minute: 0,
-    seconds: 0,
-  });
-  const [timerId, setTimerId] = useState(null);
-
-  function deleteTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        status: 0,
-      },
-    }).then(() => {
-      setActive(false);
-      dispatch(setProjectBoardFetch(projectId));
-    });
-  }
-
-  function editTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        title: inputsValue.title,
-        description: inputsValue.description,
-      },
-    }).then(() => {
-      dispatch(setProjectBoardFetch(projectId));
-    });
-  }
-
-  function createComment() {
-    apiRequest("/comment/create", {
-      method: "POST",
-      data: {
-        text: inputsValue.comment,
-        entity_type: 2,
-        entity_id: task.id,
-      },
-    }).then((res) => {
-      let newComment = res;
-      newComment.created_at = new Date();
-      newComment.subComments = [];
-      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
-      setComments((prevValue) => [...prevValue, newComment]);
-    });
-  }
-
-  function commentDelete(comment) {
-    setComments((prevValue) =>
-      prevValue.filter((item) => item.id !== comment.id)
-    );
-    if (comment.subComments.length) {
-      // promiseAll
-      comment.subComments.forEach((subComment) => {
-        apiRequest("/comment/update", {
-          method: "PUT",
-          data: {
-            comment_id: subComment.id,
-            status: 0,
-          },
-        }).then(() => {});
-      });
-    }
-  }
-
-  function addSubComment(commentId, subComment) {
-    const addSubComment = comments;
-    addSubComment.forEach((comment) => {
-      if (comment.id === commentId) {
-        comment.subComments.push(subComment);
-      }
-    });
-    setComments(addSubComment);
-  }
-
-  function subCommentDelete(subComment) {
-    const deleteSubComment = comments;
-    deleteSubComment.forEach((comment, index) => {
-      if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter(
-          (item) => item.id !== subComment.id
-        );
-      }
-    });
-    setComments([...deleteSubComment]);
-  }
-
-  function startTaskTimer() {
-    apiRequest("/timer/create", {
-      method: "POST",
-      data: {
-        entity_type: 2,
-        entity_id: task.id,
-        created_at: getCorrectRequestDate(new Date()),
-      },
-    }).then((res) => {
-      setTimerStart(true);
-      setTimerInfo(res);
-      startTimer();
-    });
-  }
-
-  function stopTaskTimer() {
-    apiRequest("/timer/update", {
-      method: "PUT",
-      data: {
-        timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date()),
-      },
-    }).then(() => {
-      setTimerStart(false);
-      clearInterval(timerId);
-    });
-  }
-
-  function taskExecutor(person) {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        executor_id: person.user_id,
-      },
-    }).then((res) => {
-      setDropListOpen(false);
-      setExecutor(res.executor);
-    });
-  }
-
-  function deleteTaskExecutor() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        executor_id: 0,
-      },
-    }).then(() => {
-      setExecutor(null);
-    });
-  }
-
-  function addMember(person) {
-    apiRequest("/task/add-user-to-task", {
-      method: "POST",
-      data: {
-        task_id: task.id,
-        user_id: person.user_id,
-      },
-    }).then((res) => {
-      setDropListMembersOpen(false);
-      setMembers((prevValue) => [...prevValue, res]);
-    });
-  }
-
-  function deleteMember(person) {
-    apiRequest("/task/del-user", {
-      method: "DELETE",
-      data: {
-        task_id: task.id,
-        user_id: person.user_id,
-      },
-    }).then(() => {
-      setMembers(members.filter((item) => item.user_id !== person.user_id));
-    });
-  }
-
-  useEffect(() => {
-    apiRequest(
-      `/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
-    ).then((res) => {
-      const comments = res.reduce((acc, cur) => {
-        if (!cur.parent_id) {
-          acc.push({ ...cur, subComments: [] });
-        } else {
-          acc.forEach((item) => {
-            if (item.id === cur.parent_id) item.subComments.push(cur);
-          });
-        }
-        return acc;
-      }, []);
-      setComments(comments);
-    });
-    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
-      (res) => {
-        let timerSeconds = 0;
-        res.length &&
-          res.forEach((time) => {
-            timerSeconds += time.deltaSeconds;
-            setCurrentTimerCount({
-              hours: Math.floor(timerSeconds / 60 / 60),
-              minute: Math.floor((timerSeconds / 60) % 60),
-              seconds: timerSeconds % 60,
-            });
-            updateTimerHours = Math.floor(timerSeconds / 60 / 60);
-            updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
-            updateTimerSec = timerSeconds % 60;
-            if (!time.stopped_at) {
-              setTimerStart(true);
-              startTimer();
-              setTimerInfo(time);
-            }
-          });
-      }
-    );
-  }, []);
-
-  function startTimer() {
-    setTimerId(
-      setInterval(() => {
-        run();
-      }, 1000)
-    );
-  }
-
-  let updateTimerSec = currentTimerCount.seconds,
-    updateTimerMinute = currentTimerCount.minute,
-    updateTimerHours = currentTimerCount.hours;
-
-  function run() {
-    updateTimerSec++;
-    if (updateTimerSec > 60) {
-      updateTimerMinute++;
-      updateTimerSec = 0;
-    }
-    if (updateTimerMinute === 60) {
-      updateTimerMinute = 0;
-      updateTimerHours++;
-    }
-
-    return setCurrentTimerCount({
-      hours: updateTimerHours,
-      minute: updateTimerMinute,
-      seconds: updateTimerSec,
-    });
-  }
-
-  function correctTimerTime(time) {
-    if (time < 10) return `0${time}`;
-    if (time > 10) return time;
-  }
-
-  useEffect(() => {
-    let ids = members.map((user) => user.user_id);
-    setUsers(
-      projectUsers.reduce((acc, cur) => {
-        if (!ids.includes(cur.user_id)) acc.push(cur);
-        return acc;
-      }, [])
-    );
-  }, [members]);
-
-  return (
-    <div
-      className={active ? "modal-tiket active" : "modal-tiket"}
-      onClick={() => setActive(false)}
-    >
-      <div
-        className="modal-tiket__content"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="content">
-          <h3 className="title-project">
-            <img src={category} className="title-project__category"></img>
-            Проект: {projectName}
-            <Link
-              to={`/tracker/task/${task.id}`}
-              className="title-project__full"
-            >
-              <img src={fullScreen}></img>
-            </Link>
-          </h3>
-
-          <div className="content__task">
-            <span>Задача</span>
-            {editOpen ? (
-              <input
-                value={inputsValue.title}
-                onChange={(e) => {
-                  setInputsValue((prevValue) => ({
-                    ...prevValue,
-                    title: e.target.value,
-                  }));
-                }}
-              />
-            ) : (
-              <h5>{inputsValue.title}</h5>
-            )}
-            <div className="content__description">
-              {editOpen ? (
-                <input
-                  value={inputsValue.description}
-                  onChange={(e) => {
-                    setInputsValue((prevValue) => ({
-                      ...prevValue,
-                      description: e.target.value,
-                    }));
-                  }}
-                />
-              ) : (
-                <p>{inputsValue.description}</p>
-              )}
-              {/*<img src={taskImg} className="image-task"></img>*/}
-            </div>
-            <div className="content__communication">
-              <p className="tasks">
-                <button
-                  onClick={() => {
-                    dispatch(modalToggle("addSubtask"));
-                    setAddSubtask(true);
-                  }}
-                >
-                  <img src={plus}></img>
-                  Добавить под задачу
-                </button>
-              </p>
-              <p className="file">
-                <button>
-                  <img src={file}></img>
-                  Загрузить файл
-                </button>
-                <span>{0}</span>
-                Файлов
-              </p>
-            </div>
-            <div className="content__input">
-              <input
-                placeholder="Оставить комментарий"
-                value={inputsValue.comment}
-                onChange={(e) => {
-                  setInputsValue((prevValue) => ({
-                    ...prevValue,
-                    comment: e.target.value,
-                  }));
-                }}
-              />
-              <img src={send} onClick={createComment}></img>
-            </div>
-            <div className="comments__list">
-              {comments.map((comment) => {
-                return (
-                  <TrackerTaskComment
-                    key={comment.id}
-                    taskId={task.id}
-                    comment={comment}
-                    commentDelete={commentDelete}
-                    addSubComment={addSubComment}
-                    subCommentDelete={subCommentDelete}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        </div>
-        <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 ? (
-              <div className="executor">
-                <p>Исполнитель: {executor.fio}</p>
-                <img src={urlForLocal(executor.avatar)} alt="avatar" />
-                <img
-                  src={close}
-                  className="delete"
-                  onClick={() => deleteTaskExecutor()}
-                />
-              </div>
-            ) : (
-              <div className="add-worker moreItems ">
-                <button onClick={() => setDropListOpen(true)}>+</button>
-                <span>Добавить исполнителя</span>
-                {dropListOpen && (
-                  <div className="dropdownList">
-                    <img
-                      src={close}
-                      className="dropdownList__close"
-                      onClick={() => setDropListOpen(false)}
-                    />
-                    {projectUsers.map((person) => {
-                      return (
-                        <div
-                          className="dropdownList__person"
-                          key={person.user_id}
-                          onClick={() => taskExecutor(person)}
-                        >
-                          <span>{person.user.fio}</span>
-                          <img src={urlForLocal(person.user.avatar)} />
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {Boolean(members.length) && (
-              <div className="members">
-                <p>Участники:</p>
-                <div className="members__list">
-                  {members.map((member) => {
-                    return (
-                      <div className="worker" key={member.user_id}>
-                        <p>{member.fio}</p>
-                        <img src={urlForLocal(member.avatar)} />
-                        <img
-                          src={close}
-                          className="delete"
-                          onClick={() => deleteMember(member)}
-                        />
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-
-            <div className="add-worker moreItems">
-              <button onClick={() => setDropListMembersOpen(true)}>+</button>
-              <span>Добавить участников</span>
-              {dropListMembersOpen && (
-                <div className="dropdownList">
-                  <img
-                    src={close}
-                    className="dropdownList__close"
-                    onClick={() => setDropListMembersOpen(false)}
-                  />
-                  {users.length ? (
-                    users.map((person) => {
-                      return (
-                        <div
-                          className="dropdownList__person"
-                          key={person.user_id}
-                          onClick={() => addMember(person)}
-                        >
-                          <span>{person.user.fio}</span>
-                          <img src={urlForLocal(person.user.avatar)} />
-                        </div>
-                      );
-                    })
-                  ) : (
-                    <p className="noUsers">Нет пользователей</p>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className="workers_box-middle">
-            <div className="time">
-              <img src={watch}></img>
-              <span>Длительность : </span>
-              <p>
-                {correctTimerTime(currentTimerCount.hours)}:
-                {correctTimerTime(currentTimerCount.minute)}:
-                {correctTimerTime(currentTimerCount.seconds)}
-              </p>
-            </div>
-
-            {timerStart ? (
-              <button className="stop" onClick={() => stopTaskTimer()}>
-                Остановить
-              </button>
-            ) : (
-              <button
-                className={
-                  task.executor_id === Number(localStorage.getItem("id"))
-                    ? "start"
-                    : "start disable"
-                }
-                onClick={() => startTaskTimer()}
-              >
-                Начать делать <img src={arrow}></img>
-              </button>
-            )}
-          </div>
-
-          <div className="workers_box-bottom">
-            <div
-              className={editOpen ? "edit" : ""}
-              onClick={() => {
-                if (editOpen) {
-                  setEditOpen(!editOpen);
-                  editTask();
-                } else {
-                  setEditOpen(!editOpen);
-                }
-              }}
-            >
-              <img src={edit}></img>
-              <p>{editOpen ? "сохранить" : "редактировать"}</p>
-            </div>
-            <div>
-              <img src={link}></img>
-              <p>ссылка на проект</p>
-            </div>
-            <div onClick={deleteTask}>
-              <img src={archive}></img>
-              <p>в архив</p>
-            </div>
-            <div onClick={deleteTask}>
-              <img src={del}></img>
-              <p>удалить</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <TrackerModal
-        active={addSubtask}
-        setActive={setAddSubtask}
-        defautlInput={task.column_id}
-      ></TrackerModal>
-    </div>
-  );
-};
-
-export default ModalTiсket;
diff --git a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
deleted file mode 100644
index 6e5f2c59..00000000
--- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
+++ /dev/null
@@ -1,528 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { Link, useNavigate, useParams } from "react-router-dom";
-
-import { Footer } from "@components/Common/Footer/Footer";
-import { Loader } from "@components/Common/Loader/Loader";
-
-import { apiRequest } from "../../../api/request";
-import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
-import { getCorrectRequestDate, urlForLocal } from "../../../helper";
-import archive2 from "../../../images/archive.svg";
-import archive from "../../../images/archiveTracker.svg";
-import arrow from "../../../images/arrowCalendar.png";
-import arrow2 from "../../../images/arrowStart.png";
-import close from "../../../images/closeProjectPersons.svg";
-import del from "../../../images/delete.svg";
-import edit from "../../../images/edit.svg";
-import file from "../../../images/fileModal.svg";
-import link from "../../../images/link.svg";
-import plus from "../../../images/plus.svg";
-import send from "../../../images/send.svg";
-import project from "../../../images/trackerProject.svg";
-import tasks from "../../../images/trackerTasks.svg";
-import watch from "../../../images/watch.png";
-import {
-  deletePersonOnProject,
-  getBoarderLoader,
-  getProjectBoard,
-  modalToggle,
-  setProjectBoardFetch,
-  setToggleTab,
-} from "../../../redux/projectsTrackerSlice";
-import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
-import { Navigation } from "../../Navigation/Navigation";
-import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
-import "./ticketFullScreen.scss";
-
-export const TicketFullScreen = () => {
-  const [modalAddWorker, setModalAddWorker] = useState(false);
-  const ticketId = useParams();
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const projectBoard = useSelector(getProjectBoard);
-  const boardLoader = useSelector(getBoarderLoader);
-  const [taskInfo, setTaskInfo] = useState({});
-  const [editOpen, setEditOpen] = useState(false);
-  const [inputsValue, setInputsValue] = useState({});
-  const [loader, setLoader] = useState(true);
-  const [comments, setComments] = useState([]);
-  const [personListOpen, setPersonListOpen] = useState(false);
-  const [timerStart, setTimerStart] = useState(false);
-  const [timerInfo, setTimerInfo] = useState({});
-
-  useEffect(() => {
-    apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
-      setTaskInfo(taskInfo);
-      setInputsValue({
-        title: taskInfo.title,
-        description: taskInfo.description,
-        comment: "",
-      });
-      apiRequest(
-        `/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
-      ).then((res) => {
-        const comments = res.reduce((acc, cur) => {
-          if (!cur.parent_id) {
-            acc.push({ ...cur, subComments: [] });
-          } else {
-            acc.forEach((item) => {
-              if (item.id === cur.parent_id) item.subComments.push(cur);
-            });
-          }
-          return acc;
-        }, []);
-        setComments(comments);
-      });
-      taskInfo.timers.forEach((time) => {
-        if (!time.stopped_at) {
-          setTimerStart(true);
-          setTimerInfo(time);
-        }
-      });
-      dispatch(setProjectBoardFetch(taskInfo.project_id));
-      setLoader(boardLoader);
-    });
-  }, []);
-
-  function deleteTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: ticketId.id,
-        status: 0,
-      },
-    }).then(() => {
-      navigate(`/tracker/project/${taskInfo.project_id}`);
-    });
-  }
-
-  function editTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: taskInfo.id,
-        title: inputsValue.title,
-        description: inputsValue.description,
-      },
-    }).then(() => {});
-  }
-
-  function createComment() {
-    apiRequest("/comment/create", {
-      method: "POST",
-      data: {
-        text: inputsValue.comment,
-        entity_type: 2,
-        entity_id: taskInfo.id,
-      },
-    }).then((res) => {
-      let newComment = res;
-      newComment.created_at = new Date();
-      newComment.subComments = [];
-      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
-      setComments((prevValue) => [...prevValue, newComment]);
-    });
-  }
-
-  function startTaskTimer() {
-    apiRequest("/timer/create", {
-      method: "POST",
-      data: {
-        entity_type: 2,
-        entity_id: taskInfo.id,
-        created_at: getCorrectRequestDate(new Date()),
-      },
-    }).then((res) => {
-      setTimerStart(true);
-      setTimerInfo(res);
-    });
-  }
-
-  function stopTaskTimer() {
-    apiRequest("/timer/update", {
-      method: "PUT",
-      data: {
-        timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date()),
-      },
-    }).then(() => setTimerStart(false));
-  }
-
-  function deletePerson(userId) {
-    apiRequest("/project/del-user", {
-      method: "DELETE",
-      data: {
-        project_id: projectBoard.id,
-        user_id: userId,
-      },
-    }).then(() => {
-      dispatch(deletePersonOnProject(userId));
-    });
-  }
-
-  function commentDelete(comment) {
-    setComments((prevValue) =>
-      prevValue.filter((item) => item.id !== comment.id)
-    );
-    if (comment.subComments.length) {
-      comment.subComments.forEach((subComment) => {
-        apiRequest("/comment/update", {
-          method: "PUT",
-          data: {
-            comment_id: subComment.id,
-            status: 0,
-          },
-        }).then(() => {});
-      });
-    }
-  }
-
-  function addSubComment(commentId, subComment) {
-    const addSubComment = comments;
-    addSubComment.forEach((comment) => {
-      if (comment.id === commentId) {
-        comment.subComments.push(subComment);
-      }
-    });
-    setComments(addSubComment);
-  }
-
-  function subCommentDelete(subComment) {
-    const deleteSubComment = comments;
-    deleteSubComment.forEach((comment, index) => {
-      if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter(
-          (item) => item.id !== subComment.id
-        );
-      }
-    });
-    setComments([...deleteSubComment]);
-  }
-
-  const toggleTabs = (index) => {
-    dispatch(setToggleTab(index));
-  };
-
-  return (
-    <section className="ticket-full-screen">
-      <ProfileHeader />
-      <Navigation />
-      <div className="container">
-        <div className="tracker__content">
-          <ProfileBreadcrumbs
-            links={[
-              { name: "Главная", link: "/profile" },
-              { name: "Трекер", link: "/profile/tracker" },
-            ]}
-          />
-          <h2 className="tracker__title">Управление проектами с трекером</h2>
-        </div>
-      </div>
-      <div className="tracker__tabs">
-        <div className="tracker__tabs__head">
-          <Link
-            to="/profile/tracker"
-            className="tab active-tab"
-            onClick={() => toggleTabs(1)}
-          >
-            <img src={project} alt="img" />
-            <p>Проекты </p>
-          </Link>
-          <Link
-            to="/profile/tracker"
-            className="tab"
-            onClick={() => toggleTabs(2)}
-          >
-            <img src={tasks} alt="img" />
-            <p>Все мои задачи</p>
-          </Link>
-          <Link
-            to="/profile/tracker"
-            className="tab"
-            onClick={() => toggleTabs(3)}
-          >
-            <img src={archive} alt="img" />
-            <p>Архив</p>
-          </Link>
-        </div>
-        {loader ? (
-          <Loader />
-        ) : (
-          <>
-            <div className="tracker__tabs__content content-tabs">
-              <div className="tasks__head">
-                <div className="tasks__head__wrapper">
-                  <h4>Проект : {projectBoard.name}</h4>
-
-                  <TrackerModal
-                    active={modalAddWorker}
-                    setActive={setModalAddWorker}
-                  ></TrackerModal>
-
-                  <div className="tasks__head__persons">
-                    {/*<img src={avatarTest} alt="avatar" />*/}
-                    {/*<img src={avatarTest} alt="avatar" />*/}
-                    <span className="countPersons">
-                      {projectBoard.projectUsers?.length}
-                    </span>
-                    <span
-                      className="addPerson"
-                      onClick={() => {
-                        setPersonListOpen(true);
-                      }}
-                    >
-                      +
-                    </span>
-                    <p>добавить участника</p>
-                    {personListOpen && (
-                      <div className="persons__list">
-                        <img
-                          className="persons__list__close"
-                          src={close}
-                          alt="close"
-                          onClick={() => setPersonListOpen(false)}
-                        />
-                        <div className="persons__list__count">
-                          <span>{projectBoard.projectUsers?.length}</span>
-                          участник
-                        </div>
-                        <div className="persons__list__info">
-                          В проекте - <span>“{projectBoard.name}”</span>
-                        </div>
-                        <div className="persons__list__items">
-                          {projectBoard.projectUsers?.map((person) => {
-                            return (
-                              <div
-                                className="persons__list__item"
-                                key={person.user_id}
-                              >
-                                <img
-                                  className="avatar"
-                                  src={urlForLocal(person.user.avatar)}
-                                  alt="avatar"
-                                />
-                                <span>{person.user.fio}</span>
-                                <img
-                                  className="delete"
-                                  src={close}
-                                  alt="delete"
-                                  onClick={() => deletePerson(person.user_id)}
-                                />
-                              </div>
-                            );
-                          })}
-                        </div>
-                        <div
-                          className="persons__list__add"
-                          onClick={() => {
-                            dispatch(modalToggle("addWorker"));
-                            setModalAddWorker(true);
-                            setPersonListOpen(false);
-                          }}
-                        >
-                          <span className="addPerson">+</span>
-                          <p>Добавить участников</p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                  <Link to={`/profile/tracker`} className="link">
-                    <div className="tasks__head__back">
-                      <p>Вернуться на проекты</p>
-                      <img src={arrow} alt="arrow" />
-                    </div>
-                  </Link>
-                </div>
-              </div>
-            </div>
-            <div className="modal-tiket__content ticket">
-              <div className="content ticket-whith">
-                <div className="content__task">
-                  <span>Задача</span>
-                  {editOpen ? (
-                    <input
-                      value={inputsValue.title}
-                      onChange={(e) => {
-                        setInputsValue((prevValue) => ({
-                          ...prevValue,
-                          title: e.target.value,
-                        }));
-                      }}
-                    />
-                  ) : (
-                    <h5>{inputsValue.title}</h5>
-                  )}
-                  <div className="content__description">
-                    {editOpen ? (
-                      <input
-                        value={inputsValue.description}
-                        onChange={(e) => {
-                          setInputsValue((prevValue) => ({
-                            ...prevValue,
-                            description: e.target.value,
-                          }));
-                        }}
-                      />
-                    ) : (
-                      <p>{inputsValue.description}</p>
-                    )}
-                    {/*<img src={task} className="image-task"></img>*/}
-                  </div>
-                  <div className="content__communication">
-                    <p className="tasks">
-                      <button
-                        onClick={() => {
-                          dispatch(modalToggle("addSubtask"));
-                          setModalAddWorker(true);
-                        }}
-                      >
-                        <img src={plus}></img>
-                        Добавить под задачу
-                      </button>
-                    </p>
-                    <p className="file">
-                      <button>
-                        <img src={file}></img>
-                        Загрузить файл
-                      </button>
-                      <span>{0}</span>
-                      Файлов
-                    </p>
-                  </div>
-                  <div className="content__input">
-                    <input
-                      placeholder="Оставить комментарий"
-                      value={inputsValue.comment}
-                      onChange={(e) => {
-                        setInputsValue((prevValue) => ({
-                          ...prevValue,
-                          comment: e.target.value,
-                        }));
-                      }}
-                    />
-                    <img src={send} onClick={createComment}></img>
-                  </div>
-                  <div className="comments__list">
-                    {comments.map((comment) => {
-                      return (
-                        <TrackerTaskComment
-                          key={comment.id}
-                          taskId={taskInfo.id}
-                          comment={comment}
-                          commentDelete={commentDelete}
-                          addSubComment={addSubComment}
-                          subCommentDelete={subCommentDelete}
-                        />
-                      );
-                    })}
-                  </div>
-                </div>
-              </div>
-              <div className="workers">
-                <div className="workers_box">
-                  <p className="workers__creator">
-                    Создатель : <span>{taskInfo.user?.fio}</span>
-                  </p>
-                  <div>
-                    {Boolean(taskInfo.taskUsers?.length) &&
-                      taskInfo.taskUsers.map((worker, index) => {
-                        return (
-                          <div className="worker" key={index}>
-                            <img src={worker.avatar}></img>
-                            <p>{worker.name}</p>
-                          </div>
-                        );
-                      })}
-                  </div>
-
-                  <div className="add-worker moreItems">
-                    <button
-                      onClick={() => {
-                        dispatch(modalToggle("addWorker"));
-                        setModalAddWorker(true);
-                      }}
-                    >
-                      +
-                    </button>
-                    <span>Добавить исполнителя</span>
-                  </div>
-                  <div className="add-worker moreItems">
-                    <button
-                      onClick={() => {
-                        dispatch(modalToggle("addWorker"));
-                        setModalAddWorker(true);
-                      }}
-                    >
-                      +
-                    </button>
-                    <span>Добавить участников</span>
-                  </div>
-                </div>
-
-                <div className="workers_box-middle">
-                  <div className="time">
-                    <img src={watch}></img>
-                    <span>Длительность : </span>
-                    <p>{"0:00:00"}</p>
-                  </div>
-
-                  {timerStart ? (
-                    <button className="stop" onClick={() => stopTaskTimer()}>
-                      Остановить
-                    </button>
-                  ) : (
-                    <button
-                      className={
-                        taskInfo.executor_id ===
-                        Number(localStorage.getItem("id"))
-                          ? "start"
-                          : "start disable"
-                      }
-                      onClick={() => startTaskTimer()}
-                    >
-                      Начать делать <img src={arrow2}></img>
-                    </button>
-                  )}
-                </div>
-
-                <div className="workers_box-bottom">
-                  <div
-                    className={editOpen ? "edit" : ""}
-                    onClick={() => {
-                      if (editOpen) {
-                        setEditOpen(!editOpen);
-                        editTask();
-                      } else {
-                        setEditOpen(!editOpen);
-                      }
-                    }}
-                  >
-                    <img src={edit}></img>
-                    <p>{editOpen ? "сохранить" : "редактировать"}</p>
-                  </div>
-                  <div>
-                    <img src={link}></img>
-                    <p>ссылка на проект</p>
-                  </div>
-                  <div>
-                    <img src={archive2}></img>
-                    <p>в архив</p>
-                  </div>
-                  <div onClick={deleteTask}>
-                    <img src={del}></img>
-                    <p>удалить</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-      <Footer />
-    </section>
-  );
-};
-
-export default TicketFullScreen;
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index 3219ed46..8cc6ed4f 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -28,6 +28,7 @@ import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
+// import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -296,7 +297,7 @@ export const ProjectTracker = () => {
             <div className="tracker__tabs__content__tasks tasks active__content">
               <div className="tasks__head">
                 <div className="tasks__head__wrapper">
-                  <h4>Проект : {projectBoard.name}</h4>
+                  <h5>Проект : {projectBoard.name}</h5>
 
                   <div className="tasks__head__add">
                     <BaseButton
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss
index 5cbdc118..9a05e8fe 100644
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -215,7 +215,7 @@
             align-items: center;
           }
 
-          h4 {
+          h5 {
             color: #1458dd;
             font-weight: 700;
             font-size: 22px;
@@ -546,6 +546,13 @@
             display: flex;
             flex-direction: column;
             justify-content: space-between;
+            transition: 0.4s;
+
+            &:hover {
+              transform: scale(0.99);
+              box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+              transition: 0.4s;
+            }
 
             &__hide {
               opacity: 0;