added breadcrumb for no pending task

src/components/FamilyAcc/FamilyActivities.jsx

@@ -23,7 +23,7 @@ export default function FamilyActivities() {
                 <span className={``}>Tasks & Chores</span>
               </h1>
             </div>
-            <Link className="flex items-center gap-2" to="/acc-family">
+            <Link className="item-content relative text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]" to="/acc-family">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"

src/components/FamilyAcc/FamilyPendingOffer.jsx

@@ -26,17 +26,6 @@ export default function FamilyPendingOffer() {
     },[])
     return (
         <Layout>
-            <div className="mb-5">
-                <CustomBreadcrumb 
-                title = {'Ready to Start'}
-                breadcrumb={
-                    [
-                    { link: "/", title: "Home" },
-                    { link: "/pending", title: "Pending", active: true},
-                    ]
-                }
-                />
-            </div>
             {myOffersList.loading ?
             <div className='w-full flex justify-center items-center rounded-2xl bg-white'>
                 <LoadingSpinner size='10' color='sky-blue' height='h-[20rem]'  />
@@ -49,9 +38,22 @@ export default function FamilyPendingOffer() {
                 className="mb-10" 
             />
             :
-            <div className='w-full h-[30rem] bg-white dark:bg-dark-white flex justify-center items-center rounded-2xl'>
+            <>
-                <p className='text-black dark:text-white'>No Record Found!</p>
+                <div className="mb-6">
-            </div>
+                    <CustomBreadcrumb 
+                    title = {'Ready to Start'}
+                    breadcrumb={
+                        [
+                        { link: "/", title: "Home" },
+                        { link: "/pending", title: "Pending", active: true},
+                        ]
+                    }
+                    />
+                </div>
+                <div className='w-full h-[30rem] bg-white dark:bg-dark-white flex justify-center items-center rounded-2xl'>
+                    <p className='text-black dark:text-white'>No Record Found!</p>
+                </div>
+            </>
             }
         </Layout>
     )

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -1,314 +1,282 @@
-import React, {
+import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
-    Suspense,
+import { apiConst } from "../../lib/apiConst";
-    lazy,
+import usersService from "../../services/UsersService";
-    useEffect,
+import LoadingSpinner from "../Spinners/LoadingSpinner";
-    useMemo,
+import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
-    useRef,
-    useState,
-  } from "react";
-  import { useReactToPrint } from "react-to-print";
-  import localImgLoad from "../../lib/localImgLoad";
-  import usersService from "../../services/UsersService";
-  import LoadingSpinner from "../Spinners/LoadingSpinner";
-  import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
-  import FamilyWallet from "./Tabs/FamilyWallet";
-  import { apiConst } from "../../lib/apiConst";
 
-  // Lazy Imports for components
+// Lazy Imports for components
-  const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
+const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
-  const FamilyAccount = lazy(() => import("./Tabs/FamilyAccount"));
+const FamilyTasks = lazy(() => import("./Tabs/FamilyNewTasks"));
-  const FamilyProfile = lazy(() => import("./Tabs/FamilyProfile"));
+const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));
-  const FamilyTasks = lazy(() => import("./Tabs/FamilyTasks"));
-  const FamilyPending = lazy(() => import("./Tabs/FamilyPending"));
 
