Merge pull request #57 from apuc/parthners-area

partner-area

src/App.js

@@ -25,6 +25,7 @@ import {Settings} from './pages/Settings/Settings'
 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 './fonts/stylesheet.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
@@ -59,7 +60,7 @@ const App = () => {
 
             <Route exact path='profile'>
               <Route index element={<Profile/>}/>
-              <Route exact path='employees' element={<Home/>}/>
+              <Route exact path='personals' element={<Home/>}/>
               <Route exact path='calendar' element={<ProfileCalendar/>}/>
               <Route exact path='summary' element={<Summary/>}/>
               <Route exact path='view' element={<ViewReport/>}/>
@@ -69,6 +70,7 @@ 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>
 
             <Route path="*" element={<Navigate to="/profile" replace/>}/>

src/pages/PartnerAddRequest/PartnerAddRequest.js

@@ -5,9 +5,13 @@ import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBre
 import {Footer} from "../../components/Footer/Footer";
 
 import arrowDown from "../../images/selectArrow.png"
+import processImg from "../../images/partnerAddRequestFirstImg.png"
+import reportImg from "../../images/partnerAddRequestSecondImg.png"
+import documentsImg from "../../images/partnerAddRequestThirdInfo.png"
+
+import {Navigate} from "react-router-dom";
 
 import './partnerAddRequest.scss'
-import {Navigate} from "react-router-dom";
 
 export const PartnerAddRequest = () => {
     if(localStorage.getItem('role_status') !== '18') {
@@ -76,7 +80,10 @@ export const PartnerAddRequest = () => {
                     </div>
                     <div className='partnerAddRequest__info'>
                         <div className='partnerAddRequest__info__block'>
-                            <h4>Процесс:</h4>
+                            <div className='partnerAddRequest__info__block__title'>
+                                <img src={processImg} alt='process' />
+                                <h4>Процесс:</h4>
+                            </div>
                             <p>
                                 При аутстафе мы предоставляем вам
                                 it-специалистов при этом они находятся в
@@ -87,7 +94,10 @@ export const PartnerAddRequest = () => {
                             </p>
                         </div>
                         <div className='partnerAddRequest__info__block'>
-                            <h4>Отчетность:</h4>
+                            <div className='partnerAddRequest__info__block__title'>
+                                <img src={reportImg} alt='reportImg' />
+                                <h4>Отчетность:</h4>
+                            </div>
                             <p>
                                 Вы можете обратиться к специалисту
                                 напрямую.
@@ -100,6 +110,17 @@ export const PartnerAddRequest = () => {
                                 и тестировщиков.
                             </p>
                         </div>
+                        <div className='partnerAddRequest__info__block'>
+                            <div className='partnerAddRequest__info__block__title'>
+                                <img src={documentsImg} alt='documentsImg' />
+                                <h4>Обмен <br/>документами:</h4>
+                            </div>
+                            <p>
+                                В Личном кабинете платформы
+                                получайте отчеты выполненных работ
+                                и счета на согласование и оплату
+                            </p>
+                        </div>
                     </div>
                 </div>
             </div>

src/pages/PartnerAddRequest/partnerAddRequest.scss

@@ -192,10 +192,10 @@
     background: #FFFFFF;
     border-radius: 12px;
     width: 100%;
-    padding: 90px 48px 200px 62px;
+    padding: 74px 48px 136px 62px;
     display: flex;
     flex-direction: column;
-    row-gap: 140px;
+    row-gap: 61px;
 
     @media (max-width: 1020px) {
       order: 1;
@@ -210,11 +210,22 @@
     }
 
     &__block {
-      h4 {
+      &__title {
-        color: #5B6871;
+        display: flex;
-        font-weight: 700;
+        align-items: center;
-        font-size: 20px;
+        margin-bottom: 15px;
-        line-height: 24px;
+
+        img {
+          margin-right: 19px;
+        }
+
+        h4 {
+          color: #5B6871;
+          font-weight: 700;
+          font-size: 20px;
+          line-height: 24px;
+          margin-bottom: 0;
+        }
       }
 
       p {
@@ -222,6 +233,13 @@
         font-weight: 400;
         font-size: 15px;
         line-height: 18px;
+        margin-bottom: 0;
+      }
+
+      &:last-child {
+        .partnerAddRequest__info__block__title {
+          margin-bottom: 35px;
+        }
       }
     }
   }

src/pages/PartnerBid/PartnerBid.js

@@ -9,6 +9,7 @@ import arrowSwitchDate from "../../images/arrowViewReport.png";
 import backEndImg from "../../images/QualificationInfo.png";
 import middle from "../../images/QualificationInfoMiddle.png";
 import personImg from "../../images/mokPerson.png"
+import deleteBtn from "../../images/deleteBtn.png"
 
 import './partnerBid.scss'
 
@@ -46,6 +47,10 @@ export const PartnerBid = () => {
                 <h2 className='partnerBid__title'>Страница заявки </h2>
                 <div className='partnerBid__qualification'>
                     <h3>PHP разработчик</h3>
+                    <div className='partnerBid__qualification__buttons'>
+                        <button>Редактировать</button>
+                        <img src={deleteBtn} alt='delete' />
+                    </div>
                 </div>
                 <div className='partnerBid__switcher'>
                     <div className='partnerBid__switcher__prev switchDate'>

src/pages/PartnerBid/partnerBid.scss

@@ -25,6 +25,9 @@
     border-radius: 12px;
     padding: 20px 37px;
     margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     h3 {
       color: #000000;
@@ -33,6 +36,31 @@
       line-height: 32px;
       margin-bottom: 0;
     }
+
+    &__buttons {
+      display: flex;
+      align-items: center;
+
+      button {
+        max-width: 168px;
+        width: 100%;
+        height: 48px;
+        background: #E1FCCF;
+        border-radius: 44px;
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 32px;
+        color: #000000;
+        padding: 8px 24px 10px 32px;
+        border: none;
+      }
+
+      img {
+        width: 44px;
+        height: 44px;
+        margin-left: 21px;
+      }
+    }
   }
 
   &__switcher {
@@ -63,7 +91,7 @@
     p {
       color: #000000;
       font-weight: 400;
-      font-size: 12px;
+      font-size: 15px;
       line-height: 32px;
       margin: 0 100px;
 

src/pages/PartnerPersonalInfo/PartnerPersonalInfo.js

@@ -0,0 +1,129 @@
+import React, {useState} from 'react';
+import {Link} from "react-router-dom";
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
+import {Footer} from "../../components/Footer/Footer";
+
+import BackEndImg from "../../images/PersonalBackEnd.png"
+import FrontendImg from "../../images/PersonalFrontend.png"
+import ArchitectureImg from "../../images/PersonalArchitecture.png"
+import DesignImg from "../../images/PersonalDesign.png"
+import TestImg from "../../images/PersonalTesters.png"
+import AdminImg from "../../images/PersonalAdmin.png"
+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 {Navigate} from "react-router-dom";
+
+import "./parthnerPersonalInfo.scss"
+
+export const PartnerPersonalInfo = () => {
+    if(localStorage.getItem('role_status') !== '18') {
+        return <Navigate to="/profile" replace/>
+    }
+
+    const [personalInfoItems] = useState([
+        {
+            title: 'Backend разработчики',
+            link: '/profile',
+            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+            available: true,
+            img: BackEndImg
+        },
+        {
+            title: 'Frontend разработчики',
+            link: '/profile',
+            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+            available: true,
+            img: FrontendImg
+        },
+        {
+            title: 'Архитектура проектов',
+            link: '/profile',
+            description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
+            available: true,
+            img: ArchitectureImg
+        },
+        {
+            title: 'Дизайн проектов',
+            link: '/profile',
+            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+            available: true,
+            img: DesignImg
+        },
+        {
+            title: 'Тестирование проектов',
+            link: '/profile',
+            description: 'SQL Postman TestRail Kibana Ручное тестирование',
+            available: false,
+            img: TestImg
+        },
+        {
+            title: 'Администрирование проектов',
+            link: '/profile',
+            description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
+            available: false,
+            img: AdminImg
+        },
+        {
+            title: 'Управление проектом',
+            link: '/profile',
+            description: 'Scrum Kanban Agile Miro CustDev',
+            available: false,
+            img: ManageImg
+        },
+        {
+            title: 'Копирайтинг проектов',
+            link: '/profile',
+            description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
+            available: false,
+            img: CopyImg
+        },
+        {
+            title: 'Реклама и SMM',
+            link: '/profile',
+            description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+            available: false,
+            img: SmmImg
+        },
+    ])
+    return (
+        <div className="infoPersonal">
+            <ProfileHeader />
+            <div className="container">
+                <ProfileBreadcrumbs links={[
+                    {name: 'Главная', link: '/profile'},
+                    {name: 'Данные моего персонала', link: '/profile/employees'},
+                ]}
+                />
+                <h2 className="infoPersonal__title">Данные персонала</h2>
+                <div className="infoPersonal__items">
+                    {personalInfoItems.map((item, index) => {
+                        return <Link to={item.link} className={item.available ? "infoPersonal__item item" : "infoPersonal__item item item__disable"}>
+                            <div className="item__title">
+                                <img src={item.img} alt={item.title} />
+                                <h4>{item.title}</h4>
+                            </div>
+                            <div className="item__info">
+                                <p>{item.description}</p>
+                                <div className='more'>
+                                    <img src={rightArrow} alt="arrow" />
+                                </div>
+                            </div>
+                            {!item.available &&
+                                <div className="item__disableHover">
+                                    <p>У вас нет персонала из категории</p>
+                                    <button>Подобрать</button>
+                                </div>
+                            }
+                        </Link>
+                    })}
+                </div>
+            </div>
+            <Footer/>
+        </div>
+    )
+}

src/pages/PartnerPersonalInfo/parthnerPersonalInfo.scss

@@ -0,0 +1,156 @@
+.infoPersonal {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;
+
+  &__title {
+    color: #000000;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 22px;
+  }
+
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 25px;
+    row-gap: 24px;
+    column-gap: 21px;
+  }
+
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    padding: 33px 32px 25px 28px;
+    width: 32%;
+    background: #FFFFFF;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    position: relative;
+
+    @media (max-width: 1098px) {
+      width: 48%;
+    }
+
+    @media (max-width: 650px) {
+      width: 100%;
+    }
+
+    &:hover {
+      box-shadow: 6px 5px 20px rgba(87, 98, 80, 0.21);
+      transform: scale(1.02);
+      text-decoration: none;
+    }
+
+    &__disable {
+      opacity: 0.5;
+
+      &:hover {
+        box-shadow: none;
+        transform: none;
+        opacity: 1;
+        background: #f8f8f8;
+
+        .item__info {
+          opacity: 0;
+        }
+
+        .item__disableHover {
+          opacity: 1;
+        }
+      }
+
+      &Hover {
+        position: absolute;
+        display: flex;
+        left: 0;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 13px 16px 21px;
+        border: 3px solid #52B709;
+        bottom: 0;
+        border-radius: 12px;
+        opacity: 0;
+        transition: all 0.5s ease;
+
+        p {
+          color: #000000;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 18px;
+          max-width: 140px;
+          margin-bottom: 0;
+        }
+
+        button {
+          width: 140px;
+          height: 50px;
+          border: none;
+          background: #52B709;
+          border-radius: 44px;
+          font-weight: 500;
+          font-size: 15px;
+          line-height: 32px;
+          color: #FFFFFF;
+        }
+      }
+    }
+
+    &__title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 27px;
+
+      h4 {
+        color: #000000;
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 22px;
+        margin-left: 18px;
+        max-width: 190px;
+        margin-bottom: 0;
+      }
+    }
+
+    &__info {
+      display: flex;
+      justify-content: space-between;
+
+      p {
+        max-width: 181px;
+        margin-bottom: 0;
+        color: #6F6F6F;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+      }
+
+      .more {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        background: #DDEEC6;
+        border-radius: 50px;
+      }
+    }
+  }
+
+
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
+
+    @media (max-width: 570px) {
+      margin-top: 0;
+    }
+  }
+
+  footer {
+    margin-top: 70px;
+  }
+}

src/pages/PartnerRequests/partnerRequests.scss

@@ -138,7 +138,7 @@
       h3 {
         color: #52B709;
         font-weight: 700;
-        font-size: 14px;
+        font-size: 17px;
         line-height: 24px;
         margin-bottom: 30px;
 
@@ -150,7 +150,7 @@
 
       p {
         font-weight: 400;
-        font-size: 12px;
+        font-size: 15px;
         line-height: 24px;
         color: #000000;
         margin-bottom: 25px;
@@ -163,12 +163,12 @@
 
       a {
         background: #52B709;
-        max-width: 150px;
+        max-width: 188px;
         border-radius: 44px;
-        height: 40px;
+        height: 52px;
         border: none;
         font-weight: 400;
-        font-size: 12px;
+        font-size: 15px;
         line-height: 32px;
         color: #FFFFFF;
         display: flex;

src/pages/Profile/Profile.js

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

src/pages/Tracker/tracker.scss

@@ -106,7 +106,7 @@
 
           h3 {
             font-weight: 700;
-            font-size: 16px;
+            font-size: 18px;
             line-height: 32px;
             color: #111112;
             margin-bottom: 10px;
@@ -172,12 +172,12 @@
         button {
           background: #52B709;
           border-radius: 44px;
-          max-width: 150px;
+          max-width: 188px;
-          height: 40px;
+          height: 50px;
           width: 100%;
           border: none;
           font-weight: 400;
-          font-size: 12px;
+          font-size: 15px;
           line-height: 32px;
           color: #FFFFFF;
           display: flex;
@@ -228,7 +228,7 @@
           h4 {
             color: #111112;
             font-weight: 700;
-            font-size: 16px;
+            font-size: 18px;
             line-height: 32px;
             margin-bottom: 0;
           }