.

src/Routers.jsx

@@ -89,7 +89,7 @@ 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 />} />

src/components/AddJob/AddJob.jsx

@@ -106,7 +106,7 @@ function AddJob({ popUpHandler }) {
         });
         setTimeout(() => {
           dispatch(tableReload({ type: "JOBTABLE" }));
-          popUpHandler()
+          popUpHandler();
         }, 1000);
       })
       .catch((err) => {
@@ -141,7 +141,7 @@ function AddJob({ popUpHandler }) {
                 <div className="fields w-full">
                   {/* inputs starts here */}
                   {/* country */}
-                  <div className="xl:flex xl:space-x-7 mb-6">
+                  <div className="xl:flex xl:space-x-7 mb-[5px]">
                     <div className="field w-full mb-6 xl:mb-0">
                       <label
                         htmlFor="country"
@@ -187,11 +187,13 @@ function AddJob({ popUpHandler }) {
                           </option>
                         )}
                       </select>
-                      {props.errors.country && props.touched.country && (
+                      <div className={`${!props.errors && "invisible"} h-5`}>
-                        <p className="text-sm text-red-500">
+                        {props.errors.country && props.touched.country && (
-                          {props.errors.country}
+                          <p className="text-sm text-red-500">
-                        </p>
+                            {props.errors.country}
-                      )}
+                          </p>
+                        )}
+                      </div>
                     </div>
 
                     {/* Price */}
@@ -208,17 +210,19 @@ function AddJob({ popUpHandler }) {
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}
                       />
-                      {props.errors.price && props.touched.price && (
+                      <div className={`${!props.errors && "invisible"} h-5`}>
-                        <p className="text-sm text-red-500">
+                        {props.errors.price && props.touched.price && (
-                          {props.errors.price}
+                          <p className="text-sm text-red-500">
-                        </p>
+                            {props.errors.price}
-                      )}
+                          </p>
+                        )}
+                      </div>
                     </div>
                   </div>
 
                   {/* Title  */}
 
-                  <div className="field w-full mb-6">
+                  <div className="field w-full mb-[5px]">
                     <InputCom
                       fieldClass="px-6"
                       label="Title"
@@ -226,20 +230,21 @@ function AddJob({ popUpHandler }) {
                       inputBg="bg-slate-100"
                       type="text"
                       name="title"
-                      // placeholder="Enter Job Title"
                       value={props.values.title}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
                     />
-                    {props.errors.title && props.touched.title && (
+                    <div className={`${!props.errors && "invisible"} h-5`}>
-                      <p className="text-sm text-red-500">
+                      {props.errors.title && props.touched.title && (
-                        {props.errors.title}
+                        <p className="text-sm text-red-500">
-                      </p>
+                          {props.errors.title}
-                    )}
+                        </p>
+                      )}
+                    </div>
                   </div>
 
                   {/* Description  */}
-                  <div className="field w-full mb-6">
+                  <div className="field w-full mb-[5px]">
                     <InputCom
                       fieldClass="px-6"
                       label="Description"
@@ -247,20 +252,22 @@ function AddJob({ popUpHandler }) {
                       inputBg="bg-slate-100"
                       type="text"
                       name="description"
-                      // placeholder="Enter a description"
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
                     />
-                    {props.errors.description && props.touched.description && (
+                    <div className={`${!props.errors && "invisible"} h-5`}>
-                      <p className="text-sm text-red-500">
+                      {props.errors.description &&
-                        {props.errors.description}
+                        props.touched.description && (
-                      </p>
+                          <p className="text-sm text-red-500">
-                    )}
+                            {props.errors.description}
+                          </p>
+                        )}
+                    </div>
                   </div>
 
                   {/* Details */}
-                  <div className="field w-full mb-6">
+                  <div className="field w-full mb-[5px]">
                     <label
                       htmlFor="Job Delivery Details"
                       className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
@@ -277,14 +284,16 @@ function AddJob({ popUpHandler }) {
                       onChange={props.handleChange}
                       onBlur={props.handleBlur}
                     />
-                    {props.errors.job_detail && props.touched.job_detail && (
+                    <div className={`${!props.errors && "invisible"} h-5`}>
-                      <p className="text-sm text-red-500">
+                      {props.errors.job_detail && props.touched.job_detail && (
-                        {props.errors.job_detail}
+                        <p className="text-sm text-red-500">
-                      </p>
+                          {props.errors.job_detail}
-                    )}
+                        </p>
+                      )}
+                    </div>
                   </div>
 
-                  <div className="field w-full mb-6">
+                  <div className="field w-full mb-[5px]">
                     <div className={`flex items-center justify-between mb-2.5`}>
                       <label
                         className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
@@ -313,12 +322,14 @@ function AddJob({ popUpHandler }) {
                         </option>
                       ))}
                     </Field>
-                    {props.errors.timeline_days &&
+                    <div className={`${!props.errors && "invisible"} h-5`}>
-                      props.touched.timeline_days && (
+                      {props.errors.timeline_days &&
-                        <p className="text-sm text-red-500">
+                        props.touched.timeline_days && (
-                          {props.errors.timeline_days}
+                          <p className="text-sm text-red-500">
-                        </p>
+                            {props.errors.timeline_days}
-                      )}
+                          </p>
+                        )}
+                    </div>
                   </div>
                   {/* inputs ends here */}
                 </div>

src/components/Cards/AvailableJobsCard.jsx

@@ -1,10 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
-import { Link, useNavigate,  } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
-import localImgLoad from "../../lib/localImgLoad";
-import Icons from "../Helpers/Icons";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
 import usersService from "../../services/UsersService";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 export default function AvailableJobsCard({
   className,
@@ -12,44 +10,43 @@ export default function AvailableJobsCard({
   hidden = false,
 }) {
   //debugger;
-  const [addFavorite, setValue] = useState(datas.whishlisted);
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
-  const [manageInt, setManageInt] = useState(null)
+  const [manageInt, setManageInt] = useState(null);
+  const [imageUrl, setImageUrl] = useState("");
 
   const navigate = useNavigate();
   const apiCall = useMemo(() => new usersService(), []);
 
-
+  const marketInterestData = useCallback(async () => {
-  const favoriteHandler = () => {
-    if (!addFavorite) {
-      setValue(true);
-      toast.success("Added to Favorite List");
-    } else {
-      setValue(false);
-      toast.warn("Remove to Favorite List");
-    }
-  };
-
-  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)
+      setManageInt(manageIntRes);
     } catch (error) {
-      throw new Error(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()
+    marketInterestData();
-  }, [marketInterestData, datas])
+  }, []);
+
+  useEffect(() => {
+    const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
+    setImageUrl(imagePath);
+  }, []);
   return (
     <>
       <div
@@ -87,11 +84,9 @@ export default function AvailableJobsCard({
           </div>
           <div className="thumbnail-area w-full">
             <div
-              className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+              className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
               style={{
-                background: `url(${localImgLoad(
+                backgroundImage: `url('${imageUrl}')`,
-                  `images/${datas.thumbnil}`
-                )}) 0% 0% / cover no-repeat`,
               }}
             >
               <div className="flex justify-center">{datas.description}</div>
@@ -124,11 +119,14 @@ export default function AvailableJobsCard({
               <div className="flex items-center space-x-2">
                 <div>
                   <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
-                    {datas.price * 0.01}
+                    {/* {thePrice} | {datas.timeline_days} day(s) */}
-                    {datas.currency} | {datas.timeline_days} day(s)
+                    {thePrice}
                   </p>
                   <p className="text-sm text-lighter-gray">
-                    ( {datas.offer_code})
+                    ( {datas.offer_code}) |
+                    <span className="italic ml-1">
+                      {datas.timeline_days} day(s)
+                    </span>
                   </p>
                 </div>
               </div>
@@ -137,7 +135,7 @@ export default function AvailableJobsCard({
                   type="button"
                   className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
                   onClick={() => {
-                    setMarketPopUp({show: true, data: datas})
+                    setMarketPopUp({ show: true, data: datas });
                   }}
                 >
                   View

src/components/Cards/HomeBannerOffersCard.jsx

@@ -9,7 +9,6 @@ export default function HomeBannerOffersCard(props) {
     let { banner, banner_location } = props?.itemData;
     if (banner_location === "LOCAL") {
       const imagePath = require(`../../assets/images/${banner}`); // Replace with your directory path for local images
-      console.log("This is local");
       setImageUrl(imagePath);
     } else if (banner_location === "URL") setImageUrl(banner);
     else return null;
@@ -30,7 +29,6 @@ export default function HomeBannerOffersCard(props) {
               <span className="heroSilderTitle">{props.itemData.title}</span>
             </h1>
           </div>
-          {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
         </div>
         <div className="h-[233px]">
           <div className="siderCardDescription">

src/components/MarketPlace/MainSection.jsx

@@ -1,26 +1,38 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import DataIteration from "../Helpers/DataIteration";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";
 
-export default function MainSection({ className, marketPlaceProduct }) {
+export default function MainSection({
-  const [tab, setTab] = useState("all");
+  className,
-  const [products, setProducts] = useState(marketPlaceProduct);
+  marketPlaceProduct,
+  categories,
+}) {
+  // Creating All cart..
+  let marketCategories = useMemo(
+    () => ({ All: "All", ...categories }),
+    [categories]
+  );
+  const [tab, setTab] = useState(marketCategories.All);
+
+  // Convert to array in order to map
+  const mappedArray = Object.entries(marketCategories).map(([key, value]) => {
+    return { key, value };
+  });
+
+  const [products, setProducts] = useState([]);
   const tabHandler = (value) => {
     setTab(value);
   };
   useEffect(() => {
-    if (tab === "artist") {
+    if (tab === marketCategories.All) {
-      setProducts(marketPlaceProduct?.slice(0, 3));
-    } else if (tab === "market") {
-      setProducts(marketPlaceProduct?.slice(0, 6));
-    } else if (tab === "shop") {
-      setProducts(marketPlaceProduct?.slice(6, 9));
-    } else if (tab === "assets") {
-      setProducts(marketPlaceProduct?.slice(3, 6));
-    } else {
       setProducts(marketPlaceProduct);
+    } else {
+      const filteredProducts = marketPlaceProduct.filter((product) =>
+        product.category.includes(tab)
+      );
+      setProducts(filteredProducts);
     }
-  }, [tab, marketPlaceProduct]);
+  }, [tab, marketPlaceProduct, categories, marketCategories]);
 
   return (
     <div className={`market-place-section w-full ${className || ""}`}>
@@ -28,69 +40,20 @@ export default function MainSection({ className, marketPlaceProduct }) {
         <div className="filter-navigate-area lg:flex justify-between mb-8 items-center">
           <div className="tab-item lg:mb-0 mb-5">
             <div className="md:flex md:space-x-8 space-x-2">
-              <span
+              {mappedArray.map(({ key, value }) => (
-                onClick={() => tabHandler("all")}
+                <span
-                className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
+                  onClick={() => tabHandler(key)}
-                  tab === "all"
+                  className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
-                    ? "text-pink border-pink"
+                    tab === key
-                    : " border-transparent"
+                      ? "text-pink border-pink"
-                }`}
+                      : " border-transparent"
-              >
+                  }`}
-                All
+                >
-              </span>
+                  {value}
-
+                </span>
-
+              ))}
-              <span
-                onClick={() => tabHandler("artist")}
-                className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
-                  tab === "artist"
-                    ? "text-pink border-pink"
-                    : " border-transparent"
-                }`}
-              >
-                Featured Artist
-              </span>
-              <span
-                onClick={() => tabHandler("market")}
-                className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
-                  tab === "market"
-                    ? "text-pink border-pink"
-                    : " border-transparent"
-                }`}
-              >
-                Open Market
-              </span>
-              <span
-                onClick={() => tabHandler("shop")}
-                className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
-                  tab === "shop"
-                    ? "text-pink border-pink"
-                    : " border-transparent"
-                }`}
-              >
-                Partner Shops
-              </span>
-              <span
-                onClick={() => tabHandler("assets")}
-                className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
-                  tab === "assets"
-                    ? "text-pink border-pink"
-                    : " border-transparent"
-                }`}
-              >
-                Game Assets
-              </span>
-
-
             </div>
           </div>
-
-          {/*<div className="search-item flex lg:flex-none justify-end">*/}
-          {/*  <SearchCom*/}
-          {/*    className="lg:bg-transparent"*/}
-          {/*    inputClasses="lg:bg-transparent"*/}
-          {/*  />*/}
-          {/*</div>*/}
         </div>
         <div className="filter-navigate-content w-full min-h-screen">
           <div className="grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]">

src/components/MarketPlace/index.jsx

@@ -1,21 +1,22 @@
-import React from "react";
-// import products from "../../data/marketplace_data.json";
-//import CreateNft from "../Home/CreateNft";
 import Layout from "../Partials/Layout";
 import MainSection from "./MainSection";
 import CommonHead from "../UserHeader/CommonHead";
 import { useSelector } from "react-redux";
 
-export default function MarketPlace({commonHeadData}) {
+export default function MarketPlace({ commonHeadData }) {
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
+  const categories = jobLists?.categories;
 
-  // const marketProduct = products.data;
   return (
     <>
       <Layout>
-        <CommonHead  commonHeadData={commonHeadData} />
+        <CommonHead commonHeadData={commonHeadData} />
-        <MainSection marketPlaceProduct={marketData} className="mb-10" />
+        <MainSection
+          marketPlaceProduct={marketData}
+          categories={categories}
+          className="mb-10"
+        />
       </Layout>
     </>
   );

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -48,12 +48,13 @@ export default function ManageInterestOffer(props) {
                 setRequestStatus({loading: false, status: false, message: 'Unable to complete request', processType: ''})
                 return
             }
-            setInterval(() => {  // SETS REDIRECT COUNT DOWN
+            let intervalTime = setInterval(() => {  // SETS REDIRECT COUNT DOWN
                 setRedirectTime(prev => prev - 1)
             }, 1000);
             setRequestStatus({loading: false, status: true, message: `Offer ${name}ed`, processType: ''})
             setTimeout(()=>{
                 navigate('/offer-interest', {replace: true})
+                clearInterval(intervalTime)
             },5000)
         }).catch(err => {
             setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong. Try again', processType: ''})

src/components/Referral/Index.jsx

@@ -1,13 +1,13 @@
-import React from 'react'
+import React from "react";
-import Layout from '../Partials/Layout'
+import Layout from "../Partials/Layout";
-import ReferralDisplay from './ReferralDisplay'
+import ReferralDisplay from "./ReferralDisplay";
 
 function Referral() {
   return (
     <Layout>
-        <ReferralDisplay />
+      <ReferralDisplay />
     </Layout>
-  )
+  );
 }
 
-export default Referral
+export default Referral;

src/components/Referral/ReferralDisplay.jsx

@@ -10,25 +10,25 @@ import * as Yup from "yup";
 import ReferralTable from "../MyWallet/WalletComponent/ReferralTable";
 
 const validationSchema = Yup.object().shape({
-  email: Yup.string()
+  ref_email: Yup.string()
     .email("Wrong email format")
     .min(3, "Minimum 3 characters")
     .max(50, "Maximum 50 characters")
     .required("Email is required"),
-  firstname: Yup.string()
+  ref_firstname: Yup.string()
     .min(3, "Minimum 3 characters")
     .max(25, "Maximum 25 characters")
     .required("Firstname is required"),
-  lastname: Yup.string()
+  ref_lastname: Yup.string()
     .min(3, "Minimum 3 characters")
     .max(25, "Maximum 25 characters")
     .required("Lastname is required"),
 });
 
 const initialValues = {
-  firstname: "",
+  ref_firstname: "",
-  lastname: "",
+  ref_lastname: "",
-  email: "",
+  ref_email: "",
 };
 
 function ReferralDisplay() {
@@ -121,12 +121,9 @@ function ReferralDisplay() {
         <div className="sm:flex justify-between items-center mb-6">
           <div className="mb-5 sm:mb-0">
             <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                <span>
+              <span>Refer a Friend</span>
-                 Refer a Friend
-                </span>
             </h1>
           </div>
-
         </div>
 
         <div className="referral w-full  md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
@@ -147,17 +144,18 @@ function ReferralDisplay() {
                       fieldClass="px-6"
                       label="Firstname"
                       type="text"
-                      name="firstname"
+                      name="ref_firstname"
                       placeholder="Firstname"
-                      value={props.values.firstname}
+                      value={props.values.ref_firstname}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
                     />
-                    {props.errors.firstname && props.touched.firstname && (
+                    {props.errors.ref_firstname &&
-                      <p className="text-sm text-red-500">
+                      props.touched.ref_firstname && (
-                        {props.errors.firstname}
+                        <p className="text-sm text-red-500">
-                      </p>
+                          {props.errors.ref_firstname}
-                    )}
+                        </p>
+                      )}
                   </div>
 
                   {/* Lastname */}
@@ -166,17 +164,18 @@ function ReferralDisplay() {
                       fieldClass="px-6"
                       label="Lastname"
                       type="text"
-                      name="lastname"
+                      name="ref_lastname"
                       placeholder="Lastname"
-                      value={props.values.lastname}
+                      value={props.values.ref_lastname}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
                     />
-                    {props.errors.lastname && props.touched.lastname && (
+                    {props.errors.ref_lastname &&
-                      <p className="text-sm text-red-500">
+                      props.touched.ref_lastname && (
-                        {props.errors.lastname}
+                        <p className="text-sm text-red-500">
-                      </p>
+                          {props.errors.ref_lastname}
-                    )}
+                        </p>
+                      )}
                   </div>
                 </div>
 
@@ -185,14 +184,16 @@ function ReferralDisplay() {
                     fieldClass="px-6"
                     label="Email"
                     type="text"
-                    name="email"
+                    name="ref_email"
                     placeholder="Email"
-                    value={props.values.email}
+                    value={props.values.ref_email}
                     inputHandler={props.handleChange}
                     blurHandler={props.handleBlur}
                   />
-                  {props.errors.email && props.touched.email && (
+                  {props.errors.ref_email && props.touched.ref_email && (
-                    <p className="text-sm text-red-500">{props.errors.email}</p>
+                    <p className="text-sm text-red-500">
+                      {props.errors.ref_email}
+                    </p>
                   )}
                 </div>
 
@@ -206,7 +207,8 @@ function ReferralDisplay() {
                   ) : (
                     <button
                       type="submit"
-                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"                    >
+                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                    >
                       Send Message
                     </button>
                   )}
@@ -221,14 +223,12 @@ function ReferralDisplay() {
             Referral List
           </h2>
           {referralList.loading ? (
-              <LoadingSpinner size="32" color="sky-blue" />
+            <LoadingSpinner size="32" color="sky-blue" />
           ) : (
-              <ReferralTable history={referralList} />
+            <ReferralTable history={referralList} />
           )}
         </div>
       </div>
-
-
     </div>
   );
 }

src/views/ReferralPage.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import React from "react";
-import Referral from '../components/Referral/Index'
+import Referral from "../components/Referral/Index";
 
 function ReferralPage() {
   return (
     <>
-    <Referral />
+      <Referral />
     </>
-  )
+  );
 }
 
-export default ReferralPage
+export default ReferralPage;