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,38 @@ 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>