From 6315a4e7bb186c2b6145157f603596c452a656e7 Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Fri, 13 Jan 2023 15:53:07 +0300
Subject: [PATCH 1/4] new design calendar and report

---
 src/App.js                                    |   4 +-
 .../Calendar/calendarComponent.scss           |   2 +-
 src/components/Profile/profile.scss           |   6 +
 src/components/Profile/profileHeader.scss     |   5 +
 src/components/Profile/summary.scss           |  12 +
 .../ProfileCalendar/ProfileCalendar.js        |  52 ++--
 .../ProfileCalendarComponent.js               |   2 +-
 .../ProfileCalendar/profileCalendar.scss      |  25 +-
 src/components/ReportForm/ReportForm.js       | 228 +++++++++---------
 src/components/ReportForm/reportForm.scss     |  23 +-
 src/pages/Profile.js                          |   2 +-
 src/pages/ProfileCalendarPage.js              |   2 +-
 src/pages/ReportFormPage.js                   |   2 +-
 13 files changed, 214 insertions(+), 151 deletions(-)

diff --git a/src/App.js b/src/App.js
index bc7cda84..be610653 100644
--- a/src/App.js
+++ b/src/App.js
@@ -46,9 +46,9 @@ const App = () => {
             path='/candidate/:id/form'
             component={FormPage}
           />
-          <ProtectedRoute exact path='/report' component={ReportPage} />
+          <ProtectedRoute exact path='/profile/report' component={ReportPage} />
           <ProtectedRoute path='/report/:id' component={SingleReportPage} />
-          <ProtectedRoute path='/ProfileCalendar' component={ProfileCalendarPage} />
+          <ProtectedRoute path='/profile/profilecalendar' component={ProfileCalendarPage} />
           <ProtectedRoute path='/quiz' component={QuizPage} />
           <ProtectedRoute
             path='/quiz-interjacent'
diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss
index f6e12385..6725b60c 100644
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@@ -1,6 +1,6 @@
 .calendar-component {
   position: relative;
-  margin-top: 80px;
+  margin-top: 30px;
   margin-bottom: 60px;
   background-color: #f9f9f9;
   padding-left: 68px;
diff --git a/src/components/Profile/profile.scss b/src/components/Profile/profile.scss
index ac24bb2b..9531472c 100644
--- a/src/components/Profile/profile.scss
+++ b/src/components/Profile/profile.scss
@@ -49,6 +49,12 @@
       border-radius: 12px;
       text-decoration: none;
       cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+        transform: scale(1.02);
+      }
 
       @media (max-width: 1175px) {
         width: 48%;
diff --git a/src/components/Profile/profileHeader.scss b/src/components/Profile/profileHeader.scss
index 224a570f..7aba6bd1 100644
--- a/src/components/Profile/profileHeader.scss
+++ b/src/components/Profile/profileHeader.scss
@@ -57,6 +57,11 @@
       font-size: 18px;
       line-height: 32px;
       color: #807777 !important;
+      transition: all 0.3s ease;
+
+      &:hover {
+        color: #261a1a !important;
+      }
     }
 
     @media (max-width: 800px) {
diff --git a/src/components/Profile/summary.scss b/src/components/Profile/summary.scss
index cfc62642..ff044020 100644
--- a/src/components/Profile/summary.scss
+++ b/src/components/Profile/summary.scss
@@ -121,6 +121,12 @@
     line-height: 32px;
     color: white;
     border: none;
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+      transform: scale(1.02);
+    }
 
     @media (max-width: 690px) {
       width: 120px;
@@ -257,6 +263,12 @@
         background: #FFFFFF;
         border-radius: 12px;
         padding: 35px 30px 30px 45px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+          transform: scale(1.02);
+        }
 
         @media (max-width: 825px) {
           width: 100%;
diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js
index ae5899b3..5213bb4a 100644
--- a/src/components/ProfileCalendar/ProfileCalendar.js
+++ b/src/components/ProfileCalendar/ProfileCalendar.js
@@ -9,6 +9,7 @@ import moment from "moment";
 import rectangle from '../../images/rectangle_secondPage.png'
 import {currentMonth, getReports} from '../Calendar/calendarHelper'
 import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
+import { ProfileHeader } from "../Profile/ProfileHeader";
 import { Footer } from '../Footer/Footer'
 
 import './profileCalendar.scss'
@@ -48,42 +49,29 @@ export const ProfileCalendar = () => {
     }, [month])
 
     return (
-        <section className='calendar'>
-            <div className='profile__calendar'>
-                <Link className='calendar__back' to={`/profile`}>
-                    <div><img src={arrow} alt=''/>Вернуться назад</div>
-                </Link>
-                <h2 className='calendar__profile'>
-                    Добрый день, <span>{profileInfo.fio}</span>
-                </h2>
-                <div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
-                    <div className='calendar__info'>
-                        <img className='calendar__info-img' src={profileInfo.photo} alt='img' />
-                        <h3 className='calendar__info-name'>{}</h3>
-                    </div>
-                    <div className='calendar__title'>
-                        <h3 className='calendar__title-text'>{profileInfo.position_name}</h3>
-                        <img className='calendar__title-img' src={rectangle} alt='img' />
-                    </div>
-                    <div>
-                        <Link to='/report'>
-                            <button className='calendar__btn' onClick={() => {
-                                dispatch(setReportDate(value))
-                            }}>Заполнить отчет за день</button>
-                        </Link>
+        <div className='calendar'>
+            <ProfileHeader/>
+            <div className='container'>
+                <h2 className='summary__title'>Ваши отчеты</h2>
+                <div className='summary__info'>
+                    <div className='summary__person'>
+                        <img src={profileInfo.photo} className='summary__avatar'  alt='avatar'/>
+                        <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
                     </div>
+                    <Link to='/profile/report'>
+                        <button className="calendar__btn">Заполнить отчет за день</button>
+                    </Link>
                 </div>
-            </div>
-
-            <div className='row'>
-                <div className='col-12 col-xl-12'>
-                    <ProfileCalendarComponent reportsDates={reports} />
-                    <p className='calendar__hours'>
-                        {month} : <span> {totalHours} часов </span>
-                    </p>
+                <div className='row'>
+                    <div className='col-12 col-xl-12'>
+                        <ProfileCalendarComponent reportsDates={reports} />
+                        <p className='calendar__hours'>
+                            {month} : <span> {totalHours} часов </span>
+                        </p>
+                    </div>
                 </div>
             </div>
             <Footer />
-        </section>
+        </div>
     )
 };
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.js b/src/components/ProfileCalendar/ProfileCalendarComponent.js
index b34fb4de..b14d648a 100644
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.js
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.js
@@ -85,7 +85,7 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
                 <div className='calendar-component__form'>
                     {calendar.map((week) =>
                         week.map((day) => (
-                            <Link to='/report'>
+                            <Link to='/profile/report' key={day}>
                                 <button
                                     onClick={() => {
                                         dispatch(setReportDate(day))
diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss
index fc707fe6..d803d987 100644
--- a/src/components/ProfileCalendar/profileCalendar.scss
+++ b/src/components/ProfileCalendar/profileCalendar.scss
@@ -1,5 +1,21 @@
 .calendar {
-  font-family: 'LabGrotesque', sans-serif;
+  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;
+    }
+  }
+
+  .summary__info {
+    padding-right: 25px;
+  }
   .profile__calendar {
     margin-top: 20px;
   }
@@ -17,4 +33,11 @@
   &__profile {
     margin-top: 42px;
   }
+
+  &__btn {
+    transition: all 0.3s ease;
+    &:hover {
+      transform: scale(1.02);
+    }
+  }
 }
diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js
index 9e34e998..b4864e00 100644
--- a/src/components/ReportForm/ReportForm.js
+++ b/src/components/ReportForm/ReportForm.js
@@ -11,6 +11,8 @@ import ellipse from '../../images/ellipse.png'
 import remove from '../../images/remove.png'
 import addIcon from '../../images/addIcon.png'
 import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
+import {ProfileHeader} from "../Profile/ProfileHeader";
+import {Footer} from "../Footer/Footer";
 import './reportForm.scss'
 import arrow from "../../images/right-arrow.png";
 
@@ -53,14 +55,21 @@ const ReportForm = () => {
 
   return (
       <section className='report-form'>
-        <div className='row'>
-          <div className='col-xl-12 report__head'>
-            <Link className='calendar__back' to={`/ProfileCalendar`}>
-              <div><img src={arrow} alt=''/>Вернуться назад</div>
-            </Link>
+        <ProfileHeader/>
+        <div className='container'>
+          <h2 className='summary__title'>Ваши отчеты - <span>добавить отчет</span></h2>
+          <div>
+            <div className='report__head'>
+              <Link className='calendar__back' to={`/profile/profilecalendar`}>
+                <div><img src={arrow} alt=''/>Вернуться</div>
+              </Link>
+            </div>
+          </div>
+
+          <div className='report-form__content'>
             <div className='report-form__block'>
               <div className='report-form__block-title'>
-                <h2>Добавить отчет</h2>
+                <h2>Добавление отчета за день</h2>
                 <h3>Дата заполнения отчета:</h3>
               </div>
               <div className='report-form__block-img'>
@@ -77,117 +86,118 @@ const ReportForm = () => {
                 <span>Какие задачи были выполнены?</span>
               </div>
             </div>
-          </div>
-        </div>
 
-        <div className='row'>
-          <div className='col-8'>
-            <div className='report-form__task-header'>
-              <p className='report-form__task-title--description'>
-                Краткое описание задачи
-              </p>
-              <p className='report-form__task-title--hours'>Количество часов</p>
-            </div>
+            <div className='row'>
+              <div className='col-8'>
+                <div className='report-form__task-header'>
+                  <p className='report-form__task-title--description'>
+                    Краткое описание задачи
+                  </p>
+                  <p className='report-form__task-title--hours'>Количество часов</p>
+                </div>
 
-            {inputs.map((input, index) => {
-              return (
-                  <form id={'input'} key={`input__${index}`} className='report-form__task-form'>
-                    <div className='report-form__task-number'>
-                      {index + 1}.
-                    </div>
-                    <div className='report-form__task-input report-form__task-input--description'>
-                      <input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => {
-                        return index === inputIndex
-                            ? {
-                              ...input,
-                              task: e.target.value
-                            }
-                            : input
-                      }))}/>
-                    </div>
-                    <div className='report-form__task-input report-form__task-input--hours'>
-                      <input name='number' type='number' min='1'
-                             onChange={e => setInputs(inputs.map((input, inputIndex) => {
-                               return index === inputIndex
-                                   ? {
-                                     ...input,
-                                     hours_spent: Number(e.target.value)
-                                   }
-                                   : input
-                             }))}/>
-                    </div>
-                    <div className='report-form__task-remove'>
-                      <img onClick={() => deleteInput(index)} src={remove} alt=''/>
-                    </div>
-                  </form>
-              )
-            })}
+                {inputs.map((input, index) => {
+                  return (
+                      <form id={'input'} key={`input__${index}`} className='report-form__task-form'>
+                        <div className='report-form__task-number'>
+                          {index + 1}.
+                        </div>
+                        <div className='report-form__task-input report-form__task-input--description'>
+                          <input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => {
+                            return index === inputIndex
+                                ? {
+                                  ...input,
+                                  task: e.target.value
+                                }
+                                : input
+                          }))}/>
+                        </div>
+                        <div className='report-form__task-input report-form__task-input--hours'>
+                          <input name='number' type='number' min='1'
+                                 onChange={e => setInputs(inputs.map((input, inputIndex) => {
+                                   return index === inputIndex
+                                       ? {
+                                         ...input,
+                                         hours_spent: Number(e.target.value)
+                                       }
+                                       : input
+                                 }))}/>
+                        </div>
+                        <div className='report-form__task-remove'>
+                          <img onClick={() => deleteInput(index)} src={remove} alt=''/>
+                        </div>
+                      </form>
+                  )
+                })}
 
-            <div className='report-form__form-add'>
-              <img onClick={addInput} src={addIcon} alt=''/>
-              <span>Добавить еще </span>
-            </div>
-          </div>
-          <div className='col-4'></div>
-        </div>
-
-        <div className='row'>
-          <div className='col-12'>
-            <div className='report-form__input-box'>
-              <div className='report-form__troubles'>
-                <img src={ellipse} alt=''/>
-                <span>Какие сложности возникли?</span>
+                <div className='report-form__form-add'>
+                  <img onClick={addInput} src={addIcon} alt=''/>
+                  <span>Добавить еще </span>
+                </div>
               </div>
-              <input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)}/>
-              <div className='report-form__scheduled'>
-                <img src={ellipse} alt=''/>
-                <span>Что планируется сделать завтра?</span>
+              <div className='col-4'></div>
+            </div>
+
+            <div className='row'>
+              <div className='col-12'>
+                <div className='report-form__input-box'>
+                  <div className='report-form__troubles'>
+                    <img src={ellipse} alt=''/>
+                    <span>Какие сложности возникли?</span>
+                  </div>
+                  <input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)}/>
+                  <div className='report-form__scheduled'>
+                    <img src={ellipse} alt=''/>
+                    <span>Что планируется сделать завтра?</span>
+                  </div>
+                  <input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)}/>
+                </div>
+              </div>
+            </div>
+            <div className='row'>
+              <div className='col-12'>
+                <div className='report-form__footer'>
+                  <button className='report-form__footer-btn' onClick={() => {
+                    fetchPost({
+                      link: `${process.env.REACT_APP_API_URL}/api/reports/create`,
+                      history,
+                      role,
+                      body: {
+                        tasks: inputs,
+                        difficulties: troublesInputValue,
+                        tomorrow: scheduledInputValue,
+                        created_at: getCreatedDate(reportDate),
+                        status: 1,
+                      },
+                      logout: () => dispatch(auth(false))
+                    }).then((res) =>
+                        res.json().then((resJSON) => {
+                          if (res.status === 200) {
+                            setReportSuccess(true);
+                            setTimeout(() => setReportSuccess(false), 2000)
+                          }
+                          setInputs(() => []);
+                          setTroublesInputValue('');
+                          setScheduledInputValue('');
+                          setIsFetching(false);
+                          setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
+                        })
+                    )
+                  }}>
+                    {isFetching ? <Loader/> : 'Отправить'}
+                  </button>
+                  <p className='report-form__footer-text'>
+                    Всего за день : <span>{totalHours} часов</span>
+                  </p>
+                  {reportSuccess &&
+                  <p className='report-form__footer-done'>Отчет отправлен</p>
+                  }
+                </div>
               </div>