-  export default function FamilyTableNew({
+export default function FamilyTableNew({
-    className,
+  className,
-    accountDetails,
+  accountDetails,
-    listReload,
+  listReload,
-    loader,
+  loader,
-  }) {
+}) {
-    // Initial state for family details
+  // Initial state for family details
-    const initialDetailState = {
+  const initialDetailState = {
-      loading: false,
+    loading: false,
-      data: null,
+    data: null,
-    };
+  };
   // console.log('accountDetails',accountDetails)
-    // State for family details, tasks, waitlist, and pending
+  // State for family details, tasks, waitlist, and pending
-    const [details, setDetails] = useState({
+  const [details, setDetails] = useState({
+    familyDetails: { ...initialDetailState },
+    familyTasks: { ...initialDetailState },
+    familyWaitList: { ...initialDetailState },
+    familyPending: { ...initialDetailState },
+  });
+
+  // Function to reset family details, tasks, waitlist, and pending
+  const resetDetails = () => {
+    setDetails({
       familyDetails: { ...initialDetailState },
       familyTasks: { ...initialDetailState },
       familyWaitList: { ...initialDetailState },
       familyPending: { ...initialDetailState },
     });
+  };
 
-    // Function to reset family details, tasks, waitlist, and pending
+  const [updatePage, setUpdatePage] = useState(false); // State to determine when to update the page
-    const resetDetails = () => {
-      setDetails({
-        familyDetails: { ...initialDetailState },
-        familyTasks: { ...initialDetailState },
-        familyWaitList: { ...initialDetailState },
-        familyPending: { ...initialDetailState },
-      });
-    };
 
-    const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page
+  // State for family task data
+  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
 
-    // State for family task data
+  // State for active task
-    const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
+  const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
 
-    // State for active task
+  // State for error messages
-    const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
+  const [errMsg, setErrMsg] = useState("");
 
-    // State for error messages
+  // State for family task popout
-    const [errMsg, setErrMsg] = useState("");
+  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
 
-    // State for family task popout
+  // Create an instance of the usersService class
-    const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+  const apiCall = useMemo(() => new usersService(), []);
 
-    // Create an instance of the usersService class
+  // Function to handle toggling the family task popout
-    const apiCall = useMemo(() => new usersService(), []);
+  const familyPopUpHandler = () => {
+    setFamilyTaskPopout((prev) => !prev);
+  };
 
-    // Function to handle toggling the family task popout
+  // Array of tab names
-    const familyPopUpHandler = () => {
+  const tabs = [
-      setFamilyTaskPopout((prev) => !prev);
+    { id: 1, name: "Tasks" },
-    };
+    { id: 2, name: "Waiting" },
+    { id: 3, name: "Pending" },
+  ];
 
+  // State for the currently selected tab
+  const [tab, setTab] = useState(tabs[0].name);
 
-    // Ref for the account section
+  // Function to handle tab changes
-    const accountRef = useRef();
+  const tabHandler = (value) => {
+    setTab(value);
+  };
 
-    // React-to-Print hook for handling printing
+  // Object that maps tab names to their corresponding components
-    const useHandlePrint = useReactToPrint({
+  const tabComponents = {
-      content: () => accountRef.current,
+    Tasks: (
-    });
-  
-    // Array of tab names
-    const tabs = [
-      { id: 1, name: "Tasks" },
-      { id: 2, name: "Waiting" },
-      { id: 3, name: "Pending" },
-    ];
-  
-    // State for the currently selected tab
-    const [tab, setTab] = useState(tabs[0].name);
-  
-    // Function to handle tab changes
-    const tabHandler = (value) => {
-      setTab(value);
-    };
-  
-    // Object that maps tab names to their corresponding components
-    const tabComponents = {
-      Tasks: (
-        <FamilyTasks
-          className={className}
-          loader={details.familyTasks.loading}
-          familyData={details.familyTasks.data}
-          accountDetails={accountDetails}
-        />
-      ),
-      Waiting: (
-        <FamilyWaitlist
-          familyData={details.familyWaitList.data}
-          accountDetails={accountDetails}
-          loader={details.familyWaitList.loading}
-        />
-      ),
-      Pending: (
-        <FamilyPending
-          familyData={details.familyPending.data}
-          accountDetails={accountDetails}
-          loader={details.familyPending.loading}
-        />
-      ),
-      Account: (
-        <FamilyAccount
-          familyData={details.familyDetails.data}
-          myRef={accountRef}
-          loader={details.familyDetails.loading}
-          handlePrint={useHandlePrint}
-        />
-      ),
-      Profile: <FamilyProfile familyData={details.familyDetails.data} />,
-      wallet: <FamilyWallet familyData={details.familyDetails.data} />,
-    };
-  
-    // Default tab component
-    const defaultTabComponent = (
       <FamilyTasks
         className={className}
-        loader={details.familyTasks.loading}
+        loader={details.familyTasks.loading || false}
         familyData={details.familyTasks.data}
         accountDetails={accountDetails}
       />
-    );
+    ),
+    Waiting: (
+      <FamilyWaitlist
+        familyData={details.familyWaitList.data}
+        accountDetails={accountDetails}
+        loader={details.familyWaitList.loading}
+      />
+    ),
+    Pending: (
+      <FamilyPending
+        familyData={details.familyPending.data}
+        accountDetails={accountDetails}
+        loader={details.familyPending.loading}
+      />
+    ),
+  };
 
-    // Selected tab component based on the current 'tab'
+  const defaultTabComponent = tabComponents.Tasks;
-    const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
-    // Effect to manage family details and related data
+  // Selected tab component based on the current 'tab'
-    useEffect(() => {
+  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
-      const manageFamily = async () => {
-        try {
-          resetDetails();
 
-          setDetails({
+  // Effect to manage family details and related data
-            familyDetails: { loading: true },
+  useEffect(() => {
-            familyTasks: { loading: true },
+    const manageFamily = async () => {
-            familyWaitList: { loading: true },
+      try {
-            familyPending: { loading: true },
+        resetDetails();
-          });
 
-          const { family_uid } = accountDetails;
+        setDetails({
-          const reqData = { family_uid };
+          familyTasks: { loading: true },
+          familyWaitList: { loading: true },
+          familyPending: { loading: true },
+        });
 
-          const [familyRes, tasksRes, familyWaitRes, familyPending] =
+        //   const { family_uid } = accountDetails;
-            await Promise.all([
+        //   const reqData = { family_uid };
-              apiCall.ManageFamily(reqData),
-              apiCall.ManageTasks(reqData),
-              apiCall.ManageFamilyWaitlist(),
-              apiCall.ManageFamilyPending(),
-            ]);
 
-          const familyData = familyRes.data;
+        const [familyTasksData, restOfFamilyData] = await Promise.all([
-          const tasksData = tasksRes.data;
+          apiCall.getMyActiveTaskList(),
-          const familyWaitData = familyWaitRes.data;
+          apiCall.ManageFamilyNewWaitlist(),
-          const familyPendingData = familyPending.data;
+        ]);
 
-          // Function to check for errors in data
+        let tasksData = familyTasksData?.data?.result_list;
-          const checkDataError = (data) => data?.internal_return < 0;
+        let familyData = restOfFamilyData?.data?.result_list;
 
-          if (
+        //   const familyData = familyRes.data;
-            checkDataError(familyData) ||
+        //   const tasksData = tasksRes.data;
-            checkDataError(tasksData) ||
-            checkDataError(familyWaitData) ||
-            checkDataError(familyPendingData)
-          ) {
-            return;
-          }
 
-          setDetails({
+        let familyWaitingData = familyData?.filter(
-            familyDetails: { loading: false, data: familyData },
+          (item) => item.status_text === "Waiting"
-            familyTasks: { loading: false, data: tasksData },
+        );
-            familyWaitList: { loading: false, data: familyWaitData },
+        let familyPendingData = familyData?.filter(
-            familyPending: { loading: false, data: familyPendingData },
+          (item) => item.status_text !== "Waiting"
-          });
+        );
-        } catch (error) {
+
-          resetDetails();
+        console.log({
-          setErrMsg("An error occurred");
+          Waitings: familyWaitingData,
-          throw new Error(error);
+          Pending: familyPendingData,
+          Tasks: tasksData,
+        });
+
+        // Function to check for errors in data
+        const checkDataError = (data) => data?.internal_return < 0;
+
+        if (
+          checkDataError(tasksData) ||
+          checkDataError(familyWaitingData) ||
+          checkDataError(familyPendingData)
+        ) {
+          return;
         }
-      };
 
-      // Invoke the manageFamily function when the component mounts
+        setDetails({
-      manageFamily();
+          familyTasks: { loading: false, data: tasksData },
-    }, [updatePage]);
+          familyWaitList: { loading: false, data: familyWaitingData },
-  
+          familyPending: { loading: false, data: familyPendingData },
-    // Effect to manage family tasks
+        });
-    useEffect(() => {
+      } catch (error) {
-      let checkFamilyTask = true;
+        resetDetails();
-      const reqData = {
+        setErrMsg("An error occurred");
-        limit: 30,
+        throw new Error(error);
-        offset: 0,
-        job_type: "FAMILY",
-        action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
-      };
-  
-      if (checkFamilyTask) {
-        setFamilyTask({ loading: true });
-        apiCall
-          .getMyJobList(reqData)
-          .then((res) => {
-            setFamilyTask({ loading: false, data: res?.data?.result_list });
-            if (res?.data?.result_list?.length) {
-              setActiveTask((prev) => ({
-                ...prev,
-                data: res?.data?.result_list[0],
-              }));
-            }
-          })
-          .catch((err) => {
-            setFamilyTask({ loading: false, data: [] });
-            console.log("Error", err);
-          });
       }
+    };
 
-      // Cleanup function to prevent memory leaks
+    // Invoke the manageFamily function when the component mounts
-      return () => {
+    manageFamily();
-        checkFamilyTask = false;
+  }, [updatePage]);
-      };
-    }, []);
 
-    return (
+  // Effect to manage family tasks
-      <div
+  useEffect(() => {
-        className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
+    let checkFamilyTask = true;
-          className || ""
+    const reqData = {
-        }`}
+      limit: 30,
-      >
+      offset: 0,
-        <div className="relative w-full sm:rounded-lg overflow-x-auto">
+      job_type: "FAMILY",
-          <Suspense
+      action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
-            fallback={
+    };
-              <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
-                <LoadingSpinner size="16" color="sky-blue" />
-              </div>
-            }
-          >
-            <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-3 min-h-[575px]">
-              <div className="col-span-3 h-full w-full">
-                <div className="flex flex-col w-full">
-                  <div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
-                    <ul className="flex gap-2 items-center w-full">
-                      {tabs.map(({ name, id }) => (
-                        <li
-                          onClick={() => tabHandler(name)}
-                          className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
-                            tab === name
-                              ? "text-purple border-r"
-                              : "text-thin-light-gray"
-                          }`}
-                          key={id}
-                        >
-                          <h1>{name}</h1>
-                        </li>
-                      ))}
-                    </ul>
-                    <button
-                      type="button"
-                      onClick={familyPopUpHandler}
-                      className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    >
-                      Add task
-                    </button>
-                  </div>
 
-                  <div className="flex-[0.9] h-full">
+    if (checkFamilyTask) {
-                    <div className="h-full relative overflow-y-auto">
+      setFamilyTask({ loading: true });
-                      <Suspense
+      apiCall
-                        fallback={<LoadingSpinner size="16" color="sky-blue" />}
+        .getMyJobList(reqData)
+        .then((res) => {
+          setFamilyTask({ loading: false, data: res?.data?.result_list });
+          if (res?.data?.result_list?.length) {
+            setActiveTask((prev) => ({
+              ...prev,
+              data: res?.data?.result_list[0],
+            }));
+          }
+        })
+        .catch((err) => {
+          setFamilyTask({ loading: false, data: [] });
+          console.log("Error", err);
+        });
+    }
+
+    // Cleanup function to prevent memory leaks
+    return () => {
+      checkFamilyTask = false;
+    };
+  }, []);
+
+  return (
+    <div
+      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
+        className || ""
+      }`}
+    >
+      <div className="relative w-full sm:rounded-lg overflow-x-auto">
+        <Suspense
+          fallback={
+            <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
+              <LoadingSpinner size="16" color="sky-blue" />
+            </div>
+          }
+        >
+          <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-3 min-h-[575px]">
+            <div className="col-span-3 h-full w-full">
+              <div className="flex flex-col w-full">
+                <div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
+                  <ul className="flex gap-2 items-center w-full">
+                    {tabs.map(({ name, id }) => (
+                      <li
+                        onClick={() => tabHandler(name)}
+                        className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
+                          tab === name
+                            ? "text-purple border-r"
+                            : "text-thin-light-gray"
+                        }`}
+                        key={id}
                       >
-                        {selectedTabComponent}
+                        <h1>{name}</h1>
-                      </Suspense>
+                      </li>
-                    </div>
+                    ))}
+                  </ul>
+                  <button
+                    type="button"
+                    onClick={familyPopUpHandler}
+                    className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  >
+                    Add task
+                  </button>
+                </div>
+
+                <div className="flex-[0.9] h-full">
+                  <div className="h-full relative overflow-y-auto">
+                    <Suspense
+                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
+                    >
+                      {selectedTabComponent}
+                    </Suspense>
                   </div>
                 </div>
               </div>
             </div>
