Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into task-layout

src/Routers.jsx

@@ -36,6 +36,7 @@ import FamilyAccPage from "./views/FamilyAccPage";
 import StartJob from "./components/MyJobs/StartJob";
 import AddJobPage from "./views/AddJobPage";
 import MyPendingJobsPage from "./views/MyPendingJobsPage";
+import ManageActiveJobs from "./views/ManageActiveJobs";
 
 export default function Routers() {
   return (
@@ -83,6 +84,7 @@ export default function Routers() {
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
+          <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
           <Route
             exact
             path="/my-collection/collection-item"

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -0,0 +1,155 @@
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import ModalCom from "../Helpers/ModalCom";
+import Layout from "../Partials/Layout";
+import { useLocation, useNavigate } from "react-router-dom";
+import ActiveJobMessage from "./ActiveJobMessage";
+
+function ActiveJobs() {
+  let { userDetails } = useSelector((state) => state.userDetails);
+  let navigate = useNavigate()
+  let {state} = useLocation()
+
+  let [details, setDetails] = useState({})
+
+  // console.log(state, userDetails);
+
+  useEffect(()=>{
+    if(!state){
+      navigate('/my-active-jobs', {replace: true})
+    }
+    setDetails(state)
+  },[])
+  return (
+    <Layout>
+      {/* <div className="logout-modal-wrapper min-w-[850px] h-full lg:h-auto lg:rounded-2xl overflow-y-auto"> */}
+
+        <div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
+          <div className="w-full lg:w-3/4">
+            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
+              {/* back btn and title */}
+              <div className="w-full flex justify-start space-x-3 items-center">
+                <button
+                  type="button"
+                  className="text-[#374557] border border-sky-blue p-1 rounded-full"
+                  onClick={() => navigate('/my-active-jobs', {replace: true})}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="35"
+                    height="35"
+                    viewBox="0 0 24 24"
+                    fill="skyblue"
+                  >
+                    <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
+                  </svg>
+                </button>
+                <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
+                  {details.title && details.title}
+                </h1>
+              </div>
+              {/* END of back btn and title */}
+
+              <div className="mt-2 w-full lg:flex lg:justify-between lg:items-center lg:space-x-2">
+                <div className="my-2 lg:my-0">
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {details.contract && details.contract}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    <span className="font-semibold">Description: </span>
+                    {details.description && details.description}
+                  </p>
+                  <p className="text-base text-sky-blue">Delivery Detail</p>
+                </div>
+                <div className="">
+                  <p className="text-base text-sky-blue">
+                    {userDetails.firstname && userDetails.firstname}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    <span className="font-semibold">Due: </span>
+                    {details.delivery_date &&
+                      details.delivery_date.split(" ")[0]}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {details.delivery_date &&
+                      details.delivery_date.split(" ")[1]}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {details.timeline_days && details.timeline_days} day(s)
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
+              <div className="">
+                <p className="text-lg font-bold text-slate-600 dark:text-blask tracking-wide">Message(s)</p>
+                <textarea
+                  className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
+                  rows="10"
+                  style={{ resize: "none" }}
+                />
+              </div>
+
+              {/* Buttons Sections */}
+              <div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
+                <div className="w-full sm:w-3/4 mb-5 sm:mb-0">
+                  <button
+                    onClick={()=> console.log('working')}
+                    type="button"
+                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
+                      <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
+                    </svg>
+
+                    <span className="text-white">Upload Files</span>
+                  </button>
+                </div>
+
+                <div className="w-full sm:w-1/4 flex justify-between items-center space-x-2">
+                  <button
+                      type="button"
+                      className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
+                  >
+                      <span className="text-white">Clear</span>
+                  </button>
+                  <button
+                      type="button"
+                      className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
+                  >
+                      <span className="text-white">Send</span>
+                  </button>
+                </div>
+
+              </div>
+              {/* end of Buttons Sections  */}
+            </div>
+          </div>
+
+          {/* ACTION SECTION */}
+          <div className="w-full lg:w-1/4 h-full">
+            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
+              <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
+
+              <p className="my-3 py-1 text-base">
+                Waiting for the completion message from the client before you can approve.
+              </p>
+            </div>
+
+            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
+              <div className="">
+                <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
+                <ActiveJobMessage />
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+      {/* </div> */}
+    </Layout>
+  );
+}
+
+export default ActiveJobs;

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -1,112 +1,136 @@
 import React, { useState } from "react";
-import dataImage1 from "../../assets/images/data-table-user-1.png";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
-import dataImage3 from "../../assets/images/data-table-user-3.png";
-import dataImage4 from "../../assets/images/data-table-user-4.png";
-import SelectBox from "../Helpers/SelectBox";
-import ActiveJobsPopout from "../jobPopout/ActiveJobsPopout";
 
-import PaginatedList from "../Pagination/PaginatedList";
+import { useNavigate } from "react-router-dom";
+
 import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
 
-export default function MyActiveJobTable({MyJobList, className }) {
-    const filterCategories = ["All Categories", "Explore", "Featured"];
-    const [selectedCategory, setCategory] = useState(filterCategories[0]);
+export default function MyActiveJobTable({ MyJobList, className }) {
+  const navigate = useNavigate()
 
-    let [jobPopout,setJobPopout] = useState({show:false, data:{}}) // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
+  const filterCategories = ["All Categories", "Explore", "Featured"];
+  const [selectedCategory, setCategory] = useState(filterCategories[0]);
 
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentActiveJobList = MyJobList?.result_list?.slice(indexOfFirstItem, indexOfLastItem);
-  
-    const handlePagination = (e) => {
-        handlePagingFunc(e,setCurrentPage)
-    }
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentActiveJobList = MyJobList?.result_list?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
 
-    return (
-        <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
-                className || ""
-            }`}
-        >
-            {MyJobList && MyJobList?.result_list &&
-            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
-                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                    <tbody>
-                    {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
-                    {/*    <td className="py-4">All Product</td>*/}
-                    {/*    <td className="py-4 text-right">.</td>*/}
-                    {/*</tr>*/}
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
 
-                    {
-                        <>
-                            {MyJobList && MyJobList?.result_list &&
-                                MyJobList.result_list.length > 0 &&
-                                currentActiveJobList.map((value, index) => (
-                                    <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-                                            <td className=" py-4">
-                                                <div className="flex space-x-2 items-center">
-                                                    <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                                                        <img
-                                                            src={dataImage2}
-                                                            alt="data"
-                                                            className="w-full h-full"
-                                                        />
-                                                    </div>
-                                                    <div className="flex flex-col">
-                                                        <h1 className="font-bold text-xl text-dark-gray dark:text-white">
-                                                            {value.title}
-                                                        </h1>
-                                                        <div>
-                                                            {value.description}
-                                                        </div>
-                                                        <span className="text-sm text-thin-light-gray">
-                                                        Price: <span className="text-purple">{value.price*0.01}</span>
-                                                        </span>
-                                                        <span className="text-sm text-thin-light-gray">
-                                                        Duration:   <span className="text-purple"> {value.timeline_days} day(s)</span>
-                                                        </span>
-                                                        <span className="text-sm text-thin-light-gray">
-                                                        Expire:   <span className="text-purple"> {value.expire}</span>
-                                                        </span>
-                                                        <span className="text-sm text-thin-light-gray">
-                                                        Send to:   <span className="text-purple"> {value.job_to}</span>
-                                                        </span>
+  return (
+    <div
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
+        className || ""
+      }`}
+    >
+      {MyJobList && MyJobList?.result_list && (
+        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+            <tbody>
+              {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
+              {/*    <td className="py-4">All Product</td>*/}
+              {/*    <td className="py-4 text-right">.</td>*/}
+              {/*</tr>*/}
 
-                                                    </div>
-                                                </div>
-                                            </td>
+              {
+                <>
+                  {MyJobList &&
+                    MyJobList?.result_list &&
+                    MyJobList.result_list.length > 0 &&
+                    currentActiveJobList.map((value, index) => (
+                      <tr
+                        key={index}
+                        className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                      >
+                        <td className=" py-4">
+                          <div className="flex space-x-2 items-center">
+                            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                              <img
+                                src={dataImage2}
+                                alt="data"
+                                className="w-full h-full"
+                              />
+                            </div>
+                            <div className="flex flex-col">
+                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                                {value.title}
+                              </h1>
+                              <div>{value.description}</div>
+                              <span className="text-sm text-thin-light-gray">
+                                Price:{" "}
+                                <span className="text-purple">
+                                  {value.price * 0.01}
+                                </span>
+                              </span>
+                              <span className="text-sm text-thin-light-gray">
+                                Duration:{" "}
+                                <span className="text-purple">
+                                  {" "}
+                                  {value.timeline_days} day(s)
+                                </span>
+                              </span>
+                              <span className="text-sm text-thin-light-gray">
+                                Expire:{" "}
+                                <span className="text-purple">
+                                  {" "}
+                                  {value.expire}
+                                </span>
+                              </span>
+                              <span className="text-sm text-thin-light-gray">
+                                Send to:{" "}
+                                <span className="text-purple">
+                                  {" "}
+                                  {value.job_to}
+                                </span>
+                              </span>
+                            </div>
+                          </div>
+                        </td>
 
-
-                                            <td className="text-right py-4 px-2">
-                                                <button
-                                                    type="button"
-                                                    onClick={()=>{setJobPopout({show:true, data:value})}}
-                                                    className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                                >
-                                                    View
-                                                </button>
-                                            </td>
-                                        </tr>
-                                ))}
-
-
-                        </>
-                    }
-                    </tbody>
-                </table>
-                {/* PAGINATION BUTTON */}
-                <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= MyJobList?.result_list.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} />
-                {/* END OF PAGINATION BUTTON */}
-            </div>
+                        <td className="text-right py-4 px-2">
+                          <div className="flex justify-center items-center">
+                            <button
+                              type="button"
+                              onClick={() => {
+                                navigate('/manage-active-job', {state:value});
+                              }}
+                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            >
+                              View
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                </>
+              }
+            </tbody>
+          </table>
+          {/* PAGINATION BUTTON */}
+          <PaginatedList
+            onClick={handlePagination}
+            prev={currentPage == 0 ? true : false}
+            next={
+              currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+              MyJobList?.result_list.length
+                ? true
+                : false
             }
-
-            {/* Active Job Popout */}
-            {jobPopout.show &&
-                <ActiveJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
-            }
-            {/* End of Active Job Popout */}
+            data={MyJobList?.result_list}
+            start={indexOfFirstItem}
+            stop={indexOfLastItem}
+          />
+          {/* END OF PAGINATION BUTTON */}
         </div>
-    );
+      )}
+    </div>
+  );
 }

