added breadcrumb for no pending task

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>
+            <>
+                <div className="mb-6">
+                    <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/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

@@ -12,7 +12,7 @@ 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);
@@ -24,8 +24,8 @@ export default function FamilyWalletBox({ wallet, payment, countries }) {
     const currentWalletSelected = data?.filter((item) => item.code === name);
   }
 
-  const image = selectedWallet.code
-  ? `${selectedWallet.code.toLowerCase()}.svg`
+  const image = selectedWallet?.code
+  ? `${selectedWallet?.code.toLowerCase()}.svg`
   : "default.png";
 
 
@@ -46,13 +46,13 @@ export default function FamilyWalletBox({ wallet, payment, countries }) {
                         <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"
+                    <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-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+                      <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"
@@ -65,7 +65,7 @@ export default function FamilyWalletBox({ wallet, payment, countries }) {
                       </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]">
+                  <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>

src/components/MyWallet/FamilyWalletRedeemOptions.jsx

@@ -54,15 +54,14 @@ export default function FamilyWalletRedeemOptions() {
                             let bgImage = `url(${newData?.image})`
                             return (
                                 <Link to={''} key={item}>
-                                    <div className={`group relative h-60 text-black dark:text-white rounded-2xl shadow-md hover:shadow-none transition-all duration-300 overflow-hidden`}
+                                    <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 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-2 bg-white/80 rounded-2xl w-[80%] flex flex-col justify-center items-center gap-2'>
+                                        <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>
-                                            <p className='text-base text-black'>{newData.description}</p>
                                         </div>
                                     </div>
                                 </Link>