Merge pull request 'fixed-pages' (#2) from fixed-pages into main

Reviewed-on: #2

package-lock.json

@@ -33,6 +33,7 @@
         "react-inlinesvg": "3.0.1",
         "react-loader-spinner": "^4.0.0",
         "react-outside-click-handler": "^1.3.0",
+        "react-paginate": "^8.2.0",
         "react-phone-input-2": "^2.14.0",
         "react-redux": "^7.2.4",
         "react-router": "latest",
@@ -21020,6 +21021,17 @@
         "react-dom": ">=16.3.0"
       }
     },
+    "node_modules/react-paginate": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.2.0.tgz",
+      "integrity": "sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==",
+      "dependencies": {
+        "prop-types": "^15"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-phone-input-2": {
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",

package.json

@@ -29,6 +29,7 @@
     "react-inlinesvg": "3.0.1",
     "react-loader-spinner": "^4.0.0",
     "react-outside-click-handler": "^1.3.0",
+    "react-paginate": "^8.2.0",
     "react-phone-input-2": "^2.14.0",
     "react-redux": "^7.2.4",
     "react-router": "latest",

src/assets/icons/plus.svg

@@ -1,3 +1 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">    <path d="M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10s10-4.477,10-10S17.523,2,12,2z M17,13h-4v4h-2v-4H7v-2h4V7h2v4h4V13z"/></svg>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C5.26522 0 5.51957 0.105357 5.70711 0.292893C5.89464 0.48043 6 0.734784 6 1V4H9C9.26522 4 9.51957 4.10536 9.70711 4.29289C9.89464 4.48043 10 4.73478 10 5C10 5.26522 9.89464 5.51957 9.70711 5.70711C9.51957 5.89464 9.26522 6 9 6H6V9C6 9.26522 5.89464 9.51957 5.70711 9.70711C5.51957 9.89464 5.26522 10 5 10C4.73478 10 4.48043 9.89464 4.29289 9.70711C4.10536 9.51957 4 9.26522 4 9V6H1C0.734784 6 0.48043 5.89464 0.292893 5.70711C0.105357 5.51957 0 5.26522 0 5C0 4.73478 0.105357 4.48043 0.292893 4.29289C0.48043 4.10536 0.734784 4 1 4H4V1C4 0.734784 4.10536 0.48043 4.29289 0.292893C4.48043 0.105357 4.73478 0 5 0Z" fill="white"/>
-</svg>

src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+import plus from "assets/icons/plus.svg";
+
+import "./allTaskTableItem.scss";
+
+const AllTaskTableItem = ({ task, projects }) => {
+  function toggleDescTask(e) {
+    e.target?.classList.toggle("open-desc-item");
+    e.target
+      .closest("td")
+      ?.querySelector(".taskList__table__name-project")
+      .classList.toggle("hide-desc");
+  }
+
+  return (
+    <tr key={task.id}>
+      <td>
+        <div className="taskList__table__title-task">
+          <p>{task.title}</p>
+
+          <img
+            src={plus}
+            alt="#"
+            onClick={(e) => {
+              toggleDescTask(e);
+            }}
+          />
+        </div>
+        <div className="taskList__table__name-project hide-desc">
+          <h4>Проект:</h4>
+          <p>
+            {projects?.map((project) => {
+              if (project.id == task.project_id) {
+                return project.name;
+              }
+            })}
+          </p>
+        </div>
+      </td>
+      <td>
+        <div className="task-status">
+          {task.status == 1 ? "Active" : "Close"}
+        </div>
+      </td>
+      <td>
+        {task.timers.map((item) => {
+          let time = new Date(item.deltaSeconds * 1000)
+            .toISOString()
+            .slice(11, 19);
+          return `${time}`;
+        })}
+      </td>
+      <td>{new Date(task.created_at).toLocaleDateString()}</td>
+      <td>{new Date(task.dead_line).toLocaleDateString()}</td>
+    </tr>
+  );
+};
+
+export default AllTaskTableItem;

src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.scss

@@ -0,0 +1,117 @@
+.open-desc-item {
+  transition: 0.4s !important;
+  transform: rotate(45deg) !important;
+}
+
+.taskList {
+  &__table {
+    margin-top: 20px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+
+    thead {
+      height: 65px;
+      background: #f1f1f1;
+      color: #5b6871;
+
+      th {
+        &:first-child {
+          padding-left: 10px;
+          border-top-left-radius: 12px;
+          border-bottom-left-radius: 12px;
+        }
+        &:last-child {
+          border-top-right-radius: 12px;
+          border-bottom-right-radius: 12px;
+        }
+      }
+    }
+
+    tbody {
+      color: #000;
+      tr {
+        background-color: white;
+
+        &:nth-child(2n) {
+          background-color: rgba(241, 241, 241, 0.23);
+        }
+      }
+
+      td {
+        height: 65px;
+        border-bottom: 1px solid rgba(241, 241, 241, 1);
+
+        &:first-child {
+          max-width: 275px;
+          padding-left: 10px;
+          color: #111112;
+          font-size: 17px;
+          font-weight: 700;
+        }
+      }
+
+      .task-status {
+        width: 130px;
+        border: 1px solid #52b709;
+        border-radius: 15px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #000;
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+
+    &__title-task {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      transition: 0.4s;
+      max-width: 350px;
+
+      p {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      img {
+        cursor: pointer;
+        width: 22px;
+        height: 22px;
+
+        transition: 0.4s;
+        transform: rotate(0deg);
+      }
+    }
+
+    &__name-project {
+      display: flex;
+      flex-direction: column;
+      transition: 0.4s;
+
+      h4 {
+        margin: 0;
+        color: #807777;
+        font-size: 10px;
+        font-weight: 500;
+        line-height: 24px;
+      }
+
+      p {
+        color: #000;
+        margin-top: -5px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 32px;
+        max-width: 318px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+}

src/components/AllTaskTableTracker/AllTaskTableTracker.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { useState } from "react";
+import { useEffect } from "react";
+import ReactPaginate from "react-paginate";
+
+import AllTaskTableItem from "./AllTaskTableItem/AllTaskTableItem";
+import "./allTaskTableTracker.scss";
+
+const AllTaskTableTracker = ({ filteredAllTasks, projects, loader }) => {
+  const [items, setItems] = useState([]);
+  const itemsPerPage = 10;
+
+  const [currentItems, setCurrentItems] = useState([]);
+  const [pageCount, setPageCount] = useState(0);
+  const [itemOffset, setItemOffset] = useState(0);
+
+  useEffect(() => {
+    setItems(filteredAllTasks);
+    const endOffset = itemOffset + itemsPerPage;
+    setCurrentItems(filteredAllTasks?.slice(itemOffset, endOffset));
+    setPageCount(Math.ceil(filteredAllTasks?.length / itemsPerPage));
+  }, [filteredAllTasks]);
+
+  useEffect(() => {
+    const endOffset = itemOffset + itemsPerPage;
+    setCurrentItems(items.slice(itemOffset, endOffset));
+    setPageCount(Math.ceil(items.length / itemsPerPage));
+  }, [itemOffset, itemsPerPage]);
+
+  const handlePageClick = (event) => {
+    const newOffset = (event.selected * itemsPerPage) % items.length;
+    setItemOffset(newOffset);
+  };
+
+  return (
+    <>
+      <table className="taskList__table">
+        <thead>
+          <tr>
+            <th>Задача</th>
+            <th>Статус</th>
+            <th>Потраченное время</th>
+            <th>Дата начала</th>
+            <th>Дедлайн</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {!loader && (
+            <>
+              {Boolean(currentItems.length) &&
+                currentItems.map((task, index) => {
+                  return (
+                    <AllTaskTableItem
+                      projects={projects}
+                      task={task}
+                      key={index}
+                    />
+                  );
+                })}
+            </>
+          )}
+        </tbody>
+      </table>
+
+      {currentItems.length < itemsPerPage ? (
+        ""
+      ) : (
+        <ReactPaginate
+          nextLabel="вперед >"
+          onPageChange={handlePageClick}
+          pageRangeDisplayed={3}
+          marginPagesDisplayed={2}
+          pageCount={pageCount}
+          previousLabel="< назад"
+          pageClassName="pagination__item"
+          pageLinkClassName="pagination__link"
+          previousClassName="pagination__item"
+          previousLinkClassName="pagination__link"
+          nextClassName="pagination__item"
+          nextLinkClassName="pagination__link"
+          breakLabel="..."
+          breakClassName="pagination__item"
+          breakLinkClassName="pagination__link"
+          containerClassName="pagination"
+          activeClassName="active-btn"
+          renderOnZeroPageCount={null}
+        />
+      )}
+    </>
+  );
+};
+
+export default AllTaskTableTracker;

src/components/AllTaskTableTracker/allTaskTableTracker.scss

@@ -0,0 +1,24 @@
+.pagination {
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+  justify-content: center;
+  margin-top: 50px;
+  font-size: 14px;
+
+  &__item {
+  }
+
+  &__link {
+    border-radius: 15px;
+    color: black;
+    padding: 6px 10px;
+  }
+}
+
+.active-btn {
+  .pagination__link {
+    color: white;
+    background-color: #52b709;
+  }
+}

src/components/ArchiveTableTracker/ArchiveTableTracker.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+import ArchiveTasksItem from "@components/ArchiveTableTracker/ArchiveTasksItem/ArchiveTasksItem";
+
+import "./archiveTableTracker.scss";
+
+const ArchiveTableTracker = ({ filterCompleteTasks, loader }) => {
+  return (
+    <table className="archive__table">
+      <thead>
+        <tr>
+          <th>Задача</th>
+          <th>Потраченное время</th>
+          <th>Дата окончания</th>
+        </tr>
+      </thead>
+      <tbody>
+        {!loader && (
+          <>
+            {Boolean(filterCompleteTasks.length) ? (
+              filterCompleteTasks?.map((task, index) => {
+                return (
+                  <ArchiveTasksItem task={task} index={index} key={index} />
+                );
+              })
+            ) : (
+              <div className="archive__noItem">
+                <p>В данном месяце у вас не было задач</p>
+              </div>
+            )}
+          </>
+        )}
+      </tbody>
+    </table>
+  );
+};
+
+export default ArchiveTableTracker;

src/components/ArchiveTableTracker/ArchiveTasksItem/ArchiveTasksItem.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+import { getCorrectDate } from "@components/Calendar/calendarHelper";
+
+import "./archiveTasksItem.scss";
+
+const ArchiveTasksItem = ({ task, index }) => {
+  return (
+    <tr key={index}>
+      <td className="archive__completeTask__description">
+        <p className="completeTask__title">{task.title}</p>
+        <p
+          className="date"
+          dangerouslySetInnerHTML={{
+            __html: task.description,
+          }}
+        />
+      </td>
+      <td className="archive__completeTask__time">
+        <p>
+          {task.timers.length == 0
+            ? "-"
+            : task.timers.map((item) => {
+                let time = new Date(item.deltaSeconds * 1000)
+                  .toISOString()
+                  .slice(11, 19);
+                return `${time}`;
+              })}
+        </p>
+      </td>
+      <td className="archive__completeTask__info">
+        <div>
+          <p>{getCorrectDate(task.updated_at)}</p>
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default ArchiveTasksItem;

src/components/ArchiveTableTracker/archiveTableTracker.scss

@@ -0,0 +1,54 @@
+.archive {
+  &__table {
+    margin: 29px 0 0 0;
+    height: 67px;
+    width: 100%;
+    font-size: 14px;
+    font-weight: 400;
+
+    thead {
+      background: #f1f1f1;
+      color: #5b6871;
+      border-radius: 12px;
+      height: 65px;
+      background: #f1f1f1;
+      color: #5b6871;
+
+      th {
+        &:first-child {
+          padding-left: 10px;
+          border-top-left-radius: 12px;
+          border-bottom-left-radius: 12px;
+        }
+        &:last-child {
+          border-top-right-radius: 12px;
+          border-bottom-right-radius: 12px;
+        }
+      }
+    }
+
+    tbody {
+      color: #000;
+      tr {
+        background-color: white;
+
+        &:nth-child(2n) {
+          background-color: rgba(241, 241, 241, 0.23);
+        }
+      }
+
+      td {
+        height: 65px;
+        border-bottom: 1px solid rgba(241, 241, 241, 1);
+
+        &:first-child {
+          max-width: 275px;
+          padding-left: 10px;
+          color: #111112;
+          font-size: 17px;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}

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

@@ -1012,7 +1012,7 @@ export const ModalTiсket = ({
             >
               <span>
                 {typeof taskPriority === "number"
-                  ? priority[taskPriority]
+                  ? `Приоритет: ${priority[taskPriority]}`
                   : "Выберите приоритет"}
               </span>
               <img

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

@@ -23,9 +23,14 @@
   max-height: 700px;
   // overflow-y: auto;
 
+  @media (max-width: 990px) {
+    width: 96%;
+  }
+
   @media (max-width: 880px) {
     max-height: none;
     overflow-y: inherit;
+    width: 96%;
   }
 
   &::-webkit-scrollbar {
@@ -576,6 +581,14 @@
       //&:focus-within {
       //  border: 1px solid #0000004d;
       //}
+
+      @media (max-width: 880px) {
+        width: 100%;
+      }
+    }
+
+    @media (max-width: 880px) {
+      width: 100%;
     }
   }
 
@@ -1089,6 +1102,10 @@
             }
           }
         }
+
+        @media (max-width: 880px) {
+          width: 100%;
+        }
       }
 
       &-priority {

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

@@ -1206,7 +1206,7 @@ export const TicketFullScreen = () => {
                   >
                     <span>
                       {typeof taskPriority === "number"
-                        ? priority[taskPriority]
+                        ? `Приоритет: ${priority[taskPriority]}`
                         : "Выберите приоритет"}
                     </span>
                     <img

src/pages/Tracker/Tracker.jsx

@@ -9,11 +9,12 @@ import {
   setToggleTab,
 } from "@redux/projectsTrackerSlice";
 
-import { caseOfNum, urlForLocal } from "@utils/helper";
+import { caseOfNum } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
-import { getCorrectDate } from "@components/Calendar/calendarHelper";
+import AllTaskTableTracker from "@components/AllTaskTableTracker/AllTaskTableTracker";
+import ArchiveTableTracker from "@components/ArchiveTableTracker/ArchiveTableTracker";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
@@ -27,7 +28,6 @@ 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 plus from "assets/icons/plus.svg";
 import search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
@@ -125,14 +125,6 @@ export const Tracker = () => {
     );
   }
 
-  function toggleDescTask(e) {
-    e.target.closest("img").classList.toggle("open-desc-item");
-    e.target
-      .closest("td")
-      ?.querySelector(".taskList__table__name-project")
-      .classList.toggle("hide-desc");
-  }
-
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -195,7 +187,7 @@ export const Tracker = () => {
             {projects &&
               Boolean(projects.length) &&
               !loader &&
-              projects.map((project, index) => {
+              projects?.map((project, index) => {
                 return project.status !== 10 ? (
                   <ProjectTiket key={index} project={project} />
                 ) : (
@@ -205,7 +197,7 @@ export const Tracker = () => {
             {typeof projects === "object" &&
               (!Boolean(projects.length) ||
                 !Boolean(
-                  projects.filter((project) => project.status !== 10).length
+                  projects?.filter((project) => project.status !== 10).length
                 )) &&
               !loader && (
                 <div className="no-projects">
@@ -297,73 +289,12 @@ export const Tracker = () => {
             </div>
 
             {loader && <Loader style="green" />}
-            <table className="taskList__table">
-              <thead>
-                <tr>
-                  <th>Задача</th>
-                  <th>Статус</th>
-                  <th>Потраченное время</th>
-                  <th>Дата начала</th>
-                  <th>Дедлайн</th>
-                </tr>
-              </thead>
 
-              <tbody>
+            <AllTaskTableTracker
-                {!loader && (
+              loader={loader}
-                  <>
+              filteredAllTasks={filteredAllTasks}
-                    {Boolean(filteredAllTasks.length) &&
+              projects={projects}
-                      filteredAllTasks.map((task, index) => {
+            />
-                        return (
-                          <tr key={task.id}>
-                            <td>
-                              <div className="taskList__table__title-task">
-                                <p>{task.title}</p>
-
-                                <div
-                                  onClick={(e) => {
-                                    toggleDescTask(e);
-                                  }}
-                                >
-                                  <img src={plus} alt="#" />
-                                </div>
-                              </div>
-                              <div className="taskList__table__name-project hide-desc">
-                                <h4>Проект:</h4>
-                                <p>
-                                  {projects.map((project) => {
-                                    if (project.id == task.project_id) {
-                                      return project.name;
-                                    }
-                                  })}
-                                </p>
-                              </div>
-                            </td>
-                            <td>
-                              <div className="task-status">
-                                {task.status == 1 ? "Active" : "Close"}
-                              </div>
-                            </td>
-                            <td>
-                              {task.timers.map((item) => {
-                                let time = new Date(item.deltaSeconds * 1000)
-                                  .toISOString()
-                                  .slice(11, 19);
-                                return `${time}`;
-                              })}
-                            </td>
-                            <td>
-                              {new Date(task.created_at).toLocaleDateString()}
-                            </td>
-                            <td>
-                              {new Date(task.dead_line).toLocaleDateString()}
-                            </td>
-                          </tr>
-                        );
-                      })}
-                  </>
-                )}
-              </tbody>
-            </table>
 
             <div className="taskList__time">
               <div className="taskList__time-compited">
@@ -438,74 +369,21 @@ export const Tracker = () => {
               </div>
 
               {loader && <Loader style="green" />}
-              <table className="archive__table">
-                <thead>
-                  <tr>
-                    <th>Задача</th>
-                    <th>Потраченное время</th>
-                    <th>Дата окончания</th>
-                  </tr>
-                </thead>
 
-                <tbody>
+              <ArchiveTableTracker
-                  {!loader && (
+                loader={loader}
-                    <>
+                filterCompleteTasks={filterCompleteTasks}
-                      {Boolean(filterCompleteTasks.length) ? (
+              />
-                        filterCompleteTasks.map((task, index) => {
-                          return (
-                            <tr key={index}>
-                              <td className="archive__completeTask__description">
-                                <p className="completeTask__title">
-                                  {task.title}
-                                </p>
-                                <p
-                                  className="date"
-                                  dangerouslySetInnerHTML={{
-                                    __html: task.description,
-                                  }}
-                                />
-                              </td>
-                              <td className="archive__completeTask__time">
-                                <p>
-                                  {task.timers.length == 0
-                                    ? "-"
-                                    : task.timers.map((item) => {
-                                        let time = new Date(
-                                          item.deltaSeconds * 1000
-                                        )
-                                          .toISOString()
-                                          .slice(11, 19);
-                                        return `${time}`;
-                                      })}
-                                </p>
-                              </td>
-                              <td className="archive__completeTask__info">
-                                <div>
-                                  <p>{getCorrectDate(task.updated_at)}</p>
-                                </div>
-                              </td>
-                            </tr>
-                          );
-                        })
-                      ) : (
-                        <div className="archive__noItem">
-                          <p>В данном месяце у вас не было задач</p>
-                        </div>
-                      )}
-                    </>
-                  )}
-                </tbody>
-              </table>
             </div>
             <div className="archive__projects">
               <div className="archive__projects-title">
                 <h3>Архив проектов:</h3>
                 <p>
                   {`${
-                    projects.filter((project) => project.status === 10).length
+                    projects?.filter((project) => project.status === 10).length
                   } 
                      ${caseOfNum(
-                       projects.filter((project) => project.status === 10)
+                       projects?.filter((project) => project.status === 10)
                          .length,
                        "projects"
                      )}`}
@@ -513,9 +391,9 @@ export const Tracker = () => {
               </div>
               <div className="archive__tasksWrapper">
                 {Boolean(
-                  projects.filter((project) => project.status === 10).length
+                  projects?.filter((project) => project.status === 10).length
                 ) ? (
-                  projects.map((project, index) => {
+                  projects?.map((project, index) => {
                     return project.status === 10 ? (
                       <div
                         className="archive__completeTask-project"

src/pages/Tracker/tracker.scss

@@ -1545,122 +1545,6 @@
             }
           }
 
-          &__table {
-            margin-top: 20px;
-            font-size: 14px;
-            font-style: normal;
-            font-weight: 400;
-            line-height: 32px;
-
-            thead {
-              height: 65px;
-              background: #f1f1f1;
-              color: #5b6871;
-
-              th {
-                &:first-child {
-                  padding-left: 10px;
-                  border-top-left-radius: 12px;
-                  border-bottom-left-radius: 12px;
-                }
-                &:last-child {
-                  border-top-right-radius: 12px;
-                  border-bottom-right-radius: 12px;
-                }
-              }
-            }
-
-            tbody {
-              color: #000;
-              tr {
-                background-color: white;
-
-                &:nth-child(2n) {
-                  background-color: rgba(241, 241, 241, 0.23);
-                }
-              }
-
-              td {
-                height: 65px;
-                border-bottom: 1px solid rgba(241, 241, 241, 1);
-
-                &:first-child {
-                  max-width: 275px;
-                  padding-left: 10px;
-                  color: #111112;
-                  font-size: 17px;
-                  font-weight: 700;
-                }
-              }
-
-              .task-status {
-                width: 130px;
-                border: 1px solid #52b709;
-                border-radius: 15px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: #000;
-                font-size: 14px;
-                font-weight: 400;
-              }
-            }
-
-            &__title-task {
-              display: flex;
-              gap: 10px;
-              align-items: center;
-              transition: 0.4s;
-              max-width: 350px;
-
-              p {
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-              }
-
-              div {
-                cursor: pointer;
-
-                width: 15px;
-                min-width: 15px;
-                min-height: 15px;
-                display: flex;
-                background-color: #000;
-                align-items: center;
-                justify-content: center;
-                border-radius: 90px;
-
-                img {
-                  transition: 0.4s;
-                  transform: rotate(0deg);
-                }
-              }
-            }
-
-            &__name-project {
-              display: flex;
-              flex-direction: column;
-              transition: 0.4s;
-
-              h4 {
-                margin: 0;
-                color: #807777;
-                font-size: 10px;
-                font-weight: 500;
-                line-height: 24px;
-              }
-
-              p {
-                color: #000;
-                margin-top: -5px;
-                font-size: 14px;
-                font-weight: 400;
-                line-height: 32px;
-              }
-            }
-          }
-
           &__time {
             padding: 30px 40px 20px 40px;
             border-radius: 12px;
@@ -1886,11 +1770,6 @@
         transition: 0.4s;
       }
 
-      .open-desc-item {
-        transition: 0.4s !important;
-        transform: rotate(45deg) !important;
-      }
-
       &__archive {
         max-width: 1160px;
         padding: 0 20px;
@@ -1932,59 +1811,6 @@
             }
           }
 
-          &__table {
-            margin: 29px 0 0 0;
-            height: 67px;
-            width: 100%;
-            font-size: 14px;
-            font-weight: 400;
-
-            thead {
-              background: #f1f1f1;
-              color: #5b6871;
-              border-radius: 12px;
-              height: 65px;
-              background: #f1f1f1;
-              color: #5b6871;
-
-              th {
-                &:first-child {
-                  padding-left: 10px;
-                  border-top-left-radius: 12px;
-                  border-bottom-left-radius: 12px;
-                }
-                &:last-child {
-                  border-top-right-radius: 12px;
-                  border-bottom-right-radius: 12px;
-                }
-              }
-            }
-
-            tbody {
-              color: #000;
-              tr {
-                background-color: white;
-
-                &:nth-child(2n) {
-                  background-color: rgba(241, 241, 241, 0.23);
-                }
-              }
-
-              td {
-                height: 65px;
-                border-bottom: 1px solid rgba(241, 241, 241, 1);
-
-                &:first-child {
-                  max-width: 275px;
-                  padding-left: 10px;
-                  color: #111112;
-                  font-size: 17px;
-                  font-weight: 700;
-                }
-              }
-            }
-          }
-
           &__tasksWrapper {
             margin-top: 20px;
             display: flex;
@@ -2117,6 +1943,13 @@
                 font-size: 14px;
                 line-height: 24px;
                 color: #6f6f6f;
+
+                p {
+                  overflow: hidden;
+                  max-width: 260px;
+                  max-height: 120px;
+                  text-overflow: ellipsis;
+                }
               }
             }