renders job action based on owner status and status description

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import ActiveJobMessage from "./ActiveJobMessage";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import CountDown from "../Helpers/CountDown";
+import IndexJobActions from "./JobActions/IndexJobActions";
 
 import usersService from "../../services/UsersService";
 
@@ -261,9 +262,10 @@ function ActiveJobs(props) {
             <div className="w-full lg:w-1/2">
               <div className="">
                 <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
-                <p className="my-3 py-1 text-base">
+                {/* <p className="my-3 py-1 text-base">
                   Waiting for the completion message from the client before you can approve.
-                </p>
+                </p> */}
+                <IndexJobActions details={props.details} />
               </div>
 
               {/* TEXTAREA SECTION */}

src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 
 function CurrentJobAction() {
   return (
-    <div>CurrentJobAction</div>
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Owner True & Active
+      </p>
+    </div>
   )
 }
 

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 
 function CurrentTaskAction() {
   return (
-    <div>CurrentTaskAction</div>
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Worker True & Active
+      </p>
+    </div>
   )
 }
 

src/components/MyActiveJobs/JobActions/IndexJobActions.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import CurrentJobAction from './CurrentJobAction'
+import CurrentTaskAction from './CurrentTaskAction'
+
+import PastDueJobAction from './PastDueJobAction'
+import PastDueTaskAction from './PastDueTaskAction'
+
+import ReviewJobAction from './ReviewJobAction'
+import ReviewTaskAction from './ReviewTaskAction'
+
+function IndexJobActions({details}) { // FUNCTION TO RENDER SPECIFIC JOB ACTION DEPENDING ON OWNER STATUS & STATUS DESCRIPTION
+    let owner = details.owner_status
+    let description = details.status_description
+    switch(owner) {
+        case 'OWNER':
+            return (()=>{
+                if(description == 'ACTIVE'){
+                    return <CurrentJobAction />
+                }else if(description == 'PASTDUE'){
+                    return <PastDueJobAction />
+                }else if(description == 'REVIEW'){
+                    return <ReviewJobAction />
+                } else {
+                    return null
+                }
+            })()
+        case 'WORKER':
+            return (()=>{
+                if(description == 'ACTIVE'){
+                    return <CurrentTaskAction />
+                }else if(description == 'PASTDUE'){
+                    return <PastDueTaskAction />
+                }else if(description == 'REVIEW'){
+                    return <ReviewTaskAction />
+                } else {
+                    return null
+                }
+            })()
+        default:
+            return null
+    }
+}
+
+export default IndexJobActions

src/components/MyActiveJobs/JobActions/PassDueJobAction.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-function PassDueJobAction() {
-  return (
-    <div>PassDueJobAction</div>
-  )
-}
-
-export default PassDueJobAction

src/components/MyActiveJobs/JobActions/PassDueTaskAction.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-function PassDueTaskAction() {
-  return (
-    <div>PassDueTaskAction</div>
-  )
-}
-
-export default PassDueTaskAction

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function PastDueJobAction() {
+  return (
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Owner True & PastDue
+      </p>
+    </div>
+  )
+}
+
+export default PastDueJobAction

src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function PastDueTaskAction() {
+  return (
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Worker True & PastDue
+      </p>
+    </div>
+  )
+}
+
+export default PastDueTaskAction

src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 
 function ReviewJobAction() {
   return (
-    <div>ReviewJobAction</div>
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Owner True & Review Job
+      </p>
+    </div>
   )
 }
 

src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 
 function ReviewTaskAction() {
   return (
-    <div>ReviewTaskAction</div>
+    <div className=''>
+      <p className="my-3 py-1 text-base">
+        Waiting for the completion message from the client before you can approve. Worker True & Review Job
+      </p>
+    </div>
   )
 }