-          </Suspense>
+          </div>
-        </div>
+        </Suspense>
-  
-        {familyTaskPopout && (
-          <AssignTaskPopout
-            action={familyPopUpHandler}
-            situation={familyTaskPopout}
-            familyTask={familyTask}
-            setFamilyTask={setFamilyTask}
-            setActiveTask={setActiveTask}
-            activeTask={activeTask}
-            familyDetailsData={details.familyDetails.data}
-            setUpdatePage={setUpdatePage}
-          />
-        )}
       </div>
-    );
-  }
 
+      {familyTaskPopout && (
+        <AssignTaskPopout
+          action={familyPopUpHandler}
+          situation={familyTaskPopout}
+          familyTask={familyTask}
+          setFamilyTask={setFamilyTask}
+          setActiveTask={setActiveTask}
+          activeTask={activeTask}
+          //   familyDetailsData={details.familyDetails.data}
+          setUpdatePage={setUpdatePage}
+        />
+      )}
+    </div>
+  );
+}

src/components/FamilyAcc/Tabs/FamilyNewPending.jsx

@@ -0,0 +1,165 @@
+import { useMemo, useState } from "react";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+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 = useMemo(
+    () =>
+      familyData?.filter(
+        (data) => data?.family_uid === accountDetails?.family_uid
+      ),
+    [accountDetails?.family_uid, familyData]
+  );
+
+  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 = familyData?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
+  console.log(familyData);
+  return (
+    <div
+      className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] ${
+        className || ""
+      }`}
+    >
+      {familyData && (
+        <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
+                      );
+                      let image = `${
+                        familyData.session_image_server
+                      }${localStorage.getItem("session_token")}/job/${
+                        value.job_uid
+                      }`;
+                      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-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
+                                <img
+                                  src={image}
+                                  alt="data"
+                                  className="w-full h-full rounded-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>
+                      <td className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap text-center py-4 px-2">
+                        No Pending Task!
+                      </td>
+                    </tr>
+                  )}
+                </>
+              }
+            </tbody>
+          </table>
+          {/* PAGINATION BUTTON */}
+          <PaginatedList
+            onClick={handlePagination}
+            prev={currentPage == 0}
+            next={currentPage + itemsPerPage >= familyData.length}
+            data={familyData}
+            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/FamilyNewTasks.jsx

@@ -0,0 +1,169 @@
+import React, { useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import Icons from "../../Helpers/Icons";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import { handlePagingFunc } from "../../Pagination/HandlePagination";
+import PaginatedList from "../../Pagination/PaginatedList";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+export default function FamilyNewTasks({
+  familyData,
+  className,
+  loader,
+  accountDetails,
+}) {
+  let navigate = useNavigate();
+  let { pathname } = useLocation();
+
+  // ...
+  const filteredFamilyData = useMemo(
+    () =>
+      familyData?.result_list?.filter(
+        (data) => data?.family_uid === accountDetails?.family_uid
+      ),
+    [familyData, accountDetails]
+  );
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentTasks = familyData?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
+
+  console.log(familyData)
+  console.log(typeof familyData)
+  return (
+    <div
+      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
+        className || "" 
+      }`}
+    >
+      {loader ? (
+        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+          <LoadingSpinner size={16} color="sky-blue" />
+        </div>
+      ) : (
+        <>
+          {familyData?.length && (
+            <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>
+                  {
+                    <>
+                      {familyData?.length > 0 ? (
+                        currentTasks.map((value, index) => {
+                          // find due date
+                          const dueDate = value?.delivery_date.split(" ")[0];
+                          // the price
+                          let thePrice = PriceFormatter(
+                            value?.price * 0.01,
+                            value?.currency_code,
+                            value?.currency
+                          );
+                          let image = `${
+                            familyData.session_image_server
+                          }${localStorage.getItem("session_token")}/job/${
+                            value.job_uid
+                          }`;
+                          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-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
+                                    <img
+                                      src={image}
+                                      alt="data"
+                                      className="w-full h-full rounded-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 className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
+                                      <span className="text-sm text-thin-light-gray flex flex-start gap-1">
+                                        Price:{" "}
+                                        <span className="text-purple">
+                                          {thePrice}
+                                        </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">
+                                        Due Date:{" "}
+                                        <span className="text-purple">
+                                          {" "}
+                                          {dueDate}
+                                        </span>
+                                      </span>
+                                    </div>
+                                  </div>
+                                </div>
+                              </td>
+
+                              <td className="text-right py-4 px-2">
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    navigate("/manage-active-job", {
+                                      state: {
+                                        ...value,
+                                        pathname,
+                                        accountDetails,
+                                      },
+                                    });
+                                  }}
+                                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                >
+                                  <Icons name="right-arrow" />
+                                </button>
+                              </td>
+                            </tr>
+                          );
+                        })
+                      ) : (
+                        <tr>
+                          <td
+                            colSpan="2"
+                            className="text-center py-4 font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"
+                          >
+                            No Family Task
+                          </td>
+                        </tr>
+                      )}
+                    </>
+                  }
+                </tbody>
+              </table>
+              {/* PAGINATION BUTTON */}
+              <PaginatedList
+                onClick={handlePagination}
+                prev={currentPage == 0 ? true : false}
+                next={
+                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                  familyData?.result_list?.length
+                    ? true
+                    : false
+                }
+                data={familyData?.result_list}
+                start={indexOfFirstItem}
+                stop={indexOfLastItem}
+              />
+              {/* END OF PAGINATION BUTTON */}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx

@@ -0,0 +1,150 @@
+import { useState } from "react";
+import SuggestTask from "../../FamilyPopup/SuggestTask";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
+
+const FamilyNewWaitlist = ({
+  familyData,
+  className,
+  accountDetails,
+  loader,
+}) => {
+  const [popUp, setPopUp] = useState({ show: false, data: {} });
+  const [continueTaskPopup, setContinueTaskPopup] = useState({
+    show: false,
+    data: {},
+  });
+
+  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?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
+
+  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
+
+  const openPopUp = (value) => {
+    setPopUp({ show: true, data: { ...value } });
+  };
+
+  const closePopUp = () => {
+    setPopUp({ show: false, data: {} });
+  };
+
+  const openContinueTaskPopup = (value) => {
+    setContinueTaskPopup({ show: true, data: { ...value } });
+  };
+
+  const closeContinueTaskPopup = () => {
+    setContinueTaskPopup({ show: false, data: {} });
+  };
+
+  console.log("Check this >>",currentTask)
+
+  return (
+    <div
+      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] p-3 overflow-hidden rounded-2xl section-shadow ${
+        className || ""
+      }`}
+    >
+      {loader ? (
+        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+          <LoadingSpinner size={16} color="sky-blue" />
+        </div>
+      ) : (
+        <>
+          {currentTask && (
+            <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>
+                  {currentTask.map((value) => {
+                    const addedDate = value?.added.split(" ")[0];
+                    const selectedImage = require(`../../../assets/images/family/${
+                      value?.banner || "default.jpg"
+                    }`);
+                    console.log("VALUE", value);
+                    // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                    return (
+                      <tr
+                        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                        key={value.uid}
+                      >
+                        <td className="py-4">
+                          <div className="w-full flex justify-between items-center">
+                            <div className="account-name flex space-x-4 items-center">
+                              <div className="icon w-14 h-14 flex justify-center items-center">
+                                <img
+                                  src={selectedImage}
+                                  alt="task_img"
+                                  className="w-full object-cover"
+                                />
+                              </div>
+                              <div className="">
+                                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                                  {value.title}
+                                </p>
+                                <p className="text-sm text-thin-light-gray font-medium">
+                                  {value.description}
+                                </p>
+                              </div>
+                            </div>
+                            <div className="px-2 flex flex-col items-center justify-center">
+                              <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                {addedDate}
+                              </p>
+                              <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
+                                {value.status_text}
+                              </p>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="text-right py-4 px-2">
+                          <button
+                            onClick={() => openPopUp(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>
+              <PaginatedList
+                onClick={handlePagination}
+                prev={currentPage === 0}
+                next={currentPage + itemsPerPage >= familyData?.length}
+                data={currentTask}
+                start={indexOfFirstItem}
+                stop={indexOfLastItem}
+              />
+            </div>
+          )}
+        </>
+      )}
+      {popUp.show && (
+        <SuggestTask
+          details={popUp.data}
+          onClose={closePopUp}
+          continuePopupData={openContinueTaskPopup}
+          situation={popUp.show}
+        />
+      )}
+
+      {continueTaskPopup.show && (
+        <AssignTaskPopout
+          details={continueTaskPopup.data}
+          action={closeContinueTaskPopup}
+          situation={continueTaskPopup.show}
+        />
+      )}
+    </div>
+  );
+};
+
+export default FamilyNewWaitlist;

src/components/FamilyAcc/index.jsx

@@ -164,13 +164,13 @@ export default function FamilyAcc() {
               </h1>
             </div>
 
-            <div className="flex gap-2 items-center">
+            <div className="flex gap-4 items-center">
-              <Link to="/acc-family/activities" className={`nav-item flex items-center `}>
+              <Link to="/acc-family/activities" className={`nav-item flex items-center rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]`}>
                 <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
                   <Icons name="pending-job" />
                 </span>
                 <span
-                  className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium`}
+                  className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium dark:text-white h-12 px-2 flex items-center`}
                 >
                   Activities
                 </span>

src/components/FamilyPopup/SuggestTask.jsx

@@ -1,10 +1,10 @@
+import { Form, Formik } from "formik";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
-import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
-import InputCom from "../Helpers/Inputs/InputCom";
 import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
+import InputCom from "../Helpers/Inputs/InputCom";
+import ModalCom from "../Helpers/ModalCom";
 
 const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
 const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
@@ -51,7 +51,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
   };
 
   const handleParentSuggestion = (values) => {
-    if (suggestedNextStep == "Send Task") {
+    if (suggestedNextStep === "Send Task") {
       let firstName = state?.firstname;
       let family_uid = state?.family_uid;
       continuePopupData({ ...details, firstName, family_uid });
@@ -66,6 +66,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
           <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
             {pathname === "/manage-family"
               ? `${state?.firstname}'s Suggested Task`
