quiz + lk-candidate

2023-04-19 20:22:06 +03:00 · 2023-04-19 20:22:06 +03:00 · f2d7730214
commit f2d7730214
parent 802e48eb1f
60 changed files with 2272 additions and 812 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -48,6 +48,7 @@
        "react-select": "^5.7.0",
        "react-slick": "^0.29.0",
        "react-syntax-highlighter": "^15.4.5",
+        "react-timer-hook": "^3.0.5",
        "react-yandex-metrika": "^2.6.0",
        "redux-devtools-extension": "^2.13.9",
        "resolve": "1.18.1",
@ -21571,6 +21572,15 @@
        "react": ">= 0.14.0"
      }
    },
+    "node_modules/react-timer-hook": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/react-timer-hook/-/react-timer-hook-3.0.5.tgz",
+      "integrity": "sha512-n+98SdmYvui2ne3KyWb3Ldu4k0NYQa3g/VzW6VEIfZJ8GAk/jJsIY700M8Nd2vNSTj05c7wKyQfJBqZ0x7zfiA==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
    "node_modules/react-transition-group": {
      "version": "4.4.5",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
--- a/package.json
+++ b/package.json
@ -44,6 +44,7 @@
    "react-select": "^5.7.0",
    "react-slick": "^0.29.0",
    "react-syntax-highlighter": "^15.4.5",
+    "react-timer-hook": "^3.0.5",
    "react-yandex-metrika": "^2.6.0",
    "redux-devtools-extension": "^2.13.9",
    "resolve": "1.18.1",
--- a/src/App.js
+++ b/src/App.js
@ -12,10 +12,7 @@ import {ProfileCalendar} from "./components/ProfileCalendar/ProfileCalendar";
 import FormPage from './pages/FormPage/FormPage.js'
 import SingleReportPage from './pages/SingleReportPage/SingleReportPage'
 import {QuizPage} from './pages/quiz/QuizPage'
-import {InterjacentPage} from './pages/quiz/InterjacentPage'
-import {QuizTestPage} from './pages/quiz/QuizTestPage'
-import {InstructionPage} from './pages/quiz/InstructionPage'
-import {ResultPage} from './pages/quiz/ResultPage'
+import {QuizReportPage} from './pages/quiz/QuizReportPage'
 import {Profile} from './pages/Profile/Profile.js'
 import {Summary} from './pages/Summary/Summary'
 import {ViewReport} from './pages/ViewReport/ViewReport'
@ -30,9 +27,11 @@ import {PartnerTreaties} from "./pages/PartnerTreaties/PartnerTreaties";
 import {PartnerEmployees} from "./pages/PartnerEmployees/PartnerEmployees";
 import {AuthForCandidate} from "./pages/AuthForCandidate/AuthForCandidate";
 import {RegistrationForCandidate} from "./pages/RegistrationForCandidate/RegistrationForCandidate";
-
+import './assets/global.scss'
 import './fonts/stylesheet.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
+import { ProfileCandidate } from './pages/ProfileCandidate/ProfileCandidate';
+import { PassingTests } from './pages/quiz/PassingTests';



@ -58,10 +57,8 @@ const App = () => {

            <Route exact path='quiz'>
              <Route index element={<QuizPage/>}/>            
-              <Route exact path='interjacent' element={<InterjacentPage/>}/>
-              <Route exact path='test' element={<QuizTestPage/>}/>
-              <Route exact path='instruction' element={<InstructionPage/>}/>
-              <Route exact path='result' element={<ResultPage/>}/>
+              <Route exact path='test' element={<PassingTests />}/>              
+              <Route exact path='report' element={<QuizReportPage/>}/>
            </Route>

            <Route exact path='profile'>
@ -80,6 +77,9 @@ const App = () => {
              <Route exact path='treaties' element={<PartnerTreaties/>}/>
              <Route exact path='categories/employees' element={<PartnerEmployees/>}/>
            </Route>
+            <Route exact path='profile-candidate/:id'>
+              <Route index element={<ProfileCandidate />}/>
+            </Route>

            <Route path="*" element={<Navigate to="/auth" replace/>}/>
          </Routes>
--- a/src/assets/global.scss
+++ b/src/assets/global.scss
@ -0,0 +1,25 @@
+a:hover {
+  text-decoration: none !important;
+}
+.main-title {
+  font-weight: 700;
+  font-size: 22px;
+  line-height: 145%;
+  color: #000000;
+  word-break: break-word;
+  span {
+    color: #52b709;
+  }
+}
+.btn-green {
+  background: #52b709;
+  border-radius: 44px;
+  width: 100%;
+  border: none;
+  font-weight: 400;
+  line-height: 178%;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/src/components/CardControl/CardControl.js
+++ b/src/components/CardControl/CardControl.js
@ -0,0 +1,20 @@
+import React from 'react'
+import rightArrow from "../../images/arrowRight.png"
+import { Link } from 'react-router-dom'
+import './CardControl.scss'
+
+export const CardControl = ({title,path,description, img}) => {
+	return (
+	<Link to={`/${path}`} className='control-card'>
+		<div className='control-card__about'>
+			<img src={img} alt='itemImg' />
+			<h3>{title}</h3>
+		</div>
+		<div className='control-card__info'>
+			<p dangerouslySetInnerHTML={{ __html: description }}></p>
+			<div className='control-card__infoLink'>
+				<img src={rightArrow} alt='arrow' />
+			</div>
+		</div>
+	</Link>)
+}
--- a/src/components/CardControl/CardControl.scss
+++ b/src/components/CardControl/CardControl.scss
@ -0,0 +1,73 @@
+.control-card{
+	max-width: 353px;
+	width: 100%;
+	padding: 35px 45px 15px 30px;
+	background: #FFFFFF;
+	border-radius: 12px;
+	text-decoration: none;
+	cursor: pointer;
+	transition: all 0.3s ease;
+
+	&:hover {
+	  box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+	  transform: scale(1.02);
+	}
+
+	@media (max-width: 1175px) {
+	  width: 48%;
+	  max-width: none;
+	}
+
+	@media (max-width: 925px) {
+	  width: 100%;
+	  padding: 15px 25px;
+	}
+
+	&__about {
+	  display: flex;
+	  column-gap: 20px;
+	  align-items: center;
+	  margin-bottom: 30px;
+
+	  @media (max-width: 925px) {
+		 margin-bottom: 15px;
+	  }
+
+	  h3 {
+		 color: #000000;
+		 font-weight: 500;
+		 font-size: 18px;
+		 line-height: 22px;
+		 max-width: 125px;
+		 margin-bottom: 0;
+	  }
+	}
+
+	&__info {
+	  display: flex;
+	  justify-content: space-between;
+	  align-items: center;
+
+	  p {
+		 font-weight: 700;
+		 font-size: 12px;
+		 line-height: 20px;
+		 color: #000000;
+		 margin-bottom: 0;
+
+		 span {
+			color: #52B709;
+			font-weight: 700;
+		 }
+	  }
+	  &Link {
+		 width: 48px;
+		 height: 48px;
+		 background: #DDEEC6;
+		 border-radius: 50px;
+		 display: flex;
+		 justify-content: center;
+		 align-items: center;
+	  }
+	}
+ }
--- a/src/components/CategoriesItem/categoriesItem.scss
+++ b/src/components/CategoriesItem/categoriesItem.scss
@ -2,7 +2,6 @@
  display: flex;
  flex-direction: column;
  padding: 33px 32px 25px 28px;
-  width: 32%;
  background: #FFFFFF;
  border-radius: 12px;
  transition: all 0.3s ease;
--- a/src/components/Footer/footer.scss
+++ b/src/components/Footer/footer.scss
@ -1,5 +1,5 @@
 .footer {
-  margin-top: -3rem;
+  //margin-top: -3rem;

  &__left {
    display: flex;
@ -74,7 +74,7 @@
@media (max-width: 575.98px) {
  .footer {
    &__left {
-      margin-top: 80px;
+    //  margin-top: 80px;
    }

    &__description {
--- a/src/components/Navigation/Navigation.js
+++ b/src/components/Navigation/Navigation.js
@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react'
+import { NavLink } from 'react-router-dom'
+import { urlForLocal } from '../../helper'
+import { apiRequest } from '../../api/request';
+import { useDispatch, useSelector } from 'react-redux';
+import { getProfileInfo } from '../../redux/outstaffingSlice';
+
+export const Navigation = () => {
+	const dispatch = useDispatch();
+ 
+ 
+	const profileInfo = useSelector(getProfileInfo);
+	const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer')
+	const [navInfo] = useState({
+	  developer: [
+		 {
+			path: '/summary',
+			name: 'Резюме'
+		 },
+		 {
+			path: '/calendar',
+			name: 'Отчетность'
+		 },
+		 {
+			path: '/tracker',
+			name: 'Трекер'
+		 },
+		 {
+			path: '/payouts',
+			name: 'Выплаты'
+		 },
+		 {
+			path: '/settings',
+			name: 'Настройки'
+		 },
+	  ],
+	  partner: [
+		 {
+			path: '/catalog',
+			name: 'Каталог'
+		 },
+		 {
+			path: '/requests',
+			name: 'Запросы'
+		 },
+		 {
+			path: '/categories',
+			name: 'Персонал'
+		 },
+		 {
+			path: '/tracker',
+			name: 'Трекер'
+		 },
+		 {
+			path: '/treaties',
+			name: 'Договора'
+		 },
+		 {
+			path: '/settings',
+			name: 'Настройки'
+		 },
+	  ]
+	})
+  
+	useEffect(() => {
+	  if (localStorage.getItem('role_status') === '18') {
+		 return
+	  }
+	  apiRequest(`/profile/${localStorage.getItem('cardId')}`)
+			.then((profileInfo) =>
+				 dispatch(setProfileInfo(profileInfo))
+			);
+ 
+	}, [dispatch]);
+ 
+	return (
+		<div className='profileHeader__info'>
+			<div className='profileHeader__container'>
+				<nav className='profileHeader__nav'>
+					{
+						navInfo[user].map((link, index) => {
+							return <NavLink key={index} end to={`/profile${link.path}`}>{link.name}</NavLink>
+						})
+					}
+				</nav>
+
+				<div className='profileHeader__personalInfo'>
+					<h3 className='profileHeader__personalInfoName'>
+						{user === 'developer' ?
+							profileInfo?.fio :
+							''
+						}
+					</h3>
+					<NavLink end to={'/profile'}>
+						<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar' />
+					</NavLink>
+				</div>
+			</div>
+		</div>
+	)
+}
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
--- a/src/components/ProfileCalendar/ProfileCalendar.js
+++ b/src/components/ProfileCalendar/ProfileCalendar.js
@ -19,6 +19,7 @@ import {getRequestDates, setReportDate, setRequestDate} from "../../redux/report

 import 'moment/locale/ru'
 import './profileCalendar.scss'
+import { Navigation } from '../Navigation/Navigation';


 export const ProfileCalendar = () => {
@ -65,6 +66,7 @@ export const ProfileCalendar = () => {
    return (
        <div className='profile__calendar'>
            <ProfileHeader/>
+            <Navigation />
            <div className='container'>
                <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},{name: 'Ваша отчетность', link: '/profile/calendar'}]} />
                <h2 className='summary__title'>Ваши отчеты</h2>
--- a/src/components/ProfileHeader/ProfileHeader.js
+++ b/src/components/ProfileHeader/ProfileHeader.js
@ -10,6 +10,7 @@ import {getRole} from "../../redux/roleSlice";
 import {urlForLocal} from "../../helper";

 import './profileHeader.scss'
+import { Navigation } from '../Navigation/Navigation';



@ -20,58 +21,8 @@ export const ProfileHeader = () => {


  const userRole = useSelector(getRole);
-  const profileInfo = useSelector(getProfileInfo);
  const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer')
-  const [navInfo] = useState({
-    developer: [
-      {
-        path: '/summary',
-        name: 'Резюме'
-      },
-      {
-        path: '/calendar',
-        name: 'Отчетность'
-      },
-      {
-        path: '/tracker',
-        name: 'Трекер'
-      },
-      {
-        path: '/payouts',
-        name: 'Выплаты'
-      },
-      {
-        path: '/settings',
-        name: 'Настройки'
-      },
-    ],
-    partner: [
-      {
-        path: '/catalog',
-        name: 'Каталог'
-      },
-      {
-        path: '/requests',
-        name: 'Запросы'
-      },
-      {
-        path: '/categories',
-        name: 'Персонал'
-      },
-      {
-        path: '/tracker',
-        name: 'Трекер'
-      },
-      {
-        path: '/treaties',
-        name: 'Договора'
-      },
-      {
-        path: '/settings',
-        name: 'Настройки'
-      },
-    ]
-  })
+

  const [isLoggingOut, setIsLoggingOut] = useState(false);

@ -111,29 +62,6 @@ export const ProfileHeader = () => {
            </button>
          </div>
        </div>
-        <div className='profileHeader__info'>
-          <div className='profileHeader__container'>
-            <nav className='profileHeader__nav'>
-              {
-                navInfo[user].map((link, index) => {
-                  return <NavLink key={index} end to={`/profile${link.path}`}>{link.name}</NavLink>
-                })
-              }
-            </nav>
-
-            <div className='profileHeader__personalInfo'>
-              <h3 className='profileHeader__personalInfoName'>
-                {user === 'developer' ?
-                    profileInfo?.fio :
-                    ''
-                }
-              </h3>
-              <NavLink end to={'/profile'}>
-                <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/>
-              </NavLink>
-            </div>
-          </div>
-        </div>
      </header>
  )
 };
--- a/src/components/ReportForm/ReportForm.js
+++ b/src/components/ReportForm/ReportForm.js
@ -22,6 +22,7 @@ import arrow from "../../images/right-arrow.png";

 import './reportForm.scss'
 import "react-datepicker/dist/react-datepicker.css";
+import { Navigation } from '../Navigation/Navigation'

 const ReportForm = () => {
  if(localStorage.getItem('role_status') === '18') {
@ -99,6 +100,7 @@ const ReportForm = () => {
  return (
      <section className='report-form'>
        <ProfileHeader/>
+        <Navigation />
        <div className='container'>
          <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},
            {name: 'Ваша отчетность', link: '/profile/calendar'},
--- a/src/components/StarRating/StarRating.js
+++ b/src/components/StarRating/StarRating.js
@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import './StarRating.scss'
+
+const StarRating = ({ countStars=1, countActiveStars=1, color='#52B709', size=61 }) => {
+	const [shadedStars, setShadedStars] = useState([])
+	const [noShadedStars, setNoShadedStars] = useState([])
+	const percent = (Math.abs(countActiveStars)) >= countStars ? 100 : (countActiveStars * 100 / countStars)
+	useEffect(() => {
+		for (let index = 0; index < countStars; index++) {
+			setShadedStars(prev => [...prev, '★'])
+			setNoShadedStars(prev => [...prev, '☆'])
+		}
+	}, [])
+
+	const ratingStyle = {
+		"--size": size+'px'
+	}
+	const activeStyle = {
+		"--width": percent + '%',
+		"--color": color,
+		"--content": shadedStars.join('')
+	}
+	const bodyStyle = {
+		"--content": noShadedStars.join(''),
+		"--color": color
+	}
+
+	return (
+		<div className='rating' style={ratingStyle}>
+			<div className="rating__body" style={bodyStyle} data-content={noShadedStars.join('')}>
+				<div className="rating__active" style={activeStyle} data-content={shadedStars.join('')}></div>
+				<div className="rating__items">
+					<input type='radio' className="rating__item" value={1} name='star'></input>
+					<input type='radio' className="rating__item" value={2} name='star'></input>
+					<input type='radio' className="rating__item" value={3} name='star'></input>
+					<input type='radio' className="rating__item" value={4} name='star'></input>
+					<input type='radio' className="rating__item" value={5} name='star'></input>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default React.memo(StarRating);  
--- a/src/components/StarRating/StarRating.scss
+++ b/src/components/StarRating/StarRating.scss
@ -0,0 +1,45 @@
+.rating{
+	display: flex;
+	align-items: center;
+	font-size: var(--size);
+	line-height: 0.75;
+	&__body{
+		position: relative;
+		&::before{
+			content: attr(data-content);
+			display: block;
+			color: var(--color);
+		}
+	}
+	&__active{
+		position: absolute;
+		height: 100%;
+		width: var(--width);
+		top: 0;
+		left: 0;
+		overflow: hidden;
+		&::before{
+			content: attr(data-content);
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			color: var(--color);
+		}
+	}
+	&__items{
+		display: flex;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+	}
+	&__item{
+		flex: 0 0 20%;
+		height: 100%;
+		opacity: 0;
+	}
+}
+
--- a/src/components/features/Candidate-lk/HeadBottom.js
+++ b/src/components/features/Candidate-lk/HeadBottom.js
@ -0,0 +1,14 @@
+import React from 'react'
+import medium_male from "../../../images/medium_male.png"
+
+export const HeadBottom = () => {
+  return (
+	<div className="bottom-head">
+	<div className="bottom-head__container">
+		<div className="bottom-head__title">Мои тесты</div>
+		<div className="bottom-head__img"><img src={medium_male} alt="" /></div>
+	</div>
+
+</div>
+  )
+}
--- a/src/components/features/quiz/AlertResult.js
+++ b/src/components/features/quiz/AlertResult.js
@ -0,0 +1,21 @@
+import React from 'react'
+import suucessIcon from '../../../images/quiz/success.png'
+
+export const AlertResult = () => {
+
+	const successTest = false
+
+	return (
+		<div className='alert-result'>
+			<div className="alert-result__column">
+				<img src={suucessIcon} alt="suucessIcon" className="alert-result__icon" />
+				<div className='alert-result__text' style={{color: successTest ? '#52B709' : '#5B6871'}}>
+					Благодарим Вас за прохождение теста "Junior разработчик". Ваши результаты проверены, готовы пригласить Вас в команду
+				</div>
+			</div>
+			{!successTest && <div className="alert-result__column">
+				<button className="alert-result__button quiz-btn">Запросить еще попытку</button>
+			</div>}
+		</div>
+	)
+}
--- a/src/components/features/quiz/BlockCompletedTest.js
+++ b/src/components/features/quiz/BlockCompletedTest.js
@ -0,0 +1,24 @@
+import React from 'react'
+import compltedImage from "../../../images/quiz/compltedImage.png"
+import { Link } from 'react-router-dom'
+
+export const BlockCompletedTest = () => {
+	const id = localStorage.getItem('id')
+	return (
+		<div className='block-completed-test'>
+			<div className="block-completed-test__container">
+				<div className="block-completed-test__img">
+					<img src={compltedImage} alt="" />
+				</div>
+				<div className="block-completed-test__title">
+					Спасибо! <br />
+					Ваши ответы получены
+				</div>
+				<div className="block-completed-test__text">
+					В течении дня в вашем кабинете будет отображены данные о прохождении тестирования
+				</div>
+				<Link to={'/profile-candidate/' + id} className="block-completed-test__button quiz-btn">В кабинет</Link>
+			</div>
+		</div>
+	)
+}
--- a/src/components/features/quiz/Card-introduction.js
+++ b/src/components/features/quiz/Card-introduction.js
@ -0,0 +1,19 @@
+import React from 'react'
+import questionIcon from "../../../images/question.png"
+import './quiz.scss'
+
+export const CardIntroduction = ({ title, description }) => {
+	return (
+		<div className="card-introduction">
+			<div className="card-introduction__title">{title}</div>
+			<div className="card-introduction__body">
+				<div className="card-introduction__icon">
+					<img src={questionIcon} alt="" />
+				</div>
+				<div className="card-introduction__text">
+					{description}
+				</div>
+			</div>
+		</div>
+	)
+}
--- a/src/components/features/quiz/CardAviableTest.js
+++ b/src/components/features/quiz/CardAviableTest.js
@ -0,0 +1,34 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import rightArrow from "../../../images/arrowRight.png"
+import StarRating from '../../StarRating/StarRating'
+
+
+export const CardAvailableTest = ({ title, description, path, passedTest }) => {
+
+
+  return (
+    <div className='card-available-test'>
+      <Link to={`/${path}`} className="card-available-test__container" style={{ opacity: passedTest ? 0.3 : 1, pointerEvents: passedTest ? 'none' : 'all' }}>
+        <div className='card-available-test__top-head'>
+          <StarRating />
+          <h3 className='card-available-test__title'>{title}</h3>
+        </div>
+        <div className='card-available-test__info'>
+          <p dangerouslySetInnerHTML={{ __html: description }}></p>
+          <div className='card-available-test__infoLink'>
+            <img src={rightArrow} alt='arrow' />
+          </div>
+        </div>
+      </Link>
+
+      {passedTest && <div className='card-available-test__finished'>
+        <p>
+          Получить отчет по тестированию
+        </p>
+        <Link to={'/quiz/report'}>Отчет по тесту</Link>
+      </div>}
+    </div>
+  )
+}
+
--- a/src/components/features/quiz/GetOptionTask.js
+++ b/src/components/features/quiz/GetOptionTask.js
@ -1,38 +1,38 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { selectedAnswersSelector, selectedTest } from '../../../redux/quizSlice';
+
+export const GetOptionTask = ({ type, answer, handleChange, inputValue}) => {
+
+   const id = localStorage.getItem('id');
+   const dataTest = useSelector(selectedTest);
+

-export const GetOptionTask = ({type, answer, handleChange, inputValue}) => {
   switch (type) {
-      case "3":
-         return (
-           <div className="form-task__group" key={answer.id}>
-              <input className='form-task__check' type="checkbox" value={answer.answer_body} id={answer.id}
-                     onChange={handleChange}/>
-              <label htmlFor={answer.id}>{answer.answer_body}</label>
-           </div>
-         )
-      case "2":
-      case "4":
-         return (
-           <div className="form-task__group" key={answer.id}>
-              <input className='form-task__check' type="radio" value={answer.answer_body} name={'radio'} id={answer.id}
-                     onChange={handleChange}/>
-              <label htmlFor={answer.id}>{answer.answer_body}</label>
-           </div>
-         )
      case "1":
         return (
-           <div className="form-task__group">
-              <textarea className='form-task__field' value={inputValue}
-                        onChange={handleChange}/>
-           </div>
+            <div className="form-task__group">
+               <textarea className='form-task__field' value={inputValue}
+                  onChange={handleChange} />
+            </div>
         )
+      case "3":
+         return (
+            <div className="form-task__group" key={answer.id}>
+               <input className='form-task__check' type="checkbox"
+                  value={answer.answer_body} id={answer.id}
+                  onChange={handleChange} />
+               <label htmlFor={answer.id}>{answer.answer_body}</label>
+            </div>
+         )
+
      default:
         return (
-           <div className="form-task__group" key={answer.id}>
-              <input className='form-task__check' type="checkbox" value={answer.answer_body} id={answer.id}
-                     onChange={handleChange}/>
-              <label htmlFor={answer.id}>{answer.answer_body}</label>
-           </div>
+            <div className="form-task__group" key={answer.id}>
+               <input className='form-task__check' type="radio" value={answer.answer_body} name={'radio'} id={answer.id}
+                  onChange={handleChange} />
+               <label htmlFor={answer.id}>{answer.answer_body}</label>
+            </div>
         )
   }
 }
--- a/src/components/features/quiz/HeaderQuiz.js
+++ b/src/components/features/quiz/HeaderQuiz.js
@ -17,8 +17,8 @@ export const HeaderQuiz = ({header}) => {
  }, [userId, dispatch]);

  useEffect(() => {
-    apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
-        .then(res => dispatch(setQuestionnairesList(res)))
+    // apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
+    //     .then(res => dispatch(setQuestionnairesList(res)))
  }, [userId, dispatch]);

  return (
--- a/src/components/features/quiz/Quiz-passing-information.js
+++ b/src/components/features/quiz/Quiz-passing-information.js
@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react'
+import timer from '../../../images/quiz/timer.png'
+import accempt from '../../../images/quiz/accempt.png'
+import { useTimer } from 'react-timer-hook';
+import StarRating from '../../StarRating/StarRating';
+import { useSelector } from 'react-redux';
+import { completedTestSelector } from '../../../redux/quizSlice';
+
+
+export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
+	const {
+		seconds,
+		minutes,
+		isRunning,
+		start,
+		pause,
+		resume,
+		restart
+	} = useTimer({
+		expiryTimestamp, autoStart: false, onExpire: () => {
+			console.warn('onExpire called')
+		}
+	});
+	const completedTest = useSelector(completedTestSelector)
+
+
+	const startTesting = () => {
+		setStartTest(true)
+		start()
+	}
+
+	useEffect(() => {
+		if (completedTest) {
+			const time = new Date();
+			time.setSeconds(time.getSeconds() + 0);//600 - кол-во секунд для прохождения теста
+			restart(time, false)
+		}
+	}, [completedTest])
+
+
+	return (
+		<div className='quiz-passing-information'>
+			<div className="quiz-passing-information__container">
+				<div className="quiz-passing-information__main">
+					<div className="quiz-passing-information__specialization">
+						<StarRating color={'#52B709'} countStars={1} countActiveStars={0.5} size={61} />
+						<div className='quiz-passing-information__specialization-title'>
+							Junior <br />
+							разработчик
+						</div>
+					</div>
+					<div className="quiz-passing-information__timer timer-quiz">
+						<div className="quiz-passing-information__icon">
+							<img src={timer} alt="" />
+						</div>
+						<div className="quiz-passing-information__text">
+							{completedTest ? 'Время вышло' : 'Время на прохождение теста:'} <br />
+							<span>{minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0')} секунд</span>
+						</div>
+					</div>
+					<div className="quiz-passing-information__attempt">
+						<div className="quiz-passing-information__icon">
+							<img src={accempt} alt="" />
+						</div>
+						<div className="quiz-passing-information__text">
+							Попыток прохождения: <br />
+							<span>1 попытка</span>
+						</div>
+					</div>
+					<div>
+					{(!completedTest && !isRunning) && <button className="quiz-passing-information__button btn-green" onClick={startTesting}>Начать</button>}
+					</div>
+				
+				</div>
+				
+				{/* {isRunning && <button className="quiz-passing-information__button quiz-btn" onClick={pause}>Завершить</button>} */}
+			</div>
+		</div>
+	)
+}
--- a/src/components/features/quiz/QuizReport.js
+++ b/src/components/features/quiz/QuizReport.js
@ -0,0 +1,27 @@
+import React from 'react'
+import StarRating from '../../StarRating/StarRating'
+
+export const QuizReport = () => {
+  return (
+	 <div className='report'>
+		<div className="report__row">
+			<div className="report__column">
+				<StarRating color={'#52B709'} countStars={1} countActiveStars={0.5} size={61} />
+				<div className="report__job-title">Junior <br />	разработчик</div>
+			</div>
+			<div className="report__column">
+				<div className="report__value">22</div>
+				<div className="report__text">Правильных ответов</div>
+			</div>
+			<div className="report__column">
+			<div className="report__value report__value_false">02</div>
+				<div className="report__text">Не правильных ответов</div>
+			</div>
+			<div className="report__column">
+				<div className="report__status-text">Статус:</div>
+				<div className="report__status">Пройдено!</div>
+			</div>
+		</div>
+	 </div>
+  )
+}
--- a/src/components/features/quiz/SelectedCategory.js
+++ b/src/components/features/quiz/SelectedCategory.js
@ -0,0 +1,20 @@
+import React from 'react'
+import iconSpecialization from "../../../images/icon-specialization.png"
+import { Link } from 'react-router-dom'
+
+export const SelectedCategory = ({setSelectedCategory}) => {
+  return (
+	 <div className='selected-category'>
+		<div className="selected-category__container">
+			<div className="selected-category__title">Ваша выбранная <br /> категория</div>
+			<div className="selected-category__category">
+				<div className="selected-category__image">
+					<img src={iconSpecialization} alt="" />
+				</div>
+				<div className="selected-category__title-category">Backend <br /> разработчики</div>
+			</div>
+			<button onClick={()=>setSelectedCategory(true)}  className="selected-category__button">Заменить специализацию </button>
+		</div>
+	 </div>
+  )
+}
--- a/src/components/features/quiz/Task.js
+++ b/src/components/features/quiz/Task.js
@ -1,39 +1,42 @@
-import React, {useEffect, useState} from 'react'
-import {useNavigate} from "react-router-dom"
-import {useSelector, useDispatch} from 'react-redux'
-
-import {Progressbar} from './ProgressbarQuiz'
-import {GetOptionTask} from './GetOptionTask'
-
+import React, { useEffect, useState } from 'react'
+import { useNavigate } from "react-router-dom"
+import { useSelector, useDispatch } from 'react-redux'
+import questionIcon from "../../../images/question.png"
+import { Progressbar } from './ProgressbarQuiz'
+import { GetOptionTask } from './GetOptionTask'
 import {
-  fetchUserAnswersMany, fetchUserAnswerOne, fetchGetAnswers, selectAnswer, selectedTest
+  fetchUserAnswersMany, fetchUserAnswerOne, fetchGetAnswers, answersSelector, selectedTest, questionsSelector, setAnswers, setCompleteTest
 } from './../../../redux/quizSlice'

 import './quiz.scss'
-import {apiRequest} from "../../../api/request";
+import { apiRequest } from "../../../api/request";
+import { HeaderQuiz } from './HeaderQuiz'

 export const TaskQuiz = () => {

  const navigate = useNavigate();
  const dispatch = useDispatch();

-  const listAnswers = useSelector(selectAnswer);
-  const dataTest = useSelector(selectedTest);
+  const answers = useSelector(answersSelector);
+  const questions = useSelector(questionsSelector);

+
+  const dataTest = useSelector(selectedTest);
  const [index, setIndex] = useState(0);
  const [checkedValues, setCheckedValues] = useState([]);
-  const [stripValue, setStripValue] = useState(0);
+  //const [stripValue, setStripValue] = useState(0);
  const [inputValue, setInputValue] = useState('');
-  const [questions, setQuestions] = useState([]);
+


  const id = localStorage.getItem('id');

  useEffect(() => {
+    // fetch('https://itguild.info/api/user-questionnaire/questionnaires-list?user_id=110').then(response => response.json())
+    // .then(json => console.log(json))
    apiRequest(`/question/get-questions?uuid=${dataTest.uuid}`)
        .then((response) => {
          console.log(response)
-          setQuestions(response);
          dispatch(fetchGetAnswers(response[0].id));
          setStripValue((+index + 1) * 100 / response.length)
        })
@ -41,108 +44,98 @@ export const TaskQuiz = () => {

  const nextQuestion = async (e) => {
    e.preventDefault();
-
    //Проверка на валидацию ответов
-    if (checkedValues.length || inputValue) {
-      switch (questions[index].question_type_id) {
-        case '3':
-          dispatch(fetchUserAnswersMany(checkedValues));
-          break;
-        case '2':
-        case '1':
-        case '4':
-          dispatch(fetchUserAnswerOne(checkedValues));
-          break;
-        default:
-          break;
-      }
-
-      //Проверка на существование следующего запроса
-      if (index < questions.length - 1) {
-        await dispatch(fetchGetAnswers(questions[index + 1].id));
-        setIndex(prev => prev >= questions.length - 1 ? prev : prev + 1);
-        setStripValue((prev => prev + (100 / questions.length)));
-        setCheckedValues([]);
-        setInputValue('')
-      } else {
-        navigate(`/quiz/result`);
-        alert("Тест пройден!")
-      }
-
-    } else {
+    if (!(checkedValues.length || inputValue)) {
      alert("Вы не ответили на вопрос")
+      return
    }
+
+    //отправка ответов на сервер
+    if (questions[index].question_type_id != 3) {
+      //dispatch(fetchUserAnswerOne(checkedValues));
+    } else {
+      console.log(checkedValues);      
+      // dispatch(fetchUserAnswersMany(checkedValues));
+    }
+
+    //Проверка на окончание теста
+    if (!(index < questions.length - 1)) {
+      dispatch(setCompleteTest())
+      return
+    }
+
+    dispatch(fetchGetAnswers(questions[index + 1].id));
+    setIndex(prev => prev + 1);
+    setCheckedValues([]);
+    setInputValue('')
  };

+
  const handleChange = (e) => {
    const checked = e.target.checked;
-    switch (questions[index].question_type_id) {
-      case '3':
-        checked ? setCheckedValues(prev => [...prev, {
-              user_id: id,
-              user_questionnaire_uuid: dataTest.uuid,
-              question_id: questions[index].id,
-              response_body: e.target.value
-            }]) :
-            setCheckedValues(prev => [...prev.filter(item => item.response_body !== e.target.value)]);
-        break;
-      case '1':
-      case '2':
-      case '4':
-        setCheckedValues([{
-          user_id: id,
-          user_questionnaire_uuid: dataTest.uuid,
-          question_id: questions[index].id,
-          response_body: e.target.value
-        }])
+
+    if (questions[index].question_type_id != 3) {
+      setCheckedValues([{
+        user_id: id,
+        user_questionnaire_uuid: dataTest.uuid,
+        question_id: questions[index].id,
+        response_body: e.target.value
+      }])
+      return
    }
+
+    checked ? setCheckedValues(prev => [...prev, {
+      user_id: id,
+      user_questionnaire_uuid: dataTest.uuid,
+      question_id: questions[index].id,
+      response_body: e.target.value
+    }]) :
+      setCheckedValues(prev => [...prev.filter(item => item.response_body !== e.target.value)]);
  };


+console.log('render task');
+
+
  return (
-      <React.StrictMode>
-        <Progressbar indexQuestion={index + 1} width={stripValue}/>
-        <div className="task">
-          {!questions.length || !stripValue || !listAnswers.length ?
-              <h1 className={'_container'} style={{display: "block"}}>Loading....</h1>
-              :
-              <div className="task__container">
-                <div className="task__code code">
-                  {/* <CodeSnippetlighter /> */}
-                </div>
-                <h3 className="task__title quiz-title_h3">{questions[index].question_body}</h3>
-                <div className="task__body">
-                  <form className='task__form form-task'>
-                    {
-                      questions[index].question_type_id === 1 ?
-                          <GetOptionTask
-                              type={1}
-                              inputValue={checkedValues.length ? checkedValues[0].response_body : ''}
-                              handleChange={handleChange}
-                          />
-                          :
-                          listAnswers.map((answer) => (
-                              <GetOptionTask
-                                  key={answer.id}
-                                  type={questions[index].question_type_id}
-                                  handleChange={handleChange}
-                                  answer={answer}
-                              />
-                          ))
-                    }
-                    <div className="form-task__buttons">
-                      {questions.length !== index + 1 &&
-                      <button type='submit' className='quiz-btn'
-                              onClick={(e) => nextQuestion(e)}>Далее</button>}
-                      {questions.length === index + 1 &&
-                      <button onClick={(e) => nextQuestion(e)}
-                              className='quiz-btn quiz-btn_dark-green'>Завершить</button>}
-                    </div>
-                  </form>
-                </div>
+    <div className="task">
+      {
+        <div className="task__container">
+          <div className='task__header'>
+            <img src={questionIcon} alt="" />
+            <h3 className="task__title quiz-title_h3">{questions[index].question_body}</h3>
+          </div>
+
+          <div className="task__body">
+            <form className='task__form form-task' onSubmit={nextQuestion}>
+              {
+
+                answers.map((answer) => (
+                  <GetOptionTask
+                    key={answer.id}
+                    type={questions[index].question_type_id}
+                    handleChange={handleChange}
+                    answer={answer}                   
+                  />
+                ))
+              }
+              <div className="form-task__buttons">
+                {/* {
+                  index != 0 && <button type='submit' className='form-task__btn quiz-btn quiz-btn_back'
+                    onClick={prevQuestion}>Назад</button>
+                } */}
+                {
+                  index != questions.length && <button onClick={nextQuestion}
+                    className='form-task__btn quiz-btn'>Далее</button>
+                }
              </div>
-          }
+
+            </form>
+          </div>
        </div>
-      </React.StrictMode>
+
+      }
+    </div>
+
  )
 };
--- a/src/components/features/quiz/quiz.scss
+++ b/src/components/features/quiz/quiz.scss
--- a/src/images/icon-specialization.png
+++ b/src/images/icon-specialization.png
--- a/src/images/note.png
+++ b/src/images/note.png
--- a/src/images/question.png
+++ b/src/images/question.png
--- a/src/images/quiz/accempt.png
+++ b/src/images/quiz/accempt.png
--- a/src/images/quiz/compltedImage.png
+++ b/src/images/quiz/compltedImage.png
--- a/src/images/quiz/success.png
+++ b/src/images/quiz/success.png
--- a/src/images/quiz/timer.png
+++ b/src/images/quiz/timer.png
--- a/src/index.css
+++ b/src/index.css
@ -19,7 +19,7 @@ code {
 }

 h1 {
-  display: none;
+
 }

 .container {
--- a/src/pages/AuthForCandidate/authForCandidate.scss
+++ b/src/pages/AuthForCandidate/authForCandidate.scss
@ -6,7 +6,7 @@

  .auth {
    &__wrapper {
-      background: #FFFFFF;
+      background: #ffffff;
      border-radius: 12px;
      padding: 50px 0 35px 56px;
      margin-top: 40px;
@ -37,7 +37,7 @@

      input {
        margin-bottom: 30px;
-        background: #EFF2F7;
+        background: #eff2f7;
        border-radius: 8px;
        min-width: 300px;
        width: 100%;
@ -58,7 +58,7 @@
      }

      button {
-        background: #52B709;
+        background: #52b709;
        border-radius: 44px;
        max-width: 130px;
        border: none;
@ -85,7 +85,7 @@
      text-align: center;

      span {
-        color: #52B709;
+        color: #52b709;
      }
    }

@ -96,13 +96,19 @@
    }

    &__categoriesWrapper {
-      display: flex;
      position: relative;
      margin-top: 200px;
-      flex-wrap: wrap;
-      row-gap: 24px;
-      column-gap: 21px;
      width: 100%;
+      display: grid;
+      grid-gap: 24px;
+      grid-template-columns: 1fr 1fr 1fr;
+      margin-bottom: 24px;
+      @media (max-width: 955px) {
+        grid-template-columns: 1fr 1fr;
+      }
+      @media (max-width: 668px) {
+        grid-template-columns: 1fr;
+      }
    }
  }

--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@ -11,6 +11,7 @@ import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
 import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {apiRequest} from "../../api/request";
 import {Navigate} from "react-router-dom";
+import { Navigation } from '../../components/Navigation/Navigation'


 const Home = () => {
@ -58,6 +59,7 @@ const Home = () => {
  return (
      <>
        <ProfileHeader/>
+        <Navigation />
        <div className="catalog">
          <div className='container'>
            <ProfileBreadcrumbs links={[
--- a/src/pages/PartnerAddRequest/PartnerAddRequest.js
+++ b/src/pages/PartnerAddRequest/PartnerAddRequest.js
@ -12,6 +12,7 @@ import documentsImg from "../../images/partnerAddRequestThirdInfo.png"
 import {Navigate} from "react-router-dom";

 import './partnerAddRequest.scss'
+import { Navigation } from '../../components/Navigation/Navigation';

 export const PartnerAddRequest = () => {
    if(localStorage.getItem('role_status') !== '18') {
@ -20,6 +21,7 @@ export const PartnerAddRequest = () => {
    return (
        <div className='partnerAddRequest'>
            <ProfileHeader />
+            <Navigation />
            <div className='container'>
                <ProfileBreadcrumbs links={[
                    {name: 'Главная', link: '/profile'},
--- a/src/pages/PartnerBid/PartnerBid.js
+++ b/src/pages/PartnerBid/PartnerBid.js
@ -12,6 +12,7 @@ import personImg from "../../images/mokPerson.png"
 import deleteBtn from "../../images/deleteBtn.png"

 import './partnerBid.scss'
+import { Navigation } from '../../components/Navigation/Navigation';

 export const PartnerBid = () => {
    if(localStorage.getItem('role_status') !== '18') {
@ -37,6 +38,7 @@ export const PartnerBid = () => {
    return (
        <div className='partnerBid'>
            <ProfileHeader />
+            <Navigation />
            <div className='container'>
                <ProfileBreadcrumbs links={[
                    {name: 'Главная', link: '/profile'},
--- a/src/pages/PartnerRequests/PartnerRequests.js
+++ b/src/pages/PartnerRequests/PartnerRequests.js
@ -9,6 +9,7 @@ import {Footer} from "../../components/Footer/Footer";
 import cursorImg from "../../images/cursorImg.png"

 import './partnerRequests.scss'
+import { Navigation } from '../../components/Navigation/Navigation';

 export const PartnerRequests = () => {
    if(localStorage.getItem('role_status') !== '18') {
@ -35,6 +36,7 @@ export const PartnerRequests = () => {
    return (
        <div className='partnerRequests'>
            <ProfileHeader />
+            <Navigation  />
            <div className='container'>
                <ProfileBreadcrumbs links={[
                    {name: 'Главная', link: '/profile'},
--- a/src/pages/PartnerSettings/PartnerSettings.js
+++ b/src/pages/PartnerSettings/PartnerSettings.js
@ -7,11 +7,13 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import kontur from "../../images/konturLogo.png";
 import astral from "../../images/astralLogo.png";
 import "./partnerSettings.scss";
+import { Navigation } from "../../components/Navigation/Navigation";

 export const PartnerSettings = () => {
  return (
    <div className="settings">
      <ProfileHeader />
+      <Navigation />
      <div className="container settings__page">
        <ProfileBreadcrumbs
          links={[
--- a/src/pages/PartnerTreaties/PartnerTreaties.js
+++ b/src/pages/PartnerTreaties/PartnerTreaties.js
@ -15,6 +15,7 @@ import lockDone from "./Images/lockDone.svg"
 import avatarMok from "./Images/avatarMok.png"

 import './partnerTreaties.scss'
+import { Navigation } from '../../components/Navigation/Navigation';

 export const PartnerTreaties = () => {
    const [toggleTab, setToggleTab] = useState(1);
@ -25,6 +26,7 @@ export const PartnerTreaties = () => {
    return(
        <div className="treaties">
            <ProfileHeader/>
+            <Navigation />
            <div className="container">
                <ProfileBreadcrumbs
                    links={[
--- a/src/pages/PartnerСategories/PartnerСategories.js
+++ b/src/pages/PartnerСategories/PartnerСategories.js
@ -22,6 +22,7 @@ import rightArrow from "../../images/arrowRight.png"
 import avatarImg from "../PartnerEmployees/avatarMok.png";

 import "./partnerСategories.scss"
+import { Navigation } from '../../components/Navigation/Navigation';

 export const PartnerCategories = () => {
    const dispatch = useDispatch();
@ -130,6 +131,7 @@ export const PartnerCategories = () => {
    return (
        <div className="partnerCategories">
            <ProfileHeader />
+            <Navigation />
            <div className="container">
                <ProfileBreadcrumbs links={[
                    {name: 'Главная', link: '/profile'},
--- a/src/pages/Payouts/Payouts.js
+++ b/src/pages/Payouts/Payouts.js
@ -1,11 +1,13 @@
 import React from 'react';

 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import { Navigation } from '../../components/Navigation/Navigation';

 export const Payouts = () => {
    return (
        <div className='payouts'>
            <ProfileHeader />
+            <Navigation />
        </div>
    )
 };
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@ -19,6 +19,8 @@ import settingIcon from "../../images/settingIcon.png"
 import rightArrow from "../../images/arrowRight.png"

 import './profile.scss'
+import { CardControl } from '../../components/CardControl/CardControl';
+import { Navigation } from '../../components/Navigation/Navigation';

 export const Profile = () => {

@ -27,19 +29,19 @@ export const Profile = () => {
  const [profileItemsInfo] = useState({
    developer: [
      {
-        path: '/calendar',
+        path: 'profile/calendar',
        img: reportsIcon,
        title: 'Ваша отчетность',
        description: '<span></span>Отработанных в этом месяце часов'
      },
      {
-        path: '/summary',
+        path: 'profile/summary',
        img: summaryIcon,
        title: 'Данные и резюме',
        description: 'Ваше резюме<br/><span>заполнено</span>'
      },
      {
-        path: '/tracker',
+        path: 'profile/tracker',
        img: timerIcon,
        title: 'Трекер времени',
        description: 'Сколько времени занимает<br/> выполнение задач'
@ -51,7 +53,7 @@ export const Profile = () => {
        description: 'У вас <span>подтвержден</span><br/> статус самозанятого'
      },
      {
-        path: '/settings',
+        path: 'profile/settings',
        img: settingIcon,
        title: 'Настройки аккаунта',
        description: 'Перейдите чтобы начать<br/> редактирование'
@ -59,31 +61,31 @@ export const Profile = () => {
    ],
    partner: [
      {
-        path: '/requests',
+        path: 'profile/requests',
        img: reportsIcon,
        title: 'Запросы и открытые позиции',
        description: '<span>У вас 2 вакансии<br/></span>открытые от лица компании'
      },
      {
-        path: '/categories',
+        path: 'profile/categories',
        img: summaryIcon,
        title: 'Данные персонала',
        description: 'Наши специалисты <br/><span>уже работающие у вас</span>'
      },
      {
-        path: '/tracker',
+        path: 'profile/tracker',
        img: timerIcon,
        title: 'Трекер времени',
        description: 'Контроль времени и<br/> выполнение задач'
      },
      {
-        path: '/treaties',
+        path: 'profile/treaties',
        img: paymentIcon,
        title: 'Договора и отчетность',
        description: 'Ключевые условия<br/> договора'
      },
      {
-        path: '/settings',
+        path: 'profile/settings',
        img: settingIcon,
        title: 'Настройки аккаунта',
        description: 'Перейдите чтобы начать<br/> редактирование'
@ -94,6 +96,7 @@ export const Profile = () => {
  return (
      <div className='profile'>
        <ProfileHeader/>
+        <Navigation />
        <div className='container'>
          <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'}]} />
          <h2 className='profile__title'>
@ -118,18 +121,13 @@ export const Profile = () => {
          <div className='profile__items'>
            {
              profileItemsInfo[user].map((item, index) => {
-                return <Link key={index} to={`/profile${item.path}`} className='item'>
-                          <div className='item__about'>
-                            <img src={item.img} alt='itemImg'/>
-                            <h3>{item.title}</h3>
-                          </div>
-                          <div className='item__info'>
-                            <p dangerouslySetInnerHTML={{__html: item.description}}></p>
-                            <div className='item__infoLink'>
-                              <img src={rightArrow} alt='arrow'/>
-                            </div>
-                          </div>
-                        </Link>
+                return <CardControl 
+                description={item.description} 
+                img={item.img}
+                path={item.path}
+                title={item.title}
+                key={index}
+                />              
              })
            }
          </div>
--- a/src/pages/Profile/profile.scss
+++ b/src/pages/Profile/profile.scss
@ -49,79 +49,79 @@
      justify-content: center;
    }

-    .item {
-      max-width: 353px;
-      width: 100%;
-      padding: 35px 45px 15px 30px;
-      background: #FFFFFF;
-      border-radius: 12px;
-      text-decoration: none;
-      cursor: pointer;
-      transition: all 0.3s ease;
+    // .item {
+    //   max-width: 353px;
+    //   width: 100%;
+    //   padding: 35px 45px 15px 30px;
+    //   background: #FFFFFF;
+    //   border-radius: 12px;
+    //   text-decoration: none;
+    //   cursor: pointer;
+    //   transition: all 0.3s ease;

-      &:hover {
-        box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
-        transform: scale(1.02);
-      }
+    //   &:hover {
+    //     box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+    //     transform: scale(1.02);
+    //   }

-      @media (max-width: 1175px) {
-        width: 48%;
-        max-width: none;
-      }
+    //   @media (max-width: 1175px) {
+    //     width: 48%;
+    //     max-width: none;
+    //   }

-      @media (max-width: 925px) {
-        width: 100%;
-        padding: 15px 25px;
-      }
+    //   @media (max-width: 925px) {
+    //     width: 100%;
+    //     padding: 15px 25px;
+    //   }

-      &__about {
-        display: flex;
-        column-gap: 20px;
-        align-items: center;
-        margin-bottom: 30px;
+    //   &__about {
+    //     display: flex;
+    //     column-gap: 20px;
+    //     align-items: center;
+    //     margin-bottom: 30px;

-        @media (max-width: 925px) {
-          margin-bottom: 15px;
-        }
+    //     @media (max-width: 925px) {
+    //       margin-bottom: 15px;
+    //     }

-        h3 {
-          color: #000000;
-          font-weight: 500;
-          font-size: 18px;
-          line-height: 22px;
-          max-width: 125px;
-          margin-bottom: 0;
-        }
-      }
+    //     h3 {
+    //       color: #000000;
+    //       font-weight: 500;
+    //       font-size: 18px;
+    //       line-height: 22px;
+    //       max-width: 125px;
+    //       margin-bottom: 0;
+    //     }
+    //   }

-      &__info {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+    //   &__info {
+    //     display: flex;
+    //     justify-content: space-between;
+    //     align-items: center;

-        p {
-          font-weight: 700;
-          font-size: 12px;
-          line-height: 20px;
-          color: #000000;
-          margin-bottom: 0;
+    //     p {
+    //       font-weight: 700;
+    //       font-size: 12px;
+    //       line-height: 20px;
+    //       color: #000000;
+    //       margin-bottom: 0;

-          span {
-            color: #52B709;
-            font-weight: 700;
-          }
-        }
-        &Link {
-          width: 48px;
-          height: 48px;
-          background: #DDEEC6;
-          border-radius: 50px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
+    //       span {
+    //         color: #52B709;
+    //         font-weight: 700;
+    //       }
+    //     }
+    //     &Link {
+    //       width: 48px;
+    //       height: 48px;
+    //       background: #DDEEC6;
+    //       border-radius: 50px;
+    //       display: flex;
+    //       justify-content: center;
+    //       align-items: center;
+    //     }
+    //   }
+    // }
  }

  .container {
--- a/src/pages/ProfileCandidate/ProfileCandidate.js
+++ b/src/pages/ProfileCandidate/ProfileCandidate.js
@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+import './ProfileCandidate.scss'
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs';
+import { CardControl } from '../../components/CardControl/CardControl';
+import settingIcon from "../../images/settingIcon.png"
+import reportsIcon from "../../images/reports.png"
+import noteIcon from "../../images/note.png"
+import questionIcon from "../../images/question.png"
+import medium_male from "../../images/medium_male.png"
+import { Footer } from '../../components/Footer/Footer';
+import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom';
+
+export const ProfileCandidate = () => {
+	const [candidatsCardsControl] = useState([
+		{
+			path: 'quiz',
+			img: reportsIcon,
+			title: 'Мои тесты',
+			description: '<span>У вас 122 часа<br/></span>отработанных в этом месяце'
+		},
+		{
+			path: 'profile/settings',
+			img: settingIcon,
+			title: 'Настройки аккаунта',
+			description: 'Перейдите чтобы начать редактирование'
+		}
+	]
+	)
+	return (
+		<div className='profile-candidate'>
+			<ProfileHeader />
+			<div className="profile-candidate__head-bottom bottom-head">
+				<HeadBottom />
+
+			</div>
+			<div className="profile-candidate__container">
+				<ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }]} />
+				<div className="profile-candidate__title main-title">Добрый день, <span>Дмитрий</span></div>
+				<div className="profile-candidate__row">
+					<div className="profile-candidate__tests">
+
+						<div className='info-candidate'>
+							<div className="info-candidate__img">
+								<img src={medium_male} alt="" />
+							</div>
+							<div className="info-candidate__info">
+								<div className="info-candidate__title">Открыто {3} теста из {12}</div>
+								<div className="info-candidate__decor"></div>
+							</div>
+						</div>
+						<div className="profile-candidate__cards">
+							{
+								candidatsCardsControl.map((item, index) => <CardControl
+									description={item.description}
+									img={item.img}
+									path={item.path}
+									title={item.title}
+									key={index}
+								/>)
+							}
+						</div>
+
+					</div>
+					<div className="profile-candidate__instructions instructions-candidate">
+						<div className="instructions-candidate__container">
+							<div className="instructions-candidate___row">
+								<div className="instructions-candidate__title">Интсрукция:</div>
+								<div className="instructions-candidate__note">
+									<img className='instructions-candidate__icon' src={noteIcon} alt="" />
+									<div className="instructions-candidate__text">
+										Для подтверждения своих знаний - пройдите тестирование во вкладке
+										<span>“Мои тесты”</span>
+									</div>
+								</div>
+							</div>
+							<div className="instructions-candidate___row">
+								<div className="instructions-candidate__title">Зачем?</div>
+								<div className="instructions-candidate__note">
+									<img className='instructions-candidate__icon' src={questionIcon} alt="" />
+									<div className="instructions-candidate__text">
+										Тесты itguild  предназначены для того, чтобы подтверждать навыки, которые вы указали у себя.
+									</div>
+								</div>
+							</div>
+
+						</div>
+					</div>
+				</div>
+			</div>
+			<Footer />
+		</div>
+	)
+}
--- a/src/pages/ProfileCandidate/ProfileCandidate.scss
+++ b/src/pages/ProfileCandidate/ProfileCandidate.scss
@ -0,0 +1,166 @@
+.profile-candidate{
+	background: #F1F1F1;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	//max-width: 1200px;
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto 42px auto;
+		flex: 1 1 auto;
+		padding: 0 15px;	
+	}
+	&__title{
+		margin: 0 0 31px 0;
+	}
+	&__row{
+		display: flex;
+		gap: 30px;
+		flex-wrap: wrap;	
+	}
+	// &__column{
+	// 	flex: 1 1 60%;
+	// }
+	&__tests{
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		flex: 1 1 60%;
+		gap: 30px;
+	}
+	&__cards{
+		display: flex;		
+		gap: 29px;
+		width: 100%;
+		@media (max-width: 660px) {
+			flex-wrap: wrap;
+		 }
+	}
+	&__head-bottom{
+		margin: 0 0 27px 0;
+		//max-width: 1160px;
+	}
+
+
+}
+
+
+.instructions-candidate{
+	flex: 1 1 auto;
+	background: #FFFFFF;
+	border-radius: 12px;
+	&__container{
+		padding: 40px 18px 32px 36px;
+		display: flex;
+		flex-direction: column;
+		gap: 29px;
+		@media (max-width: 660px) {
+			padding: 20px;
+		}
+	}
+	&__note{
+		display: flex;
+		align-items: center;
+		gap: 22px;
+		&:not(:last-child){
+			margin: 0 0 30px 0;
+		}
+		
+	}
+	&__icon{
+		width: 25px;
+		height: 30px;
+	}
+	&__title{
+		color: #52B709;
+		font-weight: 900;
+		font-size: 14px;
+		line-height: 171%;
+		margin: 0 0 20px 0;
+	}
+	&__text{
+		font-weight: 400;
+		font-size: 12px;
+		line-height: 200%;
+		color: #000000;
+		max-width: 235px;
+		span{
+			color: #406128;
+			font-weight: 700;
+			text-decoration: underline;
+		}
+	}
+}
+
+.info-candidate{
+	width: 100%;
+	background: #fff;
+	border-radius: 12px;
+	padding: 20px 45px;
+	display: flex;
+	align-items: center;
+	gap: 47px;
+	@media (max-width:560px) {
+		padding: 20px;
+	}
+	&__img{
+		flex: 0 0 88px;
+		height: 88px;
+		img{
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			border-radius: 50%;
+		}
+	}
+	&__info{
+		width: 100%;
+	}
+	&__title{
+		font-weight: 500;
+		font-size: 16px;
+		line-height: 200%;
+		color: #000000;
+		margin: 0 0 12px 0;
+	}
+
+	&__decor{
+		background: #52B709;
+		border-radius: 12px;
+		height: 8px;
+		width: 60%;
+	}
+}
+
+.bottom-head{
+	margin: 0 0 40px 0;
+	height: 66px;
+	background: #FFF;
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto;
+		padding: 0 15px;
+		height: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	&__img{
+		flex: 0 0 37px;
+		height: 37px;
+		img{
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			border-radius: 50%;
+		}
+	}
+	&__title{
+		font-weight: 500;
+		font-size: 18px;
+		line-height: 178%;
+		color: #807777;
+	}
+}
--- a/src/pages/Summary/Summary.js
+++ b/src/pages/Summary/Summary.js
@ -13,6 +13,7 @@ import gitImgItem from "../../images/gitItemImg.png"
 import './summary.scss'
 import {apiRequest} from "../../api/request";
 import {Navigate} from "react-router-dom";
+import { Navigation } from '../../components/Navigation/Navigation';

 export const Summary = () => {
    if(localStorage.getItem('role_status') === '18') {
@ -29,6 +30,7 @@ export const Summary = () => {
  return (
      <div className='summary'>
        <ProfileHeader/>
+        <Navigation />
        <div className='container'>
          <div className='summary__content'>
              <ProfileBreadcrumbs links={[
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@ -22,6 +22,7 @@ import noProjects from "../../images/noProjects.png"
 import arrow from '../../images/arrowCalendar.png'

 import "./tracker.scss";
+import { Navigation } from "../../components/Navigation/Navigation";

 export const Tracker = () => {
  const [toggleTab, setToggleTab] = useState(1);
@ -524,6 +525,7 @@ export const Tracker = () => {
  return (
    <div className="tracker">
      <ProfileHeader />
+      <Navigation />
      <div className="container">
        <div className="tracker__content">
          <ProfileBreadcrumbs links={[
--- a/src/pages/ViewReport/ViewReport.js
+++ b/src/pages/ViewReport/ViewReport.js
@ -15,6 +15,7 @@ import {apiRequest} from "../../api/request";
 import {getCorrectDate, getCreatedDate, hourOfNum} from '../../components/Calendar/calendarHelper'

 import './viewReport.scss'
+import { Navigation } from '../../components/Navigation/Navigation';

 export const ViewReport = () => {
    if(localStorage.getItem('role_status') === '18') {
@ -78,6 +79,7 @@ export const ViewReport = () => {
    return (
        <div className='viewReport'>
            <ProfileHeader/>
+            <Navigation />
            <div className='container'>
                <div className='viewReport__info'>
                    <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},
--- a/src/pages/quiz/InstructionPage.js
+++ b/src/pages/quiz/InstructionPage.js
@ -1,24 +0,0 @@
-import {useNavigate} from "react-router-dom"
-import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
-import {Instruction} from "../../components/features/quiz/Instructions"
-import React from "react";
-import {useSelector} from "react-redux";
-import {selectedTest} from "../../redux/quizSlice";
-
-
-export const InstructionPage = () => {
-
-  const test = useSelector(selectedTest)
-
-  let navigate = useNavigate();
-  if (!test) {
-    navigate('/quiz')
-  }
-
-  return (
-      <>
-        <HeaderPageTestsQuiz isVisibilityButton={false}/>
-        <Instruction/>
-      </>
-  )
-};
--- a/src/pages/quiz/InterjacentPage.js
+++ b/src/pages/quiz/InterjacentPage.js
@ -1,26 +0,0 @@
-import React from "react";
-import {useNavigate} from "react-router-dom"
-import {useSelector} from "react-redux";
-
-import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
-import {MyTestsQuiz} from "../../components/features/quiz/MyTestsQuiz"
-
-import {selectedTest, selectPassedTests} from "../../redux/quizSlice";
-
-
-export const InterjacentPage = () => {
-
-  const test = useSelector(selectedTest);
-  const passedTests = useSelector(selectPassedTests)
-  let navigate = useNavigate();
-  if (!test) {
-     navigate('/quiz')
-  }
-
-  return (
-      <>
-        <HeaderPageTestsQuiz isVisibilityButton={true}/>
-        <MyTestsQuiz listTests={passedTests}/>
-      </>
-  )
-};
--- a/src/pages/quiz/PassingTests.js
+++ b/src/pages/quiz/PassingTests.js
@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import { ProfileHeader } from '../../components/ProfileHeader/ProfileHeader'
+import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom'
+import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs'
+import { Link } from 'react-router-dom'
+import { Footer } from '../../components/Footer/Footer'
+import { QuizPassingInformation } from '../../components/features/quiz/Quiz-passing-information'
+import { CardIntroduction } from '../../components/features/quiz/Card-introduction'
+import { TaskQuiz } from '../../components/features/quiz/Task'
+import { BlockCompletedTest } from '../../components/features/quiz/BlockCompletedTest'
+import { useSelector } from 'react-redux'
+import { completedTestSelector, selectedTest } from '../../redux/quizSlice'
+
+export const PassingTests = () => {
+	//const selectedTest = useSelector(selectedTest)
+
+	if(''){
+
+	}
+
+	const time = new Date();
+	time.setSeconds(time.getSeconds() + 600);//600 - кол-во секунд для прохождения теста
+
+	const [startTest, setStartTest] = useState(false)
+	const completedTest = useSelector(completedTestSelector)
+
+	const introduction = [
+		{
+			title: 'Зачем?',
+			description: 'Тесты itguild  предназначены для того, чтобы подтверждать навыки, которые вы указали у себя.'
+		},
+		{
+			title: 'Почему именно тестирование?',
+			description: 'Тесты itguild  заменяют первое техническое собеседование по любой вакансии.'
+		},
+		{
+			title: 'Какие тесты нужно проходить?',
+			description: 'Здесь все довольно просто — следует проходить тесты по инструментам и навыкам, которыми вы владеете.'
+		}
+	]
+
+	return (
+		<div className='passing-tests-page'>
+			<ProfileHeader />
+			<HeadBottom />
+			<div className="passing-tests-page__container">
+				<ProfileBreadcrumbs links={[
+					{ name: 'Главная', link: '/profile-candidate' },
+					{ name: 'Тестирование', link: '/quiz' },
+					{ name: 'Прохождение тестов', link: '/quiz/test' },
+				]} />
+				<div className="passing-tests-page__title main-title">Тестирование в позиции Junior разработчик </div>
+				<div className="passing-tests-page__passing-information">
+					<QuizPassingInformation expiryTimestamp={time} setStartTest={setStartTest} />
+				</div>
+
+				{
+					!completedTest &&
+					<>
+						{startTest && <div className="passing-tests-page__block-green">Тестирование началось</div>}
+						{startTest ? <TaskQuiz /> : <div className='passing-tests-page__introduction'>
+							{
+								introduction.map((item, i) => <CardIntroduction description={item.description} title={item.title} key={i} />)
+							}
+						</div>}
+						{
+							!startTest && <div className="passing-tests-page__block-text block-text">
+								ИЛИ <Link to={''} >выполните тестове задание</Link> , без прохождения тестов
+							</div>
+						}
+					</>
+				}
+				{
+					completedTest && <>
+						<div className="passing-tests-page__block-green">Тестирование завершено</div>
+						<BlockCompletedTest />
+					</>
+				}
+			</div>
+			<Footer />
+		</div>
+	)
+}
--- a/src/pages/quiz/QuizPage.js
+++ b/src/pages/quiz/QuizPage.js
@ -1,17 +1,144 @@
-import React from 'react'
-import {HeaderQuiz} from "../../components/features/quiz/HeaderQuiz"
-import {MyTestsQuiz} from "../../components/features/quiz/MyTestsQuiz"
-import {useSelector} from "react-redux";
-import {selectQuestionnairesOfUser} from "../../redux/quizSlice";
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from "react-redux";
+import { questionnairesSelector, setQuestionnaires } from "../../redux/quizSlice";
+import { ProfileHeader } from '../../components/ProfileHeader/ProfileHeader';
+import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom';
+import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs';
+import './quiz-page.scss'
+import { SelectedCategory } from '../../components/features/quiz/SelectedCategory';
+import { Footer } from '../../components/Footer/Footer';
+import { Link } from 'react-router-dom';
+import { CardAvailableTest } from '../../components/features/quiz/CardAviableTest';
+import { apiRequest } from '../../api/request';
+import CategoriesItem from '../../components/CategoriesItem/CategoriesItem';
+
+import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png"
+import FrontendImg from "../../pages/PartnerСategories/images/PersonalFrontend.png"
+import ArchitectureImg from "../../pages/PartnerСategories/images/PersonalArchitecture.png"
+import DesignImg from "../../pages/PartnerСategories/images/PersonalDesign.png"
+import TestImg from "../../pages/PartnerСategories/images/PersonalTesters.png"
+import AdminImg from "../../pages/PartnerСategories/images/PersonalAdmin.png"
+import ManageImg from "../../pages/PartnerСategories/images/PersonalMng.png"
+import CopyImg from "../../pages/PartnerСategories/images/PersonalCopy.png"
+import SmmImg from "../../pages/PartnerСategories/images/PersonalSMM.png"

 export const QuizPage = () => {

-   const allTests = useSelector(selectQuestionnairesOfUser)
+   const questionnaires = useSelector(questionnairesSelector)
+   const dispatch = useDispatch()
+   const [personalInfoItems] = useState([
+      {
+         title: 'Backend разработчики',
+         link: '/registration-candidate',
+         description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+         available: true,
+         img: BackEndImg
+      },
+      {
+         title: 'Frontend разработчики',
+         link: '/registration-candidate',
+         description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+         available: true,
+         img: FrontendImg
+      },
+      {
+         title: 'Архитектура проектов',
+         link: '/registration-candidate',
+         description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
+         available: true,
+         img: ArchitectureImg
+      },
+      {
+         title: 'Дизайн проектов',
+         link: '/registration-candidate',
+         description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+         available: true,
+         img: DesignImg
+      },
+      {
+         title: 'Тестирование проектов',
+         link: '/registration-candidate',
+         description: 'SQL Postman TestRail Kibana Ручное тестирование',
+         available: false,
+         img: TestImg
+      },
+      {
+         title: 'Администрирование проектов',
+         link: '/registration-candidate',
+         description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
+         available: false,
+         img: AdminImg
+      },
+      {
+         title: 'Управление проектом',
+         link: '/registration-candidate',
+         description: 'Scrum Kanban Agile Miro CustDev',
+         available: false,
+         img: ManageImg
+      },
+      {
+         title: 'Копирайтинг проектов',
+         link: '/registration-candidate',
+         description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
+         available: false,
+         img: CopyImg
+      },
+      {
+         title: 'Реклама и SMM',
+         link: '/registration-candidate',
+         description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+         available: false,
+         img: SmmImg
+      },
+   ]);
+   const userId = localStorage.getItem('id')
+   const [selectedCategory, setsetSelectedCategory] = useState(false)
+
+   useEffect(() => {
+      apiRequest(`/user-questionnaire/questionnaires-list?user_id=${107}`)
+         .then(res => dispatch(setQuestionnaires(res)))
+   }, [])

   return (
-     <>
-        <HeaderQuiz header={true}/>
-        <MyTestsQuiz listTests={allTests}/>
-     </>
+      <div className='quiz-page'>
+         <ProfileHeader />
+         <HeadBottom />
+         <div className="quiz-page__container">
+            <ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }, { name: 'Тестирование', link: '/quiz' }]} />
+            <div className="quiz-page__title main-title">{!selectedCategory ? 'Тестирование' : 'Замена специализации'}</div>
+            {!selectedCategory && <>
+               <div className="quiz-page__specialization">
+                  <SelectedCategory setSelectedCategory={setsetSelectedCategory} />
+               </div>
+               <div className="quiz-page__block">
+                  Доступные тесты
+               </div>
+               <div className="quiz-page__cards-test">
+                  {
+                     questionnaires.length ? questionnaires.map((item, index) => (
+                        <CardAvailableTest
+                           description={'Вы новичок с реальным опытом работы до 1 года, или без опыта'}
+                           path={'quiz/test'}
+                           status={item.status}
+                           title={item.questionnaire_title}
+                           passedTest={item.passedTest}
+                           key={index}
+                        />)) : <h1>Анкет нет</h1>
+                  }
+               </div>
+               <div className="block-text">
+                  ИЛИ <Link to={''} >выполните тестове задание</Link> , без прохождения тестов
+               </div>
+            </>}
+
+            {selectedCategory && <div className="quiz-page__categories-items">
+               {personalInfoItems.map((item, index) => {
+                  return <CategoriesItem link={item.link} key={index} title={item.title} img={item.img} skills={item.description} available={item.available} />
+               })
+               }
+            </div>}
+         </div>
+         <Footer />
+      </div>
   )
 }
--- a/src/pages/quiz/QuizReportPage.js
+++ b/src/pages/quiz/QuizReportPage.js
@ -0,0 +1,42 @@
+import { useNavigate } from "react-router-dom"
+import { HeaderPageTestsQuiz } from "../../components/features/quiz/HeaderPageTests"
+import { Results } from "../../components/features/quiz/Results";
+import { useSelector } from "react-redux";
+import { selectedTest } from "../../redux/quizSlice";
+import React from "react";
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import { HeadBottom } from "../../components/features/Candidate-lk/HeadBottom";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { QuizReport } from "../../components/features/quiz/QuizReport";
+import { Footer } from "../../components/Footer/Footer";
+import suucessIcon from '../../images/quiz/success.png'
+import { AlertResult } from "../../components/features/quiz/AlertResult";
+
+
+export const QuizReportPage = () => {
+
+  const test = useSelector(selectedTest)
+
+  let navigate = useNavigate();
+  if (!test) {
+    navigate('/quiz')
+  }
+
+  return (
+    <div className="quiz-report-page">
+      <ProfileHeader />
+      <HeadBottom />
+      <div className="quiz-report-page__container">
+        <ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }, { name: 'Тестирование', link: '/quiz' },
+      { name: 'Отчет по тестированию', link: '/quiz/report' }]} />
+        <div className="quiz-report-page__title main-title">Отчет по тестированию позиции Junior разработчик </div>
+        <div className="quiz-report-page__report-quiz">
+        <QuizReport />
+        </div>
+       
+        <AlertResult />
+      </div>
+      <Footer />
+    </div>
+  )
+};
--- a/src/pages/quiz/QuizTestPage.js
+++ b/src/pages/quiz/QuizTestPage.js
@ -1,24 +0,0 @@
-import {useNavigate} from 'react-router-dom'
-import {HeaderPageTestsQuiz} from '../../components/features/quiz/HeaderPageTests'
-import {TaskQuiz} from '../../components/features/quiz/Task'
-import {useSelector} from "react-redux";
-import {selectedTest} from "../../redux/quizSlice";
-import React, {useEffect} from "react";
-
-export const QuizTestPage = () => {
-  let navigate = useNavigate();
-  const test = useSelector(selectedTest);
-
-  useEffect(() => {
-    if (!test) {
-      navigate('/quiz')
-    }
-  }, []);
-
-  return (
-      <>
-        <HeaderPageTestsQuiz isVisibilityButton={false}/>
-        <TaskQuiz/>
-      </>
-  )
-};
--- a/src/pages/quiz/ResultPage.js
+++ b/src/pages/quiz/ResultPage.js
@ -1,24 +0,0 @@
-import {useNavigate} from "react-router-dom"
-import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
-import {Results} from "../../components/features/quiz/Results";
-import {useSelector} from "react-redux";
-import {selectedTest} from "../../redux/quizSlice";
-import React from "react";
-
-
-export const ResultPage = () => {
-
-  const test = useSelector(selectedTest)
-
-  let navigate = useNavigate();
-  if (!test) {
-    navigate('/quiz')
-  }
-
-  return (
-      <>
-        <HeaderPageTestsQuiz isVisibilityButton={false}/>
-        <Results/>
-      </>
-  )
-};
--- a/src/pages/quiz/quiz-page.scss
+++ b/src/pages/quiz/quiz-page.scss
@ -0,0 +1,143 @@
+.quiz-page{
+	background: #F1F1F1;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto 42px auto;
+		flex: 1 1 auto;
+		width: 100%;
+		padding: 0 15px;
+	}
+	&__title{
+		margin: 0 0 39px 0;
+	}
+	&__block{
+		background: #E1FCCF;
+		border-radius: 12px 12px 0px 0px;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 178%;
+		color: #000000;
+		padding: 20px 51px;
+		margin: 0 0 16px 0;
+	}
+	&__cards-test{
+		display: grid;
+		grid-gap: 29px;
+		grid-template-columns: 1fr 1fr 1fr;
+		margin-bottom: 29px;
+		@media (max-width: 955px) {
+			grid-template-columns: 1fr 1fr;
+		}
+		@media (max-width: 668px) {
+			grid-template-columns: 1fr;
+		}
+ 
+	}
+	&__specialization{
+		margin: 0 0 26px 0;
+	}
+	&__categories-items{
+		display: grid;
+		grid-gap: 24px;
+		grid-template-columns: 1fr 1fr 1fr;
+		margin-bottom: 24px;
+		@media (max-width: 955px) {
+			grid-template-columns: 1fr 1fr;
+		}
+		@media (max-width: 668px) {
+			grid-template-columns: 1fr;
+		}
+	}
+}
+.interjacent-page-quiz{
+	
+	background: #F1F1F1;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	&__title{
+		margin: 0 0 39px 0;
+	}
+	&__passing-information{
+		margin: 0 0 32px 0;
+	}
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto 42px auto;
+		flex: 1 1 auto;
+		width: 100%;
+		padding: 0 15px;
+	}
+	&__introduction-items{
+		display: flex;
+		flex-wrap: wrap;
+    	margin: 0px -25px -50px;
+		margin: 0 auto 54px auto;
+			
+	}
+}
+
+.passing-tests-page{
+	background: #F1F1F1;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto 42px auto;
+		flex: 1 1 auto;
+		width: 100%;
+		padding: 0 15px;
+	}
+	&__title{
+		margin: 0 0 39px 0;
+	}
+	&__passing-information{
+		margin: 0 0 29px 0;
+	}
+	&__block-green{
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 178%;
+		color: #000000;
+		background: #E1FCCF;
+		border-radius: 12px 12px 0px 0px;
+		padding: 20px 51px;
+	}
+	&__introduction{
+		display: flex;
+		flex-wrap: wrap;
+	}
+}
+
+
+.quiz-report-page{
+	background: #F1F1F1;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto 42px auto;
+		flex: 1 1 auto;
+		width: 100%;
+		padding: 0 15px;
+	}
+	&__title{
+		margin: 0 0 39px 0;
+	}
+	&__report-quiz{
+		margin: 0 0 28px 0;
+	}
+}
--- a/src/redux/quizSlice.js
+++ b/src/redux/quizSlice.js
@ -4,14 +4,76 @@ import {apiRequest} from "../api/request";


 const initialState = {
-  // questions: [],
-  answer: [],
+  answers: [
+    {
+      "id": "12",
+      "question_id": "7",
+      "answer_body": "Нsdf sfd fds sdf sf sfsdf sdfеск вsdffsdfsdf sf sdf sdfsdfsdfsdfdsjknsdkf dssdjf sdfbsdhf sd hjdsfv sdhjvар1 отв1 истина"
+    },
+    {
+      "id": "23",
+      "question_id": "7",
+      "answer_body": "Неск вар1 отв1 истина"
+    },
+    {
+      "id": "233",
+      "question_id": "7",
+      "answer_body": "lorem sdfdsf dfs sdf "
+    },
+  ],
+  questionnaires: [],
+  questions: [
+    {
+      "id": "4",
+      "question_type_id": "3",
+      "question_body": "Для чего в Python используется встроенная функция enumerate()?",
+      "question_priority": null,
+      "next_question": null,
+      "time_limit": "00:22:00"
+    },
+    {
+      "id": "24",
+      "question_type_id": "3",
+      "question_body": "Для чего в Python dfsf троенная функция enumerate()?",
+      "question_priority": null,
+      "next_question": null,
+      "time_limit": "00:22:00"
+    },
+    {
+      "id": "41",
+      "question_type_id": "3",
+      "question_body": "Для чегоsdfsdfя функция enumerate()?",
+      "question_priority": null,
+      "next_question": null,
+      "time_limit": "00:22:00"
+    },
+    {
+      "id": "5",
+      "question_type_id": '2',
+      "question_body": "Один ответ2",
+      "question_priority": null,
+      "next_question": null,
+      "time_limit": "00:22:00"
+    }
+  ],
+  selectedTest:  {
+    "user_id": 1,
+    "uuid": "d222f858-60fd-47fb-8731-dc9d5fc384c5",
+    "score": 11,
+    "status": 2,
+    "percent_correct_answers": 0.25,
+    "testing_date": "2022-03-17 11:14:22",
+    "questionnaire_title": "Кат1 Анкета 1 активна"
+  },
+  selectedAnswers:{},
+  completedTest: false,
  result: null,
  isLoading: false,
  dataQuestionnairesOfUser: [],
  passedTests: [],
-  selectedTest: null,
-  userInfo: null
+ 
+  userInfo: null,
+
 };
 export const setUserInfo = createAsyncThunk(
    'userInfo',
@ -47,13 +109,15 @@ export const quizSlice = createSlice({
  name: 'quiz',
  initialState,
  reducers: {
-    setQuestionnairesList: (state, action) => {
-      state.dataQuestionnairesOfUser = action.payload;
-      state.passedTests = action.payload.filter(item => item.status === 2)
+    setQuestionnaires: (state, action) => {
+      state.questionnaires = action.payload;
    },
    setSelectedTest: (state, action) => {
      state.selectedTest = action.payload
    },
+    setCompleteTest: (state, action) => {
+      state.completedTest = true
+    }
  },
  extraReducers: {
    [setUserInfo.fulfilled]: (state, action) => {
@ -68,16 +132,21 @@ export const quizSlice = createSlice({
  },
 });

-export const {setQuestionnairesList, setSelectedTest} = quizSlice.actions;
+export const {setQuestionnaires, setSelectedTest, setCompleteTest} = quizSlice.actions;


-export const selectAnswer = (state) => state.quiz.answer;
-export const selectQuestionnairesOfUser = (state) => state.quiz.dataQuestionnairesOfUser;
+export const answersSelector = (state) => state.quiz.answers;
+export const questionnairesSelector = (state) => state.quiz.questionnaires;
+export const selectedAnswersSelector = (state) => state.quiz.selectedAnswers
+export const questionsSelector = (state) => state.quiz.questions
+export const completedTestSelector = (state) => state.quiz.completedTest
+
 export const selectResult = (state) => state.quiz.result;
 export const selectedTest = (state) => state.quiz.selectedTest;
 export const selectPassedTests = (state) => state.quiz.passedTests;
 export const selectUserInfo = (state) => state.quiz.userInfo;


+
 export default quizSlice.reducer;