added new family wallet page

src/components/MyWallet/FamilyWalletBox.jsx

@@ -2,6 +2,9 @@ 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";
 
 /**
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
@@ -12,23 +15,96 @@ export default function FamilyWalletBox({ wallet, payment, countries }) {
   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 [redeemData, setRedeemData] = useState({loading: true, data: []});
+
+  const [filteredRedeemData, setFilteredRedeemData] = useState({value: '', data:[]}) // State to hold filter blog
+
+  const handleFilterRedeemData = ({target}) => {
+    // let filterWord = target.value
+    // let filteredData = []
+    // if(!filterWord){
+    //   filteredData = redeemData?.data?.redeemData
+    // }else{
+    //   filteredData = redeemData?.data?.redeemData?.filter(item => item.post_title.toLowerCase().startsWith(filterWord.toLowerCase()))
+    // }
+    // setFilteredRedeemData({value:target.value, data: filteredData})
+  }
+
+
+
   return (
-    <div className="my-wallet-wrapper w-full mb-10">
-      <div className="main-wrapper w-full">
-        <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">
-          {loading ? (
-            <div className="w-full h-full flex items-center justify-center bg-white">
-              <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 className="w-full">
+      <div className="my-wallet-wrapper w-full mb-10">
+        <div className="main-wrapper w-full">
+            {loading ? 
+              <div className="w-full h-full flex items-center justify-center bg-white">
+                <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
               </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 h-60">
+                      {/* image */}
+                      <div className="w-full flex">
+                        <div className="w-32 h-32 rounded-full bg-blue-900 flex justify-center items-center">
+                          <div className="w-20 h-20 bg-slate-600 rounded-sm"></div>
+                        </div>
+                      </div>
+                      <p className="text-white py-2 text-base">Current Balance</p>
+                      <p className="text-white text-2xl">{PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code)}</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]">
+                  <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">
+        <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 Blog Items...' 
+              value={filteredRedeemData.value}
+              handleSearch={handleFilterRedeemData}
+            />
+          </div>
+        </div>
+
+        {/* redeem options */}
+        <div className="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 xxl:grid-cols-4 gap-4">
+          {[1,2,3,4,5,6,7].map(item => (
+            <div key={item} className="p-5 h-60 bg-white dark:bg-dark-white text-black dark:text-white rounded-2xl shadow-md hover:shadow-none transition-all duration-300">
+              Dummy
+            </div>
+          ))}
         </div>
       </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/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"
-        style={{
-          background: `url(${background}) 0% 0% / cover no-repeat`,
-        }}
+        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={{
+        //   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}
-        />
-      )}
     </>
   );
 }