Correct name shows under menu and current ammount under delete jop popup page

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -67,7 +67,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                               <span className="text-sm text-thin-light-gray">
                                 Price:{" "}
                                 <span className="text-purple">
-                                  {value.price * 0.01}
+                                  {(value.price * 0.01).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+'.00'}
                                 </span>
                               </span>
                               <span className="text-sm text-thin-light-gray">

src/components/MyJobs/MyJobTable.jsx

@@ -7,13 +7,15 @@ import SelectBox from "../Helpers/SelectBox";
 import JobListPopout from "../jobPopout/JobListPopout";
 import DeleteJobPopout from "../jobPopout/DeleteJobPopout";
 
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
 import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import EditJobPopOut from "../jobPopout/EditJobPopout";
 import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
 
-export default function MyJobTable({ MyJobList, className }) {
+export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   const [myCountry, setCountries] = useState("");
   const {
     userDetails: { country },
@@ -61,7 +63,7 @@ export default function MyJobTable({ MyJobList, className }) {
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentJobList = MyJobList?.result_list?.slice(
+  const currentJobList = MyJobList?.data?.result_list?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -89,7 +91,10 @@ export default function MyJobTable({ MyJobList, className }) {
           contentBodyClasses="w-auto min-w-max"
         />
       </div>
-      {MyJobList && MyJobList?.result_list && (
+      {MyJobList.loading ? 
+      <LoadingSpinner size='16' color='sky-blue' />
+      :
+      (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
           <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
             <tbody>
@@ -101,8 +106,8 @@ export default function MyJobTable({ MyJobList, className }) {
               {selectedCategory === "All Categories" ? (
                 <>
                   {MyJobList &&
-                    MyJobList?.result_list &&
+                    MyJobList?.data?.result_list &&
-                    MyJobList.result_list.length > 0 &&
+                    MyJobList.data?.result_list.length > 0 &&
                     currentJobList.map((value, index) => (
                       <tr
                         key={index}
@@ -126,7 +131,7 @@ export default function MyJobTable({ MyJobList, className }) {
                                 <span className="text-sm text-thin-light-gray">
                                   Price:{" "}
                                   <span className="text-purple">
-                                    {value.price * 0.01}
+                                    {(value.price * 0.01).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+'.00'}
                                   </span>
                                 </span>
                                 <span className="text-sm text-thin-light-gray">
@@ -197,11 +202,11 @@ export default function MyJobTable({ MyJobList, className }) {
             prev={currentPage == 0 ? true : false}
             next={
               currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-              MyJobList?.result_list?.length
+              MyJobList?.data?.result_list?.length
                 ? true
                 : false
             }
-            data={MyJobList?.result_list}
+            data={MyJobList?.data?.result_list}
             start={indexOfFirstItem}
             stop={indexOfLastItem}
           />
@@ -228,6 +233,7 @@ export default function MyJobTable({ MyJobList, className }) {
           onClose={() => {
             setDeleteJobPopout({ show: false, data: {} });
           }}
+          reloadJobList={reloadJobList}
           situation={deleteJobPopout.show}
         />
       )}

src/components/MyJobs/index.jsx

@@ -40,7 +40,7 @@ export default function MyJobs(props) {
               ></div>
             </div>
           </div>
-          <MyJobTable MyJobList={props.MyJobList} />
+          <MyJobTable MyJobList={props.MyJobList} reloadJobList={props.reloadJobList} />
         </div>
       </div>
     </Layout>

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -62,7 +62,7 @@ export default function MyPendingJobTable({MyJobList, className }) {
                                                             {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).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+'.00'}</span>
                                                         </span>
                                                         <span className="text-sm text-thin-light-gray">
                                                         Duration:   <span className="text-purple"> {value.timeline_days} day(s)</span>

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

@@ -3,8 +3,11 @@ import ModalCom from '../Helpers/ModalCom'
 import { useNavigate } from 'react-router-dom'
 import usersService from '../../services/UsersService'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
+import { useDispatch } from 'react-redux'
+import { tableReload } from '../../store/TableReloads'
 
 function DeleteJobPopout({details, onClose, situation}) {
+  let dispatch = useDispatch()
     const navigate = useNavigate()
     const ApiCall = new usersService()
 
@@ -26,10 +29,10 @@ function DeleteJobPopout({details, onClose, situation}) {
             }
             setRequestStatus({laoding: false, status:true, message: 'Job deleted successfully'})
             setTimeout(()=>{
-                navigate('/myjobs', {replace: true})
+              dispatch(tableReload({type:'JOBTABLE'}))
-                onClose()
+              navigate('/myjobs', {replace: true})
-                window.location.reload()
+              onClose()
-            }, 1000)
+          }, 1000)
         }).catch(error => {
             setRequestStatus({laoding: false, status:false, message: 'Opps! something went wrong, try again'})
         }).finally(()=>{
@@ -97,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).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+'.00'}
                 </p>
                 <p className="text-lg tracking-wide text-dark-gray dark:text-white">
                   Duration: {details.timeline_days} day(s)

src/components/jobPopout/EditJobPopout.jsx

@@ -7,7 +7,13 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import usersService from "../../services/UsersService";
 import { useNavigate } from "react-router-dom";
 
+import { tableReload } from "../../store/TableReloads";
+import { useDispatch } from "react-redux";
+
 const EditJobPopOut = ({ details, onClose, situation, country }) => {
+
+  const dispatch = useDispatch()
+
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
     status: false,
@@ -68,6 +74,7 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
         if (data?.internal_return < 0) return;
         setRequestStatus({ loading: false, message: null });
         setTimeout(() => {
+          dispatch(tableReload({type:'JOBTABLE'}))
           navigate("/myjobs", { replace: true });
           onClose();
         }, 1000);

src/components/jobPopout/PendingJobsPopout.jsx

@@ -7,10 +7,10 @@ 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">
-        <div className="logout-modal-header w-full flex items-center justify-end lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
+        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
-          {/* <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            Confirm
+            Manage Pending Item
-          </h1> */}
+          </h1>
           <button
             type="button"
             className="text-[#374557] dark:text-red-500"
@@ -73,7 +73,7 @@ function PendingJobsPopout({details, onClose, situation}) {
             <div className='my-2 md:flex'>
               <Detail 
                   label='Price' 
-                  value={`${details.price*0.01} ${details.currency}`} 
+                  value={`${(details.price*0.01).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+'.00'} ${details.currency}`} 
               />
             </div>
   

src/store/TableReloads.js

@@ -0,0 +1,29 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  jobListTable: false,
+  pendingListTable: false
+};
+
+export const tableReloadSlice = createSlice({
+  name: "tableReload",
+  initialState,
+  reducers: {
+    tableReload: (state, action) => {
+      switch(action.payload.type){
+        case 'JOBTABLE':
+          state.jobListTable = !state.jobListTable;
+          return
+        case 'PENDINGTABLE' :
+          state.pendingListTable = !state.pendingListTable;
+          return
+        default:
+          return state
+      }
+    },
+  },
+});
+
+export const { tableReload } = tableReloadSlice.actions;
+
+export default tableReloadSlice.reducer;

src/store/store.js

@@ -3,11 +3,13 @@ import drawerReducer from "./drawer";
 
 import userDetailReducer from "./UserDetails";
 import jobReducer from "./jobLists";
+import tableReloadReducer from "./TableReloads";
 
 export default configureStore({
   reducer: {
     drawer: drawerReducer,
     userDetails: userDetailReducer,
-    jobLists: jobReducer
+    jobLists: jobReducer,
+    tableReload: tableReloadReducer
   },
 });

src/views/MyJobsPage.jsx

@@ -4,25 +4,31 @@ import React, { useContext,useState, useEffect } from "react";
 // import UsersService from "../services/UsersService";
 import usersService from "../services/UsersService";
 import MyJobs from "../components/MyJobs";
+import { useSelector } from "react-redux";
 
 export default function MyJobsPage() {
 
+    const {jobListTable} = useSelector((state) => state.tableReload)
+
     // const userApi = new usersService();
     // const activeJobList  = userApi.getMyJobList();
-    const [MyJobList, setMyJobList] = useState([]);
+    const [MyJobList, setMyJobList] = useState({loading: true, data:[]});
     const api = new usersService();
 
     const getMyJobList = async () => {
+        setMyJobList({loading: true, data:[]})
         try {
             const res = await api.getMyJobList();
-            setMyJobList(res.data);
+            setMyJobList({loading: false, data:res.data})
+            // setMyJobList(res.data);
         } catch (error) {
+            setMyJobList({loading: false, data:[]})
             console.log("Error getting mode");
         }
     };
     useEffect(() => {
         getMyJobList();
-    }, []);
+    }, [jobListTable]);
 
    // debugger;
     return (