flat box fixed for offer list

src/components/AuthPages/Login/index2.jsx

@@ -16,6 +16,9 @@ import { updateUserDetails } from "../../../store/UserDetails";
 
 import ReCAPTCHA from "react-google-recaptcha";
 
+import GoogleDownload from '../../../assets/images/download/andriod.jpg'
+import IOSDownload from '../../../assets/images/download/apple.jpg'
+
 export default function Login() {
   // eslint-disable-next-line no-restricted-globals
   const queryParams = new URLSearchParams(location?.search);
@@ -526,40 +529,43 @@ export default function Login() {
               {/* APP DOWNLOAD STORE */}
               <div className="w-full mt-4">
                 <div className="w-full flex justify-center items-center gap-4">
-                  <div className="w-28 lg:w-32">
+                  <div className="w-32 lg:w-48">
                     <a
-                      className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                      // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
                       target="_blank"
                       rel="noreferrer"
                       href={process.env.REACT_APP_APPLE_APP}
                     >
-                      <i className="fa-brands fa-apple text-3xl"></i>
+                      {/* <i className="fa-brands fa-apple text-3xl"></i>
                       <div className="flex flex-col">
                         <span className="text-[11px]">Available on the</span>
                         <span className="text-[12px] lg:text-base">
                           App Store
                         </span>
-                      </div>
+                      </div> */}
+                      <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
                     </a>
                   </div>
-                  <div className="w-28 lg:w-32">
+                  <div className="w-32 lg:w-48">
                     <a
-                      className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                      // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
                       target="_blank"
                       rel="noreferrer"
                       href={process.env.REACT_APP_ANDROID_APP}
                     >
-                      <i className="fa-brands fa-google-play text-2xl"></i>
+                      {/* <i className="fa-brands fa-google-play text-2xl"></i>
                       <div className="flex flex-col">
                         <span className="text-[11px]">Available on the</span>
                         <span className="text-[12px] lg:text-base">
                           Google Play
                         </span>
-                      </div>
+                      </div> */}
+                      <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
                     </a>
                   </div>
                 </div>
               </div>
+
               {loginType == "full" && (
                 <>
                   <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">

src/components/AuthPages/Promo/Promo.jsx

@@ -179,10 +179,10 @@ export default function Promo() {
                   </div>
                 </div>
 
-                              {/* APP DOWNLOAD STORE */}
+              {/* APP DOWNLOAD STORE */}
               <div className="w-full mt-4">
-                <div className="w-full flex justify-between items-center gap-10 sm:gap-32">
-                  <div className="w-full">
+                <div className="w-full flex justify-center items-center gap-4">
+                  <div className="w-32 lg:w-48">
                     <a
                       // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
                       target="_blank"
@@ -199,7 +199,7 @@ export default function Promo() {
                       <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
                     </a>
                   </div>
-                  <div className="w-full">
+                  <div className="w-32 lg:w-48">
                     <a
                       // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
                       target="_blank"

src/components/AuthPages/SignUp/index2.jsx

@@ -5,6 +5,9 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout2";
 
+import GoogleDownload from '../../../assets/images/download/andriod.jpg'
+import IOSDownload from '../../../assets/images/download/apple.jpg'
+
 export default function SignUp() {
   // eslint-disable-next-line no-restricted-globals
   const queryParams = new URLSearchParams(location?.search);
@@ -347,36 +350,38 @@ export default function SignUp() {
                 {/* APP DOWNLOAD STORE */}
                 <div className="w-full mt-4">
                   <div className="w-full flex justify-center items-center gap-4">
-                    <div className="w-28 lg:w-32">
+                    <div className="w-32 lg:w-48">
                       <a
-                        className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                        // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
                         target="_blank"
-                        href={process.env.REACT_APP_APPLE_APP}
                         rel="noreferrer"
+                        href={process.env.REACT_APP_APPLE_APP}
                       >
-                        <i className="fa-brands fa-apple text-3xl"></i>
+                        {/* <i className="fa-brands fa-apple text-3xl"></i>
                         <div className="flex flex-col">
                           <span className="text-[11px]">Available on the</span>
                           <span className="text-[12px] lg:text-base">
                             App Store
                           </span>
-                        </div>
+                        </div> */}
+                        <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
                       </a>
                     </div>
-                    <div className="w-28 lg:w-32">
+                    <div className="w-32 lg:w-48">
                       <a
-                        className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                        // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
                         target="_blank"
-                        href={process.env.REACT_APP_ANDROID_APP}
                         rel="noreferrer"
+                        href={process.env.REACT_APP_ANDROID_APP}
                       >
-                        <i className="fa-brands fa-google-play text-2xl"></i>
+                        {/* <i className="fa-brands fa-google-play text-2xl"></i>
                         <div className="flex flex-col">
                           <span className="text-[11px]">Available on the</span>
                           <span className="text-[12px] lg:text-base">
                             Google Play
                           </span>
-                        </div>
+                        </div> */}
+                        <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
                       </a>
                     </div>
                   </div>

src/components/Contexts/SocketIOContext.js

@@ -85,6 +85,7 @@ export default function SocketIOContextProvider({children}) {
             }
             console.log('data', data)
         });
+        // dispatch(tableReload({ type: "HOMEBANNERS" })); // RELOADS HOME BANNERS
 
     }, [socket]);
 

src/components/Dashboards/AccountDashboard.jsx

@@ -31,8 +31,8 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
         }`}
       >
 
+        {/* for normal banner section */}
         <div className="w-full grid xxs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 items-center justify-center gap-2 md:gap-4">
-
           {/* OFFER LIST DISPLAY */}
           <>
             {(offersList && offersList?.length > 0) &&
@@ -44,11 +44,13 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
                 );
               
                 let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}`
-                return (
-                  <div key={item.id}>
-                    <NewOfferCard datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
-                  </div>
-                )
+                if(index < 3){
+                  return (
+                    <div key={item.offer_uid}>
+                        <NewOfferCard datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
+                    </div>
+                  )
+                }
             })}
           </>
 
