cache banner API using redux

Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master
increase size of dots
2024-02-26 18:07:58 +01:00 · 2024-02-26 15:46:14 +00:00 · 2024-02-26 16:38:57 +01:00 · 2024-02-26 16:34:58 +01:00 · 2024-02-26 16:34:08 +01:00 · 2024-02-26 14:35:12 +00:00
41 changed files with 1104 additions and 244 deletions
@@ -98,4 +98,14 @@ REACT_APP_FAMILY_MINIMUM_AGE=4
 REACT_APP_FAMILY_MAXIMUM_AGE=18

 #CHANGE LOGIN LAYOUT
-REACT_APP_NEW_LOGIN_LAYOUT=1
+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
@@ -66,4 +66,14 @@ REACT_APP_FAMILY_MINIMUM_AGE=4
 REACT_APP_FAMILY_MAXIMUM_AGE=18

 #CHANGE LOGIN LAYOUT
-REACT_APP_NEW_LOGIN_LAYOUT=1
+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
@@ -73,3 +73,13 @@ REACT_APP_FAMILY_MAXIMUM_AGE=18

 #CHANGE LOGIN LAYOUT
 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=0
+
+# Displays the account dashboard
+REACT_APP_SHOW_ACCOUNT_DASH=0
@@ -17,6 +17,9 @@
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>WrenchBoard</title>
+
+    <!-- FONT AWESOME -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css"/>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -1,22 +1,22 @@
-import Toaster from "./components/Helpers/Toaster";
-import Routers from "./Routers";
-import Default from "./components/Partials/Default";
 import { Navigate, useLocation } from "react-router-dom";
+import Routers from "./Routers";
+import Toaster from "./components/Helpers/Toaster";
+import Default from "./components/Partials/Default";

 function App() {
-    const {pathname} = useLocation()
-    return (
-        <Default>
-            <>
-            {pathname.startsWith('/@') ?
-                <Navigate to="/app" replace={true} />
-            :
-                <Routers />
-            }
-                <Toaster />
-            </>
-        </Default>
-    );
+  const { pathname } = useLocation();
+  return (
+    <Default>
+      <>
+        {pathname.startsWith("/@") ? (
+          <Navigate to="/app" replace={true} />
+        ) : (
+          <Routers />
+        )}
+        <Toaster />
+      </>
+    </Default>
+  );
 }

 export default App;
@@ -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>
@@ -22,7 +22,7 @@ export default function LoginLayout({ slogan, children }) {
        >
        </div> */}
        <div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
-          <div className="py-10 w-full sm:w-11/12 max-w-2xl shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
+          <div className="py-5 w-full sm:w-11/12 max-w-2xl shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
            <div className="w-full flex justify-center items-center">
              {children && children}
            </div>
@@ -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";
@@ -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";
@@ -520,11 +520,36 @@ export default function Login() {
              }
              {/* END of login component */}

+              {/* APP DOWNLOAD STORE */}
+              <div className="w-full mt-4">
+                <div className="w-full flex justify-center items-center gap-4">
+                    <div className='w-28 lg:w-32'>
+                        <a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
+                            <i className="fa-brands fa-apple text-3xl"></i>
+                            <div className="flex flex-col">
+                                <span className="text-[11px]">Available on the</span> 
+                                <span className="text-[12px] lg:text-base">App Store</span>
+                            </div>
+                        </a>
+                    </div>
+                    <div className='w-28 lg:w-32'>
+                        <a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
+                            <i className="fa-brands fa-google-play text-2xl"></i>
+                            <div className="flex flex-col">
+                                <span className="text-[11px]">Available on the</span>
+                                <span className="text-[12px] lg:text-base">Google Play</span>
+                            </div>
+                        </a>
+                    </div>
+                  </div>
+              </div>
              {loginType == "full" && (
-                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
-                  This site is protected by a Captcha. Our Privacy Policy and
-                  Terms of Service apply.
-                </div>
+                <>
+                  <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                    This site is protected by a Captcha. Our Privacy Policy and
+                    Terms of Service apply.
+                  </div>
+                </>
              )}
            </div>
          </div>
