From a6981f90b24126cd4e478797d56bc07e47db4ee2 Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Fri, 26 Jul 2024 20:07:35 +0300
Subject: [PATCH] employees table

---
 src/components/EmptyBlock/EmptyBlock.jsx      |  2 --
 .../PartnerСategories/PartnerСategories.jsx | 15 +++++++++++++--
 .../partnerСategories.scss                   | 19 +++++++++++++++++++
 src/pages/Payouts/Payouts.jsx                 |  8 ++++----
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/EmptyBlock/EmptyBlock.jsx b/src/components/EmptyBlock/EmptyBlock.jsx
index 87a98530..e387ce42 100644
--- a/src/components/EmptyBlock/EmptyBlock.jsx
+++ b/src/components/EmptyBlock/EmptyBlock.jsx
@@ -6,7 +6,6 @@ import empty from "assets/images/emptyPage.svg";
 import "./emptyBlock.scss";
 
 export const EmptyBlock = () => {
-
   return (
     <>
       <div className="empty-block">
@@ -21,4 +20,3 @@ export const EmptyBlock = () => {
     </>
   );
 };
-
diff --git a/src/pages/PartnerСategories/PartnerСategories.jsx b/src/pages/PartnerСategories/PartnerСategories.jsx
index 27f97b54..4c16c21d 100644
--- a/src/pages/PartnerСategories/PartnerСategories.jsx
+++ b/src/pages/PartnerСategories/PartnerСategories.jsx
@@ -46,6 +46,7 @@ export const PartnerCategories = () => {
   const theme = useTheme(getTheme());
   const [nodes, setNodes] = useState([]);
   const [initialNodes, setInitialNodes] = useState([]);
+  const [activeTab, setActiveTab] = useState('Все')
 
   const [search, setSearch] = useState("");
 
@@ -308,10 +309,20 @@ export const PartnerCategories = () => {
                   />
                 </label>
                 <div className="table__tabs">
-                  <div className="table__tab">Все</div>
+                  <div onClick={() => {
+                    setActiveTab('Все')
+                    setNodes(initialNodes)
+                  }} className={activeTab === 'Все' ? 'table__tab table__tab--active' : 'table__tab'}>Все</div>
                   {tabs.map((tab) => {
                     return (
-                      <div className="table__tab" key={tab.value}>
+                      <div onClick={() => {
+                        setActiveTab(tab.name)
+                        setNodes(
+                          initialNodes.filter((item) =>
+                            item.resume.userCard.position_id === tab.value
+                          )
+                        );
+                      }} className={activeTab === tab.name ? 'table__tab table__tab--active' : 'table__tab'} key={tab.value}>
                         {tab.name}
                       </div>
                     );
diff --git a/src/pages/PartnerСategories/partnerСategories.scss b/src/pages/PartnerСategories/partnerСategories.scss
index 4c8b36f2..dac9c5bf 100644
--- a/src/pages/PartnerСategories/partnerСategories.scss
+++ b/src/pages/PartnerСategories/partnerСategories.scss
@@ -189,6 +189,25 @@
       border-radius: 5px;
     }
 
+    &__tab {
+      padding: 8px 12px;
+      cursor: pointer;
+      color: rgba(46, 58, 89, 1);
+      font-size: 15px;
+
+      &--active {
+        background: rgba(255, 255, 255, 1);
+        font-size: 16px;
+        border-radius: 5px;
+        border: 0;
+      }
+
+      &:nth-child(2) {
+        border-right: 1px solid rgba(224, 226, 229, 1);
+        border-left: 1px solid rgba(224, 226, 229, 1);
+      }
+    }
+
      &__avatar {
        width: 40px;
        height: 40px;
diff --git a/src/pages/Payouts/Payouts.jsx b/src/pages/Payouts/Payouts.jsx
index bc274815..b6ce4c7a 100644
--- a/src/pages/Payouts/Payouts.jsx
+++ b/src/pages/Payouts/Payouts.jsx
@@ -1,10 +1,10 @@
 import React from "react";
 
 import { Footer } from "@components/Common/Footer/Footer";
-import { Navigation } from "@components/Navigation/Navigation";
-import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { EmptyBlock } from "@components/EmptyBlock/EmptyBlock";
+import { Navigation } from "@components/Navigation/Navigation";
+import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
 import "./payouts.scss";
 
@@ -17,7 +17,7 @@ export const Payouts = () => {
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/profile" },
-            { name: "Выплаты и финансы ", link: "/profile/payouts" },
+            { name: "Выплаты и финансы ", link: "/profile/payouts" }
           ]}
         />
         <h3 className="payouts__title">Выплаты и финансы </h3>