partner-personal-area

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('partner')
+  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'>