fixes

src/components/ProfileCalendar/ProfileCalendar.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 
-import {currentMonth, getReports} from '../Calendar/calendarHelper'
+import {getReports} from '../Calendar/calendarHelper'
 import { Link } from 'react-router-dom'
 import moment from "moment";
 
@@ -24,7 +24,6 @@ export const ProfileCalendar = () => {
     const dispatch = useDispatch();
     const profileInfo = useSelector(getProfileInfo)
     const requestDates = useSelector(getRequestDates)
-    const [month, setMonth] = useState('');
     const [value, setValue] = useState(moment())
     const [reports, setReports] = useState([]);
     const [totalHours, setTotalHours] = useState(0);
@@ -59,10 +58,6 @@ export const ProfileCalendar = () => {
             })
     }, [requestDates]);
 
-    useEffect(() => {
-        setMonth(currentMonth)
-    }, [month]);
-
     return (
         <div className='profile__calendar'>
             <ProfileHeader/>
@@ -71,7 +66,7 @@ export const ProfileCalendar = () => {
                 <div className='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>
+                        <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
                     </div>
                     <Link to='/report'>
                         <button className="calendar__btn" onClick={() => {
@@ -84,10 +79,7 @@ export const ProfileCalendar = () => {
                     :
                     <div className='row'>
                         <div className='col-12 col-xl-12'>
-                            <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} />
-                            <p className='calendar__hours'>
-                                {month} : <span> {totalHours} часов </span>
-                            </p>
+                            <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} totalHours={totalHours} />
                         </div>
                     </div>
                 }

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -3,7 +3,7 @@ import ellipse from '../../images/ellipse.png'
 import rectangle from '../../images/rectangle__calendar.png'
 import calendarIcon from '../../images/calendar_icon.png'
 import moment from 'moment'
-import {calendarHelper, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
+import {calendarHelper, currentMonth, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
 import {setReportDate, setRequestDate} from '../../redux/reportSlice';
 import {useDispatch} from "react-redux";
 import {Link} from "react-router-dom";
@@ -11,18 +11,19 @@ import {Link} from "react-router-dom";
 import 'moment/locale/ru'
 import './../Calendar/calendarComponent.scss'
 
-export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports}) => {
+export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports, totalHours}) => {
     const dispatch = useDispatch();
     const [currentDay] = useState(moment())
     const [calendar, setCalendar] = useState([])
+    const [month, setMonth] = useState('');
 
     useEffect(() => {
         setCalendar(calendarHelper(value))
     }, [value])
 
-    // function beforeToday(day) {
-    //     return day.isBefore(new Date(), 'day')
-    // }
+    useEffect(() => {
+        setMonth(value.format('MMMM'))
+    }, [month]);
 
     function isToday(day) {
         return day.isSame(new Date(), 'day')
@@ -76,6 +77,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
                         {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={() => {
@@ -124,6 +128,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
                     )}
                 </div>
             </div>
+            <p className='calendar__hours'>
+                {month} : <span> {totalHours} часов </span>
+            </p>
         </div>
     )
 })

src/components/ProfileCalendar/profileCalendar.scss

@@ -15,6 +15,10 @@
 
   .summary__info {
     padding-right: 25px;
+
+    @media (max-width: 500px) {
+      padding-right: 5px;
+    }
   }
 
   .loader {