matched the image height in family banner to full member banner

src/components/Dashboards/AccountDashboard.jsx

@@ -1,15 +1,202 @@
-import React from 'react'
+import React from "react";
+import { Link } from "react-router-dom";
 
-const AccountDashboard = ({className}) => {
+const AccountDashboard = ({ className, bannerList }) => {
+  // getting the upper three banners for the home layout
+  const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2);
+  const getLowerBanner = bannerList?.filter((value, idx) => idx > 2);
+
+  let getImage = ({ banner_location, banner }) => {
+    if (banner_location == "LOCAL") {
+      return require(`../../assets/images/${banner}`);
+    } else {
+      return banner;
+    }
+  };
+
+  console.log(getLowerBanner);
   return (
-    <div className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-[#ffed00] ${
+    <div
+      className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
         className || ""
-      }`}>
+      }`}
-      <div className="w-full h-full flex items-center justify-center text-5xl text-center">
+    >
-        Account Dashboard
+      <div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
+        {getUpperBanner?.map((props, idx) => {
+          let image = getImage(props);
+
+          let { short_title, short_description, short_button_text, link_path } =
+            props;
+
+          return (
+            <TopBanner
+              btn={short_button_text}
+              image={image}
+              title={short_title}
+              desc={short_description}
+              link_path={link_path}
+              key={idx}
+            />
+          );
+        })}
+      </div>
+      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4  ">
+        {getLowerBanner?.map((props, idx) => {
+          let image = getImage(props);
+
+          let { short_title, short_description, short_button_text, link_path } =
+            props;
+
+          return (
+            <LowerBanner
+              btn={short_button_text}
+              image={image}
+              title={short_title}
+              desc={short_description}
+              link_path={link_path}
+              key={idx}
+            />
+          );
+        })}
       </div>
     </div>
-  )
+  );
-}
+};
 
-export default AccountDashboard
+export default AccountDashboard;
+
+const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
+  return (
+    <div className="flex flex-col shadow-md rounded-xl">
+      <Link to={link_path} key={key} className="h-[12rem] rounded-t-xl">
+        <img
+          src={image}
+          alt="banner-img"
+          className="w-full h-full rounded-t-xl object-cover"
+        />
+      </Link>
+      <div className="h-[7rem] rounded-b-xl bg-white">
+        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2">
+          <Link to={link_path} className="font-bold text-lg">
+            {title}
+          </Link>
+          <Link to={link_path} className="text-sm">
+            {desc}
+          </Link>
+        </div>
+        <div className="flex justify-between w-full px-2 items-center">
+          <Link to={link_path} className="text-slate-300 font-semibold">
+            {btn}
+          </Link>
+          <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>
+    </div>
+  );
+};
+
+const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
+  return (
+    <div
+      key={key}
+      className="flex flex-col bg-white shadow-md h-full rounded-xl"
+    >
+      <div className="w-full flex justify-between border-b border-slate-300 p-2">
+        <div className="h-[130px] flex justify-between items-center">
+          <div className="px-2 flex flex-col gap-2">
+            <Link to={link_path} className="text-lg font-bold">
+              {title}
+            </Link>
+            <p to={link_path} className="text-sm">
+              {desc}
+            </p>
+          </div>
+        </div>
+        <Link to={link_path} className="w-[150px] h-[100px]">
+          <img
+            src={image}
+            alt="banner-img"
+            className="w-full h-full rounded-xl"
+          />
+        </Link>
+      </div>
+      <div className="flex justify-between w-full px-2 items-center">
+        <Link to={link_path} className="text-slate-300 font-semibold">
+          {btn}
+        </Link>
+        <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 BannerSection = ({ banners, variant }) => {
+  const getImage = ({ banner_location, banner }) => {
+    return banner_location === "LOCAL"
+      ? require(`../../assets/images/${banner}`)
+      : banner;
+  };
+
+  return (
+    <>
+      {banners?.map((props, idx) => {
+        const { short_title, short_description, short_button_text, link_path } =
+          props;
+        const image = getImage(props);
+
+        return (
+          <div
+            key={idx}
+            className={`flex flex-col shadow-md rounded-xl ${
+              variant === "top" ? "" : "bg-white"
+            }`}
+          >
+            <div className={`${variant === "top" ? "rounded-t-xl" : ""}`}>
+              <Link to={link_path}>
+                <img
+                  src={image}
+                  alt="banner-img"
+                  className="w-full h-full rounded-t-xl object-cover"
+                />
+              </Link>
+            </div>
+            <div
+              className={`${
+                variant === "top"
+                  ? "rounded-b-xl bg-white"
+                  : "border-b border-slate-300"
+              } h-[7rem]`}
+            >
+              <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2">
+                <Link to={link_path} className="font-bold text-lg">
+                  {short_title}
+                </Link>
+                <Link to={link_path} className="text-sm">
+                  {short_description}
+                </Link>
+              </div>
+              <div className="flex justify-between w-full px-2 items-center">
+                <Link to={link_path} className="text-slate-300 font-semibold">
+                  {short_button_text}
+                </Link>
+                <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>
+          </div>
+        );
+      })}
+    </>
+  );
+};

src/components/Dashboards/FamilyParentDashboard.jsx

@@ -93,11 +93,6 @@ export default function FamilyParentDashboard({ className, bannerList, nextDueTa
           </Link>
         </div>
       </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
     </div>
   );
 }

src/components/Dashboards/HomeDashboard.jsx

@@ -93,11 +93,6 @@ export default function HomeDashboard({ className, bannerList, nextDueTask }) {
           </Link>
         </div>
       </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
     </div>
   );
 }

