Updated the layout

src/Routers.jsx

@@ -49,8 +49,6 @@ import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
 import FamilyMarketPage from "./views/FamilyMarketPage";
 import FacebookRedirect from "./views/FacebookRedirect";
 import AppleRedirectPage from "./views/AppleRedirectPage";
-import LndPage from "./views/LndPage";
-import FamilySettingsPage from "./views/FamilySettingsPage";
 
 export default function Routers() {
   return (
@@ -78,7 +76,6 @@ export default function Routers() {
         <Route path="/vemail" element={<VerifyLinkPages />} />
         <Route path="/complereset" element={<VerifyPasswordPages />} />
         <Route exact path="/outmessage" element={<VerifyYouPages />} />
-        <Route exact path="/lnd/*" element={<LndPage />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>
@@ -99,7 +96,6 @@ export default function Routers() {
           <Route exact path="/market-place" element={<MarketPlacePage />} />
           <Route exact path="/market" element={<MarketPlacePage />} />
           <Route exact path="/familymarket" element={<FamilyMarketPage />} />
-          <Route exact path="/familysettings" element={<FamilySettingsPage />} />
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />

src/assets/images/icons/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 20" id="Arrow"><path fill-rule="evenodd" d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/components/AddJob/AddJob.jsx

@@ -167,7 +167,7 @@ function AddJob({ popUpHandler, categories }) {
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
                       >
-                        {walletDetails?.loading ? (
+                        {walletDetails.loading ? (
                           <option className="text-slate-500 text-lg" value="">
                             Loading...
                           </option>
@@ -400,7 +400,7 @@ function AddJob({ popUpHandler, categories }) {
                       </span>
                     </button>
 
-                    {requestStatus?.loading ? (
+                    {requestStatus.loading ? (
                       <LoadingSpinner size="8" color="sky-blue" />
                     ) : (
                       <button

src/components/AuthPages/Login/index.jsx

@@ -17,14 +17,10 @@ import { updateUserDetails } from "../../../store/UserDetails";
 import ReCAPTCHA from "react-google-recaptcha";
 
 export default function Login() {
-  // eslint-disable-next-line no-restricted-globals
-  const queryParams = new URLSearchParams(location?.search);
-  const sessionExpired = queryParams.get("sessionExpired");
-
   const dispatch = useDispatch();
   const { state } = useLocation();
 
-  const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
+  const [validCaptcha, setValidCaptcha] = useState({show: false, valid:''}); // FOR CAPTCHA
 
   let [loginType, setLoginType] = useState("");
 
@@ -115,8 +111,7 @@ export default function Login() {
       }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
       return;
     }
-    if (name == "full" && !validCaptcha.valid && validCaptcha.show) {
+    if(name == "full" && !validCaptcha.valid && validCaptcha.show){ // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
-      // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
       setMsgError("Please Verify Captcha");
       setLoginLoading(false);
       setTimeout(() => {
@@ -137,15 +132,12 @@ export default function Login() {
           // setMsgError("Wrong, email/password");
           setLoginError(true);
           setLoginLoading(false);
-          setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
+          setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR
           return;
         }
         localStorage.setItem("member_id", `${res.data.member_id}`);
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
-        if (name === "family") {
-          sessionStorage.setItem("family_uid", res.data?.family_uid);
-        }
         // localStorage.setItem("session", `${res.data.session}`);
         dispatch(updateUserDetails({ ...res.data }));
         setTimeout(() => {
@@ -156,7 +148,7 @@ export default function Login() {
       .catch((error) => {
         setMsgError("Unable to login, try again");
         setLoginLoading(false);
-        setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
+        setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR
       })
       .finally(() => {
         setTimeout(() => {
@@ -167,12 +159,11 @@ export default function Login() {
       });
   };
 
-  function captchaChecker(value) {
+  function captchaChecker(value) { // FUNCTION TO VALIDATE CAPTCHA
-    // FUNCTION TO VALIDATE CAPTCHA
     if(value){
-      setValidCaptcha({ show: true, valid: value });
+      setValidCaptcha({show: true, valid:value})
     }else{
-      setValidCaptcha({ show: true, valid: "" });
+      setValidCaptcha({show: true, valid:''})
     }
   }
 
@@ -250,8 +241,6 @@ export default function Login() {
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[530px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
-              {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
-              {sessionExpired != "true" && (
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                 {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
@@ -266,16 +255,6 @@ export default function Login() {
                   </Link>
                 </span>
               </div>
-              )}
-
-              {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
-              {sessionExpired == "true" && (
-                <div className="w-full p-1 mb-7">
-                  <p className="text-red-500 text-base text-center">
-                    Your session expired and will need to login again
-                  </p>
-                </div>
-              )}
 
               {/* switch login component */}
               <div className="ml-7 flex justify-start items-center gap-3">
@@ -341,16 +320,14 @@ export default function Login() {
                     </div>
 
                     {/* hCaptha clone for the time being */}
-                    {validCaptcha.show && (
+                    {validCaptcha.show &&
                     <div className="mb-5 flex justify-center w-full">
                       <ReCAPTCHA
-                          sitekey={
+                        sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
-                            process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY
-                          }
                         onChange={captchaChecker}
                         />
                     </div>
-                    )}
+                    }
 
                     {loginError && (
                       <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
@@ -507,8 +484,7 @@ export default function Login() {
 
               {loginType == "full" && (
                 <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
-                  This site is protected by a Captcha. Our Privacy Policy and
+                  This site is protected by a Captcha. Our Privacy Policy and Terms of Service apply.
-                  Terms of Service apply.
                 </div>
               )}
             </div>

src/components/Blogs/index.jsx

@@ -47,7 +47,7 @@ export default function BlogItem(props) {
                     </h1>
                 </div>
                 <div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
-                    {blogdata?.loading ? 
+                    {blogdata.loading ? 
                         <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
                     :
                         blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?

src/components/Cards/AvailableJobsCard.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import dataImage2 from "../../assets/images/taskbanners/default.jpg";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
 
@@ -7,7 +8,6 @@ export default function AvailableJobsCard({
   datas,
   hidden = false,
   contentDisplay,
-  image_server,
 }) {
   //debugger;
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
@@ -23,13 +23,6 @@ export default function AvailableJobsCard({
     const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
     setImageUrl(imagePath);
   }, []);
-
-  const image = localStorage.getItem("session_token")
-    ? `${image_server}${localStorage.getItem("session_token")}/job/${
-        datas.job_uid
-      }`
-    : "";
-
   return (
     <>
       {contentDisplay == "grid" ? (
@@ -138,7 +131,7 @@ export default function AvailableJobsCard({
         <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
           <div className="flex gap-5 items-center w-full">
             <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
-              <img src={image} alt="data" className="w-full h-full" />
+              <img src={dataImage2} alt="data" className="w-full h-full" />
             </div>
             <div className="flex flex-col flex-[0.9]">
               <h1

src/components/Cards/FamilyActiveJobsCard.jsx

@@ -5,7 +5,7 @@ import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import Icons from "../Helpers/Icons";
 
-export default function FamilyActiveJobsCard({ datas, hidden = false, image_server }) {
+export default function FamilyActiveJobsCard({ datas, hidden = false }) {
 
     let { pathname } = useLocation();
 
@@ -22,8 +22,7 @@ export default function FamilyActiveJobsCard({ datas, hidden = false, image_serv
         }
     };
 //debugger;
-    // const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
+    const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
-    let image = `${image_server}${localStorage.getItem('session_token')}/job/${datas.origin_job_uid}`
     return (
         <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
             <div className="content">
@@ -32,13 +31,10 @@ export default function FamilyActiveJobsCard({ datas, hidden = false, image_serv
                     {/* thumbnail image */}
                     <div
                         className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
-                        // style={{
-                        //     background: `url(${localImgLoad(
-                        //         `images/taskbanners/${bannerName}`
-                        //     )}) center / contain no-repeat`,
-                        // }}
                         style={{
-                            background: `url(${image}) center / contain no-repeat`,
+                            background: `url(${localImgLoad(
+                                `images/taskbanners/${bannerName}`
+                            )}) center / contain no-repeat`,
                         }}
                     >
               {/*          <div className="product-options flex justify-between relative">*/}

src/components/Cards/OfferCard.jsx

@@ -2,20 +2,13 @@ import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
-export default function OfferCard({
+export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
-  datas,
-  hidden = false,
-  setOfferPopout,
-  image_server,
-}) {
   let thePrice = PriceFormatter(
     datas?.price * 0.01,
     datas?.currency_code,
     datas?.currency
   );
 
-  let image = `${image_server}${localStorage.getItem("session_token")}/job/${datas.job_uid}`
-
   return (
     <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
       <div className="content">
@@ -25,7 +18,9 @@ export default function OfferCard({
           <div
             className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
             style={{
-              background: `url(${image}) center / contain no-repeat`,
+              background: `url(${localImgLoad(
+                `images/taskbanners/${datas?.banner || "default.jpg"}`
+              )}) center / contain no-repeat`,
             }}
           >
             {hidden && <div className="flex justify-center"></div>}
@@ -36,7 +31,26 @@ export default function OfferCard({
           <h1 className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
             {datas.title}
           </h1>
-
+          {/* countdown */}
+          {/* <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
+                        <div className="flex flex-col justify-between">
+                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                                Task Code
+                            </p>
+                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                {datas.contract}
+                            </p>
+                        </div>
+                        <div className="w-[1px] h-full bg-[#E3E4FE] dark:bg-[#a7a9b533] "></div>
+                        <div className="flex flex-col justify-between">
+                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                                Remaining Time
+                            </p>
+                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                <CountDown lastDate={datas.expire} />
+                            </p>
+                        </div>
+                    </div> */}
           <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
             <div className="grid grid-cols-2 gap-2">
               <div className="flex flex-col justify-between items-center border-r-2">
@@ -82,7 +96,7 @@ export default function OfferCard({
         <button
           type="button"
           onClick={() =>
-            setOfferPopout({ show: true, data: { ...datas, thePrice, image } })
+            setOfferPopout({ show: true, data: { ...datas, thePrice } })
           }
           className="btn-shine w-[98px] h-[33px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
         >

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -33,7 +33,7 @@ export default function FamilyManageTabs({
     loading: false,
     data: null,
   };
-// console.log('accountDetails',accountDetails)
+
   // State for family details, tasks, waitlist, and pending
   const [details, setDetails] = useState({
     familyDetails: { ...initialDetailState },
@@ -66,10 +66,8 @@ export default function FamilyManageTabs({
   // State for family task popout
   const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
 
-  let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
-
   // State for profile image
-  const [profileImg, setProfileImg] = useState(accountDetails.image ? accountDetails.image : profile);
+  const [profileImg, setProfileImg] = useState(profile);
 
   // Ref for profile image input
   const profileImgInput = useRef(null);
@@ -92,59 +90,24 @@ export default function FamilyManageTabs({
    * Checks if the selected file exceeds the maximum file size limit and displays an alert if it does.
    * If the file is within the size limit, it reads the file using the FileReader API and sets the profile image state with the result.
    */
-
   const profileImgChangeHandler = (e) => {
-    setUploadStatus({loading: false, status: false, message:''})
+    const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
-    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS
-    let uploadedFile = e.target.files[0] //UPLOADED FILE
 
-    const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
+    const file = e.target.files[0];
-    if(!acceptedFormat.includes(fileFormat)){ //CHECKING FOR CORRECT UPLOAD FORMAT
+    if (file && file.size > MAX_FILE_SIZE) {
-      const msg = `Please select ${acceptedFormat.slice(0, -1).join(', ')} or ${acceptedFormat.slice(-1)}`;
+      alert("File size exceeds the limit.");
-      setUploadStatus({loading: false, status: false, message:msg})
+      return;
-      return setTimeout(()=>{
-        profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
     }
 
-    if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE
+    if (file) {
-      setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'})
-      return setTimeout(()=>{
-        profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
-    }
-
-    if (e.target.value !== "") {
       const imgReader = new FileReader();
-      imgReader.onload = (event) => {
+      imgReader.onload = () => {
-        let base64Img = imgReader.result.split(",")[1];
+        const imageDataUrl = imgReader.result;
-        let reqData = { // PAYLOAD FOR API CALL
+
-          family_uid: accountDetails?.family_uid,
+        // Set the profile image
-          file_name: uploadedFile?.name,
+        setProfileImg(imageDataUrl);
-          file_size: uploadedFile?.size,
-          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
-          file_data: base64Img,
-          msg_type: 'FILE',
-          action: 11305
-        }
-        setUploadStatus({loading: true, status: false, message:'Loading...'})
-        apiCall.sendFiles(reqData).then(res=>{
-          if(res.status != 200 || res.data.internal_return < 0){
-            return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'})
-          }
-          setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'})
-          setProfileImg(event.target.result);
-        }).catch(error=>{
-          setUploadStatus({loading: false, status: false, message: 'Network error, try again'})
-        }).finally(()=>{
-          setTimeout(()=>{
-            setUploadStatus({loading: false, status: false, message: ''})
-          },5000)
-        })
       };
-      imgReader.readAsDataURL(e.target.files[0]);
+      imgReader.readAsDataURL(file);
     }
   };
 
@@ -335,7 +298,6 @@ export default function FamilyManageTabs({
                 profileImgChangeHandler={profileImgChangeHandler}
                 browseProfileImg={browseProfileImg}
                 accountDetails={accountDetails}
-                uploadStatus={uploadStatus}
               />
               <div className="mt-4 flex flex-col justify-center items-center gap-2 lg:flex-row lg:justify-center lg:items-center xl:flex-col xl:justify-center xl:items-center 2xl:flex-row 2xl:justify-center 2xl:items-center 2xl:gap-[2px]">
                 <button

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -5,8 +5,6 @@ import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import Detail from "../../jobPopout/popoutcomponent/Detail";
 import { NewTasks } from "./forms";
-import { tableReload } from "../../../store/TableReloads";
-import { useDispatch } from "react-redux";
 
 const AssignTaskPopout = React.memo(
   ({
@@ -21,8 +19,6 @@ const AssignTaskPopout = React.memo(
   }) => {
     const apiCall = new usersService();
 
-    const dispatch = useDispatch()
-
     let [requestStatus, setRequestStatus] = useState({
       loading: false,
       status: false,
@@ -94,11 +90,11 @@ const AssignTaskPopout = React.memo(
         const requiredFields = {
           banner,
           // category,
-          currency:country,
+          country,
           description,
-          'job detail':job_detail,
+          job_detail,
           price,
-          timeline:timeline_days,
+          timeline_days,
           title,
         };
 
@@ -108,7 +104,7 @@ const AssignTaskPopout = React.memo(
             setRequestStatus({
               loading: false,
               status: false,
-              message: `${field[0].toUpperCase()+field.slice(1).toLowerCase()} is empty`,
+              message: `${field} is empty`,
             });
             return setTimeout(() => {
               setRequestStatus({ loading: false, status: false, message: "" });
@@ -149,7 +145,6 @@ const AssignTaskPopout = React.memo(
             message: "action successful",
           });
           setUpdatePage(prev => !prev) // Updates family task page by calling the useeffect hook
-          dispatch(tableReload({ type: "WALLETTABLE" })); // RELOADS USER WALLET
           setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
             action(); // FUNCTION THAT CLOSES THE MODAL BOX
@@ -206,7 +201,7 @@ const AssignTaskPopout = React.memo(
                 </svg>
               </button>
             </div>
-            {familyTask?.loading ? (
+            {familyTask.loading ? (
               <div className="h-[100px] w-full flex justify-center items-center">
                 <LoadingSpinner color="sky-blue" size="16" />
               </div>

src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx

@@ -69,7 +69,7 @@ export default function NewTasks({ formState, setFormState }) {
               onChange={handleInputChange}
               // onBlur={props.handleBlur}
             >
-              {currency?.loading ? (
+              {currency.loading ? (
                 <option className="text-slate-500 text-[13.975px]" value="">
                   Loading...
                 </option>

src/components/FamilyAcc/FamilySettings/index.jsx

@@ -1,30 +0,0 @@
-import React from "react";
-import Layout from "../../Partials/Layout";
-import { Link } from "react-router-dom";
-
-const FamilySettings = () => {
-  return (
-    <Layout>
-      <div className="notification-page w-full mb-10">
-        <div className="notification-wrapper w-full">
-          {/* heading */}
-          <div className="sm:flex justify-between items-center mb-6">
-            <div className="mb-5 sm:mb-0">
-              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                <span className={``}>Family Settings</span>
-              </h1>
-            </div>
-            <Link to="/acc-family">Go Back</Link>
-          </div>
-          {/* Something Here */}
-          {/* <form className="logout-modal-body w-full flex flex-col items-center px-10 py-8 gap-4"></form> */}
-          <div className="w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ">
-            <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] flex flex-col justify-between "></div>
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
-};
-
-export default FamilySettings;

src/components/FamilyAcc/FamilyTable.jsx

@@ -19,7 +19,6 @@ export default function FamilyTable({
   familyList,
   loader,
   popUpHandler,
-  imageServer
 }) {
   const navigate = useNavigate();
   const [currentPage, setCurrentPage] = useState(0);
@@ -55,13 +54,11 @@ export default function FamilyTable({
     banner,
     enable_traking,
     profile_picture,
-    imageServer
   }) => {
     // Check for valid dates
     const addedDate = added ? added.split(" ")[0] : "N/A";
     const loginDate = last_login ? formatDateString(last_login) : "N/A";
     const key = `family-${family_uid}`; // Assign a unique key
-    const image = localStorage.getItem('session_token') ? `${imageServer}${localStorage.getItem('session_token')}/family/${family_uid}` : ''
 
     const trackingStatus =
       enable_traking === "0"
@@ -79,15 +76,15 @@ export default function FamilyTable({
           <div className="flex space-x-2 items-center w-full">
             <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
               <img
-                // src={profile_picture}
+                src={profile_picture}
-                src={image || profile_picture || localImgLoad(`images/icons/${banner}`)}
+                // src={profile_picture || localImgLoad(`images/icons/${banner}`)}
                 alt={`Avatar of ${firstname} ${lastname}`}
                 className="w-full h-full"
               />
             </div>
             <div className="flex flex-col flex-[0.9]">
               <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                {`${firstname} ${lastname} (${age < 10 ? `0${age}` : age})`}
+                {`${firstname} ${lastname} (${age})`}
               </h1>
               <span className="text-sm text-thin-light-gray">
                 Added: <span className="text-purple ml-1">{addedDate}</span>
@@ -136,7 +133,6 @@ export default function FamilyTable({
                 task_count,
                 family_uid,
                 banner,
-                image
               })
             }
             type="button"
@@ -151,8 +147,8 @@ export default function FamilyTable({
               <path
                 fill-rule="evenodd"
                 d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
-                // fill=""
+                fill="#4687ba"
-                className="color000000 svgShape fill-[#fff]"
+                className="color000000 svgShape"
               ></path>
             </svg>
           </button>
@@ -161,6 +157,8 @@ export default function FamilyTable({
     );
   };
 
+  console.log(currentFamilyList);
+
   return (
     <div
       className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] flex flex-col justify-between ${
@@ -186,7 +184,7 @@ export default function FamilyTable({
                 </thead>
                 <tbody className="h-full">
                   {currentFamilyList?.map((familyMember, index) => {
-                    return <FamilyRow key={index} {...familyMember} imageServer={imageServer} />;
+                    return <FamilyRow key={index} {...familyMember} />;
                   })}
                 </tbody>
               </table>
@@ -217,7 +215,7 @@ export default function FamilyTable({
       <PaginatedList
         onClick={handlePagination}
         prev={currentPage == 0}
-        next={currentPage + itemsPerPage >= familyList?.length}
+        next={currentPage + itemsPerPage >= familyList.length}
         data={familyList}
         start={indexOfFirstItem}
         stop={indexOfLastItem}

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -54,7 +54,7 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      let image = value.banner ? value.banner : "default.jpg";
                       return (
                         <tr
                           key={index}
@@ -64,7 +64,9 @@ export default function FamilyPending({
                             <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={image}
+                                  src={localImgLoad(
+                                    `images/taskbanners/${image}`
+                                  )}
                                   alt="data"
                                   className="w-full h-full rounded-full"
                                 />

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -67,7 +67,9 @@ export default function FamilyTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                          let image = value.banner
+                            ? value.banner
+                            : "default.jpg";
                           return (
                             <tr
                               key={index}
@@ -77,7 +79,9 @@ export default function FamilyTasks({
                                 <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={image}
+                                      src={localImgLoad(
+                                        `images/taskbanners/${image}`
+                                      )}
                                       alt="data"
                                       className="w-full h-full rounded-full"
                                     />

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -67,8 +67,6 @@ const FamilyWaitlist = memo(
                       const selectedImage = require(`../../../assets/images/family/${
                         value?.banner || "default.jpg"
                       }`);
-                      console.log('VALUE', value)
-                      // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"

src/components/FamilyAcc/Tabs/ProfileInfo.jsx

@@ -7,7 +7,6 @@ export default function ProfileInfo({
   profileImgChangeHandler,
   browseProfileImg,
   accountDetails,
-  uploadStatus
 }) {
   // console.log(accountDetails.banner)
   return (
@@ -53,11 +52,6 @@ export default function ProfileInfo({
           </div>
         </div>
       </div>
-      {/* DISPLAYS PROFILE UPLOADING STATUS */}
-      <div className="w-full">
-        {uploadStatus.message && !uploadStatus.loading && <p className={`text-center ${uploadStatus.status ? 'text-green-500':'text-red-500'}`}>{uploadStatus.message}</p>}
-        {uploadStatus.loading && <p className="text-center">{uploadStatus.message}</p>}
-      </div>
       <div className="flex flex-col justify-center gap-3 items-center">
         <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
           {accountDetails?.firstname}

src/components/FamilyAcc/index.jsx

@@ -5,8 +5,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { Link } from "react-router-dom";
+import SiteService from "../../services/SiteService";
-import usersService from "../../services/UsersService";
 import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
 import Layout from "../Partials/Layout";
@@ -14,10 +13,11 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyTable from "./FamilyTable";
 
 export default function FamilyAcc() {
+  const [selectTab, setValue] = useState("today");
   // State to store the selected year and month
   const [selectedYear, setSelectedYear] = useState("");
   const [selectedMonth, setSelectedMonth] = useState("");
-  const [familyList, setFamilyList] = useState({});
+  const [familyList, setFamilyList] = useState([]);
   const [loader, setLoader] = useState(false);
   const [popUp, setPopUp] = useState(false);
   const [listReload, setListReload] = useState(false);
@@ -27,12 +27,16 @@ export default function FamilyAcc() {
     last_name: "",
   });
 
-  const apiCall = useMemo(() => new usersService(), []);
+  const apiCall = useMemo(() => new SiteService(), []);
 
   const popUpHandler = () => {
     setPopUp((prev) => !prev);
   };
 
+  const filterHandler = (value) => {
+    setValue(value);
+  };
+
   // Handle year selection
   const handleYearChange = (e) => {
     setSelectedYear(e.target.value);
@@ -111,8 +115,8 @@ export default function FamilyAcc() {
       const res = await apiCall.familyListings(reqData);
       const { data } = res;
       if (data?.internal_return >= 0 && data?.status === "OK") {
-        const { result_list, session_image_server } = data;
+        const { result_list } = data;
-        setFamilyList({ result_list, session_image_server });
+        setFamilyList(result_list);
         setLoader(false);
       } else {
         return;
@@ -142,9 +146,12 @@ export default function FamilyAcc() {
           <div className="sm:flex justify-between items-center mb-6">
             <div className="mb-5 sm:mb-0">
               <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                <span className={``}>Family Accounts</span>
+                <span
-                {familyList?.result_list?.length <
+                  className={`${selectTab === "today" ? "block" : "hidden"}`}
-                  process.env.REACT_APP_MAX_FAMILY_MEMBERS &&
+                >
+                  Family Accounts
+                </span>
+                {familyList.length < process.env.REACT_APP_MAX_FAMILY_MEMBERS &&
                   !loader && (
                     <button
                       onClick={popUpHandler}
@@ -156,37 +163,18 @@ export default function FamilyAcc() {
                   )}
               </h1>
             </div>
-            <Link
+            <div className="slider-btns flex space-x-4">
-              to={`/familysettings`}
+              <div
-              className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
+                onClick={() => filterHandler("today")}
-            >
+                className="relative"
-              <svg
+              ></div>
-                xmlns="http://www.w3.org/2000/svg"
+            </div>
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className="w-6 h-6 dark:stroke-white"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
-                />
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                />
-              </svg>
-            </Link>
           </div>
           <Suspense fallback={<LoadingSpinner color="sky-blue" size="16" />}>
             <FamilyTable
-              familyList={familyList?.result_list}
+              familyList={familyList}
               loader={loader}
               popUpHandler={popUpHandler}
-              imageServer={familyList?.session_image_server}
             />
           </Suspense>
         </div>

src/components/FourZeroFour/index.jsx

@@ -16,7 +16,7 @@ export default function FourZeroFour() {
     },
   };
   return (
-    <div className={`my-custom-bg-class flex justify-center items-center w-full min-h-screen before:content-[''] before:absolute before:inset-0 before:bg-[#cdcdcd]/[.8]`}>
+    <div className={`my-custom-bg-class flex justify-center items-center w-full h-screen before:content-[''] before:absolute before:inset-0 before:bg-[#cdcdcd]/[.8]`}>
       <div className="relative pt-32 max-w-3xl">
         {/* <Lottie options={defaultOptions} width={600} height={600} /> */}
         <div className="px-16 md:px-24 flex flex-col items-center justify-center gap-4">

src/components/Helpers/Icons.jsx

@@ -478,13 +478,13 @@ export default function Icons({ name }) {
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
-          strokeWidth="1.5"
+          stroke-width="1.5"
           stroke="currentColor"
           className="w-4 h-4"
         >
           <path
-            strokeLinecap="round"
+            stroke-linecap="round"
-            strokeLinejoin="round"
+            stroke-linejoin="round"
             d="M8.25 4.5l7.5 7.5-7.5 7.5"
           />
         </svg>

src/components/History/JobsCompleted.jsx

@@ -1,106 +0,0 @@
-import React, {useEffect, useState} from 'react'
-import Image from '../../assets/images/taskbanners/default.jpg'
-
-import usersService from '../../services/UsersService';
-import { handlePagingFunc } from '../../components/Pagination/HandlePagination';
-import PaginatedList from '../../components/Pagination/PaginatedList';
-
-import LoadingSpinner from '../Spinners/LoadingSpinner';
-
-import { AmountTo2DP } from '../Helpers/PriceFormatter';
-
-function JobsCompleted() {
-
-    const apiCall = new usersService()
-
-    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
-        loading: true,
-        data: [],
-        error: false
-    })
-
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentReward = familyRewardHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
-  
-    const handlePagination = (e) => {
-      handlePagingFunc(e,setCurrentPage)
-    }
-
-
-    //FUNCTION TO GET FAMILY REWARD HISTORY
-    const getJobCompletedHistory = ()=>{
-        // apiCall.getFamilyRewardHx().then((res)=>{
-        //     if(res.data.internal_return < 0){ // success but no data
-        //         setFamilyRewardHistory(prev => ({...prev, loading: false}))
-        //         return
-        //     }
-        //     setFamilyRewardHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
-        // }).catch((error)=>{
-        //     setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
-        // })
-        setTimeout(()=>{
-            setFamilyRewardHistory(prev => ({...prev, loading: false, error:true}))
-        },3000)
-    }
-
-    useEffect(()=>{
-        getJobCompletedHistory()
-      }, [])
-
-  return (
-    <div className='flex flex-col justify-between min-h-[500px]'>
-    {familyRewardHistory.loading ? 
-    <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
-    : familyRewardHistory.data.length ?
-    <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
-            <tr className='text-slate-600'>
-            <th className="p-2"></th>
-            <th className="p-2">Amount</th>
-            <th className="p-2">Date</th>
-            <th className="p-2">Confirmation</th>
-            </tr>
-        </thead>
-        <tbody>
-            {currentReward.map((item, index) => {
-                let date = new Date(item.added).toLocaleDateString()
-                return (
-                    <tr key={index} className='text-slate-500'>
-                        <td className="p-2">
-                            <div className='flex items-center gap-2'>
-                                <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
-                                <div className='flex flex-col'>
-                                    <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
-                                    <p className='text-sm'>{item.description}</p>
-                                </div>
-                            </div>
-                        </td>
-                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-2">{date}</td>
-                        <td className="p-2">{item.confirmation}</td>
-                    </tr>
-                )
-            }
-            )}
-        </tbody>
-    </table>
-    :familyRewardHistory.error ?
-    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-        <span>Opps! an error occurred. Please try again!</span>
-    </div>
-    :
-    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-        <span>No Completed Job History Found!</span>
-    </div>
-    }
-
-    {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
-    {/* END OF PAGINATION BUTTON */}
-    </div>
-  )
-}
-
-export default JobsCompleted

src/components/History/RewardsTable.jsx

@@ -50,7 +50,7 @@ function RewardsTable() {
     <div className='flex flex-col justify-between min-h-[500px]'>
     {familyRewardHistory.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
-    : familyRewardHistory.data.length ?
+    :
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
@@ -60,6 +60,8 @@ function RewardsTable() {
             <th className="p-2">Confirmation</th>
             </tr>
         </thead>
+        {familyRewardHistory.data.length ?
+        (
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
@@ -82,15 +84,24 @@ function RewardsTable() {
             }
             )}
         </tbody>
-    </table>
+        )
-    :familyRewardHistory.error ?
-    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-        <span>Opps! an error occurred. Please try again!</span>
-    </div>
         :
-    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
+        familyRewardHistory.error ? 
-        <span>No Rewards History Found!</span>
+        (
-    </div>
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+            </tr>
+        </tbody>
+        )
+        :
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>No Rewards History Found!</td>
+            </tr>
+        </tbody>
+        }
+    </table>
     }
 
     {/* PAGINATION BUTTON */}

src/components/History/index.jsx

@@ -11,7 +11,6 @@ import PurchasesTable from "../MyWallet/WalletComponent/PurchasesTable";
 import RecentActivityTable from "../MyWallet/WalletComponent/RecentActivityTable";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import RewardsTable from "./RewardsTable";
-import JobsCompleted from "./JobsCompleted";
 
 export default function History() {
 
@@ -250,24 +249,15 @@ export default function History() {
                     >
                     Rewards
                     </button>
-                    <button
-                    name="jobs_completed"
-                    onClick={(e) => setTab(e.target.name)}
-                    className={`px-4 py-1 rounded-t-2xl ${
-                        tab == "jobs_completed" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
-                      }`}
-                    >
-                    Jobs Completed
-                    </button>
                 </div>
                 {/* END OF switch button */}
                 <div className="history-tables w-full">
                     {/* PURCHASE SECTION */}
                     {tab == 'purchases' &&
                         <div className="wallet w-full border-t">
-                            {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> */}
+                            <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1>
                             {purchaseHistory.loading ? 
-                            <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
+                            <LoadingSpinner size='16' color='sky-blue' />
                             :
                             <PurchasesTable purchase={purchaseHistory} />
                             }
@@ -278,10 +268,10 @@ export default function History() {
                     {/* RECENT ACTIVITY SECTION */}
                     {tab == 'recent' &&
                         <div className="wallet w-full border-t">
-                            {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1> */}
+                            <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1>
                             {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                             {paymentHistory.loading ? 
-                            <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
+                            <LoadingSpinner size='16' color='sky-blue' />
                             :
                             <RecentActivityTable payment={paymentHistory} />
                         }
@@ -296,14 +286,6 @@ export default function History() {
                         </div>
                     }
                     {/* END OF REWARD SECTION */}
-
-                    {/* JOBS COMPLETED SECTION */}
-                    {tab == 'jobs_completed' &&
-                        <div className="wallet w-full border-t">
-                            <JobsCompleted />
-                        </div>
-                    }
-                    {/* END OF JOBS COMPLETED SECTION */}
                 </div>
             </div>
             {/*<HistoryTable />*/}

src/components/Home/FamilyActiveLSlde.jsx

@@ -4,7 +4,7 @@ import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 import FamilyActiveJobsCard from "../Cards/FamilyActiveJobsCard";
 
-export default function FamilyActiveLSlde({ className, trending, image_server }) {
+export default function FamilyActiveLSlde({ className, trending }) {
     const settings = {
         arrows: false,
         slidesToShow: 3,
@@ -98,7 +98,7 @@ export default function FamilyActiveLSlde({ className, trending, image_server })
                     {trending &&
                         trending.length > 0 &&
                         trending.map((item) => (
-                            <FamilyActiveJobsCard key={item.id} datas={item} image_server={image_server} />
+                            <FamilyActiveJobsCard key={item.id} datas={item} />
                         ))}
                 </SliderCom>
             </div>

src/components/Home/FamilyDash.jsx

@@ -4,22 +4,18 @@ import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
 
 export default function FamilyDash({ familyOffers, MyActiveJobList }) {
-  // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
+  console.log("PROPS IN FAMILY DASH->", familyOffers);
 
   const trending = MyActiveJobList;
   return (
     <div>
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
-        {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
+        {familyOffers && familyOffers.length > 0 && (
-          <MyOffersFamilyTable
+          <MyOffersFamilyTable familyOffers={familyOffers} className="mb-10" />
-            familyOffers={familyOffers?.result_list}
-            image_server={familyOffers?.session_image_server}
-            className="mb-10"
-          />
         )}
         {trending && trending.length > 0 && (
-          <FamilyActiveLSlde trending={trending} className="mb-10" image_server={familyOffers?.session_image_server} />
+          <FamilyActiveLSlde trending={trending} className="mb-10" />
         )}
 
         {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}

src/components/Home/FullAccountDash.jsx

@@ -34,7 +34,6 @@ export default function FullAccountDash(props) {
             <MyJobTable
               ActiveJobList={props.MyActiveJobList}
               Account={userDetails}
-              imageServer={props.offersList?.data?.session_image_server}
             />
           </>
         ) : !props.offersList?.loading && !props.MyActiveJobList?.loading ? (

src/components/Home/index.jsx

@@ -75,7 +75,7 @@ export default function Home(props) {
           <FamilyDash
             account={userDetails}
             commonHeadData={props.bannerList}
-            familyOffers={MyOffersList?.data}
+            familyOffers={MyOffersList?.data?.result_list}
             MyActiveJobList={MyActiveJobList?.data}
           />
         ) : userDetails && userDetails?.account_type == "FULL" ? (

src/components/Lnd/Lnd.jsx

@@ -1,27 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import Layout from '../Partials/Layout'
-
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-
-function Lnd() {
-
-  const [reqStatus, setReqStatus] = useState({loading:true, data: []})
-
-  useEffect(()=>{
-    const timer = setTimeout(()=>{
-      setReqStatus({loading:false, data: []})
-    },2000)
-    return () => clearTimeout(timer)
-  }, [])
-  return (
-    <>
-      {reqStatus.loading ?
-        <LoadingSpinner color='sky-blue' size='32' height='min-h-screen' />
-      :
-        <div className='min-h-screen flex flex-col justify-center items-center'>Empty Dummy Page</div>
-      }
-    </>
-  )
-}
-
-export default Lnd

src/components/MarketPlace/MainSection.jsx

@@ -8,7 +8,6 @@ import SelectBox from "../Helpers/SelectBox";
 export default function MainSection({
   className,
   marketPlaceProduct,
-  image_server,
   categories,
 }) {
   // Creating All cart..
@@ -111,7 +110,6 @@ export default function MainSection({
               {({ datas }) => (
                 <AvailableJobsCard
                   contentDisplay={contentDisplay}
-                  image_server={image_server}
                   key={datas.id}
                   datas={datas}
                 />

src/components/MarketPlace/index.jsx

@@ -7,7 +7,6 @@ export default function MarketPlace({ commonHeadData }) {
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
   const categories = jobLists?.categories;
-  const image_server = jobLists?.session_image_server;
 
   return (
     <>
@@ -16,7 +15,6 @@ export default function MarketPlace({ commonHeadData }) {
         <MainSection
           marketPlaceProduct={marketData}
           categories={categories}
-          image_server={image_server}
           className="mb-10"
         />
       </Layout>

src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx

@@ -3,12 +3,9 @@ import ModalCom from '../../Helpers/ModalCom'
 import LoadingSpinner from '../../Spinners/LoadingSpinner'
 import { useNavigate } from 'react-router-dom'
 import usersService from '../../../services/UsersService'
-import { useDispatch } from 'react-redux'
-import { tableReload } from '../../../store/TableReloads'
 
 function ReviewJobAction({jobDetails}) {
 
-    const dispatch = useDispatch()
     const apiCall = new usersService()
     const navigate = useNavigate()
 
@@ -51,7 +48,6 @@ function ReviewJobAction({jobDetails}) {
                 return
             }
             setReqStatus({loading:false, status: true, message: 'job completion accepted successfully'})
-            dispatch(tableReload({ type: "WALLETTABLE" }));
             setTimeout(()=>{ // Sets popout to false and navigates user to /my-review-jobs after 3 seconds
                 popUpHandler()
                 navigate('/my-review-jobs', {replace: true})

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -6,7 +6,6 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 
 export default function MyActiveJobTable({ MyJobList, className }) {
-
   const navigate = useNavigate();
   let { pathname } = useLocation();
 
@@ -45,7 +44,6 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           key={index}
@@ -53,9 +51,11 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="max-w-[60px] max-h-[60px] min-w-[60px] min-h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
+                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={image}
+                                  src={localImgLoad(
+                                    `images/taskbanners/${value.banner}`
+                                  )}
                                   alt="data"
                                   className="w-full h-full rounded-full"
                                 />

src/components/MyJobs/MyJobTable.jsx

@@ -11,8 +11,8 @@ import PaginatedList from "../Pagination/PaginatedList";
 import EditJobPopOut from "../jobPopout/EditJobPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
-import EditIcon from "../../assets/images/icon-edit.svg";
+import EditIcon from '../../assets/images/icon-edit.svg'
-import DeleteIcon from "../../assets/images/icon-delete.svg";
+import DeleteIcon from '../../assets/images/icon-delete.svg'
 import localImgLoad from "../../lib/localImgLoad";
 
 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
@@ -101,19 +101,12 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
     }
   };
 
-  const JobListItem = ({ value, index, image_server }) => {
+  const JobListItem = ({ value, index }) => {
     let thePrice = PriceFormatter(
       value?.price * 0.01,
       value?.currency_code,
       value?.currency
     );
-
-    const image = localStorage.getItem("session_token")
-      ? `${image_server}${localStorage.getItem("session_token")}/job/${
-          value.job_uid
-        }`
-      : "";
-
     return (
       <tr
         key={index}
@@ -123,11 +116,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
           <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
             <div className="flex space-x-2 items-center job-items w-full">
               <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
-                <img
+                <img src={localImgLoad(`images/taskbanners/${value.banner ? value.banner : 'default.jpg'}`)} alt="data" className="w-full h-full rounded-full" />
-                  src={image}
-                  alt="data"
-                  className="w-full h-full rounded-full"
-                />
               </div>
               <div className="flex flex-col flex-[0.9]">
                 <h1 className="font-bold text-xl text-dark-gray dark:text-white">
@@ -158,11 +147,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                   });
                 }}
               >
-                <img
+                <img className="w-[21px] h-[21px]" src={DeleteIcon} alt='delete-icon' />
-                  className="w-[21px] h-[21px]"
-                  src={DeleteIcon}
-                  alt="delete-icon"
-                />
               </button>
               <div className="mx-[4px] h-full w-[1px] bg-black dark:bg-dark-gray"></div>
               <button
@@ -175,11 +160,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                   });
                 }}
               >
-                <img
+                <img className="w-[21px] h-[21px]" src={EditIcon} alt='edit-icon' />
-                  className="w-[21px] h-[21px]"
-                  src={EditIcon}
-                  alt="edit-icon"
-                />
                 <span className="text-sm text-sky-blue">Edit</span>
               </button>
             </div>
@@ -220,7 +201,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
           contentBodyClasses="w-auto min-w-max"
         />
       </div>
-      {MyJobList?.loading ? (
+      {MyJobList.loading ? (
         <LoadingSpinner size="16" color="sky-blue" />
       ) : (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[520px]">
@@ -232,12 +213,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                 MyJobList.data?.result_list.length > 0 ? (
                   filteredCurrentJobList?.length ? (
                     filteredCurrentJobList.map((value, index) => (
-                      <JobListItem
+                      <JobListItem index={index} key={index} value={value} />
-                        index={index}
-                        key={index}
-                        value={value}
-                        image_server={MyJobList?.data.session_image_server}
-                      />
                     ))
                   ) : (
                     <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -8,7 +8,6 @@ import localImgLoad from "../../lib/localImgLoad";
 
 
 export default function MyPendingJobTable({ MyJobList, className }) {
-
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -46,7 +45,6 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           key={index}
@@ -56,7 +54,7 @@ export default function MyPendingJobTable({ 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={image}
+                                  src={localImgLoad(`images/taskbanners/${value.banner || "default.jpg"}`)}
                                   alt="data"
                                   className="w-full h-full rounded-full"
                                 />

src/components/MyTasks/MyJobTable.jsx

@@ -10,7 +10,7 @@ import localImgLoad from "../../lib/localImgLoad";
 const noTasksBg = require("../../assets/images/no-task-background.jpg");
 const noFamilyTasksBg = require("../../assets/images/family-no-task-background.jpg");
 
-export default function MyJobTable({ className, ActiveJobList, Account, imageServer }) {
+export default function MyJobTable({ className, ActiveJobList, Account }) {
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
@@ -55,7 +55,7 @@ export default function MyJobTable({ className, ActiveJobList, Account, imageSer
       {!ActiveJobList?.data.length && accountType && (
         <div className="absolute inset-0 bg-black opacity-30"></div>
       )}
-      {ActiveJobList?.loading ? 
+      {ActiveJobList.loading ? 
         <div className="w-full h-[520px] flex items-center justify-center">
           <LoadingSpinner size="16" color="sky-blue" />
         </div>
@@ -71,7 +71,6 @@ export default function MyJobTable({ className, ActiveJobList, Account, imageSer
                 task?.currency_code,
                 task?.currency
               );
-              let image = `${imageServer}${localStorage.getItem('session_token')}/job/${task.origin_job_uid}`
               return (
                 <div
                   className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
@@ -81,7 +80,7 @@ export default function MyJobTable({ className, ActiveJobList, Account, imageSer
                     <div className="flex space-x-2 items-center">
                       <div className="w-full min-w-[60px] max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                         <img
-                          src={image}
+                          src={localImgLoad(`images/taskbanners/${task?.banner}`)}
                           alt="data"
                           className="w-full h-full"
                         />

src/components/MyTasks/MyOffersFamilyTable.jsx

@@ -4,7 +4,7 @@ import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 import FamilyOfferJobPopout from "../jobPopout/FamilyOfferJobPopout";
 
-export default function MyOffersFamilyTable({ className, familyOffers, image_server }) {
+export default function MyOffersFamilyTable({ className, familyOffers }) {
   let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
   const settings = {
     arrows: false,
@@ -117,7 +117,6 @@ export default function MyOffersFamilyTable({ className, familyOffers, image_ser
                       key={item.id}
                       datas={item}
                       setOfferPopout={setOfferPopout}
-                      image_server={image_server}
                     />
                   );
                 })}

src/components/MyTasks/MyOffersTable.jsx

@@ -122,7 +122,7 @@ export default function MyOffersTable({ className, MyActiveOffersList }) {
                       MyActiveOffersList?.result_list?.length > 0 &&
                       MyActiveOffersList.result_list.map((item) => {
                         return (
-                          <OfferCard key={item.id} datas={item} setOfferPopout={setOfferPopout} image_server={MyActiveOffersList.session_image_server} />
+                          <OfferCard key={item.id} datas={item} setOfferPopout={setOfferPopout} />
                         )
                       })}
               </SliderCom>

src/components/MyTasks/index.jsx

@@ -94,7 +94,7 @@ export default function MyTasks({
                 </button>
               }
             </div>
-          <MyJobTable ActiveJobList={ActiveJobList} Account={userDetails} imageServer={MyActiveOffersList.session_image_server} />
+          <MyJobTable ActiveJobList={ActiveJobList} Account={userDetails} />
         </div>
       </div>
     </Layout>

src/components/MyWaitingJobs/MyWaitingJobTable.jsx

@@ -44,7 +44,7 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      let image = value.banner ? value.banner : 'default.jpg'
                       return (
                         <tr
                           key={index}
@@ -52,9 +52,9 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="max-w-[60px] max-h-[60px] min-w-[60px] min-h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
+                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={image}
+                                  src={localImgLoad(`images/taskbanners/${image}`)}
                                   alt="data"
                                   className="w-full h-full rounded-full"
                                 />

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -170,9 +170,9 @@ function ConfirmNairaWithdraw({
                         viewBox="0 0 24 24"
                         fill="none"
                         stroke="green"
-                        strokeWidth="2"
+                        stroke-width="2"
-                        strokeLinecap="round"
+                        stroke-linecap="round"
-                        strokeLinejoin="round"
+                        stroke-linejoin="round"
                         className="feather feather-check-circle"
                       >
                         <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
@@ -186,9 +186,9 @@ function ConfirmNairaWithdraw({
                         width="100"
                         height="100"
                         stroke="red"
-                        strokeWidth="2"
+                        stroke-width="2"
-                        strokeLinecap="round"
+                        stroke-linecap="round"
-                        strokeLinejoin="round"
+                        stroke-linejoin="round"
                         className="feather feather-x-circle"
                       >
                         <circle cx="12" cy="12" r="10"></circle>

src/components/MyWallet/WalletBox.jsx

@@ -1,7 +1,5 @@
-import { useSelector } from "react-redux";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
-import WalletItemCardFamily from "./WalletItemCardFamily";
 
 /**
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
@@ -9,27 +7,9 @@ import WalletItemCardFamily from "./WalletItemCardFamily";
 export default function WalletBox({ wallet, payment, countries }) {
   const { loading, data } = wallet;
 
-  const { userDetails } = useSelector((state) => state.userDetails);
-  const accountType = userDetails?.account_type === "FAMILY";
-
   return (
     <div className="my-wallet-wrapper w-full mb-10">
       <div className="main-wrapper w-full">
-        {accountType ?
-        <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
-          {loading ? (
-            <div className="w-full h-full flex items-center justify-center">
-              <LoadingSpinner size="16" color="sky-blue" />
-            </div>
-          ) : (
-            data.length > 0 && data.map((item) => (
-              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
-                <WalletItemCardFamily walletItem={item} payment={payment} countries={countries} />
-              </div>
-            ))
-          )}
-        </div>
-        :
         <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
           {loading ? (
             <div className="w-full h-full flex items-center justify-center">
@@ -43,7 +23,6 @@ export default function WalletBox({ wallet, payment, countries }) {
             ))
           )}
         </div>
-        }
       </div>
     </div>
   );

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -16,7 +16,6 @@ function PurchasesTable({purchase}) {
 
   return (
     <div className='flex flex-col justify-between min-h-[500px]'>
-        {purchase.data.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
@@ -25,6 +24,8 @@ function PurchasesTable({purchase}) {
             <th className="p-2">Fee</th>
             </tr>
         </thead>
+        {purchase.data.length ?
+        (
         <tbody>
             {currentPurchase.map((item, index) => (
             <tr key={index} className='text-slate-500'>
@@ -36,16 +37,24 @@ function PurchasesTable({purchase}) {
             </tr>
             ))}
         </tbody>
-        </table>
+        )
-        :purchase.error ?
-        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-            <span>Opps! an error occurred. Please try again!</span>
-        </div>
         :
-        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
+        purchase.error ? 
-            <span>No Purchase History Found!</span>
+        (
-        </div> 
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+            </tr>
+        </tbody>
+        )
+        :
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>No Purchase History Found!</td>
+            </tr>
+        </tbody>
         }
+    </table>
 
     {/* PAGINATION BUTTON */}
     <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -19,7 +19,6 @@ function RecentActivityTable({ payment }) {
 
   return (
     <div className="flex flex-col justify-between min-h-[500px]">
-      {payment?.data?.length > 0 ? 
       <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className="border-b-2">
           <tr className="text-slate-600">
@@ -29,6 +28,7 @@ function RecentActivityTable({ payment }) {
             <th className="p-2">Status</th>
           </tr>
         </thead>
+        {payment?.data?.length > 0 ? (
           <tbody>
             {currentActivity.map((item, index) => (
               <tr key={index} className="text-slate-500">
@@ -46,16 +46,24 @@ function RecentActivityTable({ payment }) {
               </tr>
             ))}
           </tbody>
+        ) : payment?.error ? (
+          <tbody>
+            <tr className="text-slate-500">
+              <td className="p-2" colSpan={4}>
+                Opps! an error occurred. Please try again!
+              </td>
+            </tr>
+          </tbody>
+        ) : (
+          <tbody>
+            <tr className="text-slate-500">
+              <td className="p-2" colSpan={4}>
+                No Payment History Found!
+              </td>
+            </tr>
+          </tbody>
+        )}
       </table>
-      :payment.error ?
-        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-            <span>Opps! an error occurred. Please try again!</span>
-        </div>
-        :
-        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-            <span>No Payment History Found!</span>
-        </div> 
-      }
 
       {/* PAGINATION BUTTON */}
       <PaginatedList

src/components/MyWallet/WalletItemCard.jsx

@@ -11,7 +11,8 @@ import WalletAction from "./WalletAction";
  * Renders a card displaying information about a wallet item.
  */
 export default function WalletItemCard({ walletItem, payment, countries }) {
-  
+  const { userDetails } = useSelector((state) => state.userDetails);
+  const accountType = userDetails?.account_type === "FAMILY";
   const dispatch = useDispatch();
   const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
 
@@ -90,11 +91,13 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
 
         <div className="my-2 w-full h-[1px] bg-white"></div>
 
+        {!accountType && (
           <WalletAction
             walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}
             payment={payment}
             openPopUp={openPopUp}
           />
+        )}
       </div>
 
       {creditPopup.show && (

src/components/MyWallet/WalletItemCardFamily.jsx

@@ -1,97 +0,0 @@
-import React, { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
-import localImgLoad from "../../lib/localImgLoad";
-import { tableReload } from "../../store/TableReloads";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
-import CreditPopup from "./Popup/CreditPopup";
-import WalletAction from "./WalletAction";
-
-/**
- * Renders a card displaying information about a wallet item.
- */
-export default function WalletItemCardFamily({ walletItem, payment, countries }) {
-
-  const dispatch = useDispatch();
-  const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
-
-  /**
-   * Opens the credit popup.
-   * @param {Object} value - The value object.
-   */
-  const openPopUp = (value) => {
-    setCreditPopup({
-      show: true,
-      data: { ...value },
-    });
-  };
-
-  /**
-   * Closes the credit popup and dispatches a table reload action.
-   */
-  const closePopUp = () => {
-    setCreditPopup({ show: false, data: {} });
-    dispatch(tableReload({ type: "WALLETTABLE" }));
-  };
-
-  const currentWalletCurrency = countries
-    .map((country) => country)
-    .filter((country) => country[0] === walletItem.country);
-
-  const image = walletItem.code
-    ? `${walletItem.code.toLowerCase()}.svg`
-    : "default.png";
-
-  return (
-    <>
-      <div
-        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
-        style={{
-          background: `url(${background}) 0% 0% / cover no-repeat`,
-        }}
-      >
-        <div className="wallet w-full flex justify-between items-center gap-3">
-          <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
-            <img
-              src={localImgLoad(`images/currency/${image}`)}
-              className="w-full h-full"
-              alt="currency-icon"
-            />
-          </div>
-          <div className="balance w-full mt-2 flex justify-center">
-            <div className="">
-              <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide mb-2 sm:mb-6">
-                Current Balance
-              </p>
-              <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125">
-                {PriceFormatter(
-                  walletItem.amount * 0.01,
-                  walletItem.code,
-                  undefined,
-                  "text-[2rem]"
-                )}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="my-2 w-full h-[1px] bg-white"></div>
-
-           {/* <WalletAction
-             walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}
-             payment={payment}
-             openPopUp={openPopUp}
-           /> */}
-      </div>
-
-      {creditPopup.show && (
-        <CreditPopup
-          details={creditPopup.data}
-          walletItem={walletItem}
-          onClose={closePopUp}
-          situation={openPopUp}
-        />
-      )}
-    </>
-  );
-}

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -6,11 +6,8 @@ import CommonHead from "../UserHeader/CommonHead";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import OthersInterestedTable from "./OthersInterestedTable";
-import { useDispatch } from "react-redux";
-import { tableReload } from "../../store/TableReloads";
 
 export default function ManageInterestOffer(props) {
-    const dispatch = useDispatch()
     const navigate = useNavigate()
     const apiCall = new usersService()
 
@@ -92,7 +89,6 @@ export default function ManageInterestOffer(props) {
                 setRedirectTime(prev => prev - 1)
             }, 1000);
             setRequestStatus({loading: false, status: true, message: `Offer ${name}ed`, processType: ''})
-            dispatch(tableReload({ type: "WALLETTABLE" }));
             setTimeout(()=>{
                 navigate('/offer-interest', {replace: true})
                 clearInterval(intervalTime)

src/components/Partials/Header.jsx

@@ -36,18 +36,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
   const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
 
-  const image = localStorage.getItem("session_token")
-    ? userDetails.account_type === "FAMILY"
-      ? `${userDetails.session_image_server}${localStorage.getItem(
-          "session_token"
-        )}/family/${sessionStorage.getItem("family_uid")}`
-      : `${userDetails.session_image_server}${localStorage.getItem(
-          "session_token"
-        )}/profile/${userDetails.uid}`
-    : "";
-
-  // 9308RDR122
-
   const handlerBalance = () => {
     setbalanceValue.toggle();
     if (notificationDropdown) {
@@ -103,7 +91,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   // User Profile
   let { firstname, lastname, email, profile_pic_url } = userDetails;
   let userEmail = email?.split("@")[0];
-  const userProfileImage = image || DEFAULT_PROFILE_IMAGE;
+  const userProfileImage = profile_pic_url || DEFAULT_PROFILE_IMAGE;
 
   return (
     <>

src/components/Partials/Layout.jsx

@@ -23,7 +23,6 @@ export default function Layout({ children }) {
     localStorage.removeItem("session_token");
     localStorage.removeItem("member_id");
     localStorage.removeItem("uid");
-    sessionStorage.removeItem("family_uid");
     // localStorage.clear();
     // toast.success("Come Back Soon", {
     //   icon: `🙂`,

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import usersService from "../../../services/UsersService";
@@ -6,9 +6,6 @@ import Icons from "../../Helpers/Icons";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-import cover from "../../../assets/images/profile-info-cover.png";
-import profileImage from "../../../assets/images/profile.jpg";
-
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 
@@ -46,15 +43,18 @@ export default function PersonalInfoTab({
   frstNmeHndlr,
   lstNmeHndlr,
   dscrphn,
+  profileImg,
+  coverImg,
+  profileImgInput,
+  browseProfileImg,
+  profileImgChangHandler,
+  coverImgInput,
+  browseCoverImg,
+  coverImgChangHandler,
+  uploadStatus
 }) {
   let { userDetails } = useSelector((state) => state.userDetails);
 
-  const image = localStorage.getItem("session_token")
-    ? `${userDetails.session_image_server}${localStorage.getItem(
-        "session_token"
-      )}/profile/${userDetails.uid}`
-    : "";
-
   const apiCall = new usersService();
 
   let navigate = useNavigate();
@@ -85,125 +85,6 @@ export default function PersonalInfoTab({
     status: false,
   });
 
-  const [profileImg, setProfileImg] = useState(
-    userDetails?.session_image_server ? image : profileImage
-  );
-
-  let [uploadStatus, setUploadStatus] = useState({
-    loading: false,
-    status: false,
-    message: "",
-  }); // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
-
-  const [coverImg, setCoverImg] = useState(cover);
-
-  // profile img
-  const profileImgInput = useRef(null);
-  const browseProfileImg = () => {
-    profileImgInput.current.click();
-  };
-
-  const profileImgChangHandler = (e) => {
-    setUploadStatus({ loading: false, status: false, message: "" });
-    const acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"]; // ARRAY OF SUPPORTED FORMATS
-    const uploadedFile = e.target.files[0]; //UPLOADED FILE
-
-    const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
-    const MAX_FILE_SIZE = 5 * 1048576; // 5MB
-
-    if (!acceptedFormat.includes(fileFormat)) {
-      //CHECKING FOR CORRECT UPLOAD FORMAT
-      const msg = `Please select ${acceptedFormat
-        .slice(0, -1)
-        .join(", ")} or ${acceptedFormat.slice(-1)}`;
-      setUploadStatus({ loading: false, status: false, message: msg });
-      return setTimeout(() => {
-        profileImgInput.current.value = ""; // clear the input
-        setUploadStatus({ loading: false, status: false, message: "" });
-      }, 5000);
-    }
-
-    if (uploadedFile.size > MAX_FILE_SIZE) {
-      // CHECKING FOR CORRECT FILE SIZE
-      setUploadStatus({
-        loading: false,
-        status: false,
-        message: "File must not exceed 5MB",
-      });
-      return setTimeout(() => {
-        profileImgInput.current.value = ""; // clear the input
-        setUploadStatus({ loading: false, status: false, message: "" });
-      }, 5000);
-    }
-
-    if (e.target.value !== "") {
-      const imgReader = new FileReader();
-      imgReader.onload = (event) => {
-        let base64Img = imgReader.result.split(",")[1];
-        let reqData = {
-          // PAYLOAD FOR API CALL
-          file_name: uploadedFile?.name,
-          file_size: uploadedFile?.size,
-          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
-          file_data: base64Img,
-          msg_type: "FILE",
-          action: 11300,
-        };
-
-        setUploadStatus({
-          loading: true,
-          status: false,
-          message: "Loading...",
-        });
-        apiCall
-          .sendFiles(reqData)
-          .then((res) => {
-            if (res.status != 200 || res.data.internal_return < 0) {
-              return setUploadStatus({
-                loading: false,
-                status: false,
-                message: "Something went wrong, try again",
-              });
-            }
-            setUploadStatus({
-              loading: false,
-              status: true,
-              message: "Uploaded successfully",
-            });
-            setProfileImg(event.target.result);
-          })
-          .catch((error) => {
-            setUploadStatus({
-              loading: false,
-              status: false,
-              message: "Network error, try again",
-            });
-          })
-          .finally(() => {
-            setTimeout(() => {
-              setUploadStatus({ loading: false, status: false, message: "" });
-            }, 5000);
-          });
-      };
-      imgReader.readAsDataURL(uploadedFile);
-    }
-  };
-
-  // cover img
-  const coverImgInput = useRef(null);
-  const browseCoverImg = () => {
-    coverImgInput.current.click();
-  };
-  const coverImgChangHandler = (e) => {
-    if (e.target.value !== "") {
-      const imgReader = new FileReader();
-      imgReader.onload = (event) => {
-        setCoverImg(event.target.result);
-      };
-      imgReader.readAsDataURL(e.target.files[0]);
-    }
-  };
-
   const handleUpdateUser = (values, helpers) => {
     setRequestState({ message: "", loading: true, status: false });
 
@@ -493,7 +374,7 @@ export default function PersonalInfoTab({
                       <p className="text-base text-thin-light-gray mb-5">
                         Profile of at least Size
                         <span className="ml-1   text-dark-gray dark:text-white">
-                        200x200
+                          300x300
                         </span>
                         . Gifs work too.
                         <span className="ml-1   text-dark-gray dark:text-white">
@@ -502,11 +383,11 @@ export default function PersonalInfoTab({
                         .
                       </p>
                       <div className="flex justify-center">
-                      <div className="w-[200px] h-[200px] relative">
+                        <div className="w-full relative">
                           <img
                             src={profileImg}
                             alt="profile"
-                          className="sm:w-[198px] sm:h-[198px] w-full h-full rounded-full overflow-hidden object-cover object-center"
+                            className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-contain object-center"
                           />
                           <input
                             ref={profileImgInput}
@@ -516,7 +397,7 @@ export default function PersonalInfoTab({
                           />
                           <div
                             onClick={browseProfileImg}
-                          className="w-[32px] h-[32px] absolute bottom-4 right-4  hover:bg-pink bg-dark-gray rounded-full cursor-pointer"
+                            className="w-[32px] h-[32px] absolute bottom-7 sm:right-10 right-[105px]  hover:bg-pink bg-dark-gray rounded-full cursor-pointer"
                           >
                             <svg
                               width="32"
@@ -537,20 +418,8 @@ export default function PersonalInfoTab({
                           </div>
                         </div>
                       </div>
-                    {uploadStatus.message && !uploadStatus.loading && (
+                      {uploadStatus.message && !uploadStatus.loading && <p className={`text-center ${uploadStatus.status ? 'text-green-500':'text-red-500'}`}>{uploadStatus.message}</p>}
-                      <p
+                      {uploadStatus.loading && <p className="text-center">{uploadStatus.message}</p>}
-                        className={`text-center ${
-                          uploadStatus.status
-                            ? "text-green-500"
-                            : "text-red-500"
-                        }`}
-                      >
-                        {uploadStatus.message}
-                      </p>
-                    )}
-                    {uploadStatus.loading && (
-                      <p className="text-center">{uploadStatus.message}</p>
-                    )}
                     </div>
                   </div>
                 {/* } */}

src/components/Settings/index.jsx

@@ -6,6 +6,8 @@ import React, {
   useState,
 } from "react";
 import { useSelector } from "react-redux";
+import cover from "../../assets/images/profile-info-cover.png";
+import profile from "../../assets/images/profile.jpg";
 import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
 import Layout from "../Partials/Layout";
@@ -24,8 +26,161 @@ import RecipientAccountTab from "./Tabs/RecipientAccountTab";
 export default function Settings({ faq }) {
   const apiCall = new usersService();
   const { userDetails } = useSelector((state) => state?.userDetails);
+  const [profileImg, setProfileImg] = useState(
+    userDetails?.profile_pic_url ? userDetails.profile_pic_url : profile
+  );
+  let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
+  const [coverImg, setCoverImg] = useState(cover);
   const [reloadCardList, setReloadCardList] = useState(false); // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
 
+  // profile img
+  const profileImgInput = useRef(null);
+  const browseProfileImg = () => {
+    profileImgInput.current.click();
+  };
+  const profileImgChangHandler = (e) => {
+    // if (e.target.value !== "") {
+    //   const imgReader = new FileReader();
+    //   imgReader.onload = (event) => {
+    //     setProfileImg(event.target.result);
+    //   };
+    //   imgReader.readAsDataURL(e.target.files[0]);
+    // }
+    setUploadStatus({loading: false, status: false, message:''})
+    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS
+    let uploadedFile = e.target.files[0] //UPLOADED FILE
+
+    if(!acceptedFormat.includes(uploadedFile?.type?.split("/")[1]?.toLowerCase())){ //CHECKING FOR CORRECT UPLOAD FORMAT
+      let msg = 'Please select '
+      for(let i=0; i<=acceptedFormat.length-1; i++){
+        if(i == acceptedFormat.length-1){
+          msg+=`or ${acceptedFormat[i]}`
+        }else{
+          msg+=`${acceptedFormat[i]}, `
+        }
+      }
+      setUploadStatus({loading: false, status: false, message:msg})
+      return setTimeout(()=>{
+        profileImgInput.current.value = '' // clear the input
+        setUploadStatus({loading: false, status: false, message:''})
+      },5000)
+    }
+
+    if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE
+      setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'})
+      return setTimeout(()=>{
+        profileImgInput.current.value = '' // clear the input
+        setUploadStatus({loading: false, status: false, message:''})
+      },5000)
+    }
+
+    if (e.target.value !== "") {
+      const imgReader = new FileReader();
+      imgReader.onload = (event) => {
+        let reqData = { // PAYLOAD FOR API CALL
+          file_name: uploadedFile?.name,
+          file_size: uploadedFile?.size,
+          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
+          file_data: event?.target?.result,
+          msg_type: 'FILE',
+          action: 'WRENCHBOARD_PICTURE_PROFILE',
+          // action: 11307
+        }
+        setUploadStatus({loading: true, status: false, message:'Loading...'})
+        apiCall.sendFiles(reqData).then(res=>{
+          if(res.status != 200 || res.data.internal_return < 0){
+            return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'})
+          }
+          setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'})
+          setProfileImg(event.target.result);
+        }).catch(error=>{
+          setUploadStatus({loading: false, status: false, message: 'Network error, try again'})
+        }).finally(()=>{
+          setTimeout(()=>{
+            setUploadStatus({loading: false, status: false, message: ''})
+          },5000)
+        })
+      };
+      imgReader.readAsDataURL(e.target.files[0]);
+    }
+  };
+  // cover img
+  const coverImgInput = useRef(null);
+  const browseCoverImg = () => {
+    coverImgInput.current.click();
+  };
+  const coverImgChangHandler = (e) => {
+    if (e.target.value !== "") {
+      const imgReader = new FileReader();
+      imgReader.onload = (event) => {
+        setCoverImg(event.target.result);
+      };
+      imgReader.readAsDataURL(e.target.files[0]);
+    }
+  };
+
+  // Tabs Handling
+  const tabs = [
+    {
+      id: 1,
+      name: "personal",
+      title: "Edit Profile",
+      iconName: "people-hover",
+    },
+    {
+      id: 2,
+      name: "payment",
+      title: "Payment Cards",
+      iconName: "bank-card",
+    },
+    {
+      id: 3,
+      name: "recipients-account",
+      title: "Recipients Account",
+      iconName: "bank-card",
+    },
+    {
+      id: 4,
+      name: "notification",
+      title: "Notification Setting",
+      iconName: "notification-setting",
+    },
+    {
+      id: 5,
+      name: "login_activity",
+      title: "Login Activity",
+      iconName: "login-activity",
+    },
+    {
+      id: 6,
+      name: "password",
+      title: "Change Password",
+      iconName: "password-hover",
+    },
+    {
+      id: 7,
+      name: "faq",
+      title: "FAQ",
+      iconName: "block-question",
+    },
+    {
+      id: 8,
+      name: "privacy",
+      title: "Privacy Policy",
+      iconName: "page-right",
+    },
+    {
+      id: 9,
+      name: "terms",
+      title: "Terms and Conditions",
+      iconName: "page-right",
+    },
+  ];
+  const [tab, setTab] = useState(tabs[0].name);
+  const tabHandler = (value) => {
+    setTab(value);
+  };
+
   // Recipient Account
   const [recipientAccount, setRecipientAccount] = useState({
     state: false,
@@ -68,120 +223,6 @@ export default function Settings({ faq }) {
     getRecipientAccount();
   }, [reloadCardList]);
 
-  // Tabs Handling
-  const tabs = [
-    {
-      id: 1,
-      name: "personal",
-      title: "Edit Profile",
-      iconName: "people-hover",
-    },
-    {
-      id: 2,
-      name: "payment",
-      title: "Payment Cards",
-      iconName: "bank-card",
-    },
-    {
-      id: 3,
-      name: "recipients_account",
-      title: "Recipients Account",
-      iconName: "bank-card",
-    },
-    {
-      id: 4,
-      name: "notification",
-      title: "Notification Setting",
-      iconName: "notification-setting",
-    },
-    {
-      id: 5,
-      name: "login_activity",
-      title: "Login Activity",
-      iconName: "login-activity",
-    },
-    {
-      id: 6,
-      name: "password",
-      title: "Change Password",
-      iconName: "password-hover",
-    },
-    {
-      id: 7,
-      name: "faq",
-      title: "FAQ",
-      iconName: "block-question",
-    },
-    {
-      id: 8,
-      name: "privacy",
-      title: "Privacy Policy",
-      iconName: "page-right",
-    },
-    {
-      id: 9,
-      name: "terms",
-      title: "Terms and Conditions",
-      iconName: "page-right",
-    },
-  ];
-
-  const [tab, setTab] = useState(() => {
-    // Retrieve the active tab from local storage or use the default tab
-    return localStorage.getItem("activeTab") || tabs[0].name;
-  });
-
-  const tabHandler = (value) => {
-    setTab(value);
-  };
-
-  // Update local storage when the tab changes
-  useEffect(() => {
-    localStorage.setItem("activeTab", tab);
-  }, [tab]);
-
-  const tabComponents = {
-    personal: (
-      <div className="tab-item">
-        <PersonalInfoTab />
-      </div>
-    ),
-    payment: (
-      <div className="tab-item">
-        <PaymentMathodsTab />
-      </div>
-    ),
-    recipients_account: (
-      <div className="tab-item">
-        <RecipientAccountTab
-          recipientAccount={recipientAccount}
-          setRecipientAccount={setRecipientAccount}
-          setReloadCardList={setReloadCardList}
-        />
-      </div>
-    ),
-    notification: (
-      <div className="tab-item">
-        <NotificationSettingTab />
-      </div>
-    ),
-    login_activity: <LoginActivityTab />,
-    password: <ChangePasswordTab />,
-    faq: <FaqTab datas={faq} />,
-    privacy: <PrivacyPolicyTab />,
-    terms: <TermsConditionTab />,
-  };
-
-  // Default tab component
-  const defaultTabComponent = (
-    <div className="tab-item">
-      <PersonalInfoTab />
-    </div>
-  );
-
-  // Selected tab component based on the current 'tab'
-  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
-
   return (
     <>
       <Layout>
@@ -222,7 +263,45 @@ export default function Settings({ faq }) {
                 </div>
                 <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
                 <div className="content-body-items flex-1">
-                  {selectedTabComponent}
+                  {tab === "personal" && (
+                    <div className="tab-item">
+                      <PersonalInfoTab
+                        profileImg={profileImg}
+                        coverImg={coverImg}
+                        browseProfileImg={browseProfileImg}
+                        profileImgInput={profileImgInput}
+                        profileImgChangHandler={profileImgChangHandler}
+                        coverImgChangHandler={coverImgChangHandler}
+                        browseCoverImg={browseCoverImg}
+                        coverImgInput={coverImgInput}
+                        uploadStatus={uploadStatus}
+                      />
+                    </div>
+                  )}
+                  {tab === "payment" && (
+                    <div className="tab-item">
+                      <PaymentMathodsTab />
+                    </div>
+                  )}
+                  {tab === "recipients-account" && (
+                    <div className="tab-item">
+                      <RecipientAccountTab
+                        recipientAccount={recipientAccount}
+                        setRecipientAccount={setRecipientAccount}
+                        setReloadCardList={setReloadCardList}
+                      />
+                    </div>
+                  )}
+                  {tab === "notification" && (
+                    <div className="tab-item">
+                      <NotificationSettingTab />
+                    </div>
+                  )}
+                  {tab === "login_activity" && <LoginActivityTab />}
+                  {tab === "password" && <ChangePasswordTab />}
+                  {tab === "faq" && <FaqTab datas={faq} />}
+                  {tab === "privacy" && <PrivacyPolicyTab />}
+                  {tab === "terms" && <TermsConditionTab />}
                 </div>
               </div>
             </div>

src/components/jobPopout/EditJobPopout.jsx

@@ -1,6 +1,6 @@
 import { Field, Form, Formik } from "formik";
 import React, { useCallback, useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import * as Yup from "yup";
 import usersService from "../../services/UsersService";
@@ -51,13 +51,6 @@ const EditJobPopOut = ({
   categories,
 }) => {
   const dispatch = useDispatch();
-  const { userDetails } = useSelector((state) => state.userDetails);
-  
-  const uploadedImage = `${userDetails.session_image_server}${localStorage.getItem('session_token')}/job/${details?.job_uid}`
-
-  const [taskImage, setTaskImage] = useState(uploadedImage)
-
-  let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
 
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
@@ -112,66 +105,6 @@ const EditJobPopOut = ({
     [jobApi, navigate, onClose, details]
   );
 
-  const taskImgChangeHandler = (e) => {
-    setUploadStatus({loading: false, status: false, message:''})
-    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS
-    let uploadedFile = e.target.files[0] //UPLOADED FILE
-
-    const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
-    if(!acceptedFormat.includes(fileFormat)){ //CHECKING FOR CORRECT UPLOAD FORMAT
-      const msg = `Please select ${acceptedFormat.slice(0, -1).join(', ')} or ${acceptedFormat.slice(-1)}`;
-      setUploadStatus({loading: false, status: false, message:msg})
-      return setTimeout(()=>{
-        // profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
-    }
-
-    if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE
-      setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'})
-      return setTimeout(()=>{
-        // profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
-    }
-
-    if (e.target.value !== "") {
-      const imgReader = new FileReader();
-      imgReader.onload = (event) => {
-        let base64Img = imgReader.result.split(",")[1];
-        let reqData = { // PAYLOAD FOR API CALL
-          job_uid: details?.job_uid,
-          file_name: uploadedFile?.name.slice(0,19),
-          file_size: uploadedFile?.size,
-          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
-          file_data: base64Img,
-          msg_type: 'FILE',
-          action: 11303
-        }
-        setUploadStatus({loading: true, status: false, message:'Loading...'})
-        jobApi.sendFiles(reqData).then(res=>{
-          if(res.status != 200 || res.data.internal_return < 0){
-            return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'})
-          }
-          setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'})
-          setTaskImage(event.target.result);
-          setTimeout(() => {
-            dispatch(tableReload({ type: "JOBTABLE" }));
-            navigate("/myjobs", { replace: true });
-            onClose();
-          }, 1000);
-        }).catch(error=>{
-          setUploadStatus({loading: false, status: false, message: 'Network error, try again'})
-        }).finally(()=>{
-          setTimeout(()=>{
-            setUploadStatus({loading: false, status: false, message: ''})
-          },5000)
-        })
-      };
-      imgReader.readAsDataURL(e.target.files[0]);
-    }
-  };
-
   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">
@@ -205,7 +138,7 @@ const EditJobPopOut = ({
             </svg>
           </button>
         </div>
-        <div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
           <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
@@ -325,7 +258,7 @@ const EditJobPopOut = ({
                           role="group"
                           aria-labelledby="checked-group"
                         >
-                          {categories && Object.entries(categories)?.map(([key, value]) => (
+                          {Object.entries(categories).map(([key, value]) => (
                             <label
                               key={key}
                               className="flex gap-1 w-full items-center"
@@ -346,41 +279,18 @@ const EditJobPopOut = ({
                         </div>
                       </div>
                     </div>
-                    <div className="w-full flex items-center gap-2 mb-2">
-                      {/* FOR TASK IMAGE */}
-                      <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
-                        <input 
-                          id="task_image"
-                          className="hidden" 
-                          type="file" 
-                          accept="image/*" 
-                          onChange={taskImgChangeHandler}
-                        />
-                        {taskImage ?
-                        <div className="w-full absolute -top-5">
-                          <img src={taskImage} className="max-h-[150px] min-h-[150px] w-full object-cover" alt="uplaoded task image" />
-                          <span onClick={()=>setTaskImage('')} className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800">Remove Image</span>
-                        </div>
-                        :
-                        <label 
-                          className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold" htmlFor='task_image'>
-                            Select Task Image
-                        </label>
-                        }
-                      </div>
-                      {/* END OF TASK IMAGE */}
 
-                      <div className="field w-1/2">
+                    <div className="field w-full mb-6">
                       <div
-                          className={`flex items-center justify-between`}
+                        className={`flex items-center justify-between mb-2.5`}
                       >
                         <label
-                            className="w-full input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex flex-col"
+                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
                           htmlFor="timeline_days"
                         >
-                            Timeline -
+                          Timeline
-                            <span className="w-full text-center text-green-700 text-sm tracking-wide">
+                          <span className="text-green-700 text-sm tracking-wide">
-                              Expected duration of this task
+                            - Expected duration of this task
                           </span>
                         </label>
                       </div>
@@ -399,7 +309,6 @@ const EditJobPopOut = ({
                         <option value="">Select Duration</option>
                         {publicArray.map(({ name, duration }, idx) => (
                           <option
-                              key={duration}
                             className="text-slate-500 text-lg"
                             value={duration}
                           >
@@ -408,7 +317,6 @@ const EditJobPopOut = ({
                         ))}
                       </Field>
                     </div>
-                    </div>
                     {/* inputs ends here */}
                   </div>
                 </div>
@@ -433,12 +341,6 @@ const EditJobPopOut = ({
                     ))}
                   {/* End of error or success display */}
 
-                   {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
-                    <div className="w-full">
-                      {uploadStatus.message && !uploadStatus.loading && <p className={`text-center ${uploadStatus.status ? 'text-green-500':'text-red-500'}`}>{uploadStatus.message}</p>}
-                      {uploadStatus.loading && <p className="text-center">{uploadStatus.message}</p>}
-                    </div>
-
                   <div className="w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                     <div className="flex items-center space-x-4 mr-2 mt-2">
                       {requestStatus.loading ? (
@@ -448,7 +350,6 @@ const EditJobPopOut = ({
                           type="submit"
                           className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
-                          disabled={requestStatus.loading || uploadStatus.loading}
                         >
                           Save
                         </button>

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -101,8 +101,6 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
       });
   };
 
-  console.log(details)
-
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -140,7 +138,7 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
           <div className="p-4 w-full md:w-3/4 md:border-r-2">
             <div className="flex gap-2">
                 <div className="image-wrapper w-32">
-                    <img className="w-full h-auto" src={details?.image} alt='banner' />
+                    <img className="w-full h-auto" src={localImgLoad(`images/taskbanners/${details.banner}`)} alt='Banner-Image' />
                 </div>
                 <div className="details-wrapper">
                     <p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">

src/components/jobPopout/JobListPopout.jsx

@@ -1,7 +1,7 @@
 import { Field, Form, Formik } from "formik";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import * as Yup from "yup";
-import usersService from "../../services/UsersService";
+import SiteService from "../../services/SiteService";
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -36,7 +36,7 @@ const dispatch = useDispatch()
     },
   });
 
-  const apiCall = useMemo(() => new usersService(), []);
+  const apiCall = useMemo(() => new SiteService(), []);
 
   // member listing
   const memberList = useCallback(async () => {

src/components/jobPopout/PendingJobsPopout.jsx

@@ -24,7 +24,6 @@ function PendingJobsPopout({ details, onClose, situation }) {
   const [pendingJobLoader, setPendingJobLoader] = useState({
     extend: false,
     offer: false,
-    cancel: false,
   });
 
   let [requestMessage, setRequestMessage] = useState({
@@ -82,29 +81,6 @@ function PendingJobsPopout({ details, onClose, situation }) {
             setRequestMessage({ status: false, message: "" });
           }, 3000);
         });
-    } else if (name == "cancel") {
-      // RUNS THIS IF JOB OFFER IS CANCELLED
-      reqData = { ...pendingData, reason: "cancel", offer_result: 3333 };
-      setPendingJobLoader({ cancel: true });
-      apiCall
-        .pendingCancelOffer(reqData)
-        .then((res) => {
-          setRequestMessage({ status: true, message: res.data.status });
-          setTimeout(() => {
-            setPendingJobLoader({ cancel: false });
-            setRequestMessage({ status: false, message: "" });
-            onClose();
-            dispatch(tableReload({ type: "PENDINGTABLE" }));
-            dispatch(tableReload({ type: "JOBTABLE" }));
-          }, 4000);
-        })
-        .catch((error) => {
-          setRequestMessage("Try Again");
-          setTimeout(() => {
-            setPendingJobLoader({ cancel: false });
-            setRequestMessage({ status: false, message: "" });
-          }, 3000);
-        });
     } else return;
     // try {
     //   if (name === "extend") {
@@ -298,16 +274,9 @@ function PendingJobsPopout({ details, onClose, situation }) {
             <div className="mt-10 md:mt-32 md:flex md:justify-center">
               <button
                 className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                onClick={handlePendingJobsBtn}
+                onClick={onClose}
-                name="cancel"
               >
-                {pendingJobLoader.cancel ? (
+                Cancel Offer
-                  <div className="w-[96px] flex justify-center items-center h-full">
-                    <LoadingSpinner size={5} color="sky-blue" />
-                  </div>
-                ) : (
-                  "Cancel Offer"
-                )}
               </button>
             </div>
           </div>

src/middleware/AuthRoute.jsx

@@ -21,9 +21,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable, walletTable } = useSelector(
+  const { jobListTable, walletTable } = useSelector((state) => state.tableReload);
-    (state) => state.tableReload
-  );
 
   const {
     userDetails: { username, uid, session },
@@ -37,7 +35,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       localStorage.removeItem("uid");
       localStorage.removeItem("member_id");
       localStorage.removeItem("session_token");
-      sessionStorage.removeItem("family_uid");
       navigate("/login", { replace: true }); // redirects user to login page after session expires
     };
 
@@ -188,9 +185,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       try {
         const res = await apiCall.getUserWallets();
         console.log("wallet - >", res.data);
-        dispatch(
+        dispatch(updateWalletDetails({ loading: false, data:res.data?.result_list }));
-          updateWalletDetails({ loading: false, data: res.data?.result_list })
-        );
       } catch (error) {
         dispatch(updateWalletDetails({ loading: false, data:[] }));
         console.log("Error getting mode");

src/services/UsersService.js

@@ -19,16 +19,6 @@ class usersService {
     return this.postAuxEnd("/completesignuplink", reqData);
   }
 
-  assignJobTask(reqData) {
-    var postData = {
-      uid: localStorage.getItem("uid"),
-      member_id: localStorage.getItem("member_id"),
-      sessionid: localStorage.getItem("session_token"),
-      ...reqData,
-    };
-    return this.postAuxEnd("/assigntask", postData);
-  }
-
   // FUNCTION TO GET USER CURRENT TASK DUE TIME
   getHomeDate() {
     var postData = {
@@ -45,7 +35,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11202,
+      action: 11202
     };
     return this.postAuxEnd("/recentactivities", postData);
   }
@@ -378,7 +368,7 @@ class usersService {
       page: 0,
       offset: 0,
       limit: 100,
-      allstatus: 0,
+      allstatus: 0
     };
     return this.postAuxEnd("/activetaskslist", postData);
   }
@@ -608,7 +598,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 0,
       limit: 100,
-      ...reqdata,
+      ...reqdata
     };
     return this.postAuxEnd("/familyupdate", postData);
   }
@@ -792,17 +782,6 @@ class usersService {
     return this.postAuxEnd("/pendingjobsendtome", postData);
   }
 
-  pendingCancelOffer(reqData) {
-    var postData = {
-      uid: localStorage.getItem("uid"),
-      member_id: localStorage.getItem("member_id"),
-      sessionid: localStorage.getItem("session_token"),
-      action: 13043,
-      ...reqData,
-    };
-    return this.postAuxEnd("/pendingjobcancel", postData);
-  }
-
   // FUNCTION TO GET ACTIVE JOB MESSAGE LIST
   activeJobMesList(reqData) {
     var postData = {
@@ -838,11 +817,11 @@ class usersService {
       action: 14010,
       ...reqData,
     };
-    
     const formData = new FormData();
     for (let data in postData) {
       formData.append(data, postData[data]);
     }
+    //  return this.postAuxEnd("/uploads", formData);
 
     return this.postAuxEnd("/uploads", postData);
   }
@@ -1099,6 +1078,7 @@ class usersService {
     return this.postAuxEnd("/blogdata", postData);
   }
 
+
     // FUNCTION TO CANCEL TASK OR SEND REMINDER BY FAMILY MEMBER
     suggestStatus(reqData) {
       var postData = {
@@ -1257,10 +1237,6 @@ class usersService {
         console.log(response);
         // res = response;
         console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
-        if (response.data.internal_return == "-9999") {
-          localStorage.clear();
-          window.location.href = `/login?sessionExpired=true`;
-        }
         return response;
       })
       .catch((error) => {

src/views/FamilySettingsPage.jsx

@@ -1,9 +0,0 @@
-import FamilySettings from "../components/FamilyAcc/FamilySettings";
-
-export default function FamilySettingsPage() {
-  return (
-    <>
-      <FamilySettings />
-    </>
-  );
-}

src/views/LndPage.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-
-import Lnd from '../components/Lnd/Lnd'
-
-function LndPage() {
-  return (
-    <>
-        <Lnd />
-    </>
-  )
-}
-
-export default LndPage