Merge pull request #52 from apuc/partner-personal-area

Partner personal area

src/App.js

@@ -24,6 +24,7 @@ import {Payouts} from './pages/Payouts/Payouts'
 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 './fonts/stylesheet.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
@@ -38,8 +39,6 @@ const App = () => {
 
           <Routes>
 
-            <Route exact path='/' element={<Home/>}/>
-
             <Route exact path='/authdev' element={<AuthForDevelopers/>}/>
             <Route exact path='/auth' element={<AuthForPartners/>}/>
 
@@ -60,6 +59,7 @@ const App = () => {
 
             <Route exact path='profile'>
               <Route index element={<Profile/>}/>
+              <Route exact path='employees' element={<Home/>}/>
               <Route exact path='calendar' element={<ProfileCalendar/>}/>
               <Route exact path='summary' element={<Summary/>}/>
               <Route exact path='view' element={<ViewReport/>}/>
@@ -68,9 +68,10 @@ const App = () => {
               <Route exact path='settings' element={<Settings/>}/>
               <Route exact path='requests' element={<PartnerRequests/>}/>
               <Route exact path='add-request' element={<PartnerAddRequest/>}/>
+              <Route exact path='bid' element={<PartnerBid/>}/>
             </Route>
 
-            <Route path="*" element={<Navigate to="/" replace/>}/>
+            <Route path="*" element={<Navigate to="/profile" replace/>}/>
           </Routes>
         </Router>
       </>

src/components/AuthBox/AuthBox.js

@@ -77,6 +77,7 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
           localStorage.setItem('auth_token', res.access_token);
           localStorage.setItem('id', res.id);
           localStorage.setItem('cardId', res.card_id);
+          localStorage.setItem('role_status', res.status);
           localStorage.setItem(
               'access_token_expired_at',
               res.access_token_expired_at

src/components/Calendar/Calendar.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react'
 import {useSelector} from 'react-redux'
-import {Link, useNavigate} from 'react-router-dom'
+import {Link, Navigate, useNavigate} from 'react-router-dom'
 
 import CalendarComponent from './CalendarComponent'
 import {currentMonth} from './calendarHelper'
@@ -16,6 +16,9 @@ import {urlForLocal} from "../../helper";
 
 
 const Calendar = () => {
+  if(localStorage.getItem('role_status') !== '18') {
+    return <Navigate to="/profile" replace/>
+  }
 
   const candidateForCalendar = useSelector(selectCurrentCandidate);
 

src/components/Candidate/Candidate.js

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react'
-import {useParams, Link, useNavigate} from 'react-router-dom'
+import {useParams, Link, useNavigate, Navigate} from 'react-router-dom'
 import {useSelector, useDispatch} from 'react-redux'
 
 import SkillSection from '../SkillSection/SkillSection'
@@ -23,6 +23,9 @@ import {Header} from "../Header/Header";
 
 
 const Candidate = () => {
+  if(localStorage.getItem('role_status') !== '18') {
+    return <Navigate to="/profile" replace/>
+  }
   const {id: candidateId} = useParams();
 
   const navigate = useNavigate();

src/components/ProfileBreadcrumbs/ProfileBreadcrumbs.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import {Link} from "react-router-dom";
+
+import './profileBreadcrumbs.scss'
+
+export const ProfileBreadcrumbs = ({ links }) => {
+    return (
+        <div className='profileBreadcrumbs'>
+            {links.map((link, index) => {
+                return <Link key={index} to={link.link}>{link.name}</Link>
+            })
+
+            }
+        </div>
+    )
+}

src/components/ProfileBreadcrumbs/profileBreadcrumbs.scss

@@ -0,0 +1,50 @@
+.profileBreadcrumbs {
+  display: flex;
+  margin-bottom: 12px;
+
+  @media (max-width: 570px) {
+    margin-top: 15px;
+  }
+
+  a {
+    color: #5B6871;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    transition: 0.3s all ease;
+    position: relative;
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+
+    @media (max-width: 525px) {
+      font-size: 10px;
+    }
+
+    @media (max-width: 455px) {
+      font-size: 9px;
+    }
+
+    &:hover {
+      text-decoration: none;
+      color: #000000;
+    }
+
+    &:after {
+      content: '';
+      background-image: url("../../images/BreadcrumbsArrow.png");
+      background-repeat: no-repeat;
+      width: 7px;
+      height:10px;
+      position: absolute;
+      right: -14px;
+    }
+
+    &:last-child {
+      margin-right: 0;
+      &:after {
+        background: none;
+      }
+    }
+  }
+}

src/components/ProfileCalendar/ProfileCalendar.js

@@ -2,12 +2,13 @@ import React, { useEffect, useState } from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 
 import {getReports} from '../Calendar/calendarHelper'
-import { Link } from 'react-router-dom'
+import {Link, Navigate} from 'react-router-dom'
 import moment from "moment";
 
 import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
 import {Loader} from "../Loader/Loader";
 import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import { Footer } from '../Footer/Footer'
 
 import {urlForLocal} from "../../helper";
@@ -21,6 +22,9 @@ import './profileCalendar.scss'
 
 
 export const ProfileCalendar = () => {
+    if(localStorage.getItem('role_status') === '18') {
+        return <Navigate to="/profile" replace/>
+    }
     const dispatch = useDispatch();
     const profileInfo = useSelector(getProfileInfo)
     const requestDates = useSelector(getRequestDates)
@@ -62,6 +66,7 @@ export const ProfileCalendar = () => {
         <div className='profile__calendar'>
             <ProfileHeader/>
             <div className='container'>
+                <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},{name: 'Ваша отчетность', link: '/profile/calendar'}]} />
                 <h2 className='summary__title'>Ваши отчеты</h2>
                 <div className='summary__info'>
                     <div className='summary__person'>

src/components/ProfileHeader/ProfileHeader.js

@@ -21,7 +21,7 @@ export const ProfileHeader = () => {
 
   const userRole = useSelector(getRole);
   const profileInfo = useSelector(getProfileInfo);
-  const [user] = useState('developer')
+  const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer')
   const [navInfo] = useState({
     developer: [
       {

src/components/ReportForm/ReportForm.js

@@ -1,15 +1,15 @@
 import React, {useState, useEffect} from 'react'
 import {useSelector} from 'react-redux'
-import {Link, useNavigate} from 'react-router-dom'
+import {Link, Navigate, useNavigate} from 'react-router-dom'
 import DatePicker, { registerLocale } from "react-datepicker"
 import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper'
 import ru from "date-fns/locale/ru"
 registerLocale("ru", ru);
 
 import {Loader} from '../Loader/Loader'
-import {currentMonthAndDay} from '../Calendar/calendarHelper'
 import {Footer} from "../Footer/Footer";
 import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 
 import {apiRequest} from "../../api/request";
 
@@ -25,6 +25,9 @@ import './reportForm.scss'
 import "react-datepicker/dist/react-datepicker.css";
 
 const ReportForm = () => {
+  if(localStorage.getItem('role_status') === '18') {
+    return <Navigate to="/profile" replace/>
+  }
   const navigate= useNavigate();
   const reportDate = useSelector(getReportDate);
 
@@ -96,6 +99,10 @@ const ReportForm = () => {
       <section className='report-form'>
         <ProfileHeader/>
         <div className='container'>
+          <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},
+            {name: 'Ваша отчетность', link: '/profile/calendar'},
+            {name: 'Страница добавления нового отчета', link: '/report'}]}
+          />
           <h2 className='summary__title'>Ваши отчеты - <span>добавить отчет</span></h2>
           <div>
             <div className='report__head'>

src/pages/AuthForPartners/AuthForPartners.js

@@ -22,7 +22,7 @@ const AuthForPartners = () => {
 
   useEffect(()=> {
     if (isAuth || getToken) {
-      navigate('/')
+      navigate('/profile')
     }
   }, [getToken]);
 

src/pages/FormPage/FormPage.js

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
-import {useParams, useNavigate} from 'react-router-dom'
+import {useParams, useNavigate, Navigate} from 'react-router-dom'
 import SVG from 'react-inlinesvg'
 
 import Form from '../../components/Form/Form'
@@ -22,6 +22,9 @@ import {urlForLocal} from "../../helper";
 import './formPage.scss'
 
 const FormPage = () => {
+  if(localStorage.getItem('role_status') !== '18') {
+    return <Navigate to="/profile" replace/>
+  }
   const params = useParams();
   const navigate = useNavigate();
   const dispatch = useDispatch();

src/pages/Home/Home.js

@@ -9,9 +9,13 @@ import {profiles, tags} from '../../redux/outstaffingSlice'
 
 import {Header} from "../../components/Header/Header";
 import {apiRequest} from "../../api/request";
+import {Navigate} from "react-router-dom";
 
 
 const Home = () => {
+  if(localStorage.getItem('role_status') !== '18') {
+    return <Navigate to="/profile" replace/>
+  }
 
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [index, setIndex] = useState(4);

src/pages/PartnerAddRequest/PartnerAddRequest.js

@@ -1,17 +1,28 @@
 import React from 'react';
 
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {Footer} from "../../components/Footer/Footer";
 
 import arrowDown from "../../images/selectArrow.png"
 
 import './partnerAddRequest.scss'
+import {Navigate} from "react-router-dom";
 
 export const PartnerAddRequest = () => {
+    if(localStorage.getItem('role_status') !== '18') {
+        return <Navigate to="/profile" replace/>
+    }
     return (
         <div className='partnerAddRequest'>
             <ProfileHeader />
             <div className='container'>
+                <ProfileBreadcrumbs links={[
+                    {name: 'Главная', link: '/profile'},
+                    {name: 'Запросы и открытые позиции', link: '/profile/requests'},
+                    {name: 'Создание новой заявки', link: '/profile/add-request'}
+                ]}
+                />
                 <h2 className='partnerAddRequest__title'>Страница добавления заявки</h2>
                 <div className='partnerAddRequest__section'>
                     <div className='partnerAddRequest__form'>

src/pages/PartnerBid/PartnerBid.js

@@ -0,0 +1,129 @@
+import React, {useState} from 'react';
+import {Link, Navigate} from "react-router-dom";
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
+import {Footer} from "../../components/Footer/Footer";
+
+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 './partnerBid.scss'
+
+export const PartnerBid = () => {
+    if(localStorage.getItem('role_status') !== '18') {
+        return <Navigate to="/profile" replace/>
+    }
+    const [mokPersons] = useState([
+        {
+            name: 'Дмитрий, PHP Back end - разработчик, Middle',
+            link: '',
+            img: personImg
+        },
+        {
+            name: 'Дмитрий, PHP Back end - разработчик, Middle',
+            link: '',
+            img: personImg
+        },
+        {
+            name: 'Дмитрий, PHP Back end - разработчик, Middle',
+            link: '',
+            img: personImg
+        }
+    ])
+    return (
+        <div className='partnerBid'>
+            <ProfileHeader />
+            <div className='container'>
+                <ProfileBreadcrumbs links={[
+                    {name: 'Главная', link: '/profile'},
+                    {name: 'Запросы и открытые позиции', link: '/profile/requests'},
+                    {name: 'Просмотр заявки - PHP разработчик', link: '/profile/bid'}
+                ]}
+                />
+                <h2 className='partnerBid__title'>Страница заявки </h2>
+                <div className='partnerBid__qualification'>
+                    <h3>PHP разработчик</h3>
+                </div>
+                <div className='partnerBid__switcher'>
+                    <div className='partnerBid__switcher__prev switchDate'>
+                        <img src={arrowSwitchDate} alt='arrow'/>
+                    </div>
+                    <p>Дата заявки : 19 декабря 2022 года </p>
+                    <div className='partnerBid__switcher__next switchDate'>
+                        <img src={arrowSwitchDate} alt='arrow'/>
+                    </div>
+                </div>
+                <div className='table__wrapper'>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th><p>Требования к стеку разработчика</p></th>
+                                <th><p>Квалификация</p></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <p>
+                                        PHP приветствуется аккуратность в коде. MySQL - умение писать запросы к MySQL,
+                                        понимание как происходит запрос. Средний уровень: AJAX, JSON, общее понимание;
+                                        CSS/CSS3, HTML, Bootstrap;
+                                    </p>
+                                </td>
+                                <td>
+                                    <div className='qualification__info'>
+                                        <div className='img__wrapper'>
+                                            <img src={backEndImg} alt='backEndImg' />
+                                        </div>
+                                        <p>Backend разработчик</p>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <p>
+                                        Знание современных фреймворков Laravel, Yii 2, FuelPHP, Симфони;
+                                        Знания по разработке REST API;
+                                        Знание PHP,HTML,CSS,MySQL,Pyhton,JavaScript.
+                                    </p>
+                                </td>
+                                <td>
+                                    <div className='qualification__info'>
+                                        <div className='img__wrapper'>
+                                            <img src={middle} alt='middleImg' />
+                                        </div>
+                                        <p className='middle'>Средний<br/>(Middle)</p>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div className='partnerBid__suitable'>
+                    <div className='partnerBid__suitable__title'>
+                        <p>Подходящие сотрудники по запросу</p>
+                    </div>
+                    <div className='partnerBid__suitable__persons'>
+                        {mokPersons.map((person, index) => {
+                            return <div key={index} className='partnerBid__suitable__person'>
+                                        <img src={person.img} alt='avatar' />
+                                        <p>{person.name}</p>
+                                        <Link className='partnerBid__suitable__person__more' to={person.link}>
+                                            Подробнее
+                                        </Link>
+                                        <div className='partnerBid__suitable__person__info'>
+
+                                        </div>
+                                    </div>
+                        })
+                        }
+                    </div>
+                </div>
+            </div>
+            <Footer/>
+        </div>
+    )
+};

src/pages/PartnerBid/partnerBid.scss

@@ -0,0 +1,440 @@
+.partnerBid {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;
+
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
+
+    @media (max-width: 570px) {
+      margin-top: 0;
+    }
+  }
+
+  &__title {
+    color: #000000;
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 32px;
+  }
+
+  &__qualification {
+    background: #FFFFFF;
+    border-radius: 12px;
+    padding: 20px 37px;
+    margin-top: 20px;
+
+    h3 {
+      color: #000000;
+      font-weight: 500;
+      font-size: 22px;
+      line-height: 32px;
+      margin-bottom: 0;
+    }
+  }
+
+  &__switcher {
+    display: flex;
+    margin: 30px 0;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 550px) {
+      justify-content: space-between;
+    }
+
+    .switchDate {
+      width: 48px;
+      height: 48px;
+      background: #8DC63F;
+      border-radius: 50px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    &__prev {
+      transform: rotate(180deg);
+    }
+
+    p {
+      color: #000000;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 32px;
+      margin: 0 100px;
+
+      @media (max-width: 550px) {
+        margin: 0;
+      }
+    }
+  }
+
+  .table__wrapper {
+    margin: 0 -28px;
+    overflow: hidden;
+    position: relative;
+
+    @media (max-width: 1205px) {
+      margin: 0;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 28px 0;
+
+      @media (max-width: 1205px) {
+        display: grid;
+        border-collapse: collapse;
+      }
+
+      thead {
+
+        @media (max-width: 1205px) {
+          display: grid;
+        }
+        tr {
+
+          @media (max-width: 1205px) {
+            display: grid;
+            grid-template-columns: 74% calc(26% - 28px);
+            column-gap: 28px;
+          }
+
+          @media (max-width: 900px) {
+            grid-template-columns: 65% calc(35% - 28px);
+          }
+
+          @media (max-width: 515px) {
+            grid-template-columns: 65% calc(35% - 10px);
+            column-gap: 10px;
+          }
+
+          th {
+            background: white;
+            border-radius: 12px 12px 0 0;
+            font-weight: 500;
+            font-size: 22px;
+            line-height: 32px;
+
+            &:first-child {
+              padding: 32px 37px;
+
+
+              @media (max-width: 640px) {
+                padding: 15px;
+              }
+            }
+
+            &:last-child {
+              padding: 32px 50px 32px 48px;
+
+              @media (max-width: 640px) {
+                padding: 15px;
+              }
+            }
+
+            p {
+              margin-bottom: 0;
+            }
+
+            @media (max-width: 1000px) {
+              font-size: 15px;
+              line-height: 20px;
+              text-align: center;
+            }
+
+            @media (max-width: 515px) {
+              font-size: 12px;
+            }
+          }
+        }
+      }
+
+      tbody {
+        @media (max-width: 1205px) {
+          display: grid;
+        }
+        tr {
+
+          @media (max-width: 1205px) {
+            display: grid;
+            grid-template-columns: 74% calc(26% - 28px);
+            column-gap: 28px;
+          }
+
+          @media (max-width: 900px) {
+            grid-template-columns: 65% calc(35% - 28px);
+          }
+
+          @media (max-width: 515px) {
+            column-gap: 10px;
+            grid-template-columns: 65% calc(35% - 10px);
+          }
+          td {
+            background: white;
+            p {
+              margin-bottom: 0;
+              color: #000000;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 24px;
+
+              @media (max-width: 515px) {
+                font-size: 12px;
+                line-height: 18px;
+              }
+
+              @media (max-width: 450px) {
+                font-size: 10px;
+              }
+            }
+            &:first-child {
+              padding: 0 27px 35px 39px;
+
+              @media (max-width: 580px) {
+                padding: 15px;
+              }
+            }
+
+            &:last-child {
+              padding: 0 45px 35px;
+
+              @media (max-width: 580px) {
+                padding: 15px;
+              }
+            }
+
+            .qualification__info {
+              display: flex;
+              align-items: center;
+
+              @media (max-width: 1000px) {
+                flex-direction: column;
+                row-gap: 5px;
+
+                p {
+                  margin: 0 !important;
+                  text-align: center;
+                }
+              }
+
+              .img__wrapper {
+                min-width: 48px;
+                height: 48px;
+                background: #8DC63F;
+                border-radius: 50px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                @media (max-width: 515px) {
+                  min-width: 25px;
+                  height: 25px;
+
+                  img {
+                    width: 17px;
+                    height: 17px;
+                  }
+                }
+              }
+
+              p {
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 18px;
+                margin-left: 25px;
+
+                @media (max-width: 515px) {
+                  font-size: 12px;
+                  line-height: 18px;
+                }
+              }
+
+              .middle {
+                color: #406128;
+                font-weight: 900;
+                font-size: 14px;
+                line-height: 18px;
+
+                @media (max-width: 515px) {
+                  font-size: 12px;
+                  line-height: 18px;
+                }
+              }
+            }
+          }
+
+          &:last-child {
+            td {
+              border-radius: 0 0 12px 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &__suitable {
+    &__title {
+      background: #E1FCCF;
+      border-radius: 12px 12px 0px 0px;
+      margin-top: 48px;
+      padding: 18px 37px;
+      position: relative;
+
+      p {
+        color: #000000;
+        font-weight: 500;
+        font-size: 22px;
+        line-height: 32px;
+
+        @media (max-width: 540px) {
+          font-size: 15px;
+          height: 20px;
+        }
+      }
+    }
+
+    &__persons {
+      display: flex;
+      flex-direction: column;
+      row-gap: 18px;
+      position: relative;
+      top: -15px;
+    }
+
+    &__person {
+      display: flex;
+      padding: 21px 45px 19px;
+      align-items: center;
+      background: #FFFFFF;
+      border-radius: 12px;
+
+      img {
+        width: 88px;
+        height: 88px;
+      }
+
+      p {
+        color: #000000;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 32px;
+        margin-left: 60px;
+        position: relative;
+
+        &:after {
+          content: "";
+          position: absolute;
+          background: #52B709;
+          border-radius: 12px;
+          width: 70%;
+          height: 8px;
+          bottom: -14px;
+          left: 0;
+        }
+      }
+
+      &__more {
+        padding: 9px 45px;
+        background: #52B709;
+        border-radius: 44px;
+        color: #FFFFFF;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 32px;
+        margin-left: 200px;
+
+        &:hover {
+          color: white;
+          text-decoration: none;
+        }
+      }
+
+      &__info {
+        width: 24px;
+        height: 24px;
+        box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
+        border-radius: 6px;
+        border: 1px solid #DDDDDD;
+        cursor: pointer;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 60px;
+
+        &:before {
+          content: "...";
+          color: #6F6F6F;
+          font-size: 25px;
+          position: relative;
+          top: -6px;
+        }
+      }
+
+      @media (max-width: 1100px) {
+        justify-content: space-between;
+        p {
+          margin-left: 0;
+        }
+
+        &__more {
+          margin-left: 0;
+        }
+
+        &__info {
+          margin-left: 0;
+        }
+      }
+
+      @media (max-width: 825px) {
+        padding: 15px;
+      }
+
+      @media (max-width: 750px) {
+        p {
+          max-width: 220px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          margin-bottom: 0;
+        }
+      }
+
+      @media (max-width: 575px) {
+        img {
+          width: 35px;
+          height: 35px;
+        }
+      }
+
+      @media (max-width: 630px) {
+        &__more {
+          padding: 5px 20px;
+        }
+      }
+
+      @media (max-width: 510px) {
+        p {
+          font-size: 12px;
+          max-width: 150px;
+        }
+
+        &__more {
+          font-size: 12px;
+          padding: 2px 10px;
+        }
+      }
+    }
+  }
+
+  footer {
+    margin-top: 70px;
+  }
+}

src/pages/PartnerRequests/PartnerRequests.js

@@ -1,12 +1,16 @@
 import React, {useState} from 'react';
-import {Link} from "react-router-dom";
+import {Link, Navigate} from "react-router-dom";
 
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {Footer} from "../../components/Footer/Footer";
 
 import './partnerRequests.scss'
 
 export const PartnerRequests = () => {
+    if(localStorage.getItem('role_status') !== '18') {
+        return <Navigate to="/profile" replace/>
+    }
     const [items] = useState([
         {
             name: 'PHP разработчик ',
@@ -29,12 +33,17 @@ export const PartnerRequests = () => {
         <div className='partnerRequests'>
             <ProfileHeader />
             <div className='container'>
+                <ProfileBreadcrumbs links={[
+                    {name: 'Главная', link: '/profile'},
+                    {name: 'Запросы и открытые позиции', link: '/profile/requests'}
+                ]}
+                />
                 <h2 className='partnerRequests__title'>Запросы</h2>
                 <div className='partnerRequests__section'>
                     <div className='partnerRequests__section__items'>
                         {
                             items.map((item, index) => {
-                                return <Link key={index} to={''} className='partnerRequests__section__item'>
+                                return <Link key={index} to={'/profile/bid'} className='partnerRequests__section__item'>
                                             <p className='partnerRequests__section__item__name'>
                                                 {item.name}
                                             </p>

src/pages/Profile/Profile.js

@@ -3,6 +3,7 @@ import {useSelector} from "react-redux";
 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 {getProfileInfo} from "../../redux/outstaffingSlice";
@@ -22,7 +23,7 @@ import './profile.scss'
 export const Profile = () => {
 
   const profileInfo = useSelector(getProfileInfo);
-  const [user] = useState('developer')
+  const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer')
   const [profileItemsInfo] = useState({
     developer: [
       {
@@ -94,6 +95,7 @@ export const Profile = () => {
       <div className='profile'>
         <ProfileHeader/>
         <div className='container'>
+          <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'}]} />
           <h2 className='profile__title'>
             {user === 'developer' ?
                 <span><p>Добрый день,&nbsp;</p>{profileInfo.fio}</span>

src/pages/Summary/Summary.js

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {useSelector} from "react-redux";
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
 import {getProfileInfo} from "../../redux/outstaffingSlice";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {Footer} from '../../components/Footer/Footer'
 import {transformHtml, urlForLocal} from "../../helper";
 
@@ -11,8 +12,12 @@ import gitImgItem from "../../images/gitItemImg.png"
 
 import './summary.scss'
 import {apiRequest} from "../../api/request";
+import {Navigate} from "react-router-dom";
 
 export const Summary = () => {
+    if(localStorage.getItem('role_status') === '18') {
+        return <Navigate to="/profile" replace/>
+    }
   const profileInfo = useSelector(getProfileInfo);
   const [openGit, setOpenGit] = useState(false);
   const [gitInfo, setGitInfo] = useState([]);
@@ -26,6 +31,11 @@ export const Summary = () => {
         <ProfileHeader/>
         <div className='container'>
           <div className='summary__content'>
+              <ProfileBreadcrumbs links={[
+                  {name: 'Главная', link: '/profile'},
+                  {name: 'Данные и резюме', link: '/profile/summary'}
+              ]}
+              />
             <h2 className='summary__title'>Ваше резюме {openGit && <span>- Git</span>}</h2>
             {openGit && <div className='summary__back' onClick={() => setOpenGit(false)}>
               <img src={arrow} alt='arrow'/>

src/pages/ViewReport/ViewReport.js

@@ -1,11 +1,12 @@
 import React, {useEffect, useState} from 'react'
-import {Link} from "react-router-dom";
+import {Link, Navigate} from "react-router-dom";
 
 import {useSelector} from "react-redux";
 import {getReportDate} from "../../redux/reportSlice";
 
 import {Loader} from "../../components/Loader/Loader"
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {Footer} from "../../components/Footer/Footer";
 
 import arrow from "../../images/right-arrow.png";
@@ -16,6 +17,9 @@ import {getCorrectDate, getCreatedDate} from '../../components/Calendar/calendar
 import './viewReport.scss'
 
 export const ViewReport = () => {
+    if(localStorage.getItem('role_status') === '18') {
+        return <Navigate to="/profile" replace/>
+    }
     const reportDate = useSelector(getReportDate);
 
     const [taskText, setTaskText] = useState([]);
@@ -76,6 +80,10 @@ export const ViewReport = () => {
             <ProfileHeader/>
             <div className='container'>
                 <div className='viewReport__info'>
+                    <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},
+                        {name: 'Ваша отчетность', link: '/profile/calendar'},
+                        {name: 'Просмотр отчета за день', link: '/profile/view'}]}
+                    />
                     <h2 className='viewReport__title'>Ваши отчеты - <span>просмотр отчета за день</span></h2>
                     <Link className='viewReport__back' to={`/profile/calendar`}>
                         <img src={arrow} alt='arrow'/><p>Вернуться</p>