Refactor file structure

package-lock.json

@@ -49,7 +49,7 @@
         "semver": "7.3.2",
         "slick-carousel": "^1.8.1",
         "sweetalert2": "^11.4.8",
-        "ts-loader": "^9.4.2"
+        "ts-loader": "^9.5.1"
       },
       "devDependencies": {
         "@babel/core": "^7.20.12",
@@ -23194,7 +23194,6 @@
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
       "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -24250,14 +24249,15 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
     "node_modules/ts-loader": {
-      "version": "9.4.2",
+      "version": "9.5.1",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz",
-      "integrity": "sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==",
+      "integrity": "sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==",
       "dependencies": {
         "chalk": "^4.1.0",
         "enhanced-resolve": "^5.0.0",
         "micromatch": "^4.0.0",
-        "semver": "^7.3.4"
+        "semver": "^7.3.4",
+        "source-map": "^0.7.4"
       },
       "engines": {
         "node": ">=12.0.0"

package.json

@@ -45,7 +45,7 @@
     "semver": "7.3.2",
     "slick-carousel": "^1.8.1",
     "sweetalert2": "^11.4.8",
-    "ts-loader": "^9.4.2"
+    "ts-loader": "^9.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

src/App.js

@@ -138,8 +138,6 @@ const App = () => {
               element={<PartnerEmployees />}
             />
           </Route>
-
-
           <Route exact path="profile-candidate/:id">
             <Route index element={<ProfileCandidate />} />
           </Route>

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

@@ -25,7 +25,7 @@ import { useNotification } from "@hooks/useNotification";
 import FileTracker from "@components/FileTracker/FileTracker";
 import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
-import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
+import TrackerTaskComment from "@components/TrackerComponents/TrackerTaskComment/TrackerTaskComment";
 
 import archive from "assets/icons/archive.svg";
 import arrow from "assets/icons/arrows/arrowStart.png";

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

@@ -29,7 +29,7 @@ import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
+import TrackerTaskComment from "@components/TrackerComponents/TrackerTaskComment/TrackerTaskComment";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";

src/components/TrackerComponents/Archive/Archive.jsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+import { getProjects } from "@redux/projectsTrackerSlice";
+
+import { caseOfNum } from "@utils/helper";
+
+import { Loader } from "@components/Common/Loader/Loader";
+
+import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
+import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
+import search from "assets/icons/serchIcon.png";
+import mockAvatar from "assets/images/avatarMok.png";
+
+import ArchiveTableTracker from "../ArchiveTableTracker/ArchiveTableTracker";
+import "./archive.scss";
+
+const Archive = ({
+  loader,
+  allCompletedTasks,
+  projects,
+  filterCompleteTasks,
+  setFilterCompleteTasks
+}) => {
+  function filterArchiveTasks(e) {
+    setFilterCompleteTasks(
+      allCompletedTasks.filter((item) => {
+        if (!e.target.value) {
+          return item;
+        }
+        if (
+          item?.title.toLowerCase().startsWith(e.target.value.toLowerCase()) ||
+          item?.description
+            .toLowerCase()
+            .startsWith(e.target.value.toLowerCase())
+        ) {
+          return item;
+        }
+      })
+    );
+  }
+
+  return (
+    <>
+      <div className="archive__tasks">
+        <div className="archive__title">
+          <h3>Архив задач:</h3>
+          <p>
+            {`${filterCompleteTasks.length} 
+          ${caseOfNum(filterCompleteTasks.length, "tasks")}`}
+          </p>
+
+          <div className="archive__tasks-period">
+            <div className="buttons-month">
+              <button>
+                <img src={arrowViewReport} alt="<"></img>
+              </button>
+              <button>
+                <img src={arrowViewReport} alt=">"></img>
+              </button>
+            </div>
+            <div className="month-period">
+              <h2>Сентябрь,</h2>
+              <h3>2023</h3>
+            </div>
+          </div>
+          <div className="archive__tasks__search">
+            <img src={search} alt="search" />
+            <input
+              type="text"
+              placeholder="Найти задачу"
+              onChange={(event) => filterArchiveTasks(event)}
+            />
+          </div>
+        </div>
+
+        {loader && <Loader style="green" />}
+
+        <ArchiveTableTracker
+          loader={loader}
+          filterCompleteTasks={filterCompleteTasks}
+        />
+      </div>
+      <div className="archive__projects">
+        <div className="archive__projects-title">
+          <h3>Архив проектов:</h3>
+          <p>
+            {`${projects?.filter((project) => project.status === 10).length} 
+           ${caseOfNum(
+             projects?.filter((project) => project.status === 10).length,
+             "projects"
+           )}`}
+          </p>
+        </div>
+        <div className="archive__tasksWrapper">
+          {Boolean(
+            projects?.filter((project) => project.status === 10).length
+          ) ? (
+            projects?.map((project, index) => {
+              return project.status === 10 ? (
+                <div className="archive__completeTask-project" key={index}>
+                  <div className="archive__completeTask__description">
+                    <p className="project-title-archive">{project.name}</p>
+                    <p className="date">{project.date}</p>
+                  </div>
+                  <div className="archive__completeTask__creator">
+                    <img src={mockAvatar} alt="#" />
+                    <div className="creator-title">
+                      <h4>Создатель проекта:</h4>
+                      <p>{"Василий Тарасов"}</p>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                ""
+              );
+            })
+          ) : (
+            <div className="archive__noItem-project">
+              <img src={archiveTrackerProjects} alt="#" />
+              <p>В архиве проектов нет</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Archive;

src/components/TrackerComponents/Archive/archive.scss

@@ -0,0 +1,382 @@
+.archive {
+  &__title {
+    padding-bottom: 8px;
+    display: flex;
+    align-items: center;
+    color: #000;
+    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;
+      }
+    }
+
+    @media (max-width: 450px) {
+      flex-wrap: wrap;
+    }
+  }
+
+  &__tasksWrapper {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+    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;
+    }
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      border-radius: 20px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #cbd9f9;
+      border-radius: 20px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #c5c0c6;
+      border-radius: 20px;
+    }
+  }
+
+  &__completeTask {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    background: #f1f1f1;
+    border-radius: 12px;
+    padding: 12px 15px 7px 16px;
+
+    p {
+      max-width: 420px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-bottom: 0;
+      color: #111112;
+    }
+
+    .completeTask__title {
+      font-weight: 700;
+      font-size: 18px;
+      line-height: 32px;
+    }
+
+    &__time {
+      p {
+        color: #000;
+        font-size: 14px;
+        font-style: normal;
+      }
+    }
+
+    &__info {
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 32px;
+        height: 32px;
+      }
+
+      &__project {
+        margin-left: 17px;
+        span {
+          color: #807777;
+          font-weight: 500;
+          font-size: 10px;
+        }
+        p {
+          color: #1a1919;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 24px;
+          text-decoration: line-through;
+        }
+      }
+    }
+
+    &-project {
+      background: #f1f1f1;
+      width: 328px;
+      max-width: 328px;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      padding: 23px 23px 23px 33px;
+      transition: 0.4s;
+      margin-bottom: 15px;
+
+      .project-title-archive {
+        width: 274px;
+        max-width: 274px;
+        color: #111112;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 700;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &:hover {
+        cursor: pointer;
+        transform: scale(0.99);
+        box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+        transition: 0.4s;
+      }
+    }
+
+    &__description {
+      width: 270px;
+      max-width: 270px;
+      font-size: 14px;
+      font-weight: 500;
+
+      .date {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 24px;
+        color: #6f6f6f;
+
+        p {
+          overflow: hidden;
+          max-width: 260px;
+          max-height: 120px;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    &__creator {
+      display: flex;
+      align-items: center;
+      gap: 13px;
+
+      img {
+        width: 31.366px;
+        height: 29px;
+      }
+
+      h4 {
+        color: #5b6871;
+        font-size: 10px;
+        font-style: normal;
+        font-weight: 400;
+      }
+
+      p {
+        color: #2d4a17;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 500;
+      }
+    }
+
+    @media (max-width: 740px) {
+      flex-direction: column;
+      padding: 10px 20px;
+    }
+
+    @media (max-width: 650px) {
+      background-color: white;
+    }
+  }
+
+  &__tasks {
+    padding-right: 15px;
+
+    @media (max-width: 1100px) {
+      width: 100%;
+    }
+
+    &-period {
+      display: flex;
+      align-items: center;
+      margin-left: 73px;
+
+      .buttons-month {
+        display: flex;
+        gap: 34px;
+
+        button {
+          width: 30px;
+          height: 30px;
+          background-color: #8dc63f;
+          border-radius: 15px;
+          border: none;
+
+          img {
+            width: 14px;
+            height: 14px;
+          }
+
+          &:first-child {
+            transform: rotate(-180deg);
+          }
+        }
+      }
+
+      .month-period {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-left: 62px;
+
+        h2 {
+          color: #1458dd;
+        }
+
+        h3 {
+          color: #252c32;
+          font-size: 18px;
+          font-weight: 700;
+          margin-left: 5px;
+        }
+      }
+    }
+
+    &__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%;
+
+      &:focus-within {
+        border: 1px solid #0000004d;
+      }
+
+      @media (max-width: 590px) {
+        max-width: 230px;
+      }
+
+      @media (max-width: 500px) {
+        max-width: 150px;
+      }
+
+      @media (max-width: 450px) {
+        margin-left: 0;
+        max-width: none;
+      }
+
+      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;
+
+    @media (max-width: 1100px) {
+      width: 100%;
+      min-height: auto;
+    }
+
+    &-title {
+      background: #e1fccf;
+      display: flex;
+      align-items: center;
+      height: 66px;
+      border-radius: 12px;
+      margin: 25px 0 0 0;
+      padding-left: 15px;
+      color: #000;
+      font-style: normal;
+
+      h3 {
+        font-size: 16px;
+        font-weight: 700;
+        margin: 0 5px 0 0;
+      }
+
+      p {
+        font-size: 16px;
+        font-weight: 300;
+      }
+    }
+  }
+
+  &__noItem {
+    padding: 23px 0 19px;
+    color: #6f6f6f;
+
+    p {
+      font-size: 17px;
+      font-style: normal;
+      font-weight: 700;
+      padding-left: 15px;
+    }
+
+    @media (max-width: 650px) {
+      background-color: white;
+    }
+
+    &-project {
+      background: #f1f1f1;
+      width: 328px;
+      height: 108px;
+      border-radius: 8px;
+      display: flex;
+      gap: 21px;
+      padding: 23px;
+      align-items: center;
+
+      p {
+        width: 105px;
+        color: #6f6f6f;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 700;
+      }
+
+      img {
+        margin-left: 10px;
+      }
+    }
+  }
+}

src/components/TrackerComponents/TrackerTaskComment/TrackerTaskComment.jsx

@@ -7,7 +7,7 @@ import { urlForLocal } from "@utils/helper";
 import { apiRequest } from "@api/request";
 
 import { getCorrectDate } from "@components/Calendar/calendarHelper";
-import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment";
+import TrackerTaskSubComment from "@components/TrackerComponents/TrackerTaskComment/TrackerTaskComment";
 
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";

src/pages/ProjectTracker/ProjectTracker.js

@@ -23,7 +23,6 @@ import {
 } from "@redux/projectsTrackerSlice";
 
 import { urlForLocal } from "@utils/helper";
-import { caseOfNum } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
@@ -39,7 +38,7 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
+import TrackerSelectColumn from "@components/TrackerComponents/TrackerSelectColumn/TrackerSelectColumn";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";

src/pages/Tracker/Tracker.jsx

@@ -9,8 +9,6 @@ import {
   setToggleTab
 } from "@redux/projectsTrackerSlice";
 
-import { caseOfNum } from "@utils/helper";
-
 import { apiRequest } from "@api/request";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
@@ -20,19 +18,17 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import ProjectTicket from "@components/ProjectTicket/ProjectTicket";
 import AllTaskTableTracker from "@components/TrackerComponents/AllTaskTableTracker/AllTaskTableTracker";
-import ArchiveTableTracker from "@components/TrackerComponents/ArchiveTableTracker/ArchiveTableTracker";
+import Archive from "@components/TrackerComponents/Archive/Archive";
+import ProjectTicket from "@components/TrackerComponents/ProjectTicket/ProjectTicket";
 
 import addProjectImg from "assets/icons/addProjectImg.svg";
-import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
 import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
 import filterIcon from "assets/icons/filterIcon.svg";
 import search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import archive from "assets/images/archiveIcon.png";
-import mockAvatar from "assets/images/avatarMok.png";
 import downloadExcel from "assets/images/downloadExcel.svg";
 import noProjects from "assets/images/noProjects.png";
 import statusTimeTask from "assets/images/statusTimeTask.svg";
@@ -106,24 +102,6 @@ export const Tracker = () => {
     );
   }
 
-  function filterArchiveTasks(e) {
-    setFilterCompleteTasks(
-      allCompletedTasks.filter((item) => {
-        if (!e.target.value) {
-          return item;
-        }
-        if (
-          item.title.toLowerCase().startsWith(e.target.value.toLowerCase()) ||
-          item.description
-            .toLowerCase()
-            .startsWith(e.target.value.toLowerCase())
-        ) {
-          return item;
-        }
-      })
-    );
-  }
-
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -328,96 +306,14 @@ export const Tracker = () => {
                 : "tracker__tabs__content__projects"
             }
           >
-            <div className="archive__tasks">
+            <Archive
-              <div className="archive__title">
+              projects={projects}
-                <h3>Архив задач:</h3>
-                <p>
-                  {`${filterCompleteTasks.length} 
-                    ${caseOfNum(filterCompleteTasks.length, "tasks")}`}
-                </p>
-
-                <div className="archive__tasks-period">
-                  <div className="buttons-month">
-                    <button>
-                      <img src={arrowViewReport} alt="<"></img>
-                    </button>
-                    <button>
-                      <img src={arrowViewReport} alt=">"></img>
-                    </button>
-                  </div>
-                  <div className="month-period">
-                    <h2>Сентябрь,</h2>
-                    <h3>2023</h3>
-                  </div>
-                </div>
-                <div className="archive__tasks__search">
-                  <img src={search} alt="search" />
-                  <input
-                    type="text"
-                    placeholder="Найти задачу"
-                    onChange={(event) => filterArchiveTasks(event)}
-                  />
-                </div>
-              </div>
-
-              {loader && <Loader style="green" />}
-
-              <ArchiveTableTracker
               loader={loader}
               filterCompleteTasks={filterCompleteTasks}
+              allCompletedTasks={allCompletedTasks}
+              setFilterCompleteTasks={setFilterCompleteTasks}
             />
           </div>
-            <div className="archive__projects">
-              <div className="archive__projects-title">
-                <h3>Архив проектов:</h3>
-                <p>
-                  {`${
-                    projects?.filter((project) => project.status === 10).length
-                  } 
-                     ${caseOfNum(
-                       projects?.filter((project) => project.status === 10)
-                         .length,
-                       "projects"
-                     )}`}
-                </p>
-              </div>
-              <div className="archive__tasksWrapper">
-                {Boolean(
-                  projects?.filter((project) => project.status === 10).length
-                ) ? (
-                  projects?.map((project, index) => {
-                    return project.status === 10 ? (
-                      <div
-                        className="archive__completeTask-project"
-                        key={index}
-                      >
-                        <div className="archive__completeTask__description">
-                          <p className="project-title-archive">
-                            {project.name}
-                          </p>
-                          <p className="date">{project.date}</p>
-                        </div>
-                        <div className="archive__completeTask__creator">
-                          <img src={mockAvatar} alt="#" />
-                          <div className="creator-title">
-                            <h4>Создатель проекта:</h4>
-                            <p>{"Василий Тарасов"}</p>
-                          </div>
-                        </div>
-                      </div>
-                    ) : (
-                      ""
-                    );
-                  })
-                ) : (
-                  <div className="archive__noItem-project">
-                    <img src={archiveTrackerProjects} alt="#" />
-                    <p>В архиве проектов нет</p>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
         </div>
       </div>
       <Footer />

src/pages/Tracker/tracker.scss

@@ -1513,389 +1513,6 @@
         margin: 0 auto;
         display: flex;
         flex-direction: column;
-
-        .archive {
-          &__title {
-            padding-bottom: 8px;
-            display: flex;
-            align-items: center;
-            color: #000;
-            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;
-              }
-            }
-
-            @media (max-width: 450px) {
-              flex-wrap: wrap;
-            }
-          }
-
-          &__tasksWrapper {
-            margin-top: 20px;
-            display: flex;
-            flex-direction: column;
-            row-gap: 15px;
-            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;
-            }
-
-            &::-webkit-scrollbar {
-              width: 4px;
-              border-radius: 20px;
-            }
-
-            &::-webkit-scrollbar-thumb {
-              background: #cbd9f9;
-              border-radius: 20px;
-            }
-
-            &::-webkit-scrollbar-track {
-              background: #c5c0c6;
-              border-radius: 20px;
-            }
-          }
-
-          &__completeTask {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            background: #f1f1f1;
-            border-radius: 12px;
-            padding: 12px 15px 7px 16px;
-
-            p {
-              max-width: 420px;
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              margin-bottom: 0;
-              color: #111112;
-            }
-
-            .completeTask__title {
-              font-weight: 700;
-              font-size: 18px;
-              line-height: 32px;
-            }
-
-            &__time {
-              p {
-                color: #000;
-                font-size: 14px;
-                font-style: normal;
-              }
-            }
-
-            &__info {
-              display: flex;
-              align-items: center;
-
-              img {
-                width: 32px;
-                height: 32px;
-              }
-
-              &__project {
-                margin-left: 17px;
-                span {
-                  color: #807777;
-                  font-weight: 500;
-                  font-size: 10px;
-                }
-                p {
-                  color: #1a1919;
-                  font-weight: 500;
-                  font-size: 14px;
-                  line-height: 24px;
-                  text-decoration: line-through;
-                }
-              }
-            }
-
-            &-project {
-              background: #f1f1f1;
-              width: 328px;
-              max-width: 328px;
-              border-radius: 8px;
-              display: flex;
-              flex-direction: column;
-              padding: 23px 23px 23px 33px;
-              transition: 0.4s;
-              margin-bottom: 15px;
-
-              .project-title-archive {
-                width: 274px;
-                max-width: 274px;
-                color: #111112;
-                font-size: 16px;
-                font-style: normal;
-                font-weight: 700;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-
-              &:hover {
-                cursor: pointer;
-                transform: scale(0.99);
-                box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
-                transition: 0.4s;
-              }
-            }
-
-            &__description {
-              width: 270px;
-              max-width: 270px;
-              font-size: 14px;
-              font-weight: 500;
-
-              .date {
-                font-weight: 500;
-                font-size: 14px;
-                line-height: 24px;
-                color: #6f6f6f;
-
-                p {
-                  overflow: hidden;
-                  max-width: 260px;
-                  max-height: 120px;
-                  text-overflow: ellipsis;
-                }
-              }
-            }
-
-            &__creator {
-              display: flex;
-              align-items: center;
-              gap: 13px;
-
-              img {
-                width: 31.366px;
-                height: 29px;
-              }
-
-              h4 {
-                color: #5b6871;
-                font-size: 10px;
-                font-style: normal;
-                font-weight: 400;
-              }
-
-              p {
-                color: #2d4a17;
-                font-size: 13px;
-                font-style: normal;
-                font-weight: 500;
-              }
-            }
-
-            @media (max-width: 740px) {
-              flex-direction: column;
-              padding: 10px 20px;
-            }
-
-            @media (max-width: 650px) {
-              background-color: white;
-            }
-          }
-
-          &__tasks {
-            padding-right: 15px;
-
-            @media (max-width: 1100px) {
-              width: 100%;
-            }
-
-            &-period {
-              display: flex;
-              align-items: center;
-              margin-left: 73px;
-
-              .buttons-month {
-                display: flex;
-                gap: 34px;
-
-                button {
-                  width: 30px;
-                  height: 30px;
-                  background-color: #8dc63f;
-                  border-radius: 15px;
-                  border: none;
-
-                  img {
-                    width: 14px;
-                    height: 14px;
-                  }
-
-                  &:first-child {
-                    transform: rotate(-180deg);
-                  }
-                }
-              }
-
-              .month-period {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                margin-left: 62px;
-
-                h2 {
-                  color: #1458dd;
-                }
-
-                h3 {
-                  color: #252c32;
-                  font-size: 18px;
-                  font-weight: 700;
-                  margin-left: 5px;
-                }
-              }
-            }
-
-            &__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%;
-
-              &:focus-within {
-                border: 1px solid #0000004d;
-              }
-
-              @media (max-width: 590px) {
-                max-width: 230px;
-              }
-
-              @media (max-width: 500px) {
-                max-width: 150px;
-              }
-
-              @media (max-width: 450px) {
-                margin-left: 0;
-                max-width: none;
-              }
-
-              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;
-
-            @media (max-width: 1100px) {
-              width: 100%;
-              min-height: auto;
-            }
-
-            &-title {
-              background: #e1fccf;
-              display: flex;
-              align-items: center;
-              height: 66px;
-              border-radius: 12px;
-              margin: 25px 0 0 0;
-              padding-left: 15px;
-              color: #000;
-              font-style: normal;
-
-              h3 {
-                font-size: 16px;
-                font-weight: 700;
-                margin: 0 5px 0 0;
-              }
-
-              p {
-                font-size: 16px;
-                font-weight: 300;
-              }
-            }
-          }
-
-          &__noItem {
-            padding: 23px 0 19px;
-            color: #6f6f6f;
-
-            p {
-              font-size: 17px;
-              font-style: normal;
-              font-weight: 700;
-              padding-left: 15px;
-            }
-
-            @media (max-width: 650px) {
-              background-color: white;
-            }
-
-            &-project {
-              background: #f1f1f1;
-              width: 328px;
-              height: 108px;
-              border-radius: 8px;
-              display: flex;
-              gap: 21px;
-              padding: 23px;
-              align-items: center;
-
-              p {
-                width: 105px;
-                color: #6f6f6f;
-                font-size: 16px;
-                font-style: normal;
-                font-weight: 700;
-              }
-
-              img {
-                margin-left: 10px;
-              }
-            }
-          }
-        }
       }
     }