src/components/Home/FamilyDash.jsx

@@ -4,64 +4,104 @@ 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";
 
 export default function FamilyDash({ familyOffers, MyActiveJobList }) {
   // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
+
+  const dispatch = useDispatch();
   
   const userApi = new usersService();
 
   const trending = MyActiveJobList;
+  
+  const { familyBannersList } = useSelector((state) => state.familyBannersList);
 
-  let [familyBannersList, setFamilyBannersList] = useState({loading:false, result:{}})
+  const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS
+  let [reloadBanner, setReloadBanner] = useState(0)
-    setFamilyBannersList({loading:true, result:[]});
-    try {
-      const res = await userApi.getFamilyBannersList();
-      setFamilyBannersList({loading:false, result:res.data});
-      // console.log('TEST RESPONSE', res.data)
-    } catch (error) {
-      setFamilyBannersList({loading:false, result:[]});
-      console.log("Error getting tasks");
-    }
-  };
 
+  // DO NOT UNCOMMENT THE CODE BELOW
+  
+  // let [familyBannersList, setFamilyBannersList] = useState({loading:false, result:{}})
+  // const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS
+  //   setFamilyBannersList({loading:true, result:[]});
+  //   try {
+  //     const res = await userApi.getFamilyBannersList();
+  //     setFamilyBannersList({loading:false, result:res.data});
+  //     console.log('TEST RESPONSE', res.data)
+  //   } catch (error) {
+  //     setFamilyBannersList({loading:false, result:[]});
+  //     console.log("Error getting tasks");
+  //   }
+  // };
+
+  // useEffect(()=>{
+  //   getFamilyBanners()
+  // },[])
 
   useEffect(()=>{
-    getFamilyBanners()
+    if(reloadBanner >= 2){
-  },[])
+      dispatch(tableReload({ type: "FAMILYBANNERSLIST" })); // RELOAD FAMILY BANNERS LIST EVERY 10 MINS
+      setReloadBanner(0)
+    }
+    const timer = setInterval(()=>{
+      setReloadBanner(prev => prev+1)
+    },300000)
+
+    return ()=>{
+      clearInterval(timer)
+    }
+  },[reloadBanner])
 
   return (
     <div>
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
 
+        {/* Header */}
+        <div className="text-white mb-4 p-2 w-full rounded-xl grid grid-cols-1 sm:grid-cols-2 bg-sky-blue place-content-center">
+          <div className="w-full flex gap-4">
+            <p className="text-lg font-normal">Welcome</p>
+            <div className="self-center">
+              <h1 className="m-0 text-lg font-normal">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
+              <p className="-mt-1 text-sm">Email</p>
+            </div>
+          </div>
+          <div className="w-full text-sm flex justify-end items-end">
+            <p>Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
+          </div>
+        </div>
+
         {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
         <>
-          {!familyBannersList.loading && familyBannersList?.result?.result_list && Object.keys(familyBannersList?.result?.result_list).length > 0 &&
+          {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?.result_list).map((item, index) => {
+              {Object.keys(familyBannersList?.result_list).map((item, index) => {
-                let content = familyBannersList?.result?.result_list[item]
+                let content = familyBannersList?.result_list[item]
                 let action = item == 'recommend' ? 'familymarket' : 'mytask'
                 return (
-                  <Link key={item} to={`/${action}`} className={`h-44 rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                  <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`}>
                     <div className="h-full w-full">
-                      <img className="w-full h-1/2 object-cover rounded-t-lg" src={content.banner.image} alt='banner image' />
+                      <img className="w-full h-[12rem] object-cover object-left rounded-t-xl" src={content.banner.image} alt='banner image' />
-                      <div className="px-2 py-1">
+                      <div className="h-[7rem] flex flex-col justify-between">
-                        <h1 className="text-lg text-black dark:text-white font-medium tracking-wide">{content.banner.text}</h1>
+                        <div className="px-2 py-1 border-b border-slate-300 h-[5.4rem] flex flex-col gap-2">
-                        <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
+                          <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{content.banner.text}</h1>
-                      </div>
+                          <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
-                      {/* Horizontal Line */}
+                        </div>
-                      <div className="w-full h-[1px] bg-slate-300"></div>
+                        {/* Horizontal Line */}
+                        {/* <div className="w-full h-[1px] bg-slate-300"></div> */}
 
-                      <div className="px-2 py-1 flex justify-between items-center">
+                        <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>
+                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
-                        {/* Dots */}
+                          {/* Dots */}
-                        <div className="flex justify-center gap-1">
+                          <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 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>
@@ -71,27 +111,29 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
             </div>
           }
           
-          <div className="my-4">
+          <div className="mb-4">
             <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-3 gap-2 md:gap-4">
               {[1,2,3,4,5].map((item, index) => (
-                  <Link key={item} to={`/`} className={`h-44 rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                  <Link key={item} to={`/`} 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-1/2 object-cover rounded-t-lg" src={''} alt='banner image' />
+                    <img className="w-full h-[12rem] object-cover object-left rounded-t-xl" src={''} alt='banner image' />
-                    <div className="px-2 py-1">
+                    <div className="h-[7rem] flex flex-col justify-between">
-                      <h1 className="text-lg text-black dark:text-white font-medium tracking-wide">{'Heading'}</h1>
+                      <div className="px-2 py-1 border-b border-slate-300 h-[5.4rem] flex flex-col gap-2">
-                      <p className="text-sm text-black dark:text-white">{'Description'}</p>
+                        <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{'Heading'}</h1>
-                    </div>
+                        <p className="text-sm text-black dark:text-white">{'Description'}</p>
-                    {/* Horizontal Line */}
+                      </div>
-                    <div className="w-full h-[1px] bg-slate-300"></div>
+                      {/* Horizontal Line */}
+                      {/* <div className="w-full h-[1px] bg-slate-300"></div> */}
 
-                    <div className="px-2 py-1 flex justify-between items-center">
+                      <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>
+                        <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
-                      {/* Dots */}
+                        {/* Dots */}
-                      <div className="flex justify-center gap-1">
+                        <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 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>

src/components/Home/FullAccountDash.jsx

@@ -59,13 +59,11 @@ export default function FullAccountDash(props) {
     }
   };
 
-  console.log(process.env.REACT_APP_SHOW_ACCOUNT_DASH)
-
   return (
     <>
       <div className="home-page-wrapper">
         {process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && (
-          <AccountDashboard className="mb-4" />
+          <AccountDashboard className="mb-4" bannerList={props.bannerList} />
         )}
         {renderDashboard()}
 

src/middleware/AuthRoute.jsx

@@ -11,6 +11,7 @@ import { updateJobs } from "../store/jobLists";
 import { updateNotifications } from "../store/notifications";
 import { updateUserJobList } from "../store/userJobList";
 import { updateWalletDetails } from "../store/walletDetails";
+import { familyBannersList } from "../store/FamilyBannerList";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -20,7 +21,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable, walletTable } = useSelector(
+  const { jobListTable, walletTable, familyBannersListTable } = useSelector(
     (state) => state.tableReload
   );
 
@@ -252,6 +253,24 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       });
   }, []);
 
+
+  //FUNCTION TO GET FAMILY BANNERS
+  useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FULL'){  // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FULL
+      return
+    }
+    const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS
+      // setFamilyBannersList({loading:true, result:[]});
+      try {
+        const res = await apiCall.getFamilyBannersList();
+        dispatch(familyBannersList(res.data))
+      } catch (error) {
+        console.log("Error getting tasks");
+      }
+    };
+    getFamilyBanners()
+  }, [isLogin.status, familyBannersListTable]);
+
   // useEffect(() => {
   //   apiCall
   //     .getHeroJBanners()

src/store/FamilyBannerList.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+    familyBannersList: {}
+};
+
+export const familyBannersListSlice = createSlice({
+  name: "familyBannersList",
+  initialState,
+  reducers: {
+    familyBannersList: (state,action) => {
+      state.familyBannersList = {...action.payload}
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { familyBannersList } = familyBannersListSlice.actions;
+
+export default familyBannersListSlice.reducer;

src/store/TableReloads.js

@@ -8,6 +8,7 @@ const initialState = {
   couponTable: false,
   walletTable: false,
   uploadsTable: false,
+  familyBannersListTable: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -37,6 +38,9 @@ export const tableReloadSlice = createSlice({
         case "UPLOADSTABLE":
           state.uploadsTable = !state.uploadsTable;
           return;
+        case "FAMILYBANNERSLIST":
+          state.familyBannersListTable = !state.familyBannersListTable;
+          return;
         default:
           return state;
       }

src/store/store.js

@@ -8,6 +8,7 @@ import jobReducer from "./jobLists";
 import notificationsReducer from "./notifications";
 import userJobListReducer from "./userJobList";
 import walletDetails from "./walletDetails";
+import familyBannerListReducer from "./FamilyBannerList"
 
 export default configureStore({
   reducer: {
@@ -18,6 +19,7 @@ export default configureStore({
     userJobList: userJobListReducer,
     commonHeadBanner: commonHeadBannerReducer,
     notifications: notificationsReducer,
-    walletDetails: walletDetails
+    walletDetails: walletDetails,
+    familyBannersList: familyBannerListReducer
   },
 });