array length bug fixed

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/Home/FamilyDash.jsx

@@ -5,8 +5,9 @@ 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();
@@ -76,7 +77,12 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
 
         {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) => {
@@ -97,6 +103,8 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
                 )
               })}
             </div>
+            :
+            null
           }
           
           {tab_categories?.data &&
@@ -104,9 +112,29 @@ 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={`group 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">
                       <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' />
@@ -131,18 +159,19 @@ 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}
           />
         )}
       </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/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";
@@ -43,7 +42,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
   // 9308RDR122
 
-
   const handlerBalance = () => {
     setbalanceValue.toggle();
     if (notificationDropdown) {
@@ -153,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 */}
@@ -501,7 +500,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 </div>
               </div>
             </div>
-           
           </div>
         </div>
       </div>
@@ -684,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/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();