Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
840abb4dcc | ||
 ameye
|
9da4ed2282 | ||
|
victorAnumudu
|
713c333e96 | ||
|
ameye
|
3b27db4ffe |
@@ -1,6 +1,8 @@
|
||||
import { useState } from "react";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
|
||||
import { useSelector } from "react-redux";
|
||||
import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
|
||||
|
||||
export default function AvailableJobsCard({
|
||||
className,
|
||||
@@ -11,8 +13,15 @@ export default function AvailableJobsCard({
|
||||
}) {
|
||||
//debugger;
|
||||
const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
|
||||
const [jobPopout, setJobPopout] = useState({ show: false, data: {} });
|
||||
|
||||
const [imageUrl, setImageUrl] = useState("");
|
||||
|
||||
const {
|
||||
userDetails: { uid },
|
||||
} = useSelector((state) => state?.userDetails); // GETS USER DETAILS
|
||||
|
||||
|
||||
let thePrice = PriceFormatter(
|
||||
datas?.price * 0.01,
|
||||
datas?.currency_code,
|
||||
@@ -40,7 +49,7 @@ export default function AvailableJobsCard({
|
||||
>
|
||||
<div
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas });
|
||||
}}
|
||||
className="flex flex-col gap-2 justify-between w-full h-full"
|
||||
>
|
||||
@@ -80,7 +89,7 @@ export default function AvailableJobsCard({
|
||||
</div>
|
||||
<div className="thumbnail-area w-full">
|
||||
<div
|
||||
className="w-full h-[236px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
|
||||
className="w-full p-1 h-[150px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
|
||||
// style={{
|
||||
// backgroundImage: `url('${image}')`,
|
||||
// }}
|
||||
@@ -108,15 +117,27 @@ export default function AvailableJobsCard({
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
{datas.market_uid != uid ?
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
:
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
setJobPopout({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -131,7 +152,7 @@ export default function AvailableJobsCard({
|
||||
<div className="flex flex-col flex-[0.9]">
|
||||
<h1
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
|
||||
}}
|
||||
className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
|
||||
>
|
||||
@@ -140,7 +161,7 @@ export default function AvailableJobsCard({
|
||||
|
||||
<div
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
|
||||
}}
|
||||
className="my-2"
|
||||
>
|
||||
@@ -168,8 +189,9 @@ export default function AvailableJobsCard({
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
{datas.market_uid != uid ?
|
||||
<button
|
||||
type="button"
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
@@ -177,6 +199,17 @@ export default function AvailableJobsCard({
|
||||
>
|
||||
View
|
||||
</button>
|
||||
:
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setJobPopout({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -189,6 +222,18 @@ export default function AvailableJobsCard({
|
||||
situation={marketPopUp.show}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Active Job Popout */}
|
||||
{jobPopout.show && (
|
||||
<PendingJobsPopout
|
||||
details={datas}
|
||||
onClose={() => {
|
||||
setJobPopout({ show: false, data: {} });
|
||||
}}
|
||||
situation={jobPopout.show}
|
||||
/>
|
||||
)}
|
||||
{/* End of Active Job Popout */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -173,11 +173,12 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
|
||||
{name}
|
||||
</label>
|
||||
<div
|
||||
className={`w-full md:w-3/4 text-slate-900 dark:text-white market-pop ${
|
||||
name !== "Delivery Detail"
|
||||
? " h-full flex items-center"
|
||||
: " overflow-y-auto max-h-[80px]"
|
||||
} ${name === "Description" && "max-h-14 h-full overflow-auto"}`}
|
||||
className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop ${
|
||||
name == "Description"
|
||||
? "max-h-28 h-full overflow-y-auto break-words"
|
||||
: name == "Delivery Detail" ? " overflow-y-auto h-full max-h-28"
|
||||
: "h-full flex items-center"
|
||||
}`}
|
||||
>
|
||||
{danger ? (
|
||||
<p
|
||||
@@ -193,12 +194,14 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
|
||||
{typeof content !== "object" ? content : null}
|
||||
{typeof content === "object" && (
|
||||
<>
|
||||
<hr className="mb-1" />
|
||||
{/* <hr className="mb-1" /> */}
|
||||
<span className='flex w-full mb-1 h-[1px] bg-slate-500'></span>
|
||||
<span className="flex items-center gap-2 dark:text-white">
|
||||
{content?.text}
|
||||
<strong>{thePrice}</strong>
|
||||
</span>
|
||||
<hr className="mt-1" />
|
||||
<span className='flex w-full mt-1 h-[1px] bg-slate-500'></span>
|
||||
{/* <hr className="mt-1" /> */}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -34,6 +34,8 @@ export default function ManageInterestOffer(props) {
|
||||
|
||||
const [messageList, setMessageList] = useState({loading: true, data: []}) // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
|
||||
|
||||
const [interestStats, setInterestStats] = useState({loading: true, data: []}) // STATE TO HOLD INTEREST STATS
|
||||
|
||||
const [selectTab, setValue] = useState("today");
|
||||
const filterHandler = (value) => {
|
||||
setValue(value);
|
||||
@@ -128,6 +130,20 @@ export default function ManageInterestOffer(props) {
|
||||
console.log('Failed', err)
|
||||
})
|
||||
},[messageListReload])
|
||||
|
||||
useEffect(()=>{ //API to get Interest stats
|
||||
let reqData = { // API PAYLOADS
|
||||
interest_uid: props?.offerDetails?.interest_uid,
|
||||
client_uid: props?.offerDetails?.client_uid
|
||||
}
|
||||
setInterestStats(prev => ({...prev, loading: true}))
|
||||
apiCall.interestStatistics(reqData).then(res=>{
|
||||
setInterestStats({loading: false, data:res?.data})
|
||||
}).catch(err => {
|
||||
setInterestStats(prev => ({...prev, loading: false}))
|
||||
console.log('Failed', err)
|
||||
})
|
||||
},[])
|
||||
return (
|
||||
<Layout>
|
||||
<CommonHead
|
||||
@@ -225,30 +241,44 @@ export default function ManageInterestOffer(props) {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-3 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_completed ? props.offerDetails?.client_jobs_completed :0}</span>
|
||||
</div>
|
||||
<div className="my-0 md:my-3 block md:flex items-center gap-10">
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_active ? props.offerDetails?.client_jobs_active:0}</span>
|
||||
</div>
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_missed ? props.offerDetails?.client_jobs_missed:0}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="block md:flex items-center gap-10">
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_percent_completion ? props.offerDetails?.client_percent_completion:0}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_offers_pending ? props.offerDetails?.client_offers_pending:0}</span>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
{interestStats.loading ?
|
||||
<LoadingSpinner color='sky-blue' size='10' height='min-h-[40px]' />
|
||||
:
|
||||
<>
|
||||
<div className="my-0 md:my-3 block md:flex items-center gap-10">
|
||||
<div className='my-3 md:my-0 flex items-center gap-1'>
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</span>
|
||||
</div>
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Last Job completed</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-0 md:my-3 block md:flex items-center gap-10">
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</span>
|
||||
</div>
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="block md:flex items-center gap-10">
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
</div>
|
||||
: tab == 'message' ?
|
||||
<div className="message-details w-full border-t">
|
||||
|
||||
@@ -99,6 +99,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
|
||||
onClose();
|
||||
dispatch(tableReload({ type: "PENDINGTABLE" }));
|
||||
dispatch(tableReload({ type: "JOBTABLE" }));
|
||||
dispatch(tableReload({ type: "MARKETTABLELIST" }));
|
||||
}, 4000);
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
@@ -188,6 +188,8 @@ export const apiConst = {
|
||||
WRENCHBOARD_JOB_JOBGROUPADD: 13046,
|
||||
WRENCHBOARD_JOB_REPORT: 13047,
|
||||
|
||||
WRENCHBOARD_INTEREST_STATS: 13048,
|
||||
|
||||
WRENCHBOARD_GROUP_START: 12000,
|
||||
WRENCHBOARD_GROUP_CREATEGROUP: 12010,
|
||||
WRENCHBOARD_GROUP_INVITEGROUP: 12015,
|
||||
|
||||
@@ -217,6 +217,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
|
||||
}
|
||||
// Getting market data
|
||||
const getMarketActiveJobList = async () => {
|
||||
dispatch(updateJobs({loading: true}));
|
||||
try {
|
||||
const res = await apiCall.getActiveJobList();
|
||||
dispatch(updateJobs({loading: false, ...res.data}));
|
||||
|
||||
@@ -1112,6 +1112,18 @@ class usersService {
|
||||
return this.postAuxEnd("/offerinterestlistmsg", postData);
|
||||
}
|
||||
|
||||
// END POINT TO GET INTEREST STATS
|
||||
interestStatistics(reqData) {
|
||||
var postData = {
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
action: apiConst.WRENCHBOARD_INTEREST_STATS,
|
||||
...reqData,
|
||||
};
|
||||
return this.postAuxEnd("/intereststats", postData);
|
||||
}
|
||||
|
||||
// TO ADD FAMILY
|
||||
addFamily(reqData) {
|
||||
var postData = {
|
||||
|
||||
Reference in New Issue
Block a user