partner categories table

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>
-                    Total Pages: {pagination.state.getTotalPages(data.nodes)}
-                  </span>
-
+                  <button
+                    className={
+                      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={{
-                          fontWeight:
-                            pagination.state.page === index ? "bold" : "normal"
-                        }}
+                        className={
+                          pagination.state.page === index
+                            ? "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>
               </>
             ) : (