@@ -9,19 +9,21 @@ export default function SignUp() {
  // eslint-disable-next-line no-restricted-globals
  const queryParams = new URLSearchParams(location?.search);
  const country = queryParams.get("cnt")?.toUpperCase();
-  
-  const {pathname} = useLocation()
-  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
+
+  const { pathname } = useLocation();
+  const currentPath = country
+    ? `${pathname}?cnt=${country.toLowerCase()}`
+    : pathname; // Determines the new pathname is country query params exist

  const [signUpLoading, setSignUpLoading] = useState(false);
  const [checked, setValue] = useState(false);
  // for the catch error
  const [msgError, setMsgError] = useState("");
  const [showPassword, setShowPassword] = useState(false);
-  const [countries, setCountries] = useState({loading:true, data:[]});
+  const [countries, setCountries] = useState({ loading: true, data: [] });

  const [formData, setFormData] = useState({
-    country: country? country : "",
+    country: country ? country : "",
    first_name: "",
    last_name: "",
    email: "",
@@ -47,22 +49,23 @@ export default function SignUp() {

  // Get Country Api
  const getCountryList = useCallback(async () => {
-    
    try {
      const res = await userApi.getSignupCountryData();
      if (res.status === 200 && res.data.internal_return >= 0) {
        const { result_list } = await res.data;
-        if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
-          let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
-          if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
-            setFormData(prev => ({...prev, country: ''}))
-            return setCountries({loading: false, data: result_list});
+        if (country) {
+          // IF LINK/PATHNAME HAS CNT QUERY VALUE
+          let cnt = result_list.filter((item) => item.code == country); // test to see country passed in query param exist from list of countries supplied by API
+          if (!cnt.length) {
+            // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
+            setFormData((prev) => ({ ...prev, country: "" }));
+            return setCountries({ loading: false, data: result_list });
          }
-          return setCountries({loading: false, data: cnt});
+          return setCountries({ loading: false, data: cnt });
        }
-        setCountries({loading: false, data:result_list});
+        setCountries({ loading: false, data: result_list });
      } else if (res.data.result !== 100) {
-        setCountries({loading: false, data:[]});
+        setCountries({ loading: false, data: [] });
      }
    } catch (error) {
      throw new Error(error);
@@ -113,9 +116,7 @@ export default function SignUp() {
        if (res.status === 200) {
          const { data } = res;
          if (data && data.acc === "DULPICATE") {
-            setMsgError(
-              "Unable to use this username. Please try another username."
-            );
+            setMsgError("Duplicate username. Please try another email.");
            setSignUpLoading(false);
          }
          if (data && data.status === "1") {
@@ -124,6 +125,11 @@ export default function SignUp() {
              setSignUpLoading(false);
            }, 2000);
          }
+
+          if (data && data.status === "5") {
+            setMsgError("Something went wrong. Please try another email.");
+            setSignUpLoading(false);
+          }
        } else {
          setSignUpLoading(false);
          setMsgError("An error occurred");
@@ -187,7 +193,9 @@ export default function SignUp() {
                  name="country"
                  value={formData.country}
                  inputHandler={handleInputChange}
-                  disable={country && countries?.data?.length <= 1 ? true : false}
+                  disable={
+                    country && countries?.data?.length <= 1 ? true : false
+                  }
                />
                <div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
                  <div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
@@ -325,7 +333,7 @@ export default function SignUp() {
                      disabled={countries.loading}
                      type="button"
                      onClick={handleSignUp}
-                      className={`rounded-full mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+                      className={`rounded-full text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
                    >
                      {signUpLoading ? (
                        <div className="signup btn-loader"></div>
@@ -335,6 +343,44 @@ export default function SignUp() {
                    </button>
                  </div>
                </div>
+
+                {/* APP DOWNLOAD STORE */}
+                <div className="w-full mt-4">
+                  <div className="w-full flex justify-center items-center gap-4">
+                    <div className="w-28 lg:w-32">
+                      <a
+                        className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                        target="_blank"
+                        href={process.env.REACT_APP_APPLE_APP}
+                        rel="noreferrer"
+                      >
+                        <i className="fa-brands fa-apple text-3xl"></i>
+                        <div className="flex flex-col">
+                          <span className="text-[11px]">Available on the</span>
+                          <span className="text-[12px] lg:text-base">
+                            App Store
+                          </span>
+                        </div>
+                      </a>
+                    </div>
+                    <div className="w-28 lg:w-32">
+                      <a
+                        className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                        target="_blank"
+                        href={process.env.REACT_APP_ANDROID_APP}
+                        rel="noreferrer"
+                      >
+                        <i className="fa-brands fa-google-play text-2xl"></i>
+                        <div className="flex flex-col">
+                          <span className="text-[11px]">Available on the</span>
+                          <span className="text-[12px] lg:text-base">
+                            Google Play
+                          </span>
+                        </div>
+                      </a>
+                    </div>
+                  </div>
+                </div>
              </div>
            </div>
          </div>
@@ -350,7 +396,7 @@ const SelectOption = ({
  inputHandler,
  value,
  data, // passing the data from parent
-  disable
+  disable,
 }) => {
  return (
    <div className="input-com mb-7">
@@ -364,39 +410,33 @@ const SelectOption = ({
      </div>
      <div>
        <select
-        disabled={disable}
+          disabled={disable}
          name={name}
          id={name}
          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
          onChange={inputHandler}
          value={value}
        >
-          {data?.data?.length > 1 ?
+          {data?.data?.length > 1 ? (
            <>
-            <option value={""}>Select your Country</option>
-            {data?.data?.map((item) => (
-              <option value={item.code} key={item.uid}>
-                {item.country}
-              </option>
-            ))}
+              <option value={""}>Select your Country</option>
+              {data?.data?.map((item) => (
+                <option value={item.code} key={item.uid}>
+                  {item.country}
+                </option>
+              ))}
            </>
-            :
-            data?.data?.length == 1 ?
+          ) : data?.data?.length == 1 ? (
            data?.data?.map((item) => (
              <option value={item.code} key={item.uid}>
                {item.country}
              </option>
            ))
-            :
-            data?.data?.length < 1 && data.loading ?
-            <option value=''>
-              Loading...
-            </option>
-            :
-            <option value=''>
-              No Country Found!
-            </option>
-          }
+          ) : data?.data?.length < 1 && data.loading ? (
+            <option value="">Loading...</option>
+          ) : (
+            <option value="">No Country Found!</option>
+          )}
        </select>
      </div>
    </div>
@@ -51,8 +51,7 @@ export default function VerifyLink() {
            localStorage.setItem("member_id", `${data?.member_id}`);
            localStorage.setItem("session_token", `${data?.session}`);
            localStorage.setItem("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid)
-
+            localStorage.setItem("uid", data?.uid);

            navigate("/", { replace: true });
            setLinkLoader(false);
@@ -80,19 +79,19 @@ export default function VerifyLink() {
  };

  // for verifying the incoming verification link and render the correct component
-  const verifyEmail = useCallback(async (code) => {
+  const verifyEmail = async (code) => {
    try {
      const verifyRes = await userApi.verifyEmail(code);
      if (verifyRes.status === 200) {
        let { data } = verifyRes;
-        console.log('TESTING VERIFY',data)
+        console.log("TESTING VERIFY", data);
        if (
          data &&
-          data.internal_return >= 0 && 
-          data.status == 0 && 
-          data.pending_id != '' && 
-          data.pending_uid != '' && 
-          data.username != '' &&
+          data.internal_return >= 0 &&
+          data.status == 0 &&
+          data.pending_id != "" &&
+          data.pending_uid != "" &&
+          data.username != "" &&
          data.status_text === "Link Verified"
        ) {
          setPageLoader(false);
@@ -106,12 +105,13 @@ export default function VerifyLink() {
      setLinkSuccess(false);
      throw new Error(error);
    }
-  }, []);
+  };

  // delay verify requests by 10000ms
  const debouncedEmail = debounce(verifyEmail, 1000);

  useEffect(() => {
+    setEmail("")
    debouncedEmail(token);
  }, []);

@@ -171,53 +171,57 @@ const SuccessfulComponent = ({
  handleEmail,
  msgErr,
  loader,
-}) => (
-  <div className="input-area">
-    {/* INPUT */}
-    <div className="mb-5">
-      <InputCom
-        fieldClass="px-6"
-        value={email}
-        inputHandler={handleEmail}
-        placeholder="support@mermsemr.com"
-        label="Email"
-        name="email"
-        type="email"
-        iconName="message"
-      />
-    </div>
-    <div className="mb-5">
-      <InputCom
-        fieldClass="px-6"
-        value={password}
-        inputHandler={handlePassword}
-        placeholder="● ● ● ● ● ●"
-        label="Password"
-        name="password"
-        type="password"
-        iconName="password"
-      />
-    </div>
-    {msgErr && (
-      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-        {msgErr}
+}) => {
+  return (
+    <div className="input-area">
+      {/* INPUT */}
+      <div className="mb-5">
+        <InputCom
+          fieldClass="px-6"
+          value={email}
+          inputHandler={handleEmail}
+          placeholder="support@mermsemr.com"
+          label="Email"
+          name="email"
+          type="email"
+          iconName="message"
+          autoComplete="off"
+        />
+      </div>
+      <div className="mb-5">
+        <InputCom
+          fieldClass="px-6"
+          value={password}
+          inputHandler={handlePassword}
+          placeholder="● ● ● ● ● ●"
+          label="Password"
+          name="password"
+          type="password"
+          iconName="password"
+          autoComplete="off"
+        />
+      </div>
+      {msgErr && (
+        <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+          {msgErr}
+        </div>
+      )}
+      <div className="signin-area mb-3.5">
+        <button
+          onClick={onSubmit}
+          type="button"
+          className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+        >
+          {loader ? (
+            <div className="signup btn-loader"></div>
+          ) : (
+            <span>Continue</span>
+          )}
+        </button>
      </div>
-    )}
-    <div className="signin-area mb-3.5">
-      <button
-        onClick={onSubmit}
-        type="button"
-        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-      >
-        {loader ? (
-          <div className="signup btn-loader"></div>
-        ) : (
-          <span>Continue</span>
-        )}
-      </button>
    </div>
-  </div>
-);
+  );
+};

 const ErrorComponent = ({ onClick }) => (
  <div className="input-area">
@@ -51,8 +51,7 @@ export default function VerifyLink() {
            localStorage.setItem("member_id", `${data?.member_id}`);
            localStorage.setItem("session_token", `${data?.session}`);
            localStorage.setItem("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid)
-
+            localStorage.setItem("uid", data?.uid);

            navigate("/", { replace: true });
            setLinkLoader(false);
@@ -85,16 +84,17 @@ export default function VerifyLink() {
      const verifyRes = await userApi.verifyEmail(code);
      if (verifyRes.status === 200) {
        let { data } = verifyRes;
-        console.log('TESTING VERIFY',data)
+        console.log("TESTING VERIFY", data);
        if (
          data &&
-          data.internal_return >= 0 && 
-          data.status == 0 && 
-          data.pending_id != '' && 
-          data.pending_uid != '' && 
-          data.username != '' &&
+          data.internal_return >= 0 &&
+          data.status == 0 &&
+          data.pending_id != "" &&
+          data.pending_uid != "" &&
+          data.username != "" &&
          data.status_text === "Link Verified"
        ) {
+          setEmail(data.username);
          setPageLoader(false);
        } else {
          setPageLoader(false);
@@ -184,6 +184,7 @@ const SuccessfulComponent = ({
        name="email"
        type="email"
        iconName="message"
+        autoComplete="off"
      />
    </div>
    <div className="mb-5">
@@ -196,6 +197,7 @@ const SuccessfulComponent = ({
        name="password"
        type="password"
        iconName="password"
+        autoComplete="off"
      />
    </div>
    {msgErr && (
@@ -1,10 +1,11 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";

 export default function AvailableJobsCard({
  className,
  datas,
+  key,
  hidden = false,
  contentDisplay,
  image_server,
@@ -19,10 +20,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/${
@@ -37,6 +38,7 @@ export default function AvailableJobsCard({
          className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
            className || ""
          }`}
+          key={key}
        >
          <div
            onClick={() => {
@@ -75,34 +77,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">
@@ -8,7 +8,7 @@ export default function HomeBannerOffersCard(props) {
  useEffect(() => {
    let { banner, banner_location } = props?.itemData;
    if (banner_location === "LOCAL") {
-      const imagePath = require(`../../assets/images/${banner}`); // Replace with your directory path for local images
+      const imagePath = require(`../../assets/images/${banner}`);
      setImageUrl(imagePath);
    } else if (banner_location === "URL") setImageUrl(banner);
    else return null;
@@ -0,0 +1,83 @@
+import React from "react";
+
+const AccountDashboard = ({ className }) => {
+  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">
+        <TopBanner />
+        <TopBanner />
+        <TopBanner />
+      </div>
+      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4">
+        <LowerBanner />
+        <LowerBanner />
+      </div>
+    </div>
+  );
+};
+
+export default AccountDashboard;
+
+const TopBanner = () => {
+  let Image = require(`../../assets/images/offer.jpg`);
+  return (
+    <div className="flex flex-col shadow-md rounded-xl">
+      <div className="h-[12rem] rounded-t-xl">
+        <img
+          src={Image}
+          alt="banner-img"
+          className="w-full h-full rounded-t-xl"
+        />
+      </div>
+      <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>
+        <div className="flex justify-between w-full px-2 items-center">
+          <span className="text-slate-300 font-semibold">follow up text</span>
+          <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 = () => {
+  let Image = require(`../../assets/images/offer.jpg`);
+  return (
+    <div 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>
+        </div>
+        <div className="w-[150px] h-[100px]">
+          <img
+            src={Image}
+            alt="banner-img"
+            className="w-full h-full rounded-xl"
+          />
+        </div>
+      </div>
+      <div className="flex justify-between w-full px-2 items-center">
+        <span className="text-slate-300 font-semibold">follow up text</span>
+        <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>
+  );
+};
@@ -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 FamilyParentDashboard({ 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-500 ${
+        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>
+  );
+}
@@ -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 HomeDashboard({ 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 ${
+        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>
+  );
+}
@@ -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 JobOwnerDashboard({ 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-800 ${
+        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>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,13 @@
+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
+};
@@ -27,6 +27,7 @@ export default function InputCom({
  direction,
  tabIndex,
  error,
+  autoComplete="on"
 }) {
  const inputRef = useRef(null);
  // Entry Validation
@@ -107,6 +108,7 @@ export default function InputCom({
          readOnly={disable}
          onBlur={blurHandler}
          dir={direction}
+          autoComplete={autoComplete}
        />
        {iconName && (
          <div className="absolute right-6 bottom-3 z-10 flex gap-2">
@@ -1,16 +1,129 @@
-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 { 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 [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} /> */}
+
+        {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={`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={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>
+
+                      <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>
+                  </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 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>
+
+                    <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>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </>
+        }
+
        {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
          <MyOffersFamilyTable
            familyOffers={familyOffers?.result_list}
@@ -1,8 +1,14 @@
 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";

 export default function FullAccountDash(props) {
@@ -10,16 +16,61 @@ export default function FullAccountDash(props) {

  const { userDetails } = useSelector((state) => state?.userDetails);

+  const renderDashboard = () => {
+    switch (props.dashTypes) {
+      case "DEFAULT_HOME_DASH":
+        return (
+          <HomeDashboard
+            className="mb-10"
+            data={userDetails}
+            bannerList={props.bannerList}
+            nextDueTask={props.nextDueTask}
+          />
+        );
+      case "FAMILY_PARENT_DASH":
+        return (
+          <FamilyParentDashboard
+            className="mb-10"
+            data={userDetails}
+            bannerList={props.bannerList}
+            nextDueTask={props.nextDueTask}
+          />
+        );
+      case "WORKER_HOME_DASH":
+        return (
+          <WorkerDashboard
+            className="mb-10"
+            data={userDetails}
+            bannerList={props.bannerList}
+            nextDueTask={props.nextDueTask}
+          />
+        );
+      case "JOBOWNER_HOME_DASH":
+        return (
+          <JobOwnerDashboard
+            className="mb-10"
+            data={userDetails}
+            bannerList={props.bannerList}
+            nextDueTask={props.nextDueTask}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  console.log(process.env.REACT_APP_SHOW_ACCOUNT_DASH)
+
  return (
    <>
      <div className="home-page-wrapper">
-        <Hero
-          className="mb-10"
-          data={userDetails}
-          bannerList={props.bannerList}
-          nextDueTask={props.nextDueTask}
-        />
-        {props.offersList?.data?.result_list?.length ? (
+        {process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && (
+          <AccountDashboard className="mb-4" />
+        )}
+        {renderDashboard()}
+
+        {props?.dashTypes !== "undefined" &&
+        props.offersList?.data?.result_list?.length ? (
          <MyOffersTable
            MyActiveOffersList={props.offersList?.data}
            className="mb-10"
@@ -82,6 +82,7 @@ export default function Home(props) {
          <FullAccountDash
            nextDueTask={nextDueTask}
            bannerList={props.bannerList}
+            dashTypes={props.dashTypes}
            offersList={MyOffersList}
            MyActiveJobList={MyActiveJobList}
          />
@@ -112,7 +112,7 @@ export default function MainSection({
                <AvailableJobsCard
                  contentDisplay={contentDisplay}
                  image_server={image_server}
-                  key={datas.id}
+                  key={datas.job_uid}
                  datas={datas}
                />
              )}
@@ -66,6 +66,8 @@ const initialValues = {
 function AddFundDollars(props) {
  let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS; // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD

+  let [loadingState, setLoadingState] = useState(false)
+
  const apiCall = new usersService();
  let countryWallet = props.walletItem.country;
  const [selectedOption, setSelectedOption] = useState("previous");
@@ -162,10 +164,11 @@ function AddFundDollars(props) {
      }
    }

-    props.setConfirmCredit((prev) => ({
-      ...prev,
-      show: { awaitConfirm: { loader: true } },
-    }));
+    // props.setConfirmCredit((prev) => ({
+    //   ...prev,
+    //   show: { awaitConfirm: { loader: true } },
+    // }));
+    setLoadingState(true)

    // Extracting card_uid from the previous card details
    const paymentCardValue = prevCardDetails["payment-card"];
@@ -193,6 +196,18 @@ function AddFundDollars(props) {
      if (res.data.internal_return < 0) {
        props.setInputError("An Error Occurred");
        throw new Error("An Error Occurred");
+
+        // use commented code when you when to display pop for failed start credit API
+        // props.setConfirmCredit((prev) => ({
+        //   ...prev,
+        //   show: {
+        //     awaitConfirm: { loader: false, state: false },
+        //     acceptConfirm: { loader: false, state: true },
+        //   },
+        //   data: {internal_return: -1}
+        // }));
+        setLoadingState(false)
+        return
      }

      const _response = res.data;
@@ -204,6 +219,7 @@ function AddFundDollars(props) {
      stateData = { ...stateData, ..._response };

      setTimeout(() => {
+        setLoadingState(false)
        props.setConfirmCredit({
          show: {
            awaitConfirm: { loader: false, state: true },
@@ -213,6 +229,7 @@ function AddFundDollars(props) {
        });
      }, 1500);
    } catch (error) {
+      setLoadingState(false)
      props.setInputError(error.message);
      setTimeout(() => props.setInputError(""), 5000);
      props.setConfirmCredit((prev) => ({
@@ -582,7 +599,7 @@ function AddFundDollars(props) {
                            type="submit"
                            className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
                          >
-                            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
+                            {loadingState ? (
                              <LoadingSpinner size="6" color="sky-blue" />
                            ) : (
                              <>
@@ -616,7 +633,7 @@ function AddFundDollars(props) {
            type="button"
            className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
          >
-            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
+            {loadingState ? (
              <LoadingSpinner size="6" color="sky-blue" />
            ) : (
              <span className="text-white">Continue</span>
@@ -86,6 +86,16 @@ function AddFundPop({
        }));
        setInputError("An Error Occurred");
        setTimeout(() => setInputError(""), 5000);
+
+        // use commented code when you when to display pop for failed start credit API
+        // setConfirmCredit((prev) => ({
+        //   ...prev,
+        //   show: {
+        //     awaitConfirm: { loader: false, state: false },
+        //     acceptConfirm: { loader: false, state: true },
+        //   },
+        //   data: {internal_return: -1}
+        // }));
        return;
      }

@@ -70,7 +70,8 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                            }`}
                          </span>
                        </div>
-
+                        
+                        {data?.curr_balance &&
                        <div className="flex items-center gap-8">
                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                            Wallet Balance
@@ -79,6 +80,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                            {data?.curr_balance * 0.01}
                          </span>
                        </div>
+                        }

                        {isSuccess && (
                          <div className="flex items-center gap-8">
@@ -239,7 +239,8 @@ function ConfirmAddFund({
        setConfirmCredit((prev) => ({
          ...prev,
          show: {
-            acceptConfirm: { loader: false },
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
          },
        }));
        return;
@@ -261,7 +262,8 @@ function ConfirmAddFund({
      setConfirmCredit((prev) => ({
        ...prev,
        show: {
-          acceptConfirm: { loader: false },
+          awaitConfirm: { loader: false, state: false },
+          acceptConfirm: { loader: false, state: true },
        },
      }));
      console.log(error);
@@ -333,7 +335,8 @@ function ConfirmAddFund({
      setConfirmCredit((prev) => ({
        ...prev,
        show: {
-          acceptConfirm: { loader: false },
+          awaitConfirm: { loader: false, state: false },
+          acceptConfirm: { loader: false, state: true },
        },
      }));
      setTimeout(() => onClose, 10000);
@@ -47,7 +47,7 @@ const WalletRoutes = () => {
        }
        setAllCountries((prev) => ({
          loading: false,
-          data: res.data.result_list,
+          data: res?.data?.result_list,
        }));
      })
      .catch((error) => {
@@ -48,6 +48,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {

  // 9308RDR122

+
  const handlerBalance = () => {
    setbalanceValue.toggle();
    if (notificationDropdown) {
@@ -238,9 +239,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
              </div>
            </button>
            {/* balance */}
-            
+
            {/* My Page Button */}
-            <PageButton />
+            {userDetails.account_type === "FULL" ? <PageButton /> : null}

            {/*<div className="lg:hidden block"></div>*/}
            <WalletHeader
@@ -671,28 +672,28 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
  );
 }

-
 const PageButton = () => {
  return (
-    <Link to="/yourpage" className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4">
-      <div
-          className="flex items-center lg:justify-between justify-center w-full h-full"
-        >
-          <span className="lg:block hidden w-[25px]">
+    <Link
+      to="/yourpage"
+      className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4"
+    >
+      <div className="flex items-center lg:justify-between justify-center w-full h-full">
+        <span className="lg:block hidden w-[25px]">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
-          <path
-            fillRule="evenodd"
-            d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
-            fill="#ffffff"
-            className="color000000 svgShape"
-          ></path>
-        </svg>
-          </span>
-          <p className="lg:text-xl text-lg font-bold text-white">My Page</p>
-          <span className="lg:block hidden">
-            {/* <Icons name="deep-plus" /> */}
-          </span>
-        </div>
+            <path
+              fillRule="evenodd"
+              d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+              fill="#ffffff"
+              className="color000000 svgShape"
+            ></path>
+          </svg>
+        </span>
+        <p className="lg:text-xl text-lg font-bold text-white">My Page</p>
+        <span className="lg:block hidden">
+          {/* <Icons name="deep-plus" /> */}
+        </span>
+      </div>
    </Link>
-  )
-}
+  );
+};
@@ -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"
@@ -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"
@@ -195,14 +195,14 @@ function JobListPopout({
      const res = await apiCall.assignJobTask(reqData);
      let { status, data } = await res;
      if (status != 200 || data.internal_return < 0) {
-        setRequestStatus({ message: "Unable to complete", status: false });
+        setRequestStatus({ message: data?.status ? data?.status : "Unable to assign offer", status: false });
        return setTimeout(() => {
          setLoader({ jobFields: false });
          setRequestStatus({ message: "", status: false });
        }, 3000);
      }
      dispatch(tableReload({ type: "JOBTABLE" }));
-      setRequestStatus({ message: "Successful", status: true });
+      setRequestStatus({ message: data?.status_msg ? data?.status_msg : "Offer Assigned Successful", status: true });
      setTimeout(() => {
        setLoader({ jobFields: false });
        onClose();
@@ -330,7 +330,6 @@ function JobListPopout({

        <div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
          <DetailsComponent />
-
          <>
            {/* ACTION SECTION */}
            {+taskWalletSelector.amount > +details.price ? (
@@ -576,11 +575,6 @@ const JobFieldInput = ({
                              {item?.name}
                            </option>
                          )}
-                          {/* {inputName === "group" && (
-                          <option value={item?.group_id} key={idx}>
-                            {item?.group_name}
-                          </option>
-                        )} */}
                        </React.Fragment>
                      ))}
                    </>
@@ -594,7 +588,11 @@ const JobFieldInput = ({
                        <option value="">{optionText}</option>
                        {data?.groups?.map((item, index) => (
                          <option value={item?.group_id} key={index}>
-                            {item?.group_name}
+                            {`${item?.group_name} (${
+                              item?.member_count == null
+                                ? "0"
+                                : ' ' + item.member_count + ' '
+                            })`}
                          </option>
                        ))}
                      </>
@@ -132,6 +132,7 @@ export const apiConst = {

    WRENCHBOARD_ACCOUNT_HOMEBANNERS:   11200,
    WRENCHBOARD_ACCOUNT_PLAYGROUND:    11201,
+    WRENCHBOARD_ACCOUNT_FAMILY_BANNERS: 22005,

    WRENCHBOARD_ACCOUNT_RECENTS:       11202,
    WRENCHBOARD_ACCOUNT_NOTIFICATIONS: 11205,
@@ -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,7 @@ 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";

 const AuthRoute = ({ redirectPath = "/login", children }) => {
  const apiCall = useMemo(() => new usersService(), []);
@@ -21,12 +21,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 +167,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 +184,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
      }
    };
    getMyJobList();
-  }, [jobListTable]);
+  }, [jobListTable, isLogin.status]);

  useEffect(() => {
    const getMyWalletList = async () => {
@@ -201,6 +204,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 +217,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 +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()
@@ -1249,6 +1249,19 @@ class usersService {
    };
    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);
+  }
  /*
    - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
    - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)
@@ -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;
@@ -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;
      }
@@ -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
  },
 });
@@ -1,18 +1,17 @@
-import React, {useState, useEffect} from 'react'
+import { useSelector } from "react-redux";
 import Home from "../components/Home";
-import usersService from "../services/UsersService";
-
-import { useSelector } from 'react-redux';

 export default function HomePages() {
+  const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);

-  const {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+  const bannerOptions = {
+    bannerList: commonHeadBanner?.result_list,
+    dashTypes: commonHeadBanner?.home_dash_type,
+  };

  return (
    <>
-      <Home
-          bannerList={commonHeadBanner?.result_list}
-      />
+      <Home {...bannerOptions} />
    </>
  );
 }
Author	SHA1	Message	Date
victorAnumudu	06186b3c0f	cache banner API using redux	2024-02-26 18:07:58 +01:00
ameye	bddbe6ceb4	Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master	2024-02-26 15:46:14 +00:00
Ebube	dd802ab22e	increase size of dots	2024-02-26 16:38:57 +01:00
Ebube	8c363765ae	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into home-banners-dashboard	2024-02-26 16:34:58 +01:00
Ebube	f597c207fa	Banner Area Layout	2024-02-26 16:34:08 +01:00
ameye	dc07cff959	Merge branch 'asidebar-link' of WrenchBoard/Users-Wrench into master	2024-02-26 14:35:12 +00:00
victorAnumudu	38766c9cb7	changed Dashboard aside link name to Home	2024-02-26 15:30:30 +01:00
ameye	fc04855d3f	Merge branch 'banner-card' of WrenchBoard/Users-Wrench into master	2024-02-26 13:17:11 +00:00
victorAnumudu	56cb956482	adjusted banner card design	2024-02-26 14:07:15 +01:00
ameye	2f5abc8931	Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master	2024-02-26 10:39:34 +00:00
ameye	026dbb1a0a	Merge branch 'family-banner-bug' of WrenchBoard/Users-Wrench into master	2024-02-26 10:39:23 +00:00
Ebube	efd464ba8a	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into home-banners-dashboard	2024-02-26 02:49:58 +01:00
Ebube	8c400c7ce1	fixed market bug, fixed key issue and added texts fork the cards	2024-02-26 02:49:35 +01:00
victorAnumudu	d3d2b3cb5a	changed to three cards banner	2024-02-26 02:40:25 +01:00
victorAnumudu	3054a5eb9a	remove unused API from family login	2024-02-26 01:55:52 +01:00
Ebube	670f4bbf1a	Added color to component and toggler to the env	2024-02-26 00:12:29 +01:00
ameye	ae73f10c42	Merge branch 'family-banners' of WrenchBoard/Users-Wrench into master	2024-02-25 22:14:19 +00:00
victorAnumudu	de477f32ed	added banner to family dashboard banner list	2024-02-25 21:16:38 +01:00
ameye	2c6e36aea9	Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master	2024-02-23 20:12:12 +00:00
ameye	dc3aa1470e	Merge branch 'family_new_dashboard' of WrenchBoard/Users-Wrench into master	2024-02-23 20:12:07 +00:00
victorAnumudu	9029953432	added familybanners API	2024-02-23 17:29:18 +01:00
Ebube	fa47de7292	Added empty component to the dashboard	2024-02-23 17:19:41 +01:00
victorAnumudu	d0a2b804b9	configured family new dashboard to show only on dev	2024-02-23 16:27:17 +01:00
victorAnumudu	aa48529dca	configured family new dashboard to show only on dev	2024-02-23 16:15:46 +01:00
ameye	ad2745dfce	Merge branch 'section-addition' of WrenchBoard/Users-Wrench into master	2024-02-19 17:37:50 +00:00
victorAnumudu	b6ab3a6ee7	added new section to family acct dashboard	2024-02-19 14:09:20 +01:00
ameye	f968cc5a50	Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master	2024-02-17 16:41:08 +00:00
Ebube	1ddb2fd903	remove mypage component from family	2024-02-17 16:27:09 +01:00
ameye	70f6ac4e24	Merge branch 'failedtopup-alert' of WrenchBoard/Users-Wrench into master	2024-02-15 18:50:06 +00:00
victorAnumudu	3d30481852	displays failed popout box for failed top up transaction	2024-02-15 13:49:05 +01:00
ameye	63c0b07f61	Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master	2024-02-03 23:31:58 +00:00
ameye	60568c42e8	Merge branch 'number-fix' of WrenchBoard/Users-Wrench into master	2024-02-03 23:31:51 +00:00
Ebube	77ac52820d	added the email and offed the autocomplete attr for the component	2024-02-04 00:29:09 +01:00
victorAnumudu	240e075305	assign offer message updated	2024-02-03 22:49:15 +01:00
victorAnumudu	bea41d8181	group count fixed	2024-02-03 22:09:25 +01:00
ameye	6268d68b67	Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master	2024-02-03 20:31:19 +00:00
Ebube	f96b16b373	Added the number identifier for job list	2024-02-03 21:18:49 +01:00
ameye	9fb6a4db86	Merge branch 'download-app-links' of WrenchBoard/Users-Wrench into master	2024-02-02 11:26:36 +00:00
victorAnumudu	1aa3c79666	added download app links to signup page	2024-02-02 09:42:51 +01:00
ameye	ecc2360dc4	Merge branch 'app-download-link' of WrenchBoard/Users-Wrench into master	2024-02-01 20:49:27 +00:00
victorAnumudu	ca9bb1c211	changed class to classname	2024-02-01 19:43:36 +01:00
victorAnumudu	2f756d189a	added app download links on login page	2024-02-01 19:34:01 +01:00
ameye	d7acea769c	Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master	2024-01-30 17:58:31 +00:00
Ebube	7ff5e2b6e0	.	2024-01-30 17:10:39 +01:00
Ebube	2f90c4a6c2	Different dashboards for Home Banner	2024-01-30 17:10:30 +01:00
ameye	29e0345e1c	Merge branch 'Jobs-Manager-Side' of WrenchBoard/Users-Wrench into master	2024-01-27 00:26:56 +00:00