src/components/MyActiveJobs/index.jsx

@@ -5,37 +5,37 @@ import CommonHead from "../UserHeader/CommonHead";
 import MyActiveJobTable from "./MyActiveJobTable";
 
 export default function MyActiveJobs(props) {
-    const [selectTab, setValue] = useState("today");
-    const filterHandler = (value) => {
-        setValue(value);
-    };
-    console.log("AMEYE LOC1", props.MyJobList);
-    return (
-        <Layout>
-            <CommonHead />
-            <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">
+  const [selectTab, setValue] = useState("today");
+  const filterHandler = (value) => {
+    setValue(value);
+  };
+  console.log("AMEYE LOC1", props.MyJobList);
+  return (
+    <Layout>
+      <CommonHead />
+      <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"}`}
+                  className={`${selectTab === "today" ? "block" : "hidden"}`}
                 >
                   Active Job(s)
                 </span>
-
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
-
-                            </div>
-                        </div>
-                    </div>
-                    <MyActiveJobTable MyJobList={props.MyJobList} />
-                </div>
+              </h1>
             </div>
-        </Layout>
-    );
+            <div className="slider-btns flex space-x-4">
+              <div
+                onClick={() => filterHandler("today")}
+                className="relative"
+              ></div>
+            </div>
+          </div>
+          <MyActiveJobTable MyJobList={props.MyJobList} />
+        </div>
+      </div>
+    </Layout>
+  );
 }

