formatted date style

.env

@@ -102,4 +102,10 @@ REACT_APP_NEW_LOGIN_LAYOUT=1
 
 #APP DOWNLOAD LINKS
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
-REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+
+# Displays the new family dashboard with boxes
+REACT_APP_SHOW_NEW_FAMILY_DASH=1
+
+# Displays the account dashboard
+REACT_APP_SHOW_ACCOUNT_DASH=1

.env.development

@@ -70,4 +70,10 @@ REACT_APP_NEW_LOGIN_LAYOUT=1
 
 #APP DOWNLOAD LINKS
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
-REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+
+# Displays the new family dashboard with boxes
+REACT_APP_SHOW_NEW_FAMILY_DASH=1
+
+# Displays the account dashboard
+REACT_APP_SHOW_ACCOUNT_DASH=1

.env.production

@@ -77,3 +77,9 @@ REACT_APP_NEW_LOGIN_LAYOUT=1
 #APP DOWNLOAD LINKS
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+
+# Displays the new family dashboard with boxes
+REACT_APP_SHOW_NEW_FAMILY_DASH=1
+
+# Displays the account dashboard
+REACT_APP_SHOW_ACCOUNT_DASH=1

src/assets/images/facebook.svg

@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.5 0H2.5C1.12125 0 0 1.12125 0 2.5V17.5C0 18.8787 1.12125 20 2.5 20H17.5C18.8787 20 20 18.8787 20 17.5V2.5C20 1.12125 18.8787 0 17.5 0Z" fill="#1976D2"/>
-<path d="M16.875 10H13.75V7.5C13.75 6.81 14.31 6.875 15 6.875H16.25V3.75H13.75C11.6788 3.75 10 5.42875 10 7.5V10H7.5V13.125H10V20H13.75V13.125H15.625L16.875 10Z" fill="#FAFAFA"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 0H2.5C1.12125 0 0 1.12125 0 2.5V17.5C0 18.8787 1.12125 20 2.5 20H17.5C18.8787 20 20 18.8787 20 17.5V2.5C20 1.12125 18.8787 0 17.5 0Z" fill="#1976D2"/>
+<path d="M16.875 10H13.75V7.5C13.75 6.81 14.31 6.875 15 6.875H16.25V3.75H13.75C11.6788 3.75 10 5.42875 10 7.5V10H7.5V13.125H10V20H13.75V13.125H15.625L16.875 10Z" fill="#FAFAFA"/>
+</svg>

src/components/AuthPages/Login/index.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useLayoutEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
-import facebookLogo from "../../../assets/images/facebook-4.svg";
+import facebookLogo from "../../../assets/images/facebook.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";

src/components/AuthPages/Login/index2.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useLayoutEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
-import facebookLogo from "../../../assets/images/facebook-4.svg";
+import facebookLogo from "../../../assets/images/facebook.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";

src/components/Cards/AvailableJobsCard.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
 
@@ -19,10 +19,10 @@ export default function AvailableJobsCard({
     datas?.currency
   );
 
-  useEffect(() => {
-    const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
-    setImageUrl(imagePath);
-  }, []);
+  // useEffect(() => {
+  //   const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
+  //   setImageUrl(imagePath);
+  // }, []);
 
   const image = localStorage.getItem("session_token")
     ? `${image_server}${localStorage.getItem("session_token")}/job/${
@@ -55,7 +55,7 @@ export default function AvailableJobsCard({
                     Added
                   </p>
                   <p className="text-base   text-dark-gray dark:text-white">
-                    {datas.offer_added}
+                    {new Date(datas.offer_added).toLocaleDateString()}
                   </p>
                 </div>
               </div>
@@ -66,7 +66,7 @@ export default function AvailableJobsCard({
                     Expires
                   </p>
                   <p className="text-base text-dark-gray dark:text-white text-right">
-                    {datas.expire}
+                    {new Date(datas.expire).toLocaleDateString()}
                   </p>
                 </div>
               </div>
@@ -75,34 +75,16 @@ export default function AvailableJobsCard({
               <div
                 className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
                 style={{
-                  backgroundImage: `url('${imageUrl}')`,
+                  backgroundImage: `url('${image}')`,
                 }}
               >
-                <div className="flex justify-center">{datas.description}</div>
+                <div className="flex justify-center bg-slate-100 p-2 rounded-md">
+                  {datas.description}
+                </div>
               </div>
             </div>
             <div className="details-area">
-              <div className="product-two-options flex justify-between mb-5 relative">
-                {/*      <div className="status">*/}
-                {/*          {datas.isActive && (*/}
-                {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
-                {/*  Active*/}
-                {/*</span>*/}
-                {/*          )}*/}
-                {/*      </div>*/}
-
-                {/*<div className=" review flex space-x-2">*/}
-                {/*    <button*/}
-                {/*        onClick={favoriteHandler}*/}
-                {/*        type="button"*/}
-                {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
-                {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
-                {/*        }`}*/}
-                {/*    >*/}
-                {/*        <Icons name="star" />*/}
-                {/*    </button>*/}
-                {/*</div>*/}
-              </div>
+              <div className="product-two-options flex justify-between mb-5 relative"></div>
 
               <div className="flex justify-between">
                 <div className="flex items-center space-x-2">

