btn style customized

.env

@@ -85,3 +85,9 @@ REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
 REACT_APP_MAX_FAMILY_MEMBERS=8
 
 REACT_APP_SHOW_OFFER_GROUP_JOB=0
+
+#UPLOAD PROFILE PICTURE
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

.env.development

@@ -53,3 +53,9 @@ REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
 REACT_APP_MAX_FAMILY_MEMBERS=8
 
 REACT_APP_SHOW_OFFER_GROUP_JOB=0
+
+#UPLOAD PROFILE PICTURE
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

.env.production

@@ -59,3 +59,9 @@ REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
 REACT_APP_MAX_FAMILY_MEMBERS=8
 
 REACT_APP_SHOW_OFFER_GROUP_JOB=0
+
+#UPLOAD PROFILE PICTURE
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

package.json

@@ -21,6 +21,7 @@
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
     "react-dom": "^18.2.0",
+    "react-google-recaptcha": "^3.1.0",
     "react-qr-code": "^2.0.11",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.0.2",

src/components/AuthPages/ForgotPassword/index.jsx

@@ -7,6 +7,8 @@ import AuthLayout from "../AuthLayout";
 import EmailValidator from "../../../lib/EmailValidator";
 import ForgetPwdResponse from "../ForgetPwdResponse";
 