@@ -71,7 +73,30 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
             );
           })}
         </div>
-        <div className="w-full grid-cols-1 md:grid-cols-2 2xl::grid-cols-3 grid items-center justify-center gap-2 md:gap-4">
+
+
+        {/* for flat banner section */}
+        <div className="w-full grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 grid items-center justify-center gap-2 md:gap-4">    
+          {/* OFFER LIST DISPLAY */}
+          <>
+            {(offersList && offersList?.length > 0) &&
+              offersList.map((item, index) => {
+                let thePrice = PriceFormatter(
+                  item?.price * 0.01,
+                  item?.currency_code,
+                  item?.currency
+                );
+              
+                let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}`
+                if(index >= 3) {
+                    return(
+                    <div key={item.offer_uid}>
+                        <NewOfferCardFlat datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
+                    </div>
+                    )
+                }
+            })}
+          </>
           {getLowerBanner?.map((props, idx) => {
             let image = getImage(props);
 
@@ -160,9 +185,16 @@ const NewOfferCard = ({ datas, hidden = false, price, setOfferPopout, image }) =
         <div
           className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
           style={{
-            background: `url(${image}) center / contain no-repeat`,
+            // background: `url(${image}) center / contain no-repeat`,
           }}
         >
+          {/* <img src={image} className='' /> */}
+          <div
+          className="thumbnail w-full h-full rounded-xl overflow-hidden"
+          style={{
+            background: `url(${image}) center / contain no-repeat`,
+          }}
+        ></div>
           {hidden && <div className="flex justify-center"></div>}
         </div>
         }
@@ -172,18 +204,15 @@ const NewOfferCard = ({ datas, hidden = false, price, setOfferPopout, image }) =
           <h1 className="font-bold text-lg line-clamp-1 text-center">
             {datas?.title}
           </h1>
-          {/* <Link to={link_path} className="text-sm">
-            {desc}
-          </Link> */}
           <div className="card-buttons flex justify-center items-center space-x-2">
             <button
               type="button"
               onClick={() =>
-                setOfferPopout({ show: true, data: { ...datas, price, image } })
+                setOfferPopout({ show: true, data: { ...datas, image } })
               }
               className="btn-shine w-2/3 h-[40px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
             >
-              Start Task
+              Start Now
             </button>
           </div>
         </div>
@@ -205,6 +234,62 @@ const NewOfferCard = ({ datas, hidden = false, price, setOfferPopout, image }) =
   );
 };
 
+const NewOfferCardFlat = ({ datas, hidden = false, price, setOfferPopout, image }) => {
+  return (
+    <div className="flex flex-col shadow-md bg-red-50 dark:bg-dark-white rounded-xl dark:border-[#5356fb29] overflow-hidden">
+      <div className="w-full xxs:flex justify-between items-center border-b border-slate-300 p-2">
+        <div className="min-h-[130px] sm:min-h-[100px] flex justify-between items-center">
+          <div className="px-2 flex flex-col gap-2 dark:text-white">
+            <h1 className="font-bold text-lg line-clamp-1 text-center">
+              {datas?.title}
+            </h1>
+            <div className="card-buttons flex items-center space-x-2">
+              <button
+                type="button"
+                onClick={() =>
+                  setOfferPopout({ show: true, data: { ...datas, image } })
+                }
+                className="btn-shine w-28 h-[40px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
+              >
+                Start Now
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className='w-[150px] h-[100px]'>
+          {datas.job_type == "MEDIA" ?
+          <Suspense fallback={<p>Loading...</p>}>
+            <VideoElement videoId={datas?.media_uid} />
+          </Suspense>
+          :
+          <div
+            className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
+            style={{
+              background: `url(${image}) center / contain no-repeat`,
+            }}
+          >
+            {hidden && <div className="flex justify-center"></div>}
+          </div>
+          }
+        </div>
+      </div>
+      <div className="flex justify-between w-full p-1 items-center">
+        <div className="flex gap-1 items-center">
+          <p className="text-[12px] text-red-500 tracking-wide">Expires</p>
+          <p className="text-[12px] font-semibold tracking-wide text-dark-gray dark:text-white">
+            <CountDown lastDate={datas.expire} />
+          </p>
+        </div>
+        <button className="flex items-center justify-center gap-2">
+          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+        </button>
+      </div>
+    </div>
+  );
+};
+
 const LowerBanner = ({ image, title = "", desc = "", btn, link_path, card_type, blog_id, key }) => {
   const newLinkPath = card_type == 'BLOG' ? `${link_path}?blog_id=${blog_id}` : link_path
 

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -20,6 +20,9 @@ export default function FamilyTableNew() {
 
   let { pathname } = useLocation();
 
+  const queryParams = new URLSearchParams(location?.search);
+  const preSelectedTab = queryParams.get("tab");
+
   // Initial state for family details
   const initialDetailState = {
     loading: false,
@@ -55,9 +58,9 @@ export default function FamilyTableNew() {
 
   // Array of tab names
   const tabs = [
-    { id: 1, name: "Tasks" },
-    { id: 2, name: "Waiting" },
-    { id: 3, name: "Pending" },
+    { id: 1, name: "tasks" },
+    { id: 2, name: "waiting" },
+    { id: 3, name: "pending" },
   ];
 
   // State for the currently selected tab
@@ -94,6 +97,14 @@ export default function FamilyTableNew() {
   // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
+  useEffect(()=>{ // EFFECT TO CHECK FOR PRE SELECTED TAB AND DEFAULT TO IT OR TO DEFAULT IF NOT AVALIABLE
+    if(preSelectedTab && tabs.map(item => item.name.toLowerCase()).includes(preSelectedTab.toLowerCase())){
+      setTab(preSelectedTab)
+    }else{
+      setTab(tabs[0].name)
+    }
+  },[])
+
 
   // Effect to manage active family task details
   useEffect(() => {

src/components/Home/FullAccountDash.jsx

@@ -61,15 +61,14 @@ export default function FullAccountDash(props) {
           <AccountDashboard className="mb-4" bannerList={props.bannerList} offersList={props.offersList} imageServer={props.imageServer} />
         )}
 
-        {
-        // props?.dashTypes !== "undefined" &&
-        // props.offersList?.data?.result_list?.length ? (
-        //   <MyOffersTable
-        //     MyActiveOffersList={props.offersList?.data}
-        //     className="mb-10"
-        //   />
-        // ) 
-        // : 
+        {/* {props?.dashTypes !== "undefined" &&
+        props.offersList?.data?.result_list?.length ? (
+          <MyOffersTable
+            MyActiveOffersList={props.offersList?.data}
+            className="mb-10"
+          />
+        ) 
+        : 
         props.MyActiveJobList?.data?.length ? (
           <>
             <div className="w-full mb-5 flex justify-between items-center gap-1">
@@ -83,7 +82,7 @@ export default function FullAccountDash(props) {
               imageServer={props.offersList?.data?.session_image_server}
             />
           </>
-        ) : null}
+        ) : null} */}
       </div>
     </>
   );

src/components/Home/index.jsx

@@ -14,19 +14,19 @@ export default function Home(props) {
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const [MyActiveJobList, setMyActiveJobList] = useState({loading:true, data:[]}); // STATE TO HOLD ACTIVE/CURRENT TASKS
+  // const [MyActiveJobList, setMyActiveJobList] = useState({loading:true, data:[]}); // STATE TO HOLD ACTIVE/CURRENT TASKS
 
-  const getMyActiveJobList = async () => { // FUNCTION TO POPULATE ACTIVE/CURRENT TASK LIST
-    try {
-      const res = await userApi.getMyActiveTaskList();
-      setMyActiveJobList({loading:false, data:res?.data?.result_list});
-      // setMyActiveJobList(res?.data?.result_list);
-    } catch (error) {
-      setMyActiveJobList({loading:false, data:[]});
-      // setMyActiveJobList([]);
-      console.log("Error getting tasks");
-    }
-  };
+  // const getMyActiveJobList = async () => { // FUNCTION TO POPULATE ACTIVE/CURRENT TASK LIST
+  //   try {
+  //     const res = await userApi.getMyActiveTaskList();
+  //     setMyActiveJobList({loading:false, data:res?.data?.result_list});
+  //     // setMyActiveJobList(res?.data?.result_list);
+  //   } catch (error) {
+  //     setMyActiveJobList({loading:false, data:[]});
+  //     // setMyActiveJobList([]);
+  //     console.log("Error getting tasks");
+  //   }
+  // };
 
   // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
   // const getHomeDate = () => {
@@ -53,11 +53,11 @@ export default function Home(props) {
   //   }
   // };
 
-  useEffect(() => {
-    if(userDetails?.account_type == 'FULL'){
-      getMyActiveJobList();
-    }
-  }, []);
+  // useEffect(() => {
+  //   if(userDetails?.account_type == 'FULL'){
+  //     getMyActiveJobList();
+  //   }
+  // }, []);
 
   return (
     <Layout>
@@ -78,7 +78,7 @@ export default function Home(props) {
             bannerList={props.bannerList}
             dashTypes={props.dashTypes}
             // offersList={MyOffersList}
-            MyActiveJobList={MyActiveJobList}
+            // MyActiveJobList={MyActiveJobList}
             offersList={props.offersList}
             imageServer={props.imageServer}
           />

src/components/jobPopout/OfferJobPopout.jsx

@@ -8,6 +8,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 import { tableReload } from "../../store/TableReloads";
 import { useDispatch } from "react-redux";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 function OfferJobPopout({ details, onClose, situation }) {
   const apiUrl = new usersService();
@@ -21,6 +22,12 @@ function OfferJobPopout({ details, onClose, situation }) {
     trigger: "",
   });
 
+  let thePrice = PriceFormatter(
+    details?.price * 0.01,
+    details?.currency_code,
+    details?.currency
+  );
+
   //FUNCTION TO HANDLE AN OFFER
   const handleOffer = ({ target: { name } }) => {
     const reqData = {
@@ -71,6 +78,7 @@ function OfferJobPopout({ details, onClose, situation }) {
         setTimeout(() => {
           onClose();
           dispatch(tableReload({ type: "MYTASKTABLE" }));
+          dispatch(tableReload({ type: "HOMEBANNERS" }));
           navigate("/mytask", { replace: true });
           setRequestStatus({
             loading: false,
@@ -135,54 +143,72 @@ function OfferJobPopout({ details, onClose, situation }) {
         </div>
         <div className="md:flex bg-white dark:bg-dark-white rounded-lg">
           <div className="p-4 w-full md:w-3/4 md:border-r-2">
-            <p className="text-lg my-5 font-semibold text-slate-900 dark:text-white tracking-wide">
+
+            {/* INPUT SECTION */}
+            <div className='grid md:grid-cols-2'>
+              <div className="my-2 md:flex">
+                <Detail
+                  label="Date"
+                  value={
+                    (details.offer_added && details.offer_added?.split(" ")[0]) ||
+                    "default"
+                  }
+                />
+              </div>
+
+              <div className="my-2 md:flex">
+                <Detail
+                  label="Offer Expire"
+                  value={details.expire && details.expire.split(" ")[0]}
+                />
+              </div>
+            </div>
+
+            <div className='grid md:grid-cols-2'>
+              <div className="my-2 md:flex">
+                <Detail label="Reward" value={thePrice} />
+              </div>
+
+              <div className="my-2 md:flex">
+                <Detail
+                  label="Duration"
+                  value={`${details.timeline_days} day(s)`}
+                />
+              </div>
+            </div>
+
+            <p className="text-lg my-2 font-semibold text-slate-900 dark:text-white tracking-wide max-h-[200px] overflow-y-auto">
               {details.title}
             </p>
 
-            {/* INPUT SECTION */}
             <div className="my-2 md:flex">
-              <Detail
-                label="Date"
-                value={
-                  (details.offer_added && details.offer_added?.split(" ")[0]) ||
-                  "default"
-                }
-              />
+              <label className='job-label w-full md:w-[150px]'>Description</label>
+              <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white max-h-[200px] overflow-y-auto`}>{details.description}</p>
+              {/* <Detail label="Description" value={details.description} /> */}
             </div>
 
-            <div className="my-2 md:flex">
-              <Detail label="Description" value={details.description} />
-            </div>
 
-            <div className="my-2 md:flex">
-              <Detail
-                label="Offer Expire"
-                value={details.expire && details.expire.split(" ")[0]}
-              />
-            </div>
 
-            <div className="my-2 md:flex">
-              <Detail label="Reward" value={details.thePrice} />
-            </div>
-
-            <div className="my-2 md:flex">
-              <Detail
-                label="Duration"
-                value={`${details.timeline_days} day(s)`}
-              />
-            </div>
-
-            <div className="my-2 md:flex">
-              <Detail
-                label="Detail"
-                value={details.job_description || details.description}
+            <div className="my-2 md:flx">
+              {/* <label className='job-label w-full md:w-[150px]'>Detail</label>
+              <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white min-h-[100px] max-h-[200px] overflow-y-auto border-2 rounded-md`}>{details.job_description || details.job_detail}</p> */}
+              <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
+                Delivery Detail
+              </label>
+              <textarea
+                className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+                rows="5"
+                style={{ resize: "none" }}
+                value={details.job_description || details.job_detail}
+                readOnly
               />
             </div>
           </div>
 
           {/* ACTION SECTION */}
           <div className="p-4 w-full md:w-1/4 h-full">
-            <div className="my-3 md:flex md:justify-center">
+            <div className="my-3 md:flex flex-col md:justify-center">
+              <h1 className='mb-2 text-base font-semibold text-slate-900 dark:text-white tracking-wide'>I understand the task</h1>
               {requestStatus.loading && requestStatus.trigger == "offer" ? (
                 <LoadingSpinner size={8} color="sky-blue" />
               ) : (
@@ -190,9 +216,9 @@ function OfferJobPopout({ details, onClose, situation }) {
                   name="accept"
                   onClick={handleOffer}
                   disabled={requestStatus.loading}
-                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="px-2 h-28 flex justify-center items-center btn-gradient text-2xl rounded-xl text-white"
                 >
-                  Accept Offer
+                  Start Now
                 </button>
               )}
             </div>
@@ -205,9 +231,10 @@ function OfferJobPopout({ details, onClose, situation }) {
                   name="reject"
                   onClick={handleOffer}
                   disabled={requestStatus.loading}
-                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="group relative px-2 h-11 flex justify-center items-center text-base text-black dark:text-white"
                 >
                   Reject Offer
+                  <div className='absolute bottom-1 w-full h-[1px] bg-black hidden group-hover:block'></div>
                 </button>
               )}
             </div>

src/middleware/AuthRoute.jsx

@@ -27,7 +27,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable, marketTableList, walletTable, familyBannersListTable } = useSelector(
+  const { jobListTable, marketTableList, walletTable, familyBannersListTable, homeBanners } = useSelector(
     (state) => state.tableReload
   );
 
@@ -111,8 +111,8 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     }
   }, []);
 
