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,28 +1,29 @@
 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 navigate = useNavigate()
 
-export default function MyActiveJobTable({MyJobList, className }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
 
-    let [jobPopout,setJobPopout] = useState({show:false, data:{}}) // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
-
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const indexOfLastItem =
-    const currentActiveJobList = MyJobList?.result_list?.slice(indexOfFirstItem, 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)
+    handlePagingFunc(e, setCurrentPage);
-    }
+  };
 
   return (
     <div
@@ -30,7 +31,7 @@ export default function MyActiveJobTable({MyJobList, className }) {
         className || ""
       }`}
     >
-            {MyJobList && MyJobList?.result_list &&
+      {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>
@@ -41,10 +42,14 @@ export default function MyActiveJobTable({MyJobList, className }) {
 
               {
                 <>
-                            {MyJobList && MyJobList?.result_list &&
+                  {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">
+                      <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">
@@ -58,55 +63,74 @@ export default function MyActiveJobTable({MyJobList, className }) {
                               <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                 {value.title}
                               </h1>
-                                                        <div>
+                              <div>{value.description}</div>
-                                                            {value.description}
-                                                        </div>
                               <span className="text-sm text-thin-light-gray">
-                                                        Price: <span className="text-purple">{value.price*0.01}</span>
+                                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>
+                                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>
+                                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>
+                                Send to:{" "}
+                                <span className="text-purple">
+                                  {" "}
+                                  {value.job_to}
+                                </span>
                               </span>
-
                             </div>
                           </div>
                         </td>
 
-
                         <td className="text-right py-4 px-2">
+                          <div className="flex justify-center items-center">
                             <button
                               type="button"
-                                                    onClick={()=>{setJobPopout({show:true, data:value})}}
+                              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} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} />
+          <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>
-            }
+      )}
-
-            {/* Active Job Popout */}
-            {jobPopout.show &&
-                <ActiveJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
-            }
-            {/* End of Active Job Popout */}
     </div>
   );
 }

src/components/MyActiveJobs/index.jsx

@@ -24,13 +24,13 @@ export default function MyActiveJobs(props) {
                 >
                   Active Job(s)
                 </span>
-
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
+              <div
-
+                onClick={() => filterHandler("today")}
-                            </div>
+                className="relative"
+              ></div>
             </div>
           </div>
           <MyActiveJobTable MyJobList={props.MyJobList} />

src/components/MyJobs/index.jsx

@@ -25,15 +25,19 @@ export default function MyJobs(props) {
                   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'>
+                <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
-
+                onClick={() => filterHandler("today")}
-                        </div>
+                className="relative"
+              ></div>
             </div>
           </div>
           <MyJobTable MyJobList={props.MyJobList} />

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

@@ -23,13 +23,13 @@ export default function MyTasks() {
                 >
                   My Tasks
                 </span>
-
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
+              <div
-
+                onClick={() => filterHandler("today")}
-                        </div>
+                className="relative"
+              ></div>
             </div>
           </div>
           <MyJobTable />

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";
@@ -9,22 +9,21 @@ import Accordion from "../Helpers/Accordion";
 export default function WalletHeader(props) {
   //  debugger;
   //props.myWalletList.result_list
+  let { pathname } = useLocation();
+  let navigate = useNavigate();
   return (
     <>
-            <div
+      <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">
-                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"/>
+            <Icons name="wallet" />
           </span>
-                    <p className="lg:text-xl text-lg font-bold text-white">
+          <p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
-                        Wallet
-                    </p>
           <span className="lg:block hidden">
-                  <Icons name="deep-plus"/>
+            <Icons name="deep-plus" />
           </span>
         </div>
         <div
@@ -39,16 +38,17 @@ export default function WalletHeader(props) {
           </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">
+                  <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
+                        <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 ">
-                                                    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="" />
-                                                    <img src={bank1} alt=""/>
                         </div>
                         <div className="name">
                           <p className="text-base text-dark-gray dark:text-white font-medium">
@@ -58,7 +58,7 @@ export default function WalletHeader(props) {
                       </div>
                       <div>
                         <p className="eth text-xl font-bold text-purple">
-                                                    {(value.amount*0.01).toFixed(2)} {value.code}
+                          {(value.amount * 0.01).toFixed(2)} {value.code}
                         </p>
                         <p className="usd text-base text-thin-light-gray text-right">
                           {/*(773.69 USD)*/}
@@ -163,13 +163,26 @@ export default function WalletHeader(props) {
             </ul>
             <div className="add-money-btn flex justify-center items-center mt-3">
               {/* <button
-                                onClick={() => props.addMoneyHandler()}
+                                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>
+              <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>
         </div>
@@ -183,5 +196,6 @@ export default function WalletHeader(props) {
       {/*    </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">
+              <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>
-        :
+        ) : 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,9 +225,7 @@ 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>
@@ -249,8 +248,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
               </ul>
             </div>
           </div>
-            )
+        )}
-      }
       </div>
       {/* signout area */}
       {sidebar ? (

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,12 +233,14 @@ 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 ? 
+        {!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">
@@ -248,9 +250,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
               </NavLink>
             </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>
@@ -360,9 +360,7 @@ export default function Sidebar({ 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>
@@ -392,9 +390,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
               </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");