added Job Details Modal

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -15,6 +15,8 @@ import { SocketValues } from "../Contexts/SocketIOContext";
 import TabButton from "../customTabs/TabButton";
 import AttachFile from "../attachmentCom/AttachFile";
 
+import JobDetailPopout from "./JobDetailPopout";
+
 function ActiveJobs(props) {
   let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
   
@@ -43,6 +45,8 @@ function ActiveJobs(props) {
 
   let [popUp, setPopUp] = useState(false); // STATE FOR POPOUT MODAL
 
+  let [jobDetailModal, setJobDetailModal] = useState(false); // STATE FOR JOB DELIVERY DETAIL POPOUT MODAL
+
   const printRef = useRef();
   // to handle printing
   const handlePrint = useReactToPrint({
@@ -54,6 +58,10 @@ function ActiveJobs(props) {
     setPopUp((prev) => !prev);
   };
 
+  const jobDetailModalHandler = () => { // FUNCTION TO CLOSE JOB DELIVERY DETAIL MODAL
+    setJobDetailModal((prev) => !prev);
+  };
+
   // FUNCTION TO HANDLE MESSAGE CHANGE
   const handleMessageChange = ({ target: { value } }) => {
     setMessageToSend(value);
@@ -325,7 +333,7 @@ function ActiveJobs(props) {
 
         {/* job details */}
         <div className="min-w-[150px]">
-          <p className="text-base text-sky-blue">Delivery Detail</p>
+          <button className="text-base text-sky-blue" onClick={jobDetailModalHandler}>Delivery Detail</button>
           {passDue ? (
             <div className="my-1">
               <p className="text-base text-slate-700">
@@ -587,6 +595,16 @@ function ActiveJobs(props) {
         />
       )}
       {/* END OF POPOUT SECTION */}
+
+      {/* Delivery Details Popout */}
+      {jobDetailModal &&
+        <JobDetailPopout
+          action={jobDetailModalHandler}
+          situation={jobDetailModal}
+          jobDetail={props?.details?.job_description}
+        />
+      }
+      {/* END Delivery Details Popout */}
     </Layout>
   );
 }