src/components/Dashboards/AccountDashboard.jsx

@@ -0,0 +1,202 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+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 ${
+        className || ""
+      }`}
+    >
+      <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;
+
+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 text-sm">
+            {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 text-sm">
+          {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

@@ -1,31 +1,22 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { toast } from "react-toastify";
-import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
-import heroUser from "../../assets/images/hero-user.png";
+import React from "react";
 import CountDown from "../Helpers/CountDown";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
-import HomeSliders from "../Home/HomeSliders";
 
-export default function FamilyParentDashboard({ className, bannerList, nextDueTask }) {
-  const settings = {
-    autoplay: true,
-    dots: true,
-    arrows: false,
-    infinite: true,
-    swipe: true,
-  };
-  const sildeData = null;
+export default function JobOwnerDashboard({
+  className,
+  bannerList,
+  nextDueTask,
+}) {
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   let loginDate = userDetails?.last_login.split(" ")[0];
-  let { firstname, lastname, email, profile_pic } = userDetails;
+  let { firstname, lastname, email } = userDetails;
   let userEmail = email.split("@")[0];
 
   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-blue-500 ${
+      className={`w-full h-[75px] flex p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -34,70 +25,57 @@ export default function FamilyParentDashboard({ className, bannerList, nextDueTa
         backgroundSize: "cover",
       }}
     >
-      <div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
+      <div className="h-full flex w-full justify-between mb-5 lg:mb-0">
         {/* heading */}
-        <div>
-          <h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
+        <div className="flex gap-8">
+          <h1 className="text-base ng font-medium text-white tracking-wide">
             Welcome
           </h1>
-          <span className="text-[18px] font-thin tracking-wide text-white">
-            Last Login : {loginDate}
-          </span>
-        </div>
-        {/* user */}
-        <div className="flex items-center space-x-3">
-          <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
-            <img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
-          </div>
+          {/* user */}
           <div>
-            <p className="text-xl tracking-wide font-bold antise text-white">
+            <p className="text-base tracking-wide font-bold antise text-white">
               {`${firstname} ${lastname}`}
             </p>
             <p className="text-sm tracking-wide text-white">@{userEmail}</p>
           </div>
         </div>
+
         {/* countdown */}
-        {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
-          <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
-            <div className="flex flex-col justify-between">
-              <p className="text-base text-white tracking-wide">Current Task</p>
-              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                {(nextDueTask.next_due.item_code).substr(0,4)+'...'}
-              </p>
-              <p className="text-base text-white tracking-wide">
-                {nextDueTask.next_due.price * 0.01} Naira
-              </p>
-            </div>
-            <div className="w-[1px] h-full bg-white-opacity"></div>
-            <div className="flex flex-col justify-between">
-              <p className="text-base text-white tracking-wide">Next due in</p>
-              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
-                <CountDown lastDate={nextDueTask.next_due.due_date} />
-              </p>
-              <div className="text-base text-white tracking-wide flex gap-[23px]">
-                <span>Hrs</span>
-                <span>Min</span>
-                <span>Sec</span>
+        {nextDueTask?.next_due &&
+          Object.keys(nextDueTask.next_due)?.length != 0 && (
+            <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
+              <div className="flex flex-col justify-between">
+                <p className="text-base text-white tracking-wide">
+                  Current Task
+                </p>
+                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                  {nextDueTask.next_due.item_code.substr(0, 4) + "..."}
+                </p>
+                <p className="text-base text-white tracking-wide">
+                  {nextDueTask.next_due.price * 0.01} Naira
+                </p>
+              </div>
+              <div className="w-[1px] h-full bg-white-opacity"></div>
+              <div className="flex flex-col justify-between">
+                <p className="text-base text-white tracking-wide">
+                  Next due in
+                </p>
+                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                  {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
+                  <CountDown lastDate={nextDueTask.next_due.due_date} />
+                </p>
+                <div className="text-base text-white tracking-wide flex gap-[23px]">
+                  <span>Hrs</span>
+                  <span>Min</span>
+                  <span>Sec</span>
+                </div>
               </div>
             </div>
-          </div>
-        )}
-        {/* action */}
-        <div className="flex lg:space-x-3 space-x-1 items-center">
-          <Link to="/mytask" className="text-white text-base">
-            <span className=" border-b dark:border-[#5356fb29]  border-white">
-              {" "}
-              View All Task(s)
-            </span>
-          </Link>
-        </div>
+          )}
+        <span className="text-base font-thin tracking-wide text-white flex items-end">
+          Last Login : {loginDate}
+        </span>
       </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
     </div>
   );
 }