+              : pathname === "/acc-family/activities"
+              ? "Suggested Task"
               : "Suggest to Parent"}
           </h1>
           <button
@@ -97,7 +99,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
         <Formik
           initialValues={initialValues}
           onSubmit={
-            pathname !== "/manage-family"
+            pathname !== "/manage-family" ||
+            pathname !== "/acc-family/activities"
               ? handleSuggestedTask
               : handleParentSuggestion
           }
@@ -122,12 +125,16 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                     <div className="field w-full mb-[15px]">
                       <InputCom
                         fieldClass={
-                          pathname === "/manage-family" ? "px-2" : "px-6"
+                          pathname === "/manage-family" ||
+                          pathname === "/acc-family/activities"
+                            ? "px-2"
+                            : "px-6"
                         }
                         label="Title"
                         labelClass="tracking-wide"
                         inputBg={
-                          pathname === "/manage-family"
+                          pathname === "/manage-family" ||
+                          pathname === "/acc-family/activities"
                             ? "bg-white"
                             : "bg-slate-100"
                         }
@@ -164,7 +171,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                         id="description"
                         rows="5"
                         className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full ${
-                          pathname === "/manage-family"
+                          pathname === "/manage-family" ||
+                          pathname === "/acc-family/activities"
                             ? "px-2 h-[110px]"
                             : "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] h-[130px]"
                         }`}
@@ -177,7 +185,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                     </div>
 
                     {/* Radio buttons for family */}
-                    {pathname === "/manage-family" ? (
+                    {pathname === "/manage-family" ||
+                    pathname === "/acc-family/activities" ? (
                       <div className="h-[20px] w-full border-t dark:border-[#5356fb29] border-light-purple relative">
                         <div id="my-radio-group" className="sr-only">
                           Parent suggested next step
@@ -212,9 +221,9 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                                 id={`parent-suggested-${idx}`}
                                 name="parent-suggested"
                                 className={`ml-1 ${
-                                  title == "Not Now"
+                                  title === "Not Now"
                                     ? "text-red-500"
-                                    : title == "Duplicate"
+                                    : title === "Duplicate"
                                     ? "text-purple"
                                     : "text-black"
                                 } font-semibold`}
@@ -243,24 +252,35 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                       disabled={props.isSubmitting}
                       className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out flex items-center"
                     >
-                      {pathname !== "/manage-family" ? (
+                      {pathname === "/acc-family/activities" ? (
                         <>
-                          {submitTask.loading
+                          {" "}
-                            ? "Submitting Task"
+                          <>
-                            : submitTask.state == "success"
+                            Continue <Icons name="chevron-right" />
-                            ? "Task Submitted"
+                          </>
-                            : submitTask.state == "bad"
-                            ? "An Error Occurred"
-                            : "Send to Parents"}
                         </>
                       ) : (
                         <>
-                          {suggestedNextStep == "Send Task" ? (
+                          {pathname !== "/manage-family" ? (
                             <>
-                              Continue <Icons name="chevron-right" />
+                              {submitTask.loading
+                                ? "Submitting Task"
+                                : submitTask.state === "success"
+                                ? "Task Submitted"
+                                : submitTask.state === "bad"
+                                ? "An Error Occurred"
+                                : "Send to Parents"}
                             </>
                           ) : (
-                            "Complete"
+                            <>
+                              {suggestedNextStep === "Send Task" ? (
+                                <>
+                                  Continue <Icons name="chevron-right" />
+                                </>
+                              ) : (
+                                "Complete"
+                              )}
+                            </>
                           )}
                         </>
                       )}

src/components/MyTasks/MyOffersFamilyTable.jsx

@@ -3,6 +3,7 @@ import OfferCard from "../Cards/OfferCard";
 import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 import FamilyOfferJobPopout from "../jobPopout/FamilyOfferJobPopout";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function MyOffersFamilyTable({ className, familyOffers, image_server }) {
   let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
@@ -60,10 +61,21 @@ export default function MyOffersFamilyTable({ className, familyOffers, image_ser
         >
           {/* heading */}
           <div className="flex justify-between items-center mb-6">
-            <div>
+            {/* <div>
               <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
                 Ready to Start?
               </h1>
+            </div> */}
+            <div className="">
+                <CustomBreadcrumb 
+                title = {'Ready to Start'}
+                breadcrumb={
+                    [
+                    { link: "/", title: "Home" },
+                    { link: "/pending", title: "Pending", active: true},
+                    ]
+                }
+                />
             </div>
             <div className="slider-btns flex space-x-3">
               <button onClick={nextHandler} type="button">

src/components/MyWallet/FamilyWallet.jsx

@@ -16,12 +16,6 @@ const FamilyWallet = () => {
     data: [],
   });
 
-  const [allCountries, setAllCountries] = useState({
-    // STATE TO HOLD LIST OF COUNTRIES
-    loading: true,
-    data: [],
-  });
-
   const getPaymentHistory = () => {
     apiCall
       .getPaymentHx()
@@ -37,37 +31,10 @@ const FamilyWallet = () => {
       });
   };
 
-  // FUNCTION TO GET COUNTRIES
-  const getCountry = () => {
-    apiCall
-      .getSignupCountryData()
-      .then((res) => {
-        if (res?.data?.internal_return < 0) {
-          setAllCountries((prev) => ({ loading: false, data: [] }));
-          return;
-        }
-        setAllCountries((prev) => ({
-          loading: false,
-          data: res?.data?.result_list,
-        }));
-      })
-      .catch((error) => {
-        setAllCountries((prev) => ({ loading: false, data: [] }));
-      });
-  };
-
   useEffect(() => {
-    getCountry();
     getPaymentHistory();
   }, [walletTable]);
 
-  console.log(
-    "Testing all country: ",
-    allCountries,
-    "Testing wallet: ",
-    walletDetails
-  );
-
   return (
     <Layout>
       <div className='mb-4'>
@@ -85,7 +52,6 @@ const FamilyWallet = () => {
         <FamilyWalletBox
           wallet={walletDetails}
           payment={paymentHistory}
-          countries={allCountries.data}
         />
       </Suspense>
     </Layout>

src/components/MyWallet/FamilyWalletBox.jsx

@@ -2,33 +2,90 @@ import { useSelector } from "react-redux";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 import WalletItemCardFamily from "./WalletItemCardFamily";
+import { useState } from "react";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import SearchCom from "../Helpers/SearchCom";
+import { localImgLoad } from "../../lib";
+import background from "../../assets/images/bg-sky-blue.jpg";
+import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
 
 /**
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
  */
-export default function FamilyWalletBox({ wallet, payment, countries }) {
+export default function FamilyWalletBox({ wallet, payment }) {
   const { loading, data } = wallet;
 
   const { userDetails } = useSelector((state) => state.userDetails);
   const accountType = userDetails?.account_type === "FAMILY";
 
+  const [selectedWallet, setSelectedWallet] = useState(data[0])
+
+  const handleChangeWallet = ({target:{name}}) => {  // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
+    const currentWalletSelected = data?.filter((item) => item.code === name);
+  }
+
+  const image = selectedWallet?.code
+  ? `${selectedWallet?.code.toLowerCase()}.svg`
+  : "default.png";
+
+
   return (
-    <div className="my-wallet-wrapper w-full mb-10">
+    <div className="w-full">
-      <div className="main-wrapper w-full">
+      <div className="my-wallet-wrapper w-full mb-10">
-        <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
+        <div className="main-wrapper w-full">
-          {loading ? (
+            {loading ? 
-            <div className="w-full h-full flex items-center justify-center bg-white">
+              <div className="w-full h-full flex items-center justify-center bg-white">
-              <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
+                <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
-            </div>
-          ) : (
-            data.length > 0 && data.map((item) => (
-              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
-                <WalletItemCardFamily walletItem={item} payment={payment} countries={countries} />
               </div>
-            ))
+
-          )}
+            : data.length > 0 ?
+                <div className="w-full mb-10 sm:grid grid-cols-2 gap-4">
+                  <div className="w-full mb-4 sm:mb-0">
+                    <div className="wal-selection text-black dark:text-white flex items-center gap-2">
+                      {data.length > 1 && data.map(item =>(
+                        <button className="py-0.5 px-1 mb-1 rounded-lg border border-orange-500" key={item.wallet_uid} name={item.code}>{item.code}</button>
+                      ))}
+                    </div>
+                    <div className="p-5 rounded-2xl bg-white-opacity min-h-[240px]"
+                        style={{
+                          background: `url(${background}) 0% 0% / cover no-repeat`,
+                        }}
+                      >
+                      {/* image */}
+                      <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[120px] max-h-min md:max-h-[120px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+                        <img
+                          src={localImgLoad(`images/currency/${image}`)}
+                          className="w-full h-full"
+                          alt="currency-icon"
+                        />
+                      </div>
+                      <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">Current Balance</p>
+                      <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
+                        {PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code, undefined, "text-[2rem]")}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
+                  <h1 className="text-xl font-bold text-black dark:text-white">Recent Activities</h1>
+                  </div>
+                </div>
+            :
+            <div className="w-full h-32 flex justify-center items-center rounded-2xl bg-white">
+              <p>No Wallet Record Found</p>
+            </div>
+            }
         </div>
       </div>
+      <div className="w-full">
+        <FamilyWalletRedeemOptions />
+      </div>
     </div>
   );
 }
+
+
+// data.length>0 && data.map((item) => (
+//   <div key={item.wallet_uid} className="w-full h-full mb-10 ">
+//     {/* <WalletItemCardFamily walletItem={item} payment={payment} countries={countries} /> */}
+//   </div>
+// ))

src/components/MyWallet/FamilyWalletRedeemOptions.jsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react'
+import SearchCom from '../Helpers/SearchCom'
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
+export default function FamilyWalletRedeemOptions() {
+
+    const { familyWalletRedeemOptList } = useSelector((state) => state.familyWalletRedeemOptList); // FAMILY WALLET REDDEM OPTIONS LIST
+
+    const [filteredRedeemData, setFilteredRedeemData] = useState({value: '', data:{}}) // State to hold filtered redeem banner option
+  
+    const handleFilterRedeemData = ({target}) => {
+        // thiskey01
+      let filterWord = target.value
+      let filteredData = {}
+      if(!filterWord){
+        filteredData = {...familyWalletRedeemOptList?.data}
+      }else{
+        let matchedData = Object.keys(familyWalletRedeemOptList?.data)?.filter(item => (item.toLowerCase().startsWith(filterWord.toLowerCase())))
+        filteredData = matchedData.map(item => familyWalletRedeemOptList.data[item])
+      }
+      setFilteredRedeemData({value:target.value, data: {...filteredData}})
+    }
+
+    useEffect(()=>{
+        setFilteredRedeemData(prev => ({...prev, data:{...familyWalletRedeemOptList?.data}}))
+    }, [familyWalletRedeemOptList.image])
+
+  return (
+    <div className="w-full">
+        <div className="w-full sm:flex items-center gap-4">
+            <h1 className="text-2xl font-bold text-black dark:text-white">Redeem Options</h1>
+            <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
+                <SearchCom 
+                placeholder='Search...' 
+                value={filteredRedeemData.value}
+                handleSearch={handleFilterRedeemData}
+                />
+            </div>
+        </div>
+
+        {/* redeem options */}
+            {familyWalletRedeemOptList.loading ? 
+            <div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
+                <LoadingSpinner size='10' color='sky-blue' height='h-[30rem]' />
+            </div>
+            : Object.keys(familyWalletRedeemOptList?.data)?.length > 0 ?
+                Object.keys(filteredRedeemData?.data)?.length ?
+                    <div className="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 xxl:grid-cols-4 gap-4">
+                        { Object.keys(filteredRedeemData?.data)?.map((item)=>{
+                            // text, image, description, action
+                            let newData = filteredRedeemData?.data[item].banner
+                            let bgImage = `url(${newData?.image})`
+                            return (
+                                <Link to={''} key={item}>
+                                    <div className={`group relative h-60 text-black dark:text-white rounded-2xl shadow-lg hover:shadow-md transition-all duration-300 overflow-hidden`}
+                                    style={{
+                                        // background: `#ffffff ${bgImage} no-repeat center center / cover`
+                                    }}
+                                    >
+                                        <img src={newData?.image} alt='Redeem Image' className='w-full h-full bg-cover rounded-2xl group-hover:scale-110 transition-all duration-300' />
+                                        <div className='absolute bottom-0 mb-1 left-1/2 -translate-x-1/2 p-2 bg-white/80 rounded-2xl w-[90%] flex flex-col justify-center items-center gap-2'>
+                                            <h1 className='text-lg font-bold text-[#083e21]'>{newData.text}</h1>
+                                        </div>
+                                    </div>
+                                </Link>
+                            )
+                        })}
+                    </div>
+                :
+                <div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
+                    <p>Search Item not Found!</p>
+                </div>
+            :
+            <div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
+                <p>No Redeem Options Found!</p>
+            </div>
+            }
+    </div>
+  )
+}

