added family resources API

src/components/Dashboards/AccountDashboard.jsx

@@ -1,6 +1,20 @@
 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-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
@@ -8,13 +22,42 @@ const AccountDashboard = ({ className }) => {
       }`}
     >
       <div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
-        <TopBanner />
-        <TopBanner />
-        <TopBanner />
+        {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">
-        <LowerBanner />
-        <LowerBanner />
+      <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>
   );
@@ -22,24 +65,29 @@ const AccountDashboard = ({ className }) => {
 
 export default AccountDashboard;
 
-const TopBanner = () => {
-  let Image = require(`../../assets/images/offer.jpg`);
+const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   return (
     <div className="flex flex-col shadow-md rounded-xl">
-      <div className="h-[12rem] rounded-t-xl">
+      <Link to={link_path} key={key} className="h-[12rem] rounded-t-xl">
         <img
-          src={Image}
+          src={image}
           alt="banner-img"
-          className="w-full h-full rounded-t-xl"
+          className="w-full h-full rounded-t-xl object-cover"
         />
-      </div>
+      </Link>
       <div className="h-[7rem] rounded-b-xl bg-white">
-        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
-          <h3 className="font-bold text-lg">Banner Title</h3>
-          <p>Banner description text will come follow</p>
+        <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">
-          <span className="text-slate-300 font-semibold">follow up text</span>
+          <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>
@@ -51,27 +99,35 @@ const TopBanner = () => {
   );
 };
 
-const LowerBanner = () => {
-  let Image = require(`../../assets/images/offer.jpg`);
+const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   return (
-    <div className="flex flex-col bg-white shadow-md h-full rounded-xl">
+    <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">
-            <h3 className="text-lg font-bold">Banner Title</h3>
-            <p className="text-sm">Banner description text will come follow</p>
+          <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>
-        <div className="w-[150px] h-[100px]">
+        <Link to={link_path} className="w-[150px] h-[100px]">
           <img
-            src={Image}
+            src={image}
             alt="banner-img"
             className="w-full h-full rounded-xl"
           />
-        </div>
+        </Link>
       </div>
       <div className="flex justify-between w-full px-2 items-center">
-        <span className="text-slate-300 font-semibold">follow up text</span>
+        <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>
@@ -81,3 +137,66 @@ const LowerBanner = () => {
     </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

@@ -18,6 +18,10 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
   
   const { familyBannersList } = useSelector((state) => state.familyBannersList);
 
+  const { familyResources:{ tab_categories } } = useSelector((state) => state.familyResources);
+
+  const { userDetails } = useSelector((state) => state?.userDetails);
+
   let [reloadBanner, setReloadBanner] = useState(0)
 
   // DO NOT UNCOMMENT THE CODE BELOW
@@ -58,6 +62,19 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
 
+        {/* 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>
+            <div className="">
+              <h1 className="text-lg font-normal">{`${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>
+          </div>
+        </div>
+
         {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
         <>
           {familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 &&
@@ -67,23 +84,23 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
                 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' />
-                      <div className="px-2 py-1">
-                        <h1 className="text-lg text-[#083e21] dark:text-white font-normal tracking-wide">{content.banner.text}</h1>
-                        <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
-                      </div>
-                      {/* Horizontal Line */}
-                      <div className="w-full h-[1px] bg-slate-300"></div>
+                      <img className="w-full h-[12rem] object-cover object-left rounded-t-xl" src={content.banner.image} alt='banner image' />
+                      <div className="h-[7rem] flex flex-col justify-between">
+                        <div className="px-2 py-1 border-b border-slate-300 h-[5.4rem] overflow-hidden flex flex-col gap-2">
+                          <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>
-                        {/* Dots */}
-                        <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="px-2 py-1 flex justify-between items-center">
+                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
+                          {/* Dots */}
+                          <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>
@@ -93,34 +110,39 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
             </div>
           }
           
-          <div className="my-4">
+          {tab_categories?.data &&
+          <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`}>
-                  <div className="h-full w-full">
-                    <img className="w-full h-1/2 object-cover rounded-t-lg" src={''} alt='banner image' />
-                    <div className="px-2 py-1">
-                      <h1 className="text-lg text-[#083e21] dark:text-white font-medium tracking-wide">{'Heading'}</h1>
-                      <p className="text-sm text-black dark:text-white">{'Description'}</p>
-                    </div>
-                    {/* Horizontal Line */}
-                    <div className="w-full h-[1px] bg-slate-300"></div>
+              {tab_categories.data.map((item) => {
+                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`}>
+                    <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="h-[7rem] flex flex-col justify-between">
+                        <div className="px-2 py-1 border-b border-slate-300 h-[5.4rem] overflow-hidden flex flex-col gap-2">
+                          <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>
-                      {/* Dots */}
-                      <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="px-2 py-1 flex justify-between items-center">
+                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
+                          {/* Dots */}
+                          <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>
-                  </div>
-                </Link>
-              ))}
+                  </Link>
+                  )}
+                })}
             </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/lib/apiConst.js

