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
@@ -219,7 +221,10 @@ const AssignTaskPopout = ({
           setRequestStatus({ loading: false, status: false, message: "" });
         }, 5000);
       });
-  };
+    };
+
+  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){
@@ -231,6 +236,7 @@ const AssignTaskPopout = ({
     }
   },[])
 
+
   return (
     <>
       <ModalCom action={action} situation={situation}>
@@ -382,25 +388,37 @@ const AssignTaskPopout = ({
                               value={activeTask?.data?.description}
                             />
                           </div>
-                          <div className="flex items-center">
+                          <div className="grid grid-cols-2">
-                            <div className="my-3 w-full flex items-center gap-1">
+                            <div className="w-full">
-                              <label className="job-label">
+                              <div className="my-3 w-full flex items-center gap-1">
-                                Price
+                                <label className="job-label">
-                              </label>
+                                  Price
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                </label>
-                                {PriceFormatter(
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                  activeTask?.data?.price * 0.01,
+                                  {PriceFormatter(
-                                  activeTask?.data?.currency,
+                                    activeTask?.data?.price * 0.01,
-                                  activeTask?.data?.curreny_code
+                                    activeTask?.data?.currency,
-                                )}
+                                    activeTask?.data?.curreny_code
-                              </p>
+                                  )}
-                            </div>
+                                </p>
+                              </div>
 
-                            <div className="my-3 w-full flex items-center gap-1">
+                              <div className="my-3 w-full flex items-center gap-1">
-                              <label className="job-label">
+                                <label className="job-label">
-                                Timeline
+                                  Timeline
-                              </label>
+                                </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                                <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>