Compare commits
22 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
3cb0604e81 | ||
 tokslaw
|
3290fce6da | ||
|
victorAnumudu
|
21e4221301 | ||
|
victorAnumudu
|
d9f1771045 | ||
|
victorAnumudu
|
119dfcde06 | ||
|
CHIEFSOFT\ameye
|
f6e37d0f14 | ||
 ameye
|
3b1dc859e0 | ||
|
ameye
|
a45d21cd2d | ||
|
ameye
|
1774d07980 | ||
|
Ebube
|
69ec1e3766 | ||
|
Ebube
|
7e0f19212f | ||
|
victorAnumudu
|
5fd3940911 | ||
|
victorAnumudu
|
4f1a4dd045 | ||
|
ameye
|
f755786adc | ||
|
Ebube
|
19f111c6a8 | ||
|
CHIEFSOFT\ameye
|
c877c70bf0 | ||
|
CHIEFSOFT\ameye
|
7c2f90b1b8 | ||
|
ameye
|
872ba05a01 | ||
|
victorAnumudu
|
7083e67667 | ||
|
ameye
|
94e7c549df | ||
|
victorAnumudu
|
0d013c261b | ||
|
ameye
|
60eca6e703 |
@@ -35,6 +35,8 @@ 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";
|
||||
import ManageActiveJobs from "./views/ManageActiveJobs";
|
||||
|
||||
export default function Routers() {
|
||||
return (
|
||||
@@ -79,8 +81,10 @@ 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 exact path="/manage-active-job" element={<ManageActiveJobs />} />
|
||||
<Route
|
||||
exact
|
||||
path="/my-collection/collection-item"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import Layout from "../Partials/Layout";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
function ActiveJobs() {
|
||||
let { userDetails } = useSelector((state) => state.userDetails);
|
||||
let navigate = useNavigate()
|
||||
let {state} = useLocation()
|
||||
|
||||
let [details, setDetails] = useState({})
|
||||
|
||||
// console.log(state, userDetails);
|
||||
|
||||
useEffect(()=>{
|
||||
if(!state){
|
||||
navigate('/my-active-jobs', {replace: true})
|
||||
}
|
||||
setDetails(state)
|
||||
},[])
|
||||
return (
|
||||
<Layout>
|
||||
{/* <div className="logout-modal-wrapper min-w-[850px] h-full lg:h-auto lg:rounded-2xl overflow-y-auto"> */}
|
||||
|
||||
<div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
|
||||
<div className="w-full lg:w-3/4">
|
||||
<div className="py-[20px] bg-white px-4 rounded-md shadow-md">
|
||||
{/* back btn and title */}
|
||||
<div className="w-full flex justify-start space-x-3 items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] border border-sky-blue p-1 rounded-full"
|
||||
onClick={() => navigate('/my-active-jobs', {replace: true})}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="35"
|
||||
height="35"
|
||||
viewBox="0 0 24 24"
|
||||
fill="skyblue"
|
||||
>
|
||||
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{details.title && details.title}
|
||||
</h1>
|
||||
</div>
|
||||
{/* END of back btn and title */}
|
||||
|
||||
<div className="mt-2 w-full lg:flex lg:justify-between lg:items-center lg:space-x-2">
|
||||
<div className="my-2 lg:my-0">
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
{details.contract && details.contract}
|
||||
</p>
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
<span className="font-semibold">Description: </span>
|
||||
{details.description && details.description}
|
||||
</p>
|
||||
<p className="text-base text-sky-blue">Delivery Detail</p>
|
||||
</div>
|
||||
<div className="">
|
||||
<p className="text-base text-sky-blue">
|
||||
{userDetails.firstname && userDetails.firstname}
|
||||
</p>
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
<span className="font-semibold">Due: </span>
|
||||
{details.delivery_date &&
|
||||
details.delivery_date.split(" ")[0]}
|
||||
</p>
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
{details.delivery_date &&
|
||||
details.delivery_date.split(" ")[1]}
|
||||
</p>
|
||||
<p className="text-base text-slate-700 dark:text-black">
|
||||
{details.timeline_days && details.timeline_days} day(s)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 bg-white p-4 rounded-md shadow-md">
|
||||
<div className="">
|
||||
<p className="text-lg font-bold text-slate-600 dark:text-blask tracking-wide">Message(s)</p>
|
||||
<textarea
|
||||
className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
|
||||
rows="10"
|
||||
style={{ resize: "none" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Buttons Sections */}
|
||||
<div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
|
||||
<div className="w-full sm:w-3/4 mb-5 sm:mb-0">
|
||||
<button
|
||||
onClick={()=> console.log('working')}
|
||||
type="button"
|
||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
|
||||
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
|
||||
</svg>
|
||||
|
||||
<span className="text-white">Upload Files</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="w-full sm:w-1/4 flex justify-between items-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
|
||||
>
|
||||
<span className="text-white">Clear</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
|
||||
>
|
||||
<span className="text-white">Send</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* end of Buttons Sections */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className="w-full lg:w-1/4 h-full">
|
||||
<div className="py-[20px] bg-white px-4 rounded-md shadow-md">
|
||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
|
||||
|
||||
<p className="my-3 py-1 text-base">
|
||||
Waiting for the completion message from the client before you can approve.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 bg-white p-4 rounded-md shadow-md">
|
||||
<div className="">
|
||||
<p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
|
||||
<textarea
|
||||
className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
|
||||
rows="10"
|
||||
style={{ resize: "none" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* </div> */}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default ActiveJobs;
|
||||
@@ -1,112 +1,136 @@
|
||||
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 { useNavigate } from "react-router-dom";
|
||||
|
||||
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
||||
import PaginatedList from "../Pagination/PaginatedList";
|
||||
|
||||
export default function MyActiveJobTable({MyJobList, className }) {
|
||||
const filterCategories = ["All Categories", "Explore", "Featured"];
|
||||
const [selectedCategory, setCategory] = useState(filterCategories[0]);
|
||||
export default function MyActiveJobTable({ MyJobList, className }) {
|
||||
const navigate = useNavigate()
|
||||
|
||||
let [jobPopout,setJobPopout] = useState({show:false, data:{}}) // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
|
||||
const filterCategories = ["All Categories", "Explore", "Featured"];
|
||||
const [selectedCategory, setCategory] = useState(filterCategories[0]);
|
||||
|
||||
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)
|
||||
}
|
||||
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
|
||||
);
|
||||
|
||||
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>*/}
|
||||
const handlePagination = (e) => {
|
||||
handlePagingFunc(e, setCurrentPage);
|
||||
};
|
||||
|
||||
{
|
||||
<>
|
||||
{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>
|
||||
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>*/}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{
|
||||
<>
|
||||
{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>
|
||||
<td className="text-right py-4 px-2">
|
||||
<div className="flex justify-center items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigate('/manage-active-job', {state:value});
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</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
|
||||
}
|
||||
|
||||
{/* Active Job Popout */}
|
||||
{jobPopout.show &&
|
||||
<ActiveJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
|
||||
}
|
||||
{/* End of Active Job Popout */}
|
||||
data={MyJobList?.result_list}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
);
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@ export default function MyActiveJobs(props) {
|
||||
<span
|
||||
className={`${selectTab === "today" ? "block" : "hidden"}`}
|
||||
>
|
||||
Current Job(s)
|
||||
Active Job(s)
|
||||
</span>
|
||||
|
||||
</h1>
|
||||
|
||||
@@ -51,8 +51,8 @@ export default function MyJobTable({MyJobList, className }) {
|
||||
<table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
<tbody>
|
||||
<tr className="text-base text-thin-light-gray border-b default-border-b dark:border-[#5356fb29] ottom ">
|
||||
<td className="py-8">.</td>
|
||||
<td className="py-4 text-right">.</td>
|
||||
<td className="py-1">.</td>
|
||||
<td className="py-1 text-right">.</td>
|
||||
</tr>
|
||||
|
||||
{selectedCategory === "All Categories" ? (
|
||||
@@ -62,43 +62,44 @@ 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 className="job-sub-menu">
|
||||
<button type="button" className="w-20 h-11" onClick={()=>{setDeleteJobPopout({show:true, data:value})}}>[Delete]</button> |
|
||||
<button type="button" className="w-20 h-11">Edit</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>
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
<td className="text-right py-3 px-2">
|
||||
<td className="text-right py-9 px-2">
|
||||
<button
|
||||
type="button"
|
||||
// onClick={()=>{setJobPopout({show:true, data:value})}}
|
||||
onClick={()=>{setJobPopout({show:true, data:value})}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
|
||||
@@ -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 PendingJobsPopout from "../jobPopout/PendingJobsPopout";
|
||||
|
||||
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 &&
|
||||
<PendingJobsPopout 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">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Link} from 'react-router-dom'
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import bank1 from "../../assets/images/bank-1.png";
|
||||
import bank2 from "../../assets/images/bank-2.png";
|
||||
@@ -8,180 +8,194 @@ import Accordion from "../Helpers/Accordion";
|
||||
|
||||
export default function WalletHeader(props) {
|
||||
// debugger;
|
||||
//props.myWalletList.result_list
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-purple pr-1.5 pl-4">
|
||||
<div
|
||||
onClick={() => props.handlerBalance()}
|
||||
className="flex items-center lg:justify-between justify-center w-full h-full"
|
||||
>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="wallet"/>
|
||||
</span>
|
||||
<p className="lg:text-xl text-lg font-bold text-white">
|
||||
Wallet
|
||||
</p>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="deep-plus"/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
|
||||
props.balanceDropdown ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
|
||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
Wallet
|
||||
</h3>
|
||||
//props.myWalletList.result_list
|
||||
let { pathname } = useLocation();
|
||||
let navigate = useNavigate();
|
||||
return (
|
||||
<>
|
||||
<div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-purple pr-1.5 pl-4">
|
||||
<div
|
||||
onClick={() => props.handlerBalance()}
|
||||
className="flex items-center lg:justify-between justify-center w-full h-full"
|
||||
>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="wallet" />
|
||||
</span>
|
||||
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="deep-plus" />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
|
||||
props.balanceDropdown ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
|
||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
Wallet
|
||||
</h3>
|
||||
</div>
|
||||
<div className="content px-7 pb-7">
|
||||
<ul>
|
||||
{props.myWalletList &&
|
||||
props.myWalletList?.result_list?.length > 0 &&
|
||||
props.myWalletList.result_list.map((value, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
||||
>
|
||||
<div className="sm:flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
||||
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={bank1} alt="" />
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium">
|
||||
{value.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{(value.amount * 0.01).toFixed(2)} {value.code}
|
||||
</p>
|
||||
<p className="usd text-base text-thin-light-gray text-right">
|
||||
{/*(773.69 USD)*/}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content px-7 pb-7">
|
||||
<ul>
|
||||
</li>
|
||||
))}
|
||||
|
||||
{props.myWalletList &&
|
||||
props.myWalletList?.result_list?.length > 0 &&
|
||||
props.myWalletList.result_list.map((value, index) => (
|
||||
<li key={index} className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
|
||||
<div className="sm:flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
||||
<div
|
||||
className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={bank1} alt=""/>
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium">
|
||||
{value.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{(value.amount*0.01).toFixed(2)} {value.code}
|
||||
</p>
|
||||
<p className="usd text-base text-thin-light-gray text-right">
|
||||
{/*(773.69 USD)*/}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank1} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* MetaMask*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 75,320 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank2} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Coinbase Wallet*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 56,124 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank3} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Bitski*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 99,123 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-5">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank4} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* WalletConnect*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 43,728 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
</ul>
|
||||
<div className="add-money-btn flex justify-center items-center mt-3">
|
||||
{/* <button
|
||||
onClick={() => props.addMoneyHandler()}
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank1} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* MetaMask*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 75,320 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank2} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Coinbase Wallet*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 56,124 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank3} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Bitski*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 99,123 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-5">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank4} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* WalletConnect*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 43,728 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
</ul>
|
||||
<div className="add-money-btn flex justify-center items-center mt-3">
|
||||
{/* <button
|
||||
onClick={() => {
|
||||
if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
|
||||
else navigate('/my-wallet', {replace: true})
|
||||
}}
|
||||
type="button"
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</button> */}
|
||||
<Link to='/my-wallet' className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">Manage</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
to="/my-wallet"
|
||||
onClick={() => {
|
||||
if (pathname == "/my-wallet")
|
||||
props.setBalanceDropdown.toggle();
|
||||
else navigate("/my-wallet", { replace: true });
|
||||
}}
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</Link>
|
||||
</div>
|
||||
{/*<div*/}
|
||||
{/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/}
|
||||
{/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
|
||||
{/* <p className="lg:text-xl text-lg font-bold text-white">*/}
|
||||
{/* $ 234,435.34*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
<div className="lg:hidden block"></div>
|
||||
</>);
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div*/}
|
||||
{/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/}
|
||||
{/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
|
||||
{/* <p className="lg:text-xl text-lg font-bold text-white">*/}
|
||||
{/* $ 234,435.34*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
<div className="lg:hidden block"></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useContext,useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import bank1 from "../../assets/images/bank-1.png";
|
||||
import bank2 from "../../assets/images/bank-2.png";
|
||||
import bank3 from "../../assets/images/bank-3.png";
|
||||
@@ -91,6 +91,15 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
setToggleNotification.toggle()
|
||||
}
|
||||
|
||||
// getting the location of head
|
||||
let {pathname} = useLocation()
|
||||
|
||||
const handleWalletBtn = () => {
|
||||
if (pathname === "/my-wallet"){
|
||||
setbalanceValue.set(false)
|
||||
} else return balanceDropdown
|
||||
}
|
||||
|
||||
// User Profile
|
||||
let {firstname, lastname, email, profile_pic} = userDetails
|
||||
let userEmail = email.split('@')[0]
|
||||
@@ -234,7 +243,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
myWalletList={myWalletList}
|
||||
handlerBalance={handlerBalance}
|
||||
balanceDropdown={balanceDropdown}
|
||||
addMoneyHandler={addMoneyHandler} />
|
||||
addMoneyHandler={addMoneyHandler}
|
||||
setBalanceDropdown = {setbalanceValue} />
|
||||
{/* notification */}
|
||||
<div className="user-notification lg:block hidden relative">
|
||||
<div
|
||||
|
||||
@@ -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")
|
||||
|
||||
+3
-3
@@ -3,7 +3,7 @@ import Detail from './popoutcomponent/Detail'
|
||||
import ModalCom from '../Helpers/ModalCom'
|
||||
|
||||
|
||||
function ActiveJobsPopout({details, onClose, situation}) {
|
||||
function PendingJobsPopout({details, onClose, situation}) {
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation}>
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
@@ -66,7 +66,7 @@ function ActiveJobsPopout({details, onClose, situation}) {
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Offer Expire'
|
||||
value={`${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
|
||||
value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -139,4 +139,4 @@ function ActiveJobsPopout({details, onClose, situation}) {
|
||||
)
|
||||
}
|
||||
|
||||
export default ActiveJobsPopout
|
||||
export default PendingJobsPopout
|
||||
@@ -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"),
|
||||
@@ -198,7 +198,31 @@ class usersService {
|
||||
return this.postAuxEnd("/sendmoneyfee", postData);
|
||||
}
|
||||
|
||||
// Task for the person doing the job
|
||||
getMyActiveTaskList(){
|
||||
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("/activetaskslist", 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("/jobmanageractive", postData);
|
||||
}
|
||||
|
||||
getMyPendingJobList(){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
@@ -209,7 +233,6 @@ class usersService {
|
||||
};
|
||||
return this.postAuxEnd("/jobmanageroffers", postData);
|
||||
}
|
||||
|
||||
getMyJobList(){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ActiveJobs from '../components/MyActiveJobs/ActiveJobs'
|
||||
|
||||
function ManageActiveJobs() {
|
||||
return (
|
||||
<ActiveJobs />
|
||||
)
|
||||
}
|
||||
|
||||
export default ManageActiveJobs
|
||||
@@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -10,7 +10,7 @@ export default function MyTaskPage() {
|
||||
|
||||
const getMyActiveJobList = async () => {
|
||||
try {
|
||||
const res = await api.getMyActiveJobList();
|
||||
const res = await api.getMyActiveTaskList();
|
||||
setMyActiveJobList(res.data);
|
||||
} catch (error) {
|
||||
console.log("Error getting mode");
|
||||
|
||||
Reference in New Issue
Block a user