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

partner treaties

Browse Source
This commit is contained in:
Николай Полтщук 2023-03-20 14:00:10 +03:00
parent c12d00872a
commit 653af43f52
17 changed files with 766 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -26,6 +26,7 @@ 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'
@ -71,6 +72,7 @@ const App = () => {
<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: 'Договора'
},
{

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;

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;
}
}

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

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

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

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