src/components/MyWallet/WalletItemCardFamily.jsx

@@ -4,7 +4,6 @@ import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg
 import localImgLoad from "../../lib/localImgLoad";
 import { tableReload } from "../../store/TableReloads";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
-import CreditPopup from "./Popup/CreditPopup";
 import WalletAction from "./WalletAction";
 
 /**
@@ -13,26 +12,15 @@ import WalletAction from "./WalletAction";
 export default function WalletItemCardFamily({ walletItem, payment, countries }) {
 
   const dispatch = useDispatch();
-  const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
 
   /**
    * Opens the credit popup.
    * @param {Object} value - The value object.
    */
-  const openPopUp = (value) => {
-    setCreditPopup({
-      show: true,
-      data: { ...value },
-    });
-  };
 
   /**
    * Closes the credit popup and dispatches a table reload action.
    */
-  const closePopUp = () => {
-    setCreditPopup({ show: false, data: {} });
-    dispatch(tableReload({ type: "WALLETTABLE" }));
-  };
 
   const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country);
 
@@ -43,10 +31,10 @@ export default function WalletItemCardFamily({ walletItem, payment, countries })
   return (
     <>
       <div
-        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between bg-family-header-bg"
-        style={{
+        // style={{
-          background: `url(${background}) 0% 0% / cover no-repeat`,
+        //   background: `url(${background}) 0% 0% / cover no-repeat`,
-        }}
+        // }}
       >
         <div className="wallet w-full flex justify-between items-center gap-3">
           <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
@@ -72,24 +60,7 @@ export default function WalletItemCardFamily({ walletItem, payment, countries })
             </div>
           </div>
         </div>
-
-        <div className="my-2 w-full h-[1px] bg-white"></div>
-
-           {/* <WalletAction
-             walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}
-             payment={payment}
-             openPopUp={openPopUp}
-           /> */}
       </div>
-
-      {creditPopup.show && (
-        <CreditPopup
-          details={creditPopup.data}
-          walletItem={walletItem}
-          onClose={closePopUp}
-          situation={openPopUp}
-        />
-      )}
     </>
   );
 }

