added image to assign task popout

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
 import usersService from "../../../services/UsersService";
@@ -23,7 +23,9 @@ const AssignTaskPopout = ({
   
 }) => {
   const {parentAssignJobToKid} = SocketValues()
+
   const apiCall = new usersService();
+
   let { pathname, state } = useLocation();
 
   const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
@@ -221,6 +223,9 @@ const AssignTaskPopout = ({
       });
     };
 
+  let imageSrc = (localStorage.getItem("session_token")
+  ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask.data.job_uid}` : ""); // FOR GETTING JOB IMAGE
+
   useEffect(()=>{ // effect to update family UID when components mounts
     if(familyDetailsData?.uid){
       setSelectedFamilyUid(familyDetailsData?.uid)
@@ -231,6 +236,7 @@ const AssignTaskPopout = ({
     }
   },[])
 
+
   return (
     <>
       <ModalCom action={action} situation={situation}>
@@ -382,7 +388,8 @@ const AssignTaskPopout = ({
                               value={activeTask?.data?.description}
                             />
                           </div>
-                          <div className="flex items-center">
+                          <div className="grid grid-cols-2">
+                            <div className="w-full">
                               <div className="my-3 w-full flex items-center gap-1">
                                 <label className="job-label">
                                   Price
@@ -403,6 +410,17 @@ const AssignTaskPopout = ({
                                 <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
                               </div>
                             </div>
+                            <div className="w-full flex items-center justify-center">
+                              <div className="w-28 h-28 rounded-2xl flex items-center justify-center">
+                                  <img 
+                                    className="w-full h-auto"
+                                    loading="lazy"
+                                    src={imageSrc} 
+                                    alt='job image' 
+                                  />
+                              </div>
+                            </div>
+                          </div>
                           
                           {/* Dummy, no value found for created! thus commented*/}
                           {/* <div className="my-3 sm:flex items-center">