banner added to missing pages

src/components/AddJob/AddJob.jsx

@@ -78,7 +78,6 @@ function AddJob({ popUpHandler, categories }) {
           setCurrency({ loading: false, status: true, data: [] });
           return;
         }
-        console.log("Res for currency >> ", res);
 
         setCurrency({
           loading: false,
@@ -221,7 +220,6 @@ function AddJob({ popUpHandler, categories }) {
                   </div>
 
                   {/* Title  */}
-
                   <div className="field w-full mb-[5px]">
                     <InputCom
                       fieldClass="px-6"
@@ -421,10 +419,3 @@ const publicArray = [
   { duration: 21, name: "3 weeks" },
   { duration: 28, name: "4 weeks" },
 ];
-
-// .test("no-e", "Invalid number", (value) => {
-//   if (value && /\d+e/.test(value)) {
-//     return false;
-//   }
-//   return true;
-// })

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,95 +1,135 @@
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from "react";
-import ModalCom from '../../Helpers/ModalCom'
+import ModalCom from "../../Helpers/ModalCom";
-import Detail from '../../jobPopout/popoutcomponent/Detail'
+import Detail from "../../jobPopout/popoutcomponent/Detail";
-import usersService from '../../../services/UsersService'
+import usersService from "../../../services/UsersService";
-import LoadingSpinner from '../../Spinners/LoadingSpinner'
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
-import { PriceFormatter } from '../../Helpers/PriceFormatter'
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import { NewTasks } from "./forms";
 
 function AssignTaskPopout({ action, situation, familyDetails }) {
-    const apiCall = new usersService()
+  const apiCall = new usersService();
 
-    let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''}) // HOLDS RESPONSE FOR SENDING API REQUEST
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // HOLDS RESPONSE FOR SENDING API REQUEST
 
-    let [familyTask, setFamilyTask] = useState({loading: true, data: []})
+  let [familyTask, setFamilyTask] = useState({ loading: true, data: [] });
 
-    let [taskType, setTaskType] = useState('select')  // SWITCHES BTW SELECT TASK AND NEW TASK
+  let [taskType, setTaskType] = useState("select"); // SWITCHES BTW SELECT TASK AND NEW TASK
 
-    let [activeTask, setActiveTask] = useState({id: 0, data: {}}) // HOLDS SELECTED TASK
+  let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK
 
-    const switchTaskType = ({target:{value}}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK
+  const switchTaskType = ({ target: { value } }) => {
-      setTaskType(value)
+    // FUNCTION TO CHANGE SELECTED ACTIVE TASK
-    }
+    setTaskType(value);
+  };
 
-    const handleActiveTask = (id=0, data={}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK
+  const handleActiveTask = (id = 0, data = {}) => {
-      setActiveTask({id, data})
+    // FUNCTION TO CHANGE SELECTED ACTIVE TASK
-    }
+    setActiveTask({ id, data });
+  };
 
   const assignFamilyTask = () => {
-      setRequestStatus({loading: true, status: false, message: ''})
+    setRequestStatus({ loading: true, status: false, message: "" });
-      let reqData = {}
+    let reqData = {};
-      if(taskType == 'select'){ // RUNS HERE IF TASK TYPE IS SELECT
+    if (taskType == "select") {
+      // RUNS HERE IF TASK TYPE IS SELECT
       if (!Object.keys(activeTask.data).length) {
-          setRequestStatus({loading: false, status: false, message: 'No Task is seleted'})
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "No Task is seleted",
+        });
         return setTimeout(() => {
-            setRequestStatus({loading: false, status: false, message: ''})
+          setRequestStatus({ loading: false, status: false, message: "" });
-          }, 3000)
+        }, 3000);
       }
-        reqData = { // API PAYLOADS
+      reqData = {
+        // API PAYLOADS
         job_id: activeTask.data?.job_id,
         job_uid: activeTask.data?.job_uid,
         family_uid: familyDetails.uid,
         job_description: activeTask.data?.description,
         assign_mode: 110011,
-        }
+      };
 
-        apiCall.assignFamilyTask(reqData).then(res => {
+      apiCall
+        .assignFamilyTask(reqData)
+        .then((res) => {
           if (res.status != 200 || res.data.internal_return < 0) {
-            setRequestStatus({loading: false, status: false, message: 'failed to assign task'})
+            setRequestStatus({
+              loading: false,
+              status: false,
+              message: "failed to assign task",
+            });
             return setTimeout(() => {
-              setRequestStatus({loading: false, status: false, message: ''})
+              setRequestStatus({ loading: false, status: false, message: "" });
-            }, 5000)
+            }, 5000);
           }
-          setRequestStatus({loading: false, status: true, message: 'action successful'})
+          setRequestStatus({
+            loading: false,
+            status: true,
+            message: "action successful",
+          });
           setTimeout(() => {
-            setRequestStatus({loading: false, status: false, message: ''})
+            setRequestStatus({ loading: false, status: false, message: "" });
-            action() // FUNCTION THAT CLOSES THE MODAL BOX
+            action(); // FUNCTION THAT CLOSES THE MODAL BOX
-          }, 5000)
+          }, 5000);
-        }).catch(err => {
-          setRequestStatus({loading: false, status: false, message: 'An Error occured, try again'})
-          setTimeout(()=>{
-            setRequestStatus({loading: false, status: false, message: ''})
-          }, 5000)
         })