-              <input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)}/>
-            </div>
-          </div>
-        </div>
-        <div className='row'>
-          <div className='col-12'>
-            <div className='report-form__footer'>
-              <button className='report-form__footer-btn' onClick={() => {
-                fetchPost({
-                  link: `${process.env.REACT_APP_API_URL}/api/reports/create`,
-                  history,
-                  role,
-                  body: {
-                    tasks: inputs,
-                    difficulties: troublesInputValue,
-                    tomorrow: scheduledInputValue,
-                    created_at: getCreatedDate(reportDate),
-                    status: 1,
-                  },
-                  logout: () => dispatch(auth(false))
-                }).then((res) =>
-                    res.json().then((resJSON) => {
-                      if (res.status === 200) {
-                        setReportSuccess(true);
-                        setTimeout(() => setReportSuccess(false), 2000)
-                      }
-                      setInputs(() => []);
-                      setTroublesInputValue('');
-                      setScheduledInputValue('');
-                      setIsFetching(false);
-                      setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
-                    })
-                )
-              }}>
-                {isFetching ? <Loader/> : 'Отправить'}
-              </button>
-              <p className='report-form__footer-text'>
-                Всего за день : <span>{totalHours} часов</span>
-              </p>
-              {reportSuccess &&
-              <p className='report-form__footer-done'>Отчет отправлен</p>
-              }
             </div>
           </div>
         </div>
