Delete new component

Reviewed-on: #30

src/assets/icons/calendar.svg

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.569 2.26115H12.9023V1.42782C12.9023 1.2068 12.8145 0.99484 12.6583 0.83856C12.502 0.68228 12.29 0.594482 12.069 0.594482C11.848 0.594482 11.636 0.68228 11.4798 0.83856C11.3235 0.99484 11.2357 1.2068 11.2357 1.42782V2.26115H6.23568V1.42782C6.23568 1.2068 6.14788 0.99484 5.9916 0.83856C5.83532 0.68228 5.62336 0.594482 5.40234 0.594482C5.18133 0.594482 4.96937 0.68228 4.81309 0.83856C4.65681 0.99484 4.56901 1.2068 4.56901 1.42782V2.26115H2.90234C2.2393 2.26115 1.60342 2.52454 1.13458 2.99338C0.665736 3.46222 0.402344 4.09811 0.402344 4.76115V14.7611C0.402344 15.4242 0.665736 16.0601 1.13458 16.5289C1.60342 16.9978 2.2393 17.2612 2.90234 17.2612H14.569C15.2321 17.2612 15.8679 16.9978 16.3368 16.5289C16.8056 16.0601 17.069 15.4242 17.069 14.7611V4.76115C17.069 4.09811 16.8056 3.46222 16.3368 2.99338C15.8679 2.52454 15.2321 2.26115 14.569 2.26115ZM15.4023 14.7611C15.4023 14.9822 15.3145 15.1941 15.1583 15.3504C15.002 15.5067 14.79 15.5945 14.569 15.5945H2.90234C2.68133 15.5945 2.46937 15.5067 2.31309 15.3504C2.15681 15.1941 2.06901 14.9822 2.06901 14.7611V8.92782H15.4023V14.7611ZM15.4023 7.26115H2.06901V4.76115C2.06901 4.54014 2.15681 4.32817 2.31309 4.17189C2.46937 4.01561 2.68133 3.92782 2.90234 3.92782H4.56901V4.76115C4.56901 4.98216 4.65681 5.19412 4.81309 5.3504C4.96937 5.50669 5.18133 5.59448 5.40234 5.59448C5.62336 5.59448 5.83532 5.50669 5.9916 5.3504C6.14788 5.19412 6.23568 4.98216 6.23568 4.76115V3.92782H11.2357V4.76115C11.2357 4.98216 11.3235 5.19412 11.4798 5.3504C11.636 5.50669 11.848 5.59448 12.069 5.59448C12.29 5.59448 12.502 5.50669 12.6583 5.3504C12.8145 5.19412 12.9023 4.98216 12.9023 4.76115V3.92782H14.569C14.79 3.92782 15.002 4.01561 15.1583 4.17189C15.3145 4.32817 15.4023 4.54014 15.4023 4.76115V7.26115Z" fill="#406128"/>
-    <path d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z" fill-rule="evenodd"/>
 </svg>

src/components/Calendar/calendarComponent.scss

@@ -23,10 +23,14 @@
 
       .calendar__hours {
         margin: 0 5px;
-        line-height: 0;
+        font-size: 22px;
         font-weight: 500;
         display: flex;
         align-items: center;
+        span {
+          font-size: 22px;
+          font-weight: 500;
+        }
       }
     }
 