+        .catch((err) => {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "An Error occured, try again",
+          });
+          setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 5000);
+        });
     }
 
-      if(taskType == 'new'){ // RUNS HERE IF TASK TYPE IS NEW TASK
+    if (taskType == "new") {
-        console.log('TESTING')
+      // RUNS HERE IF TASK TYPE IS NEW TASK
-      }
+      console.log("TESTING");
     }
+  };
 
   useEffect(() => {
     const reqData = {
       limit: 30,
       offset: 0,
-            job_type: 'FAMILY',
+      job_type: "FAMILY",
-            action: 13005
+      action: 13005,
-        }
+    };
-        apiCall.getMyJobList(reqData).then(res => {
+    apiCall
-            setFamilyTask({loading: false, data: res?.data?.result_list})
+      .getMyJobList(reqData)
+      .then((res) => {
+        setFamilyTask({ loading: false, data: res?.data?.result_list });
         if (res?.data?.result_list?.length) {
-              setActiveTask(prev => ({...prev, data:res?.data?.result_list[0]}))
+          setActiveTask((prev) => ({
+            ...prev,
+            data: res?.data?.result_list[0],
+          }));
         }
-        }).catch(err => {
-            setFamilyTask({loading: false, data: []})
-            console.log('Error', err)
       })
-    },[])
+      .catch((err) => {
+        setFamilyTask({ loading: false, data: [] });
+        console.log("Error", err);
+      });
+  }, []);
+
+  // New Task 
+  const [newTaskData, setNewTaskData] = useState({})
+  const handleNewTaskData = (data) => {
+    setNewTaskData(data)
+  }
+
+  console.log("Trying to see form data >>", newTaskData)
   return (
     <>
-        <ModalCom
+      <ModalCom action={action} situation={situation}>
-        action={action}
-        situation={situation}
-        >
         <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
           <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
             <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
@@ -121,64 +161,117 @@ function AssignTaskPopout({action, situation, familyDetails}) {
               </svg>
             </button>
           </div>
-              {familyTask.loading ?
+          {familyTask.loading ? (
-              <div className='h-[100px] w-full flex justify-center items-center'>
+            <div className="h-[100px] w-full flex justify-center items-center">
-                <LoadingSpinner color='sky-blue' size='16' />
+              <LoadingSpinner color="sky-blue" size="16" />
             </div>
-              :
+          ) : (
             <>
-                <div className="job-action-modal-body w-full md:grid md:grid-cols-2"> 
+              <div
+                className={`job-action-modal-body w-full md:grid ${
+                  taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
+                }`}
+              >
                 <div className="p-4">
                   <div className="mb-2 w-full flex items-center gap-4">
                     <div className="flex items-center gap-2 text-sky-blue text-base">
-                        <input type="radio" name='task-type' value='select' className="w-[20px] h-[20px] cursor-pointer" checked={taskType=='select'} onChange={switchTaskType}/>
+                      <input
+                        type="radio"
+                        name="task-type"
+                        value="select"
+                        className="w-[20px] h-[20px] cursor-pointer"
+                        checked={taskType == "select"}
+                        onChange={switchTaskType}
+                      />
                       <span>Select Task</span>
                     </div>
                     <div className="flex items-center gap-2 text-sky-blue text-base">
-                        <input type="radio" name='task-type' value='new' className="w-[20px] h-[20px] cursor-pointer" checked={taskType=='new'} onChange={switchTaskType}/>
+                      <input
+                        type="radio"
+                        name="task-type"
+                        value="new"
+                        className="w-[20px] h-[20px] cursor-pointer"
+                        checked={taskType == "new"}
+                        onChange={switchTaskType}
+                      />
                       <span>New Task</span>
                     </div>
                   </div>
-                    <div className='p-4 w-full h-[400px] overflow-y-auto bg-slate-100'>
+                  {/* Task Type === select */}
-                      {
+                  {taskType == "select" && (
-                        taskType == 'select' ? 
+                    <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100">
-                        familyTask?.data?.length ?
+                      {familyTask?.data?.length ? (
                         familyTask?.data?.map((item, index) => (
-                          <div key={item.job_uid} className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer" onClick={()=>handleActiveTask(item.job_uid, item)}>
+                          <div
+                            key={item.job_uid}
+                            className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
+                            onClick={() => handleActiveTask(item.job_uid, item)}
+                          >
                             <input
                               type="radio"
-                              name='task-list'
+                              name="task-list"
-                              checked={(activeTask.id == item.job_uid) || (activeTask.id==index)&& true} 
+                              checked={
-                              onChange={()=>handleActiveTask(item.job_uid, item)}
+                                activeTask.id == item.job_uid ||
+                                (activeTask.id == index && true)
+                              }
+                              onChange={() =>
+                                handleActiveTask(item.job_uid, item)
+                              }
                               className="w-[15px] h-[15px] cursor-pointer"
                             />
-                            <p className="w-full text-dark-gray tracking-wide">{item?.title}</p>
+                            <p className="w-full text-dark-gray tracking-wide">
+                              {item?.title}
+                            </p>
                           </div>
                         ))
-                          :
+                      ) : (
-                          <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center">No Task found!</p>
+                        <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
-                        :
+                          No Task found!
-                        <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center">SPACE FOR NEW TASK</p>
+                        </p>
-                      }
+                      )}
                     </div>
+                  )}
+                  {taskType !== "select" && (
+                    <div className="p-4 w-full h-[400px]">
+                      <NewTasks onChange={handleNewTaskData} />
+                    </div>
+                  )}
                 </div>
 
-                  {familyTask?.data?.length > 0 ?
+                {/*Right Hand Side for details && Task Type === select */}
+                {taskType == "select" && (
+                  <>
+                    {familyTask?.data?.length > 0 ? (
                       <div className="p-4">
                         <div className="w-full">
-                      <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">{activeTask?.data?.title}</p>
+                          <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
+                            {activeTask?.data?.title}
+                          </p>
                           <div className="my-3">
-                        <Detail label="Description" value={activeTask?.data?.description} />
+                            <Detail
+                              label="Description"
+                              value={activeTask?.data?.description}
+                            />
                           </div>
-                      <div className='flex items-center'>
+                          <div className="flex items-center">
                             <div className="my-3 w-full flex items-center gap-1">
-                          <label className='text-slate-900 dark:text-white tracking-wide font-semibold'>Price</label>
+                              <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
-                          <p className='p-1 text-sm text-slate-900 dark:text-white'>{PriceFormatter(activeTask?.data?.price*0.01, activeTask?.data?.currency, activeTask?.data?.curreny_code)}</p>
+                                Price
+                              </label>
+                              <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                {PriceFormatter(
+                                  activeTask?.data?.price * 0.01,
+                                  activeTask?.data?.currency,
+                                  activeTask?.data?.curreny_code
+                                )}
+                              </p>
                             </div>
 
                             <div className="my-3 w-full flex items-center gap-1">
-                          <label className='text-slate-900 dark:text-white tracking-wide font-semibold'>Timeline</label>
+                              <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
-                          <p className='p-1 text-sm text-slate-900 dark:text-white'>{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                                Timeline
+                              </label>
+                              <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
                             </div>
                           </div>
 
@@ -201,17 +294,18 @@ function AssignTaskPopout({action, situation, familyDetails}) {
                               readOnly
                               // onChange={handleInputChange}
                             />
-                        {/* <p>{}</p> */}
                           </div>
                         </div>
                       </div>
-                  :
+                    ) : (
                       <></>
-                  }                   
+                    )}
+                  </>
+                )}
               </div>
 
               {/* BTN */}
-                <div className='p-2 border-t-2 flex justify-end items-center gap-3'>
+              <div className="p-2 border-t-2 flex justify-end items-center gap-3">
                 {/* error or success display */}
                 {requestStatus.message != "" &&
                   (!requestStatus.status ? (
@@ -232,15 +326,16 @@ function AssignTaskPopout({action, situation, familyDetails}) {
                 {/* End of error or success display */}
                 <button
                   disabled={requestStatus.loading}
-                    onClick={action} type="button" 
+                  onClick={action}
+                  type="button"
                   className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
                 >
-                      <span className='text-gradient'>Close</span>
+                  <span className="text-gradient">Close</span>
                 </button>
-                  <div className=''>
+                <div className="">
-                    {requestStatus.loading ?
+                  {requestStatus.loading ? (
-                    <LoadingSpinner color='sky-blue' size='8' />
+                    <LoadingSpinner color="sky-blue" size="8" />
-                    :
+                  ) : (
                     <button
                       type="button"
                       disabled={requestStatus.loading}
@@ -249,15 +344,15 @@ function AssignTaskPopout({action, situation, familyDetails}) {
                     >
                       Assign
                     </button>
-                    }
+                  )}
                 </div>
               </div>
             </>
-              }
+          )}
         </div>
       </ModalCom>
     </>
-  )
+  );
 }
 
-export default AssignTaskPopout
+export default AssignTaskPopout;

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

@@ -0,0 +1,228 @@
+import React, { useEffect, useState } from "react";
+import usersService from "../../../../services/UsersService";
+import InputCom from "../../../Helpers/Inputs/InputCom";
+
+export default function NewTasks({ onChange }) {
+  let [currency, setCurrency] = useState({
+    loading: true,
+    status: false,
+    data: null,
+  });
+
+  const [formState, setFormState] = useState({
+    // Initialize form state with desired fields
+    country: "",
+    price: "",
+    title: "",
+    description: "",
+    job_detail: "",
+    timeline_days: "",
+    category: [],
+  });
+
+  const ApiCall = new usersService();
+
+  // FUNCTION TO GET Currency
+  const getUserCurrency = () => {
+    setCurrency((prev) => ({ ...prev, loading: true }));
+    ApiCall.getUserWallets()
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setCurrency({ loading: false, status: true, data: [] });
+          return;
+        }
+
+        setCurrency({
+          loading: false,
+          status: true,
+          data: res.data.result_list,
+        });
+      })
+      .catch((err) => {
+        setCurrency({ loading: false, status: false, data: [] });
+      });
+  };
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setFormState((prevState) => ({
+      ...prevState,
+      [name]: value,
+    }));
+    onChange(formState); // Pass the form data to the parent on every change
+  };
+
+  useEffect(() => {
+    getUserCurrency();
+  }, []);
+
+  return (
+    <form className="w-full">
+      <div className="flex flex-col gap-3">
+        {/* inputs starts here */}
+        <div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]">
+          {/* Currency */}
+          <div className="field w-full mb-6 xl:mb-0">
+            <label
+              htmlFor="country"
+              className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+            >
+              Currency
+              {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
+            </label>
+            <select
+              id="country"
+              name="country"
+              value={formState.country}
+              className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+              onChange={handleInputChange}
+              // onBlur={props.handleBlur}
+            >
+              {currency.loading ? (
+                <option className="text-slate-500 text-lg" value="">
+                  Loading...
+                </option>
+              ) : currency.data.length ? (
+                <>
+                  <option className="text-slate-500 text-lg" value="">
+                    Select a currency
+                  </option>
+                  {currency.data?.map((item, index) => (
+                    <option
+                      key={index}
+                      className="text-slate-500 text-lg"
+                      value={item?.country}
+                    >
+                      {item?.description}
+                    </option>
+                  ))}
+                </>
+              ) : (
+                <option className="text-slate-500 text-lg" value="">
+                  No Options Found! Try Again
+                </option>
+              )}
+            </select>
+          </div>
+
+          {/* Price */}
+          <div className="field w-full">
+            <InputCom
+              fieldClass="px-6 text-right"
+              label="Price"
+              labelClass="tracking-wide"
+              inputBg="bg-slate-100"
+              type="number"
+              name="price"
+              placeholder="0"
+              value={formState.price}
+              inputHandler={handleInputChange}
+              // blurHandler={props.handleBlur}
+              // error={props.errors.price && props.touched.price && props.errors.price}
+            />
+          </div>
+
+          {/* Duration */}
+          <div className="field w-full mb-6 xl:mb-0">
+            <label
+              htmlFor="timeline_days"
+              className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+            >
+              Timeline
+              {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
+            </label>
+            <select
+              id="timeline_days"
+              name="timeline_days"
+              value={formState.timeline_days}
+              className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+              onChange={handleInputChange}
+              // onBlur={props.handleBlur}
+            >
+              {publicArray.length && (
+                <>
+                  <option className="text-slate-500 text-lg" value="">
+                    Select Duration
+                  </option>
+                  {publicArray.map(({ name, duration }, idx) => (
+                    <option className="text-slate-500 text-lg" value={duration}>
+                      {name}
+                    </option>
+                  ))}
+                </>
+              )}
+            </select>
+          </div>
+        </div>
+
+        {/* Title  */}
+        <div className="field w-full mb-[5px]">
+          <InputCom
+            fieldClass="px-6"
+            label="Title"
+            labelClass="tracking-wide"
+            inputBg="bg-slate-100"
+            type="text"
+            name="title"
+            value={formState.title}
+            inputHandler={handleInputChange}
+            //   blurHandler={props.handleBlur}
+            //   error={props.errors.title && props.touched.title && props.errors.title}
+          />
+        </div>
+
+        {/* Description  */}
+        <div className="field w-full mb-[5px]">
+          <InputCom
+            fieldClass="px-6"
+            label="Description"
+            labelClass="tracking-wide"
+            inputBg="bg-slate-100"
+            type="text"
+            name="description"
+            value={formState.description}
+            inputHandler={handleInputChange}
+            //   blurHandler={props.handleBlur}
+            //   error={props.errors.description && props.touched.description && props.errors.description}
+          />
+        </div>
+
+        {/* Details */}
+        <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+          <div className="w-full">
+            <label
+              htmlFor="Job Delivery Details"
+              className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+            >
+              Job Delivery Details
+              {/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}
+            </label>
+            <textarea
+              id="Job Delivery Details"
+              rows="5"
+              className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
+              style={{ resize: "none" }}
+              name="job_detail"
+              value={formState.job_detail}
+              onChange={handleInputChange}
+              // onBlur={props.handleBlur}
+            />
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];

src/components/FamilyAcc/FamilyPopout/forms/index.js

@@ -0,0 +1,3 @@
+import NewTasks from "./NewTasks";
+
+export {NewTasks}

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -4,6 +4,7 @@ import dataImage2 from "../../assets/images/data-table-user-2.png";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function MyActiveJobTable({ MyJobList, className }) {
   const navigate = useNavigate();
@@ -56,11 +57,11 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
+                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={dataImage2}
+                                  src={localImgLoad(`images/taskbanners/${value.banner}`)}
                                   alt="data"
-                                  className="w-full h-full"
+                                  className="w-full h-full rounded-full"
                                 />
                               </div>
                               <div className="flex flex-col flex-[0.9]">

src/components/MyJobs/MyJobTable.jsx

@@ -13,6 +13,7 @@ import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 import EditIcon from '../../assets/images/icon-edit.svg'
 import DeleteIcon from '../../assets/images/icon-delete.svg'
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   // Getting the categories
@@ -114,8 +115,8 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
         <td className="py-9">
           <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-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
+              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
-                <img src={dataImage2} alt="data" className="w-full h-full" />
+                <img src={localImgLoad(`images/taskbanners/${value.banner}`)} 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">

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -4,6 +4,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+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
@@ -55,11 +56,11 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
+                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={dataImage2}
+                                  src={localImgLoad(`images/taskbanners/${value.banner}`)}
                                   alt="data"
-                                  className="w-full h-full"
+                                  className="w-full h-full rounded-full"
                                 />
                               </div>
                               <div className="flex flex-col flex-[0.9]">

src/components/MyWaitingJobs/MyWaitingJobTable.jsx

@@ -4,6 +4,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function MyWaitingJobTable({ MyJobList, className }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
@@ -43,6 +44,7 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
+                      let image = value.banner ? value.banner : 'default.jpg'
                       return (
                         <tr
                           key={index}
@@ -50,11 +52,11 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
+                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={dataImage2}
+                                  src={localImgLoad(`images/taskbanners/${image}`)}
                                   alt="data"
-                                  className="w-full h-full"
+                                  className="w-full h-full rounded-full"
                                 />
                               </div>
                               <div className="flex flex-col flex-[0.9]">

src/components/OffersInterest/OffersInterestTable.jsx

@@ -8,6 +8,7 @@ import PaginatedList from "../Pagination/PaginatedList";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 import familyImage from '../../assets/images/no-family-side.png'
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function OffersInterestTable({offerInterestList, className}) {
 
@@ -53,15 +54,17 @@ export default function OffersInterestTable({offerInterestList, className}) {
                             </thead>
                             <tbody className="h-full">
                             {currentOfferInterestList?.map((item, index) => {
+                                console.log('TESTING',item)
+                                let image = item.banner ? item.banner : 'default.jpg'
                                 return (
                                 <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                     <td className=" py-4">
                                         <div className="flex space-x-2 items-center">
-                                            <div className="min-w-[60px] min-h-[60px] 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={dataImage1}
+                                                    src={localImgLoad(`images/taskbanners/${image}`)}
                                                     alt="data"
-                                                    className="w-full h-full"
+                                                    className="w-full h-full rounded-full"
                                                 />
                                             </div>
                                             <div className="flex flex-col">