Working in calendar

2023-05-11 19:54:15 +03:00 · 2023-05-11 19:54:15 +03:00 · fb0ce999f6
commit fb0ce999f6
parent e145e6084c
9 changed files with 673 additions and 397 deletions
--- a/src/App.js
+++ b/src/App.js
@ -88,8 +88,9 @@ const App = () => {
            <Route index element={<Profile />} />
            <Route exact path="catalog" element={<Home />} />
            <Route exact path="calendar" element={<ProfileCalendar />} />
+            <Route exact path="calendar/view/" element={<ProfileCalendar />} />
            <Route exact path="summary" element={<Summary />} />
-            <Route exact path="view" element={<ViewReport />} />
+            <Route exact path="view/:id" element={<ViewReport />} />
            <Route exact path="tracker" element={<Tracker />} />
            <Route exact path="payouts" element={<Payouts />} />
            <Route exact path="settings" element={<PartnerSettings />} />
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@ -7,7 +7,7 @@
  padding-right: 54px;
  padding-top: 48px;
  padding-bottom: 40px;
-  font-family: 'LabGrotesque', sans-serif;
+  font-family: "LabGrotesque", sans-serif;

  &__header {
    display: flex;
@ -56,7 +56,6 @@
    }

    h3 {
-
      font-size: 2.5em;
      font-weight: 400;
      font-style: normal;
@ -142,8 +141,8 @@

    button {
      margin: 0 auto;
-      //width: 125px;
-      //height: 42px;
+      width: 125px;
+      height: 42px;
      padding: 0 5px;
      box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
      border-radius: 5px;
@ -157,19 +156,18 @@
      line-height: normal;
      text-align: center;

-      a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 115px;
-        height: 42px;
-        text-decoration: none;
-        color: #000000;
-
      img {
        width: 16px;
        height: 16px;
        margin: 0 10px 0 0;
+
+        @media (max-width: 968px) {
+          margin-right: 2px;
+
+          @media (max-width: 610px) {
+            display: none;
+          }
+        }
      }

      @media (max-width: 1200px) {
@ -182,15 +180,7 @@
        height: 40px;
        font-size: 10px;

-          img {
-            margin-right: 2px;
-          }
-        }
-
        @media (max-width: 610px) {
-          img {
-            display: none;
-          }
          width: auto;
          height: auto;
        }
--- a/src/components/ProfileCalendar/ProfileCalendar.js
+++ b/src/components/ProfileCalendar/ProfileCalendar.js
@ -1,99 +1,127 @@
-import React, { useEffect, useState } from 'react'
-import {useDispatch, useSelector} from 'react-redux'
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";

-import {getReports} from '../Calendar/calendarHelper'
-import {Link, Navigate} from 'react-router-dom'
+import { getReports } from "../Calendar/calendarHelper";
+import { Link, Navigate } from "react-router-dom";
 import moment from "moment";

-import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
-import {Loader} from "../Loader/Loader";
-import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
-import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
-import { Footer } from '../Footer/Footer'
+import { ProfileCalendarComponent } from "./ProfileCalendarComponent";
+import { Loader } from "../Loader/Loader";
+import { ProfileHeader } from "../ProfileHeader/ProfileHeader";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { Footer } from "../Footer/Footer";
+import { Navigation } from "../Navigation/Navigation";
+import { ViewReport } from "../../pages/ViewReport/ViewReport";

-import {urlForLocal} from "../../helper";
+import { urlForLocal } from "../../helper";

-import {apiRequest} from "../../api/request";
-import { getProfileInfo } from '../../redux/outstaffingSlice'
-import {getRequestDates, setReportDate, setRequestDate} from "../../redux/reportSlice";
-
-import 'moment/locale/ru'
-import './profileCalendar.scss'
-import { Navigation } from '../Navigation/Navigation';
+import { apiRequest } from "../../api/request";
+import { getProfileInfo } from "../../redux/outstaffingSlice";
+import {
+  getRequestDates,
+  setReportDate,
+  setRequestDate,
+} from "../../redux/reportSlice";

+import "moment/locale/ru";
+import "./profileCalendar.scss";

 export const ProfileCalendar = () => {
-    if(localStorage.getItem('role_status') === '18') {
-        return <Navigate to="/profile" replace/>
+  if (localStorage.getItem("role_status") === "18") {
+    return <Navigate to="/profile" replace />;
  }
  const dispatch = useDispatch();
-    const profileInfo = useSelector(getProfileInfo)
-    const requestDates = useSelector(getRequestDates)
-    const [value, setValue] = useState(moment())
+  const profileInfo = useSelector(getProfileInfo);
+  const requestDates = useSelector(getRequestDates);
+  const [value, setValue] = useState(moment());
  const [reports, setReports] = useState([]);
  const [totalHours, setTotalHours] = useState(0);
-    const [loader, setLoader] = useState(true)
+  const [loader, setLoader] = useState(true);

-    function setValueHandler (value) {
-        setValue(value)
+  function setValueHandler(value) {
+    setValue(value);
  }

  useEffect(() => {
-        dispatch(setRequestDate(getReports(moment())))
-    },[]);
+    dispatch(setRequestDate(getReports(moment())));
+  }, []);

-    useEffect( () => {
-        setLoader(true)
+  useEffect(() => {
+    setLoader(true);
    if (!requestDates) {
-            return
+      return;
    }
-        apiRequest(`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem('cardId')}`)
-            .then((reports) => {
+    apiRequest(
+      `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
+        "cardId"
+      )}`
+    ).then((reports) => {
      let spendTime = 0;
      for (const report of reports) {
        report.task.map((task) => {
-                        if(task.hours_spent) {
-                            spendTime += Number(task.hours_spent)
+          if (task.hours_spent) {
+            spendTime += Number(task.hours_spent);
          }
-                    })
+        });
      }
      setTotalHours(spendTime);
-                setReports(reports)
-                setLoader(false)
-            })
+      setReports(reports);
+      setLoader(false);
+    });
  }, [requestDates]);

  return (
-        <div className='profile__calendar'>
-            <ProfileHeader/>
+    <div className="profile__calendar">
+      <ProfileHeader />
      <Navigation />
-            <div className='container'>
-                <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},{name: 'Ваша отчетность', link: '/profile/calendar'}]} />
-                <h2 className='summary__title'>Ваши отчеты</h2>
-                <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>
+      <div className="container">
+        <ProfileBreadcrumbs
+          links={[
+            { name: "Главная", link: "/profile" },
+            { name: "Ваша отчетность", link: "/profile/calendar" },
+          ]}
+        />
+        <h2 className="summary__title">Ваши отчеты</h2>
+        <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>
          </div>
-                    <Link to='/report'>
-                        <button className="calendar__btn" onClick={() => {
-                            dispatch(setReportDate(''))
-                        }}>Заполнить отчет за день</button>
+          <Link to="/report">
+            <button
+              className="calendar__btn"
+              onClick={() => {
+                dispatch(setReportDate(""));
+              }}
+            >
+              Заполнить отчет за день
+            </button>
          </Link>
        </div>
-                {loader ?
-                    <div className='loader__wrapper'>
+        {loader ? (
+          <div className="loader__wrapper">
            <Loader height={80} width={80} />
          </div>
-                    :
-                    <div className='row calendar__wrapper'>
-                        <div className='col-12 col-xl-12'>
-                            <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} totalHours={totalHours} />
+        ) : (
+          <div className="row calendar__wrapper">
+            <div className="col-12 col-xl-12">
+              <ProfileCalendarComponent
+                setValueHandler={setValueHandler}
+                value={value}
+                reports={reports}
+                totalHours={totalHours}
+              />
            </div>
          </div>
-                }
+        )}
      </div>
      <Footer />
    </div>
-    )
+  );
 };
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.js
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.js
@ -1,109 +1,135 @@
-import React, { useState, useEffect } from 'react'
-import arrow from '../../images/arrowCalendar.png'
-import rectangle from '../../images/rectangle__calendar.png'
-import calendarIcon from '../../images/calendar_icon.png'
-import moment from 'moment'
-import {calendarHelper, currentMonthAndDay, getReports, hourOfNum} from '../Calendar/calendarHelper'
-import {setReportDate, setRequestDate} from '../../redux/reportSlice';
-import {useDispatch} from "react-redux";
-import {Link} from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import arrow from "../../images/arrowCalendar.png";
+import rectangle from "../../images/rectangle__calendar.png";
+import calendarIcon from "../../images/calendar_icon.png";
+import moment from "moment";
+import {
+  calendarHelper,
+  currentMonthAndDay,
+  getReports,
+  hourOfNum,
+} from "../Calendar/calendarHelper";
+import {
+  setReportDate,
+  setRequestDate,
+  setSendRequest,
+} from "../../redux/reportSlice";
+import { useDispatch } from "react-redux";
+import { Link } from "react-router-dom";
+import ShortReport from "../ShortReport/ShortReport";

