apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into tracker-connect-back

Browse Source 
# Conflicts:
#	src/assets/images/accept.png
#	src/assets/images/mainTaskCommentImg.png
#	src/components/Modal/TrackerModal/TrackerModal.jsx
#	src/components/UI/ModalTicket/ModalTicket.jsx
#	src/components/UI/TicketFullScreen/TicketFullScreen.jsx
#	src/pages/ProjectTracker/ProjectTracker.js
#	src/redux/projectsTrackerSlice.js
This commit is contained in:
Николай Полтщук
2023-06-12 22:22:51 +03:00
parent 7cb0195f1d 32d6bbc345
commit 5c742411d5
549 changed files with 8228 additions and 8502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages/ActPage/ActPage.js
View File

@ -1,13 +0,0 @@
import React from 'react';
import { ActContent } from "../../components/features/bookkeeping/ActContent/ActContent"
import { BookkeepingTemplete } from "../../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete"
export const ActPage = () => {
return (
<div>
<BookkeepingTemplete showBreadcrumps nameBreeadcrumps="Создание акта">
<ActContent></ActContent>
</BookkeepingTemplete>
</div>
)
}

14
src/pages/ActPage/ActPage.jsx Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import { ActContent } from "@components/features/bookkeeping/ActContent/ActContent";
import { BookkeepingTemplete } from "@components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete";
export const ActPage = () => {
return (
<div>
<BookkeepingTemplete showBreadcrumps nameBreeadcrumps="Создание акта">
<ActContent></ActContent>
</BookkeepingTemplete>
</div>
);
};

26
src/pages/Article/Article.jsx
View File

@ -1,23 +1,23 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar";
import { Footer } from "../../components/Footer/Footer";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import CardArticle from "../../components/UI/CardArticle/CardArticle";
import CardArticle from "@components/CardArticle/CardArticle";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import SideBar from "@components/SideBar/SideBar";
import mockImgArticle from "../../images/mockImgArticle.png";
import rightArrow from "../../images/right-arrow.png";
import yandexZen from "../../images/yandexZen.svg";
import cardCalendar from "../../images/cardCalendar.svg";
import cardImg1 from "../../images/cardArticleItem.png";
import cardImg2 from "../../images/cardArticleItem2.png";
import cardImg3 from "../../images/cardArticleItem3.png";
import rightArrow from "assets/icons/arrows/left-arrow.png";
import cardCalendar from "assets/icons/cardCalendar.svg";
import yandexZen from "assets/icons/yandexZen.svg";
import cardImg2 from "assets/images/mock/cardArticleItem2.png";
import cardImg3 from "assets/images/mock/cardArticleItem3.png";
import cardImg1 from "assets/images/mock/cardArticleItem.png";
import mockImgArticle from "assets/images/mock/mockImgArticle.png";
import "./article.scss";
export const Article = ({}) => {
export const Article = () => {
const [article] = useState([
{
image: cardImg1,

366
src/pages/AuthForCandidate/AuthForCandidate.jsx
View File

@ -1,188 +1,208 @@
import React, {useEffect, useRef, useState} from "react";
import {loading, selectIsLoading} from "../../redux/loaderSlice";
import {apiRequest} from "../../api/request";
import {auth, selectAuth, setUserInfo} from "../../redux/outstaffingSlice";
import {setRole} from "../../redux/roleSlice";
import {useDispatch, useSelector} from "react-redux";
import React, { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar";
import CategoriesItem from "../../components/CategoriesItem/CategoriesItem"
import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate"
import {Footer} from "../../components/Footer/Footer";
import { loading, selectIsLoading } from "@redux/loaderSlice";
import { auth, selectAuth, setUserInfo } from "@redux/outstaffingSlice";
import { setRole } from "@redux/roleSlice";
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"
import { apiRequest } from "@api/request";
import authImg from "../../images/authCandidateFormImg.png"
import arrowBtn from "../../images/arrowRight.png";
import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import StepsForCandidate from "@components/StepsForCandidate/StepsForCandidate";
import './authForCandidate.scss';
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
import "./authForCandidate.scss";
export const AuthForCandidate = () => {
const isLoading = useSelector(selectIsLoading);
const ref = useRef();
const dispatch = useDispatch();
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
const getToken = localStorage.getItem("auth_token");
const isLoading = useSelector(selectIsLoading);
const ref = useRef();
const dispatch = useDispatch();
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
const getToken = localStorage.getItem("auth_token");
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 [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
},
]);
useEffect(() => {
if (isAuth || getToken) {
navigate("/profile");
}
}, [getToken]);
useEffect(() => {
if (isAuth || getToken) {
navigate("/profile");
const submitHandler = () => {
let formData = new FormData(ref.current);
if (!isLoading) {
dispatch(loading(true));
apiRequest("/user/login", {
method: "POST",
data: formData,
}).then((res) => {
if (!res.access_token) {
dispatch(loading(false));
} else {
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
);
dispatch(auth(true));
dispatch(setUserInfo(res));
dispatch(loading(false));
dispatch(setRole("ROLE_PARTNER"));
}
}, [getToken]);
});
}
};
const submitHandler = () => {
let formData = new FormData(ref.current);
if (!isLoading) {
dispatch(loading(true));
apiRequest("/user/login", {
method: "POST",
data: formData,
}).then((res) => {
if (!res.access_token) {
dispatch(loading(false));
} else {
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
);
dispatch(auth(true));
dispatch(setUserInfo(res));
dispatch(loading(false));
dispatch(setRole("ROLE_PARTNER"));
}
});
}
};
return (
<div className="auth-candidate">
<AuthHeader />
<div className="container">
<div className="auth__wrapper">
<div className="auth__info">
<h3>Войти, уже есть доступ</h3>
<img src={authImg} alt="img" />
<p>
если вы получили доступ пройдя 2 шага для входа или хотите узнать
свои результаты в кабинете
</p>
</div>
<form ref={ref} className="auth__form">
<label htmlFor="login">Ваш email *</label>
<input id="login" type="text" name="username" placeholder="Email" />
return(
<div className='auth-candidate'>
<AuthHeader />
<div className='container'>
<div className='auth__wrapper'>
<div className='auth__info'>
<h3>Войти, уже есть доступ</h3>
<img src={authImg} alt='img' />
<p>если вы получили доступ пройдя 2 шага для входа или хотите узнать свои результаты в кабинете</p>
</div>
<form ref={ref} className='auth__form'>
<label htmlFor="login">Ваш email *</label>
<input id="login" type="text" name="username" placeholder="Email" />
<label htmlFor="password">Ваш пароль*</label>
<input
id="password"
type="password"
name="password"
placeholder="Пароль"
/>
<button
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
>Войти</button>
</form>
</div>
<div className='auth-candidate__start'>
<h2 className="auth-candidate__start__title">Хочу в команду <span>Айти специалистов</span></h2>
<div className="change-mode__arrow">
<img src={arrowBtn}></img>
</div>
<p className="auth-candidate__start__description">Для нас не имеет значение Ваша локация.</p>
<div className='auth-candidate__start__categoriesWrapper'>
<StepsForCandidate step="шаг 1 - выбери специализацтию" />
{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>
</div>
<SideBar />
<Footer/>
<label htmlFor="password">Ваш пароль*</label>
<input
id="password"
type="password"
name="password"
placeholder="Пароль"
/>
<button
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
>
Войти
</button>
</form>
</div>
)
<div className="auth-candidate__start">
<h2 className="auth-candidate__start__title">
Хочу в команду <span>Айти специалистов</span>
</h2>
<div className="change-mode__arrow">
<img src={arrowBtn} alt="#"></img>
</div>
<p className="auth-candidate__start__description">
Для нас не имеет значение Ваша локация.
</p>
<div className="auth-candidate__start__categoriesWrapper">
<StepsForCandidate step="шаг 1 - выбери специализацтию" />
{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>
</div>
<SideBar />
<Footer />
</div>
);
};

36
src/pages/AuthForDevelopers/AuthForDevelopers.jsx
View File

@ -1,24 +1,24 @@
import React, { useEffect, useState } from "react";
import { AuthBox } from "../../components/AuthBox/AuthBox";
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import arrow from "../../images/arrow__login_page.png";
import medium from "../../images/medium_male_big.png";
import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.png";
import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import { selectAuth } from "../../redux/outstaffingSlice";
import { Link, useNavigate } from "react-router-dom";
import { scrollToForm } from "../../helper";
import { Footer } from "../../components/Footer/Footer";
import SideBar from "../../components/SideBar/SideBar";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
import { selectAuth } from "@redux/outstaffingSlice";
import { scrollToForm } from "@utils/helper";
import { AuthBox } from "@components/AuthBox/AuthBox";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import SliderWorkers from "@components/SliderWorkers/SliderWorkers";
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/arrow__login_page.png";
import text from "assets/images/Body_Text.png";
import vector from "assets/images/Vector_Smart_Object.png";
import vectorBlack from "assets/images/Vector_Smart_Object_black.png";
import cross from "assets/images/cross.png";
import medium from "assets/images/medium_male_big.png";
import "./authForDevelopers.scss";

32
src/pages/AuthForPartners/AuthForPartners.js → src/pages/AuthForPartners/AuthForPartners.jsx
View File

@ -1,22 +1,24 @@
import React, { useEffect } from "react";
import arrow from "../../images/arrow__login_page.png";
import authImg from "../../images/auth_img.png";
import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.png";
import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import { useSelector } from "react-redux";
import { selectAuth } from "../../redux/outstaffingSlice";
import { Link, useNavigate } from "react-router-dom";
import { scrollToForm } from "../../helper";
import { Footer } from "../../components/Footer/Footer";
import { AuthBox } from "../../components/AuthBox/AuthBox";
import SideBar from "../../components/SideBar/SideBar";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
import { selectAuth } from "@redux/outstaffingSlice";
import { scrollToForm } from "@utils/helper";
import { AuthBox } from "@components/AuthBox/AuthBox";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import SliderWorkers from "@components/SliderWorkers/SliderWorkers";
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/arrow__login_page.png";
import text from "assets/images/Body_Text.png";
import vector from "assets/images/Vector_Smart_Object.png";
import vectorBlack from "assets/images/Vector_Smart_Object_black.png";
import authImg from "assets/images/auth_img.png";
import cross from "assets/images/cross.png";
import "./authForPartners.scss";

28
src/pages/Blog/Blog.jsx
View File

@ -1,24 +1,22 @@
import React, { useState } from "react";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import CardArticle from "../../components/UI/CardArticle/CardArticle";
import CardArticle from "@components/CardArticle/CardArticle";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import SideBar from "@components/SideBar/SideBar";
// import arrowRight from "../../images/arrowRight.png";
import blogArrow from "../../images/blogArrow.svg";
import cardImg1 from "../../images/cardArticleItem.png";
import cardImg2 from "../../images/cardArticleItem2.png";
import cardImg3 from "../../images/cardArticleItem3.png";
import cardImg4 from "../../images/cardArticleItem4.png";
import cardImg5 from "../../images/cardArticleItem5.png";
import cardImg6 from "../../images/cardArticleItem6.png";
import blogArrow from "assets/icons/arrows/blogArrow.svg";
import cardImg2 from "assets/images/mock/cardArticleItem2.png";
import cardImg3 from "assets/images/mock/cardArticleItem3.png";
import cardImg4 from "assets/images/mock/cardArticleItem4.png";
import cardImg5 from "assets/images/mock/cardArticleItem5.png";
import cardImg6 from "assets/images/mock/cardArticleItem6.png";
import cardImg1 from "assets/images/mock/cardArticleItem.png";
import "./blog.scss";
export const Blog = ({}) => {
export const Blog = () => {
const [article] = useState([
{
image: cardImg1,

26
src/pages/Bookkeeping.js
View File

@ -1,18 +1,16 @@
import React from 'react';
import { BookkeepingTemplete } from "../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete"
import { BookkeepingContent } from "../components/features/bookkeeping/BookkeepingContent/BookkeepingContent"
import React from "react";
import { BookkeepingContent } from "@components/features/bookkeeping/BookkeepingContent/BookkeepingContent";
import { BookkeepingTemplete } from "@components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete";
const Bookkeeping = () => {
return(
<div>
<BookkeepingTemplete>
<BookkeepingContent></BookkeepingContent>
</BookkeepingTemplete>
</div>
)
}
export default Bookkeeping
return (
<div>
<BookkeepingTemplete>
<BookkeepingContent></BookkeepingContent>
</BookkeepingTemplete>
</div>
);
};
export default Bookkeeping;

103
src/pages/FormPage/FormPage.js
View File

@ -1,103 +0,0 @@
import React, {useEffect} from 'react'
import {useDispatch, useSelector} from 'react-redux'
import {useParams, useNavigate, Navigate} from 'react-router-dom'
import SVG from 'react-inlinesvg'
import Form from '../../components/Form/Form'
import {Footer} from '../../components/Footer/Footer'
import {LogoutButton} from "../../components/LogoutButton/LogoutButton";
import arrow from '../../images/right-arrow.png'
import rectangle from '../../images/rectangle_secondPage.png'
import telegramIcon from '../../images/telegram-icon.svg'
import {LEVELS, SKILLS} from '../../constants/constants'
import {currentCandidate, selectCurrentCandidate} from '../../redux/outstaffingSlice'
import {apiRequest} from "../../api/request";
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();
const candidate = useSelector(selectCurrentCandidate);
const goBack = () => {
navigate(-1)
};
useEffect(()=> {
if (!candidate.id) {
apiRequest('/profile', {
params: Number(params.id)
})
.then((el) => dispatch(currentCandidate(el)))
}
}, []);
return (
<div className='container'>
<div className='form-page'>
<div className='form-page__back'>
<div className='form-page__arrow' onClick={goBack}>
<div className='form-page__arrow-img'>
<img src={arrow} alt=''/>
</div>
<div className='form-page__back-to-candidate'>
<span>Вернуться к кандидату</span>
</div>
</div>
<LogoutButton />
</div>
<div className='form-page__candidate'>
<div className='form-page__avatar'>
{candidate.photo && <img src={urlForLocal(candidate.photo)} alt='candidate avatar'/>}
</div>
<div className='form-page__candidate-info'>
<div className='form-page__position'>
<span>
{candidate.specification} {SKILLS[candidate.position_id]},{' '}
{LEVELS[candidate.level]}
</span>
</div>
<div className='form-page__selected'>
<img src={rectangle} alt='rectangle'/>
<span>Выбранный кандидат</span>
</div>
</div>
</div>
<div className='form-page__interview'>
<div className='form-page__form'>
<Form/>
</div>
<div className='form-page__separator'>
<div className='form-page__line'></div>
<div className='form-page__option'>или</div>
</div>
<div className='form-page__telegram'>
<div className='form-page__telegram-text'>
Заявка на собеседование через телеграм
</div>
<div className='form-page__telegram-icon'>
<a href='https://t.me/st0kir' target='_blank' rel="noreferrer">
<SVG src={telegramIcon}/>
</a>
</div>
</div>
</div>
<Footer/>
</div>
</div>
)
};
export default FormPage

105
src/pages/FormPage/FormPage.jsx Normal file
View File

@ -0,0 +1,105 @@
import React, { useEffect } from "react";
import SVG from "react-inlinesvg";
import { useDispatch, useSelector } from "react-redux";
import { Navigate, useNavigate, useParams } from "react-router-dom";
import {
currentCandidate,
selectCurrentCandidate,
} from "@redux/outstaffingSlice";
import { LEVELS, SKILLS } from "@utils/constants";
import { urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import { Footer } from "@components/Common/Footer/Footer";
import Form from "@components/Form/Form";
import { LogoutButton } from "@components/LogoutButton/LogoutButton";
import arrow from "assets/icons/arrows/left-arrow.png";
import telegramIcon from "assets/icons/telegram-icon.svg";
import rectangle from "assets/images/rectangle_secondPage.png";
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();
const candidate = useSelector(selectCurrentCandidate);
const goBack = () => {
navigate(-1);
};
useEffect(() => {
if (!candidate.id) {
apiRequest("/profile", {
params: Number(params.id),
}).then((el) => dispatch(currentCandidate(el)));
}
}, []);
return (
<div className="container">
<div className="form-page">
<div className="form-page__back">
<div className="form-page__arrow" onClick={goBack}>
<div className="form-page__arrow-img">
<img src={arrow} alt="" />
</div>
<div className="form-page__back-to-candidate">
<span>Вернуться к кандидату</span>
</div>
</div>
<LogoutButton />
</div>
<div className="form-page__candidate">
<div className="form-page__avatar">
{candidate.photo && (
<img src={urlForLocal(candidate.photo)} alt="candidate avatar" />
)}
</div>
<div className="form-page__candidate-info">
<div className="form-page__position">
<span>
{candidate.specification} {SKILLS[candidate.position_id]},{" "}
{LEVELS[candidate.level]}
</span>
</div>
<div className="form-page__selected">
<img src={rectangle} alt="rectangle" />
<span>Выбранный кандидат</span>
</div>
</div>
</div>
<div className="form-page__interview">
<div className="form-page__form">
<Form />
</div>
<div className="form-page__separator">
<div className="form-page__line"></div>
<div className="form-page__option">или</div>
</div>
<div className="form-page__telegram">
<div className="form-page__telegram-text">
Заявка на собеседование через телеграм
</div>
<div className="form-page__telegram-icon">
<a href="https://t.me/st0kir" target="_blank" rel="noreferrer">
<SVG src={telegramIcon} />
</a>
</div>
</div>
</div>
<Footer />
</div>
</div>
);
};
export default FormPage;

122
src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.jsx
View File

@ -1,60 +1,62 @@
import { useNavigate, useParams } from "react-router";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import SideBar from "../../components/SideBar/SideBar";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import { Footer } from "../../components/Footer/Footer";
import arrowBtn from "../../images/arrowRight.png";
import "./FrequentlyAskedQuestion.scss";
import { useEffect, useState } from "react";
import {
FREQUENTLY_ASKED_QUESTIONS_ROUTE,
FREQUENTLY_ASKED_QUESTION_ROUTE,
} from "../../constants/router-path";
export const FrequentlyAskedQuestion = () => {
const params = useParams();
const navigate = useNavigate()
const [question, setQuestion] = useState({
id: params.id,
title: "Это фриланс-платформа?",
answer:
"Нет, мы работаем только с юридическими лицами и индивидуальными предпринимателями и тщательно проверяем своих партнеров. Партнерами являются агентства, которые специализируются на оказании услуг в формате аутстафф-модели и обладают глубокой экспертизой в разработке и внедрении ИТ-проектов.",
});
useEffect(() => {
//тут запрос
}, []);
return (
<div className="frequently-asked-question">
<AuthHeader />
<SideBar />
<div className="frequently-asked-question__container container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/auth" },
{
name: "FAQ (часто задаваемые вопросы)",
link: FREQUENTLY_ASKED_QUESTIONS_ROUTE,
},
{
name: question.title,
link: FREQUENTLY_ASKED_QUESTION_ROUTE + "/" + params.id,
},
]}
/>
<div className="frequently-asked-question__title">{question.title}</div>
<div className="frequently-asked-question__back" onClick={()=>navigate(-1)}>
<div className="frequently-asked-question__arrow">
<img src={arrowBtn}></img>
</div>
<p>вернуться к списку вопросов</p>
</div>
<div className="frequently-asked-question__answer">
<p>{question.answer}</p>
</div>
</div>
<Footer />
</div>
);
};
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import SideBar from "@components/SideBar/SideBar";
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import "./FrequentlyAskedQuestion.scss";
export const FrequentlyAskedQuestion = () => {
const params = useParams();
const navigate = useNavigate();
const [question] = useState({
id: params.id,
title: "Это фриланс-платформа?",
answer:
"Нет, мы работаем только с юридическими лицами и индивидуальными предпринимателями и тщательно проверяем своих партнеров. Партнерами являются агентства, которые специализируются на оказании услуг в формате аутстафф-модели и обладают глубокой экспертизой в разработке и внедрении ИТ-проектов.",
});
useEffect(() => {
//тут запрос
}, []);
return (
<div className="frequently-asked-question">
<AuthHeader />
<SideBar />
<div className="frequently-asked-question__container container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/auth" },
{
name: "FAQ (часто задаваемые вопросы)",
link: "/frequently-asked-questions",
},
{
name: question.title,
link: `/frequently-asked-question/${params.id}`,
},
]}
/>
<div className="frequently-asked-question__title">{question.title}</div>
<div
className="frequently-asked-question__back"
onClick={() => navigate(-1)}
>
<div className="frequently-asked-question__arrow">
<img src={arrowBtn}></img>
</div>
<p>вернуться к списку вопросов</p>
</div>
<div className="frequently-asked-question__answer">
<p>{question.answer}</p>
</div>
</div>
<Footer />
</div>
);
};

227
src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx
View File

@ -1,110 +1,117 @@
import React from "react";
import "./FrequentlyAskedQuestions.scss";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar";
import arrow from "./../../images/faq/arrow.svg";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import { FREQUENTLY_ASKED_QUESTIONS_ROUTE } from "../../constants/router-path";
import { FrequentlyAskedQuestionsItem } from "../../components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem";
export const FrequentlyAskedQuestions = () => {
const rubrics = [
{
title: 'Общие вопросы ',
questions: [
{
id: 1,
title: 'Это фриланс-платформа?'
},
{
id: 2,
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
},
{
id: 3,
title: 'Это фриланс-платформа?'
},
{
id: 4,
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
}
]
},
{
title: 'Поиск специалиста',
questions: [
{
id: 11,
title: 'Это фриланс-платформа?'
},
{
id: 22,
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
},
{
id: 33,
title: 'Это фриланс-платформа?'
},
{
id: 44,
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
}
]
},
{
title: 'Бронирование специалиста',
questions: [
{
id: 11,
title: 'Это фриланс-платформа?'
}
]
},
{
title: 'Работа с выбранным специалистом',
questions: [
{
id: 11,
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?'
}
]
},
]
return (
<div className="frequently-asked-questions">
<AuthHeader />
<SideBar />
<div className="frequently-asked-questions__container container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/auth" },
{ name: "FAQ (часто задаваемые вопросы)", link: FREQUENTLY_ASKED_QUESTIONS_ROUTE },
]}
/>
<div className="frequently-asked-questions__about">
<div className="frequently-asked-questions__title">FAQ</div>
<div className="frequently-asked-questions__arrow">
<img src={arrow} alt="arrow" />
</div>
<div className="frequently-asked-questions__description">
База знаний, которая дает ответы на популярные вопросы, тем самым
помогая нашим клиентам разобраться в продукте, сервисе и вариантах
сотрудничества с нашей компанией.
</div>
</div>
<div className="frequently-asked-questions__items">
{
rubrics.map((rubric,index)=><FrequentlyAskedQuestionsItem rubric={rubric} key={index} />)
}
</div>
</div>
<Footer />
</div>
);
};
import React from "react";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import { FrequentlyAskedQuestionsItem } from "@components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import SideBar from "@components/SideBar/SideBar";
import arrow from "assets/images/faq/arrow.svg";
import "./FrequentlyAskedQuestions.scss";
export const FrequentlyAskedQuestions = () => {
const rubrics = [
{
title: "Общие вопросы ",
questions: [
{
id: 1,
title: "Это фриланс-платформа?",
},
{
id: 2,
title:
"Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
},
{
id: 3,
title: "Это фриланс-платформа?",
},
{
id: 4,
title:
"Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
},
],
},
{
title: "Поиск специалиста",
questions: [
{
id: 11,
title: "Это фриланс-платформа?",
},
{
id: 22,
title:
"Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
},
{
id: 33,
title: "Это фриланс-платформа?",
},
{
id: 44,
title:
"Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
},
],
},
{
title: "Бронирование специалиста",
questions: [
{
id: 11,
title: "Это фриланс-платформа?",
},
],
},
{
title: "Работа с выбранным специалистом",
questions: [
{
id: 11,
title:
"Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
},
],
},
];
return (
<div className="frequently-asked-questions">
<AuthHeader />
<SideBar />
<div className="frequently-asked-questions__container container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/auth" },
{
name: "FAQ (часто задаваемые вопросы)",
link: "/frequently-asked-questions",
},
]}
/>
<div className="frequently-asked-questions__about">
<div className="frequently-asked-questions__title">FAQ</div>
<div className="frequently-asked-questions__arrow">
<img src={arrow} alt="arrow" />
</div>
<div className="frequently-asked-questions__description">
База знаний, которая дает ответы на популярные вопросы, тем самым
помогая нашим клиентам разобраться в продукте, сервисе и вариантах
сотрудничества с нашей компанией.
</div>
</div>
<div className="frequently-asked-questions__items">
{rubrics.map((rubric, index) => (
<FrequentlyAskedQuestionsItem rubric={rubric} key={index} />
))}
</div>
</div>
<Footer />
</div>
);
};

