employeeReport

This commit is contained in:
Mikola 2024-02-02 18:43:52 +03:00
parent dafb05619d
commit 5825015706
9 changed files with 308 additions and 80 deletions

View File

@ -42,6 +42,7 @@ import { PartnerEmployees } from "@pages/PartnerEmployees/PartnerEmployees";
import { AuthForCandidate } from "@pages/AuthForCandidate/AuthForCandidate"; import { AuthForCandidate } from "@pages/AuthForCandidate/AuthForCandidate";
import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate"; import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate";
import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate"; import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate";
import { PartnerEmployeeReport } from "@pages/PartnerEmployeeReport/PartnerEmployeeReport";
import { PassingTests } from "@pages/Quiz/PassingTests"; import { PassingTests } from "@pages/Quiz/PassingTests";
import Blog from "./pages/Blog/Blog"; import Blog from "./pages/Blog/Blog";
import Statistics from "@pages/Statistics/Statistics"; import Statistics from "@pages/Statistics/Statistics";
@ -120,7 +121,7 @@ const App = () => {
<Route exact path="calendar" element={<ProfileCalendar />} /> <Route exact path="calendar" element={<ProfileCalendar />} />
<Route exact path="calendar/view/" element={<ProfileCalendar />} /> <Route exact path="calendar/view/" element={<ProfileCalendar />} />
<Route exact path="summary" element={<Summary />} /> <Route exact path="summary" element={<Summary />} />
<Route exact path="view/:id" element={<ViewReport />} /> <Route exact path="view/:date/:id" element={<ViewReport />} />
<Route exact path="tracker" element={<Tracker />} /> <Route exact path="tracker" element={<Tracker />} />
<Route exact path="statistics/:id" element={<Statistics/>}/> <Route exact path="statistics/:id" element={<Statistics/>}/>
<Route exact path="payouts" element={<Payouts />} /> <Route exact path="payouts" element={<Payouts />} />
@ -129,8 +130,10 @@ const App = () => {
<Route exact path="add-request" element={<PartnerAddRequest />} /> <Route exact path="add-request" element={<PartnerAddRequest />} />
<Route exact path="edit-request" element={<PartnerAddRequest />} /> <Route exact path="edit-request" element={<PartnerAddRequest />} />
<Route exact path="bid" element={<PartnerBid />} /> <Route exact path="bid" element={<PartnerBid />} />
<Route exact path="categories" element={<PartnerCategories />} /> <Route exact path="employees" element={<PartnerCategories />} />
<Route exact path="employees/report/:uuid" element={<PartnerEmployeeReport />} />
<Route exact path="treaties" element={<PartnerTreaties />} /> <Route exact path="treaties" element={<PartnerTreaties />} />
<Route <Route
exact exact
path="categories/employees" path="categories/employees"

View File

@ -53,7 +53,7 @@ export const Navigation = () => {
name: "Запросы" name: "Запросы"
}, },
{ {
path: "/categories", path: "/employees",
name: "Персонал" name: "Персонал"
}, },
{ {

View File

@ -15,7 +15,7 @@ export const PartnerPersonCard = ({ name, img, userId }) => {
</div> </div>
<div className="partnerPersonCard__info"> <div className="partnerPersonCard__info">
<h2 className="partnerPersonCard__name">{name}</h2> <h2 className="partnerPersonCard__name">{name}</h2>
<Link className="partnerPersonCard__report" to={`calendar/${userId}`}> <Link className="partnerPersonCard__report" to={`/profile/employees/report/${userId}`}>
Подробный отчет Подробный отчет
<div className="partnerPersonCard__more"> <div className="partnerPersonCard__more">
<img src={rightArrow} alt="arrow" /> <img src={rightArrow} alt="arrow" />

View File

@ -32,6 +32,7 @@ import rectangle from "assets/images/rectangle__calendar.png";
export const ProfileCalendarComponent = React.memo( export const ProfileCalendarComponent = React.memo(
({ ({
userId,
value, value,
setValueHandler, setValueHandler,
reports, reports,
@ -94,9 +95,17 @@ export const ProfileCalendarComponent = React.memo(
new Date(day).getMonth() + 1 new Date(day).getMonth() + 1
)}-${correctDay(new Date(day).getDate())}` === date.created_at )}-${correctDay(new Date(day).getDate())}` === date.created_at
) { ) {
return `../view/${date.created_at}`; if (userId) {
return `../view/${date.created_at}/${userId}`
}
return `../view/${date.created_at}/${localStorage.getItem("id")}`;
} }
} }
if (userId) {
return "#"
}
return "../../report"; return "../../report";
} }
@ -114,7 +123,7 @@ export const ProfileCalendarComponent = React.memo(
startDate._d startDate._d
)}`; )}`;
apiRequest( apiRequest(
`/reports/index?${requestDates}&user_id =${localStorage.getItem("id")}` `/reports/index?${requestDates}&user_id=${userId ? userId : localStorage.getItem("id")}`
).then((reports) => { ).then((reports) => {
let spendTime = 0; let spendTime = 0;
reports.map((report) => { reports.map((report) => {
@ -163,7 +172,9 @@ export const ProfileCalendarComponent = React.memo(
<div className="calendar-component"> <div className="calendar-component">
<div className="calendar-component__header"> <div className="calendar-component__header">
<div className="calendar-component__header-info"> <div className="calendar-component__header-info">
<h3>Мои отчеты за </h3> {!userId &&
<h3>Мои отчеты за </h3>
}
<p className="calendar__hours"> <p className="calendar__hours">
{month}&nbsp; {month}&nbsp;
<span> <span>

View File

@ -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>
);
};

View File

@ -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;
}
}

View File

@ -24,6 +24,7 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
// import TestImg from "assets/images/partnerProfile/PersonalTesters.svg"; // import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
// import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg"; // import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
import "./partnerСategories.scss"; import "./partnerСategories.scss";
import { Loader } from "@components/Common/Loader/Loader";
export const PartnerCategories = () => { export const PartnerCategories = () => {
// const dispatch = useDispatch(); // const dispatch = useDispatch();
@ -32,9 +33,12 @@ export const PartnerCategories = () => {
} }
const [staff, setStaff] = useState([]); const [staff, setStaff] = useState([]);
const [loader, setLoader] = useState(false)
useEffect(() => { useEffect(() => {
setLoader(true)
apiRequest("/project/my-employee").then((el) => { apiRequest("/project/my-employee").then((el) => {
setLoader(false)
setStaff(el.managerEmployees); setStaff(el.managerEmployees);
}); });
}, []); }, []);
@ -149,55 +153,59 @@ export const PartnerCategories = () => {
<ProfileBreadcrumbs <ProfileBreadcrumbs
links={[ links={[
{ name: "Главная", link: "/profile" }, { name: "Главная", link: "/profile" },
{ name: "Данные моего персонала", link: "/profile/categories" } { name: "Данные моего персонала", link: "/profile/employees" }
]} ]}
/> />
<h2 className="partnerCategories__title">Данные персонала</h2> <h2 className="partnerCategories__title">Данные персонала</h2>
<div className="partnerCategories__items"> {loader ?
{staff.map((card) => { <Loader style={'green'} height={80} width={80} />
return ( :
<PartnerPersonCard <div className="partnerCategories__items">
key={card.id} {staff.map((card) => {
name={card.employee.fio} return (
img={card.employee.avatar} <PartnerPersonCard
userId={card.user_id} key={card.id}
/> name={card.employee.fio}
); img={card.employee.avatar}
})} userId={card.user_id}
{/*{personalInfoItems.map((item, index) => {*/} />
{/* return (*/} );
{/* <Link*/} })}
{/* to={item.link}*/} {/*{personalInfoItems.map((item, index) => {*/}
{/* key={index}*/} {/* return (*/}
{/* className={*/} {/* <Link*/}
{/* item.available*/} {/* to={item.link}*/}
{/* ? "partnerCategories__item item"*/} {/* key={index}*/}
{/* : "partnerCategories__item item item__disable"*/} {/* className={*/}
{/* }*/} {/* item.available*/}
{/* onClick={() => {*/} {/* ? "partnerCategories__item item"*/}
{/* dispatch(setPartnerEmployees(mokPersons));*/} {/* : "partnerCategories__item item item__disable"*/}
{/* }}*/} {/* }*/}
{/* >*/} {/* onClick={() => {*/}
{/* <div className="item__title">*/} {/* dispatch(setPartnerEmployees(mokPersons));*/}
{/* <img src={item.img} alt={item.title} />*/} {/* }}*/}
{/* <h4>{item.title}</h4>*/} {/* >*/}
{/* </div>*/} {/* <div className="item__title">*/}
{/* <div className="item__info">*/} {/* <img src={item.img} alt={item.title} />*/}
{/* <p>{item.description}</p>*/} {/* <h4>{item.title}</h4>*/}
{/* <div className="more">*/} {/* </div>*/}
{/* <img src={rightArrow} alt="arrow" />*/} {/* <div className="item__info">*/}
{/* </div>*/} {/* <p>{item.description}</p>*/}
{/* </div>*/} {/* <div className="more">*/}
{/* {!item.available && (*/} {/* <img src={rightArrow} alt="arrow" />*/}
{/* <div className="item__disableHover">*/} {/* </div>*/}
{/* <p>У вас нет персонала из категории</p>*/} {/* </div>*/}
{/* <button>Подобрать</button>*/} {/* {!item.available && (*/}
{/* </div>*/} {/* <div className="item__disableHover">*/}
{/* )}*/} {/* <p>У вас нет персонала из категории</p>*/}
{/* </Link>*/} {/* <button>Подобрать</button>*/}
{/* );*/} {/* </div>*/}
{/*})}*/} {/* )}*/}
</div> {/* </Link>*/}
{/* );*/}
{/*})}*/}
</div>
}
</div> </div>
<Footer /> <Footer />
</div> </div>

View File

@ -973,7 +973,7 @@ export const ProjectTracker = () => {
<div className="tasks__board__item__info__more"> <div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" /> <img src={filesBoard} alt="filesImg" />
<span> <span>
{task.files ? task.files : 0}{" "} {task.file_count ? task.file_count : 0}{" "}
{/* {caseOfNum(0, "files")} */} {/* {caseOfNum(0, "files")} */}
</span> </span>
</div> </div>

View File

@ -20,13 +20,10 @@ import arrow from "assets/icons/arrows/left-arrow.png";
import "./viewReport.scss"; import "./viewReport.scss";
export const ViewReport = () => { export const ViewReport = () => {
if (localStorage.getItem("role_status") === "18") {
return <Navigate to="/profile" replace />;
}
const dateReport = useParams(); const params = useParams();
const [previousReportDay] = useState(new Date(dateReport.id)); const [previousReportDay] = useState(new Date(params.date));
const [nextReportDay] = useState(new Date(dateReport.id)); const [nextReportDay] = useState(new Date(params.date));
const [taskText, setTaskText] = useState([]); const [taskText, setTaskText] = useState([]);
const [difficulties, setDifficulties] = useState([]); const [difficulties, setDifficulties] = useState([]);
@ -41,7 +38,7 @@ export const ViewReport = () => {
setDifficulties([]); setDifficulties([]);
setTomorrowTask([]); setTomorrowTask([]);
apiRequest( apiRequest(
`reports/find-by-date?user_id=${localStorage.getItem("id")}&date=${day}` `reports/find-by-date?user_id=${params.id}&date=${day}`
).then((res) => { ).then((res) => {
let spendTime = 0; let spendTime = 0;
for (const item of res) { for (const item of res) {
@ -80,7 +77,7 @@ export const ViewReport = () => {
} }
useEffect(() => { useEffect(() => {
getReportFromDate(dateReport.id); getReportFromDate(params.date);
}, []); }, []);
return ( return (
@ -89,17 +86,22 @@ export const ViewReport = () => {
<Navigation /> <Navigation />
<div className="container"> <div className="container">
<div className="viewReport__info"> <div className="viewReport__info">
<ProfileBreadcrumbs {localStorage.getItem("role_status") !== "18" &&
links={[ <>
{ name: "Главная", link: "/profile" }, <ProfileBreadcrumbs
{ name: "Ваша отчетность", link: "/profile/calendar" }, links={[
{ name: "Просмотр отчета за день", link: "/profile/view" } { name: "Главная", link: "/profile" },
]} { name: "Ваша отчетность", link: "/profile/calendar" },
/> { name: "Просмотр отчета за день", link: "/profile/view" }
<h2 className="viewReport__title"> ]}
Ваши отчеты - <span>просмотр отчета за день</span> />
</h2> <h2 className="viewReport__title">
<Link className="viewReport__back" to={`/profile/calendar`}> Ваши отчеты - <span>просмотр отчета за день</span>
</h2>
</>
}
<Link className="viewReport__back"
to={localStorage.getItem("role_status") === "18" ? `/profile/employees/report/${params.id}` :`/profile/calendar`}>
<img src={arrow} alt="#" /> <img src={arrow} alt="#" />
<p>Вернуться</p> <p>Вернуться</p>
</Link> </Link>
@ -117,22 +119,22 @@ export const ViewReport = () => {
</div> </div>
<div className="viewReport__switch-date"> <div className="viewReport__switch-date">
<div onClick={() => previousDay()}> <div onClick={() => previousDay()}>
<Link to={`../view/${getCreatedDate(previousReportDay)}`}> <Link to={`../view/${getCreatedDate(previousReportDay)}/${params.id}`}>
<div className="viewReport__switch-date__prev switch-date"> <div className="viewReport__switch-date__prev switch-date">
<img src={arrowSwitchDate} alt="arrow" /> <img src={arrowSwitchDate} alt="arrow" />
</div> </div>
</Link> </Link>
</div> </div>
<p>{getCorrectDate(dateReport.id)}</p> <p>{getCorrectDate(params.date)}</p>
<div <div
onClick={() => nextDay()} onClick={() => nextDay()}
className={`${ className={`${
getCreatedDate(currentDay) === dateReport.id ? "disable" : "" getCreatedDate(currentDay) === params.date ? "disable" : ""
}`} }`}
> >
<Link to={`../view/${getCreatedDate(nextReportDay)}`}> <Link to={`../view/${getCreatedDate(nextReportDay)}/${params.id}`}>
<div className={`viewReport__switch-date__next switch-date`}> <div className={`viewReport__switch-date__next switch-date`}>
<img src={arrowSwitchDate} alt="arrow" /> <img src={arrowSwitchDate} alt="arrow" />
</div> </div>
@ -206,9 +208,12 @@ export const ViewReport = () => {
)} )}
{!Boolean(taskText.length) && !loader && ( {!Boolean(taskText.length) && !loader && (
<div className="viewReport__noTask"> <div className="viewReport__noTask">
<p> {localStorage.getItem("role_status") === "4" ?
В этот день вы <span>не заполняли</span> отчет <p>
</p> В этот день вы <span>не заполняли</span> отчет
</p> :
<p>Отчет за день не заполнен</p>
}
</div> </div>
)} )}
<Footer /> <Footer />