Added Picture path

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/OfferCard.jsx

@@ -2,24 +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 = localStorage.getItem("session_token")
-    ? `${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">
@@ -29,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>}
@@ -40,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">
@@ -86,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)
+console.log('accountDetails',accountDetails)
   // State for family details, tasks, waitlist, and pending
   const [details, setDetails] = useState({
     familyDetails: { ...initialDetailState },
@@ -92,6 +92,26 @@ 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) => {
+  //   const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+  //   const file = e.target.files[0];
+  //   if (file && file.size > MAX_FILE_SIZE) {
+  //     alert("File size exceeds the limit.");
+  //     return;
+  //   }
+
+  //   if (file) {
+  //     const imgReader = new FileReader();
+  //     imgReader.onload = () => {
+  //       const imageDataUrl = imgReader.result;
+
+  //       // Set the profile image
+  //       setProfileImg(imageDataUrl);
+  //     };
+  //     imgReader.readAsDataURL(file);
+  //   }
+  // };
 
   const profileImgChangeHandler = (e) => {
     setUploadStatus({loading: false, status: false, message:''})
@@ -119,15 +139,14 @@ export default function FamilyManageTabs({
     if (e.target.value !== "") {
       const imgReader = new FileReader();
       imgReader.onload = (event) => {
-        let base64Img = imgReader.result.split(",")[1];
         let reqData = { // PAYLOAD FOR API CALL
           family_uid: accountDetails?.family_uid,
           file_name: uploadedFile?.name,
           file_size: uploadedFile?.size,
           file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
-          file_data: base64Img,
+          file_data: event?.target?.result,
           msg_type: 'FILE',
-          action: 11305
+          action: 111305
         }
         setUploadStatus({loading: true, status: false, message:'Loading...'})
         apiCall.sendFiles(reqData).then(res=>{

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

@@ -17,7 +17,7 @@ export default function FamilyAcc() {
   // 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);
@@ -115,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;
@@ -172,10 +172,9 @@ export default function FamilyAcc() {
           </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/Home/FamilyDash.jsx

@@ -4,19 +4,15 @@ 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" />

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/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/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>
@@ -212,7 +193,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
           <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
             {filterCategories[selectedCategory]} Jobs
           </h1>
-        </div>
+        </div>  
         <SelectBox
           action={handleSetCategory}
           datas={Object.values(filterCategories)}
@@ -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/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/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/Partials/Header.jsx

@@ -36,11 +36,9 @@ 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")
+  const image = `${userDetails.session_image_server}${localStorage.getItem(
-    ? `${userDetails.session_image_server}${localStorage.getItem(
+    "session_token"
-        "session_token"
+  )}/profile/${userDetails.uid}`;
-      )}/profile/${userDetails.uid}`
-    : "";
 
   const handlerBalance = () => {
     setbalanceValue.toggle();

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -49,11 +49,9 @@ export default function PersonalInfoTab({
 }) {
   let { userDetails } = useSelector((state) => state.userDetails);
 
-  const image = localStorage.getItem("session_token")
+  const image = `${userDetails.session_image_server}${localStorage.getItem(
-    ? `${userDetails.session_image_server}${localStorage.getItem(
+    "session_token"
-        "session_token"
+  )}/profile/${userDetails.uid}`;
-      )}/profile/${userDetails.uid}`
-    : "";
 
   const apiCall = new usersService();
 
@@ -139,17 +137,15 @@ export default function PersonalInfoTab({
     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,
+          file_data: event?.target?.result,
           msg_type: "FILE",
           action: 11300,
         };
-
         setUploadStatus({
           loading: true,
           status: false,

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,18 @@ 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)
+  const [taskImage, setTaskImage] = useState('')
 
-  let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
+  const changeTaskImage = (e) => {
+    if (e.target.value !== "") {
+      const imgReader = new FileReader();
+      imgReader.onload = (event) => {
+        setTaskImage(event.target.result);
+      };
+      imgReader.readAsDataURL(e.target.files[0]);
+    }
+  }
 
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
@@ -112,66 +117,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">
@@ -325,7 +270,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"
@@ -354,12 +299,12 @@ const EditJobPopOut = ({
                           className="hidden" 
                           type="file" 
                           accept="image/*" 
-                          onChange={taskImgChangeHandler}
+                          onChange={changeTaskImage}
                         />
                         {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>
+                          <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/20 hover:bg-white/70 hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800">Remove Image</span>
                         </div>
                         :
                         <label 
@@ -399,7 +344,6 @@ const EditJobPopOut = ({
                           <option value="">Select Duration</option>
                           {publicArray.map(({ name, duration }, idx) => (
                             <option
-                              key={duration}
                               className="text-slate-500 text-lg"
                               value={duration}
                             >
@@ -433,12 +377,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 +386,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/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 = {
@@ -40,12 +30,12 @@ class usersService {
     return this.postAuxEnd("/dashdata", postData);
   }
 
-  getRecentActivities() {
+  getRecentActivities(){
     var postData = {
       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,51 +1078,52 @@ class usersService {
     return this.postAuxEnd("/blogdata", postData);
   }
 
-  // FUNCTION TO CANCEL TASK OR SEND REMINDER BY FAMILY MEMBER
-  suggestStatus(reqData) {
-    var postData = {
-      uid: localStorage.getItem("uid"),
-      member_id: localStorage.getItem("member_id"),
-      sessionid: localStorage.getItem("session_token"),
-      action: 22026,
-      ...reqData,
-    };
-    return this.postAuxEnd("/suggeststatus", postData);
-  }
 
-  // FUNCTION TO GET FAMILY WALLET
+    // FUNCTION TO CANCEL TASK OR SEND REMINDER BY FAMILY MEMBER
-  getFamilyWallet(reqData) {
+    suggestStatus(reqData) {
-    var postData = {
+      var postData = {
-      uid: localStorage.getItem("uid"),
+        uid: localStorage.getItem("uid"),
-      member_id: localStorage.getItem("member_id"),
+        member_id: localStorage.getItem("member_id"),
-      sessionid: localStorage.getItem("session_token"),
+        sessionid: localStorage.getItem("session_token"),
-      action: 22012,
+        action: 22026,
-      ...reqData,
+        ...reqData,
-    };
+      };
-    return this.postAuxEnd("/familywallet", postData);
+      return this.postAuxEnd("/suggeststatus", postData);
-  }
+    }
 
-  // FUNCTION TO START FAMILY TRANSFER
+    // FUNCTION TO GET FAMILY WALLET
-  familyTransferStart(reqData) {
+    getFamilyWallet(reqData) {
-    var postData = {
+      var postData = {
-      uid: localStorage.getItem("uid"),
+        uid: localStorage.getItem("uid"),
-      member_id: localStorage.getItem("member_id"),
+        member_id: localStorage.getItem("member_id"),
-      sessionid: localStorage.getItem("session_token"),
+        sessionid: localStorage.getItem("session_token"),
-      ...reqData,
+        action: 22012,
-    };
+        ...reqData,
-    return this.postAuxEnd("/familytransferstart", postData);
+      };
-  }
+      return this.postAuxEnd("/familywallet", postData);
+    }
+  
+    // FUNCTION TO START FAMILY TRANSFER
+    familyTransferStart(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        ...reqData,
+      };
+      return this.postAuxEnd("/familytransferstart", postData);
+    }
 
-  // FUNCTION TO PERFORM FAMILY TRANSFER
+    // FUNCTION TO PERFORM FAMILY TRANSFER
-  familyTransfer(reqData) {
+    familyTransfer(reqData) {
-    var postData = {
+      var postData = {
-      uid: localStorage.getItem("uid"),
+        uid: localStorage.getItem("uid"),
-      member_id: localStorage.getItem("member_id"),
+        member_id: localStorage.getItem("member_id"),
-      sessionid: localStorage.getItem("session_token"),
+        sessionid: localStorage.getItem("session_token"),
-      ...reqData,
+        ...reqData,
-    };
+      };
-    return this.postAuxEnd("/familytransfer", postData);
+      return this.postAuxEnd("/familytransfer", postData);
-  }
+    }
 
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
@@ -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) => {