Delete/Edit Btn Position Changed

src/Routers.jsx

@@ -35,6 +35,7 @@ import MyActiveJobsPage from "./views/MyActiveJobsPage";
 import FamilyAccPage from "./views/FamilyAccPage";
 import StartJob from "./components/MyJobs/StartJob";
 import AddJobPage from "./views/AddJobPage";
+import MyPendingJobsPage from "./views/MyPendingJobsPage";
 
 export default function Routers() {
   return (
@@ -79,6 +80,7 @@ export default function Routers() {
           <Route exact path="/myjobs" element={<MyJobsPage />} />
           <Route exact path="/add-job" element={<AddJobPage />} />
           <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
+          <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
           <Route

src/components/FamilyAcc/index.jsx

@@ -134,7 +134,7 @@ export default function FamilyAcc() {
           {/* heading */}
           <div className="sm:flex justify-between items-center mb-6">
             <div className="mb-5 sm:mb-0">
-              <h1 className="text-26 font-bold inline-flex gap-2 text-dark-gray dark:text-white">
+              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
                 <span
                   className={`${selectTab === "today" ? "block" : "hidden"}`}
                 >
@@ -143,9 +143,9 @@ export default function FamilyAcc() {
                 <button
                   onClick={popUpHandler}
                   type="button"
-                  className="text-purple"
+                  className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
                 >
-                  (Add)
+                  Add
                 </button>
               </h1>
             </div>
@@ -266,7 +266,8 @@ const FamilyForm = ({
             <button
               type="button"
               onClick={onClick}
-              className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+              // className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+              className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
             >
               {loader ? (
                 <div className="signup btn-loader"></div>

src/components/MyActiveJobs/index.jsx

@@ -22,7 +22,7 @@ export default function MyActiveJobs(props) {
                 <span
                     className={`${selectTab === "today" ? "block" : "hidden"}`}
                 >
-                  Current Job(s)
+                  Active Job(s)
                 </span>
 
                             </h1>

src/components/MyJobs/MyJobTable.jsx

@@ -51,8 +51,8 @@ export default function MyJobTable({MyJobList, className }) {
                 <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
                     <tbody>
                     <tr className="text-base text-thin-light-gray border-b  default-border-b dark:border-[#5356fb29] ottom ">
-                        <td className="py-8">.</td>
+                        <td className="py-1">.</td>
-                        <td className="py-4 text-right">.</td>
+                        <td className="py-1 text-right">.</td>
                     </tr>
 
                     {selectedCategory === "All Categories" ? (
@@ -62,43 +62,44 @@ export default function MyJobTable({MyJobList, className }) {
                                 currentJobList.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-9">
-                                            <div className="flex space-x-2 items-center job-items">
+                                            <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
-
+                                                <div className="flex space-x-2 items-center job-items">
-                                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                                    <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                                                    <img
+                                                        <img
-                                                        src={dataImage2}
+                                                            src={dataImage2}
-                                                        alt="data"
+                                                            alt="data"
-                                                        className="w-full h-full"
+                                                            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">
+                                                    <div className="flex flex-col">
-                                                    Price: <span className="text-purple">{value.price*0.01}</span>
+                                                        <h1 className="font-bold text-xl text-dark-gray dark:text-white">
-                                                    </span>
+                                                            {value.title}
-                                                    <span className="text-sm text-thin-light-gray">
+                                                        </h1>
-                                                    Duration:   <span className="text-purple"> {value.timeline_days} day(s)</span>
+                                                        <div>
-                                                    </span>
+                                                            {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>
 
+                                                    </div>
                                                 </div>
-                                                <div className="job-sub-menu">
+
-                                                    <button type="button" className="w-20 h-11" onClick={()=>{setDeleteJobPopout({show:true, data:value})}}>[Delete]</button> |
+                                                <div className="min-w-[110px] max-w-[110px] bg-yellow-300 mx-2 rounded-md flex flex-nowrap space-x-2 justify-center items-center self-end">
-                                                    <button  type="button" className="w-20 h-11">Edit</button>
+                                                    <button type="button" className="p-2 w-[60px] h-11" onClick={()=>{setDeleteJobPopout({show:true, data:value})}}>[Delete]</button>
+                                                    <span>|</span> 
+                                                    <button  type="button" className="p-2 w-[40px] h-11">Edit</button>
                                                 </div>
                                             </div>
 
                                         </td>
 
-
+                                        <td className="text-right py-9 px-2">
-                                        <td className="text-right py-3 px-2">
                                             <button
                                                 type="button"
-                                                // onClick={()=>{setJobPopout({show:true, data:value})}}
                                                 onClick={()=>{setJobPopout({show:true, data:value})}}
                                                 className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                             >

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -0,0 +1,112 @@
+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 { handlePagingFunc } from "../Pagination/HandlePagination";
+
+export default function MyPendingJobTable({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 currentActiveJobList = MyJobList?.result_list?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+        handlePagingFunc(e,setCurrentPage)
+    }
+
+    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>*/}
+
+                    {
+                        <>
+                            {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>
+            }
+
+            {/* 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/MyPendingJobs/index.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+import MyPendingJobTable from "./MyPendingJobTable";
+
+export default function MyPendingJobs(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">
+                <span
+                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                >
+                  Pending Job(s)
+                </span>
+
+                            </h1>
+                        </div>
+                        <div className="slider-btns flex space-x-4">
+                            <div onClick={() => filterHandler("today")} className="relative">
+
+                            </div>
+                        </div>
+                    </div>
+                    <MyPendingJobTable MyJobList={props.MyJobList} />
+                </div>
+            </div>
+        </Layout>
+    );
+}

src/components/MyWallet/TransferFund.jsx

@@ -110,6 +110,7 @@ function TransferFund({ payment, wallet }) {
   useEffect(() => {
     getRecipients();
   }, []);
+  
   return (
     <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
       <div className="lg:w-1/2 w-full mb-10 lg:mb-0">

src/components/Partials/Sidebar.jsx

@@ -279,7 +279,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   </li>
                   <li className="item group">
                     <NavLink
-                      to="/my-active-jobs"
+                      to="/my-pending-jobs"
                       className={`nav-item flex items-center ${
                         ((navData) => (navData.isActive ? "active" : ""),
                         sidebar ? "justify-start space-x-3.5" : "justify-center")

src/services/UsersService.js

@@ -107,17 +107,17 @@ class usersService {
     /*
     getMyActiveJobList  - List of jobs active under this user
      */
-    getMyActiveJobList(){
+    // getMyActiveJobList(){
-        var postData = {
+    //     var postData = {
-            uuid: localStorage.getItem("uid"),
+    //         uuid: localStorage.getItem("uid"),
-            member_id: localStorage.getItem("member_id"),
+    //         member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token"),
+    //         sessionid: localStorage.getItem("session_token"),
-            page:0,
+    //         page:0,
-            offset:0,
+    //         offset:0,
-            limit :100
+    //         limit :100
-        };
+    //     };
-        return this.postAuxEnd("/getjobsdata", postData);
+    //     return this.postAuxEnd("/getjobsdata", postData);
-    }
+    // }
     getHeroJBanners(){
         var postData = {
             uuid: localStorage.getItem("uid"),
@@ -207,9 +207,20 @@ class usersService {
             offset:0,
             limit :100
         };
-        return this.postAuxEnd("/jobmanageroffers", postData);
+        return this.postAuxEnd("/jobmanageractive", postData);
     }
 
+    getMyPendingJobList(){
+        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("/jobmanageroffers", postData);
+    }
     getMyJobList(){
         var postData = {
             uuid: localStorage.getItem("uid"),

src/views/MyActiveJobsPage.jsx

@@ -7,7 +7,7 @@ export default function MyActiveJobsPage() {
 
     const [MyJobList, setMyJobList] = useState([]);
     const api = new usersService();
-
+//TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive
     const getMyJobList = async () => {
         try {
             const res = await api.getMyActiveJobList();

src/views/MyPendingJobsPage.jsx

@@ -0,0 +1,30 @@
+import React, { useContext,useState, useEffect } from "react";
+import usersService from "../services/UsersService";
+//import MyJobs from "../components/MyJobs";
+import MyActiveJobs from "../components/MyActiveJobs";
+import MyPendingJobs from "../components/MyPendingJobs";
+
+export default function MyPendingJobsPage() {
+
+    const [MyJobList, setMyJobList] = useState([]);
+    const api = new usersService();
+
+    const getMyJobList = async () => {
+        try {
+            const res = await api.getMyPendingJobList();
+            setMyJobList(res.data);
+        } catch (error) {
+            console.log("Error getting mode");
+        }
+    };
+    useEffect(() => {
+        getMyJobList();
+    }, []);
+
+    // debugger;
+    return (
+        <>
+            <MyPendingJobs MyJobList={MyJobList} />
+        </>
+    );
+}