+        <Footer/>
       </section>
   )
 };
diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss
index eb3449d4..e86c8644 100644
--- a/src/components/ReportForm/reportForm.scss
+++ b/src/components/ReportForm/reportForm.scss
@@ -1,14 +1,33 @@
 .report-form {
+  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;
+    }
+  }
+
+  &__content {
+    background: #FFFFFF;
+    border-radius: 12px;
+    margin: 25px 0 80px;
+    padding: 50px 40px;
+  }
 
   .report__head {
     margin-top: 20px;
   }
 
   &__block-title {
-    margin-top: 15px;
 
     h2 {
-      color: #282828;
+      color: #52B709;
       font-family: 'GT Eesti Pro Display';
       font-size: 3.3em;
       font-weight: 700;
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index 51c98a94..49e9acf3 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -28,7 +28,7 @@ export const Profile = () => {
                     </div>
                 </div>
                 <div className='profile__items'>
-                    <Link to={'/ProfileCalendar'} className='item'>
+                    <Link to={'/profile/profilecalendar'} className='item'>
                         <div className='item__about'>
                             <img src={reportsIcon}  alt='report'/>
                             <h3>Ваша отчетность</h3>
diff --git a/src/pages/ProfileCalendarPage.js b/src/pages/ProfileCalendarPage.js
index b1095be0..c0c298b6 100644
--- a/src/pages/ProfileCalendarPage.js
+++ b/src/pages/ProfileCalendarPage.js
@@ -3,7 +3,7 @@ import { WithLogout } from '../hoc/withLogout';
 import { ProfileCalendar } from '../../src/components/ProfileCalendar/ProfileCalendar';
 
 const ProfileCalendarPage = () => {
-    return <WithLogout><ProfileCalendar/></WithLogout>;
+    return <ProfileCalendar/>;
 };
 
 export default ProfileCalendarPage;
diff --git a/src/pages/ReportFormPage.js b/src/pages/ReportFormPage.js
index a4196e79..d8893f76 100644
--- a/src/pages/ReportFormPage.js
+++ b/src/pages/ReportFormPage.js
@@ -2,6 +2,6 @@ import React from 'react';
 import { WithLogout } from '../hoc/withLogout';
 import ReportForm from '../components/ReportForm/ReportForm';
 
-const ReportFormPage = () => <WithLogout><ReportForm /></WithLogout>;
+const ReportFormPage = () => <ReportForm />;
 
 export default ReportFormPage;

From d8720a9eb2c7d9fcc898b4eb0d4b5ef73f7eaccd Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Mon, 16 Jan 2023 16:28:56 +0300
Subject: [PATCH 2/4] calendar and styles fixes

---
 src/components/Calendar/calendar.scss         |  7 +++-
 .../Calendar/calendarComponent.scss           |  9 +++++
 .../ProfileCalendar/ProfileCalendar.js        |  2 +-
 .../ProfileCalendarComponent.js               | 34 ++++++++++++-------
 .../ProfileCalendar/profileCalendar.scss      |  2 +-
 src/components/ReportForm/ReportForm.js       |  2 +-
 src/components/ReportForm/reportForm.scss     | 18 ++++++++++
 7 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/src/components/Calendar/calendar.scss b/src/components/Calendar/calendar.scss
index 8f72b7b6..0b32bbfd 100644
--- a/src/components/Calendar/calendar.scss
+++ b/src/components/Calendar/calendar.scss
@@ -64,7 +64,6 @@
   &__btn {
     width: 280px;
     height: 62px;
-    box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
     border-radius: 31px;
     background-color: #ffffff;
     background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
@@ -81,6 +80,12 @@
     font-size: 1.6em;
     letter-spacing: normal;
     text-align: center;
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+      transform: scale(1.02);
+    }
   }
 
   &__hours {
diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss
index 6725b60c..ddb7184c 100644
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@@ -92,6 +92,11 @@
       letter-spacing: normal;
       line-height: normal;
       text-align: center;
+
+      a {
+        text-decoration: none;
+        color: #000000;
+      }
     }
   }
 }
