array length bug fixed

src/Routers.jsx

@@ -57,6 +57,9 @@ import VerifyPasswordPagesTwo from "./views/VerifyPasswordPagesTwo";
 import VerifyYouPages from "./views/VerifyYouPages";
 import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo";
 import YourPages from "./views/YourPage_";
+import ParentWaitingPage from "./views/ParentWaitingPage";
+import FamilyPendingOfferPage from "./views/FamilyPendingOfferPage";
+import FamilyPastDuePage from "./views/FamilyPastDuePage";
 
 export default function Routers() {
   return (
@@ -129,6 +132,9 @@ export default function Routers() {
           <Route exact path="/market-place" element={<MarketPlacePage />} />
           <Route exact path="/market" element={<MarketPlacePage />} />
           <Route exact path="/familymarket" element={<FamilyMarketPage />} />
+          <Route exact path="/suggested" element={<ParentWaitingPage />} />
+          <Route exact path="/pastdue" element={<FamilyPastDuePage />} />
+          <Route exact path="/pending" element={<FamilyPendingOfferPage />} />
           <Route
             exact
             path="/familysettings"

src/components/Cards/AvailableJobsCard.jsx

@@ -117,7 +117,7 @@ export default function AvailableJobsCard({
           </div>
         </div>
       ) : (
-        <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
+        <div className="card-style-two w-full px-4 py-[0.4rem] my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
           <div className="flex gap-5 items-center w-full">
             <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
               <img src={image} alt="data" className="w-full h-full" />

src/components/Dashboards/AccountDashboard.jsx

@@ -67,11 +67,12 @@ export default AccountDashboard;
 
 const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   return (
-    <div className="flex flex-col shadow-md rounded-xl dark:border-[#5356fb29]">
-      <Link to={link_path} key={key} className="h-[12rem] rounded-t-xl">
+    <div className="flex flex-col shadow-md rounded-xl dark:border-[#5356fb29]" key={key}>
+      <Link to={link_path} className="h-[12rem] rounded-t-xl">
         <img
           src={image}
           alt="banner-img"
+          loading="lazy"
           className="w-full h-full rounded-t-xl object-cover"
         />
       </Link>
@@ -120,6 +121,7 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
           <img
             src={image}
             alt="banner-img"
+            loading="lazy"
             className="w-full h-full rounded-xl"
           />
         </Link>

src/components/Dashboards/FamilyParentDashboard.jsx

@@ -3,7 +3,7 @@ import CountDown from "../Helpers/CountDown";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
 
-export default function JobOwnerDashboard({
+export default function FamilyParentDashboard({
   className,
   bannerList,
   nextDueTask,
@@ -16,7 +16,7 @@ export default function JobOwnerDashboard({
 
   return (
     <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex p-1 flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
+      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -28,15 +28,17 @@ export default function JobOwnerDashboard({
       <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
         {/* heading */}
         <div className="flex gap-8">
-          <h1 className="text-base ng font-medium text-white tracking-wide">
+          <h1 className="text-base font-medium text-white tracking-wide">
             Welcome
           </h1>
           {/* user */}
-          <div>
-            <p className="text-base tracking-wide font-bold antise text-white">
+          <div className="flex flex-col gap-1">
+            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
               {`${firstname} ${lastname}`}
             </p>
-            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
+            <p className="text-sm tracking-wide text-white leading-[1]">
+              @{userEmail}
+            </p>
           </div>
         </div>
 

src/components/Dashboards/HomeDashboard.jsx

@@ -3,11 +3,7 @@ import CountDown from "../Helpers/CountDown";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
 
-export default function JobOwnerDashboard({
-  className,
-  bannerList,
-  nextDueTask,
-}) {
+export default function HomeDashboard({ className, bannerList, nextDueTask }) {
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   let loginDate = userDetails?.last_login.split(" ")[0];
@@ -16,7 +12,7 @@ export default function JobOwnerDashboard({
 
   return (
     <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex p-1 flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
+      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -28,15 +24,17 @@ export default function JobOwnerDashboard({
       <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
         {/* heading */}
         <div className="flex gap-8">
-          <h1 className="text-base ng font-medium text-white tracking-wide">
+          <h1 className="text-base font-medium text-white tracking-wide">
             Welcome
           </h1>
           {/* user */}
-          <div>
-            <p className="text-base tracking-wide font-bold antise text-white">
+          <div className="flex flex-col gap-1">
+            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
               {`${firstname} ${lastname}`}
             </p>
-            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
+            <p className="text-sm tracking-wide text-white leading-[1]">
+              @{userEmail}
+            </p>
           </div>
         </div>
 

src/components/Dashboards/JobOwnerDashboard.jsx

@@ -16,7 +16,7 @@ export default function JobOwnerDashboard({
 
   return (
     <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex p-1 flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
+      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -32,11 +32,13 @@ export default function JobOwnerDashboard({
             Welcome
           </h1>
           {/* user */}
-          <div>
-            <p className="text-base tracking-wide font-bold antise text-white">
+          <div className="flex flex-col gap-1">
+            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
               {`${firstname} ${lastname}`}
             </p>
-            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
+            <p className="text-sm tracking-wide text-white leading-[1]">
+              @{userEmail}
+            </p>
           </div>
         </div>
 

src/components/Dashboards/WorkerDashboard.jsx

@@ -3,7 +3,7 @@ import CountDown from "../Helpers/CountDown";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
 
-export default function JobOwnerDashboard({
+export default function WorkerDashboard({
   className,
   bannerList,
   nextDueTask,
@@ -16,7 +16,7 @@ export default function JobOwnerDashboard({
 
   return (
     <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex p-1 flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
+      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -28,15 +28,17 @@ export default function JobOwnerDashboard({
       <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
         {/* heading */}
         <div className="flex gap-8">
-          <h1 className="text-base ng font-medium text-white tracking-wide">
+          <h1 className="text-base font-medium text-white tracking-wide">
             Welcome
           </h1>
           {/* user */}
-          <div>
-            <p className="text-base tracking-wide font-bold antise text-white">
+          <div className="flex flex-col gap-1">
+            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
               {`${firstname} ${lastname}`}
             </p>
-            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
+            <p className="text-sm tracking-wide text-white leading-[1]">
+              @{userEmail}
+            </p>
           </div>
         </div>
 

src/components/FamilyAcc/FamilyPastDue.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Layout from '../Partials/Layout'
+
+export default function FamilyPastDue() {
+  return (
+    <Layout>
+        <div>Family PastDue Page Here</div>
+    </Layout>
+  )
+}

src/components/FamilyAcc/FamilyPendingOffer.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import Layout from '../Partials/Layout'
+import MyOffersFamilyTable from '../MyTasks/MyOffersFamilyTable'
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+import usersService from '../../services/UsersService';
+
+export default function FamilyPendingOffer() {
+    const userApi = new usersService();
+
+    const [myOffersList, setMyOffersList] = useState({loading: true, data: []});
+
+    const getMyOffersList = async () => {
+        try {
+            const res = await userApi.getOffersList();
+            setMyOffersList({loading:false, data:res.data});
+            console.log('SAME', res.data)
+        } catch (error) {
+            setMyOffersList({loading:false, data:[]});
+            console.log("Error getting offers", error);
+        }
+    };
+
+    useEffect(()=>{
+        getMyOffersList()
+    },[])
+    return (
+        <Layout>
+            {myOffersList.loading ?
+                <LoadingSpinner size='10' color='sky-blue' height='h-[20rem]'  />
+            :
+            myOffersList?.data?.result_list && myOffersList?.data?.result_list.length > 0 ?
+            <MyOffersFamilyTable
+                familyOffers={myOffersList?.data?.result_list}
+                image_server={myOffersList?.data?.session_image_server}
+                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>
+            }
+        </Layout>
+    )
+}

src/components/FamilyAcc/ParentWaiting.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import Layout from '../Partials/Layout'
+import ParentWaiting from '../MyOffers/ParentWaiting'
+
+export default function ParentWaitingLayout() {
+  return (
+    <Layout>
+        <ParentWaiting />
+    </Layout>
+  )
+}

src/components/Home/FamilyDash.jsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import usersService from "../../services/UsersService";
-import ParentWaiting from "../MyOffers/ParentWaiting";
 import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
 import { useDispatch, useSelector } from "react-redux";
 import { tableReload } from "../../store/TableReloads";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-export default function FamilyDash({ familyOffers, MyActiveJobList }) {
+export default function FamilyDash({ MyActiveJobList, serverImg }) {
   // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
 
   const dispatch = useDispatch();
@@ -65,48 +65,46 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
         {/* Header */}
         <div className="text-white mb-4 p-2 w-full rounded-xl bg-sky-blue place-content-center">
           <div className="w-full flex flex-wrap gap-x-4">
-            <p className="text-lg font-normal">Welcome</p>
+            <p className="text-lg font-normal leading-5">Welcome</p>
             <div className="">
-              <h1 className="text-lg font-normal">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
+              <h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
             </div>
           </div>
           <div className="w-full text-sm flex justify-end items-end">
-            <p>Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
+            <p className="leading-4">Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
           </div>
         </div>
 
         {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
         <>
-          {familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 &&
+          {familyBannersList?.loading ?
+          <div className="w-full bg-white rounded-2xl">
+            <LoadingSpinner size='10' color='sky-blue' height='h-[20rem]' />
+          </div>
+          :
+          familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 ?
             // Loop for Family Banners
             <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
               {Object.keys(familyBannersList?.result_list).map((item, index) => {
                 let content = familyBannersList?.result_list[item]
-                let action = item == 'recommend' ? 'familymarket' : 'mytask'
+                // let action = item == 'recommend' ? 'familymarket' : 'mytask'
                 return (
-                  <Link key={item} to={`/${action}`} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                  <Link key={item} to={`/${content.banner.action}`} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
                     <div className="h-full w-full">
-                      <img className="w-full h-[10rem] object-cover object-left rounded-t-xl" src={content.banner.image} alt='banner image' />
+                      <img className="w-full h-[10rem] object-cover rounded-t-xl" src={content.banner.image} alt='banner image' />
                       <div className="flex flex-col justify-between">
                         <div className="px-2 py-2 border-b border-transparent min-h-[4rem] flex flex-col gap-1">
                           <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{content.banner.text}</h1>
                           <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
                         </div>
-
-                        {/* <div className="px-2 py-1 flex justify-between items-center">
-                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
-                          <div className="flex justify-center gap-1">
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                          </div>
-                        </div> */}
                       </div>
                     </div>
                   </Link>
                 )
               })}
             </div>
+            :
+            null
           }
           
           {tab_categories?.data &&
@@ -114,19 +112,36 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
             <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
             <div className="w-full grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
               {tab_categories.data.map((item) => {
+                // onClick={()=>navigate('/resources', {state:{tab:'created'}})}
+                let resourceState = ''
+                switch(item?.action){
+                  case 'fam-blog':
+                    resourceState = 'blog'
+                    break
+                  case 'ai-question':
+                    resourceState = 'onsale'
+                    break
+                  case 'myfiles':
+                    resourceState = 'created'
+                    break
+                  case 'ai-lab':
+                    resourceState = 'onsale'
+                    break
+                  default:
+                    resourceState = 'blog'
+                    break
+                }
+                // console.log('EX', item.enabled, item?.action, resourceState)
                 if(item.enabled){
                 return (
-                  <Link key={item.uid} to={item?.action} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                  <Link key={item.uid} to={'/resources'} state={{tab:resourceState}} className={`group rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
                     <div className="h-full w-full">
-                      <img className="w-full h-[12rem] object-cover rounded-t-xl" src={item?.banner} alt='banner image' />
+                      <div className="w-full h-[8rem] rounded-t-xl overflow-hidden">
+                        <img className="w-full h-full group-hover:scale-110 object-cover transition-all duration-300" src={item?.banner} alt='banner image' />
+                      </div>
                       <div className="flex flex-col justify-between">
-                        <div className="px-2 py-1 border-b border-slate-300 min-h-[5rem] flex flex-col gap-1">
+                        <div className="px-2 py-1 border-b border-transparent min-h-[2rem] flex justify-between items-center gap-1">
                           <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{item?.content}</h1>
-                          {/* <p className="text-sm text-black dark:text-white">{'Description'}</p> */}
-                        </div>
-
-                        <div className="px-2 py-1 flex justify-between items-center">
-                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
                           <div className="flex justify-center gap-1">
                             <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                             <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
@@ -144,23 +159,21 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
         </>
         }
 
-        {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
+        {/* {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
           <MyOffersFamilyTable
             familyOffers={familyOffers?.result_list}
             image_server={familyOffers?.session_image_server}
             className="mb-10"
           />
-        )}
+        )} */}
+
         {trending && trending.length > 0 && (
           <FamilyActiveLSlde
             trending={trending}
             className="mb-10"
-            image_server={familyOffers?.session_image_server}
+            image_server={serverImg}
           />
         )}
-
-        {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
-        <ParentWaiting className="mb-10" />
       </div>
     </div>
   );

src/components/Home/FullAccountDash.jsx

@@ -8,8 +8,6 @@ import {
 } from "../Dashboards";
 import MyJobTable from "../MyTasks/MyJobTable";
 import MyOffersTable from "../MyTasks/MyOffersTable";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import HomeActivities from "./HomeActivities";
 
 export default function FullAccountDash(props) {
   // console.log("PROPS IN HOME->", props);
@@ -86,24 +84,17 @@ export default function FullAccountDash(props) {
               imageServer={props.offersList?.data?.session_image_server}
             />
           </>
-        ) : !props.offersList?.loading && !props.MyActiveJobList?.loading ? (
-          <HomeActivities className="mb-10" />
-        ) : (
-          <div className="w-full h-[220px] flex items-center justify-center">
-            <LoadingSpinner size="16" color="sky-blue" />
-          </div>
-        )}
-
-        {/*<UpdateTable className="mb-10"/>*/}
-        {/*<SellHistoryMarketVisitorAnalytic className="mb-10"/>*/}
-        {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
-
-        {/*<HomeTaskDisplay*/}
-        {/*    jobData={jobData}*/}
-        {/*    className="mb-10"*/}
-        {/*    bannerList={props.bannerList}*/}
-        {/*/>*/}
+        ) : null}
       </div>
     </>
   );
 }
+
+// : !props.offersList?.loading && !props.MyActiveJobList?.loading ? (
+//   <HomeActivities className="mb-10" />
+// ) 
+// : (
+//   <div className="w-full h-[220px] flex items-center justify-center">
+//     <LoadingSpinner size="16" color="sky-blue" />
+//   </div>
+// )

src/components/Home/HomeActivities.jsx

@@ -53,7 +53,7 @@ export default function HomeActivities({ className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow relative min-h-[520px] ${
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl relative min-h-[520px] ${
         className || ""
       }`}
     >

src/components/Home/index.jsx

@@ -60,8 +60,9 @@ export default function Home(props) {
     const fetchData = async () => {
       await Promise.all([getHomeDate(), getMyOffersList()]);
     };
-
-    fetchData();
+    if(userDetails?.account_type == 'FULL'){
+      fetchData();
+    }
   }, []);
 
   useEffect(() => {
@@ -75,7 +76,8 @@ export default function Home(props) {
           <FamilyDash
             account={userDetails}
             commonHeadData={props.bannerList}
-            familyOffers={MyOffersList?.data}
+            // familyOffers={MyOffersList?.data}
+            serverImg = {userDetails?.session_image_server}
             MyActiveJobList={MyActiveJobList?.data}
           />
         ) : userDetails && userDetails?.account_type == "FULL" ? (

src/components/MyOffers/ParentWaiting.jsx

@@ -31,40 +31,17 @@ export default function ParentWaiting({ className }) {
         </div>
         {/* <div className="overview-section-wrapper py-2 min-h-[450px] lg:flex lg:space-x-2 flex-1 lg:gap-8"> */}
         <div className="overview-section-wrapper py-2 min-h-[400px] lg:grid grid-cols-2 gap-4">
-          <div className="mb-10 lg:mb-0 h-full w-full bg-white dark:bg-dark-white rounded-2xl overflow-hidden">
+          <div className="overview-countdown mb-10 lg:mb-0 h-full w-full flex flex-col justify-between p-4 rounded-2xl bg-white dark:bg-dark-white">
+            {<ParentWaitingTable />}
+          </div>
+
+          <div className="h-full w-full bg-white dark:bg-dark-white rounded-2xl overflow-hidden">
             <img
               src={activeAidsBanner}
               alt="banner"
               className="w-full h-full"
             />
           </div>
-
-          <div className="overview-countdown h-full w-full flex flex-col justify-between p-4 rounded-2xl bg-white dark:bg-dark-white">
-            {<ParentWaitingTable />}
-
-            {/*          <div className="lg:mb-0 mb-3">*/}
-            {/*              <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
-            {/*                  Lock and Lob x Fiesta Spurs*/}
-            {/*              </h1>*/}
-            {/*              <span className="text-[18px] font-thin tracking-wide   text-dark-gray dark:text-white">*/}
-            {/*  ID : 2320382*/}
-            {/*</span>*/}
-            {/*          </div>*/}
-            {/*          /!* user *!/*/}
-            {/*          <div className="flex items-center space-x-3 lg:mb-0 mb-3">*/}
-            {/*              <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">*/}
-            {/*                  <img src={HeroUser} alt="" />*/}
-            {/*              </div>*/}
-            {/*              <div>*/}
-            {/*                  <p className="text-xl tracking-wide font-bold antise   text-dark-gray dark:text-white">*/}
-            {/*                      Brokln Simons*/}
-            {/*                  </p>*/}
-            {/*                  <p className="text-sm tracking-wide   text-dark-gray dark:text-white">*/}
-            {/*                      @broklinslam_75*/}
-            {/*                  </p>*/}
-            {/*              </div>*/}
-            {/*          </div>*/}
-          </div>
         </div>
       </div>
     </>

src/components/Partials/Header.jsx

@@ -1,18 +1,17 @@
-import React, { useContext, useMemo, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import React, { useContext } from "react";
+import { Link, useLocation } from "react-router-dom";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
 import bank3 from "../../assets/images/bank-3.png";
 import bank4 from "../../assets/images/bank-4.png";
 import profileImg from "../../assets/images/profile.jpg";
 import useToggle from "../../hooks/useToggle";
-import usersService from "../../services/UsersService";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 import ModalCom from "../Helpers/ModalCom";
 import WalletHeader from "../MyWallet/WalletHeader";
 
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import Flag from "../../assets/images/united-states.svg";
 import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
 // import { updateWalletDetails } from "../../store/walletDetails";
@@ -27,11 +26,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [moneyPopup, setPopup] = useToggle(false);
   const darkMode = useContext(DarkModeContext);
   const { userDetails } = useSelector((state) => state?.userDetails);
-  const { walletTable } = useSelector((state) => state.tableReload); // DETERMINES WHEN WALLET RELOADS
-  const [myWalletList, setMyWalletList] = useState([]);
-  const api = useMemo(() => new usersService(), []);
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
 
   const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
   const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
@@ -48,7 +42,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
   // 9308RDR122
 
-
   const handlerBalance = () => {
     setbalanceValue.toggle();
     if (notificationDropdown) {
@@ -158,9 +151,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
               </defs>
             </svg>
           </button>
-          {/* search bar */}
-          <div className="search-bar lg:block hidden w-[376px]">
-            {/*<SearchCom />*/}
+
+          <div className="search-bar xl:hidden justify-center items-center w-[376px]">
+            {/* Home */}
+            <HomeButton />
           </div>
 
           {/* user info */}
@@ -506,15 +500,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 </div>
               </div>
             </div>
-            {/* <div className="for-mobile-profile lg:hidden block">
-              <div
-                // to="/profile"
-                onClick={() => handlerProfile()}
-                className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
-              >
-                <img src={profileImg} alt="profile" className="w-full h-full" />
-              </div>
-            </div> */}
           </div>
         </div>
       </div>
@@ -697,3 +682,33 @@ const PageButton = () => {
     </Link>
   );
 };
+
+const HomeButton = () => {
+  return (
+    <Link
+      to="/"
+      className="flex user-balance cursor-pointer w-[110px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4"
+    >
+      <div className="flex items-center lg:justify-between justify-center w-full h-full">
+        <span className="">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-7 h-7 stroke-white fill-white"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+            />
+          </svg>
+        </span>
+        <p className="lg:text-xl text-lg font-bold text-white">Home</p>
+        <span className=""></span>
+      </div>
+    </Link>
+  );
+};

src/components/Resources/index.jsx

@@ -33,6 +33,9 @@ export default function Resources(props) {
   const CreatedBits = __resources?.productdata?.datas;
   const blogItems = __resources?.blogdata?.payload;
 
+  console.log(__resources);
+  console.log("Blog data >> ", blogItems);
+
   // My Items Data
   const [uploadedFiles, setUploadedFiles] = useState({
     loading: false,
@@ -63,7 +66,7 @@ export default function Resources(props) {
         loading: false,
         msg: "success",
         data: res?.result_list,
-        image:res?.session_image_server
+        image: res?.session_image_server,
       }));
     } catch (error) {
       setUploadedFiles((prev) => ({
@@ -79,7 +82,13 @@ export default function Resources(props) {
   }, [uploadsTable]);
 
   // const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
-  const [tab, setTab] = useState(props.activeTab? props.activeTab : tab_categories ? tab_categories[0]?.name : "");
+  const [tab, setTab] = useState(
+    props.activeTab
+      ? props.activeTab
+      : tab_categories
+      ? tab_categories[0]?.name
+      : ""
+  );
 
   const tabHandler = (value) => {
     setTab(value);
@@ -105,8 +114,12 @@ export default function Resources(props) {
 
   // const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
-    const defaultTabComponent = props.activeTab ? tabComponents[props.activeTab] : <BlogTab blogdata={blogItems} />;
-    const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
+  const defaultTabComponent = props.activeTab ? (
+    tabComponents[props.activeTab]
+  ) : (
+    <BlogTab blogdata={blogItems} />
+  );
+  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
   // Tab Item Component
   const TabItem = ({ tabValue, isActive }) => {
@@ -160,17 +173,16 @@ export default function Resources(props) {
       <ul className="lg:flex lg:space-x-14 space-x-8">
         {tabCategories?.length > 0 &&
           tabCategories?.map((tabValue, idx) => {
-            if(tabValue.enabled){
+            if (tabValue.enabled) {
               return (
                 <TabItem
                   key={tabValue.id}
                   tabValue={tabValue}
                   isActive={tab === tabValue.name || (idx === 0 && tab === "")}
                 />
-              )
+              );
             }
-          }
-          )}
+          })}
       </ul>
     );
   };

src/components/Resources/tabs/MyUploadedFiles.jsx

@@ -134,7 +134,7 @@ export default function MyUploadedFiles({ uploadedFiles }) {
             prev={currentPage == 0 ? true : false}
             next={
               currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-              uploadedFiles?.data.length
+              uploadedFiles?.data?.length
                 ? true
                 : false
             }

src/components/Settings/Tabs/RecentActivitiesTab.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import HomeActivities from "../../Home/HomeActivities";
+
+const RecentActivitiesTab = () => {
+  return (
+    <div className="recent-activity-tab w-full">
+      <HomeActivities />
+    </div>
+  );
+};
+
+export default RecentActivitiesTab;

src/components/Settings/Tabs/index.jsx

@@ -5,6 +5,7 @@ import NotificationSettingTab from "./NotificationSettingTab";
 import PaymentMathodsTab from "./PaymentMathodsTab";
 import PersonalInfoTab from "./PersonalInfoTab";
 import PrivacyPolicyTab from "./PrivacyPolicyTab";
+import RecentActivitiesTab from "./RecentActivitiesTab";
 import TermsConditionTab from "./TermsConditionTab";
 
 export {
@@ -15,5 +16,6 @@ export {
   PaymentMathodsTab,
   PersonalInfoTab,
   PrivacyPolicyTab,
+  RecentActivitiesTab,
   TermsConditionTab,
 };

src/components/Settings/index.jsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
@@ -17,6 +11,7 @@ import {
   PaymentMathodsTab,
   PersonalInfoTab,
   PrivacyPolicyTab,
+  RecentActivitiesTab,
   TermsConditionTab,
 } from "./Tabs";
 import RecipientAccountTab from "./Tabs/RecipientAccountTab";
@@ -102,24 +97,30 @@ export default function Settings({ faq }) {
     },
     {
       id: 6,
+      name: "recent_activities",
+      title: "Recent Activities",
+      iconName: "login-activity",
+    },
+    {
+      id: 7,
       name: "password",
       title: "Change Password",
       iconName: "password-hover",
     },
     {
-      id: 7,
+      id: 8,
       name: "faq",
       title: "FAQ",
       iconName: "block-question",
     },
     {
-      id: 8,
+      id: 9,
       name: "privacy",
       title: "Privacy Policy",
       iconName: "page-right",
     },
     {
-      id: 9,
+      id: 10,
       name: "terms",
       title: "Terms and Conditions",
       iconName: "page-right",
@@ -166,6 +167,7 @@ export default function Settings({ faq }) {
       </div>
     ),
     login_activity: <LoginActivityTab />,
+    recent_activities: <RecentActivitiesTab />,
     password: <ChangePasswordTab />,
     faq: <FaqTab datas={faq} />,
     privacy: <PrivacyPolicyTab />,

src/middleware/AuthRoute.jsx

@@ -264,8 +264,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       // setFamilyBannersList({loading:true, result:[]});
       try {
         const res = await apiCall.getFamilyBannersList();
-        dispatch(familyBannersList(res.data))
+        dispatch(familyBannersList({...res.data, loading:false}))
       } catch (error) {
+        dispatch(familyBannersList({loading:false}))
         console.log("Error getting tasks");
       }
     };

src/services/UsersService.js

@@ -31,6 +31,10 @@ class usersService {
     return this.postAuxEnd("/createuser", reqData);
   }
 
+  blogData() {
+    return this.getAuxEnd("/blogdata", null);
+  }
+
   CompleteOauthLogin(reqData) {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/authlogin", reqData);

src/store/FamilyBannerList.js

@@ -1,7 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-    familyBannersList: {}
+    familyBannersList: {loading:true}
 };
 
 export const familyBannersListSlice = createSlice({

src/views/FamilyPastDuePage.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import FamilyPastDue from '../components/FamilyAcc/FamilyPastDue'
+
+export default function FamilyPastDuePage() {
+  return (
+    <>
+        <FamilyPastDue />
+    </>
+  )
+}

src/views/FamilyPendingOfferPage.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import FamilyPending from '../components/FamilyAcc/FamilyPendingOffer'
+
+export default function FamilyPendingOfferPage() {
+  return (
+    <>
+        <FamilyPending />
+    </>
+  )
+}

src/views/ParentWaitingPage.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ParentWaitingLayout from '../components/FamilyAcc/ParentWaiting'
+
+export default function ParentWaitingPage() {
+  return (
+    <>
+        <ParentWaitingLayout />
+    </>
+  )
+}

src/views/ResourcePage.jsx

@@ -6,7 +6,6 @@ export default function ResourcePage() {
   const {state, pathname} = useLocation() // CHECKS IF THERE IS AN ACTIVE TAB WITH LINK BACK TO RESOURCES
   const [MyResourceData, setMyResourceData] = useState([]);
   const api = new usersService();
-
   const getMyResourceData = async () => {
     try {
       const res = await api.getResourceList();