src/components/MyJobs/index.jsx

@@ -5,40 +5,44 @@ import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
 
 export default function MyJobs(props) {
-    const [selectTab, setValue] = useState("today");
-    const filterHandler = (value) => {
-        setValue(value);
-    };
-    console.log("AMEYE LOC1", props.MyJobList);
-    return (
-        <Layout>
-            <CommonHead />
-            <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 flex items-center space-x-1  text-dark-gray dark:text-white">
-                                <span
-                                    className={`${selectTab === "today" ? "block" : "hidden"}`}
-                                >
-                                My Jobs
-                                </span>
+  const [selectTab, setValue] = useState("today");
+  const filterHandler = (value) => {
+    setValue(value);
+  };
+  console.log("AMEYE LOC1", props.MyJobList);
+  return (
+    <Layout>
+      <CommonHead />
+      <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 flex items-center space-x-1  text-dark-gray dark:text-white">
+                <span
+                  className={`${selectTab === "today" ? "block" : "hidden"}`}
+                >
+                  My Jobs
+                </span>
 
-                                <Link to='/add-job' className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
-                                    Add Job
-                                </Link>
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
-
-                        </div>
-                    </div>
-                    </div>
-                    <MyJobTable MyJobList={props.MyJobList} />
-                </div>
+                <Link
+                  to="/add-job"
+                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
+                  Add Job
+                </Link>
+              </h1>
             </div>
-        </Layout>
-    );
+            <div className="slider-btns flex space-x-4">
+              <div
+                onClick={() => filterHandler("today")}
+                className="relative"
+              ></div>
+            </div>
+          </div>
+          <MyJobTable MyJobList={props.MyJobList} />
+        </div>
+      </div>
+    </Layout>
+  );
 }

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -4,7 +4,7 @@ import dataImage2 from "../../assets/images/data-table-user-2.png";
 import dataImage3 from "../../assets/images/data-table-user-3.png";
 import dataImage4 from "../../assets/images/data-table-user-4.png";
 import SelectBox from "../Helpers/SelectBox";
-import ActiveJobsPopout from "../jobPopout/ActiveJobsPopout";
+import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 
 import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