81
src/pages/Home/Home.js
View File

@ -1,81 +0,0 @@
import React, {useState, useEffect} from 'react'
import {useDispatch} from 'react-redux'
import Outstaffing from '../../components/Outstaffing/Outstaffing'
import Description from '../../components/Description/Description'
import {Footer} from '../../components/Footer/Footer'
import {profiles, tags} from '../../redux/outstaffingSlice'
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 = () => {
if(localStorage.getItem('role_status') !== '18') {
return <Navigate to="/profile" replace/>
}
const [isLoadingMore, setIsLoadingMore] = useState(false);
const [index, setIndex] = useState(4);
const dispatch = useDispatch();
useEffect(() => {
setIsLoadingMore(true);
apiRequest('/profile', {
params: {limit: 1000},
}).then((profileArr) => {
dispatch(profiles(profileArr));
setIsLoadingMore(false)
});
apiRequest('/skills/skills-on-main-page', {}).then((skills) => {
if (!skills) {
return []
}
const keys = Object.keys(skills);
const values = Object.values(skills);
const tempTags = values.map((value, index) =>
value.map((val) => {
return {id: val.id, value: val.tags, name: keys[index]}
})
);
dispatch(tags(tempTags))
})
}, [index]);
const loadMore = (count) => {
setIndex((prev) => prev + count)
};
return (
<>
<ProfileHeader/>
<Navigation />
<div className="catalog">
<div className='container'>
<ProfileBreadcrumbs links={[
{name: 'Главная', link: '/profile'},
{name: 'Запросы и открытые позиции', link: '/profile/requests'},
{name: 'Каталог', link: '/profile/catalog'}
]}
/>
<h2 className="catalog__title">Каталог специалистов</h2>
<Outstaffing/>
<Description onLoadMore={loadMore} isLoadingMore={isLoadingMore}/>
<Footer/>
</div>
</div>
</>
)
};
export default Home

79
src/pages/Home/Home.jsx Normal file
View File

@ -0,0 +1,79 @@
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { Navigate } from "react-router-dom";
import { profiles, tags } from "@redux/outstaffingSlice";
import { apiRequest } from "@api/request";
import { Footer } from "@components/Common/Footer/Footer";
import Description from "@components/Description/Description";
import { Navigation } from "@components/Navigation/Navigation";
import Outstaffing from "@components/Outstaffing/Outstaffing";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
const Home = () => {
if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace />;
}
const [isLoadingMore, setIsLoadingMore] = useState(false);
const [index, setIndex] = useState(4);
const dispatch = useDispatch();
useEffect(() => {
setIsLoadingMore(true);
apiRequest("/profile", {
params: { limit: 1000 },
}).then((profileArr) => {
dispatch(profiles(profileArr));
setIsLoadingMore(false);
});
apiRequest("/skills/skills-on-main-page", {}).then((skills) => {
if (!skills) {
return [];
}
const keys = Object.keys(skills);
const values = Object.values(skills);
const tempTags = values.map((value, index) =>
value.map((val) => {
return { id: val.id, value: val.tags, name: keys[index] };
})
);
dispatch(tags(tempTags));
});
}, [index]);
const loadMore = (count) => {
setIndex((prev) => prev + count);
};
return (
<>
<ProfileHeader />
<Navigation />
<div className="catalog">
<div className="container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Запросы и открытые позиции", link: "/profile/requests" },
{ name: "Каталог", link: "/profile/catalog" },
]}
/>
<h2 className="catalog__title">Каталог специалистов</h2>
<Outstaffing />
<Description onLoadMore={loadMore} isLoadingMore={isLoadingMore} />
<Footer />
</div>
</div>
</>
);
};
export default Home;

731
src/pages/PartnerAddRequest/PartnerAddRequest.js
View File

