added job action components

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/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

@@ -11,6 +11,13 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
     data: {},
     state: undefined,
   });
+  const [manageInt, setManageInt] = useState({
+    loading: false,
+    data: {},
+    state: undefined,
+    msg: "",
+  });
+
   const [textValue, setTextValue] = useState("");
 
   const handleInputChange = ({ target: { value } }) => {
@@ -21,21 +28,21 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
   const marketCalls = useCallback(
     async (e) => {
-      let nameOfCall = e?.target?.name;
-      let { offer_code } = details;
-      let reqData = { offer_code };
-
       try {
+        const nameOfCall = e?.target?.name;
+        const { offer_code } = details;
+        const reqData = { offer_code };
+
         if (nameOfCall === "market-message") {
-          // To manage the manage msg data
           setMarketMsg({ loading: true });
-          reqData = { yourmessage: textValue, ...reqData };
+          if (!textValue) return;
+
+          reqData.yourmessage = textValue;
 
           const marketMessage = await apiCall.MarketMessage(reqData);
-          const marketMessageRes = await marketMessage?.data;
+          const marketMessageRes = marketMessage?.data;
 
           if (marketMessageRes?.internal_return < 0) {
-            setMarketMsg({ loading: false });
             toast.warn("Something wrong happened", {
               autoClose: 2000,
               hideProgressBar: true,
@@ -48,73 +55,127 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             autoClose: 2500,
             hideProgressBar: true,
           });
-          // To manage the manage msg data
+
           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(() => {
-          onClose();
           setTextValue("");
           setMarketMsg({ loading: false });
         }, 2000);
       }
     },
-    [apiCall, details, onClose, setMarketMsg, textValue]
+    [apiCall, details, onClose, textValue]
   );
 
+  console.log('Checking my mangeInt',manageInt)
+
   // let addedIntDate = marketInt?.added?.split(" ")[0];
   let expireIntDate = marketInt?.expire?.split(" ")[0];
 
   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">
@@ -146,26 +207,49 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             </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 - {marketInt?.status}</p>
-                <p className="mt-2 flex items-center">
+                <>
+                  {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: {expireIntDate}</p>
             </div>
           </div>
           {/* END OF ACTION SECTION */}

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -4,16 +4,17 @@ 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 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
 
@@ -147,10 +148,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 gap-8">
+        <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">
@@ -175,9 +199,9 @@ function ActiveJobs(props) {
               </div>
 
               <div className="w-full my-2">
-                <p className="w-full text-base text-right text-sky-blue">
-                  {userDetails.firstname && userDetails.firstname}
-                </p>
+                  <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>
@@ -189,19 +213,37 @@ 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="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} />
+              {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 &&
+                      props.details.delivery_date.split(" ")[0]}
                   </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>
+                  <p className="py-2 text-base text-slate-700 dark:text-black">
+                    {props.details?.delivery_date &&
+                      props.details.delivery_date.split(" ")[1]}
+                  </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>
+              )
+              }
 
               <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>

src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function CurrentJobAction() {
+  return (
+    <div>CurrentJobAction</div>
+  )
+}
+
+export default CurrentJobAction

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function CurrentTaskAction() {
+  return (
+    <div>CurrentTaskAction</div>
+  )
+}
+
+export default CurrentTaskAction

src/components/MyActiveJobs/JobActions/PassDueJobAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function PassDueJobAction() {
+  return (
+    <div>PassDueJobAction</div>
+  )
+}
+
+export default PassDueJobAction

src/components/MyActiveJobs/JobActions/PassDueTaskAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function PassDueTaskAction() {
+  return (
+    <div>PassDueTaskAction</div>
+  )
+}
+
+export default PassDueTaskAction

src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ReviewJobAction() {
+  return (
+    <div>ReviewJobAction</div>
+  )
+}
+
+export default ReviewJobAction

src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ReviewTaskAction() {
+  return (
+    <div>ReviewTaskAction</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"),

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}
+            />
+        </>
+    );
+}