@@ -104,7 +104,7 @@ export default function MyPendingJobTable({MyJobList, className }) {
 
             {/* Active Job Popout */}
             {jobPopout.show &&
-                <ActiveJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
+                <PendingJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
             }
             {/* End of Active Job Popout */}
         </div>

src/components/MyTasks/index.jsx

@@ -5,36 +5,36 @@ import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
 
 export default function MyTasks() {
-    const [selectTab, setValue] = useState("today");
-    const filterHandler = (value) => {
-        setValue(value);
-    };
-    return (
-        <Layout>
-            <CommonHead />
-            <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">
+  const [selectTab, setValue] = useState("today");
+  const filterHandler = (value) => {
+    setValue(value);
+  };
+  return (
+    <Layout>
+      <CommonHead />
+      <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"}`}
+                  className={`${selectTab === "today" ? "block" : "hidden"}`}
                 >
                   My Tasks
                 </span>
-
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
-
-                        </div>
-                    </div>
-                    </div>
-                    <MyJobTable />
-                </div>
+              </h1>
             </div>
-        </Layout>
-    );
+            <div className="slider-btns flex space-x-4">
+              <div
+                onClick={() => filterHandler("today")}
+                className="relative"
+              ></div>
+            </div>
+          </div>
+          <MyJobTable />
+        </div>
+      </div>
+    </Layout>
+  );
 }

src/components/MyWallet/WalletHeader.jsx

@@ -1,4 +1,4 @@
-import {Link} from 'react-router-dom'
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import Icons from "../Helpers/Icons";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
@@ -8,180 +8,194 @@ import Accordion from "../Helpers/Accordion";
 
 export default function WalletHeader(props) {
   //  debugger;
-    //props.myWalletList.result_list
-    return (
-        <>
-            <div
-                className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple pr-1.5 pl-4">
-                <div
-                    onClick={() => props.handlerBalance()}
-                    className="flex items-center lg:justify-between justify-center w-full h-full"
-                >
-                <span className="lg:block hidden">
-                  <Icons name="wallet"/>
-                </span>
-                    <p className="lg:text-xl text-lg font-bold text-white">
-                        Wallet
-                    </p>
-                    <span className="lg:block hidden">
-                  <Icons name="deep-plus"/>
-                </span>
-                </div>
-                <div
-                    className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white   absolute -left-24 rounded-lg cursor-pointer ${
-                        props.balanceDropdown ? "active" : ""
-                    }`}
-                >
-                    <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-6">
-                        <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
-                            Wallet
-                        </h3>
+  //props.myWalletList.result_list
+  let { pathname } = useLocation();
+  let navigate = useNavigate();
+  return (
+    <>
+      <div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple pr-1.5 pl-4">
+        <div
+          onClick={() => props.handlerBalance()}
+          className="flex items-center lg:justify-between justify-center w-full h-full"
+        >
+          <span className="lg:block hidden">
+            <Icons name="wallet" />
+          </span>
+          <p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
+          <span className="lg:block hidden">
+            <Icons name="deep-plus" />
+          </span>
+        </div>
+        <div
+          className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white   absolute -left-24 rounded-lg cursor-pointer ${
+            props.balanceDropdown ? "active" : ""
+          }`}
+        >
+          <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-6">
+            <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
+              Wallet
+            </h3>
+          </div>
+          <div className="content px-7 pb-7">
+            <ul>
+              {props.myWalletList &&
+                props.myWalletList?.result_list?.length > 0 &&
+                props.myWalletList.result_list.map((value, index) => (
+                  <li
+                    key={index}
+                    className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                  >
+                    <div className="sm:flex justify-between items-center">
+                      <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
+                        <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
+                          <img src={bank1} alt="" />
+                        </div>
+                        <div className="name">
+                          <p className="text-base text-dark-gray dark:text-white font-medium">
+                            {value.description}
+                          </p>
+                        </div>
+                      </div>
+                      <div>
+                        <p className="eth text-xl font-bold text-purple">
+                          {(value.amount * 0.01).toFixed(2)} {value.code}
+                        </p>
+                        <p className="usd text-base text-thin-light-gray text-right">
+                          {/*(773.69 USD)*/}
+                        </p>
+                      </div>
                     </div>
-                    <div className="content px-7 pb-7">
-                        <ul>
+                  </li>
+                ))}
 
-                            {props.myWalletList &&
-                                props.myWalletList?.result_list?.length > 0 &&
-                                props.myWalletList.result_list.map((value, index) => (
-                                    <li key={index} className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">
-                                        <div className="sm:flex justify-between items-center">
-                                            <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
-                                                <div
-                                                    className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
-                                                    <img src={bank1} alt=""/>
-                                                </div>
-                                                <div className="name">
-                                                    <p className="text-base text-dark-gray dark:text-white font-medium">
-                                                        {value.description}
-                                                    </p>
-                                                </div>
-                                            </div>
-                                            <div>
-                                                <p className="eth text-xl font-bold text-purple">
-                                                    {(value.amount*0.01).toFixed(2)} {value.code}
-                                                </p>
-                                                <p className="usd text-base text-thin-light-gray text-right">
-                                                    {/*(773.69 USD)*/}
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </li>
-                                ))}
-
-                            {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
-                            {/*    <div className="sm:flex justify-between items-center">*/}
-                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
-                            {/*            <div*/}
-                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-                            {/*                <img src={bank1} alt=""/>*/}
-                            {/*            </div>*/}
-                            {/*            <div className="name">*/}
-                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
-                            {/*                    MetaMask*/}
-                            {/*                </p>*/}
-                            {/*            </div>*/}
-                            {/*        </div>*/}
-                            {/*        <div>*/}
-                            {/*            <p className="eth text-xl font-bold text-purple">*/}
-                            {/*                75,320 ETH*/}
-                            {/*            </p>*/}
-                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
-                            {/*                (773.69 USD)*/}
-                            {/*            </p>*/}
-                            {/*        </div>*/}
-                            {/*    </div>*/}
-                            {/*</li>*/}
-                            {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
-                            {/*    <div className="sm:flex justify-between items-center">*/}
-                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
-                            {/*            <div*/}
-                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-                            {/*                <img src={bank2} alt=""/>*/}
-                            {/*            </div>*/}
-                            {/*            <div className="name">*/}
-                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
-                            {/*                    Coinbase Wallet*/}
-                            {/*                </p>*/}
-                            {/*            </div>*/}
-                            {/*        </div>*/}
-                            {/*        <div>*/}
-                            {/*            <p className="eth text-xl font-bold text-purple">*/}
-                            {/*                56,124 ETH*/}
-                            {/*            </p>*/}
-                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
-                            {/*                (773.69 USD)*/}
-                            {/*            </p>*/}
-                            {/*        </div>*/}
-                            {/*    </div>*/}
-                            {/*</li>*/}
-                            {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
-                            {/*    <div className="sm:flex justify-between items-center">*/}
-                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
-                            {/*            <div*/}
-                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-                            {/*                <img src={bank3} alt=""/>*/}
-                            {/*            </div>*/}
-                            {/*            <div className="name">*/}
-                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
-                            {/*                    Bitski*/}
-                            {/*                </p>*/}
-                            {/*            </div>*/}
-                            {/*        </div>*/}
-                            {/*        <div>*/}
-                            {/*            <p className="eth text-xl font-bold text-purple">*/}
-                            {/*                99,123 ETH*/}
-                            {/*            </p>*/}
-                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
-                            {/*                (773.69 USD)*/}
-                            {/*            </p>*/}
-                            {/*        </div>*/}
-                            {/*    </div>*/}
-                            {/*</li>*/}
-                            {/*<li className="content-item py-5">*/}
-                            {/*    <div className="sm:flex justify-between items-center">*/}
-                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
-                            {/*            <div*/}
-                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-                            {/*                <img src={bank4} alt=""/>*/}
-                            {/*            </div>*/}
-                            {/*            <div className="name">*/}
-                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
-                            {/*                    WalletConnect*/}
-                            {/*                </p>*/}
-                            {/*            </div>*/}
-                            {/*        </div>*/}
-                            {/*        <div>*/}
-                            {/*            <p className="eth text-xl font-bold text-purple">*/}
-                            {/*                43,728 ETH*/}
-                            {/*            </p>*/}
-                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
-                            {/*                (773.69 USD)*/}
-                            {/*            </p>*/}
-                            {/*        </div>*/}
-                            {/*    </div>*/}
-                            {/*</li>*/}
-                        </ul>
-                        <div className="add-money-btn flex justify-center items-center mt-3">
-                            {/* <button
-                                onClick={() => props.addMoneyHandler()}
+              {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
+              {/*    <div className="sm:flex justify-between items-center">*/}
+              {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
+              {/*            <div*/}
+              {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
+              {/*                <img src={bank1} alt=""/>*/}
+              {/*            </div>*/}
+              {/*            <div className="name">*/}
+              {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
+              {/*                    MetaMask*/}
+              {/*                </p>*/}
+              {/*            </div>*/}
+              {/*        </div>*/}
+              {/*        <div>*/}
+              {/*            <p className="eth text-xl font-bold text-purple">*/}
+              {/*                75,320 ETH*/}
+              {/*            </p>*/}
+              {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
+              {/*                (773.69 USD)*/}
+              {/*            </p>*/}
+              {/*        </div>*/}
+              {/*    </div>*/}
+              {/*</li>*/}
+              {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
+              {/*    <div className="sm:flex justify-between items-center">*/}
+              {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
+              {/*            <div*/}
+              {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
+              {/*                <img src={bank2} alt=""/>*/}
+              {/*            </div>*/}
+              {/*            <div className="name">*/}
+              {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
+              {/*                    Coinbase Wallet*/}
+              {/*                </p>*/}
+              {/*            </div>*/}
+              {/*        </div>*/}
+              {/*        <div>*/}
+              {/*            <p className="eth text-xl font-bold text-purple">*/}
+              {/*                56,124 ETH*/}
+              {/*            </p>*/}
+              {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
+              {/*                (773.69 USD)*/}
+              {/*            </p>*/}
+              {/*        </div>*/}
+              {/*    </div>*/}
+              {/*</li>*/}
+              {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
+              {/*    <div className="sm:flex justify-between items-center">*/}
+              {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
+              {/*            <div*/}
+              {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
+              {/*                <img src={bank3} alt=""/>*/}
+              {/*            </div>*/}
+              {/*            <div className="name">*/}
+              {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
+              {/*                    Bitski*/}
+              {/*                </p>*/}
+              {/*            </div>*/}
+              {/*        </div>*/}
+              {/*        <div>*/}
+              {/*            <p className="eth text-xl font-bold text-purple">*/}
+              {/*                99,123 ETH*/}
+              {/*            </p>*/}
+              {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
+              {/*                (773.69 USD)*/}
+              {/*            </p>*/}
+              {/*        </div>*/}
+              {/*    </div>*/}
+              {/*</li>*/}
+              {/*<li className="content-item py-5">*/}
+              {/*    <div className="sm:flex justify-between items-center">*/}
+              {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
+              {/*            <div*/}
+              {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
+              {/*                <img src={bank4} alt=""/>*/}
+              {/*            </div>*/}
+              {/*            <div className="name">*/}
+              {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
+              {/*                    WalletConnect*/}
+              {/*                </p>*/}
+              {/*            </div>*/}
+              {/*        </div>*/}
+              {/*        <div>*/}
+              {/*            <p className="eth text-xl font-bold text-purple">*/}
+              {/*                43,728 ETH*/}
+              {/*            </p>*/}
+              {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
+              {/*                (773.69 USD)*/}
+              {/*            </p>*/}
+              {/*        </div>*/}
+              {/*    </div>*/}
+              {/*</li>*/}
+            </ul>
+            <div className="add-money-btn flex justify-center items-center mt-3">
+              {/* <button
+                                onClick={() => {
+                                if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
+                                else navigate('/my-wallet', {replace: true})
+                                }}
                                 type="button"
                                 className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                             >
                                 Manage
                             </button> */}
-                            <Link to='/my-wallet' className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">Manage</Link>
-                        </div>
-                    </div>
-                </div>
+              <Link
+                to="/my-wallet"
+                onClick={() => {
+                  if (pathname == "/my-wallet")
+                    props.setBalanceDropdown.toggle();
+                  else navigate("/my-wallet", { replace: true });
+                }}
+                className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+              >
+                Manage
+              </Link>
             </div>
-            {/*<div*/}
-            {/*    className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple">*/}
-            {/*    <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
-            {/*        <p className="lg:text-xl text-lg font-bold text-white">*/}
-            {/*            $ 234,435.34*/}
-            {/*        </p>*/}
-            {/*    </div>*/}
-            {/*</div>*/}
-            <div className="lg:hidden block"></div>
-        </>);
+          </div>
+        </div>
+      </div>
+      {/*<div*/}
+      {/*    className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple">*/}
+      {/*    <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
+      {/*        <p className="lg:text-xl text-lg font-bold text-white">*/}
+      {/*            $ 234,435.34*/}
+      {/*        </p>*/}
+      {/*    </div>*/}
+      {/*</div>*/}
+      <div className="lg:hidden block"></div>
+    </>
+  );
 }

src/components/Partials/Header.jsx

@@ -1,5 +1,5 @@
 import React, { useContext,useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
 import bank3 from "../../assets/images/bank-3.png";
@@ -91,6 +91,15 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
     setToggleNotification.toggle()
   }
 
+  // getting the location of head
+  let {pathname} = useLocation()
+  
+  const handleWalletBtn = () => {
+    if (pathname === "/my-wallet"){
+      setbalanceValue.set(false)
+    } else return balanceDropdown
+  }
+
   // User Profile
   let {firstname, lastname, email, profile_pic} = userDetails
   let userEmail = email.split('@')[0]
@@ -234,7 +243,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 myWalletList={myWalletList}
                 handlerBalance={handlerBalance}
                 balanceDropdown={balanceDropdown}
-                addMoneyHandler={addMoneyHandler} />
+                addMoneyHandler={addMoneyHandler}
+                setBalanceDropdown = {setbalanceValue} />
             {/* notification */}
             <div className="user-notification lg:block hidden relative">
               <div

src/components/Partials/MobileSideBar.jsx

@@ -12,7 +12,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
 
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
-  let noOfJobs = marketData?.length;
+  let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
 
   return (
     <div className="w-full h-full">
@@ -163,19 +163,20 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
           </div>
         </div>
 
-        {!userDetails.post_jobs ? 
+        {!userDetails.post_jobs ? (
           <div className="setting-item">
-          <div className="top-platform bg-pink dark:bg-dark-white   rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
-            <NavLink to="/start-job" className="nav-item flex items-center justify-start space-x-3.5">
-              <span className="item-content relative group-hover:text-purple text-xl transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
-                Enable Job Post
-              </span>
-            </NavLink>
+            <div className="top-platform bg-pink dark:bg-dark-white   rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
+              <NavLink
+                to="/start-job"
+                className="nav-item flex items-center justify-start space-x-3.5"
+              >
+                <span className="item-content relative group-hover:text-purple text-xl transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
+                  Enable Job Post
+                </span>
+              </NavLink>
+            </div>
           </div>
-        </div>
-        :
-        jobLists?.result_list?.length ?
-          (
+        ) : jobLists?.result_list?.length ? (
           <div className="setting-item">
             <div className="heading mb-5">
               <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
@@ -224,33 +225,30 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
               </ul>
             </div>
           </div>
-          )
-          :
-          (
-            <div className="setting-item">
-              <div className="heading mb-5">
-                <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
-              </div>
-              <div className="items">
-                <ul className="flex flex-col space-y-6">
-                  <li className="item group">
-                    <NavLink
-                      to="/add-job"
-                      className="nav-item flex items-center justify-start space-x-3.5"
-                    >
-                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                        <Icons name="people-two" />
-                      </span>
-                      <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                        My Jobs
-                      </span>
-                    </NavLink>
-                  </li>
-                </ul>
-              </div>
+        ) : (
+          <div className="setting-item">
+            <div className="heading mb-5">
+              <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
             </div>
-            )
-      }
+            <div className="items">
+              <ul className="flex flex-col space-y-6">
+                <li className="item group">
+                  <NavLink
+                    to="/add-job"
+                    className="nav-item flex items-center justify-start space-x-3.5"
+                  >
+                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                      <Icons name="people-two" />
+                    </span>
+                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
+                      My Jobs
+                    </span>
+                  </NavLink>
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}
       </div>
       {/* signout area */}
       {sidebar ? (
@@ -345,4 +343,4 @@ const ListItem = ({ sidebar, route, title, bubble }) => {
       </NavLink>
     </li>
   );
-};
+};

src/components/Partials/Sidebar.jsx

@@ -13,7 +13,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
 
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
-  let noOfJobs = marketData?.length;
+  let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
 
   useEffect(() => {
     const title = document.querySelectorAll(".menu-setting-items .heading");
@@ -233,168 +233,164 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
         <div className="setting-item">
           <div className="heading mb-5 bg-dark-blue   rounded-2xl p-2 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border">
             <NavLink to="/acc-family">
-               <h1 className="title text-xl font-bold text-purple">Family Corner</h1>
+              <h1 className="title text-xl font-bold text-purple">
+                Family Corner
+              </h1>
             </NavLink>
           </div>
         </div>
 
-        {!userDetails.post_jobs ? 
-        <div className="setting-item">
-          <div className="top-platform bg-pink dark:bg-dark-white   rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
-            <NavLink to="/start-job">
-              <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
-                Enable Job Post
-              </span>
-            </NavLink>
+        {!userDetails.post_jobs ? (
+          <div className="setting-item">
+            <div className="top-platform bg-pink dark:bg-dark-white   rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
+              <NavLink to="/start-job">
+                <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
+                  Enable Job Post
+                </span>
+              </NavLink>
+            </div>
           </div>
-        </div>
-        :
-        jobLists?.result_list?.length ?
-          (
-            <div className="setting-item">
-              <div className="heading mb-5">
-                <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
-              </div>
-              <div className="items">
-                <ul className="flex flex-col space-y-6">
-                  <li className="item group">
-                    <NavLink
-                      to="/myjobs"
-                      className={`nav-item flex items-center ${
-                        ((navData) => (navData.isActive ? "active" : ""),
-                        sidebar ? "justify-start space-x-3.5" : "justify-center")
-                      }`}
-                    >
-                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                        <Icons name="people-two" />
-                      </span>
-                      <span
-                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                          sidebar ? "active flex-1" : "w-0"
-                        }`}
-                      >
-                        List
-                      </span>
-                    </NavLink>
-                  </li>
-                  <li className="item group">
-                    <NavLink
-                      to="/my-pending-jobs"
-                      className={`nav-item flex items-center ${
-                        ((navData) => (navData.isActive ? "active" : ""),
-                        sidebar ? "justify-start space-x-3.5" : "justify-center")
-                      }`}
-                    >
-                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                        <Icons name="people-two" />
-                      </span>
-                      <span
-                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                          sidebar ? "active flex-1" : "w-0"
-                        }`}
-                      >
-                        Pending
-                      </span>
-                    </NavLink>
-                  </li>
-                  <li className="item group">
-                    <NavLink
-                      to="/my-active-jobs"
-                      className={`nav-item flex items-center ${
-                        ((navData) => (navData.isActive ? "active" : ""),
-                        sidebar ? "justify-start space-x-3.5" : "justify-center")
-                      }`}
-                    >
-                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                        <Icons name="people-two" />
-                      </span>
-                      <span
-                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                          sidebar ? "active flex-1" : "w-0"
-                        }`}
-                      >
-                        Active
-                      </span>
-                    </NavLink>
-                  </li>
-                  {/*<li className="item group">*/}
-                  {/*  <NavLink*/}
-                  {/*    to="/profile"*/}
-                  {/*    className={`nav-item flex items-center ${*/}
-                  {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-                  {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-                  {/*    }`}*/}
-                  {/*  >*/}
-                  {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-                  {/*      <Icons name="people-two" />*/}
-                  {/*    </span>*/}
-                  {/*    <span*/}
-                  {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
-                  {/*        sidebar ? "active flex-1" : "w-0"*/}
-                  {/*      }`}*/}
-                  {/*    >*/}
-                  {/*      My Profile*/}
-                  {/*    </span>*/}
-                  {/*  </NavLink>*/}
-                  {/*</li>*/}
-                  {/*<li className="item group">*/}
-                  {/*  <NavLink*/}
-                  {/*    to="/settings"*/}
-                  {/*    className={`nav-item flex items-center ${*/}
-                  {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-                  {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-                  {/*    }`}*/}
-                  {/*  >*/}
-                  {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-                  {/*      <Icons name="setting" />*/}
-                  {/*    </span>*/}
-                  {/*    <span*/}
-                  {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
-                  {/*        sidebar ? "active flex-1" : "w-0"*/}
-                  {/*      }`}*/}
-                  {/*    >*/}
-                  {/*      Settings*/}
-                  {/*    </span>*/}
-                  {/*  </NavLink>*/}
-                  {/*</li>*/}
-                </ul>
-              </div>
+        ) : jobLists?.result_list?.length ? (
+          <div className="setting-item">
+            <div className="heading mb-5">
+              <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
             </div>
-          )
-          :
-          (
-            <div className="setting-item">
-              <div className="heading mb-5">
-                <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
-              </div>
-              <div className="items">
-                <ul className="flex flex-col space-y-6">
-                  <li className="item group">
-                    <NavLink
-                      to="/add-job"
-                      className={`nav-item flex items-center ${
-                        ((navData) => (navData.isActive ? "active" : ""),
-                        sidebar ? "justify-start space-x-3.5" : "justify-center")
+            <div className="items">
+              <ul className="flex flex-col space-y-6">
+                <li className="item group">
+                  <NavLink
+                    to="/myjobs"
+                    className={`nav-item flex items-center ${
+                      ((navData) => (navData.isActive ? "active" : ""),
+                      sidebar ? "justify-start space-x-3.5" : "justify-center")
+                    }`}
+                  >
+                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                      <Icons name="people-two" />
+                    </span>
+                    <span
+                      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                        sidebar ? "active flex-1" : "w-0"
                       }`}
                     >
-                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                        <Icons name="people-two" />
-                      </span>
-                      <span
-                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                          sidebar ? "active flex-1" : "w-0"
-                        }`}
-                      >
-                        Add Job
-                      </span>
-                    </NavLink>
-                  </li>
-                </ul>
-              </div>
+                      List
+                    </span>
+                  </NavLink>
+                </li>
+                <li className="item group">
+                  <NavLink
+                    to="/my-pending-jobs"
+                    className={`nav-item flex items-center ${
+                      ((navData) => (navData.isActive ? "active" : ""),
+                      sidebar ? "justify-start space-x-3.5" : "justify-center")
+                    }`}
+                  >
+                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                      <Icons name="people-two" />
+                    </span>
+                    <span
+                      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                        sidebar ? "active flex-1" : "w-0"
+                      }`}
+                    >
+                      Pending
+                    </span>
+                  </NavLink>
+                </li>
+                <li className="item group">
+                  <NavLink
+                    to="/my-active-jobs"
+                    className={`nav-item flex items-center ${
+                      ((navData) => (navData.isActive ? "active" : ""),
+                      sidebar ? "justify-start space-x-3.5" : "justify-center")
+                    }`}
+                  >
+                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                      <Icons name="people-two" />
+                    </span>
+                    <span
+                      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                        sidebar ? "active flex-1" : "w-0"
+                      }`}
+                    >
+                      Active
+                    </span>
+                  </NavLink>
+                </li>
+                {/*<li className="item group">*/}
+                {/*  <NavLink*/}
+                {/*    to="/profile"*/}
+                {/*    className={`nav-item flex items-center ${*/}
+                {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
+                {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
+                {/*    }`}*/}
+                {/*  >*/}
+                {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
+                {/*      <Icons name="people-two" />*/}
+                {/*    </span>*/}
+                {/*    <span*/}
+                {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
+                {/*        sidebar ? "active flex-1" : "w-0"*/}
+                {/*      }`}*/}
+                {/*    >*/}
+                {/*      My Profile*/}
+                {/*    </span>*/}
+                {/*  </NavLink>*/}
+                {/*</li>*/}
+                {/*<li className="item group">*/}
+                {/*  <NavLink*/}
+                {/*    to="/settings"*/}
+                {/*    className={`nav-item flex items-center ${*/}
+                {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
+                {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
+                {/*    }`}*/}
+                {/*  >*/}
+                {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
+                {/*      <Icons name="setting" />*/}
+                {/*    </span>*/}
+                {/*    <span*/}
+                {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
+                {/*        sidebar ? "active flex-1" : "w-0"*/}
+                {/*      }`}*/}
+                {/*    >*/}
+                {/*      Settings*/}
+                {/*    </span>*/}
+                {/*  </NavLink>*/}
+                {/*</li>*/}
+              </ul>
             </div>
-          )
-        }
-
+          </div>
+        ) : (
+          <div className="setting-item">
+            <div className="heading mb-5">
+              <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
+            </div>
+            <div className="items">
+              <ul className="flex flex-col space-y-6">
+                <li className="item group">
+                  <NavLink
+                    to="/add-job"
+                    className={`nav-item flex items-center ${
+                      ((navData) => (navData.isActive ? "active" : ""),
+                      sidebar ? "justify-start space-x-3.5" : "justify-center")
+                    }`}
+                  >
+                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                      <Icons name="people-two" />
+                    </span>
+                    <span
+                      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                        sidebar ? "active flex-1" : "w-0"
+                      }`}
+                    >
+                      Add Job
+                    </span>
+                  </NavLink>
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}
       </div>
       {/* signout area */}
       {sidebar ? (

src/components/jobPopout/PendingJobsPopout.jsx

@@ -3,7 +3,7 @@ import Detail from './popoutcomponent/Detail'
 import ModalCom from '../Helpers/ModalCom'
 
 
-function ActiveJobsPopout({details, onClose, situation}) {
+function PendingJobsPopout({details, onClose, situation}) {
   return (
     <ModalCom action={onClose} situation={situation}>
     <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -66,7 +66,7 @@ function ActiveJobsPopout({details, onClose, situation}) {
             <div className='my-2 md:flex'>
               <Detail 
                   label='Offer Expire' 
-                  value={`${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`} 
+                  value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
               />
             </div>
   
@@ -139,4 +139,4 @@ function ActiveJobsPopout({details, onClose, situation}) {
     )
 }
 
-export default ActiveJobsPopout
+export default PendingJobsPopout

src/services/UsersService.js

@@ -198,6 +198,18 @@ class usersService {
         return this.postAuxEnd("/sendmoneyfee", postData);
     }
 
+    // Task for the person doing the job
+    getMyActiveTaskList(){
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:0,
+            offset:0,
+            limit :100
+        };
+        return this.postAuxEnd("/activetaskslist", postData);
+    }
     getMyActiveJobList(){
         var postData = {
             uuid: localStorage.getItem("uid"),

src/views/ManageActiveJobs.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ActiveJobs from '../components/MyActiveJobs/ActiveJobs'
+
+function ManageActiveJobs() {
+  return (
+    <ActiveJobs />
+  )
+}
+
+export default ManageActiveJobs

src/views/MyTaskPage.jsx

@@ -10,7 +10,7 @@ export default function MyTaskPage() {
 
     const getMyActiveJobList = async () => {
         try {
-            const res = await api.getMyActiveJobList();
+            const res = await api.getMyActiveTaskList();
             setMyActiveJobList(res.data);
         } catch (error) {
             console.log("Error getting mode");