Link task manage button to manage job page

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -60,7 +60,7 @@ function ActiveJobs(props) {
                 <button
                   type="button"
                   className="text-[#374557] border border-sky-blue p-1 rounded-full"
-                  onClick={() => navigate('/my-active-jobs', {replace: true})}
+                  onClick={() => navigate(props.details.pathname, {replace: true})}
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -78,8 +78,8 @@ function ActiveJobs(props) {
               </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="mt-2 w-full flex flex-col-reverse lg:flex-row lg:justify-between lg:items-start lg:space-x-2">
-                <div className="my-2 lg:my-0">
+                <div className="w-full lg:w-2/3 my-2 lg:my-0">
                   <p className="text-base text-slate-700 dark:text-black">
                     {props.details?.contract && props.details.contract}
                   </p>
@@ -88,23 +88,25 @@ function ActiveJobs(props) {
                     {props.details?.description && props.details.description}
                   </p>
                   <p className="text-base text-sky-blue">Delivery Detail</p>
+                  <div className="">
+                    <p className="text-base text-slate-700 dark:text-black">
+                      <span className="font-semibold">Due: </span>
+                      {props.details?.delivery_date &&
+                        props.details.delivery_date.split(" ")[0]}
+                    </p>
+                    <p className="text-base text-slate-700 dark:text-black">
+                      {props.details?.delivery_date &&
+                        props.details.delivery_date.split(" ")[1]}
+                    </p>
+                    <p className="text-base text-slate-700 dark:text-black">
+                      {props.details?.timeline_days && props.details.timeline_days} day(s)
+                    </p>
+                  </div>
                 </div>
-                <div className="">
+                <div className="w-full lg:w-1/3 lg:text-center">
                   <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>
-                    {props.details?.delivery_date &&
-                      props.details.delivery_date.split(" ")[0]}
-                  </p>
-                  <p className="text-base text-slate-700 dark:text-black">
-                    {props.details?.delivery_date &&
-                      props.details.delivery_date.split(" ")[1]}
-                  </p>
-                  <p className="text-base text-slate-700 dark:text-black">
-                    {props.details?.timeline_days && props.details.timeline_days} day(s)
-                  </p>
                 </div>
               </div>
             </div>

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
 
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 
 export default function MyActiveJobTable({ MyJobList, className }) {
   const navigate = useNavigate();
+  let {pathname} = useLocation()
 
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
@@ -101,7 +102,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                               type="button"
                               onClick={() => {
                                 navigate("/manage-active-job", {
-                                  state: value,
+                                  state: {...value, pathname},
                                 });
                               }}
                               className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"

src/components/MyTasks/MyJobTable.jsx

@@ -6,7 +6,12 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
+import {useNavigate, useLocation} from 'react-router-dom'
+
 export default function MyJobTable({ className }) {
+  let navigate = useNavigate()
+  let {pathname} = useLocation()
+
   const [tasksData, setTasksData] = useState(null);
   const [loader, setLoader] = useState(true);
 
@@ -80,7 +85,7 @@ export default function MyJobTable({ className }) {
                         <span className="text-sm text-thin-light-gray">
                           Price:
                           <span className="text-purple ml-1">
-                            {task?.price}
+                            {Number(task?.price) * 0.01}
                           </span>
                         </span>
                         <span className="text-sm text-thin-light-gray">
@@ -110,6 +115,11 @@ export default function MyJobTable({ className }) {
                   <div className="text-right py-4 px-2">
                     <button
                       type="button"
+                      onClick={() => {
+                        navigate("/manage-active-job", {
+                          state: {...task, pathname},
+                        });
+                      }}
                       className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                     >
                       Manage

src/components/Partials/Header.jsx

@@ -505,9 +505,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 </div>
                 <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-2">
                   <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
-                  Surname
+                  Fullname
                   </h3>
-                  <p className="text-sm text-gray-400 dark:text-white hover:text-sky-blue cursor-pointer">broklinslam_75@gamil.com</p>
+                  <p className="text-base text-gray-400 dark:text-white hover:text-sky-blue cursor-pointer">{`${firstname} ${lastname}`}</p>
                 </div>
                 <div className="content">
                   <ul className="px-7">

src/components/jobPopout/DeleteJobPopout.jsx

@@ -100,7 +100,7 @@ function DeleteJobPopout({details, onClose, situation}) {
                   {details.title}
                 </p>
                 <p className="text-lg tracking-wide text-dark-gray dark:text-white">
-                  Price: {details.price}
+                  Price: {details.price * 0.01}
                 </p>
                 <p className="text-lg tracking-wide text-dark-gray dark:text-white">
                   Duration: {details.timeline_days} day(s)

src/components/jobPopout/EditJobPopout.jsx

@@ -163,7 +163,7 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
                           type="number"
                           name="price"
                           // placeholder="Please Enter Amount"
-                          value={props.values.price}
+                          value={props.values.price * 0.01}
                           inputHandler={props.handleChange}
                           blurHandler={props.handleBlur}
                         />

src/views/ManageActiveJobs.jsx

@@ -32,7 +32,8 @@ function ManageActiveJobs() {
 
   useEffect(()=>{
     if(!state){
-      navigate('/my-active-jobs', {replace: true})
+      navigate('/', {replace: true})
+      return
     }
     setDetails(state)
     getActiveJobMesList()