implemented family wallet with multiple wallet

src/components/FamilyAcc/FamilyActivities.jsx

@@ -23,7 +23,7 @@ export default function FamilyActivities() {
                 <span className={``}>Tasks & Chores</span>
               </h1>
             </div>
-            <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">
+            <Link className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#3887c6] text-white 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/FamilyTableNew.jsx

@@ -122,36 +122,23 @@ export default function FamilyTableNew({
         //   const { family_uid } = accountDetails;
         //   const reqData = { family_uid };
 
-        const [familyTasksData, restOfFamilyData] = await Promise.all([
-          apiCall.getMyActiveTaskList(),
-          apiCall.ManageFamilyNewWaitlist(),
-        ]);
+        const [familyTasksData, familyWaitingRes, familyPendingRes] =
+          await Promise.all([
+            apiCall.getMyActiveTaskList(),
+            apiCall.ManageFamilyNewWaitlist(),
+            apiCall.ManageFamilyPending(),
+          ]);
 
         let tasksData = familyTasksData?.data?.result_list;
-        let familyData = restOfFamilyData?.data?.result_list;
-
-        //   const familyData = familyRes.data;
-        //   const tasksData = tasksRes.data;
-
-        let familyWaitingData = familyData?.filter(
-          (item) => item.status_text === "Waiting"
-        );
-        let familyPendingData = familyData?.filter(
-          (item) => item.status_text !== "Waiting"
-        );
-
-        console.log({
-          Waitings: familyWaitingData,
-          Pending: familyPendingData,
-          Tasks: tasksData,
-        });
+        let _familyWaitData = familyWaitingRes?.data?.result_list;
+        let familyPendingData = familyPendingRes?.data?.result_list;
 
         // Function to check for errors in data
         const checkDataError = (data) => data?.internal_return < 0;
 
         if (
           checkDataError(tasksData) ||
-          checkDataError(familyWaitingData) ||
+          checkDataError(_familyWaitData) ||
           checkDataError(familyPendingData)
         ) {
           return;
@@ -159,7 +146,7 @@ export default function FamilyTableNew({
 
         setDetails({
           familyTasks: { loading: false, data: tasksData },
-          familyWaitList: { loading: false, data: familyWaitingData },
+          familyWaitList: { loading: false, data: _familyWaitData },
           familyPending: { loading: false, data: familyPendingData },
         });
       } catch (error) {

src/components/FamilyAcc/Tabs/FamilyNewPending.jsx

@@ -111,7 +111,7 @@ export default function FamilyPending({
                             </div>
                           </td>
 
-                          <td className="text-right py-4 px-2">
+                          <td className="text-right py-4 px-2 flex justify-end items-center">
                             <button
                               type="button"
                               onClick={() => {

src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx

@@ -43,7 +43,7 @@ const FamilyNewWaitlist = ({
     setContinueTaskPopup({ show: false, data: {} });
   };
 
-  console.log("Check this >>",currentTask)
+  // console.log("Check this >>",currentTask)
 
   return (
     <div
@@ -57,7 +57,7 @@ const FamilyNewWaitlist = ({
         </div>
       ) : (
         <>
-          {currentTask && (
+          {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>
@@ -66,7 +66,7 @@ const FamilyNewWaitlist = ({
                     const selectedImage = require(`../../../assets/images/family/${
                       value?.banner || "default.jpg"
                     }`);
-                    console.log("VALUE", value);
+                    // console.log("VALUE", value);
                     // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                     return (
                       <tr
@@ -119,7 +119,7 @@ const FamilyNewWaitlist = ({
                 onClick={handlePagination}
                 prev={currentPage === 0}
                 next={currentPage + itemsPerPage >= familyData?.length}
-                data={currentTask}
+                data={familyData}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />

src/components/FamilyAcc/index.jsx

@@ -165,12 +165,12 @@ export default function FamilyAcc() {
             </div>
 
             <div className="flex gap-4 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%)]`}>
+              <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%)] bg-[#3887c6] text-white px-2 gap-2`}>
                 <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 dark:text-white h-12 px-2 flex items-center`}
+                  className={`item-content relative text-[18px] transition-all duration-300 ease-in-out font-medium dark:text-white h-12 flex items-center`}
                 >
                   Activities
                 </span>
@@ -178,7 +178,7 @@ export default function FamilyAcc() {
               <Link
                 to={`/familysettings`}
                 state={{ imageServer: familyList?.session_image_server }}
-                className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
+                className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#3887c6] text-white"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

src/components/MyWallet/FamilyWalletBox.jsx

@@ -14,14 +14,19 @@ import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
  */
 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 [activeWalletBtn, setActiveWalletBtn] = useState(data[0].code)
+  
   const handleChangeWallet = ({target:{name}}) => {  // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
-    const currentWalletSelected = data?.filter((item) => item.code === name);
+    const currentWalletSelected = data?.filter((item) => item.code == name);
+    setSelectedWallet(currentWalletSelected[0])
+    setActiveWalletBtn(name)
+    // console.log(name, currentWalletSelected)
   }
 
   const image = selectedWallet?.code
@@ -43,7 +48,14 @@ export default function FamilyWalletBox({ wallet, payment }) {
                   <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>
+                        <button 
+                          className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${activeWalletBtn == item?.code && 'bg-orange-500'}`} 
+                          key={item?.wallet_uid} 
+                          name={item?.code}
+                          onClick={handleChangeWallet}
+                        >
+                          {item?.description}
+                        </button>
                       ))}
                     </div>
                     <div className="p-5 rounded-2xl bg-white-opacity min-h-[240px]"