@@ -263,3 +268,7 @@
 .selected {
   background-color: #f9f9c3 !important;
 }
+
+.block {
+  pointer-events: none;
+}
diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js
index 5213bb4a..a2638a64 100644
--- a/src/components/ProfileCalendar/ProfileCalendar.js
+++ b/src/components/ProfileCalendar/ProfileCalendar.js
@@ -49,7 +49,7 @@ export const ProfileCalendar = () => {
     }, [month])
 
     return (
-        <div className='calendar'>
+        <div className='profile__calendar'>
             <ProfileHeader/>
             <div className='container'>
                 <h2 className='summary__title'>Ваши отчеты</h2>
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.js b/src/components/ProfileCalendar/ProfileCalendarComponent.js
index b14d648a..d42e5260 100644
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.js
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.js
@@ -28,23 +28,33 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
         return day.isSame(new Date(), 'day')
     }
 
+    function correctDay(day) {
+        if (day < 10) {
+            return `0${day}`
+        } return day
+    }
+
     function dayStyles(day) {
-        if (value < day) return ``
-        if (day.day() === 6 || day.day() === 0) return `selected`
-        function correctDay(day) {
-            if (day < 10) {
-                return `0${day}`
-            } return day
-        }
+        if (value < day) return `block`
         for (const date of reportsDates) {
-            if (`${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${correctDay(new Date(day).getDate())}` === date.date) {
+            if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.date) {
                 return `before`
             }
         }
+        if (day.day() === 6 || day.day() === 0) return `selected`
         if (isToday(day)) return `today`
         return 'pass'
     }
 
