added breadcrumb to some pages in full account type

src/components/FamilyAcc/index.jsx

@@ -13,6 +13,7 @@ import ModalCom from "../Helpers/ModalCom";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyTable from "./FamilyTable";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function FamilyAcc() {
   // State to store the selected year and month
@@ -137,7 +138,18 @@ export default function FamilyAcc() {
           <div className="sm:flex justify-between items-center mb-6">
             <div className="mb-5 sm:mb-0">
               <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                <span className={``}>Family Accounts</span>
+                {/* <span className={``}>Family Accounts</span> */}
+                <div className="mb-5">
+                    <CustomBreadcrumb 
+                    title = {'Family Account'}
+                    breadcrumb={
+                      [
+                        { link: "/", title: "Home" },
+                        { link: "/acc-family", title: "Family-acc", active: true},
+                      ]
+                    }
+                    />
+                </div>
                 {familyList?.result_list?.length <
                   process.env.REACT_APP_MAX_FAMILY_MEMBERS &&
                   !loader && (

src/components/MarketPlace/MainSection.jsx

@@ -18,7 +18,7 @@ export default function MainSection({
   );
   const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
 
-  let [contentDisplay, setContentDisplay] = useState("grid"); // STATE TO HOLD LIST VIEW STYLE
+  let [contentDisplay, setContentDisplay] = useState("list"); // STATE TO HOLD LIST VIEW STYLE
 
   // Convert to array in order to map
   const mappedArray = Object.entries(marketCategories).map(([key, value]) => {

src/components/MarketPlace/index.jsx

@@ -2,6 +2,7 @@ import { useSelector } from "react-redux";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 import MainSection from "./MainSection";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function MarketPlace({ commonHeadData }) {
   let { jobLists } = useSelector((state) => state.jobLists);
@@ -13,6 +14,17 @@ export default function MarketPlace({ commonHeadData }) {
     <>
       <Layout>
         <CommonHead commonHeadData={commonHeadData} />
+        <div className="mb-5">
+            <CustomBreadcrumb 
+            title = {'Market'}
+            breadcrumb={
+                [
+                { link: "/", title: "Home" },
+                { link: "/market", title: "Market", active: true},
+                ]
+            }
+            />
+        </div>
         <MainSection
           marketPlaceProduct={marketData}
           categories={categories}

src/components/MyTasks/index.jsx

@@ -75,7 +75,7 @@ export default function MyTasks({
               />
             )}
             <div className="w-full mb-5 flex justify-between items-center gap-1">
-              {userDetails.account_type == 'FULL'? 
+              {/* {userDetails.account_type == 'FULL'? 
                 <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
                   <span
                     className={`${selectTab === "today" ? "block" : "hidden"}`}
@@ -83,7 +83,7 @@ export default function MyTasks({
                     My Tasks
                   </span>
                 </h1>
-                :
+                : */}
                 <CustomBreadcrumb 
                   title = 'My Tasks'
                   breadcrumb={
@@ -93,7 +93,7 @@ export default function MyTasks({
                     ]
                   }
                 />
-              }
+              {/* } */}
 
               {ActiveJobList?.data?.length > 0 && userDetails.account_type == 'FAMILY' &&
                 <button

src/components/MyWallet/FamilyWalletBox.jsx

@@ -2,9 +2,6 @@ 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.
@@ -15,96 +12,23 @@ 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="w-full">
+    <div className="my-wallet-wrapper w-full mb-10">
-      <div className="my-wallet-wrapper w-full mb-10">
+      <div className="main-wrapper w-full">
-        <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 ? 
+          {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 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,6 +4,7 @@ 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";
 
 /**
@@ -12,15 +13,26 @@ 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);
 
@@ -31,10 +43,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 bg-family-header-bg"
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
-        // 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">
@@ -60,7 +72,24 @@ 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}
+        />
+      )}
     </>
   );
 }