src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -17,6 +17,7 @@ import {
   FamilyProfile,
   FamilyTasks,
   ProfileInfo,
+  FamilyPending,
 } from "./Tabs";
 
 export default function FamilyManageTabs({
@@ -29,6 +30,7 @@ export default function FamilyManageTabs({
     familyDetails: { loading: false, data: null },
     familyTasks: { loading: false, data: null },
     familyWaitList: { loading: false, data: null },
+    familyPending: { loading: false, data: null },
   });
   const [errMsg, setErrMsg] = useState("");
   const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
@@ -62,25 +64,30 @@ export default function FamilyManageTabs({
         familyDetails: { loading: true },
         familyTasks: { loading: true },
         familyWaitList: { loading: true },
+        familyPending: { loading: true },
       });
 
       const { family_uid } = accountDetails;
       const reqData = { family_uid };
 
-      const [familyRes, tasksRes, familyWaitRes] = await Promise.all([
-        apiCall.ManageFamily(reqData),
-        apiCall.ManageTasks(reqData),
-        apiCall.ManageFamilyWaitlist(),
-      ]);
+      const [familyRes, tasksRes, familyWaitRes, familyPending] =
+        await Promise.all([
+          apiCall.ManageFamily(reqData),
+          apiCall.ManageTasks(reqData),
+          apiCall.ManageFamilyWaitlist(),
+          apiCall.ManageFamilyPending(),
+        ]);
 
       const familyData = familyRes.data;
       const tasksData = tasksRes.data;
       const familyWaitData = familyWaitRes.data;
+      const familyPendingData = familyPending.data;
 
       if (
         familyData?.internal_return < 0 ||
         tasksData?.internal_return < 0 ||
-        familyWaitData?.internal_return < 0
+        familyWaitData?.internal_return < 0 ||
+        familyPendingData?.internal_return < 0
       )
         return;
 
@@ -88,12 +95,14 @@ export default function FamilyManageTabs({
         familyDetails: { loading: false, data: familyData },
         familyTasks: { loading: false, data: tasksData },
         familyWaitList: { loading: false, data: familyWaitData },
+        familyPending: { loading: false, data: familyPendingData },
       });
     } catch (error) {
       setDetails({
         familyDetails: { loading: false },
         familyTasks: { loading: false },
         familyWaitList: { loading: false },
+        familyPending: { loading: false },
       });
       setErrMsg("An error occurred");
       throw new Error(error);
@@ -109,8 +118,9 @@ export default function FamilyManageTabs({
   const tabs = [
     { id: 1, name: "Tasks" },
     { id: 2, name: "Waiting" },
-    { id: 3, name: "Account" },
-    { id: 4, name: "Profile" },
+    { id: 3, name: "Pending" },
+    { id: 4, name: "Account" },
+    { id: 5, name: "Profile" },
   ];
 
   const [tab, setTab] = useState(tabs[0].name);
@@ -131,6 +141,14 @@ export default function FamilyManageTabs({
     Waiting: (
       <FamilyWaitlist
         familyData={details.familyWaitList.data}
+        accountDetails={accountDetails}
+        loader={details.familyWaitList.loading}
+      />
+    ),
+    Pending: (
+      <FamilyPending
+        familyData={details.familyPending.data}
+        accountDetails={accountDetails}
         loader={details.familyWaitList.loading}
       />
     ),

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import dataImage2 from "../../../assets/images/data-table-user-2.png";
+import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
+
+export default function FamilyPending({
+  familyData,
+  className,
+  accountDetails,
+  loader,
+}) {
+  let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
+
+  let filteredFamilyData = familyData?.result_list?.filter(
+    (data) => data?.family_uid === accountDetails?.family_uid
+  );
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentPendingTasks = filteredFamilyData?.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 min-h-[520px] ${
+        className || ""
+      }`}
+    >
+      {filteredFamilyData && (
+        <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>
+              {
+                <>
+                  {currentPendingTasks.length > 0 ? (
+                    currentPendingTasks.map((value, index) => {
+                      let deliveryDate = value?.expire?.split(" ")[0];
+                      let thePrice = PriceFormatter(
+                        value?.price * 0.01,
+                        value?.currency_code,
+                        value?.currency
+                      );
+                      return (
+                        <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 w-full">
+                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
+                                <img
+                                  src={dataImage2}
+                                  alt="data"
+                                  className="w-full h-full"
+                                />
+                              </div>
+                              <div className="flex flex-col flex-[0.9]">
+                                <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 flex items-start gap-1">
+                                  Price:{" "}
+                                  <span className="text-purple">
+                                    {thePrice}
+                                  </span>
+                                </span>
+                                <div className="flex items-center gap-4">
+                                  <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">
+                                      {" "}
+                                      {deliveryDate}
+                                    </span>
+                                  </span>
+                                  <span className="text-sm text-thin-light-gray">
+                                    Sent to:{" "}
+                                    <span className="text-purple">
+                                      {" "}
+                                      {value.job_to}
+                                    </span>
+                                  </span>
+                                </div>
+                              </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>
+                      );
+                    })
+                  ) : (
+                    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                      <td className="p-2">No Pending Task!</td>
+                    </tr>
+                  )}
+                </>
+              }
+            </tbody>
+          </table>
+          {/* PAGINATION BUTTON */}
+          <PaginatedList
+            onClick={handlePagination}
+            prev={currentPage == 0}
+            next={currentPage + itemsPerPage >= filteredFamilyData.length}
+            data={filteredFamilyData}
+            start={indexOfFirstItem}
+            stop={indexOfLastItem}
+          />
+          {/* END OF PAGINATION BUTTON */}
+        </div>
+      )}
+
+      {/* Active Job Popout */}
+      {jobPopout.show && (
+        <PendingJobsPopout
+          details={jobPopout.data}
+          onClose={() => {
+            setJobPopout({ show: false, data: {} });
+          }}
+          situation={jobPopout.show}
+        />
+      )}
+      {/* End of Active Job Popout */}
+    </div>
+  );
+}

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -1,29 +1,26 @@
 import { useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
 import { handlePagingFunc, PaginatedList } from "../../Pagination";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import SuggestTask from "../../FamilyPopup/SuggestTask";
 
-const FamilyWaitlist = ({ familyData, className, loader }) => {
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
+const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
   const [popUp, setPopUp] = useState({ show: false, data: {} });
-  
+
+  let filteredFamilyData = familyData?.result_list?.filter(
+    (data) => data?.family_uid === accountDetails?.family_uid
+  );
+
   const [currentPage, setCurrentPage] = useState(0);
   const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
   const indexOfFirstItem = currentPage;
   const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = familyData?.result_list?.slice(
+  const currentTask = filteredFamilyData?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
 
   const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
 
-  const popUpHandler = () => {
-    setPopUp((prev) => !prev);
-  };
-
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
@@ -36,7 +33,7 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
         </div>
       ) : (
         <>
-          {familyData && familyData.result_list && (
+          {filteredFamilyData && (
             <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>
@@ -81,7 +78,9 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
                         </td>
                         <td className="text-right py-4 px-2">
                           <button
-                            onClick={() => setPopUp({ show: true, data: value })}
+                            onClick={() =>
+                              setPopUp({ show: true, data: value })
+                            }
                             className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           >
                             View
@@ -95,10 +94,8 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
               <PaginatedList
                 onClick={handlePagination}
                 prev={currentPage === 0}
-                next={
-                  currentPage + itemsPerPage >= familyData?.result_list.length
-                }
-                data={familyData?.result_list}
+                next={currentPage + itemsPerPage >= filteredFamilyData?.length}
+                data={filteredFamilyData}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />
@@ -106,7 +103,15 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
           )}
         </>
       )}
-      {popUp.show && <SuggestTask details={popUp.data} onClose={() => {setPopUp({ show: false, data: {} })}} situation={popUp.show} />}
+      {popUp.show && (
+        <SuggestTask
+          details={popUp.data}
+          onClose={() => {
+            setPopUp({ show: false, data: {} });
+          }}
+          situation={popUp.show}
+        />
+      )}
     </div>
   );
 };

src/components/FamilyAcc/Tabs/index.js

@@ -2,6 +2,7 @@ import FamilyAccount from "./FamilyAccount";
 import FamilyProfile from "./FamilyProfile";
 import FamilyTasks from "./FamilyTasks";
 import FamilyWaitlist from "./FamilyWaitlist";
+import FamilyPending from "./FamilyPending";
 import ProfileInfo from "./ProfileInfo";
 
 export {
@@ -9,5 +10,6 @@ export {
   FamilyProfile,
   FamilyTasks,
   FamilyWaitlist,
+  FamilyPending,
   ProfileInfo,
 };

src/services/UsersService.js

@@ -264,6 +264,18 @@ class usersService {
     return this.postAuxEnd("/familywaitingtasks", postData);
   }
 
+  ManageFamilyPending() {
+    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);
+  }
+
   // Task for the person doing the job
   getMyActiveTaskList() {
     var postData = {