+    function correctRoute(day) {
+        for (const date of reportsDates) {
+            if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.date) {
+                return `/view/report`
+            }
+        }
+        return '/profile/report'
+    }
+
     // function prevMonth() {
     //     return value.clone().subtract(1, 'month')
     // }
@@ -85,7 +95,6 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
                 <div className='calendar-component__form'>
                     {calendar.map((week) =>
                         week.map((day) => (
-                            <Link to='/profile/report' key={day}>
                                 <button
                                     onClick={() => {
                                         dispatch(setReportDate(day))
@@ -95,10 +104,11 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
                                     name={day.format('dddd')}
                                     id='btn'
                                 >
-                                    <img className={'calendar__icon'} src={calendarIcon} alt='' />
-                                    {currentMonthAndDay(day)}
+                                    <Link to={() => correctRoute(day)}>
+                                        <img className={'calendar__icon'} src={calendarIcon} alt='' />
+                                        {currentMonthAndDay(day)}
+                                    </Link>
                                 </button>
-                            </Link>
                         ))
                     )}
                 </div>
diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss
index d803d987..45d98c4e 100644
--- a/src/components/ProfileCalendar/profileCalendar.scss
+++ b/src/components/ProfileCalendar/profileCalendar.scss
@@ -1,4 +1,4 @@
-.calendar {
+.profile__calendar {
   background: #F1F1F1;
   height: 100%;
   min-height: 100vh;
diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js
index b4864e00..ff156140 100644
--- a/src/components/ReportForm/ReportForm.js
+++ b/src/components/ReportForm/ReportForm.js
@@ -61,7 +61,7 @@ const ReportForm = () => {
           <div>
             <div className='report__head'>
               <Link className='calendar__back' to={`/profile/profilecalendar`}>
-                <div><img src={arrow} alt=''/>Вернуться</div>
+                <img src={arrow} alt=''/><p>Вернуться</p>
               </Link>
             </div>
           </div>
diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss
index e86c8644..71d62d02 100644
--- a/src/components/ReportForm/reportForm.scss
+++ b/src/components/ReportForm/reportForm.scss
@@ -22,6 +22,24 @@
 
   .report__head {
     margin-top: 20px;
+
+    a {
+      display: flex;
+      align-items: center;
+      grid-column-gap: 30px;
+      column-gap: 30px;
+      margin-top: 20px;
+      cursor: pointer;
+      text-decoration: none;
+
+      p {
+        margin-bottom: 0;
+        font-size: 14px;
+        line-height: 32px;
+        font-weight: 500;
+        color: black;
+      }
+    }
   }
 
   &__block-title {

From 50aae595e35c41c7d5deb6f3825d376313b25e7b Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Mon, 16 Jan 2023 16:39:33 +0300
Subject: [PATCH 3/4] calendar and styles fixes

---
 src/pages/Profile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index 49e9acf3..f837f41a 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -34,7 +34,7 @@ export const Profile = () => {
                             <h3>Ваша отчетность</h3>
                         </div>
                         <div className='item__info'>
-                            <p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
+                            <p><span></span>Отработанных в этом месяце</p>
                             <div className='item__infoLink'>
                                 <img src={rightArrow}  alt='arrow'/>
                             </div>

From 087a3a2eb80381415fb240400840f292ec8e2572 Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Mon, 16 Jan 2023 16:39:53 +0300
Subject: [PATCH 4/4] calendar and styles fixes

---
 src/pages/Profile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index f837f41a..67e45c34 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -34,7 +34,7 @@ export const Profile = () => {
                             <h3>Ваша отчетность</h3>
                         </div>
                         <div className='item__info'>
-                            <p><span></span>Отработанных в этом месяце</p>
+                            <p><span></span>Отработанных в этом месяце часов</p>
                             <div className='item__infoLink'>
                                 <img src={rightArrow}  alt='arrow'/>
                             </div>