partner employees

src/App.js

@@ -25,8 +25,9 @@ import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings"
 import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests'
 import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest'
 import {PartnerBid} from './pages/PartnerBid/PartnerBid'
-import {PartnerPersonalInfo} from "./pages/PartnerPersonalInfo/PartnerPersonalInfo";
+import {PartnerCategories} from "./pages/PartnerСategories/PartnerСategories";
 import {PartnerTreaties} from "./pages/PartnerTreaties/PartnerTreaties";
+import {PartnerEmployees} from "./pages/PartnerEmployees/PartnerEmployees";
 
 import './fonts/stylesheet.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
@@ -71,8 +72,9 @@ const App = () => {
               <Route exact path='requests' element={<PartnerRequests/>}/>
               <Route exact path='add-request' element={<PartnerAddRequest/>}/>
               <Route exact path='bid' element={<PartnerBid/>}/>
-              <Route exact path='employees' element={<PartnerPersonalInfo/>}/>
+              <Route exact path='categories' element={<PartnerCategories/>}/>
               <Route exact path='treaties' element={<PartnerTreaties/>}/>
+              <Route exact path='categories/employees' element={<PartnerEmployees/>}/>
             </Route>
 
             <Route path="*" element={<Navigate to="/profile" replace/>}/>

src/components/ProfileHeader/ProfileHeader.js

@@ -46,12 +46,16 @@ export const ProfileHeader = () => {
       },
     ],
     partner: [
+      {
+        path: '/',
+        name: 'Каталог'
+      },
       {
         path: '/requests',
         name: 'Запросы'
       },
       {
-        path: '/employees',
+        path: '/categories',
         name: 'Персонал'
       },
       {

src/pages/PartnerEmployees/PartnerEmployees.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import {Link, Navigate} from "react-router-dom";
+import {useSelector} from "react-redux";
+import {getPartnerEmployees} from "../../redux/outstaffingSlice";
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
+import {Footer} from "../../components/Footer/Footer";
+
+import imgInfo from "./emplInfo.png"
+import rightArrow from "../../images/arrowRight.png"
+
+import "./partnerEmployees.scss"
+
+export const PartnerEmployees = () => {
+    const partnerEmployees = useSelector(getPartnerEmployees);
+    if(localStorage.getItem('role_status') !== '18' || !partnerEmployees.length) {
+        console.log(partnerEmployees.length)
+        return <Navigate to="/profile/categories" replace/>
+    }
+    return(
+        <div className="partnerEmployees">
+            <ProfileHeader />
+            <div className="container">
+                <ProfileBreadcrumbs links={[
+                    {name: 'Главная', link: '/profile'},
+                    {name: 'Данные моего персонала', link: '/profile/categories'},
+                    {name: 'Backend разработчики', link: '/profile/categories/employees'},
+                ]}
+                />
+                <h2 className="partnerEmployees__title">Backend разработчики</h2>
+                <div className="partnerEmployees__items">
+                    {partnerEmployees.map((person) => {
+                            return <div className="partnerEmployees__item" key={person.id}>
+                                        <div className="partnerEmployees__item__name">
+                                            <img src={person.personAvatar} alt="avatar" />
+                                            <h4>{person.name}</h4>
+                                        </div>
+                                        <div className="partnerEmployees__item__info">
+                                            <div className="partnerEmployees__item__info__qualification">
+                                                <h5>{person.qualification}</h5>
+                                                <span>{person.level}</span>
+                                                <div className="info_summary">
+                                                    <img src={imgInfo} alt="img" />
+                                                    <p>Данные и резюме</p>
+                                                    <div className="arrow">
+                                                        <img src={rightArrow} alt="arrow" />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div className="partnerEmployees__item__info__project">
+                                                <span className="name">Проект:</span>
+                                                <h5>{person.project}</h5>
+                                                <div className="partnerEmployees__item__info__project__details">
+                                                    <div className="details__item">
+                                                        <p>Открытые задачи</p>
+                                                        <span className="count">{person.tasks_in_progress}</span>
+                                                    </div>
+                                                    <div className="details__item">
+                                                        <p>Отработанных часов в <span>марте</span></p>
+                                                        <span className="count">{person.month_hours}</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                        })
+
+                    }
+                </div>
+            </div>
+            <Footer/>
+        </div>
+    )
+}

src/pages/PartnerEmployees/partnerEmployees.scss

@@ -0,0 +1,170 @@
+.partnerEmployees {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;
+
+  &__title {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 22px;
+    color: #000000;
+    margin-bottom: 22px;
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+  }
+
+  &__item {
+    background: #E1FCCF;
+    border-radius: 12px;
+    display: flex;
+    position: relative;
+
+    &__name {
+      background: #FFFFFF;
+      border-radius: 12px;
+      padding: 25px 22px 25px;
+      display: flex;
+      align-items: center;
+      max-width: 274px;
+      width: 100%;
+
+      img {
+        width: 77px;
+        height: 77px;
+      }
+
+      h4 {
+        margin-left: 13px;
+        margin-bottom: 0;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 26px;
+        max-width: 96px;
+        color: #000000;
+      }
+    }
+
+    &__info {
+      display: flex;
+      padding: 15px 50px 14px 16px;
+      width: 100%;
+      justify-content: space-between;
+
+      &__qualification {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        h5 {
+          font-weight: 500;
+          font-size: 18px;
+          color: #000000;
+          margin-bottom: 0;
+        }
+
+        span {
+          color: #6F6F6F;
+          font-weight: 500;
+          font-size: 14px;
+        }
+
+        .info_summary {
+          display: flex;
+          align-items: center;
+
+          p {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+            color: #000000;
+            margin: 0 18px 0 10px;
+          }
+
+          .arrow {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #FFFFFF;
+            border-radius: 50px;
+            width: 41px;
+            height: 41px;
+          }
+        }
+      }
+
+      &__project {
+        .name {
+          font-weight: 500;
+          font-size: 18px;
+          color: #111112;
+        }
+
+        h5 {
+          margin-bottom: 0;
+          font-weight: 500;
+          font-size: 18px;
+          color: #111112;
+        }
+
+        &__details {
+          display: flex;
+          margin-top: 24px;
+          column-gap: 25px;
+
+          .details__item {
+            display: flex;
+            align-items: center;
+
+            p {
+              margin-bottom: 0;
+              color: #6F6F6F;
+              font-weight: 500;
+              font-size: 13px;
+              line-height: 24px;
+
+              span {
+                color: #406128;
+                font-weight: 700;
+                text-decoration: underline;
+              }
+            }
+
+            .count {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-left: 8px;
+              padding: 0 6px;
+              background: #DDDDDD;
+              border-radius: 4px;
+              font-weight: 500;
+              font-size: 14px;
+              line-height: 24px;
+              color: #6F6F6F;
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
+
+    @media (max-width: 570px) {
+      margin-top: 0;
+    }
+  }
+
+  footer {
+    margin-top: 70px;
+  }
+}

src/pages/PartnerSettings/PartnerSettings.js

@@ -16,7 +16,7 @@ export const PartnerSettings = () => {
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/profile" },
-            { name: "Данные моего персонала", link: "/profile/employees" },
+            { name: "Данные моего персонала", link: "/profile/settings" },
           ]}
         />
         <div className="partner-settings">

src/pages/PartnerСategories/PartnerСategories.js

@@ -1,10 +1,14 @@
 import React, {useState} from 'react';
 import {Link} from "react-router-dom";
+import {Navigate} from "react-router-dom";
+import {useDispatch} from "react-redux";
 
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
 import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {Footer} from "../../components/Footer/Footer";
 
+import {setPartnerEmployees} from "../../redux/outstaffingSlice";
+
 import BackEndImg from "./images/personalBackEnd.png"
 import FrontendImg from "./images/PersonalFrontend.png"
 import ArchitectureImg from "./images/PersonalArchitecture.png"
@@ -15,12 +19,12 @@ import ManageImg from "./images/PersonalMng.png"
 import CopyImg from "./images/PersonalCopy.png"
 import SmmImg from "./images/PersonalSMM.png"
 import rightArrow from "../../images/arrowRight.png"
+import avatarImg from "../PartnerEmployees/avatarMok.png";
 
-import {Navigate} from "react-router-dom";
+import "./partnerСategories.scss"
 
-import "./parthnerPersonalInfo.scss"
-
-export const PartnerPersonalInfo = () => {
+export const PartnerCategories = () => {
+    const dispatch = useDispatch();
     if(localStorage.getItem('role_status') !== '18') {
         return <Navigate to="/profile" replace/>
     }
@@ -28,81 +32,117 @@ export const PartnerPersonalInfo = () => {
     const [personalInfoItems] = useState([
         {
             title: 'Backend разработчики',
-            link: '/profile',
+            link: '/profile/categories/employees',
             description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
             available: true,
             img: BackEndImg
         },
         {
             title: 'Frontend разработчики',
-            link: '/profile',
+            link: '/profile/categories/employees',
             description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
             available: true,
             img: FrontendImg
         },
         {
             title: 'Архитектура проектов',
-            link: '/profile',
+            link: '/profile/categories/employees',
             description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
             available: true,
             img: ArchitectureImg
         },
         {
             title: 'Дизайн проектов',
-            link: '/profile',
+            link: '/profile/categories/employees',
             description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
             available: true,
             img: DesignImg
         },
         {
             title: 'Тестирование проектов',
-            link: '/profile',
+            link: '/profile/add-request',
             description: 'SQL Postman TestRail Kibana Ручное тестирование',
             available: false,
             img: TestImg
         },
         {
             title: 'Администрирование проектов',
-            link: '/profile',
+            link: '/profile/add-request',
             description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
             available: false,
             img: AdminImg
         },
         {
             title: 'Управление проектом',
-            link: '/profile',
+            link: '/profile/add-request',
             description: 'Scrum Kanban Agile Miro CustDev',
             available: false,
             img: ManageImg
         },
         {
             title: 'Копирайтинг проектов',
-            link: '/profile',
+            link: '/profile/add-request',
             description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
             available: false,
             img: CopyImg
         },
         {
             title: 'Реклама и SMM',
-            link: '/profile',
+            link: '/profile/add-request',
             description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
             available: false,
             img: SmmImg
         },
     ])
+
+    const [mokPersons] = useState([
+        {
+            personAvatar: avatarImg,
+            name: "Макаренко Дмитрий",
+            qualification: "PHP Backend - разработчик",
+            level: "Middle",
+            project: "Админка НВД Консалтинг",
+            tasks_in_progress: 5,
+            month_hours: 140,
+            id: 1
+        },
+        {
+            personAvatar: avatarImg,
+            name: "Макаренко Дмитрий",
+            qualification: "PHP Backend - разработчик",
+            level: "Middle",
+            project: "Админка НВД Консалтинг",
+            tasks_in_progress: 5,
+            month_hours: 140,
+            id: 2
+        },
+        {
+            personAvatar: avatarImg,
+            name: "Макаренко Дмитрий",
+            qualification: "PHP Backend - разработчик",
+            level: "Middle",
+            project: "Админка НВД Консалтинг",
+            tasks_in_progress: 5,
+            month_hours: 140,
+            id: 3
+        },
+    ])
     return (
-        <div className="personalInfo">
+        <div className="partnerCategories">
             <ProfileHeader />
             <div className="container">
                 <ProfileBreadcrumbs links={[
                     {name: 'Главная', link: '/profile'},
-                    {name: 'Данные моего персонала', link: '/profile/employees'},
+                    {name: 'Данные моего персонала', link: '/profile/categories'},
                 ]}
                 />
-                <h2 className="personalInfo__title">Данные персонала</h2>
-                <div className="personalInfo__items">
+                <h2 className="partnerCategories__title">Данные персонала</h2>
+                <div className="partnerCategories__items">
                     {personalInfoItems.map((item, index) => {
-                        return <Link to={item.link} key={index} className={item.available ? "personalInfo__item item" : "personalInfo__item item item__disable"}>
+                        return <Link to={item.link} key={index} className={item.available ? "partnerCategories__item item" : "partnerCategories__item item item__disable"}
+                                     onClick={() => {
+                                        dispatch(setPartnerEmployees(mokPersons))
+                        }}>
                             <div className="item__title">
                                 <img src={item.img} alt={item.title} />
                                 <h4>{item.title}</h4>

src/pages/PartnerСategories/partnerСategories.scss

@@ -1,4 +1,4 @@
-.personalInfo {
+.partnerCategories {
   background: #F1F1F1;
   height: 100%;
   min-height: 100vh;

src/pages/Profile/Profile.js

@@ -65,7 +65,7 @@ export const Profile = () => {
         description: '<span>У вас 2 вакансии<br/></span>открытые от лица компании'
       },
       {
-        path: '/employees',
+        path: '/categories',
         img: summaryIcon,
         title: 'Данные персонала',
         description: 'Наши специалисты <br/><span>уже работающие у вас</span>'

src/redux/outstaffingSlice.js

@@ -9,7 +9,8 @@ const initialState = {
   auth: false,
   positionId: null,
   profileInfo: {},
-  reportsDates: ''
+  reportsDates: '',
+  partnerEmployees: []
 };
 
 export const outstaffingSlice = createSlice({
@@ -46,10 +47,13 @@ export const outstaffingSlice = createSlice({
     setReportsDates: (state, action) => {
       state.reportsDates = action.payload;
     },
+    setPartnerEmployees: (state, action) => {
+      state.partnerEmployees = action.payload
+    }
   },
 });
 
-export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates, setPositionId, setUserInfo, setProfileInfo, setReportsDates } = outstaffingSlice.actions;
+export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates, setPositionId, setUserInfo, setProfileInfo, setReportsDates, setPartnerEmployees } = outstaffingSlice.actions;
 
 export const selectProfiles = (state) => state.outstaffing.profiles;
 export const selectTags = (state) => state.outstaffing.tags;
@@ -61,5 +65,6 @@ export const getPositionId = (state) => state.outstaffing.positionId;
 export const getProfileInfo = (state) => state.outstaffing.profileInfo;
 export const selectUserInfo = (state) => state.outstaffing.userInfo;
 export const getReportsDates = (state) => state.outstaffing.reportsDates;
+export const getPartnerEmployees = (state) => state.outstaffing.partnerEmployees;
 
 export default outstaffingSlice.reducer;