-import 'moment/locale/ru'
-import './../Calendar/calendarComponent.scss'
+import "moment/locale/ru";
+import "./../Calendar/calendarComponent.scss";

-export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports, totalHours}) => {
+export const ProfileCalendarComponent = React.memo(
+  ({ value, setValueHandler, reports, totalHours }) => {
    const dispatch = useDispatch();
-    const [currentDay] = useState(moment())
-    const [calendar, setCalendar] = useState([])
-    const [month, setMonth] = useState('');
+    const [currentDay] = useState(moment());
+    const [calendar, setCalendar] = useState([]);
+    const [month, setMonth] = useState("");
+    const [shortReport, setShortReport] = useState(false);
+    const [dayTest, setDayTest] = useState("");

    useEffect(() => {
-        setCalendar(calendarHelper(value))
-    }, [value])
+      setCalendar(calendarHelper(value));
+    }, [value]);

    useEffect(() => {
-        setMonth(value.format('MMMM'))
+      setMonth(value.format("MMMM"));
    }, [month]);

    function isToday(day) {
-        return day.isSame(new Date(), 'day')
+      return day.isSame(new Date(), "day");
    }

    function correctDay(day) {
      if (day < 10) {
-            return `0${day}`
-        } return day
+        return `0${day}`;
+      }
+      return day;
    }

    function dayStyles(day) {
-        if (currentDay < day) return `block`
+      if (currentDay < day) return `block`;
      for (const date of reports) {
-            if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
-                return `before`
+        if (
+          `${new Date(day).getFullYear()}-${correctDay(
+            new Date(day).getMonth() + 1
+          )}-${correctDay(new Date(day).getDate())}` === date.created_at
+        ) {
+          return `before`;
        }
      }
-        if (day.day() === 6 || day.day() === 0) return `selected`
-        if (isToday(day)) return `today`
-        return 'pass'
+      if (day.day() === 6 || day.day() === 0) return `selected`;
+      if (isToday(day)) return `today`;
+      return "pass";
    }

    function correctRoute(day) {
      for (const date of reports) {
-            if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
-                return `../view`
+        if (
+          `${new Date(day).getFullYear()}-${correctDay(
+            new Date(day).getMonth() + 1
+          )}-${correctDay(new Date(day).getDate())}` === date.created_at
+        ) {
+          return `../view/${day}`;
        }
      }
-        return '../../report'
+      return "../../report";
    }

    function prevMonth() {
-        return value.clone().subtract(1, 'month')
+      return value.clone().subtract(1, "month");
    }

    function nextMonth() {
-        return value.clone().add(1, 'month');
+      return value.clone().add(1, "month");
    }

    return (
-        <div className='calendar-component'>
-            <div className='calendar-component__header'>
-                <div className='calendar-component__header-info'>
+      <div className="calendar-component">
+        <div className="calendar-component__header">
+          <div className="calendar-component__header-info">
            <h3>Мои отчеты:</h3>
-                    <p className='calendar__hours'>
-                        {month}&nbsp;<span>{totalHours} {hourOfNum(totalHours)} </span>
+            <p className="calendar__hours">
+              {month}&nbsp;
+              <span>
+                {totalHours} {hourOfNum(totalHours)}{" "}
+              </span>
            </p>
          </div>
-                <div className='calendar-component__header-switcher'>
-                    <div className='calendar-component__header-box' onClick={() => {
-                        setValueHandler(prevMonth())
-                        dispatch(setRequestDate(getReports(prevMonth())))
-                    }}>
-                        <img src={arrow} alt='' />
-                        <span>
-                            {prevMonth().format('MMMM')}
-                        </span>
+          <div className="calendar-component__header-switcher">
+            <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 className="calendar-component__header-box">
+              <span>{value.format("YYYY")}</span>
            </div>
-                    <div className='calendar-component__header-box' onClick={() => {
-                        setValueHandler(nextMonth())
-                        dispatch(setRequestDate(getReports(nextMonth())))
-
-                    }}>
-                        <span>
-                            {nextMonth().format('MMMM')}
-                        </span>
-                        <img src={arrow} alt='' />
+            <div
+              className="calendar-component__header-box"
+              onClick={() => {
+                setValueHandler(nextMonth());
+                dispatch(setRequestDate(getReports(nextMonth())));
+              }}
+            >
+              <span>{nextMonth().format("MMMM")}</span>
+              <img src={arrow} alt="" />
            </div>
          </div>
        </div>

-            <div className='calendar-component__rectangle'>
-                <img src={rectangle} alt='' />
+        <div className="calendar-component__rectangle">
+          <img src={rectangle} alt="" />
        </div>

-            <div className='calendar-component__body'>
+        <div className="calendar-component__body">
          <div>
            <p>Пн</p>
            <p>Вт</p>
@ -114,28 +140,42 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
            <p>Вс</p>
          </div>

-                <div className='calendar-component__form'>
+          <div className="calendar-component__form">
            {calendar.map((week) =>
              week.map((day) => (
                <button
                  onClick={() => {
-                                        dispatch(setReportDate(day))
+                    dispatch(setReportDate(day));
+                    dispatch(setSendRequest(true));
+                    setShortReport(true);
+                    setDayTest(day);
                  }}
                  key={day}
                  className={dayStyles(day)}
-                                    name={day.format('dddd')}
-                                    id='btn'
+                  name={day.format("dddd")}
+                  id="btn"
                >
-                                    <Link to={correctRoute(day)}>
-                                        <img className={'calendar__icon'} src={calendarIcon} alt='' />
+                  {/* <Link to={correctRoute(day)}>
+                    <img
+                      className={"calendar__icon"}
+                      src={calendarIcon}
+                      alt=""
+                    />
+                    {currentMonthAndDay(day)}
+                  </Link> */}
+
+                  <img className={"calendar__icon"} src={calendarIcon} alt="" />
                  {currentMonthAndDay(day)}
-                                    </Link>
                </button>
              ))
            )}
          </div>
        </div>
+        <Link to={correctRoute(dayTest)}>
+          <button className="calendar__btn">Посмотреть подробнее</button>
+        </Link>
+        {shortReport && <ShortReport />}
      </div>
-    )
-})
-
+    );
+  }
+);
--- a/src/components/ProfileCalendar/profileCalendar.scss
+++ b/src/components/ProfileCalendar/profileCalendar.scss
@ -1,5 +1,5 @@
 .profile__calendar {
-  background: #F1F1F1;
+  background: #f1f1f1;
  height: 100%;
  min-height: 100vh;
  font-family: "LabGrotesque", sans-serif;
@ -32,7 +32,6 @@
    }
  }

-
  .calendar__wrapper {
    min-height: 719px;

--- a/src/components/ShortReport/ShortReport.jsx
+++ b/src/components/ShortReport/ShortReport.jsx
@ -0,0 +1,167 @@
+import React, { useEffect, useState } from "react";
+
+import { apiRequest } from "../../api/request";
+import {
+  getCorrectDate,
+  getCreatedDate,
+  hourOfNum,
+} from "../../components/Calendar/calendarHelper";
+import {
+  getReportDate,
+  getSendRequest,
+  setSendRequest,
+} from "../../redux/reportSlice";
+import { useDispatch, useSelector } from "react-redux";
+
+import "./shortReport.scss";
+
+export const ShortReport = ({}) => {
+  const reportDate = useSelector(getReportDate);
+
+  const sendTest = useSelector(getSendRequest);
+  const dispatch = useDispatch();
+
+  const [taskText, setTaskText] = useState([]);
+  const [difficulties, setDifficulties] = useState([]);
+  const [tomorrowTask, setTomorrowTask] = useState([]);
+  const [totalHours, setTotalHours] = useState(0);
+  const [loader, setLoader] = useState(false);
+  const [reportDay] = useState(new Date(getCreatedDate(reportDate)));
+
+  function getReportFromDate(day) {
+    setLoader(true);
+    setTaskText([]);
+    setDifficulties([]);
+    setTomorrowTask([]);
+
+    apiRequest(
+      `reports/find-by-date?user_card_id=${localStorage.getItem(
+        "cardId"
+      )}&date=${day}`
+    ).then((res) => {
+      console.log(res);
+      let spendTime = 0;
+      for (const item of res) {
+        if (item.difficulties) {
+          setDifficulties((prevArray) => [...prevArray, item.difficulties]);
+        }
+        if (item.tomorrow) {
+          setTomorrowTask((prevArray) => [...prevArray, item.tomorrow]);
+        }
+        item.task.map((task) => {
+          const taskInfo = {
+            hours: task.hours_spent,
+            task: task.task,
+            id: task.id,
+          };
+          if (task.hours_spent) {
+            spendTime += Number(task.hours_spent);
+          }
+          setTaskText((prevArray) => [...prevArray, taskInfo]);
+        });
+      }
+
+      setTotalHours(spendTime);
+      setLoader(false);
+    });
+  }
+
+  if (sendTest) {
+    dispatch(setSendRequest(false));
+    getReportFromDate(getCreatedDate(reportDate));
+  }
+
+  return (
+    <div>
+      <div className="viewReport__info">
+        <h2 className="viewReport__title">
+          Ваши отчеты - <span>просмотр отчета за день</span>
+        </h2>
+        <div className="viewReport__bar">
+          <h3 className="viewReport__bar__date">
+            {getCorrectDate(reportDate)}
+          </h3>
+          <p className="viewReport__bar__hours">
+            Вами потрачено на работу :{" "}
+            <span>
+              {totalHours} {hourOfNum(totalHours)}
+            </span>
+          </p>
+        </div>
+      </div>
+      {Boolean(taskText.length) && (
+        <div className="viewReport__content">
+          <div className="table__container">
+            <table className="viewReport__done">
+              <thead>
+                <tr>
+                  <th>
+                    <p>Какие задачи были выполнены?</p>
+                  </th>
+                  <th>
+                    <p>Время</p>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {taskText.length &&
+                  taskText.map((task, index) => {
+                    return (
+                      <tr key={task.id}>
+                        <td>
+                          <p>
+                            {index + 1}. {task.task}
+                          </p>
+                        </td>
+                        <td>
+                          <div className="viewReport__done__hours__item">
+                            <span>{task.hours}</span>
+                            <p className="hours">
+                              {hourOfNum(task.hours)} на задачу
+                            </p>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                <tr>
+                  <td></td>
+                  <td>
+                    <span>
+                      Всего: {totalHours} {hourOfNum(totalHours)}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          {Boolean(difficulties.length) && (
+            <div className="viewReport__item">
+              <h3>Какие сложности возникли?</h3>
+              {difficulties.map((item, index) => {
+                return <p key={index}>{item}</p>;
+              })}
+            </div>
+          )}
+          {Boolean(tomorrowTask.length) && (
+            <div className="viewReport__item">
+              <h3>Что планируется сделать завтра?</h3>
+              {tomorrowTask.map((item, index) => {
+                return <p key={index}>{item}</p>;
+              })}
+            </div>
+          )}
+        </div>
+      )}
+      {!Boolean(taskText.length) && !loader && (
+        <div className="viewReport__noTask">
+          <p>
+            В этот день вы <span>не заполняли</span> отчет
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ShortReport;
--- a/src/components/ShortReport/shortReport.scss
+++ b/src/components/ShortReport/shortReport.scss
--- a/src/pages/ViewReport/ViewReport.js
+++ b/src/pages/ViewReport/ViewReport.js
@ -1,26 +1,30 @@
-import React, {useEffect, useState} from 'react'
-import {Link, Navigate} from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { Link, Navigate } from "react-router-dom";

-import {useSelector} from "react-redux";
-import {getReportDate} from "../../redux/reportSlice";
+import { useSelector } from "react-redux";
+import { getReportDate } from "../../redux/reportSlice";

-import {Loader} from "../../components/Loader/Loader"
-import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
-import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
-import {Footer} from "../../components/Footer/Footer";
+import { Loader } from "../../components/Loader/Loader";
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { Footer } from "../../components/Footer/Footer";

-import {apiRequest} from "../../api/request";
-import {getCorrectDate, getCreatedDate, hourOfNum} from '../../components/Calendar/calendarHelper'
+import { apiRequest } from "../../api/request";
+import {
+  getCorrectDate,
+  getCreatedDate,
+  hourOfNum,
+} from "../../components/Calendar/calendarHelper";

 import arrow from "../../images/right-arrow.png";
 import arrowSwitchDate from "../../images/arrowViewReport.png";

-import './viewReport.scss'
-import { Navigation } from '../../components/Navigation/Navigation';
+import "./viewReport.scss";
+import { Navigation } from "../../components/Navigation/Navigation";

 export const ViewReport = () => {
-    if(localStorage.getItem('role_status') === '18') {
-        return <Navigate to="/profile" replace/>
+  if (localStorage.getItem("role_status") === "18") {
+    return <Navigate to="/profile" replace />;
  }
  const reportDate = useSelector(getReportDate);

@ -28,8 +32,8 @@ export const ViewReport = () => {
  const [difficulties, setDifficulties] = useState([]);
  const [tomorrowTask, setTomorrowTask] = useState([]);
  const [totalHours, setTotalHours] = useState(0);
-    const [reportDay] = useState(new Date (getCreatedDate(reportDate)));
-    const [currentDay] = useState(new Date ());
+  const [reportDay] = useState(new Date(getCreatedDate(reportDate)));
+  const [currentDay] = useState(new Date());
  const [loader, setLoader] = useState(false);

  function getReportFromDate(day) {
@ -37,139 +41,179 @@ export const ViewReport = () => {
    setTaskText([]);
    setDifficulties([]);
    setTomorrowTask([]);
-        apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=${day}`)
-            .then(res => {
+    apiRequest(
+      `reports/find-by-date?user_card_id=${localStorage.getItem(
+        "cardId"
+      )}&date=${day}`
+    ).then((res) => {
+      console.log(res);
      let spendTime = 0;
      for (const item of res) {
-                    if(item.difficulties) {
-                        setDifficulties(prevArray => [...prevArray, item.difficulties])
+        if (item.difficulties) {
+          setDifficulties((prevArray) => [...prevArray, item.difficulties]);
        }
-                    if(item.tomorrow) {
-                        setTomorrowTask(prevArray => [...prevArray, item.tomorrow])
+        if (item.tomorrow) {
+          setTomorrowTask((prevArray) => [...prevArray, item.tomorrow]);
        }
        item.task.map((task) => {
          const taskInfo = {
            hours: task.hours_spent,
            task: task.task,
-                            id: task.id
+            id: task.id,
          };
-                        if(task.hours_spent) {
-                            spendTime += Number(task.hours_spent)
+          if (task.hours_spent) {
+            spendTime += Number(task.hours_spent);
          }
-                        setTaskText(prevArray => [...prevArray, taskInfo])
-                    })
+          setTaskText((prevArray) => [...prevArray, taskInfo]);
+        });
      }
      setTotalHours(spendTime);
-                setLoader(false)
-            })
+      setLoader(false);
+    });
  }

  function nextDay() {
    reportDay.setDate(reportDay.getDate() + 1);
-        getReportFromDate(getCreatedDate(reportDay))
+    getReportFromDate(getCreatedDate(reportDay));
  }

  function previousDay() {
    reportDay.setDate(reportDay.getDate() - 1);
-        getReportFromDate(getCreatedDate(reportDay))
+    getReportFromDate(getCreatedDate(reportDay));
  }

  useEffect(() => {
-        getReportFromDate(getCreatedDate(reportDate))
+    getReportFromDate(getCreatedDate(reportDate));
  }, []);
  return (
-        <div className='viewReport'>
-            <ProfileHeader/>
+    <div className="viewReport">
+      <ProfileHeader />
      <Navigation />
-            <div className='container'>
-                <div className='viewReport__info'>
-                    <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},
-                        {name: 'Ваша отчетность', link: '/profile/calendar'},
-                        {name: 'Просмотр отчета за день', link: '/profile/view'}]}
+      <div className="container">
+        <div className="viewReport__info">
+          <ProfileBreadcrumbs
+            links={[
+              { name: "Главная", link: "/profile" },
+              { name: "Ваша отчетность", link: "/profile/calendar" },
+              { name: "Просмотр отчета за день", link: "/profile/view" },
+            ]}
          />
-                    <h2 className='viewReport__title'>Ваши отчеты - <span>просмотр отчета за день</span></h2>
-                    <Link className='viewReport__back' to={`/profile/calendar`}>
-                        <img src={arrow} alt='arrow'/><p>Вернуться</p>
+          <h2 className="viewReport__title">
+            Ваши отчеты - <span>просмотр отчета за день</span>
+          </h2>
+          <Link className="viewReport__back" to={`/profile/calendar`}>
+            <img src={arrow} alt="arrow" />
+            <p>Вернуться</p>
          </Link>
-                    <div className='viewReport__bar'>
-                        <h3 className='viewReport__bar__date'>{getCorrectDate(reportDay)}</h3>
-                        <p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} {hourOfNum(totalHours)}</span></p>
+          <div className="viewReport__bar">
+            <h3 className="viewReport__bar__date">
+              {getCorrectDate(reportDay)}
+            </h3>
+            <p className="viewReport__bar__hours">
+              Вами потрачено на работу :{" "}
+              <span>
+                {totalHours} {hourOfNum(totalHours)}
+              </span>
+            </p>
            {/*<div className='viewReport__bar__progressBar'>*/}
            {/*    <span></span>*/}
            {/*</div>*/}
            {/*<p className='viewReport__bar__total'>122 часа из 160</p>*/}
          </div>
        </div>
-                <div className='viewReport__switchDate'>
-                    <div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
-                        <img src={arrowSwitchDate} alt='arrow'/>
+        <div className="viewReport__switchDate">
+          <div
+            className="viewReport__switchDate__prev switchDate"
+            onClick={() => previousDay()}
+          >
+            <img src={arrowSwitchDate} alt="arrow" />
          </div>
          <p>{getCorrectDate(reportDay)}</p>
-                    <div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
-                        <img src={arrowSwitchDate} alt='arrow'/>
+          <div
+            className={`viewReport__switchDate__next switchDate ${
+              getCreatedDate(currentDay) === getCreatedDate(reportDay)
+                ? "disable"
+                : ""
+            }`}
+            onClick={() => nextDay()}
+          >
+            <img src={arrowSwitchDate} alt="arrow" />
          </div>
        </div>
-                {loader &&
-                    <Loader width={75} height={75}/>
-                }
-                {Boolean(taskText.length) &&
-                    <div className='viewReport__content'>
-                        <div className='table__container'>
-                            <table className='viewReport__done'>
+        {loader && <Loader width={75} height={75} />}
+        {Boolean(taskText.length) && (
+          <div className="viewReport__content">
+            <div className="table__container">
+              <table className="viewReport__done">
                <thead>
                  <tr>
-                                    <th><p>Какие задачи были выполнены?</p></th>
-                                    <th><p>Время</p></th>
+                    <th>
+                      <p>Какие задачи были выполнены?</p>
+                    </th>
+                    <th>
+                      <p>Время</p>
+                    </th>
                  </tr>
                </thead>
                <tbody>
-                                {taskText.length && taskText.map((task, index) => {
-                                    return <tr key={task.id}>
+                  {taskText.length &&
+                    taskText.map((task, index) => {
+                      return (
+                        <tr key={task.id}>
                          <td>
-                                                    <p>{index + 1}. {task.task}</p>
+                            <p>
+                              {index + 1}. {task.task}
+                            </p>
                          </td>
                          <td>
-                                                    <div className='viewReport__done__hours__item'>
+                            <div className="viewReport__done__hours__item">
                              <span>{task.hours}</span>
-                                                        <p className='hours'>{hourOfNum(task.hours)} на задачу</p>
+                              <p className="hours">
+                                {hourOfNum(task.hours)} на задачу
+                              </p>
                            </div>
                          </td>
                        </tr>
+                      );
                    })}
                  <tr>
                    <td></td>
-                                    <td><span>Всего: {totalHours} {hourOfNum(totalHours)}</span></td>
+                    <td>
+                      <span>
+                        Всего: {totalHours} {hourOfNum(totalHours)}
+                      </span>
+                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
-                        {Boolean(difficulties.length) &&
-                            <div className='viewReport__item'>
+            {Boolean(difficulties.length) && (
+              <div className="viewReport__item">
                <h3>Какие сложности возникли?</h3>
                {difficulties.map((item, index) => {
-                                        return <p key={index}>{item}</p>
-                                    }
-                                )}
+                  return <p key={index}>{item}</p>;
+                })}
              </div>
-                        }
-                        {Boolean(tomorrowTask.length) &&
-                            <div className='viewReport__item'>
+            )}
+            {Boolean(tomorrowTask.length) && (
+              <div className="viewReport__item">
                <h3>Что планируется сделать завтра?</h3>
                {tomorrowTask.map((item, index) => {
-                                        return <p key={index}>{item}</p>
-                                    }
+                  return <p key={index}>{item}</p>;
+                })}
+              </div>
            )}
          </div>
-                        }
+        )}
+        {!Boolean(taskText.length) && !loader && (
+          <div className="viewReport__noTask">
+            <p>
+              В этот день вы <span>не заполняли</span> отчет
+            </p>
          </div>
-                }
-                {!Boolean(taskText.length) && !loader &&
-                    <div className='viewReport__noTask'>
-                        <p>В этот день вы <span>не заполняли</span> отчет</p>
-                    </div>
-                }
+        )}
        <Footer />
      </div>
    </div>
-    )
+  );
 };
--- a/src/redux/reportSlice.js
+++ b/src/redux/reportSlice.js
@ -1,13 +1,14 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice } from "@reduxjs/toolkit";

 const initialState = {
-    dateSelected: '',
-    reportDate: '',
-    requestDates: ''
+  dateSelected: "",
+  reportDate: "",
+  requestDates: "",
+  sendRequest: "",
 };

 export const reportSlice = createSlice({
-  name: 'report',
+  name: "report",
  initialState,
  reducers: {
    dateSelected: (state, action) => {
@ -17,17 +18,23 @@ export const reportSlice = createSlice({
      state.reportDate = action.payload;
    },
    setRequestDate: (state, action) => {
-      state.requestDates = action.payload
-    }
+      state.requestDates = action.payload;
+    },
+    setSendRequest: (state, action) => {
+      state.sendRequest = action.payload;
+    },
  },
 });

-export const { dateSelected, setReportDate, setRequestDate} = reportSlice.actions;
+export const { dateSelected, setReportDate, setRequestDate, setSendRequest } =
+  reportSlice.actions;

 export const selectDate = (state) => state.report.dateSelected;

 export const getReportDate = (state) => state.report.reportDate;

-export const getRequestDates = (state) => state.report.requestDates
+export const getRequestDates = (state) => state.report.requestDates;
+
+export const getSendRequest = (state) => state.report.sendRequest;

 export default reportSlice.reducer;