employeeReport

src/pages/PartnerEmployeeReport/PartnerEmployeeReport.jsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from "react";
+import { Navigate, useParams } from "react-router-dom";
+
+import { Footer } from "@components/Common/Footer/Footer";
+import { Navigation } from "@components/Navigation/Navigation";
+import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
+import { ProfileCalendarComponent } from "@components/ProfileCalendar/ProfileCalendarComponent";
+
+import { apiRequest } from "@api/request";
+
+import "./partnerEmployeeReport.scss";
+import moment from "moment/moment";
+import { useDispatch, useSelector } from "react-redux";
+import { getRequestDates, setRequestDate } from "@redux/reportSlice";
+import { getReports } from "@components/Calendar/calendarHelper";
+import { Loader } from "@components/Common/Loader/Loader";
+
+export const PartnerEmployeeReport = () => {
+  // if (
+  //   localStorage.getItem("role_status") !== "18"
+  // ) {
+  //   return <Navigate to="/profile/categories" replace />;
+  // }
+
+  const params = useParams();
+  const dispatch = useDispatch();
+  const [userInfo, setUserInfo] = useState({})
+  const [value, setValue] = useState(moment());
+  const [reports, setReports] = useState([]);
+  const [totalHours, setTotalHours] = useState(0);
+  const requestDates = useSelector(getRequestDates);
+  const [startRangeDays, setStartRangeDays] = useState(false);
+  const [startDate, setStartDate] = useState(null);
+  const [loader, setLoader] = useState(true);
+
+  useEffect(() => {
+    dispatch(setRequestDate(getReports(moment())));
+  }, []);
+
+  useEffect(() => {
+    apiRequest(
+      `/resume?userId=${params.uuid}`
+    ).then((res) => {
+      setUserInfo(res)
+    });
+  }, [])
+
+  useEffect(() => {
+    setLoader(true);
+    if (!requestDates) {
+      return;
+    }
+    apiRequest(
+      `/reports/index?${requestDates}&user_id=${params.uuid}`
+    ).then((reports) => {
+      let spendTime = 0;
+
+      reports
+        .filter(
+          (item) => new Date(item.created_at).getMonth() === value.month()
+        )
+        .map((report) => {
+          spendTime += report.task.reduce(
+            (acc, task) => acc + task.hours_spent,
+            0
+          );
+        });
+
+      setTotalHours(Math.floor(spendTime));
+      setReports(reports);
+      setLoader(false);
+    });
+  }, [requestDates]);
+
+  return (
+    <div className="employeeReport">
+      <ProfileHeader />
+      <Navigation />
+      <div className="container">
+        <ProfileBreadcrumbs
+          links={[
+            { name: "Главная", link: "/profile" },
+            { name: "Данные моего персонала", link: "/profile/employees" }
+          ]}
+        />
+        {!Object.keys(userInfo).length ?
+          <div className="employeeReport__loader">
+            <Loader style={'green'} height={80} width={80} />
+          </div>
+          :
+          <>
+            <div className="employeeReport__info">
+              <div className="employeeReport__name">
+                <h2>{userInfo.fio}</h2>
+                <p>{userInfo.position}</p>
+              </div>
+              <div className="employeeReport__skills">
+                {userInfo?.stack && userInfo.stack.map((skill, index) => {
+                  return <span key={index}>{skill}</span>
+                })}
+              </div>
+            </div>
+            <div className="employeeReport__wrapper">
+              {loader ? (
+                <div className="employeeReport__loader">
+                  <Loader style={'green'} height={80} width={80} />
+                </div>
+              ) : (
+                <div className="employeeReport__calendar ">
+                  <ProfileCalendarComponent
+                    userId={params.uuid}
+                    setValueHandler={(value) => setValue(value)}
+                    value={value}
+                    reports={reports}
+                    totalHours={totalHours}
+                    startRangeDays={startRangeDays}
+                    toggleRangeDays={() => setStartRangeDays(!startRangeDays)}
+                    startDate={startDate}
+                    setStartDateRange={(date) => setStartDate(date)}
+                  />
+                </div>
+              )}
+            </div>
+          </>
+        }
+      </div>
+      <Footer />
+    </div>
+  );
+};

src/pages/PartnerEmployeeReport/partnerEmployeeReport.scss

@@ -0,0 +1,70 @@
+.employeeReport {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: "LabGrotesque", sans-serif;
+
+  .container {
+    margin-top: 23px;
+  }
+
+  &__info {
+    padding: 10px 15px;
+    background: white;
+    display: flex;
+    border-radius: 15px;
+    column-gap: 15px;
+    align-items: center;
+  }
+
+  &__name {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+    h2 {
+      font-size: 20px;
+      margin-bottom: 0;
+    }
+
+    p {
+      font-size: 15px;
+    }
+  }
+
+  &__skills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 7px;
+    width: 100%;
+
+    span {
+      font-size: 12px;
+      line-height: 14px;
+      color: #263238;
+      background: #8DC63F;
+      border-radius: 12px;
+      padding: 5px;
+      max-width: 130px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+    }
+  }
+
+  &__calendar {
+    width: 100%;
+  }
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 620px;
+  }
+
+  &__loader {
+    margin: 20px;
+  }
+}