@@ -133,6 +133,7 @@ export const apiConst = {
     WRENCHBOARD_ACCOUNT_HOMEBANNERS:   11200,
     WRENCHBOARD_ACCOUNT_PLAYGROUND:    11201,
     WRENCHBOARD_ACCOUNT_FAMILY_BANNERS: 22005,
+    WRENCHBOARD_ACCOUNT_FAMILY_RESOURCES: 22017,
 
     WRENCHBOARD_ACCOUNT_RECENTS:       11202,
     WRENCHBOARD_ACCOUNT_NOTIFICATIONS: 11205,

src/middleware/AuthRoute.jsx

@@ -12,6 +12,7 @@ import { updateNotifications } from "../store/notifications";
 import { updateUserJobList } from "../store/userJobList";
 import { updateWalletDetails } from "../store/walletDetails";
 import { familyBannersList } from "../store/FamilyBannerList";
+import { familyResources } from "../store/FamilyResources";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -271,6 +272,23 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     getFamilyBanners()
   }, [isLogin.status, familyBannersListTable]);
 
+  //FUNCTION TO GET FAMILY RESOURCES
+  useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FULL'){  // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FULL
+      return
+    }
+    const getFamilyResourcesList = async () => { // FUNCTION TO GET FAMILY BANNERS
+      try {
+        const res = await apiCall.getFamilyResources();
+        dispatch(familyResources(res?.data?.result_list))
+        // console.log('RESPONSE', res?.data?.result_list)
+      } catch (error) {
+        console.log("Error getting tasks");
+      }
+    };
+    getFamilyResourcesList()
+  }, [isLogin.status, familyBannersListTable]);
+
   // useEffect(() => {
   //   apiCall
   //     .getHeroJBanners()

src/services/UsersService.js

@@ -1245,11 +1245,11 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: apiConst.WRENCHBOARD_RELATIVE_INVITE,
-      ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/familyrelinvite", postData);
   }
-  
+
   // API FUNCTION TO FAMILY BANNERS
   getFamilyBannersList() {
     var postData = {
@@ -1258,10 +1258,23 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       action: apiConst.WRENCHBOARD_ACCOUNT_FAMILY_BANNERS,
       limit: 20,
-      offset: 1
+      offset: 1,
     };
     return this.postAuxEnd("/familybanners", postData);
   }
+
+  // API FUNCTION TO FAMILY RESOURCES
+  getFamilyResources() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_ACCOUNT_FAMILY_RESOURCES,
+      limit: 20,
+      offset: 1,
+    };
+    return this.postAuxEnd("/familyresources", postData);
+  }
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/store/FamilyResources.js

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

src/store/store.js

@@ -9,6 +9,7 @@ import notificationsReducer from "./notifications";
 import userJobListReducer from "./userJobList";
 import walletDetails from "./walletDetails";
 import familyBannerListReducer from "./FamilyBannerList"
+import familyResourcesReducer from './FamilyResources'
 
 export default configureStore({
   reducer: {
@@ -20,6 +21,7 @@ export default configureStore({
     commonHeadBanner: commonHeadBannerReducer,
     notifications: notificationsReducer,
     walletDetails: walletDetails,
-    familyBannersList: familyBannerListReducer
+    familyBannersList: familyBannerListReducer,
+    familyResources: familyResourcesReducer
   },
 });