@ -1,315 +1,448 @@
import React, {useEffect, useState } from 'react';
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Link, Navigate, useNavigate } from "react-router-dom";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {Footer} from "../../components/Footer/Footer";
import {Link, Navigate, useNavigate} from "react-router-dom";
import { Navigation } from '../../components/Navigation/Navigation';
import {apiRequest} from "../../api/request";
import {useSelector} from "react-redux";
import { getPartnerRequestInfo } from "@redux/outstaffingSlice";
import { getPartnerRequestInfo } from '../../redux/outstaffingSlice'
import { apiRequest } from "@api/request";
import arrowDown from "../../images/selectArrow.png"
import processImg from "../../images/partnerAddRequestFirstImg.png"
import reportImg from "../../images/partnerAddRequestSecondImg.png"
import documentsImg from "../../images/partnerAddRequestThirdInfo.png"
import deleteIcon from "../../images/close.png"
import { Footer } from "@components/Common/Footer/Footer";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import deleteIcon from "assets/icons/close.png";
import processImg from "assets/images/partnerProfile/partnerAddRequestFirstImg.png";
import reportImg from "assets/images/partnerProfile/partnerAddRequestSecondImg.png";
import documentsImg from "assets/images/partnerProfile/partnerAddRequestThirdInfo.png";
import './partnerAddRequest.scss'
import "./partnerAddRequest.scss";
export const PartnerAddRequest = () => {
if(localStorage.getItem('role_status') !== '18') {
return <Navigate to="/profile" replace/>
if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace />;
}
const partnerRequestInfo = useSelector(getPartnerRequestInfo);
const currentUrl = useState(window.location.pathname);
const navigate = useNavigate();
const [skills, setSkills] = useState([]);
const [filteredSkills, setFilteredSkills] = useState([]);
const [specializationList, setSpecializationList] = useState([]);
const [levelList, setLevelList] = useState([]);
const [countList] = useState([1, 2, 3, 4, 5]);
const [openSkillsSelect, setOpenSkillsSelect] = useState(false);
const [openSpecializationList, setOpenSpecializationListOpen] =
useState(false);
const [openLevelList, setOpenLevelList] = useState(false);
const [openCountList, setOpenCountList] = useState(false);
const [editRequest, setEditRequest] = useState(false);
const [selectedSkills, setSelectedSkills] = useState([]);
const [selectedSpecialization, setSelectedSpecialization] = useState(
"Выберите специализацию"
);
const [selectedLevel, setSelectedLevel] = useState("Выберите уровень");
const [selectedCount, setSelectedCount] = useState(
"Выберите кол-во сотрудников"
);
const [inputs, setInputs] = useState({ title: "", description: "" });
if (
currentUrl[0] === "/profile/edit-request" &&
!Object.keys(partnerRequestInfo).length
) {
return <Navigate to="/profile/requests" replace />;
}
useEffect(() => {
apiRequest(`/profile/positions-list`).then((el) =>
setSpecializationList(el)
);
apiRequest(`/profile/level-list`).then((el) => setLevelList(el));
apiRequest(`/skills/get-skills-list`).then((el) => {
setSkills(el);
setFilteredSkills(el);
});
}, []);
useEffect(() => {
if (
currentUrl[0] === "/profile/edit-request" &&
Object.keys(partnerRequestInfo).length
) {
setInputs({
title: partnerRequestInfo.title,
description: partnerRequestInfo.descr,
});
setSelectedSpecialization(partnerRequestInfo.position);
setSelectedLevel({
name: partnerRequestInfo.level,
id: partnerRequestInfo.knowledge_level_id,
});
setSelectedCount(partnerRequestInfo.specialist_count);
setSelectedSkills(partnerRequestInfo.skills);
setEditRequest(true);
}
}, []);
const partnerRequestInfo = useSelector(getPartnerRequestInfo);
const currentUrl = useState(window.location.pathname)
const navigate= useNavigate();
const [skills, setSkills] = useState([])
const [filteredSkills, setFilteredSkills] = useState([])
const [specializationList, setSpecializationList] = useState([])
const [levelList, setLevelList] = useState([])
const [countList] = useState([1, 2, 3, 4, 5])
const [openSkillsSelect, setOpenSkillsSelect] = useState(false)
const [openSpecializationList, setOpenSpecializationListOpen] = useState(false)
const [openLevelList, setOpenLevelList] = useState(false)
const [openCountList, setOpenCountList] = useState(false)
const [editRequest, setEditRequest] = useState(false)
const [selectedSkills, setSelectedSkills] = useState([])
const [selectedSpecialization, setSelectedSpecialization] = useState('Выберите специализацию')
const [selectedLevel, setSelectedLevel] = useState('Выберите уровень')
const [selectedCount, setSelectedCount] = useState('Выберите кол-во сотрудников')
const [inputs, setInputs] = useState({title: '', description: ''})
if (currentUrl[0] === "/profile/edit-request" && !Object.keys(partnerRequestInfo).length) {
return <Navigate to="/profile/requests" replace/>
const disableBtn = () => {
if (
!inputs.title ||
typeof selectedSpecialization === "string" ||
typeof selectedLevel === "string" ||
typeof selectedCount === "string" ||
!inputs.description ||
!selectedSkills.length
) {
return false;
}
return true;
};
useEffect(() => {
apiRequest(`/profile/positions-list`).then((el) => setSpecializationList(el))
apiRequest(`/profile/level-list`).then((el) => setLevelList(el))
apiRequest(`/skills/get-skills-list`).then((el) => {
setSkills(el)
setFilteredSkills(el)
})
}, [])
useEffect(() => {
if (currentUrl[0] === "/profile/edit-request" && Object.keys(partnerRequestInfo).length) {
setInputs({title: partnerRequestInfo.title, description: partnerRequestInfo.descr})
setSelectedSpecialization(partnerRequestInfo.position)
setSelectedLevel({name: partnerRequestInfo.level, id: partnerRequestInfo.knowledge_level_id})
setSelectedCount(partnerRequestInfo.specialist_count)
setSelectedSkills(partnerRequestInfo.skills)
setEditRequest(true)
}
}, [])
const disableBtn = () => {
if (!inputs.title ||
typeof selectedSpecialization === "string" ||
typeof selectedLevel === "string" ||
typeof selectedCount === "string" ||
!inputs.description ||
!selectedSkills.length) {
return false
}
return true
const handler = () => {
if (currentUrl[0] === "/profile/edit-request") {
apiRequest("/request/update-request", {
method: "PUT",
data: {
user_id: localStorage.getItem("id"),
request_id: partnerRequestInfo.id,
title: inputs.title,
position_id: selectedSpecialization.id,
knowledge_level_id: selectedLevel.id,
specialist_count: selectedCount,
status: 1,
descr: inputs.description,
skill_ids: selectedSkills.map((skill) => {
return skill.id;
}),
},
}).then(() => {
navigate("/profile/requests");
});
} else {
apiRequest("/request/create-request", {
method: "POST",
data: {
user_id: localStorage.getItem("id"),
title: inputs.title,
position_id: selectedSpecialization.id,
knowledge_level_id: selectedLevel.id,
specialist_count: selectedCount,
status: 1,
descr: inputs.description,
skill_ids: selectedSkills.map((skill) => {
return skill.id;
}),
},
}).then(() => {
navigate("/profile/requests");
});
}
};
const handler = () => {
if (currentUrl[0] === "/profile/edit-request") {
apiRequest('/request/update-request', {
method: 'PUT',
data: {
user_id: localStorage.getItem('id'),
request_id: partnerRequestInfo.id,
title: inputs.title,
position_id: selectedSpecialization.id,
knowledge_level_id: selectedLevel.id,
specialist_count: selectedCount,
status: 1,
descr: inputs.description,
skill_ids: selectedSkills.map((skill) => {return skill.id})
}
}).then((res) => {
navigate('/profile/requests');
})
} else {
apiRequest('/request/create-request', {
method: 'POST',
data: {
user_id: localStorage.getItem('id'),
title: inputs.title,
position_id: selectedSpecialization.id,
knowledge_level_id: selectedLevel.id,
specialist_count: selectedCount,
status: 1,
descr: inputs.description,
skill_ids: selectedSkills.map((skill) => {return skill.id})
}
}).then((res) => {
navigate('/profile/requests');
})
}
}
return (
<div className='partnerAddRequest'>
<ProfileHeader />
<Navigation />
<div className='container'>
<ProfileBreadcrumbs links={[
{name: 'Главная', link: '/profile'},
{name: 'Запросы и открытые позиции', link: '/profile/requests'},
{name: `${editRequest ? 'Редактирование заявки' : 'Создание новой заявки'}`, link: '/profile/add-request'}
]}
/>
<h2 className='partnerAddRequest__title'>{editRequest ? 'Страница редактирования заявки' : 'Страница добавления заявки'}</h2>
<div className='partnerAddRequest__section'>
<div className='partnerAddRequest__form'>
<div className='partnerAddRequest__form__block form__block'>
<h3 className='form__block__title'>Данные открытой позиции</h3>
<div className='form__block__section'>
<h3>Название вакансии</h3>
<div className='form__block__section__input'>
<input value={inputs.title} onChange={e => setInputs((prevValue) => ({...prevValue, title: e.target.value}) )} type='text' placeholder='Вакансия'/>
</div>
</div>
<div className='form__block__section'>
<h3>Выберите специализацию</h3>
<div className='form__block__section__selects' onClick={() => {setOpenSpecializationListOpen(!openSpecializationList)}}>
<div className='form__block__section__select'>
<span>{typeof selectedSpecialization === "string" ? selectedSpecialization : selectedSpecialization.name}</span>
<img className={openSpecializationList ? 'rotate' : ''} src={arrowDown} />
</div>
</div>
{openSpecializationList && Boolean(specializationList.length) &&
<div className='form__block__dropDown'>
{specializationList.map((specialization, index) => {
return <p
key={specialization.id}
onClick={() => {
setOpenSpecializationListOpen(false)
setSelectedSpecialization(specialization)
}}
>
{specialization.name}</p>
})}
</div>
}
</div>
<div className='form__block__section'>
<h3>Навыки</h3>
<div className='form__block__skills' onClick={() => {setOpenSkillsSelect(true)}}>
{Boolean(selectedSkills.length) &&
selectedSkills.map((skill, index) => {
return<div className='skill' key={`selected-${skill.id}`}>
<span >{skill.name}</span>
<img src={deleteIcon} alt='delete'
onClick={() => {
setSkills(prevArray => [...prevArray, skill])
setFilteredSkills(prevArray => [...prevArray, skill])
setSelectedSkills(selectedSkills.filter((skill, indexSkill) => {
return indexSkill !== index
}))
}} />
</div>
})
}
<input type='text' placeholder='Выберите навыки'
onChange={(e) => {
setFilteredSkills(skills.filter((skill) => {
return skill.name.toLowerCase().includes(e.target.value.toLowerCase())
}))
}} />
</div>
{openSkillsSelect && Boolean(filteredSkills.length) &&
<div className='form__block__dropDown'>
{filteredSkills.map((skill, index) => {
return <span
key={skill.id}
onClick={() => {
setSelectedSkills(prevArray => [...prevArray, skill])
setFilteredSkills(filteredSkills.filter((skill, skillIndex) => {
return skillIndex !== index
}))
setSkills(skills.filter((initSkill) => {
return initSkill.id !==skill.id
}))
setOpenSkillsSelect(false)
}}
>
{skill.name}</span>
})}
</div>
}
</div>
</div>
<div className='partnerAddRequest__form__block form__block'>
<h3 className='form__block__title'>Квалификация</h3>
<div className='form__block__section'>
<h3>Выберите уровень знаний </h3>
<div className='form__block__section__select' onClick={() => setOpenLevelList(!openLevelList)}>
<span>{typeof selectedLevel === "string" ? selectedLevel : selectedLevel.name}</span>
<img className={openLevelList ? 'rotate' : ''} src={arrowDown} />
</div>
{openLevelList && Boolean(Object.values(levelList).length) &&
<div className='form__block__dropDown'>
{Object.values(levelList).map((level, index) => {
return <p
key={level}
onClick={() => {
setOpenLevelList(false)
setSelectedLevel({name: level, id: index + 1})
}}
>
{level}</p>
})}
</div>
}
</div>
<div className='form__block__section'>
<h3>Введите необходимое описание</h3>
<textarea value={inputs.description} onChange={e => setInputs((prevValue) => ({...prevValue, description: e.target.value}) )}/>
</div>
<div className='form__block__section'>
<h3>Необходимое количество человек на позицию</h3>
<div className='form__block__section__select' onClick={() => setOpenCountList(true)}>
<span>{selectedCount}</span>
<img className={openCountList ? 'rotate' : ''} src={arrowDown} />
</div>
{openCountList &&
<div className='form__block__dropDown'>
{countList.map((count) => {
return <p
key={count}
onClick={() => {
setOpenCountList(false)
setSelectedCount(count)
}}
>
{count}</p>
})}
</div>
}
</div>
<div className='form__block__buttons'>
<Link to='/profile/requests' className='form__block__cancel'>Отмена</Link>
<button onClick={() => handler()} className={disableBtn() ? 'form__block__save' : 'form__block__save disable'}>Сохранить</button>
</div>
</div>
</div>
<div className='partnerAddRequest__info'>
<div className='partnerAddRequest__info__block'>
<div className='partnerAddRequest__info__block__title'>
<img src={processImg} alt='process' />
<h4>Процесс:</h4>
</div>
<p>
При аутстафе мы предоставляем вам
it-специалистов при этом они находятся в
нашем штате.
<br/><br/>
Вы сможете прособеседовать наших
специалистов, посмотреть проекты и Git.
</p>
</div>
<div className='partnerAddRequest__info__block'>
<div className='partnerAddRequest__info__block__title'>
<img src={reportImg} alt='reportImg' />
<h4>Отчетность:</h4>
</div>
<p>
Вы можете обратиться к специалисту
напрямую.
<br/><br/>
Каждый день специалисты описывают
выполненные работы и затраченные
на это часы.
<br/><br/>
Можем выделить руководителя проекта
и тестировщиков.
</p>
</div>
<div className='partnerAddRequest__info__block'>
<div className='partnerAddRequest__info__block__title'>
<img src={documentsImg} alt='documentsImg' />
<h4>Обмен <br/>документами:</h4>
</div>
<p>
В Личном кабинете платформы
получайте отчеты выполненных работ
и счета на согласование и оплату
</p>
</div>
</div>
return (
<div className="partnerAddRequest">
<ProfileHeader />
<Navigation />
<div className="container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Запросы и открытые позиции", link: "/profile/requests" },
{
name: `${
editRequest ? "Редактирование заявки" : "Создание новой заявки"
}`,
link: "/profile/add-request",
},
]}
/>
<h2 className="partnerAddRequest__title">
{editRequest
? "Страница редактирования заявки"
: "Страница добавления заявки"}
</h2>
<div className="partnerAddRequest__section">
<div className="partnerAddRequest__form">
<div className="partnerAddRequest__form__block form__block">
<h3 className="form__block__title">Данные открытой позиции</h3>
<div className="form__block__section">
<h3>Название вакансии</h3>
<div className="form__block__section__input">
<input
value={inputs.title}
onChange={(e) =>
setInputs((prevValue) => ({
...prevValue,
title: e.target.value,
}))
}
type="text"
placeholder="Вакансия"
/>
</div>
</div>
<div className="form__block__section">
<h3>Выберите специализацию</h3>
<div
className="form__block__section__selects"
onClick={() => {
setOpenSpecializationListOpen(!openSpecializationList);
}}
>
<div className="form__block__section__select">
<span>
{typeof selectedSpecialization === "string"
? selectedSpecialization
: selectedSpecialization.name}
</span>
<img
className={openSpecializationList ? "rotate" : ""}
src={arrowDown}
/>
</div>
</div>
{openSpecializationList &&
Boolean(specializationList.length) && (
<div className="form__block__dropDown">
{specializationList.map((specialization) => {
return (
<p
key={specialization.id}
onClick={() => {
setOpenSpecializationListOpen(false);
setSelectedSpecialization(specialization);
}}
>
{specialization.name}
</p>
);
})}
</div>
)}
</div>
<div className="form__block__section">
<h3>Навыки</h3>
<div
className="form__block__skills"
onClick={() => {
setOpenSkillsSelect(true);
}}
>
{Boolean(selectedSkills.length) &&
selectedSkills.map((skill, index) => {
return (
<div className="skill" key={`selected-${skill.id}`}>
<span>{skill.name}</span>
<img
src={deleteIcon}
alt="delete"
onClick={() => {
setSkills((prevArray) => [...prevArray, skill]);
setFilteredSkills((prevArray) => [
...prevArray,
skill,
]);
setSelectedSkills(
selectedSkills.filter((skill, indexSkill) => {
return indexSkill !== index;
})
);
}}
/>
</div>
);
})}
<input
type="text"
placeholder="Выберите навыки"
onChange={(e) => {
setFilteredSkills(
skills.filter((skill) => {
return skill.name
.toLowerCase()
.includes(e.target.value.toLowerCase());
})
);
}}
/>
</div>
{openSkillsSelect && Boolean(filteredSkills.length) && (
<div className="form__block__dropDown">
{filteredSkills.map((skill, index) => {
return (
<span
key={skill.id}
onClick={() => {
setSelectedSkills((prevArray) => [
...prevArray,
skill,
]);
setFilteredSkills(
filteredSkills.filter((skill, skillIndex) => {
return skillIndex !== index;
})
);
setSkills(
skills.filter((initSkill) => {
return initSkill.id !== skill.id;
})
);
setOpenSkillsSelect(false);
}}
>
{skill.name}
</span>
);
})}
</div>
)}
</div>
</div>
<Footer />
<div className="partnerAddRequest__form__block form__block">
<h3 className="form__block__title">Квалификация</h3>
<div className="form__block__section">
<h3>Выберите уровень знаний </h3>
<div
className="form__block__section__select"
onClick={() => setOpenLevelList(!openLevelList)}
>
<span>
{typeof selectedLevel === "string"
? selectedLevel
: selectedLevel.name}
</span>
<img
className={openLevelList ? "rotate" : ""}
src={arrowDown}
/>
</div>
{openLevelList && Boolean(Object.values(levelList).length) && (
<div className="form__block__dropDown">
{Object.values(levelList).map((level, index) => {
return (
<p
key={level}
onClick={() => {
setOpenLevelList(false);
setSelectedLevel({ name: level, id: index + 1 });
}}
>
{level}
</p>
);
})}
</div>
)}
</div>
<div className="form__block__section">
<h3>Введите необходимое описание</h3>
<textarea
value={inputs.description}
onChange={(e) =>
setInputs((prevValue) => ({
...prevValue,
description: e.target.value,
}))
}
/>
</div>
<div className="form__block__section">
<h3>Необходимое количество человек на позицию</h3>
<div
className="form__block__section__select"
onClick={() => setOpenCountList(true)}
>
<span>{selectedCount}</span>
<img
className={openCountList ? "rotate" : ""}
src={arrowDown}
/>
</div>
{openCountList && (
<div className="form__block__dropDown">
{countList.map((count) => {
return (
<p
key={count}
onClick={() => {
setOpenCountList(false);
setSelectedCount(count);
}}
>
{count}
</p>
);
})}
</div>
)}
</div>
<div className="form__block__buttons">
<Link to="/profile/requests" className="form__block__cancel">
Отмена
</Link>
<button
onClick={() => handler()}
className={
disableBtn()
? "form__block__save"
: "form__block__save disable"
}
>
Сохранить
</button>
</div>
</div>
</div>
<div className="partnerAddRequest__info">
<div className="partnerAddRequest__info__block">
<div className="partnerAddRequest__info__block__title">
<img src={processImg} alt="process" />
<h4>Процесс:</h4>
</div>
<p>
При аутстафе мы предоставляем вам it-специалистов при этом они
находятся в нашем штате.
<br />
<br />
Вы сможете прособеседовать наших специалистов, посмотреть
проекты и Git.
</p>
</div>
<div className="partnerAddRequest__info__block">
<div className="partnerAddRequest__info__block__title">
<img src={reportImg} alt="reportImg" />
<h4>Отчетность:</h4>
</div>
<p>
Вы можете обратиться к специалисту напрямую.
<br />
<br />
Каждый день специалисты описывают выполненные работы и
затраченные на это часы.
<br />
<br />
Можем выделить руководителя проекта и тестировщиков.
</p>
</div>
<div className="partnerAddRequest__info__block">
<div className="partnerAddRequest__info__block__title">
<img src={documentsImg} alt="documentsImg" />
<h4>
Обмен <br />
документами:
</h4>
</div>
<p>
В Личном кабинете платформы получайте отчеты выполненных работ и
счета на согласование и оплату
</p>
</div>
</div>
</div>
)
}
</div>
<Footer />
</div>
);
};

