Переписываю спорные решения

Фикс отправки отчета, проверка на массив в map в Description.js

src/components/Calendar/Calendar.js

@@ -1,22 +1,27 @@
 import React, {useEffect, useState} from 'react'
 import {useSelector} from 'react-redux'
-import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
-import {Link} from 'react-router-dom'
+import {Link, useNavigate} from 'react-router-dom'
 
 import CalendarComponent from './CalendarComponent'
 import {currentMonth} from './calendarHelper'
 import {Footer} from '../Footer/Footer'
+import {LogoutButton} from "../LogoutButton/LogoutButton";
+
+import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
 
 import rectangle from '../../images/rectangle_secondPage.png'
 
 import './calendar.scss'
 
-const Calendar = ({onSelect}) => {
+
+const Calendar = () => {
 
   const candidateForCalendar = useSelector(selectCurrentCandidate);
 
   const [month, setMonth] = useState('');
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     setMonth(currentMonth)
   }, [month]);
@@ -26,38 +31,43 @@ const Calendar = ({onSelect}) => {
   const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));
 
   return (
-      <section className='calendar'>
-        <div className='row'>
-          <h2 className='calendar__profile'>
-            Добрый день, <span>Александр !</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={photo} alt='img'/>
-              <h3 className='calendar__info-name'>{abbreviatedName}</h3>
+      <div className='container'>
+        <section className='calendar'>
+          <div className='row'>
+            <div className='calendar__header'>
+            <h2 className='calendar__profile'>
+              Добрый день, <span>Александр !</span>
+            </h2>
+            <LogoutButton />
             </div>
-            <div className='calendar__title'>
-              <h3 className='calendar__title-text'>{skillsName} разработчик</h3>
-              <img className='calendar__title-img' src={rectangle} alt='img'/>
-            </div>
-            <div>
-              <Link to='/report'>
-                <button className='calendar__btn'>Заполнить отчет за день</button>
-              </Link>
+            <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={photo} alt='img'/>
+                <h3 className='calendar__info-name'>{abbreviatedName}</h3>
+              </div>
+              <div className='calendar__title'>
+                <h3 className='calendar__title-text'>{skillsName} разработчик</h3>
+                <img className='calendar__title-img' src={rectangle} alt='img'/>
+              </div>
+              <div>
+                <Link to='/report'>
+                  <button className='calendar__btn'>Заполнить отчет за день</button>
+                </Link>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className='row'>
-          <div className='col-12 col-xl-12'>
-            <CalendarComponent onSelect={onSelect}/>
-            <p className='calendar__hours'>
-              {month} : <span> 60 часов </span>
-            </p>
+          <div className='row'>
+            <div className='col-12 col-xl-12'>
+              <CalendarComponent onSelect={() => { navigate('/report/0') }}/>
+              <p className='calendar__hours'>
+                {month} : <span> 60 часов </span>
+              </p>
+            </div>
           </div>
-        </div>
-        <Footer/>
-      </section>
+          <Footer/>
+        </section>
+      </div>
   )
 };
 

src/components/Calendar/calendar.scss

@@ -2,6 +2,17 @@
   margin-bottom: 40px;
   font-family: 'LabGrotesque', sans-serif;
 
+  &__header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: 0 20px;
+    h2 {
+      flex: 1;
+    }
+  }
+
   &__profile {
     color: #282828;
     font-size: 3.4em;
@@ -45,8 +56,6 @@
       position: absolute;
       width: 132px;
       height: 132px;
-      left: -40px;
-      top: -10px;
     }
   }