Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
4f1a4dd045 | ||
 ameye
|
f755786adc | ||
|
Ebube
|
19f111c6a8 | ||
|
CHIEFSOFT\ameye
|
c877c70bf0 | ||
|
CHIEFSOFT\ameye
|
7c2f90b1b8 | ||
|
ameye
|
872ba05a01 |
@@ -35,6 +35,7 @@ import MyActiveJobsPage from "./views/MyActiveJobsPage";
|
||||
import FamilyAccPage from "./views/FamilyAccPage";
|
||||
import StartJob from "./components/MyJobs/StartJob";
|
||||
import AddJobPage from "./views/AddJobPage";
|
||||
import MyPendingJobsPage from "./views/MyPendingJobsPage";
|
||||
|
||||
export default function Routers() {
|
||||
return (
|
||||
@@ -79,6 +80,7 @@ export default function Routers() {
|
||||
<Route exact path="/myjobs" element={<MyJobsPage />} />
|
||||
<Route exact path="/add-job" element={<AddJobPage />} />
|
||||
<Route exact path="/my-active-jobs" element={<MyActiveJobsPage />} />
|
||||
<Route exact path="/my-pending-jobs" element={<MyPendingJobsPage />} />
|
||||
<Route exact path="/acc-family" element={<FamilyAccPage />} />
|
||||
<Route exact path="/start-job" element={<StartJob />} />
|
||||
<Route
|
||||
|
||||
@@ -134,7 +134,7 @@ export default function FamilyAcc() {
|
||||
{/* heading */}
|
||||
<div className="sm:flex justify-between items-center mb-6">
|
||||
<div className="mb-5 sm:mb-0">
|
||||
<h1 className="text-26 font-bold inline-flex gap-2 text-dark-gray dark:text-white">
|
||||
<h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
|
||||
<span
|
||||
className={`${selectTab === "today" ? "block" : "hidden"}`}
|
||||
>
|
||||
@@ -143,9 +143,9 @@ export default function FamilyAcc() {
|
||||
<button
|
||||
onClick={popUpHandler}
|
||||
type="button"
|
||||
className="text-purple"
|
||||
className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
|
||||
>
|
||||
(Add)
|
||||
Add
|
||||
</button>
|
||||
</h1>
|
||||
</div>
|
||||
@@ -266,7 +266,8 @@ const FamilyForm = ({
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
|
||||
// className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
|
||||
className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
|
||||
>
|
||||
{loader ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
|
||||
@@ -22,7 +22,7 @@ export default function MyActiveJobs(props) {
|
||||
<span
|
||||
className={`${selectTab === "today" ? "block" : "hidden"}`}
|
||||
>
|
||||
Current Job(s)
|
||||
Active Job(s)
|
||||
</span>
|
||||
|
||||
</h1>
|
||||
|
||||
@@ -62,33 +62,35 @@ export default function MyJobTable({MyJobList, className }) {
|
||||
currentJobList.map((value, index) => (
|
||||
<tr key={index} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
|
||||
<td className="py-9">
|
||||
<div className="flex space-x-2 items-center job-items">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage2}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
|
||||
{value.title}
|
||||
</h1>
|
||||
<div>
|
||||
{value.description}
|
||||
<div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
|
||||
<div className="flex space-x-2 items-center job-items">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage2}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Price: <span className="text-purple">{value.price*0.01}</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Duration: <span className="text-purple"> {value.timeline_days} day(s)</span>
|
||||
</span>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
|
||||
{value.title}
|
||||
</h1>
|
||||
<div>
|
||||
{value.description}
|
||||
</div>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Price: <span className="text-purple">{value.price*0.01}</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Duration: <span className="text-purple"> {value.timeline_days} day(s)</span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="job-sub-menu mt-2 flex flex-nowrap justify-start sm:justify-end items-center">
|
||||
<div className="bg-yellow-300 mx-2 rounded-md">
|
||||
<button type="button" className="p-2 w-[60px] h-11" onClick={()=>{setDeleteJobPopout({show:true, data:value})}}>[Delete]</button> |
|
||||
|
||||
<div className="min-w-[110px] max-w-[110px] bg-yellow-300 mx-2 rounded-md flex flex-nowrap space-x-2 justify-center items-center self-end">
|
||||
<button type="button" className="p-2 w-[60px] h-11" onClick={()=>{setDeleteJobPopout({show:true, data:value})}}>[Delete]</button>
|
||||
<span>|</span>
|
||||
<button type="button" className="p-2 w-[40px] h-11">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
import React, { useState } from "react";
|
||||
import dataImage1 from "../../assets/images/data-table-user-1.png";
|
||||
import dataImage2 from "../../assets/images/data-table-user-2.png";
|
||||
import dataImage3 from "../../assets/images/data-table-user-3.png";
|
||||
import dataImage4 from "../../assets/images/data-table-user-4.png";
|
||||
import SelectBox from "../Helpers/SelectBox";
|
||||
import ActiveJobsPopout from "../jobPopout/ActiveJobsPopout";
|
||||
|
||||
import PaginatedList from "../Pagination/PaginatedList";
|
||||
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
||||
|
||||
export default function MyPendingJobTable({MyJobList, className }) {
|
||||
const filterCategories = ["All Categories", "Explore", "Featured"];
|
||||
const [selectedCategory, setCategory] = useState(filterCategories[0]);
|
||||
|
||||
let [jobPopout,setJobPopout] = useState({show:false, data:{}}) // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
|
||||
|
||||
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 (
|
||||
<div
|
||||
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
{MyJobList && MyJobList?.result_list &&
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
|
||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
<tbody>
|
||||
{/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29] default-border-b dark:border-[#5356fb29] ottom ">*/}
|
||||
{/* <td className="py-4">All Product</td>*/}
|
||||
{/* <td className="py-4 text-right">.</td>*/}
|
||||
{/*</tr>*/}
|
||||
|
||||
{
|
||||
<>
|
||||
{MyJobList && MyJobList?.result_list &&
|
||||
MyJobList.result_list.length > 0 &&
|
||||
currentActiveJobList.map((value, index) => (
|
||||
<tr key={index} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
|
||||
<td className=" py-4">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage2}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
|
||||
{value.title}
|
||||
</h1>
|
||||
<div>
|
||||
{value.description}
|
||||
</div>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Price: <span className="text-purple">{value.price*0.01}</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Duration: <span className="text-purple"> {value.timeline_days} day(s)</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Expire: <span className="text-purple"> {value.expire}</span>
|
||||
</span>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Send to: <span className="text-purple"> {value.job_to}</span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
<td className="text-right py-4 px-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={()=>{setJobPopout({show:true, data:value})}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
|
||||
</>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= MyJobList?.result_list.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} />
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
}
|
||||
|
||||
{/* Active Job Popout */}
|
||||
{jobPopout.show &&
|
||||
<ActiveJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
|
||||
}
|
||||
{/* End of Active Job Popout */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import Layout from "../Partials/Layout";
|
||||
import CommonHead from "../UserHeader/CommonHead";
|
||||
import MyPendingJobTable from "./MyPendingJobTable";
|
||||
|
||||
export default function MyPendingJobs(props) {
|
||||
const [selectTab, setValue] = useState("today");
|
||||
const filterHandler = (value) => {
|
||||
setValue(value);
|
||||
};
|
||||
console.log("AMEYE LOC1", props.MyJobList);
|
||||
return (
|
||||
<Layout>
|
||||
<CommonHead />
|
||||
<div className="notification-page w-full mb-10">
|
||||
<div className="notification-wrapper w-full">
|
||||
{/* heading */}
|
||||
<div className="sm:flex justify-between items-center mb-6">
|
||||
<div className="mb-5 sm:mb-0">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
<span
|
||||
className={`${selectTab === "today" ? "block" : "hidden"}`}
|
||||
>
|
||||
Pending Job(s)
|
||||
</span>
|
||||
|
||||
</h1>
|
||||
</div>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
<div onClick={() => filterHandler("today")} className="relative">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MyPendingJobTable MyJobList={props.MyJobList} />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -110,6 +110,7 @@ function TransferFund({ payment, wallet }) {
|
||||
useEffect(() => {
|
||||
getRecipients();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||
|
||||
@@ -279,7 +279,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</li>
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/my-active-jobs"
|
||||
to="/my-pending-jobs"
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
||||
|
||||
@@ -107,17 +107,17 @@ class usersService {
|
||||
/*
|
||||
getMyActiveJobList - List of jobs active under this user
|
||||
*/
|
||||
getMyActiveJobList(){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
page:0,
|
||||
offset:0,
|
||||
limit :100
|
||||
};
|
||||
return this.postAuxEnd("/getjobsdata", postData);
|
||||
}
|
||||
// getMyActiveJobList(){
|
||||
// var postData = {
|
||||
// uuid: localStorage.getItem("uid"),
|
||||
// member_id: localStorage.getItem("member_id"),
|
||||
// sessionid: localStorage.getItem("session_token"),
|
||||
// page:0,
|
||||
// offset:0,
|
||||
// limit :100
|
||||
// };
|
||||
// return this.postAuxEnd("/getjobsdata", postData);
|
||||
// }
|
||||
getHeroJBanners(){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
@@ -207,9 +207,20 @@ class usersService {
|
||||
offset:0,
|
||||
limit :100
|
||||
};
|
||||
return this.postAuxEnd("/jobmanageroffers", postData);
|
||||
return this.postAuxEnd("/jobmanageractive", postData);
|
||||
}
|
||||
|
||||
getMyPendingJobList(){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
page:0,
|
||||
offset:0,
|
||||
limit :100
|
||||
};
|
||||
return this.postAuxEnd("/jobmanageroffers", postData);
|
||||
}
|
||||
getMyJobList(){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
|
||||
@@ -7,7 +7,7 @@ export default function MyActiveJobsPage() {
|
||||
|
||||
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.getMyActiveJobList();
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import React, { useContext,useState, useEffect } from "react";
|
||||
import usersService from "../services/UsersService";
|
||||
//import MyJobs from "../components/MyJobs";
|
||||
import MyActiveJobs from "../components/MyActiveJobs";
|
||||
import MyPendingJobs from "../components/MyPendingJobs";
|
||||
|
||||
export default function MyPendingJobsPage() {
|
||||
|
||||
const [MyJobList, setMyJobList] = useState([]);
|
||||
const api = new usersService();
|
||||
|
||||
const getMyJobList = async () => {
|
||||
try {
|
||||
const res = await api.getMyPendingJobList();
|
||||
setMyJobList(res.data);
|
||||
} catch (error) {
|
||||
console.log("Error getting mode");
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
getMyJobList();
|
||||
}, []);
|
||||
|
||||
// debugger;
|
||||
return (
|
||||
<>
|
||||
<MyPendingJobs MyJobList={MyJobList} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user