33
src/pages/PartnerBid/PartnerBid.jsx
View File

@ -1,29 +1,30 @@
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, Navigate, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import {
getPartnerRequestId,
getPartnerRequests,
setPartnerRequestId,
setPartnerRequestInfo,
} from "../../redux/outstaffingSlice";
} from "@redux/outstaffingSlice";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import { Navigation } from "../../components/Navigation/Navigation";
import { Loader } from "../../components/Loader/Loader";
import ModalLayout from "../../components/UI/ModalLayout/ModalLayout";
import { urlForLocal } from "@utils/helper";
import { apiRequest } from "../../api/request";
import { getCorrectDate } from "../../components/Calendar/calendarHelper";
import { apiRequest } from "@api/request";
import { urlForLocal } from "../../helper";
import { getCorrectDate } from "@components/Calendar/calendarHelper";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import arrowSwitchDate from "../../images/arrowViewReport.png";
import backEndImg from "../../images/QualificationInfo.png";
import middle from "../../images/QualificationInfoMiddle.png";
import deleteBtn from "../../images/deleteBtn.png";
import arrowSwitchDate from "assets/icons/arrows/arrowViewReport.png";
import backEndImg from "assets/images/QualificationInfo.png";
import middle from "assets/images/QualificationInfoMiddle.png";
import deleteBtn from "assets/images/deleteBtn.png";
import "./partnerBid.scss";
@ -58,7 +59,7 @@ export const PartnerBid = () => {
request_id: requestId,
status: 0,
},
}).then((res) => {
}).then(() => {
navigate("/profile/requests");
});
};

148
src/pages/PartnerEmployees/PartnerEmployees.js
View File

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

BIN
src/pages/PartnerEmployees/avatarMok.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/pages/PartnerEmployees/emplInfo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 596 B

42
src/pages/PartnerRequests/PartnerRequests.js → src/pages/PartnerRequests/PartnerRequests.jsx
View File

@ -1,23 +1,25 @@
import React, { useEffect, useState } from "react";
import { Link, Navigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { Link, Navigate } from "react-router-dom";
import {
setPartnerRequestId,
setPartnerRequests,
} from "../../redux/outstaffingSlice";
} from "@redux/outstaffingSlice";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { SliderWorkers } from "../../components/SliderWorkers/SliderWorkers";
import { Loader } from "../../components/Loader/Loader";
import { Footer } from "../../components/Footer/Footer";
import { apiRequest } from "@api/request";
import { apiRequest } from "../../api/request";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import { SliderWorkers } from "@components/SliderWorkers/SliderWorkers";
import cursorImg from "../../images/cursorImg.png";
import cursorImg from "assets/icons/cursorImg.svg";
import "./partnerRequests.scss";
import { Navigation } from "../../components/Navigation/Navigation";
export const PartnerRequests = () => {
if (localStorage.getItem("role_status") !== "18") {
@ -82,10 +84,12 @@ export const PartnerRequests = () => {
Оператор компании заводит заявку и указывает необходимые
параметры — количество сотрудников, стек, уровень специалиста
</p>
<Link to={"/profile/add-request"}>
<span>+</span>
Создать запрос
</Link>
<BaseButton>
<Link to={"/profile/add-request"}>
<span>+</span>
Создать запрос
</Link>
</BaseButton>
</div>
</div>
)}
@ -95,10 +99,12 @@ export const PartnerRequests = () => {
<div className="partnerRequests__noItems__create__link">
<img src={cursorImg} alt="cursor" />
<p>У вас еще нет запросов на сотрудников</p>
<Link to={"/profile/add-request"}>
<span>+</span>
Создать запрос
</Link>
<BaseButton>
<Link to={"/profile/add-request"}>
<span>+</span>
Создать запрос
</Link>
</BaseButton>
</div>
<div className="partnerRequests__noItems__create__instruction">
<h3>Инструкция: подачи заявки</h3>

39
src/pages/PartnerRequests/partnerRequests.scss
View File

@ -161,21 +161,19 @@
}
}
a {
background: #52b709;
button {
max-width: 188px;
border-radius: 44px;
height: 52px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s all ease;
a {
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
span {
color: white;
font-weight: 700;
@ -186,8 +184,6 @@
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
text-decoration: none;
color: #ffffff;
}
}
}
@ -260,22 +256,23 @@
}
}
a {
background: #52b709;
button {
max-width: 174px;
border-radius: 44px;
width: 100%;
height: 46px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s all ease;
a {
display: flex;
justify-content: center;
align-items: center;
color: white;
width: 100%;
}
span {
color: white;
font-weight: 700;
@ -286,8 +283,6 @@
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
text-decoration: none;
color: #ffffff;
}
}
}

30
src/pages/PartnerSettings/PartnerSettings.jsx
View File

