fix

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

@@ -1,48 +1,45 @@
 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,
-} from "@redux/projectsTrackerSlice";
+  getProjectBoard,
+  getBoarderLoader,
+} from "../../../../redux/projectsTrackerSlice";
+import { apiRequest } from "../../../../api/request";
 
-import { urlForLocal } from "@utils/helper";
+import project from "../../../../assets/icons/trackerProject.svg";
-
+import watch from "../../../../assets/icons/watch.svg";
-import { apiRequest } from "@api/request";
+import file from "../../../../assets/icons/fileModal.svg";
-
+import send from "../../../../assets/icons/send.svg";
-import { getCorrectDate } from "@components/Calendar/calendarHelper";
+import arrow2 from "../../../../assets/icons/arrows/arrowStart.png";
-import BaseButton from "@components/Common/BaseButton/BaseButton";
+import plus from "../../../../assets/icons/plus.svg";
-import { Footer } from "@components/Common/Footer/Footer";
+import tasks from "../../../../assets/icons/trackerTasks.svg";
-import { Loader } from "@components/Common/Loader/Loader";
+import archive from "../../../../assets/icons/archive.svg";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import arrow from "../../../../assets/icons/arrows/arrowCalendar.png";
-import { Navigation } from "@components/Navigation/Navigation";
+import link from "../../../../assets/icons/link.svg";
-import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import archive2 from "../../../../assets/icons/archive.svg";
-import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
+import del from "../../../../assets/icons/delete.svg";
-
+import edit from "../../../../assets/icons/edit.svg";
-import archive2 from "assets/icons/archive.svg";
+import close from "../../../../assets/icons/close.png";
-import archive from "assets/icons/archiveTracker.svg";
-import arrow from "assets/icons/arrows/arrowCalendar.png";
-import arrow2 from "assets/icons/arrows/arrowStart.png";
-import selectArrow from "assets/icons/arrows/select.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 project from "assets/icons/trackerProject.svg";
-import tasks from "assets/icons/trackerTasks.svg";
-import watch from "assets/icons/watch.svg";
 
 import "./ticketFullScreen.scss";
 