src/middleware/AuthRoute.jsx

@@ -13,6 +13,7 @@ import { updateUserJobList } from "../store/userJobList";
 import { updateWalletDetails } from "../store/walletDetails";
 import { familyBannersList } from "../store/FamilyBannerList";
 import { familyResources } from "../store/FamilyResources";
+import {familyWalletRedeemOptList} from '../store/FamilyWalletRedeemOpt'
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -291,6 +292,24 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, [isLogin.status]);
 
 
+  //FUNCTION TO GET FAMILY WALLET REDEEM OPTIONS
+  useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FULL'){  // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FULL
+      return
+    }
+    const familyWalletRedeemOptions = async () => { // FUNCTION TO GET FAMILY WALLET REDDEM OPTIONS
+      dispatch(familyWalletRedeemOptList({loading: true, image: '', data:{}}))
+      apiCall.getFamilyWalletRedeemOptions().then((res)=>{
+          dispatch(familyWalletRedeemOptList({loading: false, image: res?.data?.session_image_server, data:res?.data?.result_list}))
+      }).catch((err)=>{
+          console.log(err)
+          dispatch(familyWalletRedeemOptList({loading: false, image: '', data:{}}))
+      })
+    };
+    familyWalletRedeemOptions()
+  }, [isLogin.status]);
+
+
   // RENDER PAGE
   return isLogin.loading && !loggedIn ? (
     <LoadingSpinner size="32" color="sky-blue" height="h-screen" />

src/services/UsersService.js

@@ -388,13 +388,26 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: apiConst.WRENCHBOARD_JOB_CREATEJOB,
+      action: apiConst.WRENCHBOARD_JOB_CREATEJOB || apiConst.WRENCHBOARD_FAMILY_LIST,
       limit: 30,
       offset: 0,
     };
     return this.postAuxEnd("/familywaitingtasks", postData);
   }
 