@ -1,13 +1,15 @@
import React from "react";
import { Footer } from "../../components/Footer/Footer";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import astral from "assets/images/logo/astralLogo.png";
import kontur from "assets/images/logo/konturLogo.png";
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 (
@ -38,8 +40,12 @@ export const PartnerSettings = () => {
</div>
<div className="settings__buttons">
<button className="settings__buttons-cancel">Отмена</button>
<button className="settings__buttons-save">Сохранить</button>
<BaseButton styles={"settings__buttons-cancel"}>
Отмена
</BaseButton>
<BaseButton styles={"settings__buttons-save"}>
Сохранить
</BaseButton>
</div>
<span className="settings__agreement">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
@ -75,8 +81,12 @@ export const PartnerSettings = () => {
</div>
<div className="settings__buttons">
<button className="settings__buttons-cancel">Отмена</button>
<button className="settings__buttons-save">Сохранить</button>
<BaseButton styles={"settings__buttons-cancel"}>
Отмена
</BaseButton>
<BaseButton styles={"settings__buttons-save"}>
Сохранить
</BaseButton>
</div>
<span className="settings__agreement">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и

9
src/pages/PartnerSettings/partnerSettings.scss
View File

@ -72,7 +72,6 @@
&-cancel,
&-save {
border-radius: 44px;
width: 151px;
height: 40px;
font-size: 14px;
@ -83,12 +82,10 @@
color: #6f6f6f;
background: white;
border: 0.5px solid #8dc63f;
}
&-save {
color: #ffffff;
background: #52b709;
border: none;
&:hover {
background-color: white;
}
}
}

BIN
src/pages/PartnerTreaties/Images/actTreaties.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 458 B

BIN
src/pages/PartnerTreaties/Images/arrowCheck.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 473 B

BIN
src/pages/PartnerTreaties/Images/arrowDown.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 248 B

BIN
src/pages/PartnerTreaties/Images/avatarMok.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/pages/PartnerTreaties/Images/checkTreaties.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 407 B

4
src/pages/PartnerTreaties/Images/lock.svg
View File

@ -1,4 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.55556 10.1657L3.2866 9.9981L2.55556 10.1657ZM2.55556 6.23549L3.2866 6.40304L2.55556 6.23549ZM13.4445 6.23549L12.7135 6.40304L13.4445 6.23549ZM13.4445 10.1657L12.7135 9.9981L13.4445 10.1657ZM9.92014 13.7726L10.0952 14.5019L9.92014 13.7726ZM6.07995 13.7726L6.25502 13.0433L6.07995 13.7726ZM6.07994 2.62853L6.25502 3.35781L6.07994 2.62853ZM9.92014 2.62853L10.0952 1.89925L9.92014 2.62853ZM6.13009 2C6.13009 1.58579 5.79431 1.25 5.38009 1.25C4.96588 1.25 4.63009 1.58579 4.63009 2H6.13009ZM4.63009 3.67583C4.63009 4.09004 4.96588 4.42583 5.38009 4.42583C5.79431 4.42583 6.13009 4.09004 6.13009 3.67583H4.63009ZM11.37 2C11.37 1.58579 11.0342 1.25 10.62 1.25C10.2058 1.25 9.86999 1.58579 9.86999 2H11.37ZM9.86999 3.67583C9.86999 4.09004 10.2058 4.42583 10.62 4.42583C11.0342 4.42583 11.37 4.09004 11.37 3.67583H9.86999ZM3.2866 9.9981C3.01563 8.81586 3.01563 7.58528 3.2866 6.40304L1.82451 6.06793C1.50299 7.47072 1.50299 8.93042 1.82451 10.3332L3.2866 9.9981ZM12.7135 6.40304C12.9845 7.58528 12.9845 8.81586 12.7135 9.9981L14.1756 10.3332C14.4971 8.93042 14.4971 7.47072 14.1756 6.06794L12.7135 6.40304ZM9.74507 13.0433C8.59722 13.3189 7.40286 13.3189 6.25502 13.0433L5.90487 14.5019C7.28288 14.8327 8.71721 14.8327 10.0952 14.5019L9.74507 13.0433ZM6.25502 3.35781C7.40286 3.08225 8.59722 3.08225 9.74507 3.35781L10.0952 1.89925C8.71721 1.56844 7.28288 1.56844 5.90487 1.89925L6.25502 3.35781ZM6.25502 13.0433C4.79054 12.6918 3.63487 11.5176 3.2866 9.9981L1.82451 10.3332C2.29664 12.3931 3.87186 14.0138 5.90487 14.5019L6.25502 13.0433ZM10.0952 14.5019C12.1282 14.0138 13.7034 12.3931 14.1756 10.3332L12.7135 9.9981C12.3652 11.5176 11.2095 12.6918 9.74507 13.0433L10.0952 14.5019ZM9.74507 3.35781C11.2095 3.70938 12.3652 4.88353 12.7135 6.40304L14.1756 6.06794C13.7034 4.00801 12.1282 2.3873 10.0952 1.89925L9.74507 3.35781ZM5.90487 1.89925C3.87185 2.3873 2.29664 4.008 1.82451 6.06793L3.2866 6.40304C3.63487 4.88353 4.79053 3.70938 6.25502 3.35781L5.90487 1.89925ZM2.76015 6.26924H13.2399V4.76924H2.76015V6.26924ZM4.63009 2V3.67583H6.13009V2H4.63009ZM9.86999 2V3.67583H11.37V2H9.86999Z" fill="#A29EB6"/>
<path d="M8.96137 9.28262C9.23137 9.09062 9.39937 8.80262 9.39937 8.41262C9.39937 7.60262 8.77537 7.18262 8.03737 7.18262C7.29937 7.18262 6.66937 7.60262 6.66937 8.41262C6.66937 8.80262 6.84337 9.09062 7.10737 9.28262C6.74137 9.50462 6.53137 9.87062 6.53137 10.2966C6.53137 11.0706 7.10137 11.5506 8.03737 11.5506C8.96737 11.5506 9.54337 11.0706 9.54337 10.2966C9.54337 9.87062 9.33337 9.50462 8.96137 9.28262ZM8.03737 7.96262C8.34937 7.96262 8.57737 8.14262 8.57737 8.45462C8.57737 8.76062 8.34937 8.95262 8.03737 8.95262C7.72537 8.95262 7.49737 8.76062 7.49737 8.45462C7.49737 8.14262 7.72537 7.96262 8.03737 7.96262ZM8.03737 10.7706C7.64137 10.7706 7.35337 10.5666 7.35337 10.1886C7.35337 9.81662 7.64137 9.61262 8.03737 9.61262C8.43337 9.61262 8.72137 9.81662 8.72137 10.1886C8.72137 10.5666 8.43337 10.7706 8.03737 10.7706Z" fill="#A29EB6"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

4
src/pages/PartnerTreaties/Images/lockDone.svg
View File

@ -1,4 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.55556 10.1657L3.2866 9.9981L2.55556 10.1657ZM2.55556 6.23549L3.2866 6.40304L2.55556 6.23549ZM13.4445 6.23549L12.7135 6.40304L13.4445 6.23549ZM13.4445 10.1657L12.7135 9.9981L13.4445 10.1657ZM9.92014 13.7726L10.0952 14.5019L9.92014 13.7726ZM6.07995 13.7726L6.25502 13.0433L6.07995 13.7726ZM6.07994 2.62853L6.25502 3.35781L6.07994 2.62853ZM9.92014 2.62853L10.0952 1.89925L9.92014 2.62853ZM6.13009 2C6.13009 1.58579 5.79431 1.25 5.38009 1.25C4.96588 1.25 4.63009 1.58579 4.63009 2H6.13009ZM4.63009 3.67583C4.63009 4.09004 4.96588 4.42583 5.38009 4.42583C5.79431 4.42583 6.13009 4.09004 6.13009 3.67583H4.63009ZM11.37 2C11.37 1.58579 11.0342 1.25 10.62 1.25C10.2058 1.25 9.86999 1.58579 9.86999 2H11.37ZM9.86999 3.67583C9.86999 4.09004 10.2058 4.42583 10.62 4.42583C11.0342 4.42583 11.37 4.09004 11.37 3.67583H9.86999ZM3.2866 9.9981C3.01563 8.81586 3.01563 7.58528 3.2866 6.40304L1.82451 6.06793C1.50299 7.47072 1.50299 8.93042 1.82451 10.3332L3.2866 9.9981ZM12.7135 6.40304C12.9845 7.58528 12.9845 8.81586 12.7135 9.9981L14.1756 10.3332C14.4971 8.93042 14.4971 7.47072 14.1756 6.06794L12.7135 6.40304ZM9.74507 13.0433C8.59722 13.3189 7.40286 13.3189 6.25502 13.0433L5.90487 14.5019C7.28288 14.8327 8.71721 14.8327 10.0952 14.5019L9.74507 13.0433ZM6.25502 3.35781C7.40286 3.08225 8.59722 3.08225 9.74507 3.35781L10.0952 1.89925C8.71721 1.56844 7.28288 1.56844 5.90487 1.89925L6.25502 3.35781ZM6.25502 13.0433C4.79054 12.6918 3.63487 11.5176 3.2866 9.9981L1.82451 10.3332C2.29664 12.3931 3.87186 14.0138 5.90487 14.5019L6.25502 13.0433ZM10.0952 14.5019C12.1282 14.0138 13.7034 12.3931 14.1756 10.3332L12.7135 9.9981C12.3652 11.5176 11.2095 12.6918 9.74507 13.0433L10.0952 14.5019ZM9.74507 3.35781C11.2095 3.70938 12.3652 4.88353 12.7135 6.40304L14.1756 6.06794C13.7034 4.00801 12.1282 2.3873 10.0952 1.89925L9.74507 3.35781ZM5.90487 1.89925C3.87185 2.3873 2.29664 4.008 1.82451 6.06793L3.2866 6.40304C3.63487 4.88353 4.79053 3.70938 6.25502 3.35781L5.90487 1.89925ZM2.76015 6.26924H13.2399V4.76924H2.76015V6.26924ZM4.63009 2V3.67583H6.13009V2H4.63009ZM9.86999 2V3.67583H11.37V2H9.86999Z" fill="#406128"/>
<path d="M8.96137 9.28262C9.23137 9.09062 9.39937 8.80262 9.39937 8.41262C9.39937 7.60262 8.77537 7.18262 8.03737 7.18262C7.29937 7.18262 6.66937 7.60262 6.66937 8.41262C6.66937 8.80262 6.84337 9.09062 7.10737 9.28262C6.74137 9.50462 6.53137 9.87062 6.53137 10.2966C6.53137 11.0706 7.10137 11.5506 8.03737 11.5506C8.96737 11.5506 9.54337 11.0706 9.54337 10.2966C9.54337 9.87062 9.33337 9.50462 8.96137 9.28262ZM8.03737 7.96262C8.34937 7.96262 8.57737 8.14262 8.57737 8.45462C8.57737 8.76062 8.34937 8.95262 8.03737 8.95262C7.72537 8.95262 7.49737 8.76062 7.49737 8.45462C7.49737 8.14262 7.72537 7.96262 8.03737 7.96262ZM8.03737 10.7706C7.64137 10.7706 7.35337 10.5666 7.35337 10.1886C7.35337 9.81662 7.64137 9.61262 8.03737 9.61262C8.43337 9.61262 8.72137 9.81662 8.72137 10.1886C8.72137 10.5666 8.43337 10.7706 8.03737 10.7706Z" fill="#406128"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/pages/PartnerTreaties/Images/logoAstral.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/pages/PartnerTreaties/Images/mainTreaties.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 505 B

722
src/pages/PartnerTreaties/PartnerTreaties.js
View File

@ -1,358 +1,380 @@
import React, {useState} from 'react';
import React, { useState } from "react";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {Footer} from "../../components/Footer/Footer";
import { Footer } from "@components/Common/Footer/Footer";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import mainTabImg from "./Images/mainTreaties.png"
import actImg from "./Images/actTreaties.png"
import checkImg from "./Images/checkTreaties.png"
import arrowDown from "./Images/arrowDown.png"
import logoAstral from "./Images/logoAstral.png"
import arrowItem from "./Images/arrowCheck.png"
import lock from "./Images/lock.svg"
import lockDone from "./Images/lockDone.svg"
import avatarMok from "./Images/avatarMok.png"
import actImg from "assets/icons/actTreaties.png";
import arrowItem from "assets/icons/arrows/arrowCheck.png";
import arrowDown from "assets/icons/arrows/arrowDown.png";
import checkImg from "assets/icons/checkTreaties.png";
import lock from "assets/icons/lock.svg";
import lockDone from "assets/icons/lockDone.svg";
import mainTabImg from "assets/icons/mainTreaties.png";
import avatarMok from "assets/images/avatarMok.png";
import logoAstral from "assets/images/logo/astralLogo.png";
import './partnerTreaties.scss'
import { Navigation } from '../../components/Navigation/Navigation';
import "./partnerTreaties.scss";
export const PartnerTreaties = () => {
const [toggleTab, setToggleTab] = useState(1);
const [toggleTab, setToggleTab] = useState(1);
const toggleTabs = (index) => {
setToggleTab(index);
};
return(
<div className="treaties">
<ProfileHeader/>
<Navigation />
<div className="container">
<ProfileBreadcrumbs
links={[
{name: 'Главная', link: '/profile'},
{name: 'Договора и отчетность', link: '/profile/treaties'},
]}
/>
<h2 className="treaties__title">Договора и отчетность</h2>
<div className="treaties__tabs">
<div className="treaties__tabs__head">
<div
className={toggleTab === 1 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(1)}
>
<img src={mainTabImg} alt="img" />
<p>Основные </p>
</div>
<div
className={toggleTab === 2 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(2)}
>
<img src={actImg} alt="img" />
<p>Акты</p>
</div>
<div
className={toggleTab === 3 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(3)}
>
<img src={checkImg} alt="img" />
<p>Счета</p>
</div>
</div>
<div className="treaties__tabs__content">
<div className={toggleTab === 1
? "treaties__tabs__content__main active__content"
: "treaties__tabs__content__main"}>
<div className="main__head">
<p>Реквизиты компании</p>
<div className="img">
<img src={arrowDown} alt="arrow" />
</div>
</div>
<div className="treaties__tabs__content__main__item item notPaid">
<div className="item__info">
<p className="number">Договор № К-1-2022<br/>от 01.11.22</p>
<div className="astral">
<p>Провайдер документооборота: Астрал</p>
<div className="img">
<img src={arrowDown} alt="arrow" />
</div>
</div>
<img className="logo" src={logoAstral} alt="logo" />
</div>
<div className="item__more">
<div className="item__more__names">
<p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
<p>ООО "Зоря", документ получен</p>
</div>
<div className="item__more__date">
<div className="item__more__date__from">
<img src={lock} alt="lock" />
<p>01/01/2021</p>
</div>
<img src={arrowItem} alt="to" />
<div className="item__more__date__to">
<img src={lockDone} alt="lockDone" />
<p>01/02/2021</p>
</div>
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item persons">
<div className="item__info">
<p className="number">Доп. соглашение<br/> №12 от 10.05.22</p>
<div className="item__person">
<div className="item__person__date">
<img className="arrow" src={arrowItem} alt="arrow" />
<p>На выполнение работ данного сотрудника</p>
</div>
<div className="item__person__info">
<img src={avatarMok} alt="avatar" />
<div className="item__person__info__name">
<p>Макаренко Дмитрий</p>
<span>Дизайнер</span>
</div>
</div>
</div>
</div>
<div className="item__info">
<p className="number">Доп. соглашение<br/> №12 от 10.05.22</p>
<div className="item__person">
<div className="item__person__date">
<img className="arrow" src={arrowItem} alt="arrow" />
<p>На выполнение работ данного сотрудника</p>
</div>
<div className="item__person__info">
<img src={avatarMok} alt="avatar" />
<div className="item__person__info__name">
<p>Макаренко Дмитрий</p>
<span>Дизайнер</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className={toggleTab === 2
? "treaties__tabs__content__main second active__content"
: "treaties__tabs__content__main"}>
<div className="main__head acts">
<div className="provider">
<p>Провайдер документооборота: Астрал</p>
<img src={logoAstral} alt="astral" />
</div>
<div className="info">
<p>Реквизиты компании</p>
<div className="img">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item notPaid">
<div className="item__info">
<p className="number">Акт №4 от 10.03.23</p>
<div className="item__person__act">
<div className="item__person__act__info">
<div className="item__person__act__avatar">
<img src={avatarMok} alt="avatar" />
<div className="item__person__act__name">
<p>
Макаренко Дмитрий
</p>
<span>
Дизайнер
</span>
</div>
</div>
<img className="personArrow" src={arrowItem} alt="arrow" />
<p className="moreInfo">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="item__more price">
<div className="item__more__price">
<p className="total">214 500,00 руб</p>
<p>147 раб.часов ( 1200руб / час ) </p>
</div>
<div className="item__more__names">
<p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
<p>ООО "Зоря", документ получен</p>
</div>
<div className="item__more__date">
<div className="item__more__date__from">
<img src={lock} alt="lock" />
<p>01/01/2021</p>
</div>
<img src={arrowItem} alt="to" />
<div className="item__more__date__to">
<img src={lockDone} alt="lockDone" />
<p>01/02/2021</p>
</div>
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item">
<div className="item__info">
<p className="number">Акт №4 от 10.03.23</p>
<div className="item__person__act">
<div className="item__person__act__info">
<div className="item__person__act__avatar">
<img src={avatarMok} alt="avatar" />
<div className="item__person__act__name">
<p>
Макаренко Дмитрий
</p>
<span>
Дизайнер
</span>
</div>
</div>
<img className="personArrow" src={arrowItem} alt="arrow" />
<p className="moreInfo">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="item__more price">
<div className="item__more__price">
<p className="total">214 500,00 руб</p>
<p>147 раб.часов ( 1200руб / час ) </p>
</div>
<div className="item__more__names">
<p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
<p>ООО "Зоря", документ получен</p>
</div>
<div className="item__more__date">
<div className="item__more__date__from">
<img src={lock} alt="lock" />
<p>01/01/2021</p>
</div>
<img src={arrowItem} alt="to" />
<div className="item__more__date__to">
<img src={lockDone} alt="lockDone" />
<p>01/02/2021</p>
</div>
</div>
</div>
</div>
</div>
<div className={toggleTab === 3
? "treaties__tabs__content__main second active__content"
: "treaties__tabs__content__main"}>
<div className="main__head acts">
<div className="provider">
<p>Провайдер документооборота: Астрал</p>
<img src={logoAstral} alt="astral" />
</div>
<div className="info">
<p>Реквизиты компании</p>
<div className="img">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item notPaid">
<div className="item__info">
<p className="number">Акт №4 от 10.03.23</p>
<div className="item__person__act">
<div className="item__person__act__info">
<div className="item__person__act__avatar">
<img src={avatarMok} alt="avatar" />
<div className="item__person__act__name">
<p>
Макаренко Дмитрий
</p>
<span>
Дизайнер
</span>
</div>
</div>
<img className="personArrow" src={arrowItem} alt="arrow" />
<p className="moreInfo">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="item__more price">
<div className="item__more__price">
<p className="total">214 500,00 руб</p>
<p>147 раб.часов ( 1200руб / час ) </p>
</div>
<div className="item__more__names">
<p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
<p>ООО "Зоря", документ получен</p>
</div>
<div className="item__more__date">
<div className="item__more__date__from">
<img src={lock} alt="lock" />
<p>01/01/2021</p>
</div>
<img src={arrowItem} alt="to" />
<div className="item__more__date__to">
<img src={lockDone} alt="lockDone" />
<p>01/02/2021</p>
</div>
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item">
<div className="item__info">
<p className="number">Акт №4 от 10.03.23</p>
<div className="item__person__act">
<div className="item__person__act__info">
<div className="item__person__act__avatar">
<img src={avatarMok} alt="avatar" />
<div className="item__person__act__name">
<p>
Макаренко Дмитрий
</p>
<span>
Дизайнер
</span>
</div>
</div>
<img className="personArrow" src={arrowItem} alt="arrow" />
<p className="moreInfo">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="item__more price">
<div className="item__more__price">
<p className="total">214 500,00 руб</p>
<p>147 раб.часов ( 1200руб / час ) </p>
</div>
<div className="item__more__names">
<p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
<p>ООО "Зоря", документ получен</p>
</div>
<div className="item__more__date">
<div className="item__more__date__from">
<img src={lock} alt="lock" />
<p>01/01/2021</p>
</div>
<img src={arrowItem} alt="to" />
<div className="item__more__date__to">
<img src={lockDone} alt="lockDone" />
<p>01/02/2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
const toggleTabs = (index) => {
setToggleTab(index);
};
return (
<div className="treaties">
<ProfileHeader />
<Navigation />
<div className="container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Договора и отчетность", link: "/profile/treaties" },
]}
/>
<h2 className="treaties__title">Договора и отчетность</h2>
<div className="treaties__tabs">
<div className="treaties__tabs__head">
<div
className={toggleTab === 1 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(1)}
>
<img src={mainTabImg} alt="img" />
<p>Основные </p>
</div>
<Footer/>
<div
className={toggleTab === 2 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(2)}
>
<img src={actImg} alt="img" />
<p>Акты</p>
</div>
<div
className={toggleTab === 3 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(3)}
>
<img src={checkImg} alt="img" />
<p>Счета</p>
</div>
</div>
<div className="treaties__tabs__content">
<div
className={
toggleTab === 1
? "treaties__tabs__content__main active__content"
: "treaties__tabs__content__main"
}
>
<div className="main__head">
<p>Реквизиты компании</p>
<div className="img">
<img src={arrowDown} alt="arrow" />
</div>
</div>
<div className="treaties__tabs__content__main__item item notPaid">
<div className="item__info">
<p className="number">
Договор № К-1-2022
<br />
от 01.11.22
</p>
<div className="astral">
<p>Провайдер документооборота: Астрал</p>
<div className="img">
<img src={arrowDown} alt="arrow" />
</div>
</div>
<img className="logo" src={logoAstral} alt="logo" />
</div>
<div className="item__more">
<div className="item__more__names">
<p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
<p>ООО "Зоря", документ получен</p>
</div>
<div className="item__more__date">
<div className="item__more__date__from">
<img src={lock} alt="lock" />
<p>01/01/2021</p>
</div>
<img src={arrowItem} alt="to" />
<div className="item__more__date__to">
<img src={lockDone} alt="lockDone" />
<p>01/02/2021</p>
</div>
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item persons">
<div className="item__info">
<p className="number">
Доп. соглашение
<br /> №12 от 10.05.22
</p>
<div className="item__person">
<div className="item__person__date">
<img className="arrow" src={arrowItem} alt="arrow" />
<p>На выполнение работ данного сотрудника</p>
</div>
<div className="item__person__info">
<img src={avatarMok} alt="avatar" />
<div className="item__person__info__name">
<p>Макаренко Дмитрий</p>
<span>Дизайнер</span>
</div>
</div>
</div>
</div>
<div className="item__info">
<p className="number">
Доп. соглашение
<br /> №12 от 10.05.22
</p>
<div className="item__person">
<div className="item__person__date">
<img className="arrow" src={arrowItem} alt="arrow" />
<p>На выполнение работ данного сотрудника</p>
</div>
<div className="item__person__info">
<img src={avatarMok} alt="avatar" />
<div className="item__person__info__name">
<p>Макаренко Дмитрий</p>
<span>Дизайнер</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className={
toggleTab === 2
? "treaties__tabs__content__main second active__content"
: "treaties__tabs__content__main"
}
>
<div className="main__head acts">
<div className="provider">
<p>Провайдер документооборота: Астрал</p>
<img src={logoAstral} alt="astral" />
</div>
<div className="info">
<p>Реквизиты компании</p>
<div className="img">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item notPaid">
<div className="item__info">
<p className="number">Акт №4 от 10.03.23</p>
<div className="item__person__act">
<div className="item__person__act__info">
<div className="item__person__act__avatar">
<img src={avatarMok} alt="avatar" />
<div className="item__person__act__name">
<p>Макаренко Дмитрий</p>
<span>Дизайнер</span>
</div>
</div>
<img
className="personArrow"
src={arrowItem}
alt="arrow"
/>
<p className="moreInfo">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="item__more price">
<div className="item__more__price">
<p className="total">214 500,00 руб</p>
<p>147 раб.часов ( 1200руб / час ) </p>
</div>
<div className="item__more__names">
<p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
<p>ООО "Зоря", документ получен</p>
</div>
<div className="item__more__date">
<div className="item__more__date__from">
<img src={lock} alt="lock" />
<p>01/01/2021</p>
</div>
<img src={arrowItem} alt="to" />
<div className="item__more__date__to">
<img src={lockDone} alt="lockDone" />
<p>01/02/2021</p>
</div>
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item">
<div className="item__info">
<p className="number">Акт №4 от 10.03.23</p>
<div className="item__person__act">
<div className="item__person__act__info">
<div className="item__person__act__avatar">
<img src={avatarMok} alt="avatar" />
<div className="item__person__act__name">
<p>Макаренко Дмитрий</p>
<span>Дизайнер</span>
</div>
</div>
<img
className="personArrow"
src={arrowItem}
alt="arrow"
/>
<p className="moreInfo">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="item__more price">
<div className="item__more__price">
<p className="total">214 500,00 руб</p>
<p>147 раб.часов ( 1200руб / час ) </p>
</div>
<div className="item__more__names">
<p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
<p>ООО "Зоря", документ получен</p>
</div>
<div className="item__more__date">
<div className="item__more__date__from">
<img src={lock} alt="lock" />
<p>01/01/2021</p>
</div>
<img src={arrowItem} alt="to" />
<div className="item__more__date__to">
<img src={lockDone} alt="lockDone" />
<p>01/02/2021</p>
</div>
</div>
</div>
</div>
</div>
<div
className={
toggleTab === 3
? "treaties__tabs__content__main second active__content"
: "treaties__tabs__content__main"
}
>
<div className="main__head acts">
<div className="provider">
<p>Провайдер документооборота: Астрал</p>
<img src={logoAstral} alt="astral" />
</div>
<div className="info">
<p>Реквизиты компании</p>
<div className="img">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item notPaid">
<div className="item__info">
<p className="number">Акт №4 от 10.03.23</p>
<div className="item__person__act">
<div className="item__person__act__info">
<div className="item__person__act__avatar">
<img src={avatarMok} alt="avatar" />
<div className="item__person__act__name">
<p>Макаренко Дмитрий</p>
<span>Дизайнер</span>
</div>
</div>
<img
className="personArrow"
src={arrowItem}
alt="arrow"
/>
<p className="moreInfo">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="item__more price">
<div className="item__more__price">
<p className="total">214 500,00 руб</p>
<p>147 раб.часов ( 1200руб / час ) </p>
</div>
<div className="item__more__names">
<p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
<p>ООО "Зоря", документ получен</p>
</div>
<div className="item__more__date">
<div className="item__more__date__from">
<img src={lock} alt="lock" />
<p>01/01/2021</p>
</div>
<img src={arrowItem} alt="to" />
<div className="item__more__date__to">
<img src={lockDone} alt="lockDone" />
<p>01/02/2021</p>
</div>
</div>
</div>
</div>
<div className="treaties__tabs__content__main__item item">
<div className="item__info">
<p className="number">Акт №4 от 10.03.23</p>
<div className="item__person__act">
<div className="item__person__act__info">
<div className="item__person__act__avatar">
<img src={avatarMok} alt="avatar" />
<div className="item__person__act__name">
<p>Макаренко Дмитрий</p>
<span>Дизайнер</span>
</div>
</div>
<img
className="personArrow"
src={arrowItem}
alt="arrow"
/>
<p className="moreInfo">к Доп. соглашению № 1</p>
</div>
<div className="arrow">
<img src={arrowDown} alt="arrow" />
</div>
</div>
</div>
<div className="item__more price">
<div className="item__more__price">
<p className="total">214 500,00 руб</p>
<p>147 раб.часов ( 1200руб / час ) </p>
</div>
<div className="item__more__names">
<p>Бойко Кирилл Сергеевич, подписал и отправил документ</p>
<p>ООО "Зоря", документ получен</p>
</div>
<div className="item__more__date">
<div className="item__more__date__from">
<img src={lock} alt="lock" />
<p>01/01/2021</p>
</div>
<img src={arrowItem} alt="to" />
<div className="item__more__date__to">
<img src={lockDone} alt="lockDone" />
<p>01/02/2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
</div>
<Footer />
</div>
);
};

