delete and edit icon seperator width reduced

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,19 +1,18 @@
-import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Field, Form, Formik } from "formik";
+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("Invalid number")
     .min(1, "Price must be greater than 0")
     .test("no-e", "Invalid number", (value) => {
@@ -44,11 +43,9 @@ const validationSchema = Yup.object().shape({
 
 function AddJob({ popUpHandler, categories }) {
   const ApiCall = new usersService();
+
   let dispatch = useDispatch();
 
-  let { userDetails } = useSelector((state) => state.userDetails);
-
-  const [numberValue, setNumberValue] = useState("");
   let [currency, setCurrency] = useState({
     loading: true,
     status: false,
@@ -57,7 +54,7 @@ function AddJob({ popUpHandler, categories }) {
 
   let initialValues = {
     // initial values for formik
-    currency: "",
+    country: "",
     price: "",
     title: "",
     description: "",
@@ -96,9 +93,18 @@ function AddJob({ popUpHandler, categories }) {
 
   // 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({
@@ -106,6 +112,9 @@ function AddJob({ popUpHandler, categories }) {
             status: false,
             message: "Could not complete your request at the moment",
           });
+          setTimeout(() => {
+            popUpHandler();
+          }, 1500);
           return;
         }
         setRequestStatus({
@@ -136,8 +145,6 @@ function AddJob({ popUpHandler, categories }) {
     getUserCurrency();
   }, []);
 
-  console.log("Currency >> ", currency.data);
-
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
       <Formik
@@ -154,16 +161,20 @@ function AddJob({ popUpHandler, categories }) {
                   <div className="xl:flex xl:space-x-7 mb-[5px]">
                     <div className="field w-full mb-6 xl:mb-0">
                       <label
-                        htmlFor="currency"
+                        htmlFor="country"
                         className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
                       >
                         Currency
                       </label>
                       <select
-                        id="currency"
-                        name="currency"
-                        value={props.values.currency}
-                        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`}
+                        id="country"
+                        name="country"
+                        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 ${
+                          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}
                       >
@@ -259,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}
@@ -281,7 +296,7 @@ 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"
@@ -294,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]">
@@ -322,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>
@@ -412,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/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">
-            [ {props.itemData.button_text} ]
-          </div>
+          <button className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+             {props.itemData.button_text}
+          </button>
         </div>
       </div>
     </Link>

src/components/Helpers/CountDown.jsx

@@ -1,59 +1,64 @@
-/* eslint-disable no-underscore-dangle */
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 function CountDown({ lastDate = "" }) {
-  //   const [showDate, setDate] = useState(0);
-  const [showHour, setHour] = useState(0);
-  const [showMinute, setMinute] = useState(0);
-  const [showSecound, setDateSecound] = useState(0);
-  // count Down
-  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();
-    }
+  // State to store the countdown values
+  const [countdownValues, setCountdownValues] = useState({
+    showHour: 0,
+    showMinute: 0,
+    showSecond: 0,
   });
+
+  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)=>(
-                <Icons key={index} name={item} />
-              ))
-            }
+            {iconName.split(" ").map((item, index) => (
+              <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({
-    loading: false,
-    data: {},
-    state: undefined,
-  });
-  const [manageInt, setManageInt] = useState({
-    loading: false,
-    data: {},
-    state: undefined,
-    msg: "",
-  });
+  const MarketCalls = (details) => {
+    const [marketMsg, setMarketMsg] = useState({
+      loading: false,
+      data: {},
+      state: undefined,
+    });
+    const [manageInt, setManageInt] = useState({
+      loading: false,
+      data: {},
+      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(
-    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 { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(details);
 
   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.delivery_date.split(" ")[0]}
+                {props?.details && 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 description = details.status_description
+    let owner = details?.owner_status
+    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>

src/components/MyJobs/index.jsx

@@ -9,12 +9,11 @@ export default function MyJobs(props) {
   let { state } = useLocation();
   const navigate = useNavigate();
   const [popUp, setPopUp] = useState(false);
-
-  console.log(state)
   const popUpHandler = () => {
     setPopUp((prev) => !prev);
 
-    if (state?.popup) navigate("/", { replace: true });
+    if (state?.popup) navigate("/", { replace: true })
+    else return
   };
 
   const categoryOptions = props.MyJobList?.data?.categories;

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">
-                              {task?.delivery_date}
-                            </span>
+                            <span className="text-purple ml-1">{dueDate}</span>
                           </span>
                           <span className="text-sm text-thin-light-gray">
                             Confirmation:

src/components/MyWaitingJobs/MyWaitingJobTable.jsx

@@ -1,9 +1,9 @@
-import React, { useState } from "react";
+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 PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 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
@@ -31,18 +31,13 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
         <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>
-              {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
-              {/*    <td className="py-4">All Product</td>*/}
-              {/*    <td className="py-4 text-right">.</td>*/}
-              {/*</tr>*/}
-
               {
                 <>
                   {MyJobList &&
                   MyJobList?.result_list &&
                   MyJobList.result_list.length > 0 ? (
                     currentActiveJobList.map((value, index) => {
-                      let deliveryDate = value?.expire?.split(" ")[0];
+                      // let deliveryDate = value?.expire?.split(" ")[0];
                       let thePrice = PriceFormatter(
                         value?.price * 0.01,
                         value?.currency_code,
@@ -78,21 +73,21 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
                                     Duration:{" "}
                                     <span className="text-purple">
                                       {" "}
-                                      {value.timeline_days} day(s)
+                                      {value?.timeline_days} day(s)
                                     </span>
                                   </span>
                                   <span className="text-sm text-thin-light-gray">
                                     Expire:{" "}
                                     <span className="text-purple">
                                       {" "}
-                                      {deliveryDate}
+                                      {value?.expire}
                                     </span>
                                   </span>
                                   <span className="text-sm text-thin-light-gray">
                                     Sent :{" "}
                                     <span className="text-purple">
                                       {" "}
-                                      {value.sent}
+                                      {value?.sent}
                                     </span>
                                   </span>
                                 </div>
@@ -143,7 +138,7 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
 
       {/* Active Job Popout */}
       {jobPopout.show && (
-        <PendingJobsPopout
+        <MarketPopUp
           details={jobPopout.data}
           onClose={() => {
             setJobPopout({ show: false, data: {} });

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -105,8 +105,8 @@ export default function ManageInterestOffer(props) {
     useEffect(()=>{ //API to get Offer Interest message list
         let reqData = { // API PAYLOADS
             msg_type: 'MRKTINT',
-            offer_uid: props.offerDetails.offer_uid,
-            interest_uid: props.offerDetails.interest_uid
+            offer_uid: props.offerDetails?.offer_uid,
+            interest_uid: props.offerDetails?.interest_uid
         }
         setMessageList(prev => ({...prev, loading: true}))
         apiCall.offerInterestListMsg(reqData).then(res=>{
@@ -359,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">
@@ -370,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 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>
+                            <p className="mb-4 p-3">No list avaliable.</p>
                         </div>
                     )
             }

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 profileBanner from "../../assets/images/profile-cover.png";
-import collections from "../../data/collectionplan_data.json";
-import marketPlace from "../../data/marketplace_data.json";
+// import authProfilePic from "../../assets/images/auth-profile-picture.png";
+// import profileBanner from "../../assets/images/profile-cover.png";
+// import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
+// 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() {
-  const onSaleProducts = marketPlace.data;
-  const CreatedSell = marketPlace.data;
-  const CreatedBits = products.datas;
+export default function Resources(props) {
+  // console.log("RESOURCES=>", props);
   // const mainProducts = products.datas;
   const ownProducts = products.datas;
-  const collectionProducts = collections.data;
 
-  const tabs = [
-    {
-      id: 1,
-      name: "onsale",
-      content: "On Sale",
-    },
-    {
-      id: 2,
-      name: "owned",
-      content: "Owned",
-    },
-    {
-      id: 3,
-      name: "created",
-      content: "Created",
-    },
-    {
-      id: 4,
-      name: "hidden",
-      content: "Hidden",
-    },
-    {
-      id: 5,
-      name: "collection",
-      content: "Collection",
-    },
-    {
-      id: 6,
-      name: "activity",
-      content: "Activity",
-    },
-  ];
+  // Resource Props
+  const __resources = props.MyResourceData;
+
+  // Collection Items
+  const collectionProducts = __resources?.collectiondata?.data;
+  const tab_categories = __resources?.tab_categories?.data;
+  const onSaleProducts = __resources?.marketdata?.data;
+  const CreatedSell = __resources?.marketdata?.data;
+  const CreatedBits = __resources?.productdata?.data;
+
+  const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
 
-  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">
-            <div className="content-wrapper-profile-only w-full mb-6">
-              <div className="auth-tab-content relative mb-10">
-                <div className="lg:flex justify-between">
-                  <div className="tab-items">
-                    <ul className="lg:flex lg:space-x-14 space-x-8">
-                      {tabs &&
-                        tabs.length > 0 &&
-                        tabs.map((tabValue) => (
-                          <li
-                            key={tabValue.id}
-                            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 ${
-                                tab === tabValue.name
-                                  ? "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 ${
-                                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>
+          {props.MyResourceData.length == 0 ||
+          Object.keys(props.MyResourceData).length == 0 ? (
+            <div className="w-full h-full flex items-center justify-center">
+              <LoadingSpinner size={16} color="sky-blue" />
+            </div>
+          ) : (
+            <div className="main-wrapper w-full">
+              <div className="content-wrapper-profile-only w-full mb-6">
+                <div className="auth-tab-content relative mb-10">
+                  <div className="lg:flex justify-between">
+                    <div className="tab-items">
+                      <ul className="lg:flex lg:space-x-14 space-x-8">
+                        <TabList tabCategories={tab_categories} />
+                      </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>
+                  <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 }) {
-    return (
-        <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 || ""
-            }`}
-        >
-            {commonHeadData?.length > 0 && <RecomendedSliders bannerData={commonHeadData}  /> }
-            {/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
-            {/*    /!*<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*!/*/}
-            {/*    /!*</h1>*!/*/}
-            {/*    /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
-            {/*    /!*    some space for extra texts here*!/*/}
-            {/*    /!*</p>*!/*/}
-            {/*   */}
-            {/*</div>*/}
-            {/*<div className="flex-1 flex lg:justify-end">*/}
-            {/*    <div className="flex items-center space-x-5">*/}
-            {/*        <Link*/}
-            {/*            to="/mytask"*/}
-            {/*            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
-            {/*        >*/}
-            {/*           View Task*/}
-            {/*        </Link>*/}
+export default function CommonHead({ className, commonHeadData }) {
+  return (
+    <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 || ""
+      }`}
+    >
+      {commonHeadData?.length > 0 && (
+        <RecomendedSliders bannerData={commonHeadData} />
+      )}
+      {/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
+      {/*    /!*<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*!/*/}
+      {/*    /!*</h1>*!/*/}
+      {/*    /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
+      {/*    /!*    some space for extra texts here*!/*/}
+      {/*    /!*</p>*!/*/}
+      {/*   */}
+      {/*</div>*/}
+      {/*<div className="flex-1 flex lg:justify-end">*/}
+      {/*    <div className="flex items-center space-x-5">*/}
+      {/*        <Link*/}
+      {/*            to="/mytask"*/}
+      {/*            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
+      {/*        >*/}
+      {/*           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 }) {
-    const settings = {
-        arrows: false,
-        dots: false,
-        infinite: bannerData.length > 4 ? true : false,
-        autoplay: true,
-        slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
-        slidesToScroll: 1,
-        responsive: [
-            {
-                breakpoint: 426,
-                settings: {
-                    infinite: bannerData.length > 2 ? true : false,
-                    slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
-                    slidesToScroll: 1,
-                },
-            },
-        ],
-    };
-    const sellSlider = useRef(null);
-    const buySlider = useRef(null);
-    const prevHandler = (value) => {
-        if (value === "sell") {
-            sellSlider.current.slickPrev();
-        }
-        if (value === "buy") {
-            buySlider.current.slickPrev();
-        }
-    };
-    const nextHandler = (value) => {
-        if (value === "sell") {
-            sellSlider.current.slickNext();
-        }
-        if (value === "buy") {
-            buySlider.current.slickNext();
-        }
-    };
-    return (
-        <>
-            {/*<div className="heading flex justify-between items-center mb-4">*/}
-            {/*    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
-            {/*        Top Seller*/}
-            {/*    </h1>*/}
-            {/*    <div className="slider-btns flex space-x-4">*/}
-            {/*        <button*/}
-            {/*            onClick={() => nextHandler("sell")}*/}
-            {/*            type="button"*/}
-            {/*            className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
-            {/*        >*/}
-            {/*            <Icons name="arrows" />*/}
-            {/*        </button>*/}
-            {/*        <button*/}
-            {/*            onClick={() => prevHandler("sell")}*/}
-            {/*            type="button"*/}
-            {/*            className="transform rotate-180"*/}
-            {/*        >*/}
-            {/*            <div className="  text-dark-gray dark:text-white">*/}
-            {/*                <svg*/}
-            {/*                    width="11"*/}
-            {/*                    height="19"*/}
-            {/*                    viewBox="0 0 11 19"*/}
-            {/*                    fill="none"*/}
-            {/*                    xmlns="http://www.w3.org/2000/svg"*/}
-            {/*                >*/}
-            {/*                    <path*/}
-            {/*                        d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
-            {/*                        stroke="url(#paint0_linear_220_23410)"*/}
-            {/*                        strokeWidth="2"*/}
-            {/*                        strokeLinecap="round"*/}
-            {/*                        strokeLinejoin="round"*/}
-            {/*                    />*/}
-            {/*                    <defs>*/}
-            {/*                        <linearGradient*/}
-            {/*                            id="paint0_linear_220_23410"*/}
-            {/*                            x1="9.09766"*/}
-            {/*                            y1="1.1499"*/}
-            {/*                            x2="-4.2474"*/}
-            {/*                            y2="7.96749"*/}
-            {/*                            gradientUnits="userSpaceOnUse"*/}
-            {/*                        >*/}
-            {/*                            <stop stopColor="#F539F8" />*/}
-            {/*                            <stop offset="0.416763" stopColor="#C342F9" />*/}
-            {/*                            <stop offset="1" stopColor="#5356FB" />*/}
-            {/*                        </linearGradient>*/}
-            {/*                    </defs>*/}
-            {/*                </svg>*/}
-            {/*            </div>*/}
-            {/*        </button>*/}
-            {/*    </div>*/}
-            {/*</div>*/}
-            <div className="slider-content">
-                <SliderCom settings={settings} selector={sellSlider}>
-                    {bannerData.map((item, index) => (
-                        <Link key={index} to={`/${item.link_path}`}>
-                            <div className="item">
-                                <div className={`commonHeaderSliderItem flex flex-col justify-between items-center ${item.short_style}`}>
-                                    {/* title */}
-                                    <div className="flex justify-center">
-                                        <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                            {item.short_title}
-                                        </p>
-                                    </div>
-                                    {/* username */}
-                                    <div className="flex justify-center mb-1">
-                                        <p className="text-xs text-thin-light-gray">
-                                            {item.short_description}
-                                        </p>
-                                    </div>
-                                    {/* items */}
-                                    <div className="flex justify-center">
-                                        <div className="flex space-x-1 items-center text-purple text-xs">
-                                            <span>{item.short_button_text}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </Link>
-                    ))}
-                </SliderCom>
-            </div>
-        </>
-    );
+export default function RecomendedSliders({ className, bannerData }) {
+  const settings = {
+    arrows: false,
+    dots: false,
+    infinite: bannerData.length > 4 ? true : false,
+    autoplay: true,
+    slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: 426,
+        settings: {
+          infinite: bannerData.length > 2 ? true : false,
+          slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
+  const sellSlider = useRef(null);
+  const buySlider = useRef(null);
+  const prevHandler = (value) => {
+    if (value === "sell") {
+      sellSlider.current.slickPrev();
+    }
+    if (value === "buy") {
+      buySlider.current.slickPrev();
+    }
+  };
+  const nextHandler = (value) => {
+    if (value === "sell") {
+      sellSlider.current.slickNext();
+    }
+    if (value === "buy") {
+      buySlider.current.slickNext();
+    }
+  };
+  return (
+    <>
+      {/*<div className="heading flex justify-between items-center mb-4">*/}
+      {/*    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
+      {/*        Top Seller*/}
+      {/*    </h1>*/}
+      {/*    <div className="slider-btns flex space-x-4">*/}
+      {/*        <button*/}
+      {/*            onClick={() => nextHandler("sell")}*/}
+      {/*            type="button"*/}
+      {/*            className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
+      {/*        >*/}
+      {/*            <Icons name="arrows" />*/}
+      {/*        </button>*/}
+      {/*        <button*/}
+      {/*            onClick={() => prevHandler("sell")}*/}
+      {/*            type="button"*/}
+      {/*            className="transform rotate-180"*/}
+      {/*        >*/}
+      {/*            <div className="  text-dark-gray dark:text-white">*/}
+      {/*                <svg*/}
+      {/*                    width="11"*/}
+      {/*                    height="19"*/}
+      {/*                    viewBox="0 0 11 19"*/}
+      {/*                    fill="none"*/}
+      {/*                    xmlns="http://www.w3.org/2000/svg"*/}
+      {/*                >*/}
+      {/*                    <path*/}
+      {/*                        d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
+      {/*                        stroke="url(#paint0_linear_220_23410)"*/}
+      {/*                        strokeWidth="2"*/}
+      {/*                        strokeLinecap="round"*/}
+      {/*                        strokeLinejoin="round"*/}
+      {/*                    />*/}
+      {/*                    <defs>*/}
+      {/*                        <linearGradient*/}
+      {/*                            id="paint0_linear_220_23410"*/}
+      {/*                            x1="9.09766"*/}
+      {/*                            y1="1.1499"*/}
+      {/*                            x2="-4.2474"*/}
+      {/*                            y2="7.96749"*/}
+      {/*                            gradientUnits="userSpaceOnUse"*/}
+      {/*                        >*/}
+      {/*                            <stop stopColor="#F539F8" />*/}
+      {/*                            <stop offset="0.416763" stopColor="#C342F9" />*/}
+      {/*                            <stop offset="1" stopColor="#5356FB" />*/}
+      {/*                        </linearGradient>*/}
+      {/*                    </defs>*/}
+      {/*                </svg>*/}
+      {/*            </div>*/}
+      {/*        </button>*/}
+      {/*    </div>*/}
+      {/*</div>*/}
+      <div className="slider-content">
+        <SliderCom settings={settings} selector={sellSlider}>
+          {bannerData.map((item, index) => (
+            <Link key={index} to={`/${item.link_path}`}>
+              <div className="item">
+                <div
+                  className={`commonHeaderSliderItem flex gap-1 flex-col justify-between items-center ${item.short_style}`}
+                >
+                  {/* title */}
+                  <div className="flex justify-center items-center text-center">
+                    <p className="text-base font-bold   text-dark-gray dark:text-white">
+                      {item.short_title}
+                    </p>
+                  </div>
+                  {/* username */}
+                  <div className="flex justify-center mb-1">
+                    <p className="text-xs text-thin-light-gray text-justify">
+                      {item.short_description}
+                    </p>
+                  </div>
+                  {/* items */}
+                  <div className="flex justify-center">
+                    <div className="flex space-x-1 items-center text-purple text-xs">
+                      <span>{item.short_button_text}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </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 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 React, { useCallback, useMemo, useState } from "react";
 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
-    currency: details.currency,
-    price: details?.price,
+    country: details.currency,
+    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?.currency;
+      setRequestStatus({ loading: true, message: "" });
+
       try {
         let res = await jobApi.jobManagerUpdateJob(reqData);
         let { data } = await res;
@@ -93,7 +105,6 @@ const EditJobPopOut = ({
     [jobApi, navigate, onClose, details]
   );
 
-  console.log(details)
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
       <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
@@ -146,8 +157,8 @@ const EditJobPopOut = ({
                           inputBg="bg-slate-100"
                           inputClass="input-curve lg border border-light-purple"
                           type="text"
-                          name="currency"
-                          value={props.values.currency}
+                          name="country"
+                          value={props.values.country}
                           inputHandler={props.handleChange}
                           blurHandler={props.handleBlur}
                           disable={true}
@@ -221,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}
@@ -256,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">
@@ -286,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

@@ -66,12 +66,12 @@
   width: 100%;
   text-align: center;
 }
-.commonHeaderSliderItem{
+.commonHeaderSliderItem {
   background-color: aliceblue;
   border-radius: 10px;
-  margin: 0px 5px 0px 5px;
-  height: 95px;
-  padding: 5px;
+  height: 100px;
+  margin: 0 5px;
+  padding: 10px;
 }
 
 .short_style{

src/views/ManageActiveJobs.jsx

@@ -1,47 +1,61 @@
-import React, {useState, useEffect} from 'react'
-import ActiveJobs from '../components/MyActiveJobs/ActiveJobs'
-import { useLocation, useNavigate } from 'react-router-dom'
-import usersService from '../services/UsersService'
+import React, { useState, useEffect } from "react";
+import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
+import { useLocation, useNavigate } from "react-router-dom";
+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 {state} = useLocation()
+  let [details, setDetails] = useState({}); // to hold state values
 
-  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
-    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: []})
-    })
-  }
-
-  useEffect(()=>{
-    if(!state){
-      navigate('/', {replace: true})
-      return
+  useEffect(() => {
+    if (!state) {
+      navigate("/", { replace: true });
+      return;
     }
-    setDetails(state)
-    getActiveJobMesList()
-  },[activeJobMesListReload])
+    setDetails(state);
+    getActiveJobMesList();
+  }, [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
-          commonHeadData={commonHeadBanner?.result_list} />
+      <MarketPlace 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)
-    const [MyJobList, setMyJobList] = useState([]);
-    const api = new usersService();
-//TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive
-    const getMyJobList = async () => {
-        try {
-            const res = await api.getMyActiveJobList();
-            setMyJobList(res.data);
-        } catch (error) {
-            console.log("Error getting mode");
-        }
-    };
-    useEffect(() => {
-        getMyJobList();
-    }, []);
+  let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
+  const [MyJobList, setMyJobList] = useState([]);
+  const api = new usersService();
+  //TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive
+  const getMyJobList = async () => {
+    try {
+      const res = await api.getMyActiveJobList();
+      setMyJobList(res.data);
+    } catch (error) {
+      console.log("Error getting mode");
+    }
+  };
+  useEffect(() => {
+    getMyJobList();
+  }, []);
 
-    // debugger;
-    return (
-        <>
-            <MyActiveJobs
-                MyJobList={MyJobList}
-                commonHeadData={commonHeadBanner.result_list}
-            />
-        </>
-    );
+  // debugger;
+  return (
+    <>
+      <MyActiveJobs
+        MyJobList={MyJobList}
+        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

@@ -1,33 +1,32 @@
-import React, { useContext, useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import usersService from "../services/UsersService";
-import MyPendingJobs from "../components/MyPendingJobs";
 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();
+  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();
-    }, []);
+  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}
-            />
-        </>
-    );
-}
+  // debugger;
+  return (
+    <>
+      <MyWaitingJobs
+        MyJobList={MyJobList}
+        commonHeadData={commonHeadBanner.result_list}
+      />
+    </>
+  );
+}

src/views/ResourcePage.jsx

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