delete and edit icon seperator width reduced

.env

@@ -17,7 +17,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api
 
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
-REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_MINUTES=600000
 REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 

.env.development

@@ -17,7 +17,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api
 
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
-REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_MINUTES=600000
 REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 

.env.production

@@ -17,7 +17,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api
 
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
-REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_MINUTES=600000
 REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 

src/Routers.jsx

@@ -45,6 +45,7 @@ import BlogPage from "./views/BlogPage";
 import MyReviewDueJobsPage from "./views/MyReviewDueJobsPage";
 import OffersInterestPage from "./views/OffersInterestPage";
 import ManageInterestOfferPage from './views/ManageInterestOfferPage'
+import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
 
 export default function Routers() {
   return (
@@ -89,10 +90,11 @@ export default function Routers() {
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
-          <Route exact path="/add-job" element={<AddJobPage />} />
+          {/* <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="/pend-interest"  element={<MyWaitingJobsPage />} />
           <Route exact path="/my-review-jobs"  element={<MyReviewDueJobsPage />} />
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <Route exact path="/manage-family"  element={<FamilyManagePage />} />

src/assets/images/icon-delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" id="delete"><g color="#000"><path fill="#ee4c45" style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;white-space:normal;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M12 1028.362c-6.626 0-12 5.374-12 12s5.374 12 12 12 12-5.374 12-12-5.374-12-12-12z" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -1028.362)"></path><path fill="#fff" style="isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M10.5 1034.362v1h-3v1h9v-1h-3v-1h-3zm-2 3v9h7v-9h-7zm1 1h1v7h-1v-7zm2 0h1v7h-1v-7zm2 0h1v7h-1v-7z" overflow="visible" transform="translate(0 -1028.362)"></path></g></svg>

src/assets/images/icon-edit.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 60 60" viewBox="0 0 60 60" id="edit"><path fill="#3B4652" d="M52.9687347,19.3099976l-2.7999878-2.7999878c-0.9099731-0.9100342-2.3899536-0.9100342-3.2999878,0
+		l-1.4129639,1.4129639c0.0185547,0.017395,0.0423584,0.0234985,0.0601196,0.0422974l5.7765503,6.1199341
+		c0.0361328,0.038269,0.0506592,0.0881348,0.0813599,0.1296997l1.5949097-1.5949097
+		C53.8787689,21.7099609,53.8787689,20.2199707,52.9687347,19.3099976z"></path><path fill="#2B79C2" d="M10.8887787,25.5499878H34.998764l7.5900269-7.5900269l1.7599487-1.75V9c0-1.6500244-1.3499756-3-3-3h-32
+		c-1.6599731,0-3,1.3499756-3,3v42c0,1.6499634,1.3400269,3,3,3h32c1.6500244,0,3-1.3500366,3-3V34.0700073l-5.8899536,5.8800049
+		c-0.3099976,0.3199463-0.7000122,0.5599976-1.1199951,0.7099609l-7.2200317,2.5200195
+		c-0.3099976,0.1099854-0.6500244,0.1699829-0.9899902,0.1699829c-0.7800293,0-1.5200195-0.2999878-2.0900269-0.8399658
+		c-0.3399658-0.3400269-0.5799561-0.7400513-0.7299805-1.1600342H10.8887787c-0.5599976,0-1-0.4500122-1-1s0.4400024-1,1-1
+		h15.4199829v-0.0100098l1.7000122-4.8899536H10.8887787c-0.5599976,0-1-0.4500122-1-1c0-0.5500488,0.4400024-1,1-1H28.708786
+		l0.0999756-0.3000488c0.1699829-0.4699707,0.4400024-0.8800049,0.789978-1.1900024l3.4000244-3.4099731H10.8887787
+		c-0.5599976,0-1-0.4500122-1-1S10.3287811,25.5499878,10.8887787,25.5499878z M10.8887787,46.25h24.9099731
+		c0.5599976,0,1,0.4500122,1,1s-0.4400024,1-1,1H10.8887787c-0.5599976,0-1-0.4500122-1-1S10.3287811,46.25,10.8887787,46.25z
+		 M10.8887787,11.75h24.9099731c0.5599976,0,1,0.4500122,1,1s-0.4400024,1-1,1H10.8887787c-0.5599976,0-1-0.4500122-1-1
+		S10.3287811,11.75,10.8887787,11.75z M10.8887787,18.6499634h24.9099731c0.5599976,0,1,0.4500122,1,1c0,0.5500488-0.4400024,1-1,1
+		H10.8887787c-0.5599976,0-1-0.4499512-1-1C9.8887787,19.0999756,10.3287811,18.6499634,10.8887787,18.6499634z"></path><path fill="#3B4652" d="M30.9387665,32.4400024c-0.1099854,0.0999756-0.1900024,0.2299805-0.2399902,0.3699951
+		l-2.5100098,7.2099609c-0.1300049,0.3600464-0.039978,0.7700195,0.2299805,1.0400391
+		c0.2000122,0.1900024,0.4500122,0.289978,0.710022,0.289978c0.1099854,0,0.2199707-0.0200195,0.3300171-0.0599976
+		l7.2099609-2.5100098c0.1400146-0.0499878,0.2700195-0.1300049,0.3800049-0.2399902l12.5599976-12.5599976l-5.9299927-6.2799683
+		L30.9387665,32.4400024z"></path></svg>

src/components/AddJob/AddJob.jsx

@@ -1,21 +1,26 @@
-import React, { useState, useEffect } from "react";
+import { Field, Form, Formik } from "formik";
-import { Link } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import * as Yup from "yup";
+import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import usersService from "../../services/UsersService";
-import { useSelector, useDispatch } from "react-redux";
-import { tableReload } from "../../store/TableReloads";
-import { Field, Form, Formik } from "formik";
-import * as Yup from "yup";
 
 const validationSchema = Yup.object().shape({
   country: Yup.string()
     .min(1, "Minimum 3 characters")
     .max(25, "Maximum 25 characters")
     .required("Country is required"),
-  price: Yup.number()
+  price: Yup.string()
-    .typeError("you must specify a number")
+    .typeError("Invalid number")
     .min(1, "Price must be greater than 0")
+    .test("no-e", "Invalid number", (value) => {
+      if (value && /\d+e/.test(value)) {
+        return false;
+      }
+      return true;
+    })
     .required("Price is required"),
   title: Yup.string()
     .min(3, "Minimum 3 characters")
@@ -38,19 +43,18 @@ const validationSchema = Yup.object().shape({
 
 function AddJob({ popUpHandler, categories }) {
   const ApiCall = new usersService();
+
   let dispatch = useDispatch();
 
-  let { userDetails } = useSelector((state) => state.userDetails);
+  let [currency, setCurrency] = useState({
-
-  let [country, setCountry] = useState({
     loading: true,
     status: false,
-    data: [],
+    data: null,
-  }); // To Hold the array of country getUserCountry returns
+  }); // To Hold the array of currency getUserCurrency returns
 
   let initialValues = {
     // initial values for formik
-    country: userDetails.country,
+    country: "",
     price: "",
     title: "",
     description: "",
@@ -65,31 +69,42 @@ function AddJob({ popUpHandler, categories }) {
     message: "",
   }); // Holds state when submit button is pressed
 
-  // FUNCTION TO GET COUNTRY
+  // FUNCTION TO GET Currency
-  const getUserCountry = () => {
+  const getUserCurrency = () => {
-    setCountry((prev) => ({ ...prev, loading: true }));
+    setCurrency((prev) => ({ ...prev, loading: true }));
-    ApiCall.getSignupCountryData()
+    ApiCall.getUserWallets()
       .then((res) => {
-        if (res.data.internal_return < 1) {
+        if (res.data.internal_return < 0) {
-          setCountry({ loading: false, status: true, data: [] });
+          setCurrency({ loading: false, status: true, data: [] });
           return;
         }
-        setCountry({
+        console.log("Res for currency >> ", res);
+
+        setCurrency({
           loading: false,
           status: true,
-          data: res.data.signup_country,
+          data: res.data.result_list,
         });
       })
       .catch((err) => {
-        setCountry({ loading: false, status: false, data: [] });
+        setCurrency({ loading: false, status: false, data: [] });
       });
   };
 
   // FUNCTION TO HANDLE ADD JOB FORM
   const handleAddJob = (values, helpers) => {
-    values.category = values.category?.join("@");
+    let reqData = {
+      country: values?.country,
+      price: Number(values.price) * 100,
+      title: values?.title,
+      description: values?.description,
+      job_detail: values?.job_detail,
+      timeline_days: values?.timeline_days,
+      category: values.category?.join("@"),
+    };
+
     setRequestStatus({ loading: true, status: false, message: "" });
-    ApiCall.jobManagerCreateJob(values)
+    ApiCall.jobManagerCreateJob(reqData)
       .then((res) => {
         if (res.data.internal_return < 1) {
           setRequestStatus({
@@ -97,6 +112,9 @@ function AddJob({ popUpHandler, categories }) {
             status: false,
             message: "Could not complete your request at the moment",
           });
+          setTimeout(() => {
+            popUpHandler();
+          }, 1500);
           return;
         }
         setRequestStatus({
@@ -113,7 +131,7 @@ function AddJob({ popUpHandler, categories }) {
         setRequestStatus({
           loading: false,
           status: false,
-          message: "Opps! soemthing went wrong. Try Again",
+          message: "Opps! something went wrong. Try Again",
         });
       })
       .finally(() => {
@@ -124,10 +142,9 @@ function AddJob({ popUpHandler, categories }) {
   };
 
   useEffect(() => {
-    getUserCountry();
+    getUserCurrency();
   }, []);
 
-
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
       <Formik
@@ -141,46 +158,44 @@ function AddJob({ popUpHandler, categories }) {
               <div className="flex flex-col-reverse sm:flex-row">
                 <div className="fields w-full">
                   {/* inputs starts here */}
-                  {/* country */}
                   <div className="xl:flex xl:space-x-7 mb-[5px]">
                     <div className="field w-full mb-6 xl:mb-0">
                       <label
                         htmlFor="country"
                         className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
                       >
-                        Country
+                        Currency
                       </label>
                       <select
                         id="country"
                         name="country"
-                        disabled
                         value={props.values.country}
-                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                          props.errors.country && props.touched.country
+                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                        }`}
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
                       >
-                        {country.loading ? (
+                        {currency.loading ? (
                           <option className="text-slate-500 text-lg" value="">
                             Loading...
                           </option>
-                        ) : country.data.length ? (
+                        ) : currency.data.length ? (
                           <>
                             <option className="text-slate-500 text-lg" value="">
-                              Select...
+                              Select a currency
                             </option>
-                            {country.data.map((item, index) => {
+                            {currency.data?.map((item, index) => (
-                              if (item[0] == userDetails.country) {
+                              <option
-                                return (
+                                key={index}
-                                  <option
+                                className="text-slate-500 text-lg"
-                                    key={index}
+                                value={item?.country}
-                                    className="text-slate-500 text-lg"
+                              >
-                                    value={item[0]}
+                                {item?.description}
-                                  >
+                              </option>
-                                    {item[1]}
+                            ))}
-                                  </option>
-                                );
-                              }
-                            })}
                           </>
                         ) : (
                           <option className="text-slate-500 text-lg" value="">
@@ -237,7 +252,9 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      errorBorder={props.errors.description && props.touched.description}
+                      errorBorder={
+                        props.errors.description && props.touched.description
+                      }
                     />
                   </div>
 
@@ -253,7 +270,11 @@ function AddJob({ popUpHandler, categories }) {
                       <textarea
                         id="Job Delivery Details"
                         rows="5"
-                        className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] border border-[#dce4e9] rounded-[10px]`}
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                          props.errors.job_detail && props.touched.job_detail
+                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                        } rounded-[10px]`}
                         style={{ resize: "none" }}
                         name="job_detail"
                         value={props.values.job_detail}
@@ -275,8 +296,11 @@ function AddJob({ popUpHandler, categories }) {
                         role="group"
                         aria-labelledby="checked-group"
                       >
-                        {Object.entries(categories).map(([key, value]) => (
+                        {Object?.entries(categories).map(([key, value]) => (
-                          <label key={key} className="flex gap-1 w-full items-center">
+                          <label
+                            key={key}
+                            className="flex gap-1 w-full items-center"
+                          >
                             <Field
                               type="checkbox"
                               name="category"
@@ -285,16 +309,13 @@ function AddJob({ popUpHandler, categories }) {
                             <span className="text-[13.975px]">{value}</span>
                           </label>
                         ))}
+                        <span className="h-5 text-sm italic text-[#cf3917]">
+                          {props.errors.category &&
+                            props.touched.category &&
+                            "please select a category"}
+                        </span>
                       </div>
                     </div>
-
-                    {/* <div className={`${!props.errors && "invisible"} h-5`}>
-                      {props.errors.job_detail && props.touched.job_detail && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.job_detail}
-                        </p>
-                      )}
-                    </div> */}
                   </div>
 
                   <div className="field w-full mb-[5px]">
@@ -313,7 +334,12 @@ function AddJob({ popUpHandler, categories }) {
                     <Field
                       component="select"
                       name="timeline_days"
-                      className="input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none"
+                      className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                        props.errors.timeline_days &&
+                        props.touched.timeline_days
+                          ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                          : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                      }`}
                       value={props.values.timeline_days}
                     >
                       <option value="">Select Duration</option>