171
src/pages/PartnerСategories/PartnerСategories.js
View File

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

186
src/pages/PartnerСategories/PartnerСategories.jsx Normal file
View File

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

BIN
src/pages/PartnerСategories/images/PersonalAdmin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/pages/PartnerСategories/images/PersonalArchitecture.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/pages/PartnerСategories/images/PersonalCopy.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/pages/PartnerСategories/images/PersonalDesign.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/pages/PartnerСategories/images/PersonalFrontend.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/pages/PartnerСategories/images/PersonalMng.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/pages/PartnerСategories/images/PersonalSMM.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/pages/PartnerСategories/images/PersonalTesters.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/pages/PartnerСategories/images/personalBackEnd.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

18
src/pages/Payouts/Payouts.js
View File

@ -1,13 +1,13 @@
import React from 'react';
import React from "react";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import { Navigation } from '../../components/Navigation/Navigation';
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
export const Payouts = () => {
return (
<div className='payouts'>
<ProfileHeader />
<Navigation />
</div>
)
return (
<div className="payouts">
<ProfileHeader />
<Navigation />
</div>
);
};

184
src/pages/Profile/Profile.js
View File

@ -1,137 +1,149 @@
import React, {useState} from 'react';
import {useSelector} from "react-redux";
import {Link} from "react-router-dom";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {Footer} from "../../components/Footer/Footer";
import { CardControl } from '../../components/CardControl/CardControl';
import { Navigation } from '../../components/Navigation/Navigation';
import { getProfileInfo } from "@redux/outstaffingSlice";
import {getProfileInfo} from "../../redux/outstaffingSlice";
import { urlForLocal } from "@utils/helper";
import {urlForLocal} from "../../helper";
import { CardControl } from "@components/CardControl/CardControl";
import { Footer } from "@components/Common/Footer/Footer";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import reportsIcon from "../../images/reports.png"
import summaryIcon from "../../images/summaryIcon.png"
import timerIcon from "../../images/timerIcon.png"
import paymentIcon from "../../images/paymentIcon.png"
import settingIcon from "../../images/settingIcon.png"
import avatarMok from "../PartnerTreaties/Images/avatarMok.png"
import paymentIcon from "assets/icons/paymentIcon.png";
import settingIcon from "assets/icons/settingIcon.png";
import summaryIcon from "assets/icons/summaryIcon.png";
import timerIcon from "assets/icons/timerIcon.png";
import avatarMok from "assets/images/avatarMok.png";
import reportsIcon from "assets/images/reports.png";
import './profile.scss'
import "./profile.scss";
export const Profile = () => {
const profileInfo = useSelector(getProfileInfo);
const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer')
const [user] = useState(
localStorage.getItem("role_status") === "18" ? "partner" : "developer"
);
const [profileItemsInfo] = useState({
developer: [
{
path: 'profile/calendar',
path: "profile/calendar",
img: reportsIcon,
title: 'Ваша отчетность',
description: '<span></span>Отработанных в этом месяце часов'
title: "Ваша отчетность",
description: "<span></span>Отработанных в этом месяце часов",
},
{
path: 'profile/summary',
path: "profile/summary",
img: summaryIcon,
title: 'Данные и резюме',
description: 'Ваше резюме<br/><span>заполнено</span>'
title: "Данные и резюме",
description: "Ваше резюме<br/><span>заполнено</span>",
},
{
path: 'profile/tracker',
path: "profile/tracker",
img: timerIcon,
title: 'Трекер времени',
description: 'Сколько времени занимает<br/> выполнение задач'
title: "Трекер времени",
description: "Сколько времени занимает<br/> выполнение задач",
},
{
path: 'profile/payouts',
path: "profile/payouts",
img: paymentIcon,
title: 'Выплаты',
description: 'У вас <span>подтвержден</span><br/> статус самозанятого'
title: "Выплаты",
description: "У вас <span>подтвержден</span><br/> статус самозанятого",
},
{
path: 'profile/settings',
path: "profile/settings",
img: settingIcon,
title: 'Настройки аккаунта',
description: 'Перейдите чтобы начать<br/> редактирование'
}
title: "Настройки аккаунта",
description: "Перейдите чтобы начать<br/> редактирование",
},
],
partner: [
{
path: 'profile/requests',
path: "profile/requests",
img: reportsIcon,
title: 'Запросы и открытые позиции',
description: '<span>У вас 2 вакансии<br/></span>открытые от лица компании'
title: "Запросы и открытые позиции",
description:
"<span>У вас 2 вакансии<br/></span>открытые от лица компании",
},
{
path: 'profile/categories',
path: "profile/categories",
img: summaryIcon,
title: 'Данные персонала',
description: 'Наши специалисты <br/><span>уже работающие у вас</span>'
title: "Данные персонала",
description: "Наши специалисты <br/><span>уже работающие у вас</span>",
},
{
path: 'profile/tracker',
path: "profile/tracker",
img: timerIcon,
title: 'Трекер времени',
description: 'Контроль времени и<br/> выполнение задач'
title: "Трекер времени",
description: "Контроль времени и<br/> выполнение задач",
},
{
path: 'profile/treaties',
path: "profile/treaties",
img: paymentIcon,
title: 'Договора и отчетность',
description: 'Ключевые условия<br/> договора'
title: "Договора и отчетность",
description: "Ключевые условия<br/> договора",
},
{
path: 'profile/settings',
path: "profile/settings",
img: settingIcon,
title: 'Настройки аккаунта',
description: 'Перейдите чтобы начать<br/> редактирование'
}
]
})
title: "Настройки аккаунта",
description: "Перейдите чтобы начать<br/> редактирование",
},
],
});
return (
<div className='profile'>
<ProfileHeader/>
<Navigation />
<div className='container'>
<ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'}]} />
<h2 className='profile__title'>
{user === 'developer' ?
<span><p>Добрый день,&nbsp;</p>{profileInfo.fio}</span>
:
'ООО НДВ Консалтинг'
}
</h2>
<div className='summary__info'>
<div className='summary__person'>
<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok} className='summary__avatar' alt='avatar'/>
<p className='summary__name'>
{user === 'developer' ?
<span>{profileInfo.fio}, {profileInfo.specification} разработчик</span>
:
'ООО НДВ Консалтинг'
}
</p>
</div>
<div className="profile">
<ProfileHeader />
<Navigation />
<div className="container">
<ProfileBreadcrumbs links={[{ name: "Главная", link: "/profile" }]} />
<h2 className="profile__title">
{user === "developer" ? (
<span>
<p>Добрый день,&nbsp;</p>
{profileInfo.fio}
</span>
) : (
"ООО НДВ Консалтинг"
)}
</h2>
<div className="summary__info">
<div className="summary__person">
<img
src={
profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok
}
className="summary__avatar"
alt="avatar"
/>
<p className="summary__name">
{user === "developer" ? (
<span>
{profileInfo.fio}, {profileInfo.specification} разработчик
</span>
) : (
"ООО НДВ Консалтинг"
)}
</p>
</div>
<div className='profile__items'>
{
profileItemsInfo[user].map((item, index) => {
return <CardControl
</div>
<div className="profile__items">
{profileItemsInfo[user].map((item, index) => {
return (
<CardControl
description={item.description}
img={item.img}
path={item.path}
title={item.title}
key={index}
/>
})
}
</div>
/>
);
})}
</div>
<Footer/>
</div>
)
<Footer />
</div>
);
};