-  useEffect(() => {
-    const getNotifications = () => {
+  useEffect(() => { // FUNCTION TO GET NOTIFICATIONS LIST
+    const notifications = () => {
       // function to load user notification
       dispatch(updateNotifications({ loading: true }));
       apiCall
@@ -168,7 +168,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
           dispatch(updateNotifications({ loading: false, data: null }));
         });
     };
-    getNotifications();
+      // delay verify requests by 10000ms
+    const delay15secs = setTimeout(notifications, 15000)
+    return ()=> clearTimeout(delay15secs)
   }, []);
 
   useEffect(() => {
@@ -245,26 +247,26 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
         .catch((error) => {
           console.log("ERROR ", error);
         });
-  }, [isLogin.status]);
+  }, [isLogin.status, homeBanners]);
 
   //FUNCTION TO GET COMMON HEAD DATA
-  useEffect(() => {
-    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
-      return
-    }
-    apiCall
-      .getRecentActivitiedData()
-      .then((res) => {
-        //   debugger;
-        if (res?.data?.internal_return < 0) {
-          return;
-        }
-        dispatch(recentActivitiesData(res.data));
-      })
-      .catch((error) => {
-        console.log("ERROR ", error);
-      });
-  }, [isLogin.status]);
+  // useEffect(() => {
+  //   if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+  //     return
+  //   }
+  //   apiCall
+  //     .getRecentActivitiedData()
+  //     .then((res) => {
+  //       //   debugger;
+  //       if (res?.data?.internal_return < 0) {
+  //         return;
+  //       }
+  //       dispatch(recentActivitiesData(res.data));
+  //     })
+  //     .catch((error) => {
+  //       console.log("ERROR ", error);
+  //     });
+  // }, [isLogin.status]);
 
 
   //FUNCTION TO GET FAMILY BANNERS

