Merge pull request #51 from apuc/partner-personal-area

personal area partner with fixes report
2023-02-21 18:05:36 +02:00 · 2023-02-21 18:05:36 +02:00 · 21423e7dc4
commit 21423e7dc4
parent 740659e1f1 e26b8cc22e
22 changed files with 873 additions and 122 deletions
--- a/src/App.js
+++ b/src/App.js
@ -22,6 +22,8 @@ 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 {PartnerRequests} from './pages/PartnerRequests/PartnerRequests'
+import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest'

 import './fonts/stylesheet.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
@ -64,6 +66,8 @@ const App = () => {
              <Route exact path='tracker' element={<Tracker/>}/>
              <Route exact path='payouts' element={<Payouts/>}/>
              <Route exact path='settings' element={<Settings/>}/>
+              <Route exact path='requests' element={<PartnerRequests/>}/>
+              <Route exact path='add-request' element={<PartnerAddRequest/>}/>
            </Route>

            <Route path="*" element={<Navigate to="/" replace/>}/>
--- a/src/components/Calendar/calendar.scss
+++ b/src/components/Calendar/calendar.scss
@ -96,6 +96,12 @@
      transform: scale(1.02);
    }

+    @media (max-width: 950px) {
+      width: 200px;
+      font-size: 15px;
+      height: 50px;
+    }
+
    @media (max-width: 800px) {
      width: auto;
      height: auto;
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@ -29,11 +29,18 @@
    &-box {
      display: flex;
      align-items: center;
-      margin-left: 40px;
+      margin-left: 20px;
+      cursor: pointer;

      img {
-        width: 6px;
-        height: 6px;
+        margin: 0px 10px;
+        width: 12px;
+        height: 12px;
+
+        &:first-child {
+          transform: rotate(180deg);
+          margin: 0;
+        }
      }

      span {
--- a/src/components/Calendar/calendarHelper.js
+++ b/src/components/Calendar/calendarHelper.js
@ -53,7 +53,8 @@ export function currentMonthAndDay(day) {
 }

 export function getCorrectDate(day) {
-  return `${new Date(day).getDate()}-${new Date(day).getMonth() + 1}-${new Date(day).getFullYear()}`
+  const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
+  return `${new Date(day).getDate()} ${months[new Date(day).getMonth()]} ${new Date(day).getFullYear()} года`
 };

 export function currentMonthAndDayReportPage() {
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.js
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.js
@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import ellipse from '../../images/ellipse.png'
+import arrow from '../../images/arrowCalendar.png'
 import rectangle from '../../images/rectangle__calendar.png'
 import calendarIcon from '../../images/calendar_icon.png'
 import moment from 'moment'
@ -68,27 +68,27 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
        <div className='calendar-component'>
            <div className='calendar-component__header'>
                <h3>Мои отчеты</h3>
-                <div className='calendar-component__header-box'>
-                    <img src={ellipse} alt='' />
-                    <span onClick={() => {
-                        setValueHandler(prevMonth())
-                        dispatch(setRequestDate(getReports(prevMonth())))
-                    }}>
+                <div className='calendar-component__header-box' onClick={() => {
+                    setValueHandler(prevMonth())
+                    dispatch(setRequestDate(getReports(prevMonth())))
+                }}>
+                    <img src={arrow} alt='' />
+                    <span>
                        {prevMonth().format('MMMM')}
                    </span>
                </div>
                <div className='calendar-component__header-box'>
                    <span>{value.format('YYYY')}</span>
                </div>
-                <div className='calendar-component__header-box'>
-                    <img src={ellipse} alt='' />
-                    <span onClick={() => {
-                        setValueHandler(nextMonth())
-                        dispatch(setRequestDate(getReports(nextMonth())))
+                <div className='calendar-component__header-box' onClick={() => {
+                    setValueHandler(nextMonth())
+                    dispatch(setRequestDate(getReports(nextMonth())))

-                    }}>
+                }}>
+                    <span>
                        {nextMonth().format('MMMM')}
                    </span>
+                    <img src={arrow} alt='' />
                </div>
            </div>

--- a/src/components/ProfileCalendar/profileCalendar.scss
+++ b/src/components/ProfileCalendar/profileCalendar.scss
@ -53,4 +53,22 @@
      transform: scale(1.02);
    }
  }
+
+  .summary__info {
+    @media (max-width: 800px) {
+      .summary__name {
+        margin: 0;
+        max-width: 220px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    @media (max-width: 500px) {
+      .summary__name {
+        max-width: 150px;
+      }
+    }
+  }
 }
--- a/src/components/ProfileHeader/ProfileHeader.js
+++ b/src/components/ProfileHeader/ProfileHeader.js
@ -21,6 +21,45 @@ export const ProfileHeader = () => {

  const userRole = useSelector(getRole);
  const profileInfo = useSelector(getProfileInfo);
+  const [user] = useState('developer')
+  const [navInfo] = useState({
+    developer: [
+      {
+        path: '/summary',
+        name: 'Резюме'
+      },
+      {
+        path: '/calendar',
+        name: 'Отчетность'
+      },
+      {
+        path: '/tracker',
+        name: 'Трекер'
+      },
+      {
+        path: '/payouts',
+        name: 'Выплаты'
+      },
+      {
+        path: '/settings',
+        name: 'Настройки'
+      },
+    ],
+    partner: [
+      {
+        path: '/employees',
+        name: 'Сотрудники'
+      },
+      {
+        path: '',
+        name: 'Отчетность'
+      },
+      {
+        path: '/requests',
+        name: 'Запросы'
+      },
+    ]
+  })

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

@ -44,7 +83,14 @@ export const ProfileHeader = () => {
      <header className='profileHeader'>
        <div className='profileHeader__head'>
          <div className='profileHeader__container'>
-            <h2 className='profileHeader__title'>itguild.<span>для разработчиков</span></h2>
+            <h2 className='profileHeader__title'>itguild.
+              <span>
+                {user === 'developer' ?
+                  'для разработчиков' :
+                  'для партнеров'
+                }
+              </span>
+            </h2>
            <button onClick={handler} className='profileHeader__logout'>
              {isLoggingOut ? <Loader/> : 'Выйти'}
            </button>
@ -53,15 +99,20 @@ export const ProfileHeader = () => {
        <div className='profileHeader__info'>
          <div className='profileHeader__container'>
            <nav className='profileHeader__nav'>
-              <NavLink end to={'/profile/summary'}>Резюме</NavLink>
-              <NavLink end to={'/profile'}>Отчетность</NavLink>
-              <NavLink end to={'/profile/tracker'}>Трекер</NavLink>
-              <NavLink end to={'/profile/payouts'}>Выплаты</NavLink>
-              <NavLink end to={'/profile/settings'}>Настройки</NavLink>
+              {
+                navInfo[user].map((link, index) => {
+                  return <NavLink key={index} end to={`/profile${link.path}`}>{link.name}</NavLink>
+                })
+              }
            </nav>

            <div className='profileHeader__personalInfo'>
-              <h3 className='profileHeader__personalInfoName'>{profileInfo?.fio}</h3>
+              <h3 className='profileHeader__personalInfoName'>
+                {user === 'developer' ?
+                    profileInfo?.fio :
+                    ''
+                }
+              </h3>
              <NavLink end to={'/profile'}>
                <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/>
              </NavLink>
--- a/src/components/ReportForm/ReportForm.js
+++ b/src/components/ReportForm/ReportForm.js
@ -60,13 +60,11 @@ const ReportForm = () => {
  const totalHours = inputs.reduce((a, b) => a + b.hours_spent, 0);

  const deleteInput = (indexRemove) => {
-    if (indexRemove !== 0) {
-      setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
-    }
+    setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
  };

  const handler = () => {
-    if(!inputs[0].task) {
+    if(!inputs[0].task || !inputs[0].hours_spent) {
      setReportSuccess('Заполните задачи');
      setTimeout(() => setReportSuccess(''), 1000)
      return
--- a/src/helper.js
+++ b/src/helper.js
@ -3,7 +3,7 @@ export function createMarkup(text) {
 }

 export function transformHtml(text) {
-  let startHtml = {__html: text.split('<h4> || <h3> || <h2> || <h1>').join('<br><h2>').split('<br>')};
+  let startHtml = {__html: text.split('<h3> || <h2>').join('<br><h2>').split('<br>')};
  startHtml = startHtml.__html.filter((el) =>
      el !== null && el !== "" || el === 0
  );
--- a/src/images/arrowCalendar.png
+++ b/src/images/arrowCalendar.png
--- a/src/images/arrowSelect.png
+++ b/src/images/arrowSelect.png
--- a/src/images/selectArrow.png
+++ b/src/images/selectArrow.png
--- a/src/pages/PartnerAddRequest/PartnerAddRequest.js
+++ b/src/pages/PartnerAddRequest/PartnerAddRequest.js
@ -0,0 +1,98 @@
+import React from 'react';
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {Footer} from "../../components/Footer/Footer";
+
+import arrowDown from "../../images/selectArrow.png"
+
+import './partnerAddRequest.scss'
+
+export const PartnerAddRequest = () => {
+    return (
+        <div className='partnerAddRequest'>
+            <ProfileHeader />
+            <div className='container'>
+                <h2 className='partnerAddRequest__title'>Страница добавления заявки</h2>
+                <div className='partnerAddRequest__section'>
+                    <div className='partnerAddRequest__form'>
+                        <div className='partnerAddRequest__form__block form__block'>
+                            <h3 className='form__block__title'>Данные открытой позиции</h3>
+                            <div className='form__block__section'>
+                                <h3>Название вакансии</h3>
+                                <div className='form__block__section__input'>
+                                    <input type='text' placeholder='Вакансия'/>
+                                </div>
+                            </div>
+                            <div className='form__block__section'>
+                                <h3>Выберите специализацию</h3>
+                                <div className='form__block__section__selects'>
+                                    <div className='form__block__section__select'>
+                                        <span>Разработка</span>
+                                        <img src={arrowDown} />
+                                    </div>
+                                    <div className='form__block__section__select'>
+                                        <span>Backend Developer</span>
+                                        <img src={arrowDown} />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className='partnerAddRequest__form__block form__block'>
+                            <h3 className='form__block__title'>Квалификация</h3>
+                            <div className='form__block__section'>
+                                <h3>Выберите уровень знаний </h3>
+                                <div className='form__block__section__select'>
+                                    <span>Разработка</span>
+                                    <img src={arrowDown} />
+                                </div>
+                            </div>
+                            <div className='form__block__section'>
+                                <h3>Введите необходимое описание</h3>
+                                <textarea/>
+                            </div>
+                            <div className='form__block__section'>
+                                <h3>Необходимое количество человек на позицию</h3>
+                                <div className='form__block__section__select'>
+                                    <span>2</span>
+                                    <img src={arrowDown} />
+                                </div>
+                            </div>
+                            <div className='form__block__buttons'>
+                                <button className='form__block__cancel'>Отмена</button>
+                                <button className='form__block__save'>Сохранить</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='partnerAddRequest__info'>
+                        <div className='partnerAddRequest__info__block'>
+                            <h4>Процесс:</h4>
+                            <p>
+                                При аутстафе мы предоставляем вам
+                                it-специалистов при этом они находятся в
+                                нашем штате.
+                                <br/><br/>
+                                Вы сможете прособеседовать наших
+                                специалистов, посмотреть проекты и Git.
+                            </p>
+                        </div>
+                        <div className='partnerAddRequest__info__block'>
+                            <h4>Отчетность:</h4>
+                            <p>
+                                Вы можете обратиться к специалисту
+                                напрямую.
+                                <br/><br/>
+                                Каждый день специалисты описывают
+                                выполненные работы и затраченные
+                                на это часы.
+                                <br/><br/>
+                                Можем выделить руководителя проекта
+                                и тестировщиков.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <Footer />
+        </div>
+    )
+}
--- a/src/pages/PartnerAddRequest/partnerAddRequest.scss
+++ b/src/pages/PartnerAddRequest/partnerAddRequest.scss
@ -0,0 +1,228 @@
+.partnerAddRequest {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;
+
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
+
+    @media (max-width: 570px) {
+      margin-top: 0;
+    }
+  }
+
+  &__title {
+    color: #000000;
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 32px
+  }
+
+  &__section {
+    margin-top: 25px;
+    display: flex;
+    column-gap: 30px;
+
+    @media (max-width: 1020px) {
+      flex-direction: column;
+      row-gap: 22px;
+    }
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    row-gap: 22px;
+
+    @media (max-width: 1020px) {
+      order: 2;
+    }
+  }
+
+  .form__block {
+    background: #FFFFFF;
+    border-radius: 12px;
+    padding: 25px 95px 30px 55px;
+    min-width: 600px;
+    width: 100%;
+
+    @media (max-width: 750px) {
+      padding: 15px 50px 15px 30px;
+      min-width: auto;
+    }
+
+    &__title {
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+      color: #5B6871;
+      margin-bottom: 35px;
+    }
+
+    &__section {
+      margin-bottom: 35px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      h3 {
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 18px;
+        color: #000000;
+        margin-bottom: 10px;
+      }
+
+      &__input {
+        background: #EFF2F7;
+        border-radius: 8px;
+        padding: 8px 12px;
+        margin-bottom: 35px;
+
+        @media (max-width: 1020px) {
+          max-width: 500px;
+        }
+
+        input {
+          background: none;
+          border: none;
+          color: #000000;
+          font-weight: 400;
+          font-size: 15px;
+          line-height: 18px;
+          outline: none;
+        }
+      }
+
+      &__selects {
+        display: flex;
+        column-gap: 32px;
+        justify-content: space-between;
+
+        @media (max-width: 1020px) {
+          justify-content: normal;
+        }
+
+        @media (max-width: 515px) {
+          flex-direction: column;
+          row-gap: 20px;
+        }
+      }
+
+      &__select {
+        padding: 8px 15px 9px 12px;
+        background: #EFF2F7;
+        border-radius: 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        max-width: 202px;
+        width: 100%;
+
+        span {
+          color: #000000;
+          font-weight: 400;
+          font-size: 15px;
+          line-height: 18px;
+        }
+      }
+
+      textarea {
+        background: #EFF2F7;
+        border-radius: 8px;
+        width: 100%;
+        border: none;
+        height: 100px;
+        resize: none;
+        outline: none;
+        padding: 5px;
+        color: #000000;
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 18px;
+
+        @media (max-width: 1020px) {
+          max-width: 500px;
+        }
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      margin-top: 50px;
+
+      button {
+        max-width: 150px;
+        width: 100%;
+        height: 40px;
+      }
+    }
+
+    &__cancel {
+      border: 0.5px solid #8DC63F;
+      border-radius: 44px;
+      color: #6F6F6F;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 32px;
+      background: none;
+      margin-right: 23px;
+    }
+
+    &__save {
+      background: #52B709;
+      border-radius: 44px;
+      color: #FFFFFF;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 32px;
+      border: none;
+    }
+  }
+
+  footer {
+    margin-top: 70px;
+  }
+
+  &__info {
+    background: #FFFFFF;
+    border-radius: 12px;
+    width: 100%;
+    padding: 90px 48px 200px 62px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 140px;
+
+    @media (max-width: 1020px) {
+      order: 1;
+      padding: 20px;
+      flex-direction: row;
+      column-gap: 50px;
+    }
+
+    @media (max-width: 500px) {
+      flex-direction: column;
+      row-gap: 20px;
+    }
+
+    &__block {
+      h4 {
+        color: #5B6871;
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 24px;
+      }
+
+      p {
+        color: #000000;
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 18px;
+      }
+    }
+  }
+}
--- a/src/pages/PartnerRequests/PartnerRequests.js
+++ b/src/pages/PartnerRequests/PartnerRequests.js
@ -0,0 +1,64 @@
+import React, {useState} from 'react';
+import {Link} from "react-router-dom";
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {Footer} from "../../components/Footer/Footer";
+
+import './partnerRequests.scss'
+
+export const PartnerRequests = () => {
+    const [items] = useState([
+        {
+            name: 'PHP разработчик ',
+            count: 4
+        },
+        {
+            name: 'PHP разработчик ',
+            count: 4
+        },
+        {
+            name: 'PHP разработчик ',
+            count: 4
+        },
+        {
+            name: 'PHP разработчик ',
+            count: 4
+        }
+    ])
+    return (
+        <div className='partnerRequests'>
+            <ProfileHeader />
+            <div className='container'>
+                <h2 className='partnerRequests__title'>Запросы</h2>
+                <div className='partnerRequests__section'>
+                    <div className='partnerRequests__section__items'>
+                        {
+                            items.map((item, index) => {
+                                return <Link key={index} to={''} className='partnerRequests__section__item'>
+                                            <p className='partnerRequests__section__item__name'>
+                                                {item.name}
+                                            </p>
+                                            <p className='partnerRequests__section__item__count'>
+                                                Подходящие кандидаты<span>{item.count}</span>
+                                            </p>
+                                        </Link>
+                            })
+                        }
+                    </div>
+                    <div className='partnerRequests__section__info'>
+                        <h3>Инструкция: подачи заявки</h3>
+                        <p>
+                            Оператор компании заводит заявку и указывает необходимые параметры —
+                            количество сотрудников, стек, уровень специалиста
+                        </p>
+                        <Link to={'/profile/add-request'}>
+                            <span>+</span>
+                            Создать запрос
+                        </Link>
+                    </div>
+                </div>
+            </div>
+            <Footer/>
+        </div>
+    )
+};
--- a/src/pages/PartnerRequests/partnerRequests.scss
+++ b/src/pages/PartnerRequests/partnerRequests.scss
@ -0,0 +1,199 @@
+.partnerRequests {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;
+
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
+
+    @media (max-width: 570px) {
+      margin-top: 0;
+    }
+  }
+
+  &__title {
+    color: #000000;
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 32px;
+  }
+
+  &__section {
+    margin-top: 25px;
+    background: #FFFFFF;
+    border-radius: 12px;
+    padding: 33px 45px 40px;
+    display: flex;
+    column-gap: 30px;
+
+    @media (max-width: 795px) {
+      padding: 20px 25px 25px;
+    }
+
+    @media (max-width: 750px) {
+      flex-direction: column;
+    }
+
+    &__items {
+      display: flex;
+      width: 77%;
+      flex-wrap: wrap;
+      column-gap: 20px;
+      row-gap: 25px;
+
+      @media (max-width: 795px) {
+        row-gap: 10px;
+        column-gap: 15px;
+      }
+
+      @media (max-width: 750px) {
+        order: 2;
+        width: 100%;
+      }
+    }
+
+    &__item {
+      display: flex;
+      width: 48%;
+      flex-direction: column;
+      background: #F1F1F1;
+      border-radius: 12px;
+      padding: 20px 27px 15px 25px;
+      transition: 0.3s all ease;
+      position: relative;
+      max-height: 100px;
+
+      @media (max-width: 585px) {
+        width: 100%;
+      }
+
+      &:before {
+        content: '...';
+        position: absolute;
+        right: 27px;
+        bottom: 17%;
+        color: #6F6F6F;
+        font-size: 23px;
+      }
+
+      &:hover {
+        text-decoration: none;
+        box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+        transform: scale(1.02);
+      }
+
+      &__name {
+        color: #111112;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 32px;
+        margin-bottom: 9px;
+      }
+
+      &__count {
+        color: #6F6F6F;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 24px;
+        display: flex;
+        margin-bottom: 0;
+
+        span {
+          color: #6F6F6F;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 24px;
+          background: #DDDDDD;
+          border-radius: 4px;
+          width: 21px;
+          height: 24px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-left: 8px;
+        }
+      }
+    }
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      width: 22%;
+      padding-top: 5px;
+
+      @media (max-width: 750px) {
+        order: 1;
+        width: 100%;
+        text-align: center;
+        margin-bottom: 20px;
+
+        a {
+          margin: 0 auto;
+          width: 100%;
+        }
+      }
+
+      h3 {
+        color: #52B709;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 24px;
+        margin-bottom: 30px;
+
+        @media (max-width: 1085px) {
+          margin-bottom: 15px;
+          line-height: 18px;
+        }
+      }
+
+      p {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 24px;
+        color: #000000;
+        margin-bottom: 25px;
+
+        @media (max-width: 1085px) {
+          margin-bottom: 10px;
+          line-height: 19px;
+        }
+      }
+
+      a {
+        background: #52B709;
+        max-width: 150px;
+        border-radius: 44px;
+        height: 40px;
+        border: none;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 32px;
+        color: #FFFFFF;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: 0.3s all ease;
+
+        span {
+          color: white;
+          font-weight: 700;
+          font-size: 20px;
+          margin-right: 8px;
+        }
+
+        &:hover {
+          box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+          transform: scale(1.02);
+          text-decoration: none;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+
+  footer {
+    margin-top: 70px;
+  }
+}
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {useSelector} from "react-redux";
 import {Link} from "react-router-dom";

@ -22,79 +22,114 @@ import './profile.scss'
 export const Profile = () => {

  const profileInfo = useSelector(getProfileInfo);
+  const [user] = useState('developer')
+  const [profileItemsInfo] = useState({
+    developer: [
+      {
+        path: '/calendar',
+        img: reportsIcon,
+        title: 'Ваша отчетность',
+        description: '<span></span>Отработанных в этом месяце часов'
+      },
+      {
+        path: '/summary',
+        img: summaryIcon,
+        title: 'Данные и резюме',
+        description: 'Ваше резюме<br/><span>заполнено</span>'
+      },
+      {
+        path: '/tracker',
+        img: timerIcon,
+        title: 'Трекер времени',
+        description: 'Сколько времени занимает<br/> выполнение задач'
+      },
+      {
+        path: '/payouts',
+        img: paymentIcon,
+        title: 'Выплаты',
+        description: 'У вас <span>подтвержден</span><br/> статус самозанятого'
+      },
+      {
+        path: '/settings',
+        img: settingIcon,
+        title: 'Настройки аккаунта',
+        description: 'Перейдите чтобы начать<br/> редактирование'
+      }
+    ],
+    partner: [
+      {
+        path: '/requests',
+        img: reportsIcon,
+        title: 'Запросы и открытые позиции',
+        description: '<span>У вас 2 вакансии<br/></span>открытые от лица компании'
+      },
+      {
+        path: '',
+        img: summaryIcon,
+        title: 'Данные персонала',
+        description: 'Наши специалисты <br/><span>уже работающие у вас</span>'
+      },
+      {
+        path: '/tracker',
+        img: timerIcon,
+        title: 'Трекер времени',
+        description: 'Контроль времени и<br/> выполнение задач'
+      },
+      {
+        path: '',
+        img: paymentIcon,
+        title: 'Договора и отчетность',
+        description: 'Ключевые условия<br/> договора'
+      },
+      {
+        path: '',
+        img: settingIcon,
+        title: 'Настройки аккаунта',
+        description: 'Перейдите чтобы начать<br/> редактирование'
+      }
+    ]
+  })

  return (
      <div className='profile'>
        <ProfileHeader/>
        <div className='container'>
-          <h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
+          <h2 className='profile__title'>
+            {user === 'developer' ?
+                <span><p>Добрый день,&nbsp;</p>{profileInfo.fio}</span>
+                :
+              'ООО НДВ Консалтинг'
+            }
+          </h2>
          <div className='summary__info'>
            <div className='summary__person'>
              <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ''} className='summary__avatar' alt='avatar'/>
-              <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
+              <p className='summary__name'>
+                {user === 'developer' ?
+                    <span>{profileInfo.fio}, {profileInfo.specification} разработчик</span>
+                    :
+                    'ООО НДВ Консалтинг'
+                }
+              </p>
            </div>
          </div>
          <div className='profile__items'>
-            <Link to={'/profile/calendar'} className='item'>
-              <div className='item__about'>
-                <img src={reportsIcon} alt='report'/>
-                <h3>Ваша отчетность</h3>
-              </div>
-              <div className='item__info'>
-                <p><span></span>Отработанных в этом месяце часов</p>
-                <div className='item__infoLink'>
-                  <img src={rightArrow} alt='arrow'/>
-                </div>
-              </div>
-            </Link>
-            <Link to={'/profile/summary'} className='item'>
-              <div className='item__about'>
-                <img src={summaryIcon} alt='summary'/>
-                <h3>Данные и резюме</h3>
-              </div>
-              <div className='item__info'>
-                <p>Ваше резюме<br/><span>заполнено</span></p>
-                <div className='item__infoLink'>
-                  <img src={rightArrow} alt='arrow'/>
-                </div>
-              </div>
-            </Link>
-            <Link to={'/profile'} className='item'>
-              <div className='item__about'>
-                <img src={timerIcon} alt='timer'/>
-                <h3>Трекер времени</h3>
-              </div>
-              <div className='item__info'>
-                <p>Сколько времени занимает<br/> выполнение задач</p>
-                <div className='item__infoLink'>
-                  <img src={rightArrow} alt='arrow'/>
-                </div>
-              </div>
-            </Link>
-            <Link to={'/profile'} className='item'>
-              <div className='item__about'>
-                <img src={paymentIcon} alt='payment'/>
-                <h3>Выплаты</h3>
-              </div>
-              <div className='item__info'>
-                <p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
-                <div className='item__infoLink'>
-                  <img src={rightArrow} alt='arrow'/>
-                </div>
-              </div>
-            </Link>
-            <Link to={'/profile'} className='item'>
-              <div className='item__about'>
-                <img src={settingIcon} alt='settings'/>
-                <h3>Настройки аккаунта</h3>
-              </div>
-              <div className='item__info'>
-                <p>Перейдите чтобы начать<br/> редактирование</p>
-                <div className='item__infoLink'>
-                  <img src={rightArrow} alt='arrow'/>
-                </div>
-              </div>
-            </Link>
+            {
+              profileItemsInfo[user].map((item, index) => {
+                return <Link key={index} to={`/profile${item.path}`} className='item'>
+                          <div className='item__about'>
+                            <img src={item.img} alt='itemImg'/>
+                            <h3>{item.title}</h3>
+                          </div>
+                          <div className='item__info'>
+                            <p dangerouslySetInnerHTML={{__html: item.description}}></p>
+                            <div className='item__infoLink'>
+                              <img src={rightArrow} alt='arrow'/>
+                            </div>
+                          </div>
+                        </Link>
+              })
+            }
          </div>
        </div>
        <Footer/>
--- a/src/pages/Profile/profile.scss
+++ b/src/pages/Profile/profile.scss
@ -10,6 +10,10 @@
    line-height: 32px;
    color: #000000;
    span {
+      display: flex;
+      p {
+        color: black;
+      }
      color: #52B709;
    }

@ -17,6 +21,10 @@
      font-size: 17px;
      margin-top: 20px;
    }
+
+    @media (max-width: 500px) {
+      font-size: 15px;
+    }
  }

  &__info {
@ -63,6 +71,7 @@

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

      &__about {
@ -71,6 +80,10 @@
        align-items: center;
        margin-bottom: 30px;

+        @media (max-width: 925px) {
+          margin-bottom: 15px;
+        }
+
        h3 {
          color: #000000;
          font-weight: 500;
--- a/src/pages/Summary/Summary.js
+++ b/src/pages/Summary/Summary.js
@ -31,7 +31,7 @@ export const Summary = () => {
              <img src={arrow} alt='arrow'/>
              <p>Вернуться</p>
            </div>}
-            <div className='summary__info'>
+            <div className={openGit ? 'summary__info openGit' : 'summary__info'}>
              <div className='summary__person'>
                <img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
                <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
@ -57,7 +57,15 @@ export const Summary = () => {
          </div>
          }
          {profileInfo.vc_text && !openGit &&
-          <div className='summary__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}>
+          <div className='summary__experience'>
+            <div className='experience__block'>
+              <div className="summary__sections__head">
+                  <h3>Описание опыта работы</h3>
+                  <button>Редактировать раздел</button>
+              </div>
+              <div className="experience__content" dangerouslySetInnerHTML={{__html:profileInfo.vc_text}}>
+              </div>
+            </div>
          </div>
          }
          {openGit &&
--- a/src/pages/Summary/summary.scss
+++ b/src/pages/Summary/summary.scss
@ -55,7 +55,7 @@
    justify-content: space-between;

    @media (max-width: 930px) {
-      padding: 0 40px;
+      padding: 0 25px;
    }

    @media (max-width: 690px) {
@ -73,7 +73,7 @@
    align-items: center;
    column-gap: 45px;

-    @media (max-width: 690px) {
+    @media (max-width: 825px) {
      column-gap: 20px;
    }

@ -95,6 +95,16 @@
    }
  }

+  .openGit {
+    .summary__name {
+      max-width: none;
+
+      @media (max-width: 490px) {
+        max-width: 280px;
+      }
+    }
+  }
+
  &__name {
    font-weight: 500;
    font-size: 16px;
@ -102,12 +112,12 @@
    position: relative;
    white-space: nowrap;

-    @media (max-width: 915px) {
-      max-width: 220px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+    //@media (max-width: 915px) {
+    //  max-width: 220px;
+    //  overflow: hidden;
+    //  white-space: nowrap;
+    //  text-overflow: ellipsis;
+    //}

    @media (max-width: 690px) {
      font-size: 14px;
@ -115,8 +125,8 @@
      line-height: 15px;
    }

-    @media (max-width: 640px) {
-      max-width: 180px;
+    @media (max-width: 550px) {
+      max-width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
@ -124,7 +134,7 @@
    }

    @media (max-width: 450px) {
-      max-width: 120px;
+      max-width: 150px;
    }

    &:after {
@ -268,6 +278,11 @@
          line-height: 32px;
          margin-bottom: 0;
        }
+
+        a:hover {
+          text-decoration: none;
+          color: #007bff;
+        }
      }
    }
  }
--- a/src/pages/ViewReport/ViewReport.js
+++ b/src/pages/ViewReport/ViewReport.js
@ -112,15 +112,15 @@ export const ViewReport = () => {
                                </tr>
                                </thead>
                                <tbody>
-                                {taskText.length && taskText.map((task) => {
+                                {taskText.length && taskText.map((task, index) => {
                                    return <tr key={task.id}>
                                                <td>
-                                                    <p>{task.task}</p>
+                                                    <p>{index + 1}. {task.task}</p>
                                                </td>
                                                <td>
                                                    <div className='viewReport__done__hours__item'>
                                                        <span>{task.hours}</span>
-                                                        <p>часа на задачу</p>
+                                                        <p className='hours'>часов на задачу</p>
                                                    </div>
                                                </td>
                                            </tr>
--- a/src/pages/ViewReport/viewReport.scss
+++ b/src/pages/ViewReport/viewReport.scss
@ -270,15 +270,11 @@

      p {
        font-weight: 400;
-        font-size: 12px;
-        line-height: 24px;
+        font-size: 15px;
+        line-height: 20px;
+        max-width: 755px;
        color: #000000;

-        @media (max-width: 750px) {
-          font-size: 10px;
-          line-height: 18px;
-        }
-
        @media (max-width: 465px) {
          text-align: center;
          line-height: 14px;
@ -330,6 +326,15 @@
        align-items: center;
        min-width: 155px;

+        .hours {
+          font-size: 15px;
+
+          @media (max-width: 1170px) {
+            font-size: 13px;
+            text-align: center;
+          }
+        }
+
        @media (max-width: 900px) {
          column-gap: 0;
          justify-content: space-between;
@ -337,14 +342,14 @@
          width: 100%;
        }

-        @media (max-width: 575px) {
+        @media (max-width: 775px) {
          flex-direction: column;
          justify-content: center;
          row-gap: 10px;
        }

        span {
-          width: 48px;
+          max-width: 48px;
          height: 48px;
          background: #8DC63F;
          border-radius: 50px;
@ -355,11 +360,12 @@
          font-size: 22px;
          line-height: 32px;
          color: #000000;
+          width: 100%;

          @media (max-width: 900px) {
-            width: 25px;
-            height: 25px;
-            font-size: 18px;
+            max-width: 28px;
+            height: 28px;
+            font-size: 15px;
          }
        }

@ -404,8 +410,8 @@

    p {
      font-weight: 400;
-      font-size: 12px;
-      line-height: 24px;
+      font-size: 15px;
+      line-height: 20px;

      @media (max-width: 650px) {
        font-size: 10px;