202
src/pages/ProfileCandidate/ProfileCandidate.js
View File

@ -1,94 +1,108 @@
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>
)
}
import React, { useState } from "react";
import { CardControl } from "@components/CardControl/CardControl";
import { Footer } from "@components/Common/Footer/Footer";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
import settingIcon from "assets/icons/settingIcon.png";
import medium_male from "assets/images/medium_male.png";
import noteIcon from "assets/images/note.png";
import questionIcon from "assets/images/question.png";
import reportsIcon from "assets/images/reports.png";
import "./ProfileCandidate.scss";
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>
);
};

136
src/pages/RegistrationForCandidate/RegistrationForCandidate.js
View File

@ -1,72 +1,78 @@
import React from 'react';
import React from "react";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar";
import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate"
import {Footer} from "../../components/Footer/Footer";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import StepsForCandidate from "@components/StepsForCandidate/StepsForCandidate";
import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png"
import arrowBtn from "../../images/arrowRight.png";
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
import './registationForCandidate.scss'
import "./registationForCandidate.scss";
export const RegistrationForCandidate = () => {
return(
<div className='registrationCandidate'>
<AuthHeader/>
<div className='container'>
<div className='registrationCandidate__start'>
<h2 className="auth-candidate__start__title">Хочу в команду <span>Айти специалистов</span></h2>
<div className="change-mode__arrow">
<img src={arrowBtn}></img>
</div>
<p className="auth-candidate__start__description">Для нас не имеет значение Ваша локация.</p>
<StepsForCandidate step="шаг 2 - заполните данные" />
<div className='registrationCandidate__formWrapper'>
<div className='registrationCandidate__info'>
<div className='registrationCandidate__info__category'>
<img src={BackEndImg} alt='img' />
<p>Backend разработчики</p>
</div>
<p className='registrationCandidate__info__skills'>Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript</p>
<div className='registrationCandidate__info__arrow'>
<img src={arrowBtn} alt='img' />
</div>
</div>
<form className='registrationCandidate__form'>
<div className='registrationCandidate__form__input'>
<label htmlFor="name">Ваше имя *</label>
<input id="name" type="text" placeholder="Имя" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="summary">Если есть ссылка на резюме</label>
<input id="summary" type="text" placeholder="Резюме" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="email">Ваш email *</label>
<input id="email" type="text" placeholder="Email" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="tg">Ваш телеграм*</label>
<input id="tg" type="text" placeholder="Телеграм" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="password">Придумайте пароль*</label>
<input id="password" type="text" placeholder="Пароль" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="secondPassword">Повторите пароль*</label>
<input id="secondPassword" type="text" placeholder="Пароль" />
</div>
<div className='registrationCandidate__form__submit'>
<button>Отправить</button>
</div>
</form>
</div>
</div>
return (
<div className="registrationCandidate">
<AuthHeader />
<div className="container">
<div className="registrationCandidate__start">
<h2 className="auth-candidate__start__title">
Хочу в команду <span>Айти специалистов</span>
</h2>
<div className="change-mode__arrow">
<img src={arrowBtn}></img>
</div>
<p className="auth-candidate__start__description">
Для нас не имеет значение Ваша локация.
</p>
<StepsForCandidate step="шаг 2 - заполните данные" />
<div className="registrationCandidate__formWrapper">
<div className="registrationCandidate__info">
<div className="registrationCandidate__info__category">
<img src={BackEndImg} alt="img" />
<p>Backend разработчики</p>
</div>
<p className="registrationCandidate__info__skills">
Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript
</p>
<div className="registrationCandidate__info__arrow">
<img src={arrowBtn} alt="img" />
</div>
</div>
<SideBar/>
<Footer/>
<form className="registrationCandidate__form">
<div className="registrationCandidate__form__input">
<label htmlFor="name">Ваше имя *</label>
<input id="name" type="text" placeholder="Имя" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="summary">Если есть ссылка на резюме</label>
<input id="summary" type="text" placeholder="Резюме" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="email">Ваш email *</label>
<input id="email" type="text" placeholder="Email" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="tg">Ваш телеграм*</label>
<input id="tg" type="text" placeholder="Телеграм" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="password">Придумайте пароль*</label>
<input id="password" type="text" placeholder="Пароль" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="secondPassword">Повторите пароль*</label>
<input id="secondPassword" type="text" placeholder="Пароль" />
</div>
<div className="registrationCandidate__form__submit">
<button>Отправить</button>
</div>
</form>
</div>
</div>
)
}
</div>
<SideBar />
<Footer />
</div>
);
};

12
src/pages/RegistrationForCandidate/registationForCandidate.scss
View File

@ -24,7 +24,7 @@
margin-top: 200px;
display: flex;
padding: 33px 69px 32px 30px;
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
width: 100%;
}
@ -56,13 +56,13 @@
font-weight: 400;
font-size: 12px;
line-height: 20px;
color: #6F6F6F;
color: #6f6f6f;
}
&__arrow {
width: 48px;
height: 48px;
background: #DDEEC6;
background: #ddeec6;
border-radius: 50px;
display: flex;
justify-content: center;
@ -96,7 +96,7 @@
}
input {
background: #EFF2F7;
background: #eff2f7;
border-radius: 8px;
width: 100%;
padding: 8px 12px;
@ -117,8 +117,8 @@
font-weight: 500;
font-size: 18px;
line-height: 32px;
color: #FFFFFF;
background: #52B709;
color: #ffffff;
background: #52b709;
border-radius: 44px;
width: 180px;
height: 46px;

185
src/pages/SingleReportPage/SingleReportPage.js
View File

@ -1,113 +1,112 @@
import React from 'react'
import arrowLeft from '../../images/right-arrow.png'
import React from "react";
import SVG from "react-inlinesvg";
import { useNavigate } from "react-router";
import SVG from 'react-inlinesvg'
import { LogoutButton } from "@components/LogoutButton/LogoutButton";
import { TaskItem } from "@components/TaskItem/TaskItem";
import dateArrowIcon from '../../images/dateArrow.svg'
import calendarIcon from '../../images/calendar.svg'
import dateArrowIcon from "assets/icons/arrows/dateArrow.svg";
import arrowLeft from "assets/icons/arrows/left-arrow.png";
import calendarIcon from "assets/icons/calendar.svg";
import { TaskItem } from '../../components/TaskItem/TaskItem'
import './singleReportPage.scss'
import {useNavigate} from "react-router";
import {LogoutButton} from "../../components/LogoutButton/LogoutButton";
import "./singleReportPage.scss";
const tasks = [
{
index: 1,
text: 'Задача «67 – Навигационная система – Главное меню – Обновить иконки» заблокирована из-за отсутствия новых иконок',
hours: 3
text: "Задача «67 – Навигационная система – Главное меню – Обновить иконки» заблокирована из-за отсутствия новых иконок",
hours: 3,
},
{
index: 2,
text: 'Задача «83 – Навигационная система – Поиск по почтовому индексу – Добавить экран поиска по почтовому индексу» не может быть завершена, т.к. работа над задачей «82 – Навигационная система – Разработать модуль поиска по почтовому индексу» ещё не начата',
hours: 3
}
text: "Задача «83 – Навигационная система – Поиск по почтовому индексу – Добавить экран поиска по почтовому индексу» не может быть завершена, т.к. работа над задачей «82 – Навигационная система – Разработать модуль поиска по почтовому индексу» ещё не начата",
hours: 3,
},
];
const SingleReportPage = () => {
const navigate= useNavigate();
const navigate = useNavigate();
return (
<div className='single-report-page'>
<div onClick={()=> {navigate(-1)}} className='single-report-page__back'>
<div className='single-report-page__back-arrow'>
<img src={arrowLeft} alt='arrowLeft'/>
</div>
<div className='single-report-page__back-text'>
Вернуться к списку
</div>
<div className="single-report-page">
<div
onClick={() => {
navigate(-1);
}}
className="single-report-page__back"
>
<div className="single-report-page__back-arrow">
<img src={arrowLeft} alt="arrowLeft" />
</div>
<div className='single-report-page__title'>
<div className='single-report-page__title-text'>Отчет за день</div>
<div className='single-report-page__title-date'>
<div className='single-report-page__title-date--prev'>
<button>
<SVG src={dateArrowIcon} />
</button>
</div>
<div className='single-report-page__title-date--actual'>
<SVG src={calendarIcon} />
<p>15 июня</p>
</div>
<div className='single-report-page__title-date--next single-report-page__title-date--enabled'>
<button>
<SVG src={dateArrowIcon} />
</button>
</div>
</div>
</div>
<div className='single-report-page__tasks'>
<div className='single-report-page__tasks-title'>
<div className='single-report-page__marker'></div>
<h3>Какие задачи были выполнены?</h3>
</div>
{tasks.map((task) => {
return (
<div className='single-report-page__tasks-item'>
<TaskItem {...task} />
</div>
)
})}
</div>
<div className='single-report-page__troubles'>
<div className='single-report-page__troubles-title'>
<div className='single-report-page__marker'></div>
<h3>Какие сложности возникли?</h3>
</div>
<div className='single-report-page__troubles-item'>
91 – Навигационная система – Поиск адреса – Разобраться, почему
находятся несколько пересечений Невского пр. и Казанской ул.
</div>
</div>
<div className='single-report-page__scheduled'>
<div className='single-report-page__scheduled-title'>
<div className='single-report-page__marker'></div>
<h3>Что планируется сделать завтра?</h3>
</div>
<div className='single-report-page__scheduled-item'>
91 – Навигационная система – Поиск адреса – Разобраться, почему
находятся несколько пересечений Невского пр. и Казанской ул.
</div>
</div>
<div className='single-report-page__footer'>
<div className='single-report-page__footer-rectangle'></div>
<div className='single-report-page__hours'>
<div className='single-report-page__hours-value'></div>
<div className='single-report-page__hours-text'></div>
</div>
</div>
<LogoutButton />
<div className="single-report-page__back-text">Вернуться к списку</div>
</div>
)
<div className="single-report-page__title">
<div className="single-report-page__title-text">Отчет за день</div>
<div className="single-report-page__title-date">
<div className="single-report-page__title-date--prev">
<button>
<SVG src={dateArrowIcon} />
</button>
</div>
<div className="single-report-page__title-date--actual">
<SVG src={calendarIcon} />
<p>15 июня</p>
</div>
<div className="single-report-page__title-date--next single-report-page__title-date--enabled">
<button>
<SVG src={dateArrowIcon} />
</button>
</div>
</div>
</div>
<div className="single-report-page__tasks">
<div className="single-report-page__tasks-title">
<div className="single-report-page__marker"></div>
<h3>Какие задачи были выполнены?</h3>
</div>
{tasks.map((task, index) => {
return (
<div className="single-report-page__tasks-item" key={index}>
<TaskItem {...task} />
</div>
);
})}
</div>
<div className="single-report-page__troubles">
<div className="single-report-page__troubles-title">
<div className="single-report-page__marker"></div>
<h3>Какие сложности возникли?</h3>
</div>
<div className="single-report-page__troubles-item">
91 – Навигационная система – Поиск адреса – Разобраться, почему
находятся несколько пересечений Невского пр. и Казанской ул.
</div>
</div>
<div className="single-report-page__scheduled">
<div className="single-report-page__scheduled-title">
<div className="single-report-page__marker"></div>
<h3>Что планируется сделать завтра?</h3>
</div>
<div className="single-report-page__scheduled-item">
91 – Навигационная система – Поиск адреса – Разобраться, почему
находятся несколько пересечений Невского пр. и Казанской ул.
</div>
</div>
<div className="single-report-page__footer">
<div className="single-report-page__footer-rectangle"></div>
<div className="single-report-page__hours">
<div className="single-report-page__hours-value"></div>
<div className="single-report-page__hours-text"></div>
</div>
</div>
<LogoutButton />
</div>
);
};
export default SingleReportPage
export default SingleReportPage;

