Finish work archive

src/pages/Tracker/Tracker.jsx

@@ -71,7 +71,7 @@ export const Tracker = () => {
       // }, []))
     });
     apiRequest(
-      `/task/get-user-tasks?user_id=${localStorage.getItem("id")}`
+      `/task/get-user-tasks?user_id=${localStorage.getItem("id")}&expand=timers`
     ).then((el) => {
       const allTasks = el ? el.filter((item) => item.status !== 0) : [];
       const completedTasks = el ? el.filter((item) => item.status === 0) : [];
@@ -355,6 +355,16 @@ export const Tracker = () => {
                                 }}
                               />
                             </div>
+                            <div className="archive__completeTask__time">
+                              <p>
+                                {task.timers.map((item) => {
+                                  let time = new Date(item.deltaSeconds * 1000)
+                                    .toISOString()
+                                    .slice(11, 19);
+                                  return `${time}`;
+                                })}
+                              </p>
+                            </div>
                             <div className="archive__completeTask__info">
                               <div className="archive__completeTask__info__project">
                                 {/*<span>Проект</span>*/}
@@ -398,10 +408,12 @@ export const Tracker = () => {
                         key={index}
                       >
                         <div className="archive__completeTask__description">
-                          <p>{project.name}</p>
+                          <p className="project-title-archive">
+                            {project.name}
+                          </p>
                           <p className="date">{project.date}</p>
                         </div>
-                        <div className="archive__copmpleteTask-creator">
+                        <div className="archive__completeTask__creator">
                           <img src={mockAvatar} alt="#" />
                           <div className="creator-title">
                             <h4>Создатель проекта:</h4>

src/pages/Tracker/tracker.scss

@@ -1358,17 +1358,6 @@
         display: flex;
         flex-direction: column;
 
-        // column-gap: 28px;
-
-        // @media (max-width: 1100px) {
-        //   flex-direction: column;
-        //   row-gap: 20px;
-        // }
-
-        // @media (max-width: 650px) {
-        //   padding-bottom: 20px;
-        // }
-
         .archive {
           &__title {
             padding-bottom: 8px;
@@ -1454,6 +1443,7 @@
           &__completeTask {
             display: flex;
             justify-content: space-between;
+            align-items: center;
             cursor: pointer;
             transition: all 0.3s ease;
             background: #f1f1f1;
@@ -1481,15 +1471,11 @@
               line-height: 32px;
             }
 
-            &__description {
+            &__time {
-              font-size: 14px;
+              p {
-              font-weight: 500;
+                color: #000;
-
-              .date {
-                font-weight: 500;
                 font-size: 14px;
-                line-height: 24px;
+                font-style: normal;
-                color: #6f6f6f;
               }
             }
 
@@ -1522,10 +1508,71 @@
             &-project {
               background: #f1f1f1;
               width: 328px;
+              max-width: 328px;
               border-radius: 8px;
               display: flex;
               flex-direction: column;
-              padding: 23px;
+              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: 70px;
+              max-width: 70px;
+              font-size: 14px;
+              font-weight: 500;
+
+              .date {
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 24px;
+                color: #6f6f6f;
+              }
+            }
+
+            &__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) {