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

Merge pull request #60 from apuc/parthners-area

Browse Source 
Parthners area
This commit is contained in:
NikoM1k 2023-03-20 15:10:59 +02:00 committed by GitHub
commit 86e174c032
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 1184 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@ -21,11 +21,12 @@ import {Summary} from './pages/Summary/Summary'
import {ViewReport} from './pages/ViewReport/ViewReport'
import {Tracker} from './pages/Tracker/Tracker'
import {Payouts} from './pages/Payouts/Payouts'
import {Settings} from './pages/Settings/Settings'
import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings"
import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests'
import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest'
import {PartnerBid} from './pages/PartnerBid/PartnerBid'
import {PartnerPersonalInfo} from "./pages/PartnerPersonalInfo/PartnerPersonalInfo";
import {PartnerTreaties} from "./pages/PartnerTreaties/PartnerTreaties";
import './fonts/stylesheet.css'
import 'bootstrap/dist/css/bootstrap.min.css'
@ -66,11 +67,12 @@ const App = () => {
<Route exact path='view' element={<ViewReport/>}/>
<Route exact path='tracker' element={<Tracker/>}/>
<Route exact path='payouts' element={<Payouts/>}/>
<Route exact path='settings' element={<Settings/>}/>
<Route exact path='settings' element={<PartnerSettings/>}/>
<Route exact path='requests' element={<PartnerRequests/>}/>
<Route exact path='add-request' element={<PartnerAddRequest/>}/>
<Route exact path='bid' element={<PartnerBid/>}/>
<Route exact path='employees' element={<PartnerPersonalInfo/>}/>
<Route exact path='treaties' element={<PartnerTreaties/>}/>
</Route>
<Route path="*" element={<Navigate to="/profile" replace/>}/>

2
src/components/ProfileHeader/ProfileHeader.js
View File

@ -59,7 +59,7 @@ export const ProfileHeader = () => {
name: 'Трекер'
},
{
path: '/payouts',
path: '/treaties',
name: 'Договора'
},
{

26
src/components/UI/ModalErrorLogin/ModalErrorLogin.js Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import "./modalErrorLogin.scss";
export const ModalErrorLogin = ({ active, setActive }) => {
return (
<div
className={active ? "modal-error active" : "modal-error"}
onClick={() => setActive(false)}
>
<div
className="modal-error__content"
onClick={(e) => e.stopPropagation()}
>
<h2>Ошибка входа</h2>
<p>Введены некоректные данные для входа</p>
<button className="modal-error__content-button">
Попробовать еще раз
</button>
<span onClick={() => setActive(false)}></span>
</div>
</div>
);
};
export default ModalErrorLogin;

77
src/components/UI/ModalErrorLogin/modalErrorLogin.scss Normal file
View File

@ -0,0 +1,77 @@
.modal-error {
z-index: 9;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
&__content {
position: relative;
padding: 54px 76px;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 40px;
display: flex;
flex-direction: column;
align-items: center;
h2 {
font-size: 24px;
line-height: 29px;
color: #263238;
margin-bottom: 16px;
}
p {
font-size: 12px;
line-height: 14px;
width: 176px;
text-align: center;
font-weight: 300;
margin-bottom: 30px;
}
&-button {
color: white;
font-size: 14px;
line-height: 32px;
width: 198px;
height: 50px;
background: #52b709;
border-radius: 44px;
border: none;
}
span {
cursor: pointer;
position: absolute;
top: 30px;
right: 36px;
&:before,
&:after {
content: "";
position: absolute;
width: 16px;
height: 2px;
background: #263238;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
}
.modal-error.active {
transform: scale(1);
}

BIN
src/images/astralLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/images/konturLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

8
src/pages/PartnerPersonalInfo/PartnerPersonalInfo.js
View File

@ -91,7 +91,7 @@ export const PartnerPersonalInfo = () => {
},
])
return (
<div className="infoPersonal">
<div className="personalInfo">
<ProfileHeader />
<div className="container">
<ProfileBreadcrumbs links={[
@ -99,10 +99,10 @@ export const PartnerPersonalInfo = () => {
{name: 'Данные моего персонала', link: '/profile/employees'},
]}
/>
<h2 className="infoPersonal__title">Данные персонала</h2>
<div className="infoPersonal__items">
<h2 className="personalInfo__title">Данные персонала</h2>
<div className="personalInfo__items">
{personalInfoItems.map((item, index) => {
return <Link to={item.link} className={item.available ? "infoPersonal__item item" : "infoPersonal__item item item__disable"}>
return <Link to={item.link} key={index} className={item.available ? "personalInfo__item item" : "personalInfo__item item item__disable"}>
<div className="item__title">
<img src={item.img} alt={item.title} />
<h4>{item.title}</h4>

2
src/pages/PartnerPersonalInfo/parthnerPersonalInfo.scss
View File

@ -1,4 +1,4 @@
.infoPersonal {
.personalInfo {
background: #F1F1F1;
height: 100%;
min-height: 100vh;

92
src/pages/PartnerSettings/PartnerSettings.js Normal file
View File

@ -0,0 +1,92 @@
import React from "react";
import { Footer } from "../../components/Footer/Footer";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import kontur from "../../images/konturLogo.png";
import astral from "../../images/astralLogo.png";
import "./partnerSettings.scss";
export const PartnerSettings = () => {
return (
<div className="settings">
<ProfileHeader />
<div className="container settings__page">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Данные моего персонала", link: "/profile/employees" },
]}
/>
<div className="partner-settings">
<h2 className="infoPersonal__title">Настройки акаунта</h2>
<div className="partner-settings__body">
<div className="partner-settings__login">
<h3 className="settings__title">Вход в систему</h3>
<p className="settings__lable-first">Изменение логина</p>
<div className="settings__input">
<input></input>
</div>
<p className="settings__lable-second">Изменение пароля</p>
<div className="settings__input">
<input></input>
</div>
<div className="settings__buttons">
<button className="settings__buttons-cancel">Отмена</button>
<button className="settings__buttons-save">Сохранить</button>
</div>
<span className="settings__agreement">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
использования персональных данных
</span>
</div>
<div className="partner-settings__report">
<h3 className="settings__title">Документы и отчеты</h3>
<p className="settings__lable-first">Изменить провадера ЭДО</p>
<div className="partner-settings__logo">
<div>
<label className="partner-settings__label-first">
<img src={astral}></img>
<input type="checkbox" />
<span className="checkbox__first"></span>
</label>
</div>
<div>
<label className="partner-settings__label-second">
<img src={kontur}></img>
<input type="checkbox" />
<span className="checkbox__second"></span>
</label>
</div>
</div>
<p className="settings__lable-second">
Изменение названия компании
</p>
<div className="settings__input">
<input></input>
</div>
<div className="settings__buttons">
<button className="settings__buttons-cancel">Отмена</button>
<button className="settings__buttons-save">Сохранить</button>
</div>
<span className="settings__agreement">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
использования персональных данных
</span>
</div>
</div>
</div>
</div>
<Footer />
</div>
);
};
export default PartnerSettings;

220
src/pages/PartnerSettings/partnerSettings.scss Normal file
View File

@ -0,0 +1,220 @@
.settings {
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
&__page {
max-width: 1160px !important;
margin-top: 23px;
}
&__title {
color: #5b6871;
font-size: 20px;
line-height: 24px;
}
&__lable {
&-first,
&-second {
font-size: 15px;
line-height: 18px;
color: #000000;
}
&-first {
margin: 39px 0 10px 0;
}
&-second {
margin: 31px 0 10px 0;
}
}
&__input {
background: #eff2f7;
border-radius: 8px;
width: 373px;
height: 35px;
border: none;
input {
font-size: 15px;
background: #eff2f7;
height: 100%;
margin-left: 15px;
width: 85%;
border: none;
outline: none;
}
}
&__agreement {
font-size: 12px;
line-height: 18px;
color: #000000;
font-weight: 300;
}
&__buttons {
width: 87%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 36px 0 30px 0;
&-cancel,
&-save {
border-radius: 44px;
width: 151px;
height: 40px;
font-size: 14px;
line-height: 32px;
}
&-cancel {
color: #6f6f6f;
background: white;
border: 0.5px solid #8dc63f;
}
&-save {
color: #ffffff;
background: #52b709;
border: none;
}
}
@media (max-width: 570px) {
&__input {
width: 95%;
}
&__buttons {
margin: 15px 0 14px 0;
width: 100%;
flex-direction: column-reverse;
align-items: center;
&-save {
margin-bottom: 15px;
}
}
}
}
.checkbox {
&__first {
margin: 0px 0 0 20px;
}
&__second {
margin: 0px 20px 0 0;
}
}
.partner-settings {
margin-bottom: 110px;
&__body {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 27px;
}
&__report,
&__login {
width: 500px;
height: 435px;
background: #ffffff;
border-radius: 12px;
padding: 30px 60px;
}
&__logo {
display: flex;
align-items: center;
justify-content: space-between;
div {
display: flex;
align-items: center;
label input {
display: none;
}
label span {
cursor: pointer;
height: 24px;
width: 24px;
border: none;
display: inline-block;
position: relative;
background: #eff1f3;
border-radius: 8px;
padding: 3px;
}
[type="checkbox"]:checked + span:before {
content: "\2714";
position: absolute;
top: -5px;
left: 2px;
font-size: 23px;
color: #1c1243;
font-weight: 300;
}
}
}
&__label {
&-first,
&-second {
display: flex;
align-items: center;
}
&-second {
flex-direction: row-reverse;
}
}
@media (max-width: 1200px) {
margin-bottom: 15px;
&__body {
flex-direction: column;
}
&__report {
margin-top: 50px;
}
}
@media (max-width: 570px) {
&__report,
&__login {
width: 100%;
height: 100%;
padding: 20px 30px;
}
&__logo {
flex-direction: column;
align-items: flex-start;
}
&__label {
&-second,
&-first {
flex-direction: row;
}
}
.checkbox {
&__second {
margin: 0px 0 0 20px;
}
}
}
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 458 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 473 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 248 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 407 B

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

@ -0,0 +1,4 @@
<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

After

Width:  |  Height:  |  Size: 3.0 KiB

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

@ -0,0 +1,4 @@
<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

After

Width:  |  Height:  |  Size: 3.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 505 B

356
src/pages/PartnerTreaties/PartnerTreaties.js Normal file
View File

@ -0,0 +1,356 @@
import React, {useState} from 'react';
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {Footer} from "../../components/Footer/Footer";
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 './partnerTreaties.scss'
export const PartnerTreaties = () => {
const [toggleTab, setToggleTab] = useState(1);
const toggleTabs = (index) => {
setToggleTab(index);
};
return(
<div className="treaties">
<ProfileHeader/>
<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>
</div>
<Footer/>
</div>
)
}

393
src/pages/PartnerTreaties/partnerTreaties.scss Normal file
View File

@ -0,0 +1,393 @@
.treaties {
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
&__title {
font-weight: 700;
font-size: 22px;
line-height: 32px;
color: #000000;
}
&__tabs {
display: flex;
margin-top: 30px;
&__head {
width: 150px;
.tab {
display: flex;
padding: 12px 40px 15px 19px;
cursor: pointer;
align-items: center;
p {
margin: 0 0 0 15px;
font-weight: 400;
font-size: 16px;
line-height: 32px;
color: #000000;
}
}
.active-tab {
background: white;
border-radius: 15px 0 0 15px;
}
}
&__content {
width: calc(100% - 150px);
&__main {
background: #FFFFFF;
border-radius: 0 12px 12px 12px;
flex-wrap: wrap;
column-gap: 34px;
display: none;
align-items: center;
.main__head {
display: flex;
width: 100%;
justify-content: flex-end;
padding: 14px 35px;
align-items: center;
p {
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: #000000;
margin-bottom: 0;
margin-right: 25px;
}
.img {
width: 32px;
height: 32px;
background: #E2E5CF;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
img {
height: 12px;
width: 7px;
}
}
}
.acts {
justify-content: space-between;
align-items: center;
.provider {
display: flex;
img {
width: 78px;
height: 21px;
}
}
.info {
display: flex;
align-items: center;
}
}
.notPaid {
background: #EBEBEB;
}
.persons {
justify-content: space-between;
}
.item {
padding: 29px 30px;
width: 100%;
display: flex;
border-radius: 0px 0px 12px 12px;
&__info {
display: flex;
flex-direction: column;
row-gap: 16px;
p {
margin-bottom: 0;
}
.number {
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #000000;
}
.astral {
display: flex;
.img {
width: 48px;
height: 48px;
background: #CFE0B8;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
}
p {
font-weight: 400;
font-size: 12px;
line-height: 20px;
color: #000000;
max-width: 180px;
margin-right: 18px;
}
}
p {
font-weight: 300;
font-size: 10px;
line-height: 17px;
color: #000000;
}
.logo {
max-width: 125px;
height: 33px;
}
}
&__person {
display: flex;
&__date {
margin-right: 25px;
.arrow {
margin: 14px 0;
height: 14px;
width: 125px;
}
}
&__info {
display: flex;
img {
width: 56px;
height: 56px;
}
&__name {
display: flex;
flex-direction: column;
margin-left: 20px;
p {
max-width: 95px;
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: #000000;
}
span {
font-weight: 300;
font-size: 10px;
line-height: 17px;
color: #000000;
}
}
}
&__act {
display: flex;
align-items: center;
.arrow {
background: #CFE0B8;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 48px;
margin-left: 34px;
}
&__info {
display: flex;
flex-direction: column;
.personArrow {
margin-top: 20px;
max-width: 125px;
}
.moreInfo {
font-weight: 300;
font-size: 10px;
line-height: 17px;
margin-top: 14px;
}
}
&__avatar {
display: flex;
align-items: center;
img {
width: 42px;
height: 42px;
}
}
&__name {
margin-left: 15px;
p {
font-weight: 500;
font-size: 14px;
line-height: 18px;
max-width: 100px;
}
span {
display: flex;
margin-top: 13px;
font-weight: 300;
font-size: 10px;
line-height: 17px;
}
}
}
}
&__more {
display: flex;
margin-left: 130px;
flex-direction: column;
max-width: 450px;
justify-content: end;
p {
margin-bottom: 0;
}
&__price {
display: flex;
}
&__names {
display: flex;
margin-bottom: 40px;
p {
font-weight: 500;
font-size: 15px;
line-height: 20px;
color: #000000;
max-width: 200px;
&:nth-child(2) {
margin-left: 70px;
max-width: 170px;
}
}
}
&__date {
display: flex;
align-items: center;
column-gap: 13px;
p {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-left: 10px;
}
&__from {
display: flex;
p {
color: #A29EB6;
}
}
&__to {
display: flex;
p {
color: #406128;
}
}
}
&__price {
display: flex;
justify-content: space-between;
margin-bottom: 35px;
p {
font-weight: 500;
font-size: 20px;
line-height: 22px;
color: #000000;
}
.total {
color: #1458DD;
}
}
}
.price {
justify-content: space-between;
width: 100%;
max-width: none;
.item__more__names {
justify-content: space-between;
p {
margin-left: 0;
}
}
}
}
}
.active__content {
display: flex;
}
.second {
border-radius: 12px;
}
}
}
.container {
max-width: 1160px;
margin-top: 23px;
@media (max-width: 570px) {
margin-top: 0;
}
}
footer {
margin-top: 70px;
}
}

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

@ -77,13 +77,13 @@ export const Profile = () => {
description: 'Контроль времени и<br/> выполнение задач'
},
{
path: '',
path: '/treaties',
img: paymentIcon,
title: 'Договора и отчетность',
description: 'Ключевые условия<br/> договора'
},
{
path: '',
path: '/settings',
img: settingIcon,
title: 'Настройки аккаунта',
description: 'Перейдите чтобы начать<br/> редактирование'

11
src/pages/Settings/Settings.js
View File

@ -1,11 +0,0 @@
import React from 'react';
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
export const Settings = () => {
return (
<div className='settings'>
<ProfileHeader />
</div>
)
};

1
src/pages/Summary/summary.scss
View File

@ -231,7 +231,6 @@
}
&__wrapper {
max-width: 630px;
display: flex;
flex-wrap: wrap;
column-gap: 5px;