src/components/Dashboards/HomeDashboard.jsx

@@ -1,103 +1,81 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { toast } from "react-toastify";
-import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
-import heroUser from "../../assets/images/hero-user.png";
+import React from "react";
 import CountDown from "../Helpers/CountDown";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
-import HomeSliders from "../Home/HomeSliders";
 
-export default function HomeDashboard({ className, bannerList, nextDueTask }) {
-  const settings = {
-    autoplay: true,
-    dots: true,
-    arrows: false,
-    infinite: true,
-    swipe: true,
-  };
-  const sildeData = null;
+export default function JobOwnerDashboard({
+  className,
+  bannerList,
+  nextDueTask,
+}) {
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   let loginDate = userDetails?.last_login.split(" ")[0];
-  let { firstname, lastname, email, profile_pic } = userDetails;
+  let { firstname, lastname, email } = userDetails;
   let userEmail = email.split("@")[0];
 
   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 ${
+      className={`w-full h-[75px] flex p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
-        background: `url(${heroBg})`,
+        // background: `url(${heroBg})`,
         backgroundRepeat: "no-repeat",
         backgroundSize: "cover",
       }}
     >
-      <div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
+      <div className="h-full flex w-full justify-between mb-5 lg:mb-0">
         {/* heading */}
-        <div>
-          <h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
+        <div className="flex gap-8">
+          <h1 className="text-base ng font-medium text-white tracking-wide">
             Welcome
           </h1>
-          <span className="text-[18px] font-thin tracking-wide text-white">
-            Last Login : {loginDate}
-          </span>
-        </div>
-        {/* user */}
-        <div className="flex items-center space-x-3">
-          <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
-            <img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
-          </div>
+          {/* user */}
           <div>
-            <p className="text-xl tracking-wide font-bold antise text-white">
+            <p className="text-base tracking-wide font-bold antise text-white">
               {`${firstname} ${lastname}`}
             </p>
             <p className="text-sm tracking-wide text-white">@{userEmail}</p>
           </div>
         </div>
+
         {/* countdown */}
-        {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
-          <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
-            <div className="flex flex-col justify-between">
-              <p className="text-base text-white tracking-wide">Current Task</p>
-              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                {(nextDueTask.next_due.item_code).substr(0,4)+'...'}
-              </p>
-              <p className="text-base text-white tracking-wide">
-                {nextDueTask.next_due.price * 0.01} Naira
-              </p>
-            </div>
-            <div className="w-[1px] h-full bg-white-opacity"></div>
-            <div className="flex flex-col justify-between">
-              <p className="text-base text-white tracking-wide">Next due in</p>
-              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
-                <CountDown lastDate={nextDueTask.next_due.due_date} />
-              </p>
-              <div className="text-base text-white tracking-wide flex gap-[23px]">
-                <span>Hrs</span>
-                <span>Min</span>
-                <span>Sec</span>
+        {nextDueTask?.next_due &&
+          Object.keys(nextDueTask.next_due)?.length != 0 && (
+            <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
+              <div className="flex flex-col justify-between">
+                <p className="text-base text-white tracking-wide">
+                  Current Task
+                </p>
+                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                  {nextDueTask.next_due.item_code.substr(0, 4) + "..."}
+                </p>
+                <p className="text-base text-white tracking-wide">
+                  {nextDueTask.next_due.price * 0.01} Naira
+                </p>
+              </div>
+              <div className="w-[1px] h-full bg-white-opacity"></div>
+              <div className="flex flex-col justify-between">
+                <p className="text-base text-white tracking-wide">
+                  Next due in
+                </p>
+                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                  {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
+                  <CountDown lastDate={nextDueTask.next_due.due_date} />
+                </p>
+                <div className="text-base text-white tracking-wide flex gap-[23px]">
+                  <span>Hrs</span>
+                  <span>Min</span>
+                  <span>Sec</span>
+                </div>
               </div>
             </div>
-          </div>
-        )}
-        {/* action */}
-        <div className="flex lg:space-x-3 space-x-1 items-center">
-          <Link to="/mytask" className="text-white text-base">
-            <span className=" border-b dark:border-[#5356fb29]  border-white">
-              {" "}
-              View All Task(s)
-            </span>
-          </Link>
-        </div>
+          )}
+        <span className="text-base font-thin tracking-wide text-white flex items-end">
+          Last Login : {loginDate}
+        </span>
       </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
     </div>
   );
 }

src/components/Dashboards/JobOwnerDashboard.jsx

@@ -1,31 +1,22 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { toast } from "react-toastify";
-import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
-import heroUser from "../../assets/images/hero-user.png";
+import React from "react";
 import CountDown from "../Helpers/CountDown";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
-import HomeSliders from "../Home/HomeSliders";
 
-export default function JobOwnerDashboard({ className, bannerList, nextDueTask }) {
-  const settings = {
-    autoplay: true,
-    dots: true,
-    arrows: false,
-    infinite: true,
-    swipe: true,
-  };
-  const sildeData = null;
+export default function JobOwnerDashboard({
+  className,
+  bannerList,
+  nextDueTask,
+}) {
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   let loginDate = userDetails?.last_login.split(" ")[0];
-  let { firstname, lastname, email, profile_pic } = userDetails;
+  let { firstname, lastname, email } = userDetails;
   let userEmail = email.split("@")[0];
 
   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-blue-800 ${
+      className={`w-full h-[75px] flex p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -34,70 +25,57 @@ export default function JobOwnerDashboard({ className, bannerList, nextDueTask }
         backgroundSize: "cover",
       }}
     >
-      <div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
+      <div className="h-full flex w-full justify-between mb-5 lg:mb-0">
         {/* heading */}
-        <div>
-          <h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
+        <div className="flex gap-8">
+          <h1 className="text-base font-medium text-white tracking-wide">
             Welcome
           </h1>
-          <span className="text-[18px] font-thin tracking-wide text-white">
-            Last Login : {loginDate}
-          </span>
-        </div>
-        {/* user */}
-        <div className="flex items-center space-x-3">
-          <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
-            <img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
-          </div>
+          {/* user */}
           <div>
-            <p className="text-xl tracking-wide font-bold antise text-white">
+            <p className="text-base tracking-wide font-bold antise text-white">
               {`${firstname} ${lastname}`}
             </p>
             <p className="text-sm tracking-wide text-white">@{userEmail}</p>
           </div>
         </div>
+
         {/* countdown */}
-        {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
-          <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
-            <div className="flex flex-col justify-between">
-              <p className="text-base text-white tracking-wide">Current Task</p>
-              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                {(nextDueTask.next_due.item_code).substr(0,4)+'...'}
-              </p>
-              <p className="text-base text-white tracking-wide">
-                {nextDueTask.next_due.price * 0.01} Naira
-              </p>
-            </div>
-            <div className="w-[1px] h-full bg-white-opacity"></div>
-            <div className="flex flex-col justify-between">
-              <p className="text-base text-white tracking-wide">Next due in</p>
-              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
-                <CountDown lastDate={nextDueTask.next_due.due_date} />
-              </p>
-              <div className="text-base text-white tracking-wide flex gap-[23px]">
-                <span>Hrs</span>
-                <span>Min</span>
-                <span>Sec</span>
+        {nextDueTask?.next_due &&
+          Object.keys(nextDueTask.next_due)?.length != 0 && (
+            <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
+              <div className="flex flex-col justify-between">
+                <p className="text-base text-white tracking-wide">
+                  Current Task
+                </p>
+                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                  {nextDueTask.next_due.item_code.substr(0, 4) + "..."}
+                </p>
+                <p className="text-base text-white tracking-wide">
+                  {nextDueTask.next_due.price * 0.01} Naira
+                </p>
+              </div>
+              <div className="w-[1px] h-full bg-white-opacity"></div>
+              <div className="flex flex-col justify-between">
+                <p className="text-base text-white tracking-wide">
+                  Next due in
+                </p>
+                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                  {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
+                  <CountDown lastDate={nextDueTask.next_due.due_date} />
+                </p>
+                <div className="text-base text-white tracking-wide flex gap-[23px]">
+                  <span>Hrs</span>
+                  <span>Min</span>
+                  <span>Sec</span>
+                </div>
               </div>
             </div>
-          </div>
-        )}
-        {/* action */}
-        <div className="flex lg:space-x-3 space-x-1 items-center">
-          <Link to="/mytask" className="text-white text-base">
-            <span className=" border-b dark:border-[#5356fb29]  border-white">
-              {" "}
-              View All Task(s)
-            </span>
-          </Link>
-        </div>
+          )}
+        <span className="text-base font-thin tracking-wide text-white flex items-end">
+          Last Login : {loginDate}
+        </span>
       </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
     </div>
   );
 }

src/components/Dashboards/OldDashboard.jsx

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
+import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
+import heroUser from "../../assets/images/hero-user.png";
+import CountDown from "../Helpers/CountDown";
+// import HomeSliders from "./HomeSliders";
+import { useSelector } from "react-redux";
+import HomeSliders from "../Home/HomeSliders";
+
+export default function WorkerDashboard({ className, bannerList, nextDueTask }) {
+  const settings = {
+    autoplay: true,
+    dots: true,
+    arrows: false,
+    infinite: true,
+    swipe: true,
+  };
+  const sildeData = null;
+  const { userDetails } = useSelector((state) => state?.userDetails);
+
+  let loginDate = userDetails?.last_login.split(" ")[0];
+  let { firstname, lastname, email, profile_pic } = userDetails;
+  let userEmail = email.split("@")[0];
+
+  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-blue-900 ${
+        className || ""
+      }`}
+      style={{
+        // background: `url(${heroBg})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+      }}
+    >
+      <div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
+        {/* heading */}
+        <div>
+          <h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
+            Welcome
+          </h1>
+          <span className="text-[18px] font-thin tracking-wide text-white">
+            Last Login : {loginDate}
+          </span>
+        </div>
+        {/* user */}
+        <div className="flex items-center space-x-3">
+          <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
+            <img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
+          </div>
+          <div>
+            <p className="text-xl tracking-wide font-bold antise text-white">
+              {`${firstname} ${lastname}`}
+            </p>
+            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
+          </div>
+        </div>
+        {/* countdown */}
+        {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
+          <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
+            <div className="flex flex-col justify-between">
+              <p className="text-base text-white tracking-wide">Current Task</p>
+              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                {(nextDueTask.next_due.item_code).substr(0,4)+'...'}
+              </p>
+              <p className="text-base text-white tracking-wide">
+                {nextDueTask.next_due.price * 0.01} Naira
+              </p>
+            </div>
+            <div className="w-[1px] h-full bg-white-opacity"></div>
+            <div className="flex flex-col justify-between">
+              <p className="text-base text-white tracking-wide">Next due in</p>
+              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
+                <CountDown lastDate={nextDueTask.next_due.due_date} />
+              </p>
+              <div className="text-base text-white tracking-wide flex gap-[23px]">
+                <span>Hrs</span>
+                <span>Min</span>
+                <span>Sec</span>
+              </div>
+            </div>
+          </div>
+        )}
+        {/* action */}
+        <div className="flex lg:space-x-3 space-x-1 items-center">
+          <Link to="/mytask" className="text-white text-base">
+            <span className=" border-b dark:border-[#5356fb29]  border-white">
+              {" "}
+              View All Task(s)
+            </span>
+          </Link>
+        </div>
+      </div>
+      <HomeSliders
+        settings={settings}
+        sideData={sildeData}
+        bannerList={bannerList}
+      />
+    </div>
+  );
+}

