Merge pull request #64 from apuc/parthners-area

Parthners area

src/components/SideBar/sidebar.scss

@@ -135,9 +135,10 @@
       line-height: 32px;
       color: #000000;
     }
+
     span {
-      font-size: 5px;
+      font-size: 12px;
-      margin-left: 41px;
+      margin-left: 0px;
     }
   }
 
@@ -194,6 +195,10 @@
   width: 424px;
   left: 140px;
 
+  @media (max-width: 1440px) {
+    left: 79px;
+  }
+
   @media (max-width: 1024px) {
     left: 0;
     width: 100%;

src/components/SliderWorkers/SliderWorkers.js

@@ -30,11 +30,14 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {
       skils: "React / Vue Front end, Middle разработчик",
     },
   ]);
+
   const settings = {
     infinite: true,
-    speed: 300,
+    speed: 1000,
     slidesToShow: 3,
     slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 4500,
   };
 
   if (window.innerWidth < 575) {
@@ -54,9 +57,9 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {
             : ""
         }
         <Slider {...settings}>
-          {workers.map((worker) => {
+          {workers.map((worker, index) => {
             return (
-              <div className="worker">
+              <div className="worker" key={index}>
                 <img src={worker.avatar}></img>
                 <div className="worker-description">
                   <p>{worker.skils}</p>

src/components/UI/ModalCreate/ModalCreate.js

@@ -9,13 +9,17 @@ export const ModalCreate = ({ active, setActive, title }) => {
   const dispatch = useDispatch();
 
   function createName() {
+    if (inputValue === "") {
+      return;
+    } else {
       let newItem = {
         name: inputValue,
         count: 0,
       };
       dispatch(setProject(newItem));
       setActive(false);
-    setInputValue("")
+      setInputValue("");
+    }
   }
 
   return (

src/components/UI/ModalTiket/ModalTiket.js

@@ -44,7 +44,12 @@ export const ModalTiket = ({ active, setActive }) => {
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
             Проект: {tiket.name}
+            <div className="title-project__menu">
+              <p>Редактировать</p>
+              <p>Удалить</p>
+            </div>
           </h3>
+
           <div className="content__task">
             <h5>{tiket.code}</h5>
             <div className="content__description">

src/components/UI/ModalTiket/ModalTiket.scss

@@ -39,6 +39,24 @@
       &__category {
         margin-right: 17px;
       }
+
+      &__menu {
+        display: flex;
+        align-items: center;
+        margin-left: 110px;
+
+        p {
+          font-weight: 400;
+          font-size: 14px;
+          color: #252c32;
+          margin: 0 30px 0 0;
+
+          &:hover {
+            cursor: pointer;
+            text-decoration: underline;
+          }
+        }
+      }
     }
 
     &__task {

src/index.css

@@ -26,6 +26,10 @@ h1 {
   position: relative !important;
 }
 
+p {
+  margin-bottom: 0;
+}
+
 @media (max-width: 568px) {
   .col-xs-12 {
     width: 100% !important;

src/pages/AuthForDevelopers/AuthForDevelopers.js

@@ -31,6 +31,13 @@ const AuthForDevelopers = () => {
     }
   }, [getToken]);
 
+  function scrollToForm() {
+    window.scrollTo({
+      top: 850,
+      behavior: "smooth",
+    });
+  }
+
   return (
     <section className="auth-developers">
       <AuthHeader />
@@ -44,13 +51,13 @@ const AuthForDevelopers = () => {
         />
         <div className="container">
           <div className="change-mode">
-            <div className="change-mode__arrow">
+            <div className="change-mode__arrow" onClick={() => scrollToForm()}>
               <img src={arrowBtn}></img>
             </div>
             <div className="buttons">
               <Link to={"/authdev"}>
                 <button className="change-mode__developersForDev">
-                  Для разработчика
+                  Для разработчиков
                 </button>
               </Link>
               <Link to={"/auth"}>

src/pages/AuthForDevelopers/authForDevelopers.scss

@@ -25,6 +25,7 @@
 
   &__arrow {
     margin-top: 360px;
+    z-index: 99;
   }
 
   @media (max-width: 575.98px) {

src/pages/AuthForPartners/AuthForPartners.js

@@ -30,6 +30,13 @@ const AuthForPartners = () => {
     }
   }, [getToken]);
 
+  function scrollToForm() {
+    window.scrollTo({
+      top: 850,
+      behavior: "smooth",
+    });
+  }
+
   return (
     <section className="auth-partners">
       <AuthHeader />
@@ -39,13 +46,13 @@ const AuthForPartners = () => {
         <img className="auth-partners__vector-black" src={vectorBlack} alt="" />
         <div className="container">
           <div className="change-mode">
-            <div className="change-mode__arrow">
+            <div className="change-mode__arrow" onClick={() => scrollToForm()}>
               <img src={arrowBtn}></img>
             </div>
             <div className="buttons">
               <Link to={"/authdev"}>
                 <button className="change-mode__developersForPart">
-                  Для разработчика
+                  Для разработчиков
                 </button>
               </Link>
               <Link to={"/auth"}>

src/pages/AuthForPartners/authForPartners.scss

@@ -25,6 +25,7 @@
 
   &__arrow {
     margin-top: 360px;
+    cursor: pointer;
   }
 
   @media (max-width: 575.98px) {
@@ -286,6 +287,7 @@
   align-items: center;
 
   &__arrow {
+    cursor: pointer;
     margin: 49px 0 43px 0;
     width: 48px;
     height: 48px;

src/pages/Tracker/Tracker.js

@@ -4,6 +4,9 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";
 
+import { useDispatch, useSelector } from "react-redux";
+import { getProjects } from "../../redux/projectsTrackerSlice";
+
 import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
 import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
 
@@ -14,28 +17,14 @@ import avatarTest from "../../images/AvatarTest .png";
 import selectArrow from "../../images/select.svg";
 import commentsBoard from "../../images/commentsBoard.svg";
 import filesBoard from "../../images/filesBoard.svg";
-import search from "../../images/search.svg";
+import search from "../../images/serchIcon.png";
+import noProjects from "../../images/noProjects.png"
+import arrow from '../../images/arrowCalendar.png'
 
 import "./tracker.scss";
-import { useDispatch, useSelector } from "react-redux";
-import { getProjects } from "../../redux/projectsTrackerSlice";
 
 export const Tracker = () => {
   const [toggleTab, setToggleTab] = useState(1);
-  // const [projects] = useState([
-  //   {
-  //     name: "Разработка трекера",
-  //     count: 4,
-  //   },
-  //   {
-  //     name: "Кинотеатр",
-  //     count: 4,
-  //   },
-  //   {
-  //     name: "Проект страхование",
-  //     count: 4,
-  //   },
-  // ]);
   const [tabTaskMok, setTabTaskMok] = useState([
     {
       name: "Открытые",
@@ -144,110 +133,245 @@ export const Tracker = () => {
     },
   ]);
 
+  const [allTasks] = useState([
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+  ])
+
+  const [archiveProjects] = useState([
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+    ]
+  )
+
   const [completeTasks] = useState([
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PK - 2245",
+      name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PE - 2245",
+      name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PA - 2245",
+      name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PB - 2245",
+      name: "PR - 2245",
-      description: "Верстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
-      avatarDo: avatarTest,
-    },
-    {
-      name: "PC - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PD - 2245",
+      name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PA - 2245",
+      name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
     },
   ]);
 
   const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks);
 
+  // Modal State
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
   const [modalCreateProject, setModalCreateProject] = useState(false);
   const [modalCreateColl, setModalCreateColl] = useState(false);
+  const [modalCreateTiket, setModalCreateTiket] = useState(false);
+  const [valueTiket, setValueTiket] = useState("");
+  const [valueColl, setValueColl] = useState("");
+  //
+
+  const [projectTasksOpen, setProjectTasksOpen] = useState(false)
+
+  const [selectedTab, setSelectedTab] = useState({
+    name: "",
+    indexTab: 0,
+    task: [],
+  });
 
   const [startWrapperIndex, setStartWrapperIndex] = useState(null);
   const [wrapperHover, setWrapperHover] = useState([
@@ -258,9 +382,11 @@ export const Tracker = () => {
   ]);
 
   const projects = useSelector(getProjects);
-  const dispatch = useDispatch();
 
   const toggleTabs = (index) => {
+    if (projectTasksOpen) {
+      setProjectTasksOpen(false)
+    }
     setToggleTab(index);
   };
 
@@ -357,8 +483,42 @@ export const Tracker = () => {
     );
   }
 
-  function createProject() {
+  function selectedTabTask(e, wrapperIndex, name, tasks) {
-    setModalCreateProject(true);
+    let tab = { name: name, indexTab: wrapperIndex, task: tasks };
+    setSelectedTab(tab);
+    setModalCreateTiket(true);
+  }
+
+  function createTiket() {
+    tabTaskMok.filter((item) => {
+      if (item.name == selectedTab.name) {
+        let newTiket = {
+          task: valueTiket,
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 0,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+          id: item.tasks.length + 1,
+        };
+
+        item.tasks.push(newTiket);
+      }
+    });
+    setModalCreateTiket(false);
+    setValueTiket("");
+  }
+
+  function createTab() {
+    let newTab = {
+      name: valueColl,
+      open: false,
+      tasks: [],
+    };
+
+    tabTaskMok.unshift(newTab);
+    setValueColl("");
+    setModalCreateColl(false);
   }
 
   return (
@@ -371,7 +531,9 @@ export const Tracker = () => {
             {name: 'Трекер', link: '/profile/tracker'}
           ]}
           />
-          <h2 className="tracker__title">Трекер</h2>
+          <h2 className="tracker__title">Управление проектами с трекером</h2>
+        </div>
+      </div>
       <div className="tracker__tabs">
         <div className="tracker__tabs__head">
           <div
@@ -386,7 +548,7 @@ export const Tracker = () => {
               onClick={() => toggleTabs(2)}
           >
             <img src={tasks} alt="img" />
-                <p>Задачи</p>
+            <p>Все мои задачи</p>
           </div>
           <div
               className={toggleTab === 3 ? "tab active-tab" : "tab"}
@@ -400,13 +562,19 @@ export const Tracker = () => {
           <div
               className={
                 toggleTab === 1
-                    ? "tracker__tabs__content__projects active__content"
+                    ? "tracker__tabs__content__projects active__content tracker__tabs__content__wrapper"
-                    : "tracker__tabs__content__projects"
+                    : "tracker__tabs__content__projects tracker__tabs__content__wrapper"
               }
           >
-                {projects.map((project, index) => {
+            <ModalCreate
+                active={modalCreateProject}
+                setActive={setModalCreateProject}
+                title={"Укажите название проекта:"}
+            />
+            {Boolean(projects.length) && !projectTasksOpen &&
+              projects.map((project, index) => {
                 return (
-                    <div className="project" key={index}>
+                    <div className="project" key={index} onClick={() => setProjectTasksOpen(true)}>
                       <h3>{project.name}</h3>
                       <div className="project__info">
                         <p>Открытые задачи</p>
@@ -416,41 +584,78 @@ export const Tracker = () => {
                     </div>
                 );
               })}
-                <ModalCreate
+              {!Boolean(projects.length) && !projectTasksOpen &&
-                  active={modalCreateProject}
+                <div className="no-projects">
-                  setActive={setModalCreateProject}
+                  <div className="no-projects__createNew">
-                  title={"Укажите название проекта:"}
+                    <div>
-                />
+                      <img src={noProjects} alt="noProjectImg" />
-                <button onClick={createProject}>
+                      <p>Создайте свой первый проект</p>
+                    </div>
+                    <button className="createProjectBtn" onClick={() => setModalCreateProject(true)}>
                       <span>+</span>Создать проект
                     </button>
                   </div>
+                  <p className="no-projects__info">Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени</p>
+                </div>
+              }
+            {Boolean(projects.length) && !projectTasksOpen &&
+              <div className="create-newProject">
+                <button className="createProjectBtn" onClick={() => setModalCreateProject(true)}>
+                  <span>+</span>Создать проект
+                </button>
+                <p>Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени</p>
+              </div>
+            }
+          </div>
           <div
               className={
-                  toggleTab === 2
+                toggleTab === 1 && projectTasksOpen
                     ? "tracker__tabs__content__tasks tasks active__content"
                     : "tracker__tabs__content__projects"
               }
           >
             <div className="tasks__head">
-                  <ModalCreate
+              <div className="tasks__head__wrapper">
-                    active={modalCreateColl}
-                    setActive={setModalCreateColl}
-                    title={"Добавить колонку: "}
-                  />
                 <h4>Проект : Разработка трекера</h4>
+                <div
+                    className={
+                      modalCreateColl ? "modal-project active" : "modal-project"
+                    }
+                    onClick={() => setModalCreateColl(false)}
+                >
+                  <div
+                      className="modal-project__content"
+                      onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="title-project">
+                      <h4>Введите название карточки</h4>
+                      <div className="input-container">
+                        <input
+                            className="name-project"
+                            value={valueColl}
+                            onChange={(e) => setValueColl(e.target.value)}
+                        ></input>
+                      </div>
+                    </div>
+                    <button className="create-project" onClick={createTab}>
+                      Создать
+                    </button>
+                  </div>
+                </div>
+                <div className="tasks__head__add">
                   <span
-                    className="tasks__head__add"
                       onClick={() => setModalCreateColl(true)}
                   >
                         +
                   </span>
+                  <p>добавить задачу в проект</p>
+                </div>
                 <div className="tasks__head__persons">
                   <img src={avatarTest} alt="avatar" />
                   <img src={avatarTest} alt="avatar" />
-                    <img src={avatarTest} alt="avatar" />
+                  <span className="countPersons">+9</span>
-                    <img src={avatarTest} alt="avatar" />
+                  <span className="addPerson">+</span>
-                    <span>+9</span>
+                  <p>добавить участника в проект</p>
                 </div>
                 <div className="tasks__head__select">
                   <span>Учавствую</span>
@@ -460,12 +665,44 @@ export const Tracker = () => {
                   <span>Мои</span>
                   <img src={selectArrow} alt="arrow" />
                 </div>
+                <div className="tasks__head__back" onClick={() => setProjectTasksOpen(false)}>
+                  <p>Вернуться на проекты</p>
+                  <img src={arrow} alt="arrow"/>
                 </div>
+              </div>
+            </div>
+
             <ModalTiket
                 active={modalActiveTicket}
                 setActive={setModalActiveTicket}
             />
 
+            <div
+                className={
+                  modalCreateTiket ? "modal-project active" : "modal-project"
+                }
+                onClick={() => setModalCreateTiket(false)}
+            >
+              <div
+                  className="modal-project__content"
+                  onClick={(e) => e.stopPropagation()}
+              >
+                <div className="title-project">
+                  <h4>Введите название карточки</h4>
+                  <div className="input-container">
+                    <input
+                        className="name-project"
+                        value={valueTiket}
+                        onChange={(e) => setValueTiket(e.target.value)}
+                    ></input>
+                  </div>
+                </div>
+                <button className="create-project" onClick={createTiket}>
+                  Создать
+                </button>
+              </div>
+            </div>
+
             <div className="tasks__container">
               {tabTaskMok.map((section, wrapperIndex) => {
                 return (
@@ -487,7 +724,19 @@ export const Tracker = () => {
                             {section.name}
                           </span>
                         <div>
-                            <span className="add">+</span>
+                            <span
+                                className="add"
+                                onClick={(e) =>
+                                    selectedTabTask(
+                                        e,
+                                        wrapperIndex,
+                                        section.name,
+                                        section.tasks
+                                    )
+                                }
+                            >
+                              +
+                            </span>
                           <span className="more">...</span>
                         </div>
                       </div>
@@ -510,7 +759,6 @@ export const Tracker = () => {
                             >
                               <div className="tasks__board__item__title">
                                 <p>{task.task}</p>
-                                <span>...</span>
                               </div>
                               <p className="tasks__board__item__description">
                                 {task.description}
@@ -551,24 +799,66 @@ export const Tracker = () => {
           </div>
           <div
               className={
-                  toggleTab === 3
+                toggleTab === 2
-                    ? "tracker__tabs__content__archive tasks active__content"
+                    ? "tracker__tabs__content__allTasks taskList tasks active__content"
                     : "tracker__tabs__content__projects"
               }
           >
-                <div className="archive__title">
+            <div className="taskList__head">
-                  <h3>Архив:</h3>
+              <h3>Список всех задач</h3>
-                  <p>{filterCompleteTasks.length} задач(а)</p>
+              <div className="taskList__head__search">
-                  <div className="archive__search">
+                <img src={search} alt="search" />
                 <input
                     type="text"
+                    placeholder="Найти задачу"
                     onChange={(event) => filterArchiveTasks(event)}
                 />
+              </div>
+            </div>
+            <div className="taskList__wrapper">
+              {allTasks.map((task, index) => {
+                  return(
+                      <div className="task" key={index}>
+                        <div className="task__info">
+                          <h5>{task.name}</h5>
+                          <p>{task.description}</p>
+                        </div>
+                        <div className="task__person">
+                          <img src={task.avatarDo} alt="avatar" />
+                          <div className="task__project">
+                            <p>{task.project}</p>
+                            <span>{task.dateComplete}</span>
+                          </div>
+                        </div>
+                      </div>
+                  )
+                })
+              }
+            </div>
+          </div>
+          <div
+              className={
+                toggleTab === 3
+                    ? "tracker__tabs__content__archive active__content"
+                    : "tracker__tabs__content__projects"
+              }
+          >
+            <div className="archive__tasks">
+              <div className="archive__title">
+                <h3>Архив задач:</h3>
+                <p>{filterCompleteTasks.length} задач(а)</p>
+                <div className="archive__tasks__search">
                   <img src={search} alt="search" />
+                  <input
+                      type="text"
+                      placeholder="Найти задачу"
+                      onChange={(event) => filterArchiveTasks(event)}
+                  />
                 </div>
               </div>
               <div className="archive__tasksWrapper">
-                  {filterCompleteTasks.map((task, index) => {
+                {Boolean(filterCompleteTasks.length) ?
+                  filterCompleteTasks.map((task, index) => {
                     return (
                         <div className="archive__completeTask" key={index}>
                           <div className="archive__completeTask__description">
@@ -577,12 +867,43 @@ export const Tracker = () => {
                           </div>
                           <div className="archive__completeTask__info">
                             <img src={task.avatarDo} alt="avatar" />
-                          <p>{task.name}</p>
+                            <div className="archive__completeTask__info__project">
+                              <span>Проект</span>
+                              <p>{task.project}</p>
+                            </div>
                           </div>
                         </div>
                     );
-                  })}
+                  })
+                  :
+                  <div className="archive__noItem">
+                    <p>В архиве задач нет</p>
                   </div>
+                }
+              </div>
+            </div>
+            <div className="archive__projects">
+              <div className="archive__title">
+                <h3>Архив проектов:</h3>
+                <p>{archiveProjects.length} проект(ов)</p>
+              </div>
+              <div className="archive__tasksWrapper">
+                {Boolean(archiveProjects) ?
+                  archiveProjects.map((project, index) => {
+                      return (
+                          <div className="archive__completeTask" key={index}>
+                            <div className="archive__completeTask__description">
+                              <p>{project.name}</p>
+                              <p className="date">{project.date}</p>
+                            </div>
+                          </div>
+                      )
+                    })
+                  :
+                  <div className="archive__noItem">
+                    <p>В архиве проектов нет</p>
+                  </div>
+                }
               </div>
             </div>
           </div>

src/pages/Tracker/tracker.scss

@@ -1,5 +1,5 @@
 .tracker {
-  background: #F1F1F1;
+  background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
   font-family: "LabGrotesque", sans-serif;
@@ -22,7 +22,7 @@
     margin-top: 70px;
 
     .row {
-      margin-right: 0px
+      margin-right: 0px;
     }
   }
 
@@ -30,47 +30,81 @@
     font-weight: 700;
     font-size: 22px;
     line-height: 32px;
-    margin-bottom: 15px;
+    margin-bottom: 27px;
   }
 
   &__tabs {
     display: flex;
+    flex-direction: column;
 
     &__head {
-      width: 150px;
+      display: flex;
+      max-width: 1160px;
+      width: 100%;
+      background: #E1FCCF;
+      border-radius: 12px;
+      margin: 0 auto;
+      position: relative;
+      height: 60px;
     }
 
     .tab {
       display: flex;
       padding: 12px 40px 15px 19px;
       cursor: pointer;
+      align-items: center;
+
+      @media (max-width: 490px) {
+        padding: 8px 20px 8px 14px;
+      }
+
+      @media (max-width: 370px) {
+        padding: 5px 15px 5px 10px;
+      }
 
       p {
-        margin: 0 0 0 15px;
         font-weight: 400;
         font-size: 16px;
         line-height: 32px;
-        color: #000000;
+        margin: 0 0 0 14px;
+
+        @media (max-width: 490px) {
+          font-size: 13px;
+          white-space: nowrap;
+        }
       }
     }
 
     .active-tab {
       background: white;
-      border-radius: 15px 0 0 15px;
+      border-radius: 12px 12px 5px 5px;
+      position: relative;
+      height: 70px;
+      display: flex;
+      top: -10px;
+      align-items: center;
+
+      p {
+        font-weight: 600;
+      }
+
+      img {
+        filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg) brightness(118%) contrast(119%);
+      }
     }
 
     &__content {
-      width: calc(132% - 150px);
+      width: 100%;
+      background: #ffffff;
+      padding: 27px 0 29px;
 
-      @media (max-width: 1890px) {
+      &__wrapper {
-        width: calc(100% - 150px);
+        max-width: 1160px;
+        width: 100%;
+        margin: 0 auto;
       }
 
-
       &__projects {
-        background: #FFFFFF;
-        border-radius: 0 12px 12px 12px;
-        padding: 26px 24px 40px;
         flex-wrap: wrap;
         column-gap: 34px;
         row-gap: 30px;
@@ -87,10 +121,11 @@
 
         .project {
           width: 48%;
-          background: #F1F1F1;
+          background: #f1f1f1;
           border-radius: 12px;
           padding: 17px 26px 16px;
           cursor: pointer;
+          max-width: 440px;
 
           @media (max-width: 1068px) {
             width: 47%;
@@ -122,7 +157,7 @@
             }
 
             p {
-              color: #6F6F6F;
+              color: #6f6f6f;
               font-weight: 500;
               font-size: 12px;
               line-height: 24px;
@@ -136,16 +171,16 @@
               display: flex;
               align-items: center;
               justify-content: center;
-              background: #DDDDDD;
+              background: #dddddd;
               border-radius: 4px;
               font-weight: 500;
               font-size: 14px;
               line-height: 24px;
-              color: #6F6F6F;
+              color: #6f6f6f;
             }
 
             .add {
-              color: #6F6F6F;
+              color: #6f6f6f;
               font-size: 17px;
               margin: 0 25px 0 auto;
 
@@ -155,10 +190,10 @@
             }
 
             &:after {
-              content: '...';
+              content: "...";
               position: absolute;
               font-size: 21px;
-              color: #6F6F6F;
+              color: #6f6f6f;
               right: 0;
               top: -35%;
 
@@ -169,8 +204,42 @@
           }
         }
 
+        .no-projects {
+          display: flex;
+          flex-direction: column;
+          padding: 20px;
+          width: 100%;
+
+          &__createNew {
+            display: flex;
+            div {
+              display: flex;
+              align-items: center;
+              margin-right: 35px;
+
+              p {
+                font-weight: 700;
+                font-size: 22px;
+                line-height: 32px;
+                color: #000000;
+                margin-left: 17px;
+              }
+            }
             button {
-          background: #52B709;
+
+            }
+          }
+
+          &__info {
+            margin-top: 27px;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+          }
+        }
+
+        .createProjectBtn {
+            background: #52b709;
             border-radius: 44px;
             max-width: 188px;
             height: 50px;
@@ -179,7 +248,7 @@
             font-weight: 400;
             font-size: 15px;
             line-height: 32px;
-          color: #FFFFFF;
+            color: #ffffff;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -190,53 +259,67 @@
               font-size: 18px;
             }
         }
+
+        .create-newProject {
+          display: flex;
+          align-items: center;
+
+          @media (max-width: 450px) {
+            flex-direction: column;
+            row-gap: 15px;
+          }
+
+          p {
+            margin-left: 32px;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+            max-width: 214px;
+
+            @media (max-width: 450px) {
+              max-width: none;
+              margin-left: 0;
+              text-align: center;
+            }
+          }
+        }
       }
 
       &__tasks {
         display: none;
-        background: #FFFFFF;
+        background: #ffffff;
         border-radius: 12px;
-        padding: 13px 23px 65px;
         flex-direction: column;
-        overflow-x: scroll;
-
-        &::-webkit-scrollbar {
-          width: 2px;
-          border-radius: 10px;
-          height: 8px;
-        }
-
-        &::-webkit-scrollbar-track {
-          background: #d9e1e9;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          background: #d6d3d3;
-          border-radius: 40px;
-        }
       }
 
       .tasks {
-
         &__head {
+          border-bottom: 1px solid #dde2e4;
+          padding: 0 35px 15px;
+
+          &__wrapper {
             display: flex;
-          border-bottom: 1px solid #DDE2E4;
+            max-width: 1160px;
-          padding: 0 25px 15px;
+            margin: 0 auto;
+            justify-content: space-between;
+            padding: 0 10px;
             align-items: center;
-          width: 1525px;
+          }
 
           h4 {
-            color: #111112;
+            color: #1458DD;
             font-weight: 700;
-            font-size: 18px;
+            font-size: 22px;
             line-height: 32px;
             margin-bottom: 0;
           }
 
           &__add {
+            display: flex;
+            span {
               width: 33px;
               height: 33px;
-            background: #52B709;
+              background: #52b709;
               border-radius: 44px;
               color: whitesmoke;
               cursor: pointer;
@@ -244,14 +327,22 @@
               display: flex;
               align-items: center;
               justify-content: center;
-            margin: 0 100px 0 55px;
+            }
+
+            p {
+              margin-left: 14px;
+              font-weight: 300;
+              font-size: 14px;
+              line-height: 17px;
+              max-width: 120px;
+            }
           }
 
           &__persons {
             position: relative;
             display: flex;
             cursor: pointer;
-            margin-right: 57px;
+            align-items: center;
 
             img {
               position: relative;
@@ -259,63 +350,110 @@
               height: 32px;
             }
 
-            img:nth-child(1) {
-              right: -32px;
-            }
-
             img:nth-child(2) {
-              right: -24px;
+              right: 12px;
-            }
-
-            img:nth-child(3) {
-              right: -16px;
-            }
-
-            img:nth-child(4) {
-              right: -8px;
             }
 
             span {
-              color: #252C32;
+              width: 32px;
+              height: 32px;
               font-weight: 500;
               font-size: 12px;
               line-height: 16px;
-              display: flex;
-              width: 32px;
-              height: 32px;
-              border: 1px solid #DDE2E4;
               border-radius: 50px;
               align-items: center;
               justify-content: center;
+              position: relative;
+              display: flex;
+            }
+
+            .countPersons {
+              color: #252c32;
+              border: 1px solid #dde2e4;
+              background: white;
+              left: -25px;
+              z-index: 2;
+            }
+
+            .addPerson {
+              background: #00C5A8;
+              color: white;
+              font-size: 14px;
+              left: -35px;
+              z-index: 1;
+            }
+
+            p {
+              position: relative;
+              left: -25px;
+              font-weight: 300;
+              font-size: 14px;
+              line-height: 17px;
+              max-width: 125px;
             }
           }
 
           &__select {
             cursor: pointer;
-            margin-right: 40px;
 
             img {
               margin-left: 18px;
             }
             span {
-              color: #252C32;
+              color: #252c32;
               font-weight: 400;
               font-size: 14px;
               line-height: 24px;
             }
           }
+
+          &__back {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+
+            p {
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 17px;
+            }
+
+            img {
+              margin-left: 10px;
+              width: 20px;
+            }
+          }
         }
 
         &__container {
-          padding: 30px 25px 0;
+          padding: 30px 25px 30px;
           display: flex;
           column-gap: 25px;
-          width: 1525px;
+          margin: 0 auto;
+          overflow: auto;
+          max-width: 100%;
+
+          &::-webkit-scrollbar {
+            height: 8px;
+            border-radius: 10px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background: #cbd9f9;
+            border-radius: 20px;
+          }
+
+          &::-webkit-scrollbar-track {
+            background: #c5c0c6;
+            border-radius: 20px;
+          }
         }
 
         &__board {
-          background: #F5F7F9;
+          background: #f5f7f9;
-          box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.04), 0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06);
+          box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.04),
+            0px 0px 0px 1px rgba(60, 66, 87, 0.08),
+            0px 1px 1px rgba(0, 0, 0, 0.06);
           border-radius: 8px;
           padding: 16px 14px 16px 8px;
           width: 350px;
@@ -326,17 +464,21 @@
           position: relative;
           transition: all 0.3s ease;
 
-
           &__hover {
-            box-shadow: 0px 2px 10px #9cc480, 0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06);
+            box-shadow: 0px 2px 10px #9cc480,
+              0px 0px 0px 1px rgba(60, 66, 87, 0.08),
+              0px 1px 1px rgba(0, 0, 0, 0.06);
           }
 
           &__item {
+            width: 328px;
+            height: 154px;
             padding: 16px;
             position: relative;
-            box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
+            box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
+              0px 5px 3px -2px rgba(0, 0, 0, 0.02);
             border-radius: 6px;
-            background: #FFFFFF;
+            background: #ffffff;
             cursor: pointer;
 
             &__hide {
@@ -346,8 +488,10 @@
             &__title {
               display: flex;
               justify-content: space-between;
+              position: relative;
+
               p {
-                color: #1A1919;
+                color: #1a1919;
                 font-weight: 500;
                 font-size: 16px;
                 line-height: 24px;
@@ -364,13 +508,13 @@
                 padding-bottom: 13px;
                 width: 24px;
                 height: 24px;
-                border: 1px solid #DDDDDD;
+                border: 1px solid #dddddd;
               }
             }
 
             &__description {
               margin: 8px 0 15px;
-              color: #5C6165;
+              color: #5c6165;
               font-weight: 400;
               font-size: 14px;
               line-height: 140%;
@@ -388,7 +532,7 @@
                   font-weight: 500;
                   font-size: 12px;
                   line-height: 15px;
-                  color: #6E7C87;
+                  color: #6e7c87;
                   margin-left: 5px;
                 }
               }
@@ -422,7 +566,7 @@
           }
 
           .moreItems {
-            background: #8BCC60;
+            background: #8bcc60;
           }
 
           .lessItems {
@@ -439,8 +583,10 @@
             position: relative;
             display: flex;
             justify-content: space-between;
+            min-width: 300px;
+
             span {
-              color: #6F6F6F;
+              color: #6f6f6f;
               font-weight: 500;
               font-size: 16px;
               line-height: 24px;
@@ -448,7 +594,7 @@
             }
 
             .add {
-              color: #6F6F6F;
+              color: #6f6f6f;
               font-size: 19px;
             }
 
@@ -471,63 +617,81 @@
         display: flex;
       }
 
-      &__archive {
+      &__allTasks {
-        background: white;
+        max-width: 1160px;
-        border-radius: 12px;
+        padding: 0 20px;
-        padding: 26px 24px 40px;
+        margin: 0 auto;
-        min-height: 774px;
         display: flex;
         flex-direction: column;
 
-        .archive {
+        .taskList {
-          &__title {
+          &__head {
-            padding-bottom: 8px;
-            border-bottom: 1px solid #DDE2E4;
             display: flex;
+            justify-content: space-between;
+            width: 100%;
             align-items: center;
+            padding-bottom: 8px;
 
+            @media (max-width: 550px) {
+              flex-direction: column;
+              row-gap: 10px;
+              align-items: start;
+            }
             h3 {
-              color: #111112;
               font-weight: 700;
-              font-size: 16px;
+              font-size: 18px;
               line-height: 32px;
               margin-bottom: 0;
-            }
+              color: #1458DD;
 
-            p {
+              @media (max-width: 590px) {
-              margin: 0 0 0 10px;
+                font-size: 15px;
-              font-weight: 500;
-              font-size: 14px;
               }
             }
 
             &__search {
-            border: 2px solid;
-            border-color: var(--ds-border-input, #DFE1E6);
               margin-left: auto;
-            padding: 5px;
+              padding: 6px 12px;
               display: flex;
               align-items: center;
+              background: #FFFFFF;
+              border: 1px solid #DDE2E4;
+              box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+              border-radius: 6px;
+              max-width: 450px;
+              width: 100%;
 
-            input {
+              @media (max-width: 690px) {
-              outline: none;
+                max-width: 350px;
-              border: none;
+              }
-              font-size: 16px;
+
-              font-weight: 500;
+              @media (max-width: 550px) {
+                max-width: none;
+                margin-left: inherit;
               }
 
               img {
-              width: 20px;
+                width: 14px;
-              height: 20px;
+              }
+
+              input {
+                width: 100%;
+                padding-left: 10px;
+                outline: none;
+                border: none;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 24px;
+              }
             }
           }
 
-          &__tasksWrapper {
+          &__wrapper {
             margin-top: 10px;
             display: flex;
             flex-direction: column;
-            row-gap: 3px;
+            row-gap: 15px;
-            max-height: 649px;
+            max-height: 400px;
             overflow-y: auto;
             margin-right: -16px;
             padding-right: 10px;
@@ -535,7 +699,138 @@
             &::-webkit-scrollbar {
               width: 4px;
               background: 0 0;
-              box-shadow: 0 0 14px rgba(0,0,0,.04);
+              box-shadow: 0 0 14px rgba(0, 0, 0, 0.04);
+              border-radius: 20px;
+            }
+
+            &::-webkit-scrollbar {
+              width: 4px;
+              border-radius: 20px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+              background: #cbd9f9;
+              border-radius: 20px;
+            }
+
+            &::-webkit-scrollbar-track {
+              background: #c5c0c6;
+              border-radius: 20px;
+            }
+
+            .task {
+              display: flex;
+              background: #F1F1F1;
+              border-radius: 12px;
+              padding: 12px 42px 7px 32px;
+              justify-content: space-between;
+              cursor: pointer;
+
+              &__info {
+                display: flex;
+                flex-direction: column;
+
+                h5 {
+                  font-weight: 700;
+                  font-size: 20px;
+                  line-height: 24px;
+                  margin-bottom: 0;
+                }
+
+                p {
+                  font-size: 16px;
+                  line-height: 32px;
+                  max-width: 400px;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                }
+              }
+
+              &__person {
+                display: flex;
+                align-items: center;
+
+                img {
+                  width: 40px;
+                }
+              }
+
+              &__project {
+                display: flex;
+                flex-direction: column;
+                margin-left: 20px;
+
+                p {
+                  font-size: 16px;
+                  font-weight: 500;
+                }
+
+                span {
+                  font-size: 14px;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &__archive {
+        max-width: 1160px;
+        padding: 0 20px;
+        margin: 0 auto;
+        display: flex;
+        column-gap: 28px;
+
+        @media (max-width: 880px) {
+          flex-direction: column;
+          row-gap: 20px;
+        }
+
+        .archive {
+          &__title {
+            padding-bottom: 8px;
+            display: flex;
+            align-items: center;
+            color: #1458DD;
+            min-height: 48px;
+
+            h3 {
+              font-weight: 700;
+              font-size: 18px;
+              line-height: 32px;
+              margin-bottom: 0;
+
+              @media (max-width: 590px) {
+                font-size: 15px;
+              }
+            }
+
+            p {
+              margin: 0 0 0 10px;
+              font-weight: 300;
+              font-size: 18px;
+
+              @media (max-width: 590px) {
+                font-size: 15px;
+              }
+            }
+          }
+
+          &__tasksWrapper {
+            margin-top: 10px;
+            display: flex;
+            flex-direction: column;
+            row-gap: 15px;
+            max-height: 400px;
+            overflow-y: auto;
+            margin-right: -16px;
+            padding-right: 10px;
+
+            &::-webkit-scrollbar {
+              width: 4px;
+              background: 0 0;
+              box-shadow: 0 0 14px rgba(0, 0, 0, 0.04);
               border-radius: 20px;
             }
 
@@ -558,17 +853,26 @@
           &__completeTask {
             display: flex;
             justify-content: space-between;
-            border: 1px solid var(--ds-border,#dfe1e6);
-            padding: 8px 10px;
             cursor: pointer;
             transition: all 0.3s ease;
+            background: #F1F1F1;
+            border-radius: 12px;
+            padding: 12px 42px 7px 32px;
 
             &:hover {
               background: var(--ds-background-neutral-subtle-hovered, #f4f5f7);
             }
 
             p {
+              max-width: 250px;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
               margin-bottom: 0;
+              color: #111112;
+              font-weight: 700;
+              font-size: 16px;
+              line-height: 32px;
             }
 
             &__description {
@@ -576,8 +880,10 @@
               font-weight: 500;
 
               .date {
-                font-weight: 400;
+                font-weight: 500;
-                font-size: 12px;
+                font-size: 10px;
+                line-height: 24px;
+                color: #6F6F6F;
               }
             }
 
@@ -586,16 +892,100 @@
               align-items: center;
 
               img {
-                width: 36px;
+                width: 32px;
-                height: 36px;
+                height: 32px;
               }
 
-              p {
+              &__project {
-                margin-left: 10px;
+                margin-left: 17px;
-                text-decoration: line-through;
+                span {
-                font-size: 11px;
+                  color: #807777;
                   font-weight: 500;
-              }
+                  font-size: 10px;
+                }
+                p {
+                  color: #1A1919;
+                  font-weight: 500;
+                  font-size: 14px;
+                  line-height: 24px;
+                  text-decoration: line-through;
+                }
+              }
+            }
+          }
+
+          &__tasks {
+            min-height: 400px;
+            max-height: 450px;
+            padding-right: 15px;
+            width: 65%;
+            overflow: hidden;
+
+            @media (max-width: 880px) {
+              width: 100%;
+            }
+
+            &__search {
+              margin-left: auto;
+              padding: 6px 12px;
+              display: flex;
+              align-items: center;
+              background: #FFFFFF;
+              border: 1px solid #DDE2E4;
+              box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+              border-radius: 6px;
+              max-width: 300px;
+              width: 100%;
+
+              @media (max-width: 590px) {
+                max-width: 230px;
+              }
+
+              @media (max-width: 500px) {
+                max-width: 150px;
+              }
+
+              input {
+                width: 100%;
+                padding-left: 10px;
+                outline: none;
+                border: none;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 24px;
+              }
+
+              img {
+                width: 14px;
+                height: 14px;
+              }
+            }
+          }
+
+          &__projects {
+            display: flex;
+            flex-direction: column;
+            width: 33%;
+            min-height: 400px;
+            max-height: 450px;
+            padding-right: 15px;
+
+            @media (max-width: 880px) {
+              width: 100%;
+            }
+          }
+
+          &__noItem {
+            background: #F1F1F1;
+            border-radius: 12px;
+            padding: 23px 0 19px;
+
+            p {
+              font-weight: 700;
+              font-size: 22px;
+              line-height: 32px;
+              color: #111112;
+              text-align: center;
             }
           }
         }