Merge pull request #60 from apuc/parthners-area

Parthners area

src/App.js

@@ -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/>}/>

src/components/ProfileHeader/ProfileHeader.js

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

src/components/UI/ModalErrorLogin/ModalErrorLogin.js

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

src/components/UI/ModalErrorLogin/modalErrorLogin.scss

@@ -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);
+}

src/pages/PartnerPersonalInfo/PartnerPersonalInfo.js

@@ -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>
+                <h2 className="personalInfo__title">Данные персонала</h2>
-                <div className="infoPersonal__items">
+                <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>

src/pages/PartnerPersonalInfo/parthnerPersonalInfo.scss

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

src/pages/PartnerSettings/PartnerSettings.js

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

src/pages/PartnerSettings/partnerSettings.scss

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

src/pages/PartnerTreaties/Images/lock.svg

@@ -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>

src/pages/PartnerTreaties/Images/lockDone.svg

@@ -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>

src/pages/PartnerTreaties/PartnerTreaties.js

@@ -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>
+    )
+}

src/pages/PartnerTreaties/partnerTreaties.scss

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

src/pages/Profile/Profile.js

@@ -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/> редактирование'

src/pages/Settings/Settings.js

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

src/pages/Summary/summary.scss

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