src/components/Dashboards/WorkerDashboard.jsx

@@ -1,31 +1,22 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { toast } from "react-toastify";
-import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
-import heroUser from "../../assets/images/hero-user.png";
+import React from "react";
 import CountDown from "../Helpers/CountDown";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
-import HomeSliders from "../Home/HomeSliders";
 
-export default function WorkerDashboard({ className, bannerList, nextDueTask }) {
-  const settings = {
-    autoplay: true,
-    dots: true,
-    arrows: false,
-    infinite: true,
-    swipe: true,
-  };
-  const sildeData = null;
+export default function JobOwnerDashboard({
+  className,
+  bannerList,
+  nextDueTask,
+}) {
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   let loginDate = userDetails?.last_login.split(" ")[0];
-  let { firstname, lastname, email, profile_pic } = userDetails;
+  let { firstname, lastname, email } = userDetails;
   let userEmail = email.split("@")[0];
 
   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-blue-900 ${
+      className={`w-full h-[75px] flex p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -34,70 +25,57 @@ export default function WorkerDashboard({ className, bannerList, nextDueTask })
         backgroundSize: "cover",
       }}
     >
-      <div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
+      <div className="h-full flex w-full justify-between mb-5 lg:mb-0">
         {/* heading */}
-        <div>
-          <h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
+        <div className="flex gap-8">
+          <h1 className="text-base ng font-medium text-white tracking-wide">
             Welcome
           </h1>
-          <span className="text-[18px] font-thin tracking-wide text-white">
-            Last Login : {loginDate}
-          </span>
-        </div>
-        {/* user */}
-        <div className="flex items-center space-x-3">
-          <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
-            <img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
-          </div>
+          {/* user */}
           <div>
-            <p className="text-xl tracking-wide font-bold antise text-white">
+            <p className="text-base tracking-wide font-bold antise text-white">
               {`${firstname} ${lastname}`}
             </p>
             <p className="text-sm tracking-wide text-white">@{userEmail}</p>
           </div>
         </div>
+
         {/* countdown */}
-        {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
-          <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
-            <div className="flex flex-col justify-between">
-              <p className="text-base text-white tracking-wide">Current Task</p>
-              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                {(nextDueTask.next_due.item_code).substr(0,4)+'...'}
-              </p>
-              <p className="text-base text-white tracking-wide">
-                {nextDueTask.next_due.price * 0.01} Naira
-              </p>
-            </div>
-            <div className="w-[1px] h-full bg-white-opacity"></div>
-            <div className="flex flex-col justify-between">
-              <p className="text-base text-white tracking-wide">Next due in</p>
-              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
-                <CountDown lastDate={nextDueTask.next_due.due_date} />
-              </p>
-              <div className="text-base text-white tracking-wide flex gap-[23px]">
-                <span>Hrs</span>
-                <span>Min</span>
-                <span>Sec</span>
+        {nextDueTask?.next_due &&
+          Object.keys(nextDueTask.next_due)?.length != 0 && (
+            <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
+              <div className="flex flex-col justify-between">
+                <p className="text-base text-white tracking-wide">
+                  Current Task
+                </p>
+                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                  {nextDueTask.next_due.item_code.substr(0, 4) + "..."}
+                </p>
+                <p className="text-base text-white tracking-wide">
+                  {nextDueTask.next_due.price * 0.01} Naira
+                </p>
+              </div>
+              <div className="w-[1px] h-full bg-white-opacity"></div>
+              <div className="flex flex-col justify-between">
+                <p className="text-base text-white tracking-wide">
+                  Next due in
+                </p>
+                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                  {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
+                  <CountDown lastDate={nextDueTask.next_due.due_date} />
+                </p>
+                <div className="text-base text-white tracking-wide flex gap-[23px]">
+                  <span>Hrs</span>
+                  <span>Min</span>
+                  <span>Sec</span>
+                </div>
               </div>
             </div>
-          </div>
-        )}
-        {/* action */}
-        <div className="flex lg:space-x-3 space-x-1 items-center">
-          <Link to="/mytask" className="text-white text-base">
-            <span className=" border-b dark:border-[#5356fb29]  border-white">
-              {" "}
-              View All Task(s)
-            </span>
-          </Link>
-        </div>
+          )}
+        <span className="text-base font-thin tracking-wide text-white flex items-end">
+          Last Login : {loginDate}
+        </span>
       </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
     </div>
   );
 }

src/components/Dashboards/index.js

@@ -2,10 +2,12 @@ import FamilyParentDashboard from "./FamilyParentDashboard";
 import HomeDashboard from "./HomeDashboard";
 import JobOwnerDashboard from "./JobOwnerDashboard";
 import WorkerDashboard from "./WorkerDashboard";
+import AccountDashboard from "./AccountDashboard";
 
 export {
   FamilyParentDashboard,
   HomeDashboard,
   JobOwnerDashboard,
   WorkerDashboard,
+  AccountDashboard
 };

src/components/Home/FamilyDash.jsx

@@ -1,41 +1,151 @@
-import React from "react";
+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 { Link } from "react-router-dom";
+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);
+
+  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
+  
+  // 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(()=>{
+    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} /> */}
 
-        <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
-          {[1,2,3,4,5].map((item, index) => (
-            <Link to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
-              <div >
-
-              </div>
-            </Link>
-          ))}
-        </div>
-        
-        <div className="my-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 to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
-                <div >
-
-                </div>
-              </Link>
-            ))}
+        {/* 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 &&
+            // 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'
+                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`}>
+                    <div className="h-full w-full">
+                      <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>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                )
+              })}
+            </div>
+          }
+          
+          {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">
+              {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>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                  )}
+                })}
+            </div>
+          </div>
+          }
+        </>
+        }
+
         {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
           <MyOffersFamilyTable
             familyOffers={familyOffers?.result_list}

src/components/Home/FullAccountDash.jsx

@@ -1,10 +1,15 @@
 import { useSelector } from "react-redux";
+import {
+  AccountDashboard,
+  FamilyParentDashboard,
+  HomeDashboard,
+  JobOwnerDashboard,
+  WorkerDashboard,
+} from "../Dashboards";
 import MyJobTable from "../MyTasks/MyJobTable";
 import MyOffersTable from "../MyTasks/MyOffersTable";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import Hero from "./Hero";
 import HomeActivities from "./HomeActivities";
-import { FamilyParentDashboard, HomeDashboard, JobOwnerDashboard, WorkerDashboard } from "../Dashboards";
 
 export default function FullAccountDash(props) {
   // console.log("PROPS IN HOME->", props);
@@ -16,7 +21,7 @@ export default function FullAccountDash(props) {
       case "DEFAULT_HOME_DASH":
         return (
           <HomeDashboard
-            className="mb-10"
+            className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
             nextDueTask={props.nextDueTask}
@@ -25,7 +30,7 @@ export default function FullAccountDash(props) {
       case "FAMILY_PARENT_DASH":
         return (
           <FamilyParentDashboard
-            className="mb-10"
+            className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
             nextDueTask={props.nextDueTask}
@@ -34,7 +39,7 @@ export default function FullAccountDash(props) {
       case "WORKER_HOME_DASH":
         return (
           <WorkerDashboard
-            className="mb-10"
+            className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
             nextDueTask={props.nextDueTask}
@@ -43,7 +48,7 @@ export default function FullAccountDash(props) {
       case "JOBOWNER_HOME_DASH":
         return (
           <JobOwnerDashboard
-            className="mb-10"
+            className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
             nextDueTask={props.nextDueTask}
@@ -58,8 +63,12 @@ export default function FullAccountDash(props) {
     <>
       <div className="home-page-wrapper">
         {renderDashboard()}
+        {process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && (
+          <AccountDashboard className="mb-4" bannerList={props.bannerList} />
+        )}
 
-        {props?.dashTypes !== "undefined" && props.offersList?.data?.result_list?.length ? (
+        {props?.dashTypes !== "undefined" &&
+        props.offersList?.data?.result_list?.length ? (
           <MyOffersTable
             MyActiveOffersList={props.offersList?.data}
             className="mb-10"

src/components/MarketPlace/MainSection.jsx

@@ -109,12 +109,13 @@ export default function MainSection({
               endLength={products?.length}
             >
               {({ datas }) => (
-                <AvailableJobsCard
-                  contentDisplay={contentDisplay}
-                  image_server={image_server}
-                  key={datas.id}
-                  datas={datas}
-                />
+                <div key={datas.job_uid}>
+                  <AvailableJobsCard
+                    contentDisplay={contentDisplay}
+                    image_server={image_server}
+                    datas={datas}
+                  />
+                </div>
               )}
             </DataIteration>
           </div>

src/components/Partials/MobileSideBar.jsx

@@ -89,7 +89,7 @@ export default function MobileSidebar({
             <ul className="flex flex-col space-y-6">
               {/* Using mini component reduces the bulk amount of html */}
               <ListItem
-                title="Dashboard"
+                title= {userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
                 route="/"
                 sidebar={sidebar}
                 iconName="new-dashboard"

src/components/Partials/RightSideBar.jsx

@@ -157,7 +157,7 @@ export default function RightSideBar({myJobList}) {
         </div>
 
         {/*JOB LINKS*/}
-        {myJobList?.data?.result_list?.length > 0 &&
+        {(userDetails?.account_type !== "FAMILY" && myJobList?.data?.result_list?.length > 0) &&
         <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
           {/* heading */}
           <div className="px-8 heading flex justify-between items-center mb-3.5">

src/components/Partials/Sidebar.jsx

@@ -110,7 +110,7 @@ export default function Sidebar({
             <ul className="flex flex-col space-y-6">
               {/* Using mini component reduces the bulk amount of html */}
               <ListItem
-                title="Dashboard"
+                title={userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
                 route="/"
                 sidebar={sidebar}
                 iconName="new-dashboard"

src/lib/apiConst.js

@@ -132,6 +132,8 @@ 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

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Navigate, Outlet, useNavigate } from "react-router-dom";
 import LoadingSpinner from "../components/Spinners/LoadingSpinner";
+import { formattedDate } from "../lib";
 import usersService from "../services/UsersService";
 import { commonHeadBanner } from "../store/CommonHeadBanner";
 import { recentActivitiesData } from "../store/RecentActivitiesData";
@@ -10,8 +11,8 @@ import { updateJobs } from "../store/jobLists";
 import { updateNotifications } from "../store/notifications";
 import { updateUserJobList } from "../store/userJobList";
 import { updateWalletDetails } from "../store/walletDetails";
-import { formattedDate } from "../lib";
-import { tableReload } from "../store/TableReloads";
+import { familyBannersList } from "../store/FamilyBannerList";
+import { familyResources } from "../store/FamilyResources";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -21,12 +22,12 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable, walletTable } = useSelector(
+  const { jobListTable, walletTable, familyBannersListTable } = useSelector(
     (state) => state.tableReload
   );
 
   const {
-    userDetails: { username, uid, session},
+    userDetails: { username, uid, session, account_type },
   } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
   let loggedIn = username && session && uid ? true : false; // variable to determine if user is logged in
@@ -167,6 +168,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, []);
 
   useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
     const getMyJobList = async () => {
       dispatch(updateUserJobList({ loading: true, data: [] }));
       try {
@@ -181,7 +185,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMyJobList();
-  }, [jobListTable]);
+  }, [jobListTable, isLogin.status]);
 
   useEffect(() => {
     const getMyWalletList = async () => {
@@ -201,6 +205,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, [walletTable]);
 
   useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
     // Getting market data
     const getMarketActiveJobList = async () => {
       try {
@@ -211,23 +218,26 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMarketActiveJobList();
-  }, [apiCall, dispatch, jobListTable]);
+  }, [apiCall, dispatch, jobListTable, isLogin.status]);
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
-    apiCall
-      .getHeroJBanners()
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          return;
-        }
-        dispatch(commonHeadBanner(res.data));
-      })
-      .catch((error) => {
-        console.log("ERROR ", error);
-      });
-  }, []);
-  
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){  // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
+      apiCall
+        .getHeroJBanners()
+        .then((res) => {
+          if (res.data.internal_return < 0) {
+            return;
+          }
+          dispatch(commonHeadBanner(res.data));
+        })
+        .catch((error) => {
+          console.log("ERROR ", error);
+        });
+  }, [isLogin.status]);
+
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
     apiCall
@@ -244,6 +254,41 @@ 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]);
+
+  //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,10 +1245,36 @@ 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 = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_ACCOUNT_FAMILY_BANNERS,
+      limit: 20,
+      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/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/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/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,8 @@ import jobReducer from "./jobLists";
 import notificationsReducer from "./notifications";
 import userJobListReducer from "./userJobList";
 import walletDetails from "./walletDetails";
+import familyBannerListReducer from "./FamilyBannerList"
+import familyResourcesReducer from './FamilyResources'
 
 export default configureStore({
   reducer: {
@@ -18,6 +20,8 @@ export default configureStore({
     userJobList: userJobListReducer,
     commonHeadBanner: commonHeadBannerReducer,
     notifications: notificationsReducer,
-    walletDetails: walletDetails
+    walletDetails: walletDetails,
+    familyBannersList: familyBannerListReducer,
+    familyResources: familyResourcesReducer
   },
 });