added more info to family offer card info

src/components/Cards/FamilyActiveJobsCard.jsx

@@ -8,7 +8,6 @@ import Icons from "../Helpers/Icons";
 export default function FamilyActiveJobsCard({ datas, hidden = false }) {
 
     let { pathname } = useLocation();
-    console.log('TESTING11111',datas)
 
     const [imageUrl, setImageUrl] = useState("");
     const [addFavorite, setValue] = useState(false);

src/components/Cards/FamilyOfferCard.jsx

@@ -36,7 +36,7 @@ export default function FamilyOfferCard({ datas, hidden = false, setOfferPopout
                         {datas.title}
                     </h1>
                     {/* countdown */}
-                    <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
+                    {/* <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
                         <div className="flex flex-col justify-between">
                             <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                                 Task Code
@@ -54,6 +54,47 @@ export default function FamilyOfferCard({ datas, hidden = false, setOfferPopout
                                 <CountDown lastDate={datas.expire} />
                             </p>
                         </div>
+                    </div> */}
+                    <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
+                        <div className="grid grid-cols-2 gap-2">
+                            <div className="flex flex-col justify-between items-center border-r-2">
+                                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                                    Task Code
+                                </p>
+                                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                    {datas.contract}
+                                </p>
+                            </div>
+                            <div className="flex flex-col justify-between items-center">
+                                <p className="text-sm text-red-500 tracking-wide">
+                                    Expires
+                                </p>
+                                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                    <CountDown lastDate={datas.expire} />
+                                </p>
+                            </div>
+                        </div>
+
+                        <hr className="my-2" />
+
+                        <div className="grid grid-cols-2 gap-2">
+                            <div className="flex flex-col justify-between items-center border-r-2">
+                                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                                    Reward
+                                </p>
+                                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                    {thePrice}
+                                </p>
+                            </div>
+                            <div className="flex flex-col justify-between items-center">
+                                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                                    Timeline
+                                </p>
+                                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                    {`${datas.timeline_days} day(s)`}
+                                </p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -17,7 +17,6 @@ import {
   FamilyProfile,
   FamilyTasks,
   ProfileInfo,
-  FamilyPending,
 } from "./Tabs";
 
 export default function FamilyManageTabs({
@@ -30,7 +29,6 @@ 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);
@@ -64,30 +62,25 @@ 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, familyPending] =
-        await Promise.all([
-          apiCall.ManageFamily(reqData),
-          apiCall.ManageTasks(reqData),
-          apiCall.ManageFamilyWaitlist(),
-          apiCall.ManageFamilyPending(),
-        ]);
+      const [familyRes, tasksRes, familyWaitRes] = await Promise.all([
+        apiCall.ManageFamily(reqData),
+        apiCall.ManageTasks(reqData),
+        apiCall.ManageFamilyWaitlist(),
+      ]);
 
       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 ||
-        familyPendingData?.internal_return < 0
+        familyWaitData?.internal_return < 0
       )
         return;
 
@@ -95,14 +88,12 @@ 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);
@@ -118,9 +109,8 @@ export default function FamilyManageTabs({
   const tabs = [
     { id: 1, name: "Tasks" },
     { id: 2, name: "Waiting" },
-    { id: 3, name: "Pending" },
-    { id: 4, name: "Account" },
-    { id: 5, name: "Profile" },
+    { id: 3, name: "Account" },
+    { id: 4, name: "Profile" },
   ];
 
   const [tab, setTab] = useState(tabs[0].name);
@@ -141,14 +131,6 @@ 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

@@ -1,154 +0,0 @@
-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,26 +1,29 @@
 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, accountDetails, loader }) => {
+const FamilyWaitlist = ({ familyData, className, loader }) => {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
   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 = filteredFamilyData?.slice(
+  const currentTask = familyData?.result_list?.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 ${
@@ -33,7 +36,7 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
         </div>
       ) : (
         <>
-          {filteredFamilyData && (
+          {familyData && familyData.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>
@@ -78,9 +81,7 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, 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
@@ -94,8 +95,10 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
               <PaginatedList
                 onClick={handlePagination}
                 prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= filteredFamilyData?.length}
-                data={filteredFamilyData}
+                next={
+                  currentPage + itemsPerPage >= familyData?.result_list.length
+                }
+                data={familyData?.result_list}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />
@@ -103,15 +106,7 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, 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,7 +2,6 @@ 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 {
@@ -10,6 +9,5 @@ export {
   FamilyProfile,
   FamilyTasks,
   FamilyWaitlist,
-  FamilyPending,
   ProfileInfo,
 };

src/services/UsersService.js

@@ -264,18 +264,6 @@ 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 = {