Finished working in paginations

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

@@ -2,9 +2,11 @@ import React from "react";
 
 import plus from "assets/icons/plus.svg";
 
+import "./allTaskTableItem.scss";
+
 const AllTaskTableItem = ({ task, projects }) => {
   function toggleDescTask(e) {
-    e.target.closest("img").classList.toggle("open-desc-item");
+    e.target?.classList.toggle("open-desc-item");
     e.target
       .closest("td")
       ?.querySelector(".taskList__table__name-project")
@@ -17,13 +19,13 @@ const AllTaskTableItem = ({ task, projects }) => {
         <div className="taskList__table__title-task">
           <p>{task.title}</p>
 
-          <div
+          <img
+            src={plus}
+            alt="#"
             onClick={(e) => {
               toggleDescTask(e);
             }}
-          >
+          />
-            <img src={plus} alt="#" />
-          </div>
         </div>
         <div className="taskList__table__name-project hide-desc">
           <h4>Проект:</h4>

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

@@ -7,219 +7,8 @@ import AllTaskTableItem from "./AllTaskTableItem/AllTaskTableItem";
 import "./allTaskTableTracker.scss";
 
 const AllTaskTableTracker = ({ filteredAllTasks, projects, loader }) => {
-  const lol = [
-    {
-      id: 216,
-      project_id: 66,
-      project_name: "Tuman 2",
-      title: "Турниры",
-      created_at: "2023-06-28 13:31:11",
-      updated_at: "2023-11-07 11:02:50",
-      dead_line: "2023-11-10 12:32:42",
-      description:
-        "Когда проект передавался - турниры уже были взяты в работу, там была сделана какая-то мелочь. В данный момент статус неизвестен.",
-      status: 1,
-      column_id: 138,
-      user_id: 83,
-      user: {
-        fio: "Виктор Батищев",
-        avatar: "/profileava/m2.png",
-      },
-      executor_id: 110,
-      priority: 1,
-      executor: {
-        fio: "Овсянников Максим Сергеевич",
-        avatar: "/profileava/m2.png",
-      },
-      comment_count: 0,
-      taskUsers: [
-        {
-          id: 86,
-          task_id: 216,
-          user_id: 110,
-          fio: "Овсянников Максим Сергеевич",
-          avatar: "/profileava/m2.png",
-        },
-      ],
-      mark: [],
-      execution_priority: null,
-      timers: [
-        {
-          id: 172,
-          user_id: 110,
-          created_at: "2023-10-23 10:37:39",
-          stopped_at: "2023-10-23 10:38:01",
-          entity_id: 216,
-          entity_type: 2,
-          delta: {
-            y: 0,
-            m: 0,
-            d: 0,
-            h: 0,
-            i: 0,
-            s: 22,
-            f: 0,
-            weekday: 0,
-            weekday_behavior: 0,
-            first_last_day_of: 0,
-            invert: 0,
-            days: 0,
-            special_type: 0,
-            special_amount: 0,
-            have_weekday_relative: 0,
-            have_special_relative: 0,
-          },
-          deltaSeconds: 22,
-          status: 1,
-        },
-      ],
-    },
-    {
-      id: 404,
-      project_id: 93,
-      project_name: "Тест2",
-      title: "Кек",
-      created_at: "2023-10-11 19:04:14",
-      updated_at: "2023-10-11 19:04:19",
-      dead_line: "2023-10-11 16:03:51",
-      description: "<p>12321313</p>",
-      status: 0,
-      column_id: 182,
-      user_id: 110,
-      user: {
-        fio: "Овсянников Максим Сергеевич",
-        avatar: "/profileava/m2.png",
-      },
-      executor_id: 110,
-      priority: 1,
-      executor: {
-        fio: "Овсянников Максим Сергеевич",
-        avatar: "/profileava/m2.png",
-      },
-      comment_count: 0,
-      taskUsers: [],
-      mark: [],
-      execution_priority: null,
-      timers: [],
-    },
-    {
-      id: 405,
-      project_id: 93,
-      project_name: "Тест2",
-      title: "15481",
-      created_at: "2023-10-11 19:04:49",
-      updated_at: "2023-10-11 19:05:24",
-      dead_line: "2023-10-11 16:04:32",
-      description: "<p>Тест</p>",
-      status: 0,
-      column_id: 182,
-      user_id: 110,
-      user: {
-        fio: "Овсянников Максим Сергеевич",
-        avatar: "/profileava/m2.png",
-      },
-      executor_id: 110,
-      priority: 1,
-      executor: {
-        fio: "Овсянников Максим Сергеевич",
-        avatar: "/profileava/m2.png",
-      },
-      comment_count: 0,
-      taskUsers: [],
-      mark: [],
-      execution_priority: null,
-      timers: [
-        {
-          id: 162,
-          user_id: 110,
-          created_at: "2023-10-11 16:04:53",
-          stopped_at: "2023-10-11 16:05:20",
-          entity_id: 405,
-          entity_type: 2,
-          delta: {
-            y: 0,
-            m: 0,
-            d: 0,
-            h: 0,
-            i: 0,
-            s: 27,
-            f: 0,
-            weekday: 0,
-            weekday_behavior: 0,
-            first_last_day_of: 0,
-            invert: 0,
-            days: 0,
-            special_type: 0,
-            special_amount: 0,
-            have_weekday_relative: 0,
-            have_special_relative: 0,
-          },
-          deltaSeconds: 27,
-          status: 1,
-        },
-      ],
-    },
-    {
-      id: 403,
-      project_id: 66,
-      project_name: "Tuman 2",
-      title: "Тест",
-      created_at: "2023-10-11 19:03:28",
-      updated_at: "2023-10-13 18:01:33",
-      dead_line: "2023-10-11 16:02:52",
-      description: "<p>Тест2</p>",
-      status: 0,
-      column_id: 136,
-      user_id: 110,
-      user: {
-        fio: "Овсянников Максим Сергеевич",
-        avatar: "/profileava/m2.png",
-      },
-      executor_id: 110,
-      priority: -1,
-      executor: {
-        fio: "Овсянников Максим Сергеевич",
-        avatar: "/profileava/m2.png",
-      },
-      comment_count: 0,
-      taskUsers: [],
-      mark: [],
-      execution_priority: null,
-      timers: [
-        {
-          id: 169,
-          user_id: 110,
-          created_at: "2023-10-13 15:00:16",
-          stopped_at: "2023-10-13 15:01:30",
-          entity_id: 403,
-          entity_type: 2,
-          delta: {
-            y: 0,
-            m: 0,
-            d: 0,
-            h: 0,
-            i: 1,
-            s: 14,
-            f: 0,
-            weekday: 0,
-            weekday_behavior: 0,
-            first_last_day_of: 0,
-            invert: 0,
-            days: 0,
-            special_type: 0,
-            special_amount: 0,
-            have_weekday_relative: 0,
-            have_special_relative: 0,
-          },
-          deltaSeconds: 74,
-          status: 1,
-        },
-      ],
-    },
-  ];
-
   const [items, setItems] = useState([]);
-  const itemsPerPage = 2;
+  const itemsPerPage = 10;
 
   const [currentItems, setCurrentItems] = useState([]);
   const [pageCount, setPageCount] = useState(0);
@@ -274,6 +63,9 @@ const AllTaskTableTracker = ({ filteredAllTasks, projects, loader }) => {
         </tbody>
       </table>
 
+      {currentItems.length < itemsPerPage ? (
+        ""
+      ) : (
         <ReactPaginate
           nextLabel="вперед >"
           onPageChange={handlePageClick}
@@ -294,6 +86,7 @@ const AllTaskTableTracker = ({ filteredAllTasks, projects, loader }) => {
           activeClassName="active-btn"
           renderOnZeroPageCount={null}
         />
+      )}
     </>
   );
 };

src/components/ArchiveTableTracker/ArchiveTableTracker.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import ArchiveTasksItem from "@components/Common/ArchiveTasksItem/ArchiveTasksItem";
+import ArchiveTasksItem from "@components/ArchiveTableTracker/ArchiveTasksItem/ArchiveTasksItem";
 
 import "./archiveTableTracker.scss";
 

src/pages/Tracker/Tracker.jsx

@@ -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 />

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;