renders job action based on owner status and status description

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>
   )
 }