@@ -54,21 +58,33 @@
     }
 
     &-box {
+      background-color: #e5f1fb;
+      height: 47px;
       display: flex;
       align-items: center;
-      margin-left: 20px;
+      margin: 0 15px;
-      cursor: pointer;
+      padding: 0 20px;
+      border-radius: 5px;
+
+      font-weight: 400;
+      font-size: 16px;
+      color: #406128;
 
       img {
-        margin: 0px 10px;
+        width: 17px;
-        width: 12px;
+        height: 17px;
-        height: 12px;
+        margin: 0 10px 0 0;
-
-        &:first-child {
-          transform: rotate(180deg);
-          margin: 0;
-        }
       }
+    }
+
+    &-arrow {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      height: 47px;
+      padding: 0 8px;
+      background-color: #e5f1fb;
+      border-radius: 5px;
 
       span {
         color: #18586e;
@@ -107,12 +123,9 @@
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 
       p {
-        color: #398208;
+        color: #9babc5;
-        font-size: 25px;
+        font-size: 14px;
-        font-weight: 400;
+        font-weight: 500;
-        font-style: normal;
-        letter-spacing: normal;
-        line-height: 30px;
         text-align: center;
       }
     }
@@ -127,24 +140,48 @@
 
     button {
       margin: 0 auto;
-      width: 125px;
+      width: 135px;
-      height: 42px;
+      height: 82px;
       padding: 0px;
       box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-      border-radius: 5px;
+      border-radius: 10px;
       border: 1px solid #c4c4c4;
       background-color: #ffffff;
       margin-top: 20px;
       font-size: 1.2em;
       text-align: center;
 
+      .form-date {
+        width: 100%;
+        padding: 5px 0 0 15px;
+        height: 100%;
+      }
+
+      .form-box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-top: #eff5fa 2px solid;
+
+        .form-hours {
+          display: none;
+        }
+      }
+
       a {
         color: black;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
-        font-weight: 500;
+        font-weight: 400;
-        font-size: 12px;
+        font-size: 16px;
+        height: 100%;
 
         @media (max-width: 500px) {
           font-size: 10px;
@@ -152,20 +189,6 @@
         }
       }
 
-      img {
-        width: 16px;
-        height: 16px;
-        margin: 0 5px 0 0;
-
-        @media (max-width: 968px) {
-          margin-right: 2px;
-
-          @media (max-width: 610px) {
-            display: none;
-          }
-        }
-      }
-
       @media (max-width: 1200px) {
         width: 110px;
       }
@@ -214,17 +237,6 @@
   }
 }
 
-.calendar__icon {
-  margin-right: 10px;
-  margin-top: -4px;
-}
-
-@media (max-width: 575.98px) {
-  .calendar__icon {
-    display: none;
-  }
-}
-
 .select-days {
   border-style: dashed !important;
 
@@ -246,7 +258,44 @@
 }
 
 .before {
-  background-color: #e5f9b6 !important;
+  background-color: #ffffff !important;
+
+  .form-date {
+    height: 35% !important;
+  }
+  .form-box {
+    background-color: #fafbfe;
+
+    .form-hours {
+      color: #6dd077;
+      background-color: #6dd0772f;
+      border-spacing: 10px;
+      border-radius: 5px;
+      display: flex !important;
+      flex-direction: row;
+      width: 95%;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 0 7px;
+      position: relative;
+
+      span {
+        color: #1458dd;
+        font-weight: 700;
+        font-size: 14px;
+        margin: auto;
+      }
+    }
+    .form-hours::before {
+      content: "";
+      position: absolute;
+      top: 10%;
+      left: 0;
+      height: 75%;
+      border-left: 2px solid #6dd077;
+      border-radius: 5px;
+    }
+  }
 }
 
 .pass {
@@ -271,18 +320,25 @@
   align-items: center;
   column-gap: 16px;
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 400;
   position: relative;
 
   .select {
+    background-color: #e5f1fb;
+    color: #406128;
     border-radius: 5px;
-    border: 2px solid #c4c4c4;
+    padding: 15px;
-    box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-    padding: 5px 8px;
     cursor: pointer;
     text-align: center;
   }
 
+  .hint {
+    color: #6f6f6f;
+    font-size: 14px;
+    font-weight: 300;
+    margin: 0 0 0 20px;
+  }
+
   .close {
     cursor: pointer;
     margin-left: 8px;

src/components/Modal/ModalResetPassword/ModalResetPassword.jsx

@@ -7,7 +7,7 @@ import { useNotification } from "@hooks/useNotification";
 import { Loader } from "@components/Common/Loader/Loader";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import close from "assets/icons/close.png";
 
 import "./modalResetPassword.scss";

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

@@ -32,7 +32,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import calendarIcon from "assets/icons/calendar.svg";

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -26,7 +26,8 @@ import { apiRequest } from "@api/request";
 import "@components/Calendar/calendarComponent.scss";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrowLeft from "assets/icons/arrows/arrowCalendar_left.png";
+import arrowRight from "assets/icons/arrows/arrowCalendar_right.png";
 import calendarIcon from "assets/icons/calendar.svg";
 // import close from "assets/icons/closeProjectPersons.svg";
 import rectangle from "assets/images/rectangle__calendar.png";
@@ -173,11 +174,13 @@ export const ProfileCalendarComponent = React.memo(
       });
     }
 