+import ReCAPTCHA from "react-google-recaptcha";
+
 export default function ForgotPassword() {
   const [checked, setValue] = useState(false);
   const [resetLoading, setResetLoading] = useState(false);
@@ -22,9 +24,18 @@ export default function ForgotPassword() {
     setMail(e?.target.value);
   };
 
-  const humanChecker = () => {
-    setValue(!checked);
-  };
+  // const humanChecker = () => {
+  //   setValue(!checked);
+  // };
+
+  function humanChecker(value) {
+    // console.log("Captcha value:", value);
+    if(value){
+      setValue(true)
+    }else{
+      setValue(false)
+    }
+  }
 
   const resetHandler = async () => {
     if (email == "") {
@@ -113,10 +124,16 @@ export default function ForgotPassword() {
                     />
                   </div>
                   {/* hCaptha clone for the time being */}
-                  <div className="mb-10">
+                  <div className="mb-10 flex justify-center w-full">
+                    <ReCAPTCHA
+                      sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                      onChange={humanChecker}
+                    />
+                  </div>
+                  {/* <div className="mb-10">
                     <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
                       <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
-                        {/* Checkbox */}
+                        
                         <div className="h-full relative inline-block">
                           <div className="relative table top-0 h-full">
                             <div className="table-cell align-middle">
@@ -148,18 +165,25 @@ export default function ForgotPassword() {
                         <div className="h-full relative inline-block w-16"></div>
                       </div>
                     </div>
-                  </div>
+                  </div> */}
                   {msgError && (
                     <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
                       {msgError}
                     </div>
                   )}
                   <div className="signin-area mb-3.5">
-                    <div className="flex justify-center items-center gap-2">
+                    <div className="flex justify-center items-center gap-4">
+                    <button
+                        type="button"
+                        onClick={() => navigate("/login")}
+                        className={`rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      >
+                        Cancel
+                      </button>
                       <button
                         type="button"
                         onClick={resetHandler}
-                        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                        className={`rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                       >
                         {resetLoading ? (
                           <div className="signup btn-loader"></div>
@@ -167,13 +191,6 @@ export default function ForgotPassword() {
                           <span>Send Code</span>
                         )}
                       </button>
-                      <button
-                        type="button"
-                        onClick={() => navigate("/login")}
-                        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
-                      >
-                        Cancel
-                      </button>
                     </div>
                   </div>
                 </div>

src/components/AuthPages/Login/index.jsx

@@ -320,7 +320,7 @@ export default function Login() {
                           onClick={doLogin}
                           type="button"
                           disabled={loginLoading}
-                          className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                          className={`btn-login  rounded-full mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
                         >
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>
@@ -433,7 +433,7 @@ export default function Login() {
                           onClick={doLogin}
                           disabled={loginLoading}
                           type="button"
-                          className={`btn-login  rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                          className={`btn-login  rounded-full text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
                         >
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>

src/components/AuthPages/SignUp/index.jsx

@@ -325,7 +325,7 @@ export default function SignUp() {
                       disabled={countries.loading}
                       type="button"
                       onClick={handleSignUp}
-                      className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+                      className={`rounded-full mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
                     >
                       {signUpLoading ? (
                         <div className="signup btn-loader"></div>

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -1,12 +1,10 @@
 import React, {
   Suspense,
   lazy,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-  useTransition,
 } from "react";
 import { useReactToPrint } from "react-to-print";
 import profile from "../../assets/images/profile-info-profile.png";
@@ -29,27 +27,62 @@ export default function FamilyManageTabs({
   listReload,
   loader,
 }) {
+  // Initial state for family details
+  const initialDetailState = {
+    loading: false,
+    data: null,
+  };
+
+  // State for family details, tasks, waitlist, and pending
   const [details, setDetails] = useState({
-    familyDetails: { loading: false, data: null },
-    familyTasks: { loading: false, data: null },
-    familyWaitList: { loading: false, data: null },
-    familyPending: { loading: false, data: null },
+    familyDetails: { ...initialDetailState },
+    familyTasks: { ...initialDetailState },
+    familyWaitList: { ...initialDetailState },
+    familyPending: { ...initialDetailState },
   });
+
+  // Function to reset family details, tasks, waitlist, and pending
+  const resetDetails = () => {
+    setDetails({
+      familyDetails: { ...initialDetailState },
+      familyTasks: { ...initialDetailState },
+      familyWaitList: { ...initialDetailState },
+      familyPending: { ...initialDetailState },
+    });
+  };
+
+  // State for family task data
+  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
+
+  // State for active task
+  const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
+
+  // State for error messages
   const [errMsg, setErrMsg] = useState("");
+
+  // State for family task popout
   const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+
+  // State for profile image
   const [profileImg, setProfileImg] = useState(profile);
+
+  // Ref for profile image input
   const profileImgInput = useRef(null);
-  const [isPending, startTransition] = useTransition();
+
+  // Create an instance of the usersService class
   const apiCall = useMemo(() => new usersService(), []);
 
+  // Function to handle toggling the family task popout
   const familyPopUpHandler = () => {
     setFamilyTaskPopout((prev) => !prev);
   };
 
+  // Function to trigger a click on the hidden profile image input
   const browseProfileImg = () => {
     profileImgInput.current.click();
   };
 
+  // Function to handle changes in the profile image input
   const profileImgChangeHandler = (e) => {
     if (e.target.value !== "") {
       const imgReader = new FileReader();
@@ -60,82 +93,30 @@ export default function FamilyManageTabs({
     }
   };
 
-  const manageFamily = useCallback(async () => {
-    try {
-      setDetails((prevDetails) => ({
-        ...prevDetails,
-        familyDetails: { loading: true },
-        familyTasks: { loading: true },
-        familyWaitList: { loading: true },
-        familyPending: { loading: true },
-      }));
-
-      const { family_uid } = accountDetails;
-      const reqData = { family_uid };
-
-      const [familyRes, tasksRes, familyWaitRes, familyPending] =
-        await Promise.all([
-          apiCall.ManageFamily(reqData),
-          apiCall.ManageTasks(reqData),
-          apiCall.ManageFamilyWaitlist(),
-          apiCall.ManageFamilyPending(),
-        ]);
-
-      const familyData = familyRes.data;
-      const tasksData = tasksRes.data;
-      const familyWaitData = familyWaitRes.data;
-      const familyPendingData = familyPending.data;
-
-      if (
-        familyData?.internal_return < 0 ||
-        tasksData?.internal_return < 0 ||
-        familyWaitData?.internal_return < 0 ||
-        familyPendingData?.internal_return < 0
-      ) {
-        return;
-      }
-
-      startTransition(() => {
-        setDetails({
-          familyDetails: { loading: false, data: familyData },
-          familyTasks: { loading: false, data: tasksData },
-          familyWaitList: { loading: false, data: familyWaitData },
-          familyPending: { loading: false, data: familyPendingData },
-        });
-      });
-    } catch (error) {
-      setDetails((prevDetails) => ({
-        ...prevDetails,
-        familyDetails: { loading: false },
-        familyTasks: { loading: false },
-        familyWaitList: { loading: false },
-        familyPending: { loading: false },
-      }));
-      setErrMsg("An error occurred");
-      throw new Error(error);
-    }
-  }, [apiCall, accountDetails]);
-
+  // Ref for the account section
   const accountRef = useRef();
 
+  // React-to-Print hook for handling printing
   const useHandlePrint = useReactToPrint({
     content: () => accountRef.current,
   });
 
+  // Array of tab names
   const tabs = [
     { id: 1, name: "Tasks" },
     { id: 2, name: "Waiting" },
     { id: 3, name: "Pending" },
   ];
 
+  // State for the currently selected tab
   const [tab, setTab] = useState(tabs[0].name);
 
+  // Function to handle tab changes
   const tabHandler = (value) => {
-    startTransition(() => {
     setTab(value);
-    });
   };
 
+  // Object that maps tab names to their corresponding components
   const tabComponents = {
     Tasks: (
       <FamilyTasks
@@ -156,7 +137,7 @@ export default function FamilyManageTabs({
       <FamilyPending
         familyData={details.familyPending.data}
         accountDetails={accountDetails}
-        loader={details.familyWaitList.loading}
+        loader={details.familyPending.loading}
       />
     ),
     Account: (
@@ -170,6 +151,7 @@ export default function FamilyManageTabs({
     Profile: <FamilyProfile />,
   };
 
+  // Default tab component
   const defaultTabComponent = (
     <FamilyTasks
       className={className}
@@ -179,17 +161,101 @@ export default function FamilyManageTabs({
     />
   );
 
+  // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
+  // Effect to manage family details and related data
   useEffect(() => {
-    let __manageFamily = true;
-    if (__manageFamily) {
-      manageFamily();
+    const manageFamily = async () => {
+      try {
+        resetDetails();
+
+        setDetails({
+          familyDetails: { loading: true },
+          familyTasks: { loading: true },
+          familyWaitList: { loading: true },
+          familyPending: { loading: true },
+        });
+
+        const { family_uid } = accountDetails;
+        const reqData = { family_uid };
+
+        const [familyRes, tasksRes, familyWaitRes, familyPending] =
+          await Promise.all([
+            apiCall.ManageFamily(reqData),
+            apiCall.ManageTasks(reqData),
+            apiCall.ManageFamilyWaitlist(),
+            apiCall.ManageFamilyPending(),
+          ]);
+
+        const familyData = familyRes.data;
+        const tasksData = tasksRes.data;
+        const familyWaitData = familyWaitRes.data;
+        const familyPendingData = familyPending.data;
+
+        // Function to check for errors in data
+        const checkDataError = (data) => data?.internal_return < 0;
+
+        if (
+          checkDataError(familyData) ||
+          checkDataError(tasksData) ||
+          checkDataError(familyWaitData) ||
+          checkDataError(familyPendingData)
+        ) {
+          return;
+        }
+
+        setDetails({
+          familyDetails: { loading: false, data: familyData },
+          familyTasks: { loading: false, data: tasksData },
+          familyWaitList: { loading: false, data: familyWaitData },
+          familyPending: { loading: false, data: familyPendingData },
+        });
+      } catch (error) {
+        resetDetails();
+        setErrMsg("An error occurred");
+        throw new Error(error);
       }
-    return () => {
-      __manageFamily = false;
     };
-  }, [tab, manageFamily]);
+
+    // Invoke the manageFamily function when the component mounts
+    manageFamily();
+  }, []);
+
+  // Effect to manage family tasks
+  useEffect(() => {
+    let checkFamilyTask = true;
+    const reqData = {
+      limit: 30,
+      offset: 0,
+      job_type: "FAMILY",
+      action: 13005,
+    };
+
+    if (checkFamilyTask) {
+      setFamilyTask({ loading: true });
+      apiCall
+        .getMyJobList(reqData)
+        .then((res) => {
+          setFamilyTask({ loading: false, data: res?.data?.result_list });
+          if (res?.data?.result_list?.length) {
+            setActiveTask((prev) => ({
+              ...prev,
+              data: res?.data?.result_list[0],
+            }));
+          }
+        })
+        .catch((err) => {
+          setFamilyTask({ loading: false, data: [] });
+          console.log("Error", err);
+        });
+    }
+
+    // Cleanup function to prevent memory leaks
+    return () => {
+      checkFamilyTask = false;
+    };
+  }, []);
 
   return (
     <div
@@ -285,7 +351,11 @@ export default function FamilyManageTabs({
         <AssignTaskPopout
           action={familyPopUpHandler}
           situation={familyTaskPopout}
-          familyDetails={details.familyDetails.data}
+          familyTask={familyTask}
+          setFamilyTask={setFamilyTask}
+          setActiveTask={setActiveTask}
+          activeTask={activeTask}
+          familyDetailsData={details.familyDetails.data}
         />
       )}
     </div>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,12 +1,21 @@
-import React, { useState, useEffect, useTransition } from "react";
-import ModalCom from "../../Helpers/ModalCom";
-import Detail from "../../jobPopout/popoutcomponent/Detail";
+import React, { useState } from "react";
 import usersService from "../../../services/UsersService";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import Detail from "../../jobPopout/popoutcomponent/Detail";
 import { NewTasks } from "./forms";
 
-const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetails }) => {
+const AssignTaskPopout = React.memo(
+  ({
+    action,
+    details,
+    situation,
+    familyDetailsData,
+    familyTask,
+    activeTask,
+    setActiveTask,
+  }) => {
     const apiCall = new usersService();
 
     let [requestStatus, setRequestStatus] = useState({
@@ -15,12 +24,8 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
       message: "",
     }); // HOLDS RESPONSE FOR SENDING API REQUEST
 
-  let [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
-
     let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK
 
-  let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK
-
     const switchTaskType = ({ target: { value } }) => {
       // FUNCTION TO CHANGE SELECTED ACTIVE TASK
       setTaskType(value);
@@ -63,7 +68,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
           // API PAYLOADS
           job_id: activeTask.data?.job_id,
           job_uid: activeTask.data?.job_uid,
-        family_uid: familyDetails?.uid || details?.family_uid,
+          family_uid: familyDetailsData?.uid || details?.family_uid,
           job_description: activeTask.data?.description,
           assign_mode: 110011,
         };
@@ -116,7 +121,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
           timeline_days,
           title,
           assign_mode: 110055,
-        family_uid: details?.family_uid || familyDetails?.uid,
+          family_uid: details?.family_uid || familyDetailsData?.uid,
         };
       }
 
@@ -155,38 +160,6 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
         });
     };
 
-  useEffect(() => {
-    let checkFamilyTask = true;
-    const reqData = {
-      limit: 30,
-      offset: 0,
-      job_type: "FAMILY",
-      action: 13005,
-    };
-
-    apiCall
-      .getMyJobList(reqData)
-      .then((res) => {
-        if (checkFamilyTask) {
-          setFamilyTask({ loading: false, data: res?.data?.result_list });
-          if (res?.data?.result_list?.length) {
-            setActiveTask((prev) => ({
-              ...prev,
-              data: res?.data?.result_list[0],
-            }));
-          }
-        }
-      })
-      .catch((err) => {
-        setFamilyTask({ loading: false, data: [] });
-        console.log("Error", err);
-      });
-
-    return () => {
-      checkFamilyTask = false;
-    };
-  }, []);
-
     return (
       <>
         <ModalCom
@@ -197,7 +170,8 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
           <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
             <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-              Assign task to {familyDetails?.firstname || details?.firstName}
+                Assign task to{" "}
+                {familyDetailsData?.firstname || details?.firstName}
               </h1>
               <button
                 type="button"
@@ -269,7 +243,9 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
                             <div
                               key={item.job_uid}
                               className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
-                            onClick={() => handleActiveTask(item.job_uid, item)}
+                              onClick={() =>
+                                handleActiveTask(item.job_uid, item)
+                              }
                             >
                               <input
                                 type="radio"
@@ -423,7 +399,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
                           className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
                         >
                           {`Assign to ${
-                          familyDetails?.firstname || details?.firstName
+                            familyDetailsData?.firstname || details?.firstName
                           }`}
                         </button>
                       )}
@@ -436,6 +412,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
         </ModalCom>
       </>
     );
-})
+  }
+);
 
 export default AssignTaskPopout;

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -90,7 +90,7 @@ export default function FamilyTasks({
                                     <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                       {value.title}
                                     </h1>
-                                    <div className="flex gap-4 items-center">
+                                    <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                                       <span className="text-sm text-thin-light-gray flex flex-start gap-1">
                                         Price:{" "}
                                         <span className="text-purple">

src/components/Home/FullAccountDash.jsx

@@ -1,24 +1,17 @@
-import React from "react";
-import datas from "../../data/product_data.json";
-import Hero from "./Hero";
-// import HomeTaskDisplay from "./HomeTaskDisplay";
-import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
-// import SellHistoryMarketVisitorAnalytic from './SellHistoryMarketVisitorAnalytic';
-// import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-//import UpdateTable from "./UpdateTable";
-import HomeActivities from "./HomeActivities";
-import MyOffersTable from "../MyTasks/MyOffersTable";
 import MyJobTable from "../MyTasks/MyJobTable";
+import MyOffersTable from "../MyTasks/MyOffersTable";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import Hero from "./Hero";
+import HomeActivities from "./HomeActivities";
 
 export default function FullAccountDash(props) {
-  console.log("PROPS IN HOME->", props);
+  // console.log("PROPS IN HOME->", props);
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   return (
-    <div>
+    <>
       <div className="home-page-wrapper">
         <Hero
           className="mb-10"
@@ -26,30 +19,30 @@ export default function FullAccountDash(props) {
           bannerList={props.bannerList}
           nextDueTask={props.nextDueTask}
         />
-        { props.offersList?.data?.result_list?.length ?
+        {props.offersList?.data?.result_list?.length ? (
           <MyOffersTable
             MyActiveOffersList={props.offersList?.data}
             className="mb-10"
           />
-        : props.MyActiveJobList?.data?.length ?
+        ) : props.MyActiveJobList?.data?.length ? (
           <>
             <div className="w-full mb-5 flex justify-between items-center gap-1">
               <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-                <span>
-                  My Tasks
-                </span>
+                <span>My Tasks</span>
               </h1>
             </div>
-            <MyJobTable ActiveJobList={props.MyActiveJobList} Account={userDetails} />
+            <MyJobTable
+              ActiveJobList={props.MyActiveJobList}
+              Account={userDetails}
+            />
           </>
-         
-        : !props.offersList?.loading && !props.MyActiveJobList?.loading?
+        ) : !props.offersList?.loading && !props.MyActiveJobList?.loading ? (
           <HomeActivities className="mb-10" />
-        :
+        ) : (
           <div className="w-full h-[220px] flex items-center justify-center">
             <LoadingSpinner size="16" color="sky-blue" />
           </div>
-        }
+        )}
 
         {/*<UpdateTable className="mb-10"/>*/}
         {/*<SellHistoryMarketVisitorAnalytic className="mb-10"/>*/}
@@ -61,24 +54,6 @@ export default function FullAccountDash(props) {
         {/*    bannerList={props.bannerList}*/}
         {/*/>*/}
       </div>
-    </div>
+    </>
   );
 }
-// /*
-//      <Layout>
-//             <div className="home-page-wrapper">
-//                 <Hero className="mb-10" data={userDetails} />
-//                 {/* <CreateNft />
-//         <TrendingSection trending={trending} className="mb-10" />*/}
-// <HomeTaskDisplay
-//     jobData={jobData}
-//     className="mb-10"
-//     bannerList={props.bannerList}
-// />
-{
-  /*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
-                <TopSellerTopBuyerSliderSection className="mb-10" />
-                <UpdateTable className="mb-10"/>*/
-}
-// </div>
-// </Layout>

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -10,24 +10,25 @@ import ActiveJobMessage from "./ActiveJobMessage";
 import IndexJobActions from "./JobActions/IndexJobActions";
 
 import usersService from "../../services/UsersService";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 function ActiveJobs(props) {
   const ApiCall = new usersService();
-  let navigate = useNavigate();
+  const navigate = useNavigate();
 
-  let { userDetails } = useSelector((state) => state.userDetails);
+  const { userDetails } = useSelector((state) => state.userDetails);
 
-  let [passDue, setPassDue] = useState(
+  const [passDue, setPassDue] = useState(
     new Date() > new Date(props.details?.delivery_date)
   ); // STATE TO KNOW IF TASK IS PASSED DUE TIME
 
-  let [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent
+  const [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent
 
-  let [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
+  const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
 
-  let [tab, setTab] = useState("message");
+  const [tab, setTab] = useState("message");
 
-  let [requestStatus, setRequestStatus] = useState({
+  const [requestStatus, setRequestStatus] = useState({
     loading: false,
     status: false,
     message: "",
@@ -248,7 +249,11 @@ function ActiveJobs(props) {
     }
   }, [passDue]);
 
-  console.log("AC JOBS >>", props);
+  let thePrice = PriceFormatter(
+    props.details?.price * 0.01,
+    props.details?.currency_code,
+    props.details?.currency
+  );
 
   return (
     <Layout>
@@ -311,10 +316,11 @@ function ActiveJobs(props) {
                 <span className="font-semibold">Due: </span>
                 {props?.details && props.details.delivery_date.split(" ")[0]}
               </p>
+              {props?.delivery_date && (
                 <p className="py-2 text-base text-slate-700">
-                {props?.delivery_date &&
-                  props.details.delivery_date.split(" ")[1]}
+                  {props.details.delivery_date.split(" ")[1]}
                 </p>
+              )}
             </div>
           ) : (
             <div className="my-1 flex items-start gap-3">
@@ -334,6 +340,13 @@ function ActiveJobs(props) {
             </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">
+              Price:{" "}
+            </span>
+            <span className="">{thePrice}</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">
               Duration:{" "}

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import dataImage2 from "../../assets/images/data-table-user-2.png";
+import localImgLoad from "../../lib/localImgLoad";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
-import localImgLoad from "../../lib/localImgLoad";
 
 export default function MyActiveJobTable({ MyJobList, className }) {
   const navigate = useNavigate();
@@ -25,7 +24,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full p-3 sm:p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
         className || ""
       }`}
     >
@@ -33,11 +32,6 @@ export default function MyActiveJobTable({ 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 &&
@@ -59,7 +53,9 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                             <div className="flex space-x-2 items-center w-full">
                               <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={localImgLoad(`images/taskbanners/${value.banner}`)}
+                                  src={localImgLoad(
+                                    `images/taskbanners/${value.banner}`
+                                  )}
                                   alt="data"
                                   className="w-full h-full rounded-full"
                                 />
@@ -75,7 +71,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                     {thePrice}
                                   </span>
                                 </span>
-                                <div className="flex gap-4 items-center">
+                                <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                                   <span className="text-sm text-thin-light-gray">
                                     Duration:{" "}
                                     <span className="text-purple">
@@ -115,7 +111,9 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                 }}
                                 className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                               >
-                                {value.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
+                                {value.owner_status == "OWNER"
+                                  ? "Manage"
+                                  : "Send Updates"}
                               </button>
                             </div>
                           </td>

src/components/MyActiveJobs/MyReviewDueJobs.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 import MyActiveJobTable from "./MyActiveJobTable";
@@ -11,9 +10,7 @@ export default function MyReviewDueJobs(props) {
   };
   return (
     <Layout>
-            <CommonHead
-                commonHeadData={props.commonHeadData}
-            />
+      <CommonHead commonHeadData={props.commonHeadData} />
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
@@ -34,7 +31,7 @@ export default function MyReviewDueJobs(props) {
               ></div>
             </div>
           </div>
-                    <MyActiveJobTable MyJobList={props.MyJobList} />
+          <MyActiveJobTable MyJobList={props.myJobList} />
         </div>
       </div>
     </Layout>

src/components/MyTasks/MyJobTable.jsx

@@ -96,7 +96,7 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
                           Price:
                           <span className="text-purple ml-1">{thePrice}</span>
                         </span>
-                        <div className="flex gap-4 items-center">
+                        <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                           <span className="text-sm text-thin-light-gray">
                             Duration:
                             <span className="text-purple ml-1">

src/components/Partials/Layout.jsx

@@ -74,7 +74,7 @@ export default function Layout({ children }) {
             </div>
             {/* container */}
             <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
-              <div className="nft-main-container flex-[80%]">
+              <div className="nft-main-container flex-[80%] w-full">
                 {children && children}
               </div>
               <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -68,7 +68,7 @@ export default function PersonalInfoTab({
     pref_email: 0,
     pref_phone: 0,
     accept_promo: false,
-    online_name: "",
+    online_name: userDetails?.online_name,
   };
 
   let [profile, setProfile] = useState({
@@ -158,7 +158,7 @@ export default function PersonalInfoTab({
                         fieldClass="px-6"
                         label="User Name"
                         type="text"
-                        name="online_name"
+                        name="username"
                         placeholder="Username"
                         value={userDetails?.username}
                         disable={true}
@@ -361,6 +361,7 @@ export default function PersonalInfoTab({
                     {/* inputs ends here */}
                   </div>
                 </div>
+                {process.env.REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE != 0 &&
                   <div className="w-[232px] mb-10">
                     <div className="update-profile w-full mb-9">
                       <h1 className="text-xl tracking-wide font-bold text-dark-gray dark:text-white flex items-center mb-2">
@@ -418,6 +419,7 @@ export default function PersonalInfoTab({
                       </div>
                     </div>
                   </div>
+                }
               </div>
 
               <div className="content-footer w-full">

src/index.css

@@ -30,22 +30,24 @@
   background-color: darkgreen;
 }
 .referral {
-  margin-bottom: 20px
+  margin-bottom: 20px;
 }
 .task_action_panel {
-  font-family: sans; color: white;
+  font-family: sans;
+  color: white;
   font-weight: bolder;
   font-size: 14px;
   font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
-  padding: 0px 10px 5px 10px
+  padding: 0px 10px 5px 10px;
 }
 .heroSilderTitle {
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-  font-family: sans; color: white;
+  font-family: sans;
+  color: white;
   font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
 }
 .back-dark1 {
-  background-color: #193F5F;
+  background-color: #193f5f;
   min-width: 280px !important;
 }
 .job-action {
@@ -110,7 +112,13 @@
 }
 .offer-slide-item {
   background: rgb(2, 0, 36);
-  background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(3,51,2,0.782125350140056) 0%, rgba(0,212,255,0.07904411764705888) 0%, rgba(153,182,201,1) 99%);
+  background: radial-gradient(
+    circle,
+    rgba(2, 0, 36, 1) 0%,
+    rgba(3, 51, 2, 0.782125350140056) 0%,
+    rgba(0, 212, 255, 0.07904411764705888) 0%,
+    rgba(153, 182, 201, 1) 99%
+  );
   margin: 5px;
   border-radius: 15px;
   padding: 15px;
@@ -133,6 +141,7 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Regular.ttf");
 }
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -144,7 +153,6 @@
   --toastify-color-success: #f539f8;
 }
 
-
 /* =====================  EXTRA ===================== */
 .bottomMargin {
   margin-bottom: 15px;
@@ -159,7 +167,12 @@ html {
   font-family: "Product Sans";
 }
 .primary-gradient {
-  background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #f539f8 0%,
+    #284f64 43.55%,
+    #1a3544 104.51%
+  );
   /* background-image: url("./assets/images/left-myft.jpg");
   background-repeat: no-repeat;
   background-size: cover; */
@@ -199,7 +212,12 @@ html {
   top: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #5356fb 0%,
+    #c342f9 43.55%,
+    #f539f8 104.51%
+  );
   opacity: 30%;
 }
 /* Chrome, Safari, Edge, Opera */
@@ -229,10 +247,20 @@ input[type="text"][dir="rtl"] {
   scrollbar-width: none; /* Firefox */
 }
 .btn-gradient {
-  background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #f539f8 0%,
+    #c342f9 43.55%,
+    #5356fb 104.51%
+  );
 }
 .btn-gradient:hover {
-  background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #5356fb 0%,
+    #c342f9 43.55%,
+    #f539f8 104.51%
+  );
 }
 .text-26 {
   font-size: 26px;
@@ -246,7 +274,12 @@ input[type="text"][dir="rtl"] {
 }
 
 .text-gradient {
-  background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #f539f8 0%,
+    #c342f9 43.55%,
+    #5356fb 104.51%
+  );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -305,6 +338,16 @@ input[type="text"][dir="rtl"] {
   transform: scale(1);
   width: 80%;
 }
+
+@media screen and (min-width: 25rem) {
+  .sidebar-logo.enter {
+    width: 65%;
+  }
+  .sidebar-logo.enter + span{
+    position: revert;
+  }
+}
+
 .sidebar-logo {
   transform: scale(0);
   width: 0;
@@ -437,7 +480,12 @@ input[type="text"][dir="rtl"] {
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li {
   margin: 0;
 }
-.home-page-wrapper .hero-slider .slick-slider .slick-dots li.slick-active button {
+.home-page-wrapper
+  .hero-slider
+  .slick-slider
+  .slick-dots
+  li.slick-active
+  button {
   background: white;
 }
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li button {
@@ -460,7 +508,12 @@ input[type="text"][dir="rtl"] {
   top: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #5356fb 0%,
+    #c342f9 43.55%,
+    #f539f8 104.51%
+  );
   z-index: -1;
   opacity: 30%;
 }
@@ -476,8 +529,10 @@ input[type="text"][dir="rtl"] {
   margin: 0 16px;
 }
 
-.transfer-field, .transfer-field:focus, .transfer-field:focus-within{
-  background: #FFF !important;
+.transfer-field,
+.transfer-field:focus,
+.transfer-field:focus-within {
+  background: #fff !important;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
@@ -597,7 +652,7 @@ input[type="text"][dir="rtl"] {
   top: 0;
   right: -100%;
   opacity: 0;
-  transition: all .5s;
+  transition: all 0.5s;
   background-color: white;
 }
 
@@ -612,7 +667,12 @@ input[type="text"][dir="rtl"] {
 .notification-page .content-item .notifications {
   @apply flex space-x-4 items-center;
 }
-.notification-page .content-item .notifications .notification-page .content-item .notifications {
+.notification-page
+  .content-item
+  .notifications
+  .notification-page
+  .content-item
+  .notifications {
   @apply mb-0;
 }
 .notification-setting-tab .notification-settings-items li:last-child {
@@ -621,7 +681,11 @@ input[type="text"][dir="rtl"] {
 .faq-tab .accordion-items .accordion-item:first-child .accordion-title-bar {
   padding-top: 0;
 }
-.faq-tab .accordion-items .accordion-item:last-child .accordion-body .accordion-body-content {
+.faq-tab
+  .accordion-items
+  .accordion-item:last-child
+  .accordion-body
+  .accordion-body-content {
   padding-bottom: 20px;
 }
 .faq-tab .accordion-title-bar {
@@ -669,7 +733,8 @@ input[type="text"][dir="rtl"] {
     height: 100%;
     overflow: hidden;
   }
-  .job-action-modal-body button, .message-modal-header button {
+  .job-action-modal-body button,
+  .message-modal-header button {
     display: none;
   }
   .message-modal-wrapper .message-table {
@@ -839,20 +904,26 @@ TODO: Responsive ===========================
   }
 }
 
-
 /* LoginPage */
 .main-wrapper.login-wrapper {
-  background-image: url('./assets/images/login-dots.jpg');
+  background-image: url("./assets/images/login-dots.jpg");
   background-attachment: fixed;
   background-size: contain;
   background-position-y: bottom;
   background-repeat: no-repeat;
-
 }
 
 .layout-wrapper.login {
   background: rgb(236, 237, 241);
-  background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(236, 237, 241, 1) 0%,
+    rgba(252, 252, 252, 1) 31%,
+    rgba(255, 255, 255, 0.9416141456582633) 41%,
+    rgba(255, 255, 255, 0.9752275910364145) 61%,
+    rgba(252, 252, 252, 1) 71%,
+    rgba(236, 237, 241, 1) 100%
+  );
   font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
   font-weight: 400;
   font-size: 1.125rem;
@@ -861,8 +932,12 @@ TODO: Responsive ===========================
 
 .content-wrapper.login {
   --bg-color: 255, 255, 255;
-  background: linear-gradient(90deg, rgba(236,237,240,1) 0%, rgba(255,255,255,1) 50%, rgba(236,237,240,1) 100%);
-
+  background: linear-gradient(
+    90deg,
+    rgba(236, 237, 240, 1) 0%,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(236, 237, 240, 1) 100%
+  );
 }
 
 .content-wrapper select {
@@ -880,7 +955,8 @@ TODO: Responsive ===========================
 }
 
 /* Update table scrollbar */
-.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track,
+.update-table::-webkit-scrollbar-track,
+.update-table > *::-webkit-scrollbar-track,
 .market-pop::-webkit-scrollbar-track,
 .wallet.coupon::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
@@ -888,19 +964,27 @@ TODO: Responsive ===========================
   border-radius: 10px;
 }
 
-.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar,
+.update-table::-webkit-scrollbar,
+.update-table > *::-webkit-scrollbar,
 .market-pop::-webkit-scrollbar,
 .wallet.coupon::-webkit-scrollbar {
   width: 10px;
   background-color: transparent;
 }
 
-.update-table::-webkit-scrollbar-thumb, .update-table > *::-webkit-scrollbar-thumb, .wallet.coupon::-webkit-scrollbar-thumb {
+.update-table::-webkit-scrollbar-thumb,
+.update-table > *::-webkit-scrollbar-thumb,
+.wallet.coupon::-webkit-scrollbar-thumb {
   border-radius: 10px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   background-color: #fff;
-  background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #f539f8 0%,
+    #c342f9 43.55%,
+    #5356fb 104.51%
+  );
 }
 
 .market-pop::-webkit-scrollbar-thumb {
@@ -909,7 +993,15 @@ TODO: Responsive ===========================
   /* background-color: #fafafa; */
   /* background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); */
   background: rgb(236, 237, 241);
-  background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(236, 237, 241, 1) 0%,
+    rgba(252, 252, 252, 1) 31%,
+    rgba(255, 255, 255, 0.9416141456582633) 41%,
+    rgba(255, 255, 255, 0.9752275910364145) 61%,
+    rgba(252, 252, 252, 1) 71%,
+    rgba(236, 237, 241, 1) 100%
+  );
 }
 
 .input-curve.lg {

src/views/ManageActiveJobs.jsx

@@ -1,31 +1,37 @@
-import React, { useState, useEffect } from "react";
-import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
+import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
 import usersService from "../services/UsersService";
 
+/**
+ * This code defines a React functional component called `ManageActiveJobs`.
+ * It fetches a list of active job messages and renders the `ActiveJobs` component with the necessary props.
+ */
 function ManageActiveJobs() {
   const ApiCall = new usersService();
 
-  let navigate = useNavigate();
-  let { state } = useLocation();
+  const navigate = useNavigate();
+  const { state } = useLocation();
 
-  let [details, setDetails] = useState({}); // to hold state values
+  const [details, setDetails] = useState({});
 
-  let [activeJobMesList, setActiveJobMesList] = useState({
+  const [activeJobMesList, setActiveJobMesList] = useState({
     loading: true,
     error: false,
     data: [],
   });
 
-  let [activeJobMesListReload, setActiveJobMesListReload] = useState(false); // state to determine when ACTIVE JOB MESSAGE LIST RELOADS/RE-RENDERS
+  const [activeJobMesListReload, setActiveJobMesListReload] = useState(false);
 
+  /**
+   * Fetches the active job message list.
+   */
   const getActiveJobMesList = () => {
-    // FUNCTION TO GET ACTIVE JOB MESSAGE LIST
     setActiveJobMesList({ loading: true, error: false, data: [] });
-    let contract = { contract: state.contract };
+    const contract = { contract: state.contract };
     ApiCall.activeJobMesList(contract)
       .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0) {
+        if (res.status !== 200 || res.data.internal_return < 0) {
           setActiveJobMesList({ loading: false, error: false, data: [] });
           return;
         }

src/views/MyReviewDueJobsPage.jsx

@@ -1,12 +1,18 @@
-import React, { useContext,useState, useEffect } from "react";
-import usersService from "../services/UsersService";
-import MyReviewDueJobs from "../components/MyActiveJobs/MyReviewDueJobs";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import MyReviewDueJobs from "../components/MyActiveJobs/MyReviewDueJobs";
+import usersService from "../services/UsersService";
 
+/**
+ * React component that fetches a list of review due jobs and renders the `MyReviewDueJobs` component with the fetched data.
+ */
 export default function MyReviewDueJobsPage() {
-    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-    const [MyJobList, setMyJobList] = useState([]);
+  const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
+  const [myJobList, setMyJobList] = useState([]);
+
+  useEffect(() => {
     const api = new usersService();
+
     const getMyJobList = async () => {
       try {
         const res = await api.getMyReviewDueJobList();
@@ -15,15 +21,14 @@ export default function MyReviewDueJobsPage() {
         console.log("Error getting mode");
       }
     };
-    useEffect(() => {
+
     getMyJobList();
   }, []);
 
-    // debugger;
   return (
     <>
       <MyReviewDueJobs
-                MyJobList={MyJobList}
+        myJobList={myJobList}
         commonHeadData={commonHeadBanner.result_list}
       />
     </>