renders job action based on owner status and status description

src/Routers.jsx

@@ -41,6 +41,7 @@ import FamilyManagePage from "./views/FamilyManagePage";
 import MyCouponPage from "./views/MyCouponPage";
 import AuthRedirect from "./views/AuthRedirect";
 import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
+import BlogPage from "./views/BlogPage";
 
 export default function Routers() {
   return (
@@ -93,6 +94,9 @@ export default function Routers() {
           <Route exact path="/manage-family"  element={<FamilyManagePage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
           <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
+          <Route exact path="/blog-page"  element={<BlogPage />} />
+
+
           <Route
             exact
             path="/my-collection/collection-item"

src/components/Blogs/index.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+
+export default function BlogItem(props) {
+    const [selectTab, setValue] = useState("today");
+    const filterHandler = (value) => {
+        setValue(value);
+    };
+    return (
+        <Layout>
+            <CommonHead
+                commonHeadData={props.commonHeadData}
+            />
+            <div className="notification-page w-full mb-10">
+                <div className="notification-wrapper w-full">
+                    {/* heading */}
+                    <div className="sm:flex justify-between items-center mb-6">
+                        <div className="mb-5 sm:mb-0">
+                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                <span
+                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                >
+                  Title of this Blog Items
+                </span>
+                            </h1>
+                        </div>
+                        <div className="slider-btns flex space-x-4">
+
+                        </div>
+                    </div>
+                   <div>
+                       Blog Items Details
+                   </div>
+                </div>
+            </div>
+        </Layout>
+    );
+}

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

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function CurrentJobAction() {
+  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 & Active
+      </p>
+    </div>
+  )
+}
+
+export default CurrentJobAction

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function CurrentTaskAction() {
+  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 & Active
+      </p>
+    </div>
+  )
+}
+
+export default CurrentTaskAction

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/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

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function ReviewJobAction() {
+  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 & Review Job
+      </p>
+    </div>
+  )
+}
+
+export default ReviewJobAction

src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function ReviewTaskAction() {
+  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 & Review Job
+      </p>
+    </div>
+  )
+}
+
+export default ReviewTaskAction

src/views/BlogPage.jsx

@@ -0,0 +1,15 @@
+import React, { useContext, useState, useEffect } from "react";
+import BlogItem from "../components/Blogs";
+
+export default function BlogPage() {
+    const commonHeadData = () => {
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+        return 0;
+    };
+
+    return (
+        <>
+            <BlogItem  commonHeadData={commonHeadData} />
+        </>
+    );
+}