-export const TicketFullScreen = () => {
+import {getCorrectRequestDate, urlForLocal} from "../../../../utils/helper";
+
+export const TicketFullScreen = ({}) => {
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const ticketId = useParams();
   const dispatch = useDispatch();
@@ -54,35 +51,35 @@ export const TicketFullScreen = () => {
   const [inputsValue, setInputsValue] = useState({});
   const [loader, setLoader] = useState(true);
   const [comments, setComments] = useState([]);
-  const [commentsEditOpen, setCommentsEditOpen] = useState({});
+  const [personListOpen, setPersonListOpen] = useState(false)
-  const [commentsEditText, setCommentsEditText] = useState({});
+  const [timerStart, setTimerStart] = useState(false)
-  const [personListOpen, setPersonListOpen] = useState(false);
+  const [timerInfo, setTimerInfo] = useState({})
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
       setTaskInfo(taskInfo);
-      setInputsValue({
+      setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
-        title: taskInfo.title,
+      apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
-        description: taskInfo.description,
+        const comments = res.reduce((acc, cur) => {
-        comment: "",
+          if (!cur.parent_id) {
-      });
+            acc.push({...cur, subComments: []})
-      apiRequest(
+          } else {
-        `/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
+            acc.forEach((item) => {
-      ).then((res) => {
+              if (item.id === cur.parent_id) item.subComments.push(cur)
-        setComments(res);
+            })
-        res.forEach((item) => {
+          }
-          setCommentsEditOpen((prevValue) => ({
+          return acc
-            ...prevValue,
+        }, [])
-            [item.id]: false,
+        setComments(comments)
-          }));
+      })
-          setCommentsEditText((prevValue) => ({
+      taskInfo.timers.forEach((time) => {
-            ...prevValue,
+        if (!time.stopped_at) {
-            [item.id]: item.text,
+          setTimerStart(true)
-          }));
+          setTimerInfo(time)
-        });
+        }
-      });
+      })
       dispatch(setProjectBoardFetch(taskInfo.project_id));
-      setLoader(boardLoader);
+      setLoader(boardLoader)
     });
   }, []);
 
@@ -104,9 +101,10 @@ export const TicketFullScreen = () => {
       data: {
         task_id: taskInfo.id,
         title: inputsValue.title,
-        description: inputsValue.description,
+        description: inputsValue.description
       },
-    }).then(() => {});
+    }).then(() => {
+    });
   }
 
   function createComment() {
@@ -115,43 +113,39 @@ export const TicketFullScreen = () => {
       data: {
         text: inputsValue.comment,
         entity_type: 2,
-        entity_id: taskInfo.id,
+        entity_id: taskInfo.id
-      },
+      }
     }).then((res) => {
-      let newComment = res;
+      let newComment = res
-      newComment.created_at = new Date();
+      newComment.created_at = new Date()
-      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
+      newComment.subComments = []
-      setComments((prevValue) => [...prevValue, newComment]);
+      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false }));
+      setComments((prevValue) => ([...prevValue, newComment]))
-      setCommentsEditText((prevValue) => ({
+    })
-        ...prevValue,
-        [res.id]: res.text,
-      }));
-    });
   }
 
-  function deleteComment(commentId) {
+  function startTaskTimer() {
-    apiRequest("/comment/update", {
+    apiRequest("/timer/create", {
-      method: "PUT",
+      method: "POST",
       data: {
-        comment_id: commentId,
+        entity_type: 2,
-        status: 0,
+        entity_id: taskInfo.id,
-      },
+        created_at: getCorrectRequestDate(new Date())
-    }).then(() => {
+      }
-      setComments((prevValue) =>
+    }).then((res) => {
-        prevValue.filter((item) => item.id !== commentId)
+      setTimerStart(true)
-      );
+      setTimerInfo(res)
-    });
+    })
   }
 
-  function editComment(commentId) {
+  function stopTaskTimer() {
-    apiRequest("/comment/update", {
+    apiRequest("/timer/update", {
       method: "PUT",
       data: {
-        comment_id: commentId,
+        timer_id: timerInfo.id,
-        text: commentsEditText[commentId],
+        stopped_at: getCorrectRequestDate(new Date())
-      },
+      }
-    }).then(() => {});
+    }).then(() => setTimerStart(false))
   }
 
   function deletePerson(userId) {
@@ -159,13 +153,49 @@ 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))
+    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));
   };
@@ -212,9 +242,7 @@ export const TicketFullScreen = () => {
               <p>Архив</p>
             </Link>
           </div>
-        {loader ? (
+          {loader ? <Loader /> :
-          <Loader />
-        ) : (
               <>
                 <div className="tracker__tabs__content content-tabs">
                   <div className="tasks__head">
@@ -229,77 +257,43 @@ export const TicketFullScreen = () => {
                       <div className="tasks__head__persons">
                         {/*<img src={avatarTest} alt="avatar" />*/}
                         {/*<img src={avatarTest} alt="avatar" />*/}
-                    <span className="countPersons">
+                        <span className="countPersons">{projectBoard.projectUsers?.length}</span>
-                      {projectBoard.projectUsers?.length}
-                    </span>
                         <span
                             className="addPerson"
                             onClick={() => {
-                        setPersonListOpen(true);
+                              setPersonListOpen(true)
                             }}
                         >
                   +
                 </span>
                         <p>добавить участника</p>
-                    {personListOpen && (
+                        {personListOpen &&
-                      <div className="persons__list">
+                            <div className='persons__list'>
-                        <img
+                              <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                          className="persons__list__close"
+                              <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                          src={close}
+                              <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                          alt="close"
+                              <div className='persons__list__items'>
-                          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 (
+                                  return <div className='persons__list__item' key={person.user_id}>
-                              <div
+                                    <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                                className="persons__list__item"
-                                key={person.user_id}
-                              >
-                                <img
-                                  className="avatar"
-                                  src={urlForLocal(person.user.avatar)}
-                                  alt="avatar"
-                                />
                                     <span>{person.user.fio}</span>
-                                <img
+                                    <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
-                                  className="delete"
-                                  src={close}
-                                  alt="delete"
-                                  onClick={() => deletePerson(person.user_id)}
-                                />
                                   </div>
-                            );
+                                })
-                          })}
+                                }
                               </div>
-                        <div
+                              <div className='persons__list__add'
-                          className="persons__list__add"
                                    onClick={() => {
                                      dispatch(modalToggle("addWorker"));
                                      setModalAddWorker(true);
-                            setPersonListOpen(false);
+                                     setPersonListOpen(false)
                                    }}
                               >
-                          <span className="addPerson">+</span>
+                                <span className='addPerson'>+</span>
                                 <p>Добавить участников</p>
                               </div>
                             </div>
-                    )}
+                        }
-                  </div>
-                  <div className="tasks__head__select">
-                    <span>Учавствую</span>
-                    <img src={selectArrow} alt="arrow" />
-                  </div>
-                  <div className="tasks__head__select">
-                    <span>Мои</span>
-                    <img src={selectArrow} alt="arrow" />
                       </div>
                       <Link to={`/profile/tracker`} className="link">
                         <div className="tasks__head__back">
@@ -310,122 +304,59 @@ export const TicketFullScreen = () => {
                     </div>
                   </div>
                 </div>
-            <div className="tracker-ticket ticket">
+                <div className="modal-tiket__content ticket">
                   <div className="content ticket-whith">
                     <div className="content__task">
                       <span>Задача</span>
-                  {editOpen ? (
+                      {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-                    <input
+                        setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-                      value={inputsValue.title}
+                      }} /> :<h5>{inputsValue.title}</h5>}
-                      onChange={(e) => {
-                        setInputsValue((prevValue) => ({
-                          ...prevValue,
-                          title: e.target.value,
-                        }));
-                      }}
-                    />
-                  ) : (
-                    <h5>{inputsValue.title}</h5>
-                  )}
                       <div className="content__description">
-                    {editOpen ? (
+                        {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                      <input
+                          setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-                        value={inputsValue.description}
+                        }}/> :<p>{inputsValue.description}</p>}
-                        onChange={(e) => {
+                        {/*<img src={task} className="image-task"></img>*/}
-                          setInputsValue((prevValue) => ({
-                            ...prevValue,
-                            description: e.target.value,
-                          }));
-                        }}
-                      />
-                    ) : (
-                      <p>{inputsValue.description}</p>
-                    )}
                       </div>
                       <div className="content__communication">
                         <p className="tasks">
-                      <BaseButton
+                          <button
                               onClick={() => {
                                 dispatch(modalToggle("addSubtask"));
-                          setAddSubtask(true);
+                                setModalAddWorker(true);
                               }}
-                        styles={"tasks__button"}
                           >
-                        <img src={plus}></img>
+                            <img src={plus} alt='plus'></img>
                             Добавить под задачу
-                      </BaseButton>
+                          </button>
                         </p>
                         <p className="file">
-                      <BaseButton styles={"file__button"}>
+                          <button>
-                        <img src={file}></img>
+                            <img src={file} alt='file'></img>
                             Загрузить файл
-                      </BaseButton>
+                          </button>
                           <span>{0}</span>
                           Файлов
                         </p>
                       </div>
                       <div className="content__input">
-                    <input
+                        <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                      placeholder="Оставить комментарий"
+                          setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-                      value={inputsValue.comment}
+                        }} />
-                      onChange={(e) => {
+                        <img src={send} onClick={createComment} alt='send'></img>
-                        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 (
+                          return <TrackerTaskComment
-                        <div className="comments__list__item" key={comment.id}>
+                              key={comment.id}
-                          <div className="comments__list__item__info">
+                              taskId={taskInfo.id}
-                            <span>{getCorrectDate(comment.created_at)}</span>
+                              comment={comment}
-                            <div
+                              commentDelete={commentDelete}
-                              className={
+                              addSubComment={addSubComment}
-                                commentsEditOpen[comment.id]
+                              subCommentDelete={subCommentDelete}
-                                  ? "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>
-                      );
-                    })}
                       </div>
                     </div>
                   </div>
@@ -439,7 +370,7 @@ export const TicketFullScreen = () => {
                             taskInfo.taskUsers.map((worker, index) => {
                               return (
                                   <div className="worker" key={index}>
-                            <img src={worker.avatar}></img>
+                                    <img src={worker.avatar} alt='worket'></img>
                                     <p>{worker.name}</p>
                                   </div>
                               );
@@ -472,48 +403,51 @@ export const TicketFullScreen = () => {
 
                     <div className="workers_box-middle">
                       <div className="time">
-                    <img src={watch}></img>
+                        <img src={watch} alt='watch'></img>
                         <span>Длительность : </span>
                         <p>{"0:00:00"}</p>
                       </div>
 
-                  <button className="start">
+                      {timerStart ?
-                    Начать делать <img src={arrow2}></img>
+                          <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>
+                      }
                     </div>
 
                     <div className="workers_box-bottom">
-                  <div
+                      <div className={editOpen ? 'edit' : ''} onClick={() => {
-                    className={editOpen ? "edit" : ""}
-                    onClick={() => {
                         if(editOpen) {
-                        setEditOpen(!editOpen);
+                          setEditOpen(!editOpen)
-                        editTask();
+                          editTask()
                         } else {
-                        setEditOpen(!editOpen);
+                          setEditOpen(!editOpen)
                         }
-                    }}
+                      }}>
-                  >
+                        <img src={edit} alt='edit'></img>
-                    <img src={edit}></img>
+                        <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
-                    <p>{editOpen ? "сохранить" : "редактировать"}</p>
                       </div>
                       <div>
-                    <img src={link}></img>
+                        <img src={link} alt='link'></img>
                         <p>ссылка на проект</p>
                       </div>
                       <div>
-                    <img src={archive2}></img>
+                        <img src={archive2} alt='arch'></img>
                         <p>в архив</p>
                       </div>
                       <div onClick={deleteTask}>
-                    <img src={del}></img>
+                        <img src={del} alt='delete'></img>
                         <p>удалить</p>
                       </div>
                     </div>
                   </div>
                 </div>
               </>
-        )}
+          }
         </div>
         <Footer />
       </section>

src/components/Modal/TrackerModal/TrackerModal.jsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 import { apiRequest } from "../../../api/request";
-import { urlForLocal } from '../../../helper'
+import { urlForLocal } from '../../../utils/helper'
 import {
   setColumnName,
   setColumnPriority,
@@ -17,7 +17,7 @@ import {
   addPersonToProject, getColumnPriority
 } from "../../../redux/projectsTrackerSlice";
 
-import arrowDown from "../../../images/selectArrow.png"
+import arrowDown from "../../../assets/icons/arrows/selectArrow.png"
 
 import "./trackerModal.scss";
 

src/components/TrackerTaskComment/TrackerTaskComment.jsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
 import { apiRequest } from "../../api/request";
-import {urlForLocal} from "../../helper";
+import {urlForLocal} from '../../utils/helper';
 import {getCorrectDate} from "../Calendar/calendarHelper";
-import edit from "../../images/edit.svg";
+import edit from "../../assets/icons/edit.svg";
-import del from "../../images/delete.svg";
+import del from "../../assets/icons/delete.svg";
-import accept from "../../images/accept.png";
+import accept from "../../assets/images/accept.png";
 
 export const TrackerTaskComment = ({
     taskId,

src/components/UI/ModalTicket/ModalTicket.jsx

@@ -1,29 +1,29 @@
 import React, {useEffect, useState} from "react";
 import { Link } from "react-router-dom";
-import TrackerModal from "../TrackerModal/TrackerModal";
+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 "../../../images/category.png";
+import category from "../../../assets/icons/category.svg";
-import watch from "../../../images/watch.png";
+import watch from "../../../assets/icons/watch.svg";
-import file from "../../../images/fileModal.svg";
+import file from "../../../assets/icons/fileModal.svg";
-import arrow from "../../../images/arrowStart.png";
+import arrow from "../../../assets/icons/arrows/arrowStart.png";
-import link from "../../../images/link.svg";
+import link from "../../../assets/icons/link.svg";
-import archive from "../../../images/archive.svg";
+import archive from "../../../assets/icons/archive.svg";
-import del from "../../../images/delete.svg";
+import del from "../../../assets/icons/delete.svg";
-import edit from "../../../images/edit.svg";
+import edit from "../../../assets/icons/edit.svg";
-import send from "../../../images/send.svg";
+import send from "../../../assets/icons/send.svg";
-import plus from "../../../images/plus.svg";
+import plus from "../../../assets/icons/plus.svg";
-import fullScreen from "../../../images/inFullScreen.svg";
+import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg";
-import close from "../../../images/closeProjectPersons.svg";
+import close from "../../../assets/icons/closeProjectPersons.svg";
 
-import "./ModalTicket.scss";
+import {urlForLocal, getCorrectRequestDate} from "../../../utils/helper";
-import {urlForLocal, getCorrectRequestDate} from "../../../helper";
 
 export const ModalTiсket = ({
   active,

src/components/UI/ModalTicket/modalTicket.scss

@@ -0,0 +1,620 @@
+.modal-tiket {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-tiket.active {
+  display: flex;
+}
+
+.modal-tiket__content {
+  background: #ffffff;
+  //border: 1px solid #dde2e4;
+  border-radius: 8px;
+  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("../../../assets/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;
+          background: #52b709;
+          border-radius: 44px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 32px;
+          border: none;
+          color: #ffffff;
+        }
+      }
+
+      .tasks,
+      .file {
+        display: flex;
+        align-items: center;
+      }
+
+      .file {
+        justify-content: space-between;
+        margin-left: 20px;
+
+        button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: white;
+          width: 166px;
+          height: 40px;
+          border: 0.5px solid #1458dd;
+          border-radius: 44px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 32px;
+          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;
+    }
+  }
+}

src/components/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -2,12 +2,12 @@ import React, { useEffect, useState } from "react";
 
 import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
 import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { Footer } from "../../Footer/Footer";
+import { Footer } from "@components/Common/Footer/Footer";
 import { Link, useParams, useNavigate } from "react-router-dom";
-import TrackerModal from "../TrackerModal/TrackerModal";
+import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
 import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
 import { Navigation } from "../../Navigation/Navigation";
-import {Loader} from "../../Loader/Loader";
+import {Loader} from "@components/Common/Loader/Loader";
 
 import {useDispatch, useSelector} from "react-redux";
 import {
@@ -33,7 +33,7 @@ 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 accept from "../../../images/accept.png";
+import accept from "../../../assets/images/accept.png";
 import close from "../../../images/closeProjectPersons.svg";
 
 import "./ticketFullScreen.scss";

src/pages/ProjectTracker/ProjectTracker.js

@@ -2,10 +2,10 @@ 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/Footer/Footer";
+import { Footer } from "@components/Common/Footer/Footer";
 import { Navigation } from "../../components/Navigation/Navigation";
-import { Loader } from "../../components/Loader/Loader";
+import { Loader } from "@components/Common/Loader/Loader";
-import { urlForLocal } from '../../helper'
+import { urlForLocal } from '../../utils/helper'
 
 import { useDispatch, useSelector } from "react-redux";
 import { apiRequest } from "../../api/request";
@@ -26,18 +26,18 @@ import {
 } from "../../redux/projectsTrackerSlice";
 
 import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
-import TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
+import TrackerModal from "../../components/Modal/TrackerModal/TrackerModal";
 
-import project from "../../images/trackerProject.svg";
+import project from "../../assets/icons/trackerProject.svg";
-import tasks from "../../images/trackerTasks.svg";
+import tasks from "../../assets/icons/trackerTasks.svg";
-import archive from "../../images/archiveTracker.svg";
+import archive from "../../assets/icons/archiveTracker.svg";
-import commentsBoard from "../../images/commentsBoard.svg";
+import commentsBoard from "../../assets/icons/commentsBoard.svg";
-import filesBoard from "../../images/filesBoard.svg";
+import filesBoard from "../../assets/icons/filesBoard.svg";
-import arrow from "../../images/arrowCalendar.png";
+import arrow from "../../assets/icons/arrows/arrowCalendar.png";
-import del from "../../images/delete.svg";
+import del from "../../assets/icons/delete.svg";
-import edit from "../../images/edit.svg";
+import edit from "../../assets/icons/edit.svg";
-import close from "../../images/closeProjectPersons.svg"
+import close from "../../assets/icons/close.png"
-import accept from "../../images/accept.png";
+import accept from "../../assets/images/accept.png";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();