+    // function errorr(TotalRangeHours) {
+    //   console.error(TotalRangeHours);
+    // }
     return (
       <div className="calendar-component">
         <div className="calendar-component__header">
           <div className="calendar-component__header-info">
-            {!userId && <h3>Мои отчеты за </h3>}
             <p className="calendar__hours">
               {month}&nbsp;
               <span>
@@ -187,27 +190,26 @@ export const ProfileCalendarComponent = React.memo(
           </div>
           <div className="calendar-component__header-switcher">
             <div
-              className="calendar-component__header-box"
+              className="calendar-component__header-arrow"
               onClick={() => {
                 setValueHandler(prevMonth());
                 dispatch(setRequestDate(getReports(prevMonth())));
               }}
             >
-              <img src={arrow} alt="" />
+              <img src={arrowLeft} alt="" />
-              <span>{prevMonth().format("MMMM")}</span>
             </div>
             <div className="calendar-component__header-box">
-              <span>{value.format("YYYY")}</span>
+              <img className={"calendar__icon"} src={calendarIcon} alt="" />
+              <span>{value.format("MMMM, YYYY")}</span>
             </div>
             <div
-              className="calendar-component__header-box"
+              className="calendar-component__header-arrow"
               onClick={() => {
                 setValueHandler(nextMonth());
                 dispatch(setRequestDate(getReports(nextMonth())));
               }}
             >
-              <span>{nextMonth().format("MMMM")}</span>
+              <img src={arrowRight} alt="" />
-              <img src={arrow} alt="" />
             </div>
           </div>
         </div>
@@ -218,13 +220,13 @@ export const ProfileCalendarComponent = React.memo(
 
         <div className="calendar-component__body">
           <div>
-            <p>Пн</p>
+            <p>Понедельник</p>
-            <p>Вт</p>
+            <p>Вторник</p>
-            <p>Ср</p>
+            <p>Среда</p>
-            <p>Чт</p>
+            <p>Четверг</p>
-            <p>Пт</p>
+            <p>Пятница</p>
-            <p>Сб</p>
+            <p>Суббота</p>
-            <p>Вс</p>
+            <p>Воскресенье</p>
           </div>
 
           <div className="calendar-component__form">
@@ -260,12 +262,13 @@ export const ProfileCalendarComponent = React.memo(
                   id="btn"
                 >
                   <Link to={startRangeDays ? "#" : correctRoute(day)}>
-                    <img
+                    <div className="form-date">{day.format("D")}</div>
-                      className={"calendar__icon"}
+                    <div className="form-box">
-                      src={calendarIcon}
+                      <div className="form-hours">
-                      alt=""
+                        <span>7/Час</span>
-                    />
+                      </div>
-                    {currentMonthAndDay(day)}
+                    </div>
+                    {/* {currentMonthAndDay(day)} */}
                   </Link>
                 </button>
               ))
@@ -289,6 +292,7 @@ export const ProfileCalendarComponent = React.memo(
                 ? "Выберите диапазон на календаре"
                 : "Выбрать диапазон"}
           </span>
+
           <span>
             {totalRangeHours
               ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
@@ -308,6 +312,7 @@ export const ProfileCalendarComponent = React.memo(
               Сбросить
             </BaseButton>
           )}
+          <span className="hint">Для общего просчета - выберите диапазон</span>
         </div>
       </div>
     );

src/components/ProfileCalendar/profileCalendar.scss

@@ -36,7 +36,6 @@
   }
 
   .calendar__wrapper {
-
     @media (max-width: 1000px) {
       min-height: auto;
     }

src/components/TrackerBoardHead/TrackerBoardHead.jsx

@@ -1,303 +0,0 @@
-import React, { useState } from "react";
-import { HexColorPicker } from "react-colorful";
-import { useDispatch } from "react-redux";
-
-import BaseButton from "@components/Common/BaseButton/BaseButton";
-import ListEmployees from "@components/Modal/Tracker/ListEmployees/ListEmployees";
-
-import "./trackerBoardHead.scss";
-
-const TrackerBoardHead = ({ setModalAdd }) => {
-  const dispatch = useDispatch();
-  const [personListOpen, setPersonListOpen] = useState(false);
-
-  return (
-    <div className="tasks__head">
-      <div className="tasks__head__wrapper">
-        <div className="tasks__head__title">
-          <img src={category}></img>
-          <h5>{projectBoard.name}</h5>
-        </div>
-        <div className="tasks__head__add">
-          <BaseButton
-            onClick={() => {
-              dispatch(modalToggle("create-column"));
-              setModalAdd(true);
-            }}
-            styles={"button-add-column"}
-          >
-            +
-          </BaseButton>
-
-          <p>добавить колонку</p>
-        </div>
-        <div
-          className={
-            projectBoard.projectUsers?.length
-              ? "tasks__head__persons"
-              : "tasks__head__persons no-project-users"
-          }
-        >
-          {Boolean(projectBoard.projectUsers?.length) && (
-            <div
-              className={
-                projectBoard.projectUsers?.length == 1
-                  ? "one-person"
-                  : "project-persons"
-              }
-            >
-              {projectBoard.projectUsers.slice(0, 3).map((person) => {
-                return (
-                  <img
-                    key={person.user_id}
-                    src={
-                      person.user?.avatar
-                        ? urlForLocal(person.user.avatar)
-                        : avatarMok
-                    }
-                    alt="avatar"
-                  />
-                );
-              })}
-            </div>
-          )}
-          {projectBoard.projectUsers?.length > 3 && (
-            <span className="count-persons">
-              +{projectBoard.projectUsers?.length - 3}
-            </span>
-          )}
-          <span
-            className="add-person"
-            onClick={() => {
-              setPersonListOpen(true);
-            }}
-          >
-            +
-          </span>
-
-          <ListEmployees
-            active={personListOpen}
-            setActiveListEmpl={setPersonListOpen}
-            setModalAdd={setModalAdd}
-            projectBoard={projectBoard}
-          />
-        </div>
-        <div className="tasks__head__checkBox" onClick={filterParticipateTasks}>
-          <span>Участвую</span>
-          <div className="tasks__head__checkBox__box">
-            {checkBoxParticipateTasks && <img src={accept} alt="accept" />}
-          </div>
-        </div>
-        <div className="tasks__head__checkBox" onClick={filterMyTask}>
-          <span>Мои</span>
-          <div className="tasks__head__checkBox__box">
-            {checkBoxMyTasks && <img src={accept} alt="accept" />}
-          </div>
-        </div>
-        {selectedExecutor ? (
-          <div className="tasks__head__executor-selected">
-            <p>{removeLast(selectedExecutor.user.fio)}</p>
-            <img
-              className="avatar"
-              src={
-                selectedExecutor.user?.avatar
-                  ? urlForLocal(selectedExecutor.user.avatar)
-                  : avatarMok
-              }
-              alt="avatar"
-            />
-            <img
-              className="delete"
-              src={close}
-              alt="delete"
-              onClick={deleteSelectedExecutorFilter}
-            />
-          </div>
-        ) : (
-          <div
-            className="tasks__head__executor"
-            onClick={() => setSelectedExecutorOpen(!selectExecutorOpen)}
-          >
-            <p>Выберите исполнителя</p>
-            <img
-              className={selectExecutorOpen ? "open" : ""}
-              src={arrowDown}
-              alt="arrow"
-            />
-            {selectExecutorOpen && (
-              <div className="tasks__head__executor-dropdown">
-                {projectBoard.projectUsers.map((user) => {
-                  return (
-                    <div
-                      className="executor-dropdown__person"
-                      key={user.user_id}
-                      onClick={() => executorFilter(user)}
-                    >
-                      <p>{removeLast(user.user?.fio)}</p>
-                      <img
-                        src={
-                          user.user?.avatar
-                            ? urlForLocal(user.user.avatar)
-                            : avatarMok
-                        }
-                        alt="avatar"
-                      />
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        )}
-        <div className="tasks__head__tags">
-          <div
-            className="tags__add"
-            onClick={() => {
-              setTags((prevState) => ({
-                ...prevState,
-                open: !tags.open
-              }));
-            }}
-          >
-            <p>Список тегов</p>
-            <img
-              className={tags.open ? "open" : ""}
-              src={arrowDown}
-              alt="arrow"
-            />
-          </div>
-          {tags.open && (
-            <div className="tags__list">
-              {!tags.add && !tags.edit && (
-                <div
-                  className="add-new-tag"
-                  onClick={() =>
-                    setTags((prevState) => ({
-                      ...prevState,
-                      add: true
-                    }))
-                  }
-                >
-                  <p>Добавить новый тег</p>
-                  <span>+</span>
-                </div>
-              )}
-              {!tags.add && !tags.edit && (
-                <div className="tags__list__created">
-                  {projectBoard.mark.map((tag) => {
-                    return (
-                      <div className="tag-item" key={tag.id}>
-                        <div className="tag-item__info">
-                          <span
-                            className="tag-item__color"
-                            style={{ background: tag.color }}
-                          />
-                          <div>
-                            <span className="tag-item__info__name">
-                              {tag.slug}
-                            </span>
-                            <p className="tag-item__description">{tag.title}</p>
-                          </div>
-                        </div>
-                        <div className="tag-item__images">
-                          <img
-                            src={edit}
-                            alt="edit"
-                            onClick={() => {
-                              setTags((prevState) => ({
-                                ...prevState,
-                                edit: true
-                              }));
-                              setTagInfo({
-                                description: tag.title,
-                                name: tag.slug,
-                                editMarkId: tag.id
-                              });
-                              setColor(tag.color);
-                            }}
-                          />
-                          <img
-                            onClick={() => deleteTag(tag.id)}
-                            className="delete"
-                            src={close}
-                            alt="delete"
-                          />
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-              {(tags.add || tags.edit) && (
-                <div className="form-tag">
-                  <input
-                    className="form-tag__input"
-                    placeholder="Описание метки"
-                    maxLength="25"
-                    value={tagInfo.description}
-                    onChange={(e) =>
-                      setTagInfo((prevState) => ({
-                        ...prevState,
-                        description: e.target.value
-                      }))
-                    }
-                  />
-                  <input
-                    className="form-tag__input"
-                    placeholder="Тег"
-                    value={tagInfo.name}
-                    maxLength="10"
-                    onChange={(e) =>
-                      setTagInfo((prevState) => ({
-                        ...prevState,
-                        name: e.target.value
-                      }))
-                    }
-                  />
-                  <HexColorPicker color={color} onChange={setColor} />
-                  <button
-                    onClick={() => {
-                      tags.add ? addNewTag() : editTag();
-                    }}
-                    className={
-                      tagInfo.name && tagInfo.description
-                        ? "form-tag__btn"
-                        : "form-tag__btn disable"
-                    }
-                  >
-                    {tags.add ? "Добавить" : "Изменить"}
-                  </button>
-                  {(tags.add || tags.edit) && (
-                    <button
-                      className={"form-tag__btn"}
-                      onClick={() => {
-                        setTags((prevState) => ({
-                          ...prevState,
-                          add: false,
-                          edit: false
-                        }));
-                        setTagInfo({
-                          description: "",
-                          name: ""
-                        });
-                        setColor("#aabbcc");
-                      }}
-                    >
-                      Отмена
-                    </button>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        <Link to="/profile/tracker" className="tasks__head__back">
-          <p>К списку проектов</p>
-          <img src={arrow} alt="arrow" />
-        </Link>
-      </div>
-    </div>
-  );
-};
-
-export default TrackerBoardHead;

src/pages/PartnerСategories/PartnerСategories.jsx

@@ -49,7 +49,7 @@ export const PartnerCategories = () => {
 
   const COLUMNS = [
     {
-      label: "Аватар",
+      label: "",
       renderCell: (item) => (
         <img
           className="table__avatar"
@@ -60,7 +60,7 @@ export const PartnerCategories = () => {
     },
     {
       label: "ФИО",
-      renderCell: (item) => item?.employee.fio,
+      renderCell: (item) => <p>{item?.employee.fio}</p>,
       sort: { sortKey: "NAME" }
     },
     {
@@ -68,18 +68,21 @@ export const PartnerCategories = () => {
       renderCell: (item) => (
         <Link className="table__link" to={`/candidate/${item.user_id}`}>
           Резюме
+          <div className="img__wrapper">
+            <img src={rightArrow} alt="arrow" />
+          </div>
         </Link>
       )
     },
     {
-      label: "Отчет",
+      label: "Отчетность",
       renderCell: (item) => (
         <Link
           className="table__link"
           to={`/profile/employees/report/${item.user_id}`}
         >
           Подробный отчет
-          <div>
+          <div className="img__wrapper">
             <img src={rightArrow} alt="arrow" />
           </div>
         </Link>
@@ -105,7 +108,7 @@ export const PartnerCategories = () => {
   const pagination = usePagination(data, {
     state: {
       page: 0,
-      size: 5
+      size: 10
     }
   });
 
@@ -259,6 +262,7 @@ export const PartnerCategories = () => {
                     id="search"
                     type="text"
                     value={search}
+                    placeholder="Поиск по сотрудникам"
                     onChange={handleSearch}
                   />
                 </label>
@@ -270,26 +274,52 @@ export const PartnerCategories = () => {
                   pagination={pagination}
                 />
                 <div className="table__pagination">
-                  <span>
+                  <button
-                    Total Pages: {pagination.state.getTotalPages(data.nodes)}
+                    className={
-                  </span>
+                      pagination.state.page === 0 ? "switch disable" : "switch"
-
+                    }
+                    type="button"
+                    disabled={pagination.state.page === 0}
+                    onClick={() =>
+                      pagination.fns.onSetPage(pagination.state.page - 1)
+                    }
+                  >
+                    {"<"}
+                  </button>
                   <span className="table__pages">
-                    Page:{" "}
                     {pagination.state.getPages(data.nodes).map((_, index) => (
                       <button
                         key={index}
                         type="button"
-                        style={{
+                        className={
-                          fontWeight:
+                          pagination.state.page === index
-                            pagination.state.page === index ? "bold" : "normal"
+                            ? "page page--active "
-                        }}
+                            : "page"
+                        }
                         onClick={() => pagination.fns.onSetPage(index)}
                       >
                         {index + 1}
                       </button>
                     ))}
                   </span>
+                  <button
+                    className={
+                      pagination.state.page + 1 ===
+                      pagination.state.getPages(data.nodes).length
+                        ? "switch disable"
+                        : "switch"
+                    }
+                    type="button"
+                    disabled={
+                      pagination.state.page + 1 ===
+                      pagination.state.getPages(data.nodes).length
+                    }
+                    onClick={() =>
+                      pagination.fns.onSetPage(pagination.state.page + 1)
+                    }
+                  >
+                    {">"}
+                  </button>
                 </div>
               </>
             ) : (

src/pages/PartnerСategories/partnerСategories.scss

@@ -13,10 +13,13 @@
 
   &__items {
     display: flex;
-    gap: 10px;
     flex-wrap: wrap;
     justify-content: center;
+    background: white;
+    padding: 20px 0 30px;
+    border-radius: 7px;
   }
+
   &__empty {
     font-size: 18px;
     font-weight: 500;
@@ -161,8 +164,18 @@
       display: flex;
       width: 100%;
       gap: 10px;
-      font-size: 18px;
       align-items: center;
+      padding: 0 18px 35px;
+      margin-bottom: 0;
+      font-size: 16px;
+
+      input {
+        background: #F0F2F5;
+        outline: none;
+        border-radius: 6px;
+        padding: 6px;
+        border: none;
+      }
     }
 
      &__avatar {
@@ -175,20 +188,85 @@
       color: black;
       font-size: 16px;
       align-items: center;
+
+      .img__wrapper {
+        width: 22px;
+        height: 22px;
+        border-radius: 50px;
+        background: #D9D7D7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 14px;
+        }
+      }
     }
 
     &__pagination {
       width: 100%;
       display: flex;
-      justify-content: space-between;
+      font-size: 14px;
-      font-size: 16px;
       align-items: center;
+      padding: 39px 34px 0;
+      column-gap: 12px;
+
+      button {
+        font-size: 14px;
+        width: 32px;
+        border-radius: 5px;
+        height: 32px;
+        color: #2E3A59;
+      }
+
+      .switch {
+        border: none;
+        background: #F0F2F5;
+        font-weight: 600;
+      }
+
+      .disable {
+        opacity: 0.7;
+      }
     }
 
     &__pages {
       display: flex;
-      column-gap: 5px;
+      column-gap: 4px;
-      align-items: center;
+      color: black;
+      background: white;
+
+      .page {
+        border: 1px solid #E8ECF8;
+        background: none;
+
+        &--active {
+          border: none;
+          background: #9DA65D;
+          color: white;
+        }
+      }
+    }
+  }
+
+  table {
+    th {
+      border-top: 0;
+      border-bottom: 1px solid #EDEDED;
+      color: #1458DD;
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    td {
+      border-top: 0;
+      border-bottom: 1px solid #EDEDED;
+      color: #2E3A59;
+
+      p {
+        font-weight: 500;
+      }
     }
   }
 }

src/pages/ProjectTracker/ProjectTracker.jsx

@@ -41,7 +41,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import category from "assets/icons/category.svg";
 import close from "assets/icons/close.png";

src/pages/Statistics/Statistics.jsx

@@ -15,7 +15,7 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import emailImg from "assets/icons/emailStatistics.svg";
 import link from "assets/icons/link.svg";
 import project from "assets/icons/trackerProject.svg";

src/pages/Summary/Summary.jsx

@@ -119,6 +119,9 @@ export const Summary = () => {
                 {profileInfo?.fio || profileInfo?.username},{" "}
                 {profileInfo.specification} разработчик
               </p>
+              <hr />
+              <div className="summary__direction">Front End</div>
+              <div className="summary__level">Middle+</div>
             </div>
             {!openGit && (
               <button className="summary__git" onClick={() => setOpenGit(true)}>

src/pages/Summary/summary.scss

@@ -1,5 +1,5 @@
 .summary {
-  background: #f1f1f1;
+  background: #f4f7ff;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -62,7 +62,7 @@
   &__person {
     display: flex;
     align-items: center;
-    column-gap: 45px;
+    column-gap: 20px;
 
     @media (max-width: 825px) {
       column-gap: 20px;
@@ -74,8 +74,8 @@
   }
 
   &__avatar {
-    width: 88px;
+    width: 50px;
-    height: 88px;
+    height: 50px;
     border-radius: 100px;
 
     @media (max-width: 690px) {
@@ -97,9 +97,9 @@
   }
 
   &__name {
+    color: #1458dd;
+    font-size: 15px;
     font-weight: 500;
-    font-size: 16px;
-    line-height: 32px;
     position: relative;
 
     @media (max-width: 690px) {
@@ -118,17 +118,19 @@
     @media (max-width: 450px) {
       max-width: 160px;
     }
+  }
 
-    &:after {
+  &__direction {
-      content: "";
+    color: #6f6f6f;
-      position: absolute;
+    font-size: 14px;
-      background: #52b709;
+  }
-      border-radius: 12px;
+
-      width: 70%;
+  &__level {
-      height: 8px;
+    background-color: #1458dd;
-      bottom: -14px;
+    color: #ffffff;
-      left: 0;
+    border-radius: 44px;
-    }
+    font-size: 14px;
+    font-weight: 400;
   }
 
   &__git {