renders job action based on owner status and status description

src/Routers.jsx

@@ -40,6 +40,8 @@ import ManageActiveJobs from "./views/ManageActiveJobs";
 import FamilyManagePage from "./views/FamilyManagePage";
 import MyCouponPage from "./views/MyCouponPage";
 import AuthRedirect from "./views/AuthRedirect";
+import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
+import BlogPage from "./views/BlogPage";
 
 export default function Routers() {
   return (
@@ -86,11 +88,15 @@ 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-pastdue-jobs"  element={<MyPastDueJobsPage />} />
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <Route exact path="/manage-family"  element={<FamilyManagePage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
           <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
+          <Route exact path="/blog-page"  element={<BlogPage />} />
+
+
           <Route
             exact
             path="/my-collection/collection-item"

src/components/Blogs/index.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+
+export default function BlogItem(props) {
+    const [selectTab, setValue] = useState("today");
+    const filterHandler = (value) => {
+        setValue(value);
+    };
+    return (
+        <Layout>
+            <CommonHead
+                commonHeadData={props.commonHeadData}
+            />
+            <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"}`}
+                >
+                  Title of this Blog Items
+                </span>
+                            </h1>
+                        </div>
+                        <div className="slider-btns flex space-x-4">
+
+                        </div>
+                    </div>
+                   <div>
+                       Blog Items Details
+                   </div>
+                </div>
+            </div>
+        </Layout>
+    );
+}

src/components/Cards/AvailableJobsCard.jsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Link, useNavigate,  } from "react-router-dom";
 import { toast } from "react-toastify";
 import localImgLoad from "../../lib/localImgLoad";
 import Icons from "../Helpers/Icons";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
+import usersService from "../../services/UsersService";
 
 export default function AvailableJobsCard({
   className,
@@ -13,8 +14,11 @@ export default function AvailableJobsCard({
   //debugger;
   const [addFavorite, setValue] = useState(datas.whishlisted);
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
+  const [manageInt, setManageInt] = useState(null)
 
   const navigate = useNavigate();
+  const apiCall = useMemo(() => new usersService(), []);
+
 
   const favoriteHandler = () => {
     if (!addFavorite) {
@@ -26,11 +30,26 @@ export default function AvailableJobsCard({
     }
   };
 
+  const marketInterestData = useCallback(async() => {
+    let { offer_code } = datas;
+    let reqData = { offer_code };
+
+    try {
+      const manageInt = await apiCall.MarketInterest(reqData);
+      const manageIntRes = await manageInt?.data;
+      setManageInt(manageIntRes)
+    } catch (error) {
+      throw new Error(error)
+    }
+
+  }, [])
+
   useEffect(() => {
     if (!datas) {
       navigate("/market", { replace: true });
     }
-  }, [])
+    marketInterestData()
+  }, [marketInterestData, datas])
   return (
     <>
       <div
@@ -135,6 +154,7 @@ export default function AvailableJobsCard({
             setMarketPopUp({ show: false, data: {} });
           }}
           situation={marketPopUp.show}
+          marketInt={manageInt}
         />
       )}
     </>

src/components/Cards/HomeBannerOffersCard.jsx

@@ -32,7 +32,7 @@ export default function HomeBannerOffersCard(props) {
                        {props.itemData.description}
                     </div>
                     <div className="siderCardButton">
-                        [BUTTON HERE]
+                     [   {props.itemData.button_text}  ]
                     </div>
                 </div>
 

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -1,57 +1,181 @@
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import ModalCom from "../../Helpers/ModalCom";
+import { toast } from "react-toastify";
 import { Form, Formik } from "formik";
+import usersService from "../../../services/UsersService";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+  const [marketMsg, setMarketMsg] = useState({
+    loading: false,
+    data: {},
+    state: undefined,
+  });
+  const [manageInt, setManageInt] = useState({
+    loading: false,
+    data: {},
+    state: undefined,
+    msg: "",
+  });
+
+  const [textValue, setTextValue] = useState("");
+
+  const handleInputChange = ({ target: { value } }) => {
+    setTextValue(value);
+  };
+
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const marketCalls = useCallback(
+    async (e) => {
+      try {
+        const nameOfCall = e?.target?.name;
+        const { offer_code } = details;
+        const reqData = { offer_code };
+
+        if (nameOfCall === "market-message") {
+          setMarketMsg({ loading: true });
+          if (!textValue) return;
+
+          reqData.yourmessage = textValue;
+
+          const marketMessage = await apiCall.MarketMessage(reqData);
+          const marketMessageRes = marketMessage?.data;
+
+          if (marketMessageRes?.internal_return < 0) {
+            toast.warn("Something wrong happened", {
+              autoClose: 2000,
+              hideProgressBar: true,
+            });
+            onClose();
+            return;
+          }
+
+          toast.success("Message sent", {
+            autoClose: 2500,
+            hideProgressBar: true,
+          });
+
+          setMarketMsg({ data: marketMessageRes, state: true });
+          setTimeout(() => onClose(), 2000);
+        } else {
+          setManageInt({ loading: true });
+
+          const manageInt = await apiCall.MarketInterest(reqData);
+          const manageIntRes = manageInt?.data;
+
+          if (manageIntRes?.internal_return < 0) {
+            setManageInt({
+              loading: false,
+              msg: `Error - ${manageIntRes?.status}`,
+              data: manageIntRes,
+              state: false,
+            });
+          } else {
+            setManageInt({
+              loading: false,
+              msg: manageIntRes?.status,
+              data: manageIntRes,
+              state: true,
+            });
+          }
+
+          setTimeout(() => setManageInt({ msg: "" }), 3000);
+
+          return;
+        }
+      } catch (error) {
+        throw new Error(error);
+      } finally {
+        setTimeout(() => {
+          setTextValue("");
+          setMarketMsg({ loading: false });
+        }, 2000);
+      }
+    },
+    [apiCall, details, onClose, textValue]
+  );
+
+  console.log('Checking my mangeInt',manageInt)
+
+  // let addedIntDate = marketInt?.added?.split(" ")[0];
+  let expireIntDate = marketInt?.expire?.split(" ")[0];
 
-const MarketPopUp = ({ details, onClose, situation }) => {
-  console.log("maker pop data", details);
   return (
-    // className="job-popup"
-    <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">
-        <div className="logout-modal-header w-full flex items-center justify-end lg:p-6 px-[30px] py-[23px]">
+    <ModalCom action={onClose} situation={situation} className="edit-popup">
+      <div className="logout-modal-wrapper md:w-[750px] md:h-[700px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px]">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            {details.offer_code}
+          </h1>
           <CloseIcon onClose={onClose} />
         </div>
 
-        <div className="md:flex bg-white rounded-lg shadow-lg">
+        <div className="md:flex bg-white rounded-lg">
           <div className="p-4 w-full md:w-3/4 md:border-r-1">
-            <div className="flex items-center gap-4 md:text-[16px] text-md tracking-wide text-dark-gray dark:text-white">
-              <p className="font-semibold text-slate-900">
-                {details.offer_code}
-              </p>
-              <p>
-                <span className="text-slate-900">{`Timeline: ${details.timeline_days} day(s) -- `}</span>
-                <span className="font-semibold text-slate-900">{`Budget: ${details.price} naira`}</span>
-              </p>
-            </div>
+            <div className="min-h-[290px]">
+              <h2 className="font-semibold text-slate-900 dark:text-black tracking-wide">
+                {details?.title}
+              </h2>
 
-            {/* INPUT SECTION */}
-            {[
-              { name: "Title", content: details.title },
-              { name: "Description", content: details.description },
-              {
-                name: "Detail",
-                content: details.job_description,
-                danger: true,
-              },
-            ].map(({ name, content, danger }, idx) => (
-              <div className="my-3 md:flex" key={idx}>
-                <label className="w-full md:w-1/4 text-slate-900 tracking-wide font-semibold">
-                  {name}
-                </label>
-                {danger ? (
-                  <p
-                    className={`w-full md:w-3/4 text-slate-900 `}
-                    dangerouslySetInnerHTML={{
-                      __html: danger && content?.replace(/"/g, ""),
-                    }}
-                  />
-                ) : (
-                  <p className={`w-full md:w-3/4 text-slate-900 `}>
-                    {content !== "Detail" ? content : null}
-                  </p>
-                )}
-              </div>
-            ))}
+              {/* INPUT SECTION */}
+              {[
+                {
+                  name: "Description",
+                  content: details.description,
+                },
+                {
+                  name: "",
+                  content: {
+                    text: `Timeline: ${details.timeline_days} day(s) -- `,
+                    bold: `Budget: ${details.price} naira`,
+                  },
+                },
+                {
+                  name: "Delivery Detail",
+                  content: details.job_description,
+                  danger: true,
+                },
+              ].map(({ name, content, danger }, idx) => (
+                <div className={`my-3 md:flex items-center`} key={idx}>
+                  <label className="w-full md:w-1/4 text-slate-900 tracking-wide font-semibold">
+                    {name}
+                  </label>
+                  <div
+                    className={`w-full md:w-3/4 text-slate-900 market-pop ${
+                      name !== "Delivery Detail"
+                        ? " h-full max-h-28 flex items-center"
+                        : " overflow-y-auto max-h-[100px]"
+                    }`}
+                  >
+                    {danger ? (
+                      <p
+                        className={``}
+                        dangerouslySetInnerHTML={{
+                          __html: danger && content?.replace(/"/g, ""),
+                        }}
+                      />
+                    ) : (
+                      <p className={`w-full md:w-3/4 text-slate-900`}>
+                        {name !== "Delivery Detail" ? (
+                          <>
+                            {typeof content !== "object" ? content : null}
+                            {typeof content === "object" && (
+                              <span className="flex items-center gap-2">
+                                {content?.text}
+                                <strong>{content?.bold}</strong>
+                              </span>
+                            )}
+                          </>
+                        ) : (
+                          ""
+                        )}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
             <hr />
             <div className="my-3 w-full flex flex-col gap-3">
               <div className="w-full">
@@ -63,36 +187,69 @@ const MarketPopUp = ({ details, onClose, situation }) => {
                   rows="5"
                   style={{ resize: "none" }}
                   placeholder="Enter message here ..."
-                  // value={textArea}
-                  // onChange={handleInputChange}
+                  value={textValue}
+                  onChange={handleInputChange}
                 />
               </div>
-              <button className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white">
-                Send Message
+              <button
+                className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white"
+                name="market-message"
+                onClick={marketCalls}
+              >
+                {marketMsg.loading ? (
+                  <LoadingSpinner size={5} color="white" />
+                ) : !marketMsg.state ? (
+                  "Send Message"
+                ) : (
+                  "Message Sent"
+                )}
               </button>
             </div>
           </div>
 
-          <div className="w-full md:w-1/4 h-full">
-            <div className="w-[90%] mx-auto bg-[#f1f8ff] p-4 rounded-md">
-              <p className="w-full text-slate-900 tracking-wide my-1">
-                Interested in the task?
-              </p>
+          <div className="w-full md:w-1/4 h-full ">
+            <div className="w-[90%] mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[550px] flex flex-col justify-between">
               <div className="w-full flex flex-col justify-center py-4 gap-2">
+                <p className="w-full text-slate-900 tracking-wide my-1">
+                  Interested in the task?
+                </p>
                 <hr />
-                <button className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex flex-col items-center justify-center">
+                <button
+                  className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex flex-col items-center justify-center"
+                  name="market-interest"
+                  onClick={marketCalls}
+                >
                   {" "}
                   <span>Send</span>
                   <span>Interest</span>
                   <span>Request</span>
                 </button>
-                <p>Error - You can not accept your job</p>
-                <p className="mt-2 flex items-center">
-                  Interest: <b className="ml-1">0</b>
+                <>
+                  {manageInt.loading ? (
+                    <p className="text-sm italic">please wait...</p>
+                  ) : (
+                    <>
+                      {manageInt?.msg !== "" && (
+                        <p
+                          className={`text-sm italic ${
+                            manageInt?.state ? "text-green-500" : "text-red-500"
+                          }`}
+                        >
+                          {manageInt?.msg}
+                        </p>
+                      )}
+                    </>
+                  )}
+                </>
+              </div>
+
+              <div className="">
+                <p className="flex items-center tracking-wide">
+                  Interest: <b className="ml-1">{marketInt?.public_view}</b>
                 </p>
                 <hr />
+                <p className="my-1">Expire: {expireIntDate}</p>
               </div>
-              <p className="my-10">Expire: {details.expire}</p>
             </div>
           </div>
           {/* END OF ACTION SECTION */}

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -4,14 +4,18 @@ import Layout from "../Partials/Layout";
 import { useNavigate } from "react-router-dom";
 import ActiveJobMessage from "./ActiveJobMessage";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import CountDown from "../Helpers/CountDown";
+import IndexJobActions from "./JobActions/IndexJobActions";
 
 import usersService from "../../services/UsersService";
 
 function ActiveJobs(props) {
   const ApiCall = new usersService()
+  let navigate = useNavigate()
 
   let { userDetails } = useSelector((state) => state.userDetails);
-  let navigate = useNavigate()
+
+  let [passDue, setPassDue] = useState(new Date() > new Date(props.details?.delivery_date)) // STATE TO KNOW IF TASK IS PASSED DUE TIME
 
   let [messageToSend, setMessageToSend] = useState('') // State to hold the value of message to be sent
 
@@ -145,10 +149,33 @@ function ActiveJobs(props) {
    }
  }
 
+
+  // FUNCTION TO CHECK IF TASK PASS DUE IS REACHED
+  let isPassedDue = () => {
+    // console.log('TESTING',new Date() > new Date(props.details?.delivery_date) )
+    if(new Date() > new Date(props.details?.delivery_date)){
+      setPassDue(true)
+    }else{
+      setPassDue(false)
+    }
+  }
+
+
+  useEffect(()=>{
+    if(!passDue){
+      let passDueInterval = setInterval(()=>{
+        isPassedDue()
+      },1000)
+      return ()=>{
+        clearInterval(passDueInterval)
+      }
+    }
+  },[passDue])
+
   return (
     <Layout>
 
-        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start space-y-4 md:space-x-4 md:space-y-0">
+        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
             {/* job title */}
             <div className="w-full md:w-8/12">
               <div className="w-full flex justify-start space-x-3 items-start">
@@ -172,20 +199,14 @@ function ActiveJobs(props) {
                 </h1>
               </div>
 
-              <div className="w-full my-4">
-                <div className="pb-2 w-full flex items-center">
-                  <p className="w-full lg:w-2/3 text-base text-slate-700 dark:text-black">
-                    {props.details?.contract && props.details.contract}
-                  </p>
-                  <p className="w-full lg:w-1/3 text-base text-sky-blue">
+              <div className="w-full my-2">
+                  <p className="w-full text-base text-right text-sky-blue">
                     {userDetails.firstname && userDetails.firstname}
                   </p>
+                <div className="text-base text-slate-700 dark:text-black tracking-wide">
+                    <p className="font-semibold text-black">Description: </p>
+                    <p className="p-2 border border-sky-blue">{props.details?.description && props.details.description}</p>
                 </div>
-                
-                <p className="text-base text-slate-700 dark:text-black">
-                  <span className="font-semibold">Description: </span>
-                  {props.details?.description && props.details.description}
-                </p>
               </div>
             </div>
             {/* end of job title */}
@@ -193,7 +214,9 @@ function ActiveJobs(props) {
             {/* job details */}
             <div className="w-full md:w-4/12">
               <p className="text-base text-sky-blue">Delivery Detail</p>
-              <div className="mt-2">
+              {passDue ? 
+              (
+                <div className="my-1">
                   <p className="text-base text-slate-700 dark:text-black">
                     <span className="font-semibold">Due: </span>
                     {props.details?.delivery_date &&
@@ -203,9 +226,33 @@ function ActiveJobs(props) {
                     {props.details?.delivery_date &&
                       props.details.delivery_date.split(" ")[1]}
                   </p>
-                  <p className="text-base text-slate-700 dark:text-black">
-                    {props.details?.timeline_days && props.details.timeline_days} day(s)
-                  </p>
+                </div>
+              )
+              :
+              (
+                <div className="my-1 flex items-start gap-3">
+                  <p className="font-semibold">Due: </p>
+                  <div className="flex flex-col justify-between">
+                    <p className="text-base text-slate-700 dark:text-black tracking-wide">
+                      <CountDown lastDate={props.details.delivery_date} />
+                    </p>
+                    <div className="text-base text-slate-700 dark:text-black tracking-wide flex gap-[5px]">
+                      <span>Hrs</span>
+                      <span>Min</span>
+                      <span>Sec</span>
+                    </div>
+                  </div>
+                </div>
+              )
+              }
+
+              <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
+                <span className="font-semibold text-black">Duration: </span>
+                <span className="">{props.details?.timeline_days && props.details.timeline_days} day(s)</span>
+              </div>
+              <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
+                <span className="font-semibold text-black">No: </span>
+                <span className="">{props.details?.contract && props.details.contract}</span>
               </div>
             </div>
             {/* end of job details */}
@@ -215,9 +262,10 @@ function ActiveJobs(props) {
             <div className="w-full lg:w-1/2">
               <div className="">
                 <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
-                <p className="my-3 py-1 text-base">
+                {/* <p className="my-3 py-1 text-base">
                   Waiting for the completion message from the client before you can approve.
-                </p>
+                </p> */}
+                <IndexJobActions details={props.details} />
               </div>
 
               {/* TEXTAREA SECTION */}
@@ -293,24 +341,6 @@ function ActiveJobs(props) {
 
                 {/* Buttons Sections */}
                 <div className="py-2 sm:flex sm:justify-end sm:items-center">
-                  {/* <div className="w-full mb-3 sm:mb-0 sm:w-2/4">
-                    {tab == 'files' && 
-                      (
-                        <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-2/4 flex justify-between items-center space-x-2">
                     <button
                         type="button"

src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function CurrentJobAction() {
+  return (
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Owner True & Active
+      </p>
+    </div>
+  )
+}
+
+export default CurrentJobAction

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function CurrentTaskAction() {
+  return (
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Worker True & Active
+      </p>
+    </div>
+  )
+}
+
+export default CurrentTaskAction

src/components/MyActiveJobs/JobActions/IndexJobActions.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import CurrentJobAction from './CurrentJobAction'
+import CurrentTaskAction from './CurrentTaskAction'
+
+import PastDueJobAction from './PastDueJobAction'
+import PastDueTaskAction from './PastDueTaskAction'
+
+import ReviewJobAction from './ReviewJobAction'
+import ReviewTaskAction from './ReviewTaskAction'
+
+function IndexJobActions({details}) { // FUNCTION TO RENDER SPECIFIC JOB ACTION DEPENDING ON OWNER STATUS & STATUS DESCRIPTION
+    let owner = details.owner_status
+    let description = details.status_description
+    switch(owner) {
+        case 'OWNER':
+            return (()=>{
+                if(description == 'ACTIVE'){
+                    return <CurrentJobAction />
+                }else if(description == 'PASTDUE'){
+                    return <PastDueJobAction />
+                }else if(description == 'REVIEW'){
+                    return <ReviewJobAction />
+                } else {
+                    return null
+                }
+            })()
+        case 'WORKER':
+            return (()=>{
+                if(description == 'ACTIVE'){
+                    return <CurrentTaskAction />
+                }else if(description == 'PASTDUE'){
+                    return <PastDueTaskAction />
+                }else if(description == 'REVIEW'){
+                    return <ReviewTaskAction />
+                } else {
+                    return null
+                }
+            })()
+        default:
+            return null
+    }
+}
+
+export default IndexJobActions

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function PastDueJobAction() {
+  return (
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Owner True & PastDue
+      </p>
+    </div>
+  )
+}
+
+export default PastDueJobAction

src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function PastDueTaskAction() {
+  return (
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Worker True & PastDue
+      </p>
+    </div>
+  )
+}
+
+export default PastDueTaskAction

src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function ReviewJobAction() {
+  return (
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Owner True & Review Job
+      </p>
+    </div>
+  )
+}
+
+export default ReviewJobAction

src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function ReviewTaskAction() {
+  return (
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Worker True & Review Job
+      </p>
+    </div>
+  )
+}
+
+export default ReviewTaskAction

src/components/MyActiveJobs/MyPastDueJobs.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+import MyActiveJobTable from "./MyActiveJobTable";
+
+export default function MyPastDueJobs(props) {
+    const [selectTab, setValue] = useState("today");
+    const filterHandler = (value) => {
+        setValue(value);
+    };
+    console.log("AMEYE LOC1", props.MyJobList);
+    return (
+        <Layout>
+            <CommonHead
+                commonHeadData={props.commonHeadData}
+            />
+            <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"}`}
+                >
+                 Pass Due Job(s)
+                </span>
+                            </h1>
+                        </div>
+                        <div className="slider-btns flex space-x-4">
+                            <div
+                                onClick={() => filterHandler("today")}
+                                className="relative"
+                            ></div>
+                        </div>
+                    </div>
+                    <MyActiveJobTable MyJobList={props.MyJobList} />
+                </div>
+            </div>
+        </Layout>
+    );
+}

src/index.css

@@ -786,13 +786,15 @@ TODO: Responsive ===========================
 }
 
 /* Update table scrollbar */
-.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track{
+.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track,
+.market-pop::-webkit-scrollbar-track{
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
   background-color: transparent;
   border-radius: 10px;
 }
 
-.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar {
+.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar,
+.market-pop::-webkit-scrollbar {
   width: 10px;
   background-color: transparent;
 }
@@ -805,6 +807,15 @@ TODO: Responsive ===========================
   background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
 }
 
+.market-pop::-webkit-scrollbar-thumb {
+  border-radius: 100px;
+  
+  /* background-color: #fafafa; */
+  /* background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); */
+  background: rgb(236,237,241);
+  background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
+}
+
 .input-curve.lg{
   border-radius: 35px !important;
 }

src/services/UsersService.js

@@ -219,6 +219,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
+      job_mode: "ACTIVE",
       limit: 30,
       offset: 0,
       action: 13008,
@@ -244,6 +245,7 @@ class usersService {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
+      job_mode: "ACTIVE",
       page: 0,
       offset: 0,
       limit: 100,
@@ -251,6 +253,18 @@ class usersService {
     return this.postAuxEnd("/jobmanageractive", postData);
   }
 
+  getMyPastDueJobList() {
+    var postData = {
+      uuid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      job_mode: "PASTDUE",
+      page: 0,
+      offset: 0,
+      limit: 100,
+    };
+    return this.postAuxEnd("/jobmanageractive", postData);
+  }
   getMyPendingJobList() {
     var postData = {
       uuid: localStorage.getItem("uid"),
@@ -467,6 +481,31 @@ class usersService {
     return this.postAuxEnd("/accounttypes", postData);
   }
 
+  // Manage Interest
+  MarketInterest(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      msg_type: 'JOB',
+      action: 13033,
+      ...reqData
+    };
+    return this.postAuxEnd("/marketinterest", postData);
+  }
+
+  MarketMessage(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      msg_type: 'JOB',
+      action: 13036,
+      ...reqData
+    };
+    return this.postAuxEnd("/marketmessage", postData);
+  }
+
   // END POINT TO ACCEPT TERMS AND AGREEMENT
   jobManagerAgree() {
     var postData = {

src/views/BlogPage.jsx

@@ -0,0 +1,15 @@
+import React, { useContext, useState, useEffect } from "react";
+import BlogItem from "../components/Blogs";
+
+export default function BlogPage() {
+    const commonHeadData = () => {
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+        return 0;
+    };
+
+    return (
+        <>
+            <BlogItem  commonHeadData={commonHeadData} />
+        </>
+    );
+}

src/views/MyPastDueJobsPage.jsx

@@ -0,0 +1,36 @@
+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";
+
+export default function MyPastDueJobsPage() {
+    const commonHeadData =()=>{
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+        return 0;
+    }
+    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();
+            setMyJobList(res.data);
+        } catch (error) {
+            console.log("Error getting mode");
+        }
+    };
+    useEffect(() => {
+        getMyJobList();
+    }, []);
+
+    // debugger;
+    return (
+        <>
+            <MyPastDueJobs
+                MyJobList={MyJobList}
+                commonHeadData={commonHeadData}
+            />
+        </>
+    );
+}