209
src/pages/Summary/Summary.js
View File

@ -1,122 +1,155 @@
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 { urlForLocal} from "../../helper";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";
import arrow from "../../images/right-arrow.png";
import rightArrow from "../../images/arrowRight.png"
import gitImgItem from "../../images/gitItemImg.png"
import { getProfileInfo } from "@redux/outstaffingSlice";
import {apiRequest} from "../../api/request";
import {Navigate} from "react-router-dom";
import { Navigation } from '../../components/Navigation/Navigation';
import { urlForLocal } from "@utils/helper";
import './summary.scss'
import { apiRequest } from "@api/request";
import { Footer } from "@components/Common/Footer/Footer";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import rightArrow from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/left-arrow.png";
import gitImgItem from "assets/icons/gitItemImg.svg";
import "./summary.scss";
export const Summary = () => {
if(localStorage.getItem('role_status') === '18') {
return <Navigate to="/profile" replace/>
}
if (localStorage.getItem("role_status") === "18") {
return <Navigate to="/profile" replace />;
}
const profileInfo = useSelector(getProfileInfo);
const [openGit, setOpenGit] = useState(false);
const [gitInfo, setGitInfo] = useState([]);
useEffect(() => {
apiRequest(`/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`)
.then(responseGit => setGitInfo(responseGit))
apiRequest(
`/profile/portfolio-projects?card_id=${localStorage.getItem("cardId")}`
).then((responseGit) => setGitInfo(responseGit));
}, []);
return (
<div className='summary'>
<ProfileHeader/>
<Navigation />
<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'/>
<div className="summary">
<ProfileHeader />
<Navigation />
<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" />
<p>Вернуться</p>
</div>}
<div className={openGit ? 'summary__info openGit' : 'summary__info'}>
<div className='summary__person'>
<img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
<p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
</div>
{!openGit &&
<button className='summary__git' onClick={() => setOpenGit(true)}>Git</button>
}
</div>
)}
<div className={openGit ? "summary__info openGit" : "summary__info"}>
<div className="summary__person">
<img
src={urlForLocal(profileInfo.photo)}
className="summary__avatar"
alt="avatar"
/>
<p className="summary__name">
{profileInfo.fio}, {profileInfo.specification} разработчик
</p>
</div>
{!openGit && (
<button className="summary__git" onClick={() => setOpenGit(true)}>
Git
</button>
)}
</div>
{!openGit &&
<div className='summary__skills skills__section'>
<div className='summary__sections__head'>
</div>
{!openGit && (
<div className="summary__skills skills__section">
<div className="summary__sections__head">
<h3>Основной стек</h3>
<button>Редактировать раздел</button>
</div>
<div className='skills__section__items'>
<div className='skills__section__items__wrapper'>
{profileInfo.skillValues && profileInfo.skillValues.map((skill, index) =>
<span key={skill.id} className='skill_item'>{skill.skill.name}
{profileInfo.skillValues.length > index + 1 && ','}
<div className="skills__section__items">
<div className="skills__section__items__wrapper">
{profileInfo.skillValues &&
profileInfo.skillValues.map((skill, index) => (
<span key={skill.id} className="skill_item">
{skill.skill.name}
{profileInfo.skillValues.length > index + 1 && ","}
</span>
)}
))}
</div>
</div>
</div>
}
{profileInfo.vc_text && !openGit &&
<div className='summary__experience'>
<div className='experience__block'>
)}
{profileInfo.vc_text && !openGit && (
<div className="summary__experience">
<div className="experience__block">
<div className="summary__sections__head">
<h3>Описание опыта работы</h3>
<button>Редактировать раздел</button>
</div>
<div className="experience__content" dangerouslySetInnerHTML={{__html:profileInfo.vc_text}}>
<h3>Описание опыта работы</h3>
<button>Редактировать раздел</button>
</div>
<div
className="experience__content"
dangerouslySetInnerHTML={{ __html: profileInfo.vc_text }}
></div>
</div>
</div>
}
{openGit &&
<div className='summary__sectionGit'>
<div className='summary__sections__head'>
)}
{openGit && (
<div className="summary__sectionGit">
<div className="summary__sections__head">
<h3>Страница портфолио кода разработчика</h3>
<button>Редактировать раздел</button>
</div>
<div className='summary__sectionGitItems'>
{Boolean(gitInfo.length) && gitInfo.map((itemGit) => {
return <a href={itemGit.link} target="_blank" rel="noreferrer" key={itemGit.id} className='summary__sectionGitItem gitItem'>
<div className='gitItem__info'>
<div className='gitItem__info__about'>
<img src={gitImgItem} alt='gitImg'/>
<div className='gitItem__info__name'>
<h4>{itemGit.title}</h4>
<p>{itemGit.description}</p>
<div className="summary__sectionGitItems">
{Boolean(gitInfo.length) &&
gitInfo.map((itemGit) => {
return (
<a
href={itemGit.link}
target="_blank"
rel="noreferrer"
key={itemGit.id}
className="summary__sectionGitItem gitItem"
>
<div className="gitItem__info">
<div className="gitItem__info__about">
<img src={gitImgItem} alt="gitImg" />
<div className="gitItem__info__name">
<h4>{itemGit.title}</h4>
<p>{itemGit.description}</p>
</div>
</div>
<div className="gitItem__info__specification">
<span className="gitItem__lineSkill" />
<p>{itemGit.main_stack}</p>
</div>
</div>
</div>
<div className='gitItem__info__specification'>
<span className='gitItem__lineSkill'/>
<p>{itemGit.main_stack}</p>
</div>
</div>
<a className='gitItem__link' href={itemGit.link} target="_blank" rel="noreferrer">
<img src={rightArrow} alt='arrowRight'/>
</a>
</a>
})
}
<a
className="gitItem__link"
href={itemGit.link}
target="_blank"
rel="noreferrer"
>
<img src={rightArrow} alt="arrowRight" />
</a>
</a>
);
})}
</div>
</div>
}
</div>
<Footer/>
)}
</div>
)
<Footer />
</div>
);
};

117
src/pages/Tracker/Tracker.js
View File

@ -1,32 +1,32 @@
import React, { useEffect, useState } from "react";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import { apiRequest } from "../../api/request";
import { Navigation } from "../../components/Navigation/Navigation";
import { useDispatch, useSelector } from "react-redux";
import {
setAllProjects,
getProjects,
setToggleTab,
getToggleTab,
modalToggle,
} from "../../redux/projectsTrackerSlice";
setAllProjects,
setToggleTab,
} from "@redux/projectsTrackerSlice";
import TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
import { urlForLocal } from "../../helper";
import { getCorrectDate } from "../../components/Calendar/calendarHelper";
import { Loader } from "../../components/Loader/Loader";
import { urlForLocal } from "@utils/helper";
import project from "../../images/trackerProject.svg";
import tasks from "../../images/trackerTasks.svg";
import archive from "../../images/archiveTracker.svg";
import avatarTest from "../../images/AvatarTest .png";
import search from "../../images/serchIcon.png";
import noProjects from "../../images/noProjects.png";
import { apiRequest } from "@api/request";
import { getCorrectDate } from "@components/Calendar/calendarHelper";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
import archive from "assets/icons/archiveTracker.svg";
import search from "assets/icons/serchIcon.png";
import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg";
import noProjects from "assets/images/noProjects.png";
import "./tracker.scss";
@ -39,7 +39,7 @@ export const Tracker = () => {
const [filteredAllTasks, setFilteredAllTasks] = useState([]);
const [loader, setLoader] = useState(false);
const [filterCompleteTasks, setFilterCompleteTasks] = useState([]);
const [allCompletedTasks, setAllCompletedTasks] = useState([])
const [allCompletedTasks, setAllCompletedTasks] = useState([]);
const [modalCreateProject, setModalCreateProject] = useState(false);
@ -66,12 +66,12 @@ export const Tracker = () => {
apiRequest(
`/task/get-user-tasks?user_id=${localStorage.getItem("id")}`
).then((el) => {
const allTasks = el.filter((item) => item.status !== 0)
const completedTasks = el.filter((item) => item.status === 0)
const allTasks = el.filter((item) => item.status !== 0);
const completedTasks = el.filter((item) => item.status === 0);
setAllTasks(allTasks);
setFilteredAllTasks(allTasks);
setAllCompletedTasks(completedTasks)
setFilterCompleteTasks(completedTasks)
setAllCompletedTasks(completedTasks);
setFilterCompleteTasks(completedTasks);
});
}, []);
@ -99,7 +99,7 @@ export const Tracker = () => {
function filterArchiveTasks(e) {
setFilterCompleteTasks(
allCompletedTasks.filter((item) => {
allCompletedTasks.filter((item) => {
if (!e.target.value) {
return item;
}
@ -291,41 +291,50 @@ export const Tracker = () => {
</div>
<div className="archive__tasksWrapper">
{loader && <Loader style="green" />}
{!loader && <>
{Boolean(filterCompleteTasks.length) ? (
filterCompleteTasks.map((task, index) => {
return (
<div className="archive__completeTask" key={index}>
<div className="archive__completeTask__description">
<p>{task.title}</p>
<p className="date">{task.description}</p>
</div>
<div className="archive__completeTask__info">
<img src={urlForLocal(task.user.avatar)} alt="avatar" />
<div className="archive__completeTask__info__project">
{/*<span>Проект</span>*/}
<p>{getCorrectDate(task.updated_at)}</p>
{!loader && (
<>
{Boolean(filterCompleteTasks.length) ? (
filterCompleteTasks.map((task, index) => {
return (
<div className="archive__completeTask" key={index}>
<div className="archive__completeTask__description">
<p>{task.title}</p>
<p className="date">{task.description}</p>
</div>
<div className="archive__completeTask__info">
<img
src={urlForLocal(task.user.avatar)}
alt="avatar"
/>
<div className="archive__completeTask__info__project">
{/*<span>Проект</span>*/}
<p>{getCorrectDate(task.updated_at)}</p>
</div>
</div>
</div>
</div>
);
})
) : (
<div className="archive__noItem">
<p>В архиве задач нет</p>
</div>
);
})
) : (
<div className="archive__noItem">
<p>В архиве задач нет</p>
</div>
)}
</>
)}
</>
}
</div>
</div>
<div className="archive__projects">
<div className="archive__title">
<h3>Архив проектов:</h3>
<p>{projects.filter((project) => project.status === 10).length} проект(ов)</p>
<p>
{projects.filter((project) => project.status === 10).length}{" "}
проект(ов)
</p>
</div>
<div className="archive__tasksWrapper">
{Boolean(projects.filter((project) => project.status === 10).length) ? (
{Boolean(
projects.filter((project) => project.status === 10).length
) ? (
projects.map((project, index) => {
return project.status === 10 ? (
<div className="archive__completeTask" key={index}>
@ -334,7 +343,9 @@ export const Tracker = () => {
<p className="date">{project.date}</p>
</div>
</div>
): '';
) : (
""
);
})
) : (
<div className="archive__noItem">

20
src/pages/ViewReport/ViewReport.jsx
View File

@ -1,21 +1,21 @@
import React, { useEffect, useState } from "react";
import { Link, Navigate, useParams } from "react-router-dom";
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 { Navigation } from "../../components/Navigation/Navigation";
import { apiRequest } from "@api/request";
import { apiRequest } from "../../api/request";
import {
getCorrectDate,
getCreatedDate,
hourOfNum,
} from "../../components/Calendar/calendarHelper";
} from "@components/Calendar/calendarHelper";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import arrow from "../../images/right-arrow.png";
import arrowSwitchDate from "../../images/arrowViewReport.png";
import arrowSwitchDate from "assets/icons/arrows/arrowViewReport.png";
import arrow from "assets/icons/arrows/left-arrow.png";
import "./viewReport.scss";
@ -103,7 +103,7 @@ export const ViewReport = () => {
Ваши отчеты - <span>просмотр отчета за день</span>
</h2>
<Link className="viewReport__back" to={`/profile/calendar`}>
<img src={arrow} alt="arrow" />
<img src={arrow} alt="#" />
<p>Вернуться</p>
</Link>
<div className="viewReport__bar">

186
src/pages/quiz/PassingTests.js
View File

@ -1,83 +1,103 @@
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>
)
}
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
import { completedTestSelector } from "@redux/quizSlice";
import { Footer } from "@components/Common/Footer/Footer";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
import { BlockCompletedTest } from "@components/features/quiz/BlockCompletedTest";
import { CardIntroduction } from "@components/features/quiz/Card-introduction";
import { QuizPassingInformation } from "@components/features/quiz/Quiz-passing-information";
import { TaskQuiz } from "@components/features/quiz/Task";
export const PassingTests = () => {
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>
);
};

303
src/pages/quiz/QuizPage.js
View File

@ -1,144 +1,175 @@
import React, { useEffect, useState } from 'react'
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 { Link } from "react-router-dom";
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"
import { questionnairesSelector, setQuestionnaires } from "@redux/quizSlice";
import { apiRequest } from "@api/request";
import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
import { Footer } from "@components/Common/Footer/Footer";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
import { CardAvailableTest } from "@components/features/quiz/CardAviableTest";
import { SelectedCategory } from "@components/features/quiz/SelectedCategory";
import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
import "./quiz-page.scss";
export const QuizPage = () => {
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);
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=${userId}`
).then((res) => dispatch(setQuestionnaires(res)));
}, []);
useEffect(() => {
apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
.then(res => dispatch(setQuestionnaires(res)))
}, [])
return (
<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>
</>
)}
return (
<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 />
{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>
);
};

88
src/pages/quiz/QuizReportPage.js
View File

@ -1,42 +1,46 @@
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>
)
};
import React from "react";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { selectedTest } from "@redux/quizSlice";
import { Footer } from "@components/Common/Footer/Footer";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
import { AlertResult } from "@components/features/quiz/AlertResult";
import { QuizReport } from "@components/features/quiz/QuizReport";
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>
);
};

272
src/pages/quiz/quiz-page.scss
View File

@ -1,143 +1,139 @@
.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;
}
}
.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;
}
.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;
}
.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;
}
}
.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;
}
}