src/store/TableReloads.js

@@ -14,6 +14,7 @@ const initialState = {
   familyOfferList: false,
   parentFamilyTaskList: false,
   offerInterestListReload: false,
+  homeBanners: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -61,6 +62,9 @@ export const tableReloadSlice = createSlice({
         case "OFFERINTERESTLISTRELOAD": // to reload offer interest list of owner when a worker sends interest in a job
           state.offerInterestListReload = !state.offerInterestListReload;
           return;
+        case "HOMEBANNERS": // to reload offer interest list of owner when a worker sends interest in a job
+          state.homeBanners = !state.homeBanners;
+          return;
         default:
           return state;
       }

src/views/HomePages.jsx

@@ -1,15 +1,23 @@
+import {useState, useEffect} from 'react'
 import { useSelector } from "react-redux";
 import Home from "../components/Home";
 
 export default function HomePages() {
   const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
 
-  const bannerOptions = {
-    bannerList: commonHeadBanner?.result_list,
-    dashTypes: commonHeadBanner?.home_dash_type,
-    offersList: commonHeadBanner?.offers_list,
-    imageServer: commonHeadBanner?.session_image_server
-  };
+  const [bannerOptions, setBannerOptions] = useState({})
+
+
+
+  useEffect(()=>{
+    const bannerOptions = {
+      bannerList: commonHeadBanner?.result_list,
+      dashTypes: commonHeadBanner?.home_dash_type,
+      offersList: commonHeadBanner?.offers_list,
+      imageServer: commonHeadBanner?.session_image_server
+    };
+    setBannerOptions(bannerOptions)
+  },[commonHeadBanner])
 
   return (
     <>