+  ManageFamilyNewWaitlist() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_FAMILY_LIST,
+      limit: 20,
+      page: 1,
+      offset: 0,
+    };
+    return this.postAuxEnd("/familywaitingtasks", postData);
+  }
+
   ManageFamilyPending() {
     var postData = {
       uuid: localStorage.getItem("uid"),
@@ -1293,6 +1306,19 @@ class usersService {
     return this.postAuxEnd("/blogdata", postData);
   }
 
+  // API FUNCTION FOR FAMILY WALLET REDEEM OPTIONS
+  getFamilyWalletRedeemOptions() {
+    var postData = {
+      uuid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_JOB_ACTIVE,
+      offset: 0,
+      limit: 30,
+    };
+    return this.postAuxEnd("/familywallet/redeem/options", postData);
+  }
+  
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/store/FamilyWalletRedeemOpt.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+    familyWalletRedeemOptList: {loading: true, image: '', data: {}}
+};
+
+export const familyWalletRedeemOptListSlice = createSlice({
+  name: "familyWalletRedeemOptList",
+  initialState,
+  reducers: {
+    familyWalletRedeemOptList: (state,action) => {
+      state.familyWalletRedeemOptList = {...action.payload}
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { familyWalletRedeemOptList } = familyWalletRedeemOptListSlice.actions;
+
+export default familyWalletRedeemOptListSlice.reducer;

src/store/store.js

@@ -10,6 +10,7 @@ import userJobListReducer from "./userJobList";
 import walletDetails from "./walletDetails";
 import familyBannerListReducer from "./FamilyBannerList"
 import familyResourcesReducer from './FamilyResources'
+import familyWalletRedeemOptListReducer from './FamilyWalletRedeemOpt'
 
 export default configureStore({
   reducer: {
@@ -22,6 +23,7 @@ export default configureStore({
     notifications: notificationsReducer,
     walletDetails: walletDetails,
     familyBannersList: familyBannerListReducer,
-    familyResources: familyResourcesReducer
+    familyResources: familyResourcesReducer,
+    familyWalletRedeemOptList: familyWalletRedeemOptListReducer
   },
 });