@@ -354,8 +380,8 @@ function AddJob({ popUpHandler, categories }) {
 
                 <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                   <div className="flex items-center space-x-4 mr-9">
-                    <Link
+                    <button
-                      to="/myjobs"
+                      type="button"
                       className="text-18 text-light-red tracking-wide "
                     >
                       <span
@@ -365,7 +391,7 @@ function AddJob({ popUpHandler, categories }) {
                         {" "}
                         Cancel
                       </span>
-                    </Link>
+                    </button>
 
                     {requestStatus.loading ? (
                       <LoadingSpinner size="8" color="sky-blue" />
@@ -403,3 +429,10 @@ const publicArray = [
   { duration: 21, name: "3 weeks" },
   { duration: 28, name: "4 weeks" },
 ];
+
+// .test("no-e", "Invalid number", (value) => {
+//   if (value && /\d+e/.test(value)) {
+//     return false;
+//   }
+//   return true;
+// })

src/components/AuthPages/Login/index.jsx

@@ -152,8 +152,6 @@ export default function Login() {
     );
   }, []);
 
-  console.log("Looking for the cookies >>", selectedLoginType)
-
   useEffect(() => {
     setMail("");
     setPassword("");

src/components/AuthPages/SignUp/index.jsx

@@ -80,7 +80,7 @@ export default function SignUp() {
 
         if (res.status === 200) {
           const { data } = res;
-          if (data.status === -1 && data.acc === "DULPICATE") {
+          if (data && data.acc === "DULPICATE") {
             setMsgError("This account has been already created");
             setSignUpLoading(false);
           }
@@ -108,7 +108,7 @@ export default function SignUp() {
 
   useEffect(() => {
     getCountryList();
-  });
+  }, []);
 
   return (
     <>

src/components/Cards/AvailableJobsCard.jsx

@@ -13,38 +13,14 @@ export default function AvailableJobsCard({
 }) {
   //debugger;
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
-  const [manageInt, setManageInt] = useState(null);
   const [imageUrl, setImageUrl] = useState("");
 
-  const navigate = useNavigate();
-  const apiCall = useMemo(() => new usersService(), []);
-
-  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);
-    }
-  }, [apiCall, datas]);
-
   let thePrice = PriceFormatter(  
     datas?.price * 0.01,
     datas?.currency_code,
     datas?.currency
   );
 
-  useEffect(() => {
-    if (!datas) {
-      navigate("/market", { replace: true });
-    }
-    marketInterestData();
-  }, []);
-
   useEffect(() => {
     const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
     setImageUrl(imagePath);
@@ -227,7 +203,6 @@ export default function AvailableJobsCard({
             setMarketPopUp({ show: false, data: {} });
           }}
           situation={marketPopUp.show}
-          marketInt={manageInt}
         />
       )}
     </>

src/components/Cards/HomeBannerOffersCard.jsx

@@ -23,20 +23,20 @@ export default function HomeBannerOffersCard(props) {
       }}
     >
       <div className="flex flex-col justify-between h-full">
-        <div className="content flex justify-between items-center mb-5">
+        <div className="content flex justify-between items-center">
           <div className="siderCardHeader">
             <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
               <span className="heroSilderTitle">{props.itemData.title}</span>
             </h1>
           </div>
         </div>
-        <div className="h-[233px]">
+        <div className="flex flex-col justify-around items-center flex-1">
           <div className="siderCardDescription">
             {props.itemData.description}
           </div>
-          <div className="siderCardButton">
+          <button className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
-            [ {props.itemData.button_text} ]
+             {props.itemData.button_text}
-          </div>
+          </button>
         </div>
       </div>
     </Link>

src/components/Helpers/CountDown.jsx

@@ -1,59 +1,64 @@
-/* eslint-disable no-underscore-dangle */
+import { useEffect, useState } from "react";
-import React, { useEffect, useState } from "react";
 
 function CountDown({ lastDate = "" }) {
-  //   const [showDate, setDate] = useState(0);
+  // State to store the countdown values
-  const [showHour, setHour] = useState(0);
+  const [countdownValues, setCountdownValues] = useState({
-  const [showMinute, setMinute] = useState(0);
+    showHour: 0,
-  const [showSecound, setDateSecound] = useState(0);
+    showMinute: 0,
-  // count Down
+    showSecond: 0,
-  const provideDate = new Date(lastDate);
-  // format date
-  const year = provideDate.getFullYear();
-  const month = provideDate.getMonth();
-  //   console.log(month);
-  const date = provideDate.getDate();
-  //   console.log(date);
-  const hours = provideDate.getHours();
-  //   console.log(hours);
-  const minutes = provideDate.getMinutes();
-  //   console.log(minutes);
-  const seconds = provideDate.getSeconds();
-  //   console.log(seconds);
-
-  // date calculation logic
-  const _seconds = 1000;
-  const _minutes = _seconds * 60;
-  const _hours = _minutes * 60;
-  const _date = _hours * 24;
-
-  // interval function
-  const startInterval = () => {
-    const timer = setInterval(() => {
-      const now = new Date();
-      const distance =
-        new Date(year, month, date, hours, minutes, seconds).getTime() -
-        now.getTime();
-      if (distance < 0) {
-        clearInterval(timer);
-        return;
-      }
-      //   setDate(Math.floor(distance / _date));
-      setMinute(Math.floor((distance % _hours) / _minutes));
-      setHour(Math.floor((distance % _date) / _hours));
-      setDateSecound(Math.floor((distance % _minutes) / _seconds));
-    }, 1000);
-  };
-
-  // effect
-  useEffect(() => {
-    if (lastDate !== "") {
-      startInterval();
-    }
   });
+
+  useEffect(() => {
+    if (lastDate) {
+      // Interval function to update countdown values
+      const intervalId = setInterval(() => {
+        const now = new Date().getTime();
+        const targetDate = new Date(lastDate).getTime();
+        const distance = targetDate - now;
+
+        if (distance < 0) {
+          // If the countdown has reached zero or gone past the target date, clear the interval
+          clearInterval(intervalId);
+          setCountdownValues({
+            showHour: 0,
+            showMinute: 0,
+            showSecond: 0,
+          });
+          return;
+        }
+
+        // Calculate the countdown values (days, hours, minutes, seconds)
+        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+        const hours = Math.floor(
+          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+        );
+        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+        // since we don't have a slot for days...
+        const totalHours = days * 24 + hours;
+
+        // Update the countdown values in the state
+        setCountdownValues({
+          showHour: totalHours,
+          showMinute: minutes,
+          showSecond: seconds,
+        });
+      }, 1000);
+
+      // Clean up the interval on component unmount or when the lastDate prop changes
+      return () => clearInterval(intervalId);
+    }
+  }, [lastDate]);
+
+  // Destructure the countdown values from the state
+  const { showHour, showMinute, showSecond } = countdownValues;
+
   return (
     <span>
-      {showHour} : {showMinute} : {showSecound}
+      {showHour < 10 ? "0" + showHour : showHour} :{" "}
+      {showMinute < 10 ? "0" + showMinute : showMinute} :{" "}
+      {showSecond < 10 ? "0" + showSecond : showSecond}
     </span>
   );
 }

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
-import Icons from "../../Icons";
 import { Link } from "react-router-dom";
+import Icons from "../../Icons";
 
 export default function InputCom({
   label,
@@ -22,7 +22,7 @@ export default function InputCom({
   spanTag,
   inputBg,
   direction,
-  errorBorder
+  errorBorder,
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -41,8 +41,8 @@ export default function InputCom({
   // for Patterns
   const inputPatterns = () => {
     const inputConfig = inputConfigs[inputRef?.current?.name]?.pattern;
-    return inputConfig || ""
+    return inputConfig || "";
-  }
+  };
   return (
     <div className={`input-com ${parentClass}`}>
       <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
@@ -52,16 +52,16 @@ export default function InputCom({
             htmlFor={name}
           >
             {label}
-            {spanTag && 
+            {spanTag && spanTag == "*" ? (
-              spanTag == '*' ?
               <span className="text-red-700 text-sm tracking-wide">
-                {' '}{spanTag}
+                {" "}
+                {spanTag}
               </span>
-              :
+            ) : (
               <span className="text-green-700 text-sm tracking-wide">
                 {spanTag}
               </span>
-            }
+            )}
           </label>
         )}
         {forgotPassword && (
@@ -74,7 +74,11 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper border ${errorBorder ? "border-red-500 border-[0.5px] animate-shake" : "border border-[#f5f8fa] dark:border-[#5e6278]"} w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
+        className={`input-wrapper border ${
+          errorBorder
+            ? "border-[#ff0a0a63] border-[0.5px] shadow-red-500 animate-shake"
+            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+        } w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
       >
         <input
           placeholder={placeholder}
@@ -96,11 +100,9 @@ export default function InputCom({
         />
         {iconName && (
           <div className="absolute right-6 bottom-[10px] z-10 flex gap-2">
-            {
+            {iconName.split(" ").map((item, index) => (
-              iconName.split(' ').map((item, index)=>(
+              <Icons key={index} name={item} />
-                <Icons key={index} name={item} />
+            ))}
-              ))
-            }
           </div>
         )}
         {passIcon && (
@@ -126,6 +128,7 @@ const inputConfigs = {
   province: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
   city: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
   amount: { minLength: 1, maxLength: 9, pattern: "[0-9]+" },
+  description: { minLength: 5, maxLength: 250 },
 };
 
 /* Numbers Only: <input type="text" pattern="[0-9]*" /> strictly numbers

src/components/MarketPlace/PopUp/Detail.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+function Detail({label, value, bg,}) {
+  return (
+    <>
+        <label className='w-full md:w-1/4 text-slate-900 tracking-wide font-semibold'>{label}</label>
+        <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 ${bg ? bg : null}`}>{value}</p>
+    </>
+  )
+}
+
+export default Detail

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -1,23 +1,98 @@
-import React, { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, 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";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
-  const [marketMsg, setMarketMsg] = useState({
+  const MarketCalls = (details) => {
-    loading: false,
+    const [marketMsg, setMarketMsg] = useState({
-    data: {},
+      loading: false,
-    state: undefined,
+      data: {},
-  });
+      state: undefined,
-  const [manageInt, setManageInt] = useState({
+    });
-    loading: false,
+    const [manageInt, setManageInt] = useState({
-    data: {},
+      loading: false,
-    state: undefined,
+      data: {},
-    msg: "",
+      state: undefined,
-  });
+      msg: "",
+    });
+
+    const { offer_code } = details;
+    const reqData = { offer_code };
+
+    const MarketDetail = async () => {
+      try {
+        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);
+      } catch (error) {
+        throw new Error(error);
+      } finally {
+        setTimeout(() => {
+          setTextValue("");
+          setMarketMsg({ loading: false });
+        }, 2000);
+      }
+    };
+
+    const ManageInterest = async () => {
+      try {
+        setManageInt({ loading: true });
+
+        const manageInt = await apiCall.MarketInterest(reqData);
+        const manageIntRes = manageInt?.data;
+
+        if (manageIntRes?.internal_return < 0) {
+          setManageInt({
+            loading: false,
+            msg: manageIntRes?.status,
+            data: manageIntRes,
+            state: false,
+          });
+        } else {
+          setManageInt({
+            loading: false,
+            msg: manageIntRes?.status,
+            data: manageIntRes,
+            state: true,
+          });
+        }
+
+        setTimeout(() => setManageInt({ msg: "" }), 3000);
+      } catch (error) {
+        throw new Error(error);
+      }
+    };
+
+    // useEffect(() => {
+    //   ManageInterest();
+    // }, []);
+
+    return { MarketDetail, ManageInterest, manageInt, marketMsg };
+  };
 
   const [textValue, setTextValue] = useState("");
 
@@ -27,75 +102,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
   const apiCall = useMemo(() => new usersService(), []);
 
-  const marketCalls = useCallback(
+  let { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(details);
-    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]
-  );
 
   let thePrice = PriceFormatter(
     details?.price * 0.01,
@@ -104,7 +111,20 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
   );
 
   // let addedIntDate = marketInt?.added?.split(" ")[0];
-  let expireIntDate = marketInt?.expire?.split(" ")[0];
+  // let expireIntDate = marketInt?.expire?.split(" ")[0];
+
+  let cleanedText = details?.job_description
+    ?.replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&amp;/g, "&");
+
+  console.log("first wait", {
+    manageInt,
+    ManageInterest,
+    MarketDetail,
+    marketMsg,
+  });
 
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
@@ -138,7 +158,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 },
                 {
                   name: "Delivery Detail",
-                  content: details.job_description,
+                  content: cleanedText,
                   danger: true,
                 },
               ].map(({ name, content, danger }, idx) => (
@@ -157,7 +177,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                       <p
                         className={``}
                         dangerouslySetInnerHTML={{
-                          __html: danger && content?.replace(/"/g, ""),
+                          __html: danger && content,
                         }}
                       />
                     ) : (
@@ -203,7 +223,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
               <button
                 className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white"
                 name="market-message"
-                onClick={marketCalls}
+                onClick={MarketDetail}
               >
                 {marketMsg.loading ? (
                   <LoadingSpinner size={5} color="white" />
@@ -226,7 +246,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 <button
                   className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex sm:flex-col flex-row sm:gap-0 gap-1 items-center justify-center"
                   name="market-interest"
-                  onClick={marketCalls}
+                  onClick={ManageInterest}
                 >
                   {" "}
                   <span>Send</span>
@@ -257,7 +277,9 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   Interest: <b className="ml-1">{details.interest_count}</b>
                 </p>
                 <hr />
-                <p className="my-1">Expire: {expireIntDate}</p>
+                <p className="my-1">
+                  Expire: {details.expire}
+                </p>
               </div>
             </div>
             <button

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -248,6 +248,8 @@ function ActiveJobs(props) {
     }
   }, [passDue]);
 
+  console.log("AC JOBS >>", props);
+
   return (
     <Layout>
       <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
@@ -278,12 +280,14 @@ function ActiveJobs(props) {
 
           <div className="w-full my-2">
             <p className="w-full text-base text-right text-sky-blue">
-              {props.details.job_to && props.details.job_to}
+              {props?.details && props.details.job_to}
             </p>
             <div className="text-base text-slate-700 dark:text-white tracking-wide">
-              <p className="font-semibold text-black dark:text-white">Description: </p>
+              <p className="font-semibold text-black dark:text-white">
+                Description:{" "}
+              </p>
               <p className="p-2 border border-sky-blue">
-                {props.details?.description && props.details.description}
+                {props?.details && props.details.description}
               </p>
             </div>
           </div>
@@ -297,11 +301,10 @@ function ActiveJobs(props) {
             <div className="my-1">
               <p className="text-base text-slate-700">
                 <span className="font-semibold">Due: </span>
-                {props.details?.delivery_date &&
+                {props?.details && props.details.delivery_date.split(" ")[0]}
-                  props.details.delivery_date.split(" ")[0]}
               </p>
               <p className="py-2 text-base text-slate-700">
-                {props.details?.delivery_date &&
+                {props?.delivery_date &&
                   props.details.delivery_date.split(" ")[1]}
               </p>
             </div>
@@ -310,7 +313,9 @@ function ActiveJobs(props) {
               <p className="font-semibold">Due: </p>
               <div className="flex flex-col justify-between">
                 <p className="text-base text-slate-700 tracking-wide">
-                  <CountDown lastDate={props.details.delivery_date} />
+                  <CountDown
+                    lastDate={props?.details && props.details.delivery_date}
+                  />
                 </p>
                 <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
                   <span>Hrs</span>
@@ -322,14 +327,18 @@ function ActiveJobs(props) {
           )}
 
           <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
-            <span className="font-semibold text-black dark:text-white">Duration: </span>
+            <span className="font-semibold text-black dark:text-white">
+              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 tracking-wide flex items-center gap-3">
-            <span className="font-semibold text-black dark:text-white">No: </span>
+            <span className="font-semibold text-black dark:text-white">
+              No:{" "}
+            </span>
             <span className="">
               {props.details?.contract && props.details.contract}
             </span>

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -79,7 +79,7 @@ function CurrentTaskAction({jobDetails}) {
               <tr>
                   <td>
                       <div className="flex justify-center items-center">
-                          <button onClick={popUpHandler} type="button" className="w-120 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                          <button onClick={popUpHandler} type="button" className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
                               Send of Review
                           </button>
                       </div>

src/components/MyActiveJobs/JobActions/IndexJobActions.jsx

@@ -10,8 +10,8 @@ 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 owner = details?.owner_status
-    let description = details.status_description
+    let description = details?.status_description
     switch(owner) {
         case 'OWNER':
             return (()=>{

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -119,7 +119,7 @@ function PastDueJobAction({jobDetails}) {
             <tr>
                 <td>
                     <div className="flex justify-center items-center">
-                        <button type="button" onClick={popUpHandler} className="w-120 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                        <button type="button" onClick={popUpHandler} className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
                             Cancel or Extend Timeline
                         </button>
                     </div>

src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx

@@ -20,7 +20,7 @@ function PastDueTaskAction() {
             <tr>
                 <td>
                     <div className="flex justify-center items-center">
-                        <button type="button" className="w-120 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                        <button type="button" className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
                             Request Extension
                         </button>
                     </div>

src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx

@@ -108,7 +108,7 @@ function ReviewJobAction({jobDetails}) {
               <tr>
                   <td>
                       <div className="flex justify-center items-center">
-                          <button  type="button" onClick={popUpHandler} className="w-120 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                          <button  type="button" onClick={popUpHandler} className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
                              Reject or Accept
                           </button>
                       </div>

src/components/MyActiveJobs/index.jsx

@@ -10,6 +10,7 @@ export default function MyActiveJobs(props) {
     setValue(value);
   };
   console.log("AMEYE LOC1", props.MyJobList);
+  
   return (
     <Layout>
       <CommonHead commonHeadData={props.commonHeadData} />

src/components/MyJobs/MyJobTable.jsx

@@ -11,6 +11,9 @@ import PaginatedList from "../Pagination/PaginatedList";
 import EditJobPopOut from "../jobPopout/EditJobPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
+import EditIcon from '../../assets/images/icon-edit.svg'
+import DeleteIcon from '../../assets/images/icon-delete.svg'
+
 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   // Getting the categories
   const currentJobCart = MyJobList?.data?.categories;
@@ -132,10 +135,10 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
               </div>
             </div>
 
-            <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">
+            <div className="h-[33px] w-[150px] flex flex-nowrap items-center self-end">
               <button
                 type="button"
-                className="p-2 w-[60px] h-11"
+                className="p-1 border-2 border-red-400 rounded-md"
                 onClick={() => {
                   setDeleteJobPopout({
                     show: true,
@@ -143,12 +146,12 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                   });
                 }}
               >
-                [Delete]
+                <img className="w-[21px] h-[21px]" src={DeleteIcon} alt='delete-icon' />
               </button>
-              <span>|</span>
+              <div className="mx-[4px] h-full w-[1px] bg-black dark:bg-dark-gray"></div>
               <button
                 type="button"
-                className="p-2 w-[40px] h-11"
+                className="p-1 border-2 border-sky-blue rounded-md flex items-center"
                 onClick={() => {
                   setEditJob({
                     show: true,
@@ -156,7 +159,8 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                   });
                 }}
               >
-                Edit
+                <img className="w-[21px] h-[21px]" src={EditIcon} alt='edit-icon' />
+                <span className="text-sm text-sky-blue">Edit</span>
               </button>
             </div>
           </div>
@@ -186,7 +190,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       <div className="header w-full flex justify-between items-center mb-5">
         <div className="flex space-x-2 items-center">
           <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-            All Jobs
+            {filterCategories[selectedCategory]} Jobs
           </h1>
         </div>  
         <SelectBox

src/components/MyJobs/index.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
@@ -7,13 +7,25 @@ import AddJobPage from "../../views/AddJobPage";
 
 export default function MyJobs(props) {
   let { state } = useLocation();
-  const [popUp, setPopUp] = useState(state?.popup ? true : false);
+  const navigate = useNavigate();
+  const [popUp, setPopUp] = useState(false);
   const popUpHandler = () => {
     setPopUp((prev) => !prev);
+
+    if (state?.popup) navigate("/", { replace: true })
+    else return
   };
 
   const categoryOptions = props.MyJobList?.data?.categories;
 
+  useEffect(() => {
+    if (!state?.popup) {
+      setPopUp(false);
+    } else {
+      setPopUp(true);
+    }
+  }, [state?.popup]);
+
   return (
     <Layout>
       <CommonHead commonHeadData={props.commonHeadData} />

src/components/MyTasks/MyJobTable.jsx

@@ -60,6 +60,8 @@ export default function MyJobTable({ className, ActiveJobList }) {
         <div className="h-auto w-full">
           {ActiveJobList?.data?.length > 0 &&
             currentTask?.map((task, idx) => {
+              // find due date
+              const dueDate = task?.delivery_date.split(" ")[0];
               let thePrice = PriceFormatter(
                 task?.price * 0.01,
                 task?.currency_code,
@@ -101,9 +103,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
                           </span>
                           <span className="text-sm text-thin-light-gray">
                             Due Date:
-                            <span className="text-purple ml-1">
+                            <span className="text-purple ml-1">{dueDate}</span>
-                              {task?.delivery_date}
-                            </span>
                           </span>
                           <span className="text-sm text-thin-light-gray">
                             Confirmation:

src/components/MyWaitingJobs/MyWaitingJobTable.jsx

@@ -0,0 +1,152 @@
+import { useState } from "react";
+import dataImage2 from "../../assets/images/data-table-user-2.png";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
+
+export default function MyWaitingJobTable({ MyJobList, className }) {
+  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 min-h-[520px] ${
+        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>
+              {
+                <>
+                  {MyJobList &&
+                  MyJobList?.result_list &&
+                  MyJobList.result_list.length > 0 ? (
+                    currentActiveJobList.map((value, index) => {
+                      // let deliveryDate = value?.expire?.split(" ")[0];
+                      let thePrice = PriceFormatter(
+                        value?.price * 0.01,
+                        value?.currency_code,
+                        value?.currency
+                      );
+                      return (
+                        <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 w-full">
+                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
+                                <img
+                                  src={dataImage2}
+                                  alt="data"
+                                  className="w-full h-full"
+                                />
+                              </div>
+                              <div className="flex flex-col flex-[0.9]">
+                                <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 flex items-start gap-1">
+                                  Price:{" "}
+                                  <span className="text-purple">
+                                    {thePrice}
+                                  </span>
+                                </span>
+                                <div className="flex items-center gap-4">
+                                  <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">
+                                    Sent :{" "}
+                                    <span className="text-purple">
+                                      {" "}
+                                      {value?.sent}
+                                    </span>
+                                  </span>
+                                </div>
+                              </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>
+                      );
+                    })
+                  ) : (
+                    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                      <td className="p-2">No Pending Task!</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 && (
+        <MarketPopUp
+          details={jobPopout.data}
+          onClose={() => {
+            setJobPopout({ show: false, data: {} });
+          }}
+          situation={jobPopout.show}
+        />
+      )}
+      {/* End of Active Job Popout */}
+    </div>
+  );
+}

src/components/MyWaitingJobs/index.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 MyWaitingJobTable from "./MyWaitingJobTable";
+
+export default function MyWaitingJobs(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"}`}
+                >
+                  Waiting Job(s)
+                </span>
+              </h1>
+            </div>
+            <div className="slider-btns flex space-x-4">
+              <div
+                onClick={() => filterHandler("today")}
+                className="relative"
+              ></div>
+            </div>
+          </div>
+          <MyWaitingJobTable MyJobList={props.MyJobList} />
+        </div>
+      </div>
+    </Layout>
+  );
+}

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -4,8 +4,6 @@ import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 
 import usersService from "../../services/UsersService";
-// import { handlePagingFunc } from "../Pagination/HandlePagination";
-// import PaginatedList from "../Pagination/PaginatedList";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import OthersInterestedTable from "./OthersInterestedTable";
 
@@ -23,15 +21,7 @@ export default function ManageInterestOffer(props) {
 
     let [messageListReload, setMessageListReload] = useState(false) // STATE TO DETERMINE WHEN MESSAGE LIST WILL RELOAD
 
-    const [messageList, setMessageList] = useState({loading: true, data: [1,2,3,4,5,6,7,8,95,6,7,8,9]}) // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
+    const [messageList, setMessageList] = useState({loading: true, data: []}) // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
-    // const [currentPage, setCurrentPage] = useState(0);
-    // const indexOfFirstItem = Number(currentPage);
-    // const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    // const currentMessageList = messageList?.data?.slice(indexOfFirstItem, indexOfLastItem);
-
-    // const handlePagination = (e) => {
-    //     handlePagingFunc(e, setCurrentPage);
-    // };
 
     const [selectTab, setValue] = useState("today");
     const filterHandler = (value) => {
@@ -112,14 +102,17 @@ export default function ManageInterestOffer(props) {
         })
     }
 
-    useEffect(()=>{
+    useEffect(()=>{ //API to get Offer Interest message list
-        // run API to get message to replace message array above, add reload variable as dependence array. CODE IS DUMMY FOR NOW
+        let reqData = { // API PAYLOADS
-        setMessageList({loading: true, data: []})
+            msg_type: 'MRKTINT',
-        apiCall.offerInterestMsg().then(res=>{
+            offer_uid: props.offerDetails?.offer_uid,
-            console.log('Data', res.data)
+            interest_uid: props.offerDetails?.interest_uid
-            setMessageList({loading: false, data:[1,2,3,6,7,8,9]})
+        }
+        setMessageList(prev => ({...prev, loading: true}))
+        apiCall.offerInterestListMsg(reqData).then(res=>{
+            setMessageList({loading: false, data:res?.data?.result_list})
         }).catch(err => {
-            setMessageList({loading: false, data:[1,2,3,6,7,8,9]})
+            setMessageList(prev => ({...prev, loading: false}))
             console.log('Failed', err)
         })
     },[messageListReload])
@@ -288,36 +281,14 @@ export default function ManageInterestOffer(props) {
                                         <div className="my-1 min-h-[100px] max-h-[200px] border-t overflow-y-scroll">
                                         { messageList.loading ?
                                         <LoadingSpinner color='sky-blue' size='16' />
-                                        : messageList.data.map((item, index)=>(
+                                        : messageList?.data?.map((item, index)=>(
                                             <div key={index} className="my-2 w-full flex items-center gap-1">
-                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">{item.added.split(' ')[0]}-from { }<span className="font-normal">{item.sender || 'Dummy name'}</span></p>
-                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">{item.msg}</p>
                                             </div>
                                             ))
                                         }
-                                        {/* {messageList.data.map((item, index)=>(
-                                            <div key={index} className="my-2 w-full flex items-center gap-1">
-                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
-                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
-                                            </div>
-                                        ))} */}
                                         </div>
-
-                                        {/* PAGINATION BUTTON */}
-                                        {/* <PaginatedList
-                                            onClick={handlePagination}
-                                            prev={currentPage == 0 ? true : false}
-                                            next={
-                                                currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                                                messageList?.data?.length
-                                                    ? true
-                                                    : false
-                                            }
-                                            data={messageList?.data}
-                                            start={indexOfFirstItem}
-                                            stop={indexOfLastItem}
-                                        /> */}
-                                        {/* END OF PAGINATION BUTTON */}
                                     </div>
                                     }
                                 </div>
@@ -388,6 +359,7 @@ export default function ManageInterestOffer(props) {
                     {/* END OF manage offer section */}
                 </div>
 
+                {props.othersInterestedList?.data?.length ?
                 <div className="w-full overflow-x-auto">
                     {/* heading */}
                     <div className="sm:flex justify-between items-center mb-3">
@@ -399,6 +371,9 @@ export default function ManageInterestOffer(props) {
                     </div>
                     <OthersInterestedTable othersInterestedList={props.othersInterestedList} />
                 </div>
+                :
+                null
+                }
             </div>
         </Layout>
     );

src/components/OffersInterest/OffersInterestTable.jsx

@@ -107,19 +107,7 @@ export default function OffersInterestTable({offerInterestList, className}) {
                     :
                     (
                         <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
-                            <div className="p-2 w-full md:w-1/2">
+                            <p className="mb-4 p-3">No list avaliable.</p>
-                                <p className="mb-4 p-3 md:p-16">No Offer list avaliable.</p>
-                                <button
-                                    onClick={()=>{navigate('/market', {replace: true})}}
-                                    type="button"
-                                    className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
-                                >
-                                    Goto Market
-                                </button>
-                            </div>
-                            <div className="p-2 w-full md:w-1/2">
-                                <img className='w-full' src={familyImage && familyImage} alt="Add Family" />
-                            </div>
                         </div>
                     )
             }

src/components/Partials/Layout.jsx

@@ -1,7 +1,6 @@
-import React, {useEffect, useState} from "react";
+import React, { useState} from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
 import useToggle from "../../hooks/useToggle";
 import { drawerToggle } from "../../store/drawer";
 import ModalCom from "../Helpers/ModalCom";

src/components/Partials/MobileSideBar.jsx

@@ -228,7 +228,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
                       route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
-                      state={"Add Job"}
+                      state={true}
                     />
                   </ul>
                 </div>
@@ -302,12 +302,12 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble, state }) => {
+const ListItem = ({ sidebar, route, title, bubble, popup }) => {
   return (
     <li className="item group">
       <NavLink
         to={route}
-        state={state && {popup: true}}
+        state={popup ? { popup: true } : { popup: false }}
         className={`nav-item flex items-center  ${
           ((navData) => (navData.isActive ? "active" : ""),
           sidebar ? "justify-start space-x-3.5" : "justify-center")

src/components/Partials/Sidebar.jsx

@@ -8,7 +8,12 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
-export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList }) {
+export default function Sidebar({
+  sidebar,
+  action,
+  logoutModalHandler,
+  myJobList,
+}) {
   const darkMode = useContext(DarkModeContext);
 
   let { userDetails } = useSelector((state) => state.userDetails);
@@ -131,27 +136,25 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
 
         {/* menu and settings item */}
         {userDetails?.account_type !== "FAMILY" && (
-            <div
+          <div
-              className={`menu-item transition-all duration-300 ease-in-out ${
+            className={`menu-item transition-all duration-300 ease-in-out ${
-                sidebar ? "my-5" : ""
+              sidebar ? "my-5" : ""
-              }`}
+            }`}
-            >
+          >
-              <div className="heading mb-5">
+            <div className="heading mb-5">
-                <h1 className="title text-xl font-bold text-purple">
+              <h1 className="title text-xl font-bold text-purple">Family</h1>
-                  Family
-                </h1>
-              </div>
-              <div className="items">
-                <ul className="flex flex-col space-y-6">
-                  <ListItem
-                    title="Family Corner"
-                    route="/acc-family"
-                    iconName="people-two"
-                    sidebar={sidebar}
-                  />
-                </ul>
-              </div>
             </div>
+            <div className="items">
+              <ul className="flex flex-col space-y-6">
+                <ListItem
+                  title="Family Corner"
+                  route="/acc-family"
+                  iconName="people-two"
+                  sidebar={sidebar}
+                />
+              </ul>
+            </div>
+          </div>
         )}
         {userDetails?.account_type !== "FAMILY" && (
           <>
@@ -252,7 +255,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
                       route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
-                      state={"Add Job"}
+                      popup={true}
                     />
                   </ul>
                 </div>
@@ -326,12 +329,12 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble, iconName, state }) => {
+const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
   return (
     <li className={`item group`}>
       <NavLink
         to={route}
-        state={state && {popup: true}}
+        state={popup ? { popup: true } : { popup: false }}
         className={`nav-item flex items-center  ${
           ((navData) => (navData.isActive ? "active" : ""),
           sidebar ? "justify-start space-x-3.5" : "justify-center")

src/components/Resources/CollectionTab.jsx

@@ -43,7 +43,7 @@ export default function CollectionTab({ className, products }) {
               <DataIteration
                 datas={products}
                 startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products.length}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <CollectionCard key={datas.uniqKey} collectionData={datas} />

src/components/Resources/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import authProfilePic from "../../assets/images/auth-profile-picture.png";
+// import authProfilePic from "../../assets/images/auth-profile-picture.png";
-import profileBanner from "../../assets/images/profile-cover.png";
+// import profileBanner from "../../assets/images/profile-cover.png";
-import collections from "../../data/collectionplan_data.json";
+// import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
-import marketPlace from "../../data/marketplace_data.json";
+// import marketPlace from "../../data/marketplace_data.json";
 import products from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import ActivitiesTab from "./ActivitiesTab";
@@ -12,129 +12,132 @@ import CreatedTab from "./CreatedTab";
 import HiddenProductsTab from "./HiddenProductsTab";
 import OnSaleTab from "./OnSaleTab";
 import OwnTab from "./OwnTab";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-export default function Resources() {
+export default function Resources(props) {
-  const onSaleProducts = marketPlace.data;
+  // console.log("RESOURCES=>", props);
-  const CreatedSell = marketPlace.data;
-  const CreatedBits = products.datas;
   // const mainProducts = products.datas;
   const ownProducts = products.datas;
-  const collectionProducts = collections.data;
 
-  const tabs = [
+  // Resource Props
-    {
+  const __resources = props.MyResourceData;
-      id: 1,
+
-      name: "onsale",
+  // Collection Items
-      content: "On Sale",
+  const collectionProducts = __resources?.collectiondata?.data;
-    },
+  const tab_categories = __resources?.tab_categories?.data;
-    {
+  const onSaleProducts = __resources?.marketdata?.data;
-      id: 2,
+  const CreatedSell = __resources?.marketdata?.data;
-      name: "owned",
+  const CreatedBits = __resources?.productdata?.data;
-      content: "Owned",
+
-    },
+  const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
-    {
-      id: 3,
-      name: "created",
-      content: "Created",
-    },
-    {
-      id: 4,
-      name: "hidden",
-      content: "Hidden",
-    },
-    {
-      id: 5,
-      name: "collection",
-      content: "Collection",
-    },
-    {
-      id: 6,
-      name: "activity",
-      content: "Activity",
-    },
-  ];
 
-  const [tab, setTab] = useState(tabs[0].name);
   const tabHandler = (value) => {
     setTab(value);
   };
+
+  // Category Components
+  const tabComponents = {
+    onsale: <OnSaleTab products={onSaleProducts} />,
+    owned: <OwnTab products={ownProducts} />,
+    created: (
+      <CreatedTab marketProducts={CreatedSell} mainProducts={CreatedBits} />
+    ),
+    hidden: (
+      <HiddenProductsTab
+        marketProducts={CreatedSell}
+        mainProducts={CreatedBits}
+      />
+    ),
+    collection: <CollectionTab products={collectionProducts} />,
+    activity: <ActivitiesTab />,
+  };
+
+  const defaultTabComponent = <OnSaleTab products={onSaleProducts} />;
+
+  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
+
+  // Tab Item Component
+  const TabItem = ({ tabValue, isActive }) => {
+    return (
+      <li
+        className={`relative group inline`}
+        onClick={() => tabHandler(tabValue.name)}
+      >
+        <span
+          className={`py-4 sm:border-b-none border-b group-hover:border-purple border-transparent lg:text-xl text-sm tracking-wide font-bold group-hover:text-purple text-dark-gray dark:text-white relative z-10 cursor-pointer ${
+            isActive
+              ? "text-purple border-purple"
+              : "text-dark-gray dark:text-white border-transparent"
+          }`}
+        >
+          {tabValue.content}
+        </span>
+        <span
+          className={`w-5 h-5 group-hover:bg-pink group-hover:text-white text-[10px] rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
+            isActive
+              ? "text-white bg-pink"
+              : "text-thin-light-gray bg-[#F2B8FD]"
+          }`}
+        >
+          16
+        </span>
+      </li>
+    );
+  };
+
+  // Tab List Component
+  const TabList = ({ tabCategories }) => {
+    return (
+      <ul className="lg:flex lg:space-x-14 space-x-8">
+        {tabCategories.length > 0 &&
+          tabCategories?.map((tabValue, idx) => (
+            <TabItem
+              key={tabValue.id}
+              tabValue={tabValue}
+              isActive={tab === tabValue.name || (idx === 0 && tab === "")}
+            />
+          ))}
+      </ul>
+    );
+  };
+
   return (
     <>
       <Layout>
         <div className="nft-authprofile-wrapper w-full">
-          <div className="main-wrapper w-full">
+          {props.MyResourceData.length == 0 ||
-            <div className="content-wrapper-profile-only w-full mb-6">
+          Object.keys(props.MyResourceData).length == 0 ? (
-              <div className="auth-tab-content relative mb-10">
+            <div className="w-full h-full flex items-center justify-center">
-                <div className="lg:flex justify-between">
+              <LoadingSpinner size={16} color="sky-blue" />
-                  <div className="tab-items">
+            </div>
-                    <ul className="lg:flex lg:space-x-14 space-x-8">
+          ) : (
-                      {tabs &&
+            <div className="main-wrapper w-full">
-                        tabs.length > 0 &&
+              <div className="content-wrapper-profile-only w-full mb-6">
-                        tabs.map((tabValue) => (
+                <div className="auth-tab-content relative mb-10">
-                          <li
+                  <div className="lg:flex justify-between">
-                            key={tabValue.id}
+                    <div className="tab-items">
-                            className="relative group inline"
+                      <ul className="lg:flex lg:space-x-14 space-x-8">
-                            onClick={() => tabHandler(tabValue.name)}
+                        <TabList tabCategories={tab_categories} />
-                          >
+                      </ul>
-                            <span
+                    </div>
-                              className={`py-4 sm:border-b-none border-b group-hover:border-purple border-transparent lg:text-xl text-sm tracking-wide font-bold  group-hover:text-purple text-dark-gray dark:text-white relative z-10 cursor-pointer ${
+                    <div style={{ transform: "translateY(-22px)" }}>
-                                tab === tabValue.name
+                      <Link
-                                  ? "text-purple border-purple "
+                        to="/upload-product"
-                                  : "text-dark-gray dark:text-white border-transparent "
+                        className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
-                              }`}
+                      >
-                            >
+                        Upload Product
-                              {tabValue.content}
+                      </Link>
-                            </span>
+                    </div>
-                            <span
-                              className={`w-5 h-5 group-hover:bg-pink group-hover:text-white  text-[10px]  rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
-                                tab === tabValue.name
-                                  ? "text-white bg-pink"
-                                  : "text-thin-light-gray bg-[#F2B8FD]"
-                              }`}
-                            >
-                              16
-                            </span>
-                          </li>
-                        ))}
-                    </ul>
-                  </div>
-                  <div style={{ transform: "translateY(-22px)" }}>
-                    <Link
-                      to="/upload-product"
-                      className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
-                    >
-                      Upload Product
-                    </Link>
                   </div>
+                  <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
                 </div>
-                <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
+              </div>
+
+              <div className="tab-cotainer w-full mb-10">
+                {selectedTabComponent}
               </div>
             </div>
-
+          )}
-            <div className="tab-cotainer w-full mb-10">
-              {tab === "onsale" ? (
-                <OnSaleTab products={onSaleProducts} />
-              ) : tab === "owned" ? (
-                <OwnTab products={ownProducts} />
-              ) : tab === "created" ? (
-                <CreatedTab
-                  marketProducts={CreatedSell}
-                  mainProducts={CreatedBits}
-                />
-              ) : tab === "hidden" ? (
-                <HiddenProductsTab
-                  marketProducts={CreatedSell}
-                  mainProducts={CreatedBits}
-                />
-              ) : tab === "collection" ? (
-                <CollectionTab products={collectionProducts} />
-              ) : tab === "activity" ? (
-                <ActivitiesTab />
-              ) : (
-                ""
-              )}
-            </div>
-          </div>
         </div>
       </Layout>
     </>

src/components/UserHeader/CommonHead.jsx

@@ -2,34 +2,36 @@ import React from "react";
 import { Link } from "react-router-dom";
 import RecomendedSliders from "./RecomendedSliders";
 
-export default function CommonHead({ className,commonHeadData }) {
+export default function CommonHead({ className, commonHeadData }) {
-    return (
+  return (
-        <div
+    <div
-            className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-2 p-2 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
+      className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-2 p-2 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
-                className || ""
+        className || ""
-            }`}
+      }`}
-        >
+    >
-            {commonHeadData?.length > 0 && <RecomendedSliders bannerData={commonHeadData}  /> }
+      {commonHeadData?.length > 0 && (
-            {/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
+        <RecomendedSliders bannerData={commonHeadData} />
-            {/*    /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
+      )}
-            {/*    /!*    This is common head which will appear as needed , will take many shape*!/*/}
+      {/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
-            {/*    /!*</h1>*!/*/}
+      {/*    /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
-            {/*    /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
+      {/*    /!*    This is common head which will appear as needed , will take many shape*!/*/}
-            {/*    /!*    some space for extra texts here*!/*/}
+      {/*    /!*</h1>*!/*/}
-            {/*    /!*</p>*!/*/}
+      {/*    /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
-            {/*   */}
+      {/*    /!*    some space for extra texts here*!/*/}
-            {/*</div>*/}
+      {/*    /!*</p>*!/*/}
-            {/*<div className="flex-1 flex lg:justify-end">*/}
+      {/*   */}
-            {/*    <div className="flex items-center space-x-5">*/}
+      {/*</div>*/}
-            {/*        <Link*/}
+      {/*<div className="flex-1 flex lg:justify-end">*/}
-            {/*            to="/mytask"*/}
+      {/*    <div className="flex items-center space-x-5">*/}
-            {/*            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
+      {/*        <Link*/}
-            {/*        >*/}
+      {/*            to="/mytask"*/}
-            {/*           View Task*/}
+      {/*            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
-            {/*        </Link>*/}
+      {/*        >*/}
+      {/*           View Task*/}
+      {/*        </Link>*/}
 
-            {/*    </div>*/}
+      {/*    </div>*/}
-            {/*</div>*/}
+      {/*</div>*/}
-        </div>
+    </div>
-    );
+  );
 }

src/components/UserHeader/RecomendedSliders.jsx

@@ -7,126 +7,128 @@ import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 import { Link } from "react-router-dom";
 
-export default function RecomendedSliders({ className,bannerData }) {
+export default function RecomendedSliders({ className, bannerData }) {
-    const settings = {
+  const settings = {
-        arrows: false,
+    arrows: false,
-        dots: false,
+    dots: false,
-        infinite: bannerData.length > 4 ? true : false,
+    infinite: bannerData.length > 4 ? true : false,
-        autoplay: true,
+    autoplay: true,
-        slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
+    slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
-        slidesToScroll: 1,
+    slidesToScroll: 1,
-        responsive: [
+    responsive: [
-            {
+      {
-                breakpoint: 426,
+        breakpoint: 426,
-                settings: {
+        settings: {
-                    infinite: bannerData.length > 2 ? true : false,
+          infinite: bannerData.length > 2 ? true : false,
-                    slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
+          slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
-                    slidesToScroll: 1,
+          slidesToScroll: 1,
-                },
+        },
-            },
+      },
-        ],
+    ],
-    };
+  };
-    const sellSlider = useRef(null);
+  const sellSlider = useRef(null);
-    const buySlider = useRef(null);
+  const buySlider = useRef(null);
-    const prevHandler = (value) => {
+  const prevHandler = (value) => {
-        if (value === "sell") {
+    if (value === "sell") {
-            sellSlider.current.slickPrev();
+      sellSlider.current.slickPrev();
-        }
+    }
-        if (value === "buy") {
+    if (value === "buy") {
-            buySlider.current.slickPrev();
+      buySlider.current.slickPrev();
-        }
+    }
-    };
+  };
-    const nextHandler = (value) => {
+  const nextHandler = (value) => {
-        if (value === "sell") {
+    if (value === "sell") {
-            sellSlider.current.slickNext();
+      sellSlider.current.slickNext();
-        }
+    }
-        if (value === "buy") {
+    if (value === "buy") {
-            buySlider.current.slickNext();
+      buySlider.current.slickNext();
-        }
+    }
-    };
+  };
-    return (
+  return (
-        <>
+    <>
-            {/*<div className="heading flex justify-between items-center mb-4">*/}
+      {/*<div className="heading flex justify-between items-center mb-4">*/}
-            {/*    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
+      {/*    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
-            {/*        Top Seller*/}
+      {/*        Top Seller*/}
-            {/*    </h1>*/}
+      {/*    </h1>*/}
-            {/*    <div className="slider-btns flex space-x-4">*/}
+      {/*    <div className="slider-btns flex space-x-4">*/}
-            {/*        <button*/}
+      {/*        <button*/}
-            {/*            onClick={() => nextHandler("sell")}*/}
+      {/*            onClick={() => nextHandler("sell")}*/}
-            {/*            type="button"*/}
+      {/*            type="button"*/}
-            {/*            className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
+      {/*            className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
-            {/*        >*/}
+      {/*        >*/}
-            {/*            <Icons name="arrows" />*/}
+      {/*            <Icons name="arrows" />*/}
-            {/*        </button>*/}
+      {/*        </button>*/}
-            {/*        <button*/}
+      {/*        <button*/}
-            {/*            onClick={() => prevHandler("sell")}*/}
+      {/*            onClick={() => prevHandler("sell")}*/}
-            {/*            type="button"*/}
+      {/*            type="button"*/}
-            {/*            className="transform rotate-180"*/}
+      {/*            className="transform rotate-180"*/}
-            {/*        >*/}
+      {/*        >*/}
-            {/*            <div className="  text-dark-gray dark:text-white">*/}
+      {/*            <div className="  text-dark-gray dark:text-white">*/}
-            {/*                <svg*/}
+      {/*                <svg*/}
-            {/*                    width="11"*/}
+      {/*                    width="11"*/}
-            {/*                    height="19"*/}
+      {/*                    height="19"*/}
-            {/*                    viewBox="0 0 11 19"*/}
+      {/*                    viewBox="0 0 11 19"*/}
-            {/*                    fill="none"*/}
+      {/*                    fill="none"*/}
-            {/*                    xmlns="http://www.w3.org/2000/svg"*/}
+      {/*                    xmlns="http://www.w3.org/2000/svg"*/}
-            {/*                >*/}
+      {/*                >*/}
-            {/*                    <path*/}
+      {/*                    <path*/}
-            {/*                        d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
+      {/*                        d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
-            {/*                        stroke="url(#paint0_linear_220_23410)"*/}
+      {/*                        stroke="url(#paint0_linear_220_23410)"*/}
-            {/*                        strokeWidth="2"*/}
+      {/*                        strokeWidth="2"*/}
-            {/*                        strokeLinecap="round"*/}
+      {/*                        strokeLinecap="round"*/}
-            {/*                        strokeLinejoin="round"*/}
+      {/*                        strokeLinejoin="round"*/}
-            {/*                    />*/}
+      {/*                    />*/}
-            {/*                    <defs>*/}
+      {/*                    <defs>*/}
-            {/*                        <linearGradient*/}
+      {/*                        <linearGradient*/}
-            {/*                            id="paint0_linear_220_23410"*/}
+      {/*                            id="paint0_linear_220_23410"*/}
-            {/*                            x1="9.09766"*/}
+      {/*                            x1="9.09766"*/}
-            {/*                            y1="1.1499"*/}
+      {/*                            y1="1.1499"*/}
-            {/*                            x2="-4.2474"*/}
+      {/*                            x2="-4.2474"*/}
-            {/*                            y2="7.96749"*/}
+      {/*                            y2="7.96749"*/}
-            {/*                            gradientUnits="userSpaceOnUse"*/}
+      {/*                            gradientUnits="userSpaceOnUse"*/}
-            {/*                        >*/}
+      {/*                        >*/}
-            {/*                            <stop stopColor="#F539F8" />*/}
+      {/*                            <stop stopColor="#F539F8" />*/}
-            {/*                            <stop offset="0.416763" stopColor="#C342F9" />*/}
+      {/*                            <stop offset="0.416763" stopColor="#C342F9" />*/}
-            {/*                            <stop offset="1" stopColor="#5356FB" />*/}
+      {/*                            <stop offset="1" stopColor="#5356FB" />*/}
-            {/*                        </linearGradient>*/}
+      {/*                        </linearGradient>*/}
-            {/*                    </defs>*/}
+      {/*                    </defs>*/}
-            {/*                </svg>*/}
+      {/*                </svg>*/}
-            {/*            </div>*/}
+      {/*            </div>*/}
-            {/*        </button>*/}
+      {/*        </button>*/}
-            {/*    </div>*/}
+      {/*    </div>*/}
-            {/*</div>*/}
+      {/*</div>*/}
-            <div className="slider-content">
+      <div className="slider-content">
-                <SliderCom settings={settings} selector={sellSlider}>
+        <SliderCom settings={settings} selector={sellSlider}>
-                    {bannerData.map((item, index) => (
+          {bannerData.map((item, index) => (
-                        <Link key={index} to={`/${item.link_path}`}>
+            <Link key={index} to={`/${item.link_path}`}>
-                            <div className="item">
+              <div className="item">
-                                <div className={`commonHeaderSliderItem flex flex-col justify-between items-center ${item.short_style}`}>
+                <div
-                                    {/* title */}
+                  className={`commonHeaderSliderItem flex gap-1 flex-col justify-between items-center ${item.short_style}`}
-                                    <div className="flex justify-center">
+                >
-                                        <p className="text-base font-bold   text-dark-gray dark:text-white">
+                  {/* title */}
-                                            {item.short_title}
+                  <div className="flex justify-center items-center text-center">
-                                        </p>
+                    <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                    </div>
+                      {item.short_title}
-                                    {/* username */}
+                    </p>
-                                    <div className="flex justify-center mb-1">
+                  </div>
-                                        <p className="text-xs text-thin-light-gray">
+                  {/* username */}
-                                            {item.short_description}
+                  <div className="flex justify-center mb-1">
-                                        </p>
+                    <p className="text-xs text-thin-light-gray text-justify">
-                                    </div>
+                      {item.short_description}
-                                    {/* items */}
+                    </p>
-                                    <div className="flex justify-center">
+                  </div>
-                                        <div className="flex space-x-1 items-center text-purple text-xs">
+                  {/* items */}
-                                            <span>{item.short_button_text}</span>
+                  <div className="flex justify-center">
-                                        </div>
+                    <div className="flex space-x-1 items-center text-purple text-xs">
-                                    </div>
+                      <span>{item.short_button_text}</span>
-                                </div>
+                    </div>
-                            </div>
+                  </div>
-                        </Link>
+                </div>
-                    ))}
+              </div>
-                </SliderCom>
+            </Link>
-            </div>
+          ))}
-        </>
+        </SliderCom>
-    );
+      </div>
+    </>
+  );
 }

src/components/jobPopout/EditJobPopout.jsx

@@ -1,13 +1,47 @@
-import React, { useCallback, useMemo, useState } from "react";
-import ModalCom from "../Helpers/ModalCom";
 import { Field, Form, Formik } from "formik";
-import * as Yup from "yup";
+import React, { useCallback, useMemo, useState } from "react";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import usersService from "../../services/UsersService";
-import { useNavigate } from "react-router-dom";
-import { tableReload } from "../../store/TableReloads";
 import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import * as Yup from "yup";
+import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
+import InputCom from "../Helpers/Inputs/InputCom";
+import ModalCom from "../Helpers/ModalCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+const validationSchema = Yup.object().shape({
+  country: Yup.string()
+    .min(1, "Minimum 3 characters")
+    .max(25, "Maximum 25 characters")
+    .required("Country is required"),
+  price: Yup.string()
+    .typeError("Invalid number")
+    .min(1, "Price must be greater than 0")
+    .test("no-e", "Invalid number", (value) => {
+      if (value && /\d+e/.test(value)) {
+        return false;
+      }
+      return true;
+    })
+    .required("Price is required"),
+  title: Yup.string()
+    .min(3, "Minimum 3 characters")
+    .max(100, "Maximum 25 characters")
+    .required("Title is required"),
+  description: Yup.string()
+    .min(3, "Minimum 3 characters")
+    .max(250, "Maximum 250 characters")
+    .required("Description is required"),
+  job_detail: Yup.string()
+    .min(3, "Minimum 3 characters")
+    .max(250, "Maximum 250 characters")
+    .required("Details is required"),
+  timeline_days: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, "Price must be greater than 0")
+    .required("Timeline is required"),
+  category: Yup.array().min(1, "Select at least one checkbox"),
+});
 
 const EditJobPopOut = ({
   details,
@@ -24,37 +58,10 @@ const EditJobPopOut = ({
     message: "",
   }); // Holds state when submit button is pressed
 
-  const validationSchema = Yup.object().shape({
-    country: Yup.string()
-      .min(1, "Minimum 3 characters")
-      .max(25, "Maximum 25 characters")
-      .required("Country is required"),
-    price: Yup.number()
-      .typeError("you must specify a number")
-      .min(1, "Price must be greater than 0")
-      .required("Price is required"),
-    title: Yup.string()
-      .min(3, "Minimum 3 characters")
-      .max(100, "Maximum 25 characters")
-      .required("Title is required"),
-    description: Yup.string()
-      .min(3, "Minimum 3 characters")
-      .max(250, "Maximum 250 characters")
-      .required("Description is required"),
-    job_detail: Yup.string()
-      .min(3, "Minimum 3 characters")
-      .max(250, "Maximum 250 characters")
-      .required("Details is required"),
-    timeline_days: Yup.number()
-      .typeError("you must specify a number")
-      .min(1, "Price must be greater than 0")
-      .required("Price is required"),
-  });
-
   let initialValues = {
     // initial values for formik
-    country: country,
+    country: details.currency,
-    price: details?.price,
+    price: details?.price * 0.01,
     title: details?.title,
     description: details?.description,
     job_detail: details?.job_detail,
@@ -67,14 +74,19 @@ const EditJobPopOut = ({
 
   const handleEditJob = useCallback(
     async (values) => {
-      values.category = values.category?.join("@");
-      setRequestStatus({ loading: true, message: "" });
       let reqData = {
+        country: values?.country,
+        price: Number(values.price) * 100,
+        title: values?.title,
+        description: values?.description,
+        job_detail: values?.job_detail,
+        timeline_days: values?.timeline_days,
+        category: values.category?.join("@"),
         job_id: details.job_id,
         job_uid: details.job_uid,
-        ...values,
       };
-      delete reqData?.country;
+      setRequestStatus({ loading: true, message: "" });
+
       try {
         let res = await jobApi.jobManagerUpdateJob(reqData);
         let { data } = await res;
@@ -140,7 +152,7 @@ const EditJobPopOut = ({
                       <div className="field w-full mb-6 xl:mb-0">
                         <InputCom
                           fieldClass="px-6 cursor-default"
-                          label="Country"
+                          label="Currency"
                           labelClass="tracking-wide"
                           inputBg="bg-slate-100"
                           inputClass="input-curve lg border border-light-purple"
@@ -163,7 +175,7 @@ const EditJobPopOut = ({
                           inputClass="input-curve lg border border-light-purple"
                           type="number"
                           name="price"
-                          value={props.values.price * 0.01}
+                          value={props.values.price}
                           inputHandler={props.handleChange}
                           blurHandler={props.handleBlur}
                           errorBorder={
@@ -220,7 +232,11 @@ const EditJobPopOut = ({
                         <textarea
                           id="Job Delivery Details"
                           rows="5"
-                          className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] border border-[#dce4e9] rounded-[10px]`}
+                          className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                            props.errors.job_detail && props.touched.job_detail
+                              ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                              : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                          } rounded-[10px]`}
                           style={{ resize: "none" }}
                           name="job_detail"
                           value={props.values.job_detail}
@@ -255,16 +271,13 @@ const EditJobPopOut = ({
                               <span className="text-[13.975px]">{value}</span>
                             </label>
                           ))}
+                          <span className="h-5 text-sm italic text-[#cf3917]">
+                            {props.errors.category &&
+                              props.touched.category &&
+                              "please select a category"}
+                          </span>
                         </div>
                       </div>
-
-                      {/* <div className={`${!props.errors && "invisible"} h-5`}>
-                      {props.errors.job_detail && props.touched.job_detail && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.job_detail}
-                        </p>
-                      )}
-                    </div> */}
                     </div>
 
                     <div className="field w-full mb-6">
@@ -285,7 +298,12 @@ const EditJobPopOut = ({
                       <Field
                         component="select"
                         name="timeline_days"
-                        className="input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none"
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                          props.errors.timeline_days &&
+                          props.touched.timeline_days
+                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                        }`}
                         value={props.values.timeline_days}
                       >
                         <option value="">Select Duration</option>

src/index.css

@@ -26,6 +26,7 @@
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   font-family: sans; color: white;
   font-size: 42px;
+  font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
 }
 
 .job-action{
@@ -52,22 +53,25 @@
 }
 .siderCardDescription{
   margin: 10px 45px 10px 45px;
-  font-size: 18px;
   background-color: aliceblue;
   padding: 5px;
   border-radius: 5px;
+  font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 1.125rem;
+  line-height: 1.56;
 }
 .siderCardButton{
   margin-top: 10px;
   width: 100%;
   text-align: center;
 }
-.commonHeaderSliderItem{
+.commonHeaderSliderItem {
   background-color: aliceblue;
   border-radius: 10px;
-  margin: 0px 5px 0px 5px;
+  height: 100px;
-  height: 95px;
+  margin: 0 5px;
-  padding: 5px;
+  padding: 10px;
 }
 
 .short_style{

src/services/UsersService.js

@@ -47,9 +47,9 @@ class usersService {
     };
     return this.postAuxEnd("/mybanklist", postData);
   }
-  getUserWallets(reqData) {
+  getUserWallets() {
     var postData = {
-      uuid: localStorage.getItem("uuid"),
+      uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
     };
@@ -208,7 +208,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 22025,
-      ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/familymanage", postData);
   }
@@ -223,7 +223,7 @@ class usersService {
       limit: 30,
       offset: 0,
       action: 13008,
-      ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/jobmanageractive", postData);
   }
@@ -289,6 +289,29 @@ class usersService {
     };
     return this.postAuxEnd("/jobmanageroffers", postData);
   }
+//
+  getResourceList() { // jobs you have shown inteterest in
+    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("/resources", postData);
+  }
+  getMyWiatingJobList() { // jobs you have shown inteterest in
+    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("/waitinginterest", postData);
+  }
   getMyJobList() {
     var postData = {
       uuid: localStorage.getItem("uid"),
@@ -449,8 +472,8 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 11032,
-      ...postData
+      ...postData,
-    }
+    };
     return this.postAuxEnd("/sendreferral", reqData);
   }
 
@@ -468,7 +491,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 85020,
-      ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/couponredeem", postData);
   }
@@ -485,7 +508,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 11183,
-      country: "NG",
+      // country: "NG",
     };
     return this.postAuxEnd("/countrybanks", postData);
   }
@@ -507,9 +530,9 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      msg_type: 'JOB',
+      msg_type: "JOB",
       action: 13033,
-      ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/marketinterest", postData);
   }
@@ -519,9 +542,9 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      msg_type: 'JOB',
+      msg_type: "JOB",
       action: 13036,
-      ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/marketmessage", postData);
   }
@@ -623,7 +646,7 @@ class usersService {
     for (let data in postData) {
       formData.append(data, postData[data]);
     }
-  //  return this.postAuxEnd("/uploads", formData);
+    //  return this.postAuxEnd("/uploads", formData);
 
     return this.postAuxEnd("/uploads", postData);
   }
@@ -668,25 +691,25 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       action: 13024,
       limit: 30,
-      offset: 0
+      offset: 0,
     };
     return this.postAuxEnd("/offersinterestlist", postData);
   }
 
-    // END POINT FOR PROCESSING OFFER INTEREST
+  // END POINT FOR PROCESSING OFFER INTEREST
-    offersInterestProc(reqData) {
+  offersInterestProc(reqData) {
-      var postData = {
+    var postData = {
-        uid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
+      member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
+      sessionid: localStorage.getItem("session_token"),
-        action: 13034,
+      action: 13034,
-        ...reqData
+      ...reqData,
-      };
+    };
-      return this.postAuxEnd("/offersinterestproc", postData);
+    return this.postAuxEnd("/offersinterestproc", postData);
-    }
+  }
 
-   // END POINT FOR WORKER TO MARK TASK AS COMPLETED
+  // END POINT FOR WORKER TO MARK TASK AS COMPLETED
-   workerJobAction(reqData) {
+  workerJobAction(reqData) {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
@@ -697,50 +720,72 @@ class usersService {
     return this.postAuxEnd("/activetaskstatus", postData);
   }
 
-     // END POINT FOR OWNER JOB ACTION
+  // END POINT FOR OWNER JOB ACTION
-     ownerJobAction(reqData) {
+  ownerJobAction(reqData) {
-      var postData = {
+    var postData = {
-        uid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
+      member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
+      sessionid: localStorage.getItem("session_token"),
-        action: 14015,
+      action: 14015,
-        ...reqData,
+      ...reqData,
-      };
+    };
-      return this.postAuxEnd("/activejobstatus", postData);
+    return this.postAuxEnd("/activejobstatus", postData);
-    }
+  }
 
   // END POINT FOR OWNER JOB ACTION
   getFaq() {
     var postData = {
-      uid: localStorage.getItem("uid"),
-      // member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
     };
     return this.postAuxEnd("/faq", postData);
   }
 
+  getMyNotifications() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      limit: 30,
+      offset: 0,
+      action: 11205,
+    };
+    return this.postAuxEnd("/mynotifications", postData);
+  }
+
   // END POINT TO GET LIST OF USER PREVIOUS CARDS
   payListCard() {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11055
+      action: 11055,
     };
     return this.postAuxEnd("/paylistcard", postData);
   }
 
-    // END POINT TO SEND AND GET OFFER INTEREST MESSAGE
+  // END POINT TO SEND OFFER INTEREST MESSAGE
-    offerInterestMsg(reqData) {
+  offerInterestMsg(reqData) {
-      var postData = {
+    var postData = {
-        uid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
+      member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
+      sessionid: localStorage.getItem("session_token"),
-        action: 13037,
+      action: 13037,
-        ...reqData
+      ...reqData,
-      };
+    };
-      return this.postAuxEnd("/offerinterestmsg", postData);
+    return this.postAuxEnd("/offerinterestmsg", postData);
-    }
+  }
+
+  // END POINT TO GET OFFER INTEREST MESSAGE
+  offerInterestListMsg(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 13037,
+      ...reqData,
+    };
+    return this.postAuxEnd("/offerinterestlistmsg", postData);
+  }
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/views/ManageActiveJobs.jsx

@@ -1,47 +1,61 @@
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from "react";
-import ActiveJobs from '../components/MyActiveJobs/ActiveJobs'
+import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from "react-router-dom";
-import usersService from '../services/UsersService'
+import usersService from "../services/UsersService";
 
 function ManageActiveJobs() {
+  const ApiCall = new usersService();
 
-  const ApiCall = new usersService()
+  let navigate = useNavigate();
+  let { state } = useLocation();
 
-  let navigate = useNavigate()
+  let [details, setDetails] = useState({}); // to hold state values
-  let {state} = useLocation()
 
-  let [details, setDetails] = useState({}) // to hold state values
+  let [activeJobMesList, setActiveJobMesList] = useState({
+    loading: true,
+    error: false,
+    data: [],
+  });
 
-  let [activeJobMesList, setActiveJobMesList] = useState({loading: true, error: false, data: []})
+  let [activeJobMesListReload, setActiveJobMesListReload] = useState(false); // state to determine when ACTIVE JOB MESSAGE LIST RELOADS/RE-RENDERS
 
-  let [activeJobMesListReload, setActiveJobMesListReload] = useState(false)// state to determine when ACTIVE JOB MESSAGE LIST RELOADS/RE-RENDERS
+  const getActiveJobMesList = () => {
+    // FUNCTION TO GET ACTIVE JOB MESSAGE LIST
+    setActiveJobMesList({ loading: true, error: false, data: [] });
+    let contract = { contract: state.contract };
+    ApiCall.activeJobMesList(contract)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
+          setActiveJobMesList({ loading: false, error: false, data: [] });
+          return;
+        }
+        setActiveJobMesList({
+          loading: false,
+          error: false,
+          data: res.data.result_list,
+        });
+      })
+      .catch((error) => {
+        setActiveJobMesList({ loading: false, error: true, data: [] });
+      });
+  };
 
-  const getActiveJobMesList = () => { // FUNCTION TO GET ACTIVE JOB MESSAGE LIST
+  useEffect(() => {
-    setActiveJobMesList({loading: true, error: false, data: []})
+    if (!state) {
-    let contract = {contract: state.contract}
+      navigate("/", { replace: true });
-    ApiCall.activeJobMesList(contract).then((res)=>{
+      return;
-      if(res.status != 200 || res.data.internal_return < 0){
-        setActiveJobMesList({loading: false, error: false, data: []})
-        return
-      }
-      setActiveJobMesList({loading: false, error: false, data: res.data.result_list})
-    }).catch((error)=>{
-      setActiveJobMesList({loading: false, error: true, data: []})
-    })
-  }
-
-  useEffect(()=>{
-    if(!state){
-      navigate('/', {replace: true})
-      return
     }
-    setDetails(state)
+    setDetails(state);
-    getActiveJobMesList()
+    getActiveJobMesList();
-  },[activeJobMesListReload])
+  }, [activeJobMesListReload]);
 
   return (
-    <ActiveJobs details={state} activeJobMesList={activeJobMesList} reloadActiveJobList={setActiveJobMesListReload} />
+    <ActiveJobs
-  )
+      details={state}
+      activeJobMesList={activeJobMesList}
+      reloadActiveJobList={setActiveJobMesListReload}
+    />
+  );
 }
 
-export default ManageActiveJobs
+export default ManageActiveJobs;

src/views/MarketPlacePage.jsx

@@ -3,13 +3,11 @@ import MarketPlace from "../components/MarketPlace";
 import { useSelector } from "react-redux";
 
 export default function MarketPlacePage() {
-
+  let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
-  let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 
   return (
     <>
-      <MarketPlace
+      <MarketPlace commonHeadData={commonHeadBanner?.result_list} />
-          commonHeadData={commonHeadBanner?.result_list} />
     </>
   );
 }

src/views/MyActiveJobsPage.jsx

@@ -1,33 +1,33 @@
-import React, { useContext,useState, useEffect } from "react";
+import React, { useContext, useState, useEffect } from "react";
 import usersService from "../services/UsersService";
 //import MyJobs from "../components/MyJobs";
 import MyActiveJobs from "../components/MyActiveJobs";
 import { useSelector } from "react-redux";
 
 export default function MyActiveJobsPage() {
-    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+  let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
-    const [MyJobList, setMyJobList] = useState([]);
+  const [MyJobList, setMyJobList] = useState([]);
-    const api = new usersService();
+  const api = new usersService();
-//TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive
+  //TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive
-    const getMyJobList = async () => {
+  const getMyJobList = async () => {
-        try {
+    try {
-            const res = await api.getMyActiveJobList();
+      const res = await api.getMyActiveJobList();
-            setMyJobList(res.data);
+      setMyJobList(res.data);
-        } catch (error) {
+    } catch (error) {
-            console.log("Error getting mode");
+      console.log("Error getting mode");
-        }
+    }
-    };
+  };
-    useEffect(() => {
+  useEffect(() => {
-        getMyJobList();
+    getMyJobList();
-    }, []);
+  }, []);
 
-    // debugger;
+  // debugger;
-    return (
+  return (
-        <>
+    <>
-            <MyActiveJobs
+      <MyActiveJobs
-                MyJobList={MyJobList}
+        MyJobList={MyJobList}
-                commonHeadData={commonHeadBanner.result_list}
+        commonHeadData={commonHeadBanner.result_list}
-            />
+      />
-        </>
+    </>
-    );
+  );
 }

src/views/MyTaskPage.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import MyTasks from "../components/MyTasks";
 // import UsersService from "../services/UsersService";
 import usersService from "../services/UsersService";

src/views/MyWaitingJobsPage.jsx

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+import usersService from "../services/UsersService";
+import { useSelector } from "react-redux";
+import MyWaitingJobs from "../components/MyWaitingJobs";
+
+export default function MyWaitingJobsPage() {
+  let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
+  const [MyJobList, setMyJobList] = useState([]);
+  const api = new usersService();
+
+  const getMyJobList = async () => {
+    try {
+      const res = await api.getMyWiatingJobList();
+      setMyJobList(res.data);
+    } catch (error) {
+      console.log("Error getting mode");
+    }
+  };
+  useEffect(() => {
+    getMyJobList();
+  }, []);
+
+  // debugger;
+  return (
+    <>
+      <MyWaitingJobs
+        MyJobList={MyJobList}
+        commonHeadData={commonHeadBanner.result_list}
+      />
+    </>
+  );
+}

src/views/ResourcePage.jsx

@@ -1,7 +1,21 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
-//import UserProfile from "../components/AuthPages/UserProfile";
 import Resources from "../components/Resources";
-
+import usersService from "../services/UsersService";
 export default function ResourcePage() {
-    return <Resources />;
+  const [MyResourceData, setMyResourceData] = useState([]);
+  const api = new usersService();
+
+  const getMyResourceData = async () => {
+    try {
+      const res = await api.getResourceList();
+      setMyResourceData(res.data);
+    } catch (error) {
+      throw new Error("Error getting mode");
+    }
+  };
+  useEffect(() => {
+    getMyResourceData();
+  }, []);
+
+  return <Resources MyResourceData={MyResourceData} />;
 }

src/views/SettingsPage.jsx

@@ -6,14 +6,14 @@ export default function SettingsPage() {
 
   const apiCall = new usersService()
 
-  let [faq, setFaq] = useState({loading:true, data:[]}) // STATE TO HOLD FAQ DATA
+  let [faq, setFaq] = useState({loading:true, data:null}) // STATE TO HOLD FAQ DATA
 
   //FUNCTION TO GET FAQ
   const getFaq = () => {
     apiCall.getFaq().then(res => {
       setFaq({loading:false, data:res.data.result_list})
     }).catch(err => {
-      setFaq({loading:false, data:[]})
+      setFaq({loading:false, data:null})
       console.log('Error', err)
     })
   }
@@ -21,6 +21,7 @@ export default function SettingsPage() {
   useEffect(()=>{
     getFaq()
   },[])
+  
   return (
     <>
       <Settings faq={faq} />