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) => <p>{item?.employee.fio}</p>,
+      renderCell: (item) => item?.employee.fio,
       sort: { sortKey: "NAME" }
     },
     {
@@ -68,21 +68,18 @@ 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 className="img__wrapper">
+          <div>
             <img src={rightArrow} alt="arrow" />
           </div>
         </Link>
@@ -108,7 +105,7 @@ export const PartnerCategories = () => {
   const pagination = usePagination(data, {
     state: {
       page: 0,
-      size: 10
+      size: 5
     }
   });
 
@@ -262,7 +259,6 @@ export const PartnerCategories = () => {
                     id="search"
                     type="text"
                     value={search}
-                    placeholder="Поиск по сотрудникам"
                     onChange={handleSearch}
                   />
                 </label>
@@ -274,52 +270,26 @@ export const PartnerCategories = () => {
                   pagination={pagination}
                 />
                 <div className="table__pagination">
-                  <button
+                  <span>
-                    className={
+                    Total Pages: {pagination.state.getTotalPages(data.nodes)}
-                      pagination.state.page === 0 ? "switch disable" : "switch"
+                  </span>
-                    }
+
-                    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"
-                        className={
+                        style={{
-                          pagination.state.page === index
+                          fontWeight:
-                            ? "page page--active "
+                            pagination.state.page === index ? "bold" : "normal"
-                            : "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,13 +13,10 @@
 
   &__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;
@@ -164,18 +161,8 @@
       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 {
@@ -188,85 +175,20 @@
       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;
-      font-size: 14px;
+      justify-content: space-between;
+      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: 4px;
+      column-gap: 5px;
-      color: black;
+      align-items: center;
-      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;
-      }
     }
   }
 }