diff --git a/src/Routers.jsx b/src/Routers.jsx index e62da5f..cd0f515 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -59,11 +59,11 @@ import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo"; import YourPages from "./views/YourPage_"; import ParentWaitingPage from "./views/ParentWaitingPage"; import FamilyPendingOfferPage from "./views/FamilyPendingOfferPage"; -import FamilyPastDuePage from "./views/FamilyPastDuePage"; import FamBlogPage from "./views/FamBlogPage" import FamAIQuestionPage from "./views/FamAIQuestionPage" import FamMyFilesPage from "./views/FamMyFilesPage" import FamWorkInProgressPage from "./views/FamWorkInProgressPage"; +import MyPastDueTasksPage from "./views/MyPastDueTasksPage"; export default function Routers() { return ( @@ -137,7 +137,6 @@ export default function Routers() { } /> } /> } /> - } /> } /> } /> } /> @@ -149,6 +148,7 @@ export default function Routers() { path="/familysettings" element={} /> + } /> } /> } /> } /> diff --git a/src/components/FamilyAcc/FamilyPastDue.jsx b/src/components/FamilyAcc/FamilyPastDue.jsx deleted file mode 100644 index 9ec729d..0000000 --- a/src/components/FamilyAcc/FamilyPastDue.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' -import Layout from '../Partials/Layout' -import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb' - -export default function FamilyPastDue() { - return ( - -
- -
-
Family PastDue Page Here
- - ) -} diff --git a/src/components/MyActiveJobs/MyPastDueTaskTable.jsx b/src/components/MyActiveJobs/MyPastDueTaskTable.jsx new file mode 100644 index 0000000..9c54b6e --- /dev/null +++ b/src/components/MyActiveJobs/MyPastDueTaskTable.jsx @@ -0,0 +1,153 @@ +import React, { useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; +import { handlePagingFunc } from "../Pagination/HandlePagination"; +import PaginatedList from "../Pagination/PaginatedList"; + +export default function MyPastDueTaskTable({ MyJobList, className }) { + const navigate = useNavigate(); + let { pathname } = useLocation(); + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentActiveJobList = MyJobList?.result_list?.slice( + indexOfFirstItem, + indexOfLastItem + ); + + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; + + return ( +
+ {MyJobList && MyJobList?.result_list && ( +
+ + + { + <> + {MyJobList && + MyJobList?.result_list && + MyJobList.result_list.length > 0 ? ( + currentActiveJobList.map((value, index) => { + let deliveryDate = value?.delivery_date?.split(" ")[0]; + let thePrice = PriceFormatter( + value?.price * 0.01, + value?.currency_code, + value?.currency + ); + let image = `${ + MyJobList.session_image_server + }${localStorage.getItem("session_token")}/job/${ + value.job_uid + }`; + return ( + + + + + + ); + }) + ) : ( + + + + )} + + } + +
+
+
+ data +
+
+

+ {value.title} +

+
{value.description}
+ + Price:{" "} + + {thePrice} + + +
+ + Duration:{" "} + + {" "} + {value.timeline_days} day(s) + + + + Due:{" "} + + {" "} + {deliveryDate} + + + + Sent to:{" "} + + {" "} + {value.job_to === null + ? "public" + : value.job_to} + + +
+
+
+ 		+
+ +
+
No Past Due Task!
+ {/* PAGINATION BUTTON */} + = + MyJobList?.result_list.length + ? true + : false + } + data={MyJobList?.result_list} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
+ )} +
+ ); +} diff --git a/src/components/MyActiveJobs/MyPastDueTasks.jsx b/src/components/MyActiveJobs/MyPastDueTasks.jsx new file mode 100644 index 0000000..25955aa --- /dev/null +++ b/src/components/MyActiveJobs/MyPastDueTasks.jsx @@ -0,0 +1,57 @@ +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import Layout from "../Partials/Layout"; +import CommonHead from "../UserHeader/CommonHead"; +import MyPastDueTaskTable from "./MyPastDueTaskTable"; +import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import { useSelector } from "react-redux"; + +export default function MyPastDueTasks(props) { + + const { userDetails: { account_type } } = useSelector((state) => state?.userDetails); // Gets user details + + return ( + + {account_type == 'FULL' && + + } +
+
+ {/* heading */} + {account_type == 'FULL' ? +
+
+

+ + Past Due Task(s) + +

+
+
+ : +
+ +
+ } + {props.loading ? +
+ +
+ : + + } +
+
+ + ); +} diff --git a/src/views/FamilyPastDuePage.jsx b/src/views/FamilyPastDuePage.jsx deleted file mode 100644 index d3ee637..0000000 --- a/src/views/FamilyPastDuePage.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import FamilyPastDue from '../components/FamilyAcc/FamilyPastDue' - -export default function FamilyPastDuePage() { - return ( - <> - - - ) -} diff --git a/src/views/MyPastDueJobsPage.jsx b/src/views/MyPastDueJobsPage.jsx index e92cc77..db1d77a 100644 --- a/src/views/MyPastDueJobsPage.jsx +++ b/src/views/MyPastDueJobsPage.jsx @@ -1,7 +1,6 @@ import React, { useContext,useState, useEffect } from "react"; import usersService from "../services/UsersService"; -//import MyJobs from "../components/MyJobs"; -//import MyActiveJobs from "../components/MyActiveJobs"; + import MyPastDueJobs from "../components/MyActiveJobs/MyPastDueJobs"; import { useSelector } from "react-redux"; @@ -9,7 +8,7 @@ export default function MyPastDueJobsPage() { let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) const [MyJobList, setMyJobList] = useState([]); const api = new usersService(); -//TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive + const getMyJobList = async () => { try { const res = await api.getMyPastDueJobList(); diff --git a/src/views/MyPastDueTasksPage.jsx b/src/views/MyPastDueTasksPage.jsx new file mode 100644 index 0000000..354ae9f --- /dev/null +++ b/src/views/MyPastDueTasksPage.jsx @@ -0,0 +1,36 @@ +import React, { useContext,useState, useEffect } from "react"; +import usersService from "../services/UsersService"; + +import MyPastDueTasks from "../components/MyActiveJobs/MyPastDueTasks"; +import { useSelector } from "react-redux"; + +export default function MyPastDueTasksPage() { + let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) + const [MyJobList, setMyJobList] = useState({loading:true, data:[]}); + const api = new usersService(); + + const getMyJobList = async () => { + try { + const res = await api.getMyPastDueJobList(); + console.log("DATA", res.data); + setMyJobList({loading:false, data:res.data}) + } catch (error) { + setMyJobList({loading:false, data:[]}) + console.log("Error getting mode"); + } + }; + useEffect(() => { + getMyJobList(); + }, []); + + // debugger; + return ( + <> + + + ); +}