Merge pull request #88 from apuc/fix-report-page

Fixed report page and calendar component
2023-05-18 19:53:48 +03:00 · 2023-05-18 19:53:48 +03:00 · 9932720fd8
commit 9932720fd8
parent 10505419b3 c62ae06d20
11 changed files with 781 additions and 435 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;
@ -133,6 +132,8 @@
        text-align: center;
      }
    }
+
+    margin-bottom: 60px;
  }

  &__form {
@ -142,8 +143,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;
@ -158,18 +159,21 @@
      text-align: center;

      a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 115px;
-        height: 42px;
-        text-decoration: none;
-        color: #000000;
+        color: black;
+      }

      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 +186,7 @@
        height: 40px;
        font-size: 10px;

-          img {
-            margin-right: 2px;
-          }
-        }
-
        @media (max-width: 610px) {
-          img {
-            display: none;
-          }
          width: auto;
          height: auto;
        }
--- a/src/components/Calendar/calendarHelper.js
+++ b/src/components/Calendar/calendarHelper.js
@ -1,19 +1,23 @@
-import moment from 'moment';
-import 'moment/locale/ru';
+import moment from "moment";
+import "moment/locale/ru";

 export function calendarHelper(value) {
-  const startDay = value.clone().startOf('month').startOf('week').startOf('day');
-  const endDay = value.clone().endOf('month').endOf('week');
+  const startDay = value
+    .clone()
+    .startOf("month")
+    .startOf("week")
+    .startOf("day");
+  const endDay = value.clone().endOf("month").endOf("week");

-  const day = startDay.clone().subtract(1, 'day');
+  const day = startDay.clone().subtract(1, "day");

  const calendar = [];

-  while (day.isBefore(endDay, 'day')) {
+  while (day.isBefore(endDay, "day")) {
    calendar.push(
      Array(1)
        .fill(0)
-        .map(() => day.add(1, 'day').clone())
+        .map(() => day.add(1, "day").clone())
    );
  }

@ -21,48 +25,84 @@ export function calendarHelper(value) {
 }

 export function getReports(value) {
-  const startDay = value.clone().startOf('month').startOf('week').startOf('day');
-  const reportsStart = `${new Date(startDay).getFullYear()}-${new Date(startDay).getMonth() + 1}-${new Date(startDay).getDate()}`
-  const endDay = value.clone().endOf('month').endOf('week');
-  const reportsEnd = `${new Date(endDay).getFullYear()}-${new Date(endDay).getMonth() + 1}-${new Date(endDay).getDate()}`
-  const getReports = `fromDate=${reportsStart}&toDate=${reportsEnd}`
+  const startDay = value
+    .clone()
+    .startOf("month")
+    .startOf("week")
+    .startOf("day");
+  const reportsStart = `${new Date(startDay).getFullYear()}-${
+    new Date(startDay).getMonth() + 1
+  }-${new Date(startDay).getDate()}`;
+  const endDay = value.clone().endOf("month").endOf("week");
+  const reportsEnd = `${new Date(endDay).getFullYear()}-${
+    new Date(endDay).getMonth() + 1
+  }-${new Date(endDay).getDate()}`;
+  const getReports = `fromDate=${reportsStart}&toDate=${reportsEnd}`;

  return getReports;
 }

 export function getCreatedDate(day) {
  if (day) {
-    return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
+    return `${new Date(day).getFullYear()}-${correctDay(
+      new Date(day).getMonth() + 1
+    )}-${correctDay(new Date(day).getDate())}`;
  } else {
    const date = new Date();
-    const dd = String(date.getDate()).padStart(2, '0');
-    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const dd = String(date.getDate()).padStart(2, "0");
+    const mm = String(date.getMonth() + 1).padStart(2, "0");
    const yyyy = date.getFullYear();
-    return `${yyyy}-${mm}-${dd}`
+    return `${yyyy}-${mm}-${dd}`;
  }
 }

+export function correctDay(day) {
+  if (day < 10) {
+    return `0${day}`;
+  }
+  return day;
+}
+
 export function currentMonth() {
-  const currentMonth = moment().format('MMMM');
+  const currentMonth = moment().format("MMMM");

  return currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1);
 }

 export function currentMonthAndDay(day) {
-  return day.format('D MMMM');
+  return day.format("D MMMM");
 }

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

 export function currentMonthAndDayReportPage() {
-  return moment().format('D MMMM');
+  return moment().format("D MMMM");
 }

 export function hourOfNum(number) {
-  const hours = [' час', ' часа', ' часов'];
+  const hours = [" час", " часа", " часов"];
  const cases = [2, 0, 1, 1, 1, 2];
-  return hours[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
+  return hours[
+    number % 100 > 4 && number % 100 < 20
+      ? 2
+      : cases[number % 10 < 5 ? number % 10 : 5]
+  ];
 }
--- 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 { 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 { 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 { 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)
+    setValue(value);
  }

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

  useEffect(() => {
-        setLoader(true)
+    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)
+            spendTime += Number(task.hours_spent);
          }
-                    })
+        });
      }
      setTotalHours(spendTime);
-                setReports(reports)
-                setLoader(false)
-            })
+      setReports(reports);
+      setLoader(false);
+    });
  }, [requestDates]);

  return (
-        <div className='profile__calendar'>
+    <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 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);

    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;
        }
      }
-        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,20 +140,26 @@ 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));
+                    setShortReport(true);
+                    dispatch(setSendRequest(true));
                  }}
                  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='' />
+                    <img
+                      className={"calendar__icon"}
+                      src={calendarIcon}
+                      alt=""
+                    />
                    {currentMonthAndDay(day)}
                  </Link>
                </button>
@ -135,7 +167,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
            )}
          </div>
        </div>
-        </div>
-    )
-})

+        {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,176 @@
+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 { Link } from "react-router-dom";
+import { Loader } from "../Loader/Loader";
+
+import "./shortReport.scss";
+
+export const ShortReport = ({}) => {
+  const reportDate = useSelector(getReportDate);
+
+  const sendReport = 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 [dateCreate, setDateCreate] = useState("");
+
+  function getReportFromDate(day) {
+    setLoader(true);
+    setTaskText([]);
+    setDifficulties([]);
+    setTomorrowTask([]);
+    setTotalHours(0);
+    apiRequest(
+      `reports/find-by-date?user_card_id=${localStorage.getItem(
+        "cardId"
+      )}&date=${day}`
+    ).then((res) => {
+      let spendTime = 0;
+      for (const item of res) {
+        setDateCreate(item.created_at);
+        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 (sendReport) {
+    dispatch(setSendRequest(false));
+    getReportFromDate(getCreatedDate(reportDate));
+  }
+
+  return (
+    <div>
+      <div className="viewReport__info short-report">
+        <div className="viewReport__title-box">
+          <h2 className="viewReport__title">
+            Ваши отчеты - <span>просмотр отчета за день</span>
+          </h2>
+          <Link to={`../view/${dateCreate}`}>
+            Посмотреть подробнее об отчете
+          </Link>
+        </div>
+
+        <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>
+      {loader && <Loader style="green" />}
+      {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
@ -0,0 +1,15 @@
+.short-report {
+  margin-bottom: 30px;
+}
+
+.viewReport {
+  &__title-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    a {
+      font-size: 16px;
+    }
+  }
+}
--- a/src/pages/ViewReport/ViewReport.js
+++ b/src/pages/ViewReport/ViewReport.js
@ -1,175 +0,0 @@
-import React, {useEffect, useState} from 'react'
-import {Link, Navigate} from "react-router-dom";
-
-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 {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';
-
-export const ViewReport = () => {
-    if(localStorage.getItem('role_status') === '18') {
-        return <Navigate to="/profile" replace/>
-    }
-    const reportDate = useSelector(getReportDate);
-
-    const [taskText, setTaskText] = useState([]);
-    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 [loader, setLoader] = useState(false);
-
-    function getReportFromDate(day) {
-        setLoader(true);
-        setTaskText([]);
-        setDifficulties([]);
-        setTomorrowTask([]);
-        apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=${day}`)
-            .then(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)
-            })
-    }
-
-    function nextDay() {
-        reportDay.setDate(reportDay.getDate() + 1);
-        getReportFromDate(getCreatedDate(reportDay))
-    }
-
-    function previousDay() {
-        reportDay.setDate(reportDay.getDate() - 1);
-        getReportFromDate(getCreatedDate(reportDay))
-    }
-
-    useEffect(() => {
-        getReportFromDate(getCreatedDate(reportDate))
-    }, []);
-    return (
-        <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'}]}
-                    />
-                    <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__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>
-                    <p>{getCorrectDate(reportDay)}</p>
-                    <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'>
-                                <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>
-                }
-                <Footer />
-            </div>
-        </div>
-    )
-};
--- a/src/pages/ViewReport/ViewReport.jsx
+++ b/src/pages/ViewReport/ViewReport.jsx
@ -0,0 +1,225 @@
+import React, { useEffect, useState } from "react";
+import { Link, Navigate, useParams } from "react-router-dom";
+
+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 { Navigation } from "../../components/Navigation/Navigation";
+
+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";
+
+export const ViewReport = () => {
+  if (localStorage.getItem("role_status") === "18") {
+    return <Navigate to="/profile" replace />;
+  }
+
+  const dateReport = useParams();
+  const [previousReportDay] = useState(new Date(dateReport.id));
+  const [nextReportDay] = useState(new Date(dateReport.id));
+
+  const [taskText, setTaskText] = useState([]);
+  const [difficulties, setDifficulties] = useState([]);
+  const [tomorrowTask, setTomorrowTask] = useState([]);
+  const [totalHours, setTotalHours] = useState(0);
+  const [currentDay] = useState(new Date());
+  const [loader, setLoader] = useState(false);
+
+  function getReportFromDate(day) {
+    setLoader(true);
+    setTaskText([]);
+    setDifficulties([]);
+    setTomorrowTask([]);
+    apiRequest(
+      `reports/find-by-date?user_card_id=${localStorage.getItem(
+        "cardId"
+      )}&date=${day}`
+    ).then((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);
+    });
+    previousReportDay.setDate(previousReportDay.getDate() - 1);
+    nextReportDay.setDate(nextReportDay.getDate() + 1);
+  }
+
+  function nextDay() {
+    getReportFromDate(getCreatedDate(nextReportDay));
+    previousReportDay.setDate(previousReportDay.getDate() + 2);
+  }
+
+  function previousDay() {
+    getReportFromDate(getCreatedDate(previousReportDay));
+    nextReportDay.setDate(nextReportDay.getDate() - 2);
+  }
+
+  useEffect(() => {
+    getReportFromDate(dateReport.id);
+  }, []);
+
+  return (
+    <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" },
+            ]}
+          />
+          <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(dateReport.id)}
+            </h3>
+            <p className="viewReport__bar__hours">
+              Вами потрачено на работу :{" "}
+              <span>
+                {totalHours} {hourOfNum(totalHours)}
+              </span>
+            </p>
+          </div>
+        </div>
+        <div className="viewReport__switchDate">
+          <div
+            onClick={() => {
+              previousDay();
+            }}
+          >
+            <Link to={`../view/${getCreatedDate(previousReportDay)}`}>
+              <div className="viewReport__switchDate__prev switchDate">
+                <img src={arrowSwitchDate} alt="arrow" />
+              </div>
+            </Link>
+          </div>
+
+          <p>{getCorrectDate(dateReport.id)}</p>
+
+          <div
+            onClick={() => nextDay()}
+            className={`${
+              getCreatedDate(currentDay) === dateReport.id ? "disable" : ""
+            }`}
+          >
+            <Link to={`../view/${getCreatedDate(nextReportDay)}`}>
+              <div className={`viewReport__switchDate__next switchDate`}>
+                <img src={arrowSwitchDate} alt="arrow" />
+              </div>
+            </Link>
+          </div>
+        </div>
+        {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>
+                  </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>
+        )}
+        <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;