employees table

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 = () => {